yxk-storeroom-system/src/views/storeManage/warehouse3D/collateRoom/index.vue

<template>
  <div class="warehouse">
    <div class="warehouse-left">
      <div class="left-3d">
        <iframe
          id="myIframe"
          ref="myIframe"
          name="iframeMap"
          class="iframe_box"
          src="/webB/index.html"
          frameborder="0"
          scrolling="no"
        />
      </div>
    </div>
    <warehouse-warning :height="'calc(100vh - 235px)'" :storeroom-id="roomId" />
  </div>
</template>

<script>
import WarehouseWarning from '@/views/components/WarehouseWarning'
import displayConfigApi from '@/api/storeManage/displayConfig'
import thirdApi from '@/api/thirdApi'
export default {
  name: 'CollateRoom',
  components: { WarehouseWarning },
  data() {
    return {
      roomId: 'D5C48B49DF66183CF24974',
      allDeviceIds: [],
      oaoMessage: [],
      allDisplayConfigData: [],
      displayConfigData: []
    }
  },
  async created() {
    window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
    this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
    this.allDisplayConfigData.forEach(element => {
      if (element.isDisplay && element.bindState && element.deviceInfo && element.divPosition.includes('OAO')) {
        this.allDeviceIds.push(element.deviceInfo.deviceId)
        if (!this.url) {
          this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort
        }
      }
    })
    this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && item.divPosition.includes('OAO') })
    await this.getRealTimeData()
  },
  mounted() {
    const _this = this
    this.iframeWin = this.$refs.myIframe.contentWindow
    // inframe 加载完成之后
    document.getElementById('myIframe').onload = function() {
      _this.deviceState()
    }
    // window.addEventListener('message', this.handleMessageDevice)
    // 定时请求第三方数据，更新页面数据
    this.timer = setInterval(async() => {
      await _this.getRealTimeData()
      _this.handleAQI()
    }, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 加载完成状态传值
    getIframeLoading(value) {
      // console.log(`我是iframe传过来的参数：${value}`)
      if (value === 'false') {
        this.allDisplayConfigData.forEach(element => {
          if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
            this.handleHide(element.divPosition)
          }
        })
        // this.handleAlarm('DAK_MO_OAO_003')
        this.deviceState()
      }
    },
    // 传入设备状态data  / 给iframe传初始值
    deviceState(e) {
      this.iframeWin.postMessage({
        data: this.oaoMessage
      }, '*')
    },
    // 设置是否显示
    handleHide(deviceId) {
      window.frames['iframeMap'].setYangGanCanshow(deviceId, false)
    },
    // 设置温湿度
    handleAQI(deviceId, wendu, sidu) {
      this.oaoMessage.forEach(element => {
        window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
      })
    },
    getRealTimeData() {
      if (this.allDeviceIds.length > 0) {
        thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
          this.oaoMessage.splice(0, this.oaoMessage.length)
          this.displayConfigData.forEach(element => {
            if (element.divPosition.includes('OAO') && element.deviceSpecParams[0]) {
              // 获取3D弹窗显示的数据
              const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId
              const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId
              let wendu = {}
              let sidu = {}
              if (wenduParamId) {
                wendu = data.find((item) => {
                  return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId
                })
              }
              if (siduParamId) {
                sidu = data.find((item) => {
                  return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId
                })
              }
              this.oaoMessage.push({
                id: element.divPosition,
                wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-',
                sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-',
                alarmState: (wendu && wendu.curstatus === '1') || (sidu && sidu.curstatus === '1')
              })
            }
          })
        })
      }
    }
    // 点击查看设备状况
    // handleMessageDevice(event) {
    //   const _this = this
    //   if (event.data && event.data.data) {
    //     const data = event.data.data
    //     _this.deviceId = data
    //     if (_this.deviceId.includes('CAM')) {
    //       _this.$nextTick(() => {
    //         this.$refs.camera.openVideoVisible = true
    //         this.$refs.camera.videoTitle = _this.deviceId
    //       })
    //     }
    //   }
    // },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';

  .warehouse-left{
    position: relative;
    h2{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      color: #fff;
      font-size: 16px;
    }
  }

</style>