lookImages.vue 4.8 KB

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