3D库房档案库数据显示

src/api/thirdApi/index.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export function getRealTimeData(data) {
+  return request({
+    url: 'api/thirdapi/getrealtimedata',
+    method: 'post',
+    data
+  })
+}
+
+export default { getRealTimeData }

src/assets/styles/yxk-admin.scss

@@ -1140,13 +1140,13 @@ input[type='number'] {
 .screen-env-list{
   display: flex;
   li{
-    flex: 1;
+    // flex: 0;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     align-content: center;
     justify-content: center;
-    // width: calc(100%/6);
+    width: calc(100%/6);
     height: 80px;
     margin-right: 20px;
     background: url('~@/assets/images/data_border_default.png') no-repeat;

src/views/storeManage/deviceManage/module/bindParams.vue

@@ -53,7 +53,7 @@ export default {
         ]
       },
       params: [],
-      form: {},
+      form: { paramId: '', paramName: '', unit: '' },
       deviceInfoId: null,
       loading: false,
       bindParamsVisible: false

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

@@ -5,47 +5,46 @@
       <div class="left-3d">
         <iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" />
         <ul class="msg-list">
-          <li id="DAK_DIV_TOP_001">
+          <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 id="DAK_DIV_TOP_002" 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>
-          <li id="DAK_DIV_TOP_003">
+          <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 id="DAK_DIV_TOP_004">
+          <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 id="DAK_DIV_TOP_005" class="msg-pm">
-            <!-- style="font-size:46px;margin-left:25px;padding-bottom:10px" -->
+          <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 id="DAK_DIV_TOP_006" class="msg-pm">
-            <svg-icon icon-class="pm10" class-name="msg-list-svg" />
+          <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>
@@ -102,47 +101,83 @@
 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: 'FullView',
   components: { WarehouseWarning, SecurityDoor },
   data() {
     return {
       roomId: 'D6490DA3D4261E8C26D0E3',
-      TopDisplayConfigData: [],
-      OaoDisplayConfigData: [],
-      topDisplayData: []
+      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
+        }
+      }
       // ,
       // iframeWin: null,
       // timer: null, // 定时器id 滚动表格
       // isScroll: false // 是否滚动
     }
   },
-  created() {
+  async created() {
     window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
-    displayConfigApi.list({ storeroomId: this.roomId }).then((data) => {
-      this.TopDisplayConfigData = data.filter((item) => { return item.divPosition.includes('TOP') })
-      this.OaoDisplayConfigData = data.filter((item) => { return item.divPosition.includes('OAO') })
-    })
-    const topDeviceIds = []
-    const oaoDeviceIds = []
-    this.TopDisplayConfigData.forEach(element => {
+    this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId })
+    this.allDisplayConfigData.forEach(element => {
       if (element.isDisplay && element.bindState) {
-        topDeviceIds.push(element.deviceInfo.id)
+        this.allDeviceIds.push(element.deviceInfo.deviceId)
+        if (!this.url) {
+          this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort
         }
-    })
-    this.OaoDisplayConfigData.forEach(element => {
-      if (element.isDisplay && element.bindState) {
-        oaoDeviceIds.push(element.deviceInfo.id)
       }
     })
+    this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState })
+    await this.getRealTimeData()
   },
   mounted() {
     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)
   },
   methods: {
@@ -150,44 +185,19 @@ export default {
     getIframeLoading(value) {
       // console.log(`我是iframe传过来的参数：${value}`)
       if (value === 'false') {
-        console.log(this.OaoDisplayConfigData)
-        this.OaoDisplayConfigData.forEach(element => {
-          if (!element.isDisplay || !element.bindState) {
+        this.allDisplayConfigData.forEach(element => {
+          if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('CAM')) {
             this.handleHide(element.divPosition)
           }
         })
-        this.handleAlarm('DAK_MO_OAO_003')
+        // this.handleAlarm('DAK_MO_OAO_003')
+        this.deviceState()
       }
     },
     // 传入设备状态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
       }, '*')
     },
     // 点击查看设备状况 / 密集架列号
@@ -223,44 +233,45 @@ export default {
       } else {
         return ''
       }
+    },
+    getRealTimeData() {
+      thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => {
+        this.displayConfigData.forEach(element => {
+          if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) {
+            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 {
+            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) ? (wendu?.curvalue) : '-',
+              sidu: (sidu?.curvalue) ? (sidu?.curvalue) : '-',
+              alarmState: (wendu && wendu.curstatus === '1') || (sidu && sidu.curstatus === '1')
+            })
+          }
+        })
+      })
     }
-    // table滚动
-    // tableRefScroll() {
-    //   clearInterval(this.timer) // 清除定时器
-    //   const table = this.$refs.table // 获取DOM元素
-    //   const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
-    //   this.addTableRefScroll(bodyWrapper)
-    //   // 鼠标移入
-    //   bodyWrapper.onmouseover = () => {
-    //     clearInterval(this.timer)
-    //   }
-    //   // 鼠标移出
-    //   bodyWrapper.onmouseout = () => {
-    //     this.addTableRefScroll(bodyWrapper)
-    //   }
-    // },
-    // addTableRefScroll(bodyWrapper) {
-    //   let scrollTop = bodyWrapper.scrollTop
-    //   this.timer = setInterval(() => {
-    //     scrollTop = bodyWrapper.scrollTop
-    //     bodyWrapper.scrollTop += 5
-    //     if (scrollTop === bodyWrapper.scrollTop) {
-    //       if (this.isScroll) {
-    //         scrollTop = 0
-    //         bodyWrapper.scrollTop = 0
-    //       } else {
-    //         if (this.flag === 1) {
-    //           this.currentPage++
-    //           this.handleSearch() // 函数中需要清楚定时器
-    //         }
-    //       }
-    //     }
-    //   }, 100)
-    // },
-    // handleSearch() {
-    //   // 清楚定时器
-    //   clearInterval(this.timer)
-    // }
   }
 }
 </script>