ibms/src/views/data_admin/buildGraphy/lib/lookImages.vue

<!--
    上传图片的弹窗
-->

<template>
  <el-dialog title="上传图片" :visible.sync="dialog.lookPic" v-if="dialog.lookPic" width="600px">
    <div style="max-height:700px;overflow-y:auto;">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label">图片</span>
          <div style="width:500px;max-height:500px;">
            <div v-if="picArrs.length">
              <iframe
                id="google_ads_frame3"
                name="google_ads_frame3"
                frameborder="0"
                width="100%"
                height="500px"
                :src="iframeSrc"
                marginwidth="0"
                marginheight="0"
                vspace="0"
                hspace="0"
                allowtransparency="true"
                scrolling="no"
                allowfullscreen="true"
              ></iframe>
            </div>
            <div v-if="!picArrs.length">暂无图片</div>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="videoArr.length">
          <span slot="label">视频</span>
          <div style="width:500px;">
            <div
              v-for=" item in videoArr "
              style="width:200px;height:200px;float:left;margin: 5px;"
            >
              <video
                width="100%"
                height="100%"
                :src="
                '/img/image-service/common/image_get?systemId=dataPlatform&key='+item.key"
                controls
                :poster="'img/image-service/common/image_get?systemId=dataPlatform&key='+ item.key +'&width=200'"
              ></video>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script>
import uploadImgs from "@/components/ledger/lib/uploadImgsName";
import tools from "@/utils/scan/tools"
export default {
  components: {
    uploadImgs
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          lookPic: true
        };
      }
    },
    keysArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      picArrs: [],
      panoramaArr: [],
      videoArr: [],
      videoPicArr: [],
      changeKeys: [],
      iframeSrc: ""
    };
  },
  created() { },
  mounted() { },
  methods: {
    imageItem(images) {
      this.picArrs = images
      this.change()
    },

    panoramaItem(images) {
      this.panoramaArr = images
      this.change()
    },

    videoItem(videos, pe, pics) {
      this.videoArr = videos
      this.videoPicArr = pics
      this.change()
    },

    change() {
      //   let picsArr = this.getArr(this.picArrs, "设备图片", "image")
      //   let videos = this.getArr(this.videoArr, "视频", "video")
      //   let videoPics = this.getArr(this.videoPicArr, "视频资料", "image_video")
      //   let panoramas = this.getArr(this.panoramaArr, "全景照片", "panorama")
      let picsArr = this.picArrs
      let videos = this.videoArr
      let videoPics = this.videoPicArr
      let panoramas = this.panoramaArr
      this.changeKeys = picsArr.concat(videos).concat(videoPics).concat(panoramas)
      console.log(this.changeKeys)
      this.$emit("change", this.changeKeys)
    },

    getArr(arr, name, type) {
      return arr.map(item => {
        return { "systemId": "dataPlatform", "name": name, "type": type, "key": item }
      })
    },

    //将父组件传来的数据进行分组
    fatherTochild() {
      this.panoramaArr = []
      this.videoArr = []
      this.videoPicArr = []
      this.picArrs = []
      if (this.keysArr instanceof Array) {
        this.keysArr.map(item => {
          if (item.type == 'panorama') {
            this.panoramaArr.push(item)
          } else if (item.type == "video") {
            this.videoArr.push(item)
          } else if (item.type == 'image_video') {
            this.videoPicArr.push(item)
          } else {
            this.picArrs.push(item)
          }
        })
      } else {
        this.panoramaArr = []
        this.videoArr = []
        this.videoPicArr = []
        this.picArrs = []
      }
      if (this.picArrs.length) {
        this.$nextTick(_ => {
          this.iframeSrc = process.env.BASE_URL + ":8890/photo-View.html"
          let iframe = document.getElementById("google_ads_frame3")
          console.log(iframe)
          iframe.onload = () => {
            console.log("onload")
            iframe.contentWindow.postMessage(this.picArrs, "*")
          }
        })
      }
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.lookPic) {
          this.fatherTochild()
        }
      }
    }
  }
};
</script>
<style>
</style>