展示需求

.env.development

@@ -10,8 +10,8 @@ VUE_APP_CAMERA_API = '192.168.99.107:3000'
 #VUE_APP_WS_API = 'ws://192.168.99.107:7070'
 
 # 许镇-本地服地址
-VUE_APP_BASE_API  = 'http://192.168.99.67:7070'
-VUE_APP_WS_API = 'ws://192.168.99.67:7070'
+VUE_APP_BASE_API  = 'http://192.168.99.72:7070'
+VUE_APP_WS_API = 'ws://192.168.99.72:7070'
 
 
 # 是否启用 babel-plugin-dynamic-import-node插件

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

@@ -48,6 +48,20 @@
             </div>
           </li>
         </ul>
+
+        <div class="air-quality">
+          <h3>实时空气质量指数（AQI）</h3>
+          <div class="air-params">
+            <div class="air-left">
+              <span class="air-title">实时AQI</span>
+              <div class="air-result"><p>45</p><span>(AQI-US)</span></div>
+            </div>
+            <div class="air-right">
+              <span>空气质量为</span>
+              <p>健康</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="warehouse-right">
@@ -116,39 +130,39 @@ export default {
       timer: '',
       topDisplayData: {
         DAK_DIV_TOP_001: {
-          show: false,
-          curValue: '',
-          unit: '',
+          show: true,
+          curValue: '23.10',
+          unit: '℃',
           curstatus: 0
         },
         DAK_DIV_TOP_002: {
-          show: false,
-          curValue: '',
-          unit: '',
+          show: true,
+          curValue: '48.90',
+          unit: '%',
           curstatus: 0
         },
         DAK_DIV_TOP_003: {
-          show: false,
-          curValue: '',
-          unit: '',
+          show: true,
+          curValue: '619',
+          unit: 'ppm',
           curstatus: 0
         },
         DAK_DIV_TOP_004: {
-          show: false,
-          curValue: '',
-          unit: '',
+          show: true,
+          curValue: '0.21',
+          unit: 'mg/m³',
           curstatus: 0
         },
         DAK_DIV_TOP_005: {
-          show: false,
-          curValue: '',
-          unit: '',
+          show: true,
+          curValue: '26.00',
+          unit: 'ug/m³',
           curstatus: 0
         },
         DAK_DIV_TOP_006: {
-          show: false,
-          curValue: '',
-          unit: '',
+          show: true,
+          curValue: '38.00',
+          unit: 'ug/m³',
           curstatus: 0
         }
       }
@@ -206,6 +220,7 @@ export default {
         // this.handleAlarm('DAK_MO_OAO_003')
         this.deviceState()
         this.handleAQI()
+        // window.frames['iframeMap'].setAlertValue('DAK_MO_OAO_003', 20, 60)
       }
     },
     // 传入设备状态data  / 给iframe传初始值
@@ -260,12 +275,13 @@ export default {
               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
-              })
+              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
@@ -310,4 +326,70 @@ export default {
 .container-wrap {
   margin-bottom: 20px;
 }
+
+.air-quality{
+  position: absolute;
+  bottom: 120px;
+  right: 20px;
+  color: #fff;
+  padding: 20px 20px 10px 20px;
+  background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0));
+  border-radius: 5px;
+  h3{
+    padding: 30px 0;
+  }
+  .air-params{
+    display: flex;
+    justify-content: space-between;
+    align-items: last baseline;
+    .air-left{
+      .air-title{
+        position: relative;
+        padding-left: 12px;
+        font-size: 14px;
+        &::before{
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 6px;
+          height: 6px;
+          background-color: #18B08F;
+          border-radius: 50%;
+        }
+      }
+      .air-result{
+        display: flex;
+        justify-content: space-between;
+        align-items: last baseline;
+        padding-top: 10px;
+        p{
+          font-size: 30px;
+          font-weight: 600;
+          padding: 0 6px 0 10px;
+        }
+        span{
+          display: block;
+          font-size: 12px;
+          opacity: .6;
+        }
+      }
+    }
+    .air-right{
+      text-align: center;
+      span{
+        display: block;
+        font-size: 12px;
+      }
+      p{
+        font-size: 18px;
+        font-weight: 600;
+        padding: 10px 30px;
+        margin-top: 10px;
+        background-color: rgba(24, 176, 143, .2);
+        border-radius: 5px;
+      }
+    }
+  }
+}
 </style>