yxk-storeroom-system/src/views/storeManage/warehouse3D/infoRoom/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="/webD/index.html" frameborder="0" scrolling="no" />
        <ul class="msg-list">
          <li v-show="topDisplayData.XXW_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_001.curstatus > 0 }">
            <svg-icon icon-class="temperature" class-name="msg-list-svg" />
            <div class="msg-txt">
              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_001.curValue }}</span>
              <p class="msg-list-unit">温度 {{ topDisplayData.XXW_DIV_TOP_001.unit }}</p>
            </div>
          </li>
          <li v-show="topDisplayData.XXW_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_002.curstatus > 0 }">
            <svg-icon icon-class="shidu" class-name="msg-list-svg" />
            <div class="msg-txt">
              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_002.curValue }}</span>
              <p class="msg-list-unit">湿度 {{ topDisplayData.XXW_DIV_TOP_002.unit }}</p>
            </div>
          </li>
          <li v-show="topDisplayData.XXW_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_003.curstatus > 0 }">
            <svg-icon icon-class="co2" class-name="msg-list-svg" />
            <div class="msg-txt">
              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_003.curValue }}</span>
              <p class="msg-list-unit">CO2 {{ topDisplayData.XXW_DIV_TOP_003.unit }}</p>
            </div>
          </li>
          <li v-show="topDisplayData.XXW_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_004.curstatus > 0 }">
            <svg-icon icon-class="voc" class-name="msg-list-svg" />
            <div class="msg-txt">
              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_004.curValue }}</span>
              <p class="msg-list-unit">TVOC {{ topDisplayData.XXW_DIV_TOP_004.unit }}</p>
            </div>
          </li>
          <li v-show="topDisplayData.XXW_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_005.curstatus > 0 }" class="msg-pm">
            <svg-icon icon-class="pm25" class-name="msg-list-svg" />
            <div class="msg-txt">
              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_005.curValue }}</span>
              <p class="msg-list-unit">PM2.5 {{ topDisplayData.XXW_DIV_TOP_005.unit }}</p>
            </div>
          </li>
          <li v-show="topDisplayData.XXW_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.XXW_DIV_TOP_006.curstatus > 0 }" class="msg-pm">
            <svg-icon icon-class="pm10" class-name="msg-list-svg" />
            <div class="msg-txt">
              <span class="msg-list-num">{{ topDisplayData.XXW_DIV_TOP_006.curValue }}</span>
              <p class="msg-list-unit">PM10 {{ topDisplayData.XXW_DIV_TOP_006.unit }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="warehouse-right">
      <!-- 报警记录 -->
      <warehouse-warning :height="'calc(100% - 40px)'" :storeroom-id="roomId" />
      <!-- 门禁记录 -->
      <security-door :height="'calc(100% - 40px)'" />
    </div>
  </div>
</template>

<script>
import WarehouseWarning from '@/views/components/WarehouseWarning'
import SecurityDoor from '@/views/components/SecurityDoor'
import displayConfigApi from '@/api/storeManage/displayConfig'
import thirdApi from '@/api/thirdApi'
export default {
  name: 'InfoRoom',
  components: { WarehouseWarning, SecurityDoor },
  data() {
    return {
      roomId: '1B2DADD8499058954C0CAC ',
      allDisplayConfigData: [],
      displayConfigData: [],
      url: '',
      allDeviceIds: [],
      oaoMessage: [],
      timer: '',
      topDisplayData: {
        XXW_DIV_TOP_001: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_002: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_003: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_004: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_005: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        },
        XXW_DIV_TOP_006: {
          show: false,
          curValue: '',
          unit: '',
          curstatus: 0
        }
      }
      // ,
      // iframeWin: null,
      // timer: null, // 定时器id 滚动表格
      // isScroll: false // 是否滚动
    }
  },
  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') || element.divPosition.includes('TOP'))) {
        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') || item.divPosition.includes('TOP')) })
    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() {
    if (this.timer) {
      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()
        this.handleAQI()
      }
    },
    // 传入设备状态data  / 给iframe传初始值
    deviceState(e) {
      this.iframeWin.postMessage({
        data: this.oaoMessage
      }, '*')
    },
    // 点击查看设备状况 / 密集架列号
    handleMessageDevice(event) {
      const _this = this
      if (event.data && event.data.data) {
        const data = event.data.data
        if (data.includes('cabinet')) {
          _this.deviceId = data.slice(data.length - 2)
          _this.$router.push('/storeManage/deseCabinet')
          localStorage.setItem('cabinetNum', _this.deviceId)
        }
      }
    },
    // 设置温湿度
    handleAQI() {
      this.oaoMessage.forEach(element => {
        window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
      })
    },
    // 设置温湿度报警状况
    handleAlarm(deviceId) {
      // true 报警 false 不报警
      window.frames['iframeMap'].Myalert(deviceId, true)
    },
    // 设置是否显示
    handleHide(deviceId) {
      // true 显示 false 隐藏
      window.frames['iframeMap'].setYangGanCanshow(deviceId, false)
    },
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    },
    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('TOP') && element.deviceSpecParams[0]) {
              // 获取页面div显示的数据
              const result = data.find((item) => {
                return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId
              })
              console.log(result)
              this.$set(this.topDisplayData, element.divPosition, {
                show: true,
                curValue: result.curvalue,
                unit: result.unit,
                curstatus: result.curstatus
              })
            } else {
              // 获取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
                })
              }
              console.log(wendu?.curstatus, sidu?.curstatus)
              this.oaoMessage.push({
                id: element.divPosition,
                wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-',
                sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-',
                alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0)
              })
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss";
.warehouse-left {
  position: relative;
}
.container-wrap {
  min-height: auto;
  height: calc(100% / 2 - 10px);
  overflow: hidden;
}
.container-wrap {
  margin-bottom: 20px;
}
</style>