3D库房 温湿度感应器数值的显示

src/views/storeManage/warehouse3D/archivesStorage/index.vue

@@ -162,14 +162,14 @@ export default {
     window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
     this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
     this.allDisplayConfigData.forEach(element => {
-      if (element.isDisplay && element.bindState) {
+      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 })
+    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() {
@@ -184,7 +184,7 @@ export default {
     this.timer = setInterval(async() => {
       await _this.getRealTimeData()
       _this.handleAQI()
-    }, 4000)
+    }, 10000)
   },
   beforeDestroy() {
     clearInterval(this.timer)

src/views/storeManage/warehouse3D/collateRoom/index.vue

@@ -19,16 +19,33 @@
 
 <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'
+      roomId: 'D5C48B49DF66183CF24974',
+      allDeviceIds: [],
+      oaoMessage: [],
+      allDisplayConfigData: [],
+      displayConfigData: []
     }
   },
-  created() {
+  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
@@ -38,31 +55,78 @@ export default {
       _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.handleHide('ZLS_MO_OAO_001')
+        console.log(this.allDisplayConfigData)
+        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: [
-          {
-            id: 'ZLS_MO_OAO_001',
-            wendu: 6,
-            sidu: 10,
-            alarmState: false
-          }
-        ]
+        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)
+          console.log(this.displayConfigData)
+          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) {

src/views/storeManage/warehouse3D/readRoom/index.vue

@@ -13,30 +13,49 @@
 <script>
 import WarehouseWarning from '@/views/components/WarehouseWarning'
 import displayConfigApi from '@/api/storeManage/displayConfig'
+import thirdApi from '@/api/thirdApi'
 export default {
   name: 'ReadRoom',
   components: { WarehouseWarning },
   data() {
     return {
-      tableData: [],
       roomId: '9E0A527462BB8A060EB165',
+      allDeviceIds: [],
+      oaoMessage: [],
+      allDisplayConfigData: [],
       displayConfigData: []
     }
   },
-  created() {
+  async created() {
     window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
-    displayConfigApi.list({ storeroomId: this.roomId }).then((data) => {
-      this.displayConfigData = data
+    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
+    const _this = this
     this.iframeWin = this.$refs.myIframe.contentWindow
     // inframe 加载完成之后
-    // document.getElementById('myIframe').onload = function() {
-    //   _this.deviceState()
-    // }
+    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: {
     // 加载完成状态传值
@@ -47,34 +66,63 @@ export default {
       // }
       // this.deviceState()
       if (value === 'false') {
-        console.log(this.displayConfigData)
-        this.displayConfigData.forEach(element => {
-          if (element.divPosition.includes('OAO')) {
-            if (element.isDisplay) {
-              console.log(element.divPosition)
-            } else {
-              this.handleHide(element.divPosition)
-            }
+        console.log(this.allDisplayConfigData)
+        this.allDisplayConfigData.forEach(element => {
+          if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) {
+            this.handleHide(element.divPosition)
           }
         })
+        this.deviceState()
       }
     },
     // 传入设备状态data  / 给iframe传初始值
     deviceState(e) {
       this.iframeWin.postMessage({
-        data: [
-          {
-            id: 'YLS_MO_OAO_001',
-            wendu: 3,
-            sidu: 6,
-            alarmState: false
-          }
-        ]
+        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)
+          console.log(this.displayConfigData)
+          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) {