hn_bigScreen/src/views/pageThirdFloor/index.vue

<template>
  <!-- 全景 -->
  <div class="page-container">
    <div v-show="!isGetClear" class="page-item fullView-left">
      <div class="database-title">设备概况</div>
      <div class="content-item  last-item">
        <div class="content-item-title">防火门/卷帘门</div>
        <ul class="content-state state-02">
          <li class="leakage-warn"><p>3F1#卷帘门</p><span class="leakage-state-tip" /></li>
          <li><p>3F2#卷帘门</p><span class="leakage-state-tip" /></li>
          <li class="leakage-warn"><p>3F3#卷帘门</p><span class="leakage-state-tip" /></li>
        </ul>
      </div>
    </div>

    <!-- 3D -->
    <div class="page-3d">
      <iframe
        id="myIframe"
        ref="myIframe"
        class="iframe_box"
        src="/webThird/index.html"
        frameborder="0"
        scrolling="no"
        style="background-color: transparent;"
      />
    </div>

    <div v-show="!isGetClear" class="fullView-right" style="justify-content: flex-start;">
      <Video ref="cameraList" @view-video="handleViewVideo" />
      <Alarm />
    </div>
    <!-- 查看监控视频 -->
    <ViewVideo ref="camera" :dialog-open.sync="open" />
  </div>
</template>

<script>
import Video from '@/components/video'
import Alarm from '@/components/alarm'
import ViewVideo from '@/components/viewVideo'

export default {
  name: 'PageThirdFloor',
  components: { Video, Alarm, ViewVideo },
  props: {
    isGetClear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false
    }
  },
  computed: {
  },
  async created() {
    window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
  },
  activated() {
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessageEvent)
  },
  mounted() {
    // const _this = this
    this.iframeWin = this.$refs.myIframe.contentWindow
    // inframe 加载完成之后
    // document.getElementById('myIframe').onload = function() {
    //   const data = {
    //     'deviceId': 'S004',
    //     'isAlarm': true
    //   }
    //   _this.deviceState(data)
    // }

    // 监听 iframe 传来的值
    window.addEventListener('message', this.handleMessageEvent)
    this.$nextTick(() => {
      this.$refs.cameraList.cameraList = []
      this.$refs.cameraList.getCameraList('2')
    })
  },
  methods: {
    // 加载完成状态传值
    getIframeLoading(value) {
      // console.log(`我是iframe传过来的参数：${value}`)
      if (value === 'false') {
        const data = [
          {
            'deviceId': 'S004',
            'isAlarm': true
          },
          {
            'deviceId': 'S002',
            'isAlarm': true
          }
        ]
        this.deviceState(data)
      }
    },
    // 传入设备状态data  / 给iframe传初始值
    deviceState(e) {
      this.iframeWin.postMessage({
        data: e
      }, '*')
    },
    handleMessageEvent(event) {
      if (event.data && event.data.data) {
        const data = event.data.data
        console.log(data)
        // 摄像头
        if (data.includes('C')) {
          this.open = true
          this.$nextTick(() => {
            this.$refs.camera.camConfig = {
              'id': data,
              'area_id': '2'
            }
            this.$refs.camera.getVideoUrl()
          })
        }
      }
    },
    handleViewVideo(item) {
      this.$refs.camera.videoTitle = item.name
      this.$refs.camera.openVideo(item.rtsp_url)
    }
  }
}

</script>

<style lang="scss" scoped>
@import "~@/assets/styles/index.scss";
// .page-3d{
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: calc(100vh + 336px) !important;
//   margin-top: -400px;
//   text-align: center;
// }
</style>