大屏environmentalScreen修改

src/views/environmentalScreen/data1.json

@@ -1,119 +0,0 @@
-{
-  "rows":[
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    },
-    {
-      "time":"2022-6-30 13:00",
-      "warehouse":"文书档案库房",
-      "warning":"温度温度温度温度温度温度",
-      "name":"温度温度温度温度温度温度"
-    }
-
-  ]
-}

src/views/environmentalScreen/index.vue

@@ -9,32 +9,32 @@
           <span class="left-bottom-line" />
           <h3><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3>
           <ul class="screen-env-list">
-            <li>
+            <li v-show="topDisplayData.DAK_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_003.curstatus > 0 }">
               <svg-icon icon-class="co2" class-name="msg-list-svg" />
               <div class="msg-txt">
-                <span class="msg-list-num">60</span>
-                <p class="msg-list-unit">CO2ppm</p>
+                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_003.curValue }}</span>
+                <p class="msg-list-unit">CO2 {{ topDisplayData.DAK_DIV_TOP_003.unit }}</p>
               </div>
             </li>
-            <li>
+            <li v-show="topDisplayData.DAK_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_004.curstatus > 0 }">
               <svg-icon icon-class="voc" class-name="msg-list-svg" />
               <div class="msg-txt">
-                <span class="msg-list-num">60</span>
-                <p class="msg-list-unit">VOCmg/m³</p>
+                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_004.curValue }}</span>
+                <p class="msg-list-unit">VOC {{ topDisplayData.DAK_DIV_TOP_004.unit }}</p>
               </div>
             </li>
-            <li class="msg-pm li-warn">
+            <li v-show="topDisplayData.DAK_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.DAK_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">60</span>
-                <p class="msg-list-unit">PM2.5ug/m³</p>
+                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_005.curValue }}</span>
+                <p class="msg-list-unit">PM2.5 {{ topDisplayData.DAK_DIV_TOP_005.unit }}</p>
               </div>
             </li>
-            <li class="msg-pm">
+            <li v-show="topDisplayData.DAK_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.DAK_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">60</span>
-                <p class="msg-list-unit">PM10ug/m³</p>
+                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_006.curValue }}</span>
+                <p class="msg-list-unit">PM10 {{ topDisplayData.DAK_DIV_TOP_006.unit }}</p>
               </div>
             </li>
           </ul>
@@ -90,28 +90,20 @@
       </div>
       <div class="env-main-middle">
         <div class="env-3d">
-          <iframe
-            id="myIframe"
-            ref="myIframe"
-            name="iframeMap"
-            class="iframe_box"
-            src="/webA/index.html"
-            frameborder="0"
-            scrolling="no"
-          />
+          <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" />
           <ul class="screen-env-list">
-            <li>
+            <li v-show="topDisplayData.DAK_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_001.curstatus > 0 }">
               <svg-icon icon-class="temperature" class-name="msg-list-svg" />
               <div class="msg-txt">
-                <span class="msg-list-num">60</span>
-                <p class="msg-list-unit">温度℃</p>
+                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_001.curValue }}</span>
+                <p class="msg-list-unit">温度 {{ topDisplayData.DAK_DIV_TOP_001.unit }}</p>
               </div>
             </li>
-            <li class="li-warn">
+            <li v-show="topDisplayData.DAK_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_002.curstatus > 0 }">
               <svg-icon icon-class="shidu" class-name="msg-list-svg" />
               <div class="msg-txt">
-                <span class="msg-list-num">60</span>
-                <p class="msg-list-unit">湿度%</p>
+                <span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_002.curValue }}</span>
+                <p class="msg-list-unit">湿度 {{ topDisplayData.DAK_DIV_TOP_002.unit }}</p>
               </div>
             </li>
           </ul>
@@ -217,20 +209,11 @@ import { getCurrentTime } from '@/utils/index'
 import typePie from '@/views/components/echarts/typePie.vue'
 import lendAcross from '@/views/components/echarts/lendAcross.vue'
 import Video from '@/views/storeManage/warehouse3D/module/video'
-import data1 from './data1.json'
 import WarehouseWarning from '@/views/components/WarehouseWarning'
 import SecurityDoor from '@/views/components/SecurityDoor'
+import displayConfigApi from '@/api/storeManage/displayConfig'
+import thirdApi from '@/api/thirdApi'
 import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
-const lineChartData = {
-  readRoomData: {
-    temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
-    humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
-  },
-  collateRoomData: {
-    temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
-    humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
-  }
-}
 export default {
   name: 'EnvironmentalScreen',
   components: {
@@ -245,21 +228,73 @@ export default {
     return {
       nowDate: '',
       timer: null,
-      tableData: [],
-      lineChartData: lineChartData,
       lendData: [],
       typeData: [],
-      className: ['readRoomContainer', 'collateRoomContainer']
+      className: ['readRoomContainer', 'collateRoomContainer'],
+      roomId: 'D6490DA3D4261E8C26D0E3',
+      allDisplayConfigData: [],
+      displayConfigData: [],
+      url: '',
+      allDeviceIds: [],
+      oaoMessage: [],
+      topDisplayData: {
+        DAK_DIV_TOP_001: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DAK_DIV_TOP_002: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DAK_DIV_TOP_003: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DAK_DIV_TOP_004: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DAK_DIV_TOP_005: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        },
+        DAK_DIV_TOP_006: {
+          show: false,
+          curValue: '',
+          unit: '',
+          curstatus: 0
+        }
+      }
     }
   },
-  created() {
+  async created() {
     this.timer = setInterval(() => {
       this.nowDate = getCurrentTime()
     }, 1000)
     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') || element.divPosition.includes('LS'))) {
+        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') || item.divPosition.includes('LS')) })
+    await this.getRealTimeData()
   },
   mounted() {
-    this.tableData = data1.rows
     const _this = this
     this.iframeWin = this.$refs.myIframe.contentWindow
     // inframe 加载完成之后
@@ -267,50 +302,39 @@ export default {
       _this.deviceState()
     }
     window.addEventListener('message', this.handleMessageDevice)
+    // 定时请求第三方数据，更新页面数据
+    this.dataTimer = setInterval(async() => {
+      await _this.getRealTimeData()
+      _this.handleAQI()
+    }, 10000)
   },
   beforeDestroy() {
     if (this.timer) {
       clearInterval(this.timer)
     }
+    if (this.dataTimer) {
+      clearInterval(this.dataTimer)
+    }
   },
   methods: {
     // 加载完成状态传值
     getIframeLoading(value) {
       // console.log(`我是iframe传过来的参数：${value}`)
       if (value === 'false') {
-        this.handleHide('DAK_MO_OAO_001')
-        this.handleAlarm('DAK_MO_OAO_003')
+        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: [
-          {
-            id: 'DAK_MO_OAO_001',
-            wendu: 6,
-            sidu: 10,
-            alarmState: false
-          },
-          {
-            id: 'DAK_MO_OAO_002',
-            wendu: 2,
-            sidu: 5,
-            alarmState: false
-          },
-          {
-            id: 'DAK_MO_OAO_003',
-            wendu: 3,
-            sidu: 1,
-            alarmState: false
-          },
-          {
-            id: 'DAK_MO_OAO_004',
-            wendu: 6,
-            sidu: 6,
-            alarmState: false
-          }
-        ]
+        data: this.oaoMessage
       }, '*')
     },
     // 点击查看设备状况 / 密集架列号
@@ -330,13 +354,20 @@ export default {
       }
     },
     // 设置温湿度
-    handleAQI(deviceId, wendu, sidu) {
-      window.frames['iframeMap'].setAlertValue(deviceId, wendu, sidu)
+    handleAQI() {
+      this.oaoMessage.forEach(element => {
+        window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
+      })
     },
     // 设置温湿度报警状况
     handleAlarm(deviceId) {
       window.frames['iframeMap'].Myalert(deviceId, true)
     },
+    // 设置是否显示
+    handleHide(deviceId) {
+      // true 显示 false 隐藏
+      window.frames['iframeMap'].setYangGanCanshow(deviceId, false)
+    },
     // 表格隔行变色
     rowBgColor({ row, rowIndex }) {
       if (rowIndex % 2 === 1) {
@@ -344,13 +375,59 @@ export default {
       } 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
+              })
+              this.$set(this.topDisplayData, element.divPosition, {
+                show: true,
+                curValue: result.curvalue,
+                unit: result.unit,
+                curstatus: result.curstatus
+              })
+            } else if (element.divPosition.includes('OAO')) {
+              // 获取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)
+              })
+            } else {
+              // LS 漏水感应器
+            }
+          })
+        })
+      }
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '~@/assets/styles/lend-manage.scss';
+@import "~@/assets/styles/lend-manage.scss";
 .env-container {
   width: 100%;
   height: calc(100vh);
@@ -358,7 +435,7 @@ export default {
   .env-top-title {
     width: calc(100vw);
     height: 130px;
-    background: url('~@/assets/images/largeScreen/top-title.png') no-repeat 0 -14px;
+    background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
     background-size: contain;
   }
   .current-date {
@@ -366,7 +443,7 @@ export default {
     top: 25px;
     right: 150px;
     font-size: 16px;
-    color: #3A99FD;
+    color: #3a99fd;
   }
   .env-main {
     display: flex;
@@ -401,7 +478,7 @@ export default {
         .iconfont {
           margin-right: 10px;
           font-size: 14px;
-          color: #F65163;
+          color: #f65163;
         }
         &::before {
           content: "";
@@ -411,7 +488,8 @@ export default {
           width: 36px;
           height: 12px;
           margin-top: -6px;
-          background: url('~@/assets/images/largeScreen/item-left.png') no-repeat;
+          background: url("~@/assets/images/largeScreen/item-left.png")
+            no-repeat;
           background-size: cover;
         }
         &::after {
@@ -422,7 +500,8 @@ export default {
           width: 36px;
           height: 12px;
           margin-top: -6px;
-          background: url('~@/assets/images/largeScreen/item-right.png') no-repeat;
+          background: url("~@/assets/images/largeScreen/item-right.png")
+            no-repeat;
           background-size: cover;
         }
       }
@@ -451,7 +530,7 @@ export default {
     .leakage-detection {
       padding: 0 44px;
       font-size: 14px;
-      color: #339CFF;
+      color: #339cff;
       height: calc(100% - 38px);
       .leakage-list {
         height: calc(100% - 26px);
@@ -464,8 +543,8 @@ export default {
           height: calc(100% / 4 - 14px);
           margin-bottom: 14px;
           padding: 0 30px;
-          border: 1px solid #3581CC;
-          background-color: #02255F;
+          border: 1px solid #3581cc;
+          background-color: #02255f;
           border-radius: 2px;
           &::before {
             content: "";
@@ -474,7 +553,7 @@ export default {
             left: 4px;
             width: 0;
             height: 0;
-            border-color: transparent #339CFF;
+            border-color: transparent #339cff;
             border-width: 0 0 6px 6px;
             border-style: solid;
           }
@@ -489,7 +568,7 @@ export default {
             width: 6px;
             height: 6px;
             border-radius: 50%;
-            background-color: #18B08F;
+            background-color: #18b08f;
             &::before {
               content: "";
               position: absolute;
@@ -498,21 +577,21 @@ export default {
               width: 14px;
               height: 14px;
               border-radius: 50%;
-              box-shadow: inset 0px 0px 10px 1px #18B08F;
+              box-shadow: inset 0px 0px 10px 1px #18b08f;
               transform: translate(-50%, -50%);
             }
           }
           &.leakage-warn {
-            border-color: #F65164;
-            box-shadow: inset 0px 0px 15px 1px #F65164;
-            color: #F65164;
+            border-color: #f65164;
+            box-shadow: inset 0px 0px 15px 1px #f65164;
+            color: #f65164;
             &::before {
-              border-color: transparent #F65164;
+              border-color: transparent #f65164;
             }
             span.leakage-state-tip {
-              background-color: #F65164;
+              background-color: #f65164;
               &::before {
-                box-shadow: inset 0px 0px 10px 1px #F65164;
+                box-shadow: inset 0px 0px 10px 1px #f65164;
               }
             }
           }
@@ -524,7 +603,7 @@ export default {
       justify-content: flex-end;
       margin-bottom: 10px;
       font-size: 14px;
-      color: #339CFF;
+      color: #339cff;
       span {
         position: relative;
         display: block;
@@ -539,10 +618,10 @@ export default {
           height: 10px;
           border-radius: 50%;
           margin-top: -5px;
-          background-color: #18B08F;
+          background-color: #18b08f;
         }
         &:last-child::before {
-          background-color:#F65164;
+          background-color: #f65164;
         }
       }
     }
@@ -566,7 +645,7 @@ export default {
             align-items: center;
             justify-content: center;
             height: calc(100% - 40px);
-            border: 1px solid #3581CC;
+            border: 1px solid #3581cc;
             margin-bottom: 10px;
             img {
               display: block;
@@ -582,9 +661,9 @@ export default {
             height: 36px;
             line-height: 36px;
             font-size: 14px;
-            color: #339CFF;
-            border: 1px solid #3581CC;
-            background-color: #02255F;
+            color: #339cff;
+            border: 1px solid #3581cc;
+            background-color: #02255f;
             border-radius: 36px;
             span {
               position: relative;
@@ -597,7 +676,7 @@ export default {
               height: 6px;
               margin-left: 14px;
               border-radius: 50%;
-              background-color: #18B08F;
+              background-color: #18b08f;
               &::before {
                 content: "";
                 position: absolute;
@@ -606,7 +685,7 @@ export default {
                 width: 14px;
                 height: 14px;
                 border-radius: 50%;
-                box-shadow: inset 0px 0px 10px 1px #18B08F;
+                box-shadow: inset 0px 0px 10px 1px #18b08f;
                 transform: translate(-50%, -50%);
               }
             }
@@ -614,9 +693,9 @@ export default {
           &.device-warn {
             .env-device-text {
               span {
-                background-color: #F65164;
+                background-color: #f65164;
                 &::before {
-                  box-shadow: inset 0px 0px 10px 1px #F65164;
+                  box-shadow: inset 0px 0px 10px 1px #f65164;
                 }
               }
             }
@@ -629,7 +708,7 @@ export default {
       width: 100%;
       height: calc(100% - (100% / 3) - 8px);
       margin-bottom: 20px;
-      background: url('~@/assets/images/largeScreen/bg.png') no-repeat center -130px;
+      background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
       // background-size: 100% 100%;
       overflow: hidden;
       .iframe_box {

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

@@ -187,7 +187,9 @@ export default {
     }, 10000)
   },
   beforeDestroy() {
+    if (this.timer) {
       clearInterval(this.timer)
+    }
   },
   methods: {
     // 加载完成状态传值
@@ -223,7 +225,7 @@ export default {
       }
     },
     // 设置温湿度
-    handleAQI(deviceId, wendu, sidu) {
+    handleAQI() {
       this.oaoMessage.forEach(element => {
         window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu)
       })