湖里大屏(数字工地)：环境监测联调

src/views/projectAdmin/jlw/components/CountList.vue

@@ -20,7 +20,7 @@
       <vue-scroll>
         <div class="list-item" :class="item.devonline == '0' ? 'online' : 'offline'" v-for="(item, i) in list" :key="i">
           <div class="status">{{ item.devonline == '0' ? '在线' : '离线' }}</div>
-          <div class="label">{{ item.devName }}</div>
+          <div class="label">{{ item.devName || item.deviceName }}</div>
           <div class="num" v-if="type === 'waring'">今日报警：{{ item.alarmNum }}</div>
           <div class="persons" v-if="type === 'persons'">
             <div class="person">进场人数：67</div>
@@ -97,6 +97,9 @@ export default {
         &.warring2 {
           background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-warring2.png');
         }
+        &.online {
+          background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-online-device.png');
+        }
         &.elevator {
           background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-elevator.png');
         }

src/views/projectAdmin/jlw/digitalSite/index.vue

@@ -18,10 +18,20 @@
     </div>
     <div class="rightBox">
       <div class="rightTop">
-        <rightTop title="升降机设备" :lifterList="lifterList" :totalLifterDev="totalLifterDev" :totalDangerLifterDev="totalDangerLifterDev"></rightTop>
+        <rightTop
+          title="升降机设备"
+          :lifterList="lifterList"
+          :totalLifterDev="totalLifterDev"
+          :totalDangerLifterDev="totalDangerLifterDev"
+        ></rightTop>
       </div>
       <div class="rightCenter">
-        <rightCenter title="环境监测"></rightCenter>
+        <rightCenter
+          title="环境监测"
+          :onlineNum="environment.online"
+          :offlineNum="environment.offline"
+          :list="environment.list"
+        ></rightCenter>
       </div>
       <div class="rightBottom">
         <rightBottom title="人脸闸机" :ufaceList="ufaceList"></rightBottom>
@@ -47,7 +57,7 @@ import {
   selectEnvironmentDevAlaramCountList,
   getAllTowerDangerInfo,
   getAllLifterDangerInfo,
-  getEnvironmentInfo,
+  getEnvironmentInfo
 } from '@/assets/js/api/dataBoard'
 export default {
   components: {
@@ -65,24 +75,28 @@ export default {
       lifterList: [], // 升降机设备列表
       videoCountList: {}, // 视频设备列表
       ufaceList: {}, // 人脸闸机列表
-      uface:[],
+      uface: [],
       ufaceInCount: 0, //人脸闸机今日进场人数
-      environmentDevList: [], //环境设备列表
       dangerAlarmTypeList: [], // 预警类型列表
       totalDangerAlarmType: 0,
       totalTowerDev: 0, //塔吊数量
       totalDangerTowerDev: 0, // 塔吊报警数量
       totalLifterDev: 0, //升降机数量
       totalDangerLifterDev: 0, //升降机报警数量
-      environmentDevNum: 0, //环境设备数量
-      environmentTotalAlarm: 0, // 环境设备报警数量
+
+      // 环境监测
+      environment: {
+        online: 0,
+        offline: 0,
+        list: []
+      }
     }
   },
-  mounted(){
-    this.getAlarmInfor();
-    this.getAllDev();
+  mounted() {
+    this.getAlarmInfor()
+    this.getAllDev()
   },
-  methods:{
+  methods: {
     // 获取设备数量
     getAlarmInfor() {
       let data = {
@@ -111,8 +125,8 @@ export default {
       getEnvironmentInfo(data).then(res => {
         if (res.code === 200) {
           let { result } = res
-          this.environmentDevNum = result.devTotal.devNum
-          this.environmentTotalAlarm = result.alarmTotal.totalAlarm
+          this.$set(this.environment, 'offline', result.devTotal.devNum)
+          this.$set(this.environment, 'online', result.alarmTotal.totalAlarm)
         }
       })
       // // 获取报警列表数据
@@ -146,7 +160,7 @@ export default {
       //   this.pieAnalyse()
       // });
     },
-        // 获取所有设备信息
+    // 获取所有设备信息
     getAllDev() {
       let data = {
         projectSn: this.$store.state.projectSn
@@ -174,7 +188,7 @@ export default {
       // 获取人脸闸机设备信息
       selectUfaceDevStatisticsList(data).then(res => {
         if (res.code === 200) {
-          console.log('获取人脸闸机设备信息',res)
+          console.log('获取人脸闸机设备信息', res)
           this.ufaceList = res.result
           this.uface = res.result.devList
           this.uface.forEach(item => {
@@ -185,8 +199,7 @@ export default {
       // 获取环境监测信息
       selectEnvironmentDevAlaramCountList(data).then(res => {
         if (res.code === 200) {
-          console.log(res.result.devList)
-          this.environmentDevList = res.result.devList
+          this.$set(this.environment, 'list', res.result.devList)
         }
       })
       let data2 = {
@@ -201,7 +214,7 @@ export default {
           this.totalDangerAlarmType = result.totalAlarmNum
         }
       })
-    },
+    }
   }
 }
 </script>

src/views/projectAdmin/jlw/digitalSite/rightCenter.vue

@@ -1,13 +1,13 @@
 <template>
   <!-- 环境监测 -->
   <Card :title="title">
-    <div class="airChart">
+    <!-- <div class="airChart">
       <airQulityChart></airQulityChart>
     </div>
     <div class="counts">
       <div class="count">
-        <!-- <div class="icon"></div> -->
-         <img src="@/assets/images/projectImg/dig_one.png" />
+        <div class="icon"></div>
+        <img src="@/assets/images/projectImg/dig_one.png" />
         <div class="info">
           <p class="num">PM2.5</p>
           <p class="label">21μg/m3</p>
@@ -27,26 +27,42 @@
           <p class="label">58dB</p>
         </div>
       </div>
-    </div>
+    </div> -->
+
+    <CountList
+      :allCount="{ value: onlineNum, label: '在线设备', img: 'online' }"
+      :todayCount="{ value: offlineNum, label: '离线设备', img: 'warring2' }"
+      :list="list"
+    />
   </Card>
 </template>
 
 <script>
-import Card from "../components/Card.vue";
-import airQulityChart from "@/views/projectAdmin/dataBoard/homePage/environmentWatch.vue";
+import Card from '../components/Card.vue'
+import airQulityChart from '@/views/projectAdmin/dataBoard/homePage/environmentWatch.vue'
+import CountList from '../components/CountList.vue'
 export default {
-  components: { Card, airQulityChart },
+  components: { Card, airQulityChart, CountList },
 
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
+    },
+    onlineNum: {
+      type: Number,
+      default: 0
+    },
+    offlineNum: {
+      type: Number,
+      default: 0
+    },
+    list: {
+      type: Array,
+      default: () => []
     }
-  },
-  data() {
-    return {};
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -62,9 +78,9 @@ export default {
   .count {
     display: flex;
     align-items: center;
-    img{
-      width:40px;
-      height:40px;
+    img {
+      width: 40px;
+      height: 40px;
       margin-right: 10px;
       margin-bottom: 10px;
     }
@@ -81,4 +97,3 @@ export default {
   }
 }
 </style>
-

src/views/projectAdmin/jlw/digitalSite/rightTop.vue

@@ -12,8 +12,8 @@
     </DeviceCard> -->
 
     <CountList
-      :allCount="{ value: totalTowerDev, label: '升降机设备数', img: 'elevator' }"
-      :todayCount="{ value: totalDangerTowerDev, label: '今日报警数', img: 'warring2' }"
+      :allCount="{ value: totalLifterDev, label: '升降机设备数', img: 'elevator' }"
+      :todayCount="{ value: totalDangerLifterDev, label: '今日报警数', img: 'warring2' }"
       :list="lifterList"
     />
   </Card>