lookImages.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <!--
  2. 上传图片的弹窗
  3. -->
  4. <template>
  5. <el-dialog title="上传图片" :visible.sync="dialog.lookPic" v-if="dialog.lookPic" width="600px">
  6. <div style="max-height:700px;overflow-y:auto;">
  7. <el-tabs type="border-card">
  8. <el-tab-pane>
  9. <span slot="label">图片</span>
  10. <div style="width:500px;max-height:500px;">
  11. <div v-if="picArrs.length">
  12. <iframe
  13. id="google_ads_frame3"
  14. name="google_ads_frame3"
  15. frameborder="0"
  16. width="100%"
  17. height="500px"
  18. :src="iframeSrc"
  19. marginwidth="0"
  20. marginheight="0"
  21. vspace="0"
  22. hspace="0"
  23. allowtransparency="true"
  24. scrolling="no"
  25. allowfullscreen="true"
  26. ></iframe>
  27. </div>
  28. <div v-if="!picArrs.length">暂无图片</div>
  29. </div>
  30. </el-tab-pane>
  31. <el-tab-pane v-if="videoArr.length">
  32. <span slot="label">视频</span>
  33. <div style="width:500px;">
  34. <div
  35. v-for=" item in videoArr "
  36. style="width:200px;height:200px;float:left;margin: 5px;"
  37. >
  38. <video
  39. width="100%"
  40. height="100%"
  41. :src="
  42. '/img/image-service/common/image_get?systemId=dataPlatform&key='+item.key"
  43. controls
  44. :poster="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200'"
  45. ></video>
  46. </div>
  47. </div>
  48. </el-tab-pane>
  49. </el-tabs>
  50. </div>
  51. </el-dialog>
  52. </template>
  53. <script>
  54. import uploadImgs from "@/components/ledger/lib/uploadImgsName";
  55. import tools from "@/utils/scan/tools"
  56. export default {
  57. components: {
  58. uploadImgs
  59. },
  60. props: {
  61. dialog: {
  62. type: Object,
  63. default: function () {
  64. return {
  65. lookPic: true
  66. };
  67. }
  68. },
  69. keysArr: {
  70. type: Array,
  71. default: function () {
  72. return []
  73. }
  74. },
  75. read: {
  76. type: Boolean,
  77. default: false
  78. }
  79. },
  80. data() {
  81. return {
  82. picArrs: [],
  83. panoramaArr: [],
  84. videoArr: [],
  85. videoPicArr: [],
  86. changeKeys: [],
  87. iframeSrc: ""
  88. };
  89. },
  90. created() { },
  91. mounted() { },
  92. methods: {
  93. imageItem(images) {
  94. this.picArrs = images
  95. this.change()
  96. },
  97. panoramaItem(images) {
  98. this.panoramaArr = images
  99. this.change()
  100. },
  101. videoItem(videos, pe, pics) {
  102. this.videoArr = videos
  103. this.videoPicArr = pics
  104. this.change()
  105. },
  106. change() {
  107. // let picsArr = this.getArr(this.picArrs, "设备图片", "image")
  108. // let videos = this.getArr(this.videoArr, "视频", "video")
  109. // let videoPics = this.getArr(this.videoPicArr, "视频资料", "image_video")
  110. // let panoramas = this.getArr(this.panoramaArr, "全景照片", "panorama")
  111. let picsArr = this.picArrs
  112. let videos = this.videoArr
  113. let videoPics = this.videoPicArr
  114. let panoramas = this.panoramaArr
  115. this.changeKeys = picsArr.concat(videos).concat(videoPics).concat(panoramas)
  116. console.log(this.changeKeys)
  117. this.$emit("change", this.changeKeys)
  118. },
  119. getArr(arr, name, type) {
  120. return arr.map(item => {
  121. return { "systemId": "dataPlatform", "name": name, "type": type, "key": item }
  122. })
  123. },
  124. //将父组件传来的数据进行分组
  125. fatherTochild() {
  126. this.panoramaArr = []
  127. this.videoArr = []
  128. this.videoPicArr = []
  129. this.picArrs = []
  130. if (this.keysArr instanceof Array) {
  131. this.keysArr.map(item => {
  132. if (item.type == 'panorama') {
  133. this.panoramaArr.push(item)
  134. } else if (item.type == "video") {
  135. this.videoArr.push(item)
  136. } else if (item.type == 'image_video') {
  137. this.videoPicArr.push(item)
  138. } else {
  139. this.picArrs.push(item)
  140. }
  141. })
  142. } else {
  143. this.panoramaArr = []
  144. this.videoArr = []
  145. this.videoPicArr = []
  146. this.picArrs = []
  147. }
  148. if (this.picArrs.length) {
  149. this.$nextTick(_ => {
  150. this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
  151. let iframe = document.getElementById("google_ads_frame3")
  152. console.log(iframe)
  153. iframe.onload = () => {
  154. console.log("onload")
  155. iframe.contentWindow.postMessage(this.picArrs, "*")
  156. }
  157. })
  158. }
  159. }
  160. },
  161. watch: {
  162. dialog: {
  163. deep: true,
  164. handler: function () {
  165. if (this.dialog.lookPic) {
  166. this.fatherTochild()
  167. }
  168. }
  169. }
  170. }
  171. };
  172. </script>
  173. <style>
  174. </style>