From 11b09e9564096ae404b2d7d6036046c93d4d8e37 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Thu, 18 Aug 2022 15:45:09 +0800
Subject: [PATCH] =?UTF-8?q?3D=E5=BA=93=E6=88=BF=20=E6=B8=A9=E6=B9=BF?=
 =?UTF-8?q?=E5=BA=A6=E6=84=9F=E5=BA=94=E5=99=A8=E6=95=B0=E5=80=BC=E7=9A=84?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../warehouse3D/archivesStorage/index.vue     |  6 +-
 .../warehouse3D/collateRoom/index.vue         | 86 ++++++++++++++---
 .../warehouse3D/readRoom/index.vue            | 96 ++++++++++++++-----
 3 files changed, 150 insertions(+), 38 deletions(-)

diff --git a/src/views/storeManage/warehouse3D/archivesStorage/index.vue b/src/views/storeManage/warehouse3D/archivesStorage/index.vue
index 50f454f..9b51dd1 100644
--- a/src/views/storeManage/warehouse3D/archivesStorage/index.vue
+++ b/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)
diff --git a/src/views/storeManage/warehouse3D/collateRoom/index.vue b/src/views/storeManage/warehouse3D/collateRoom/index.vue
index ba6650c..e3c9a69 100644
--- a/src/views/storeManage/warehouse3D/collateRoom/index.vue
+++ b/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) {
diff --git a/src/views/storeManage/warehouse3D/readRoom/index.vue b/src/views/storeManage/warehouse3D/readRoom/index.vue
index bc5a663..20fbd44 100644
--- a/src/views/storeManage/warehouse3D/readRoom/index.vue
+++ b/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) {