湖里大屏(数字工地):视频设备数据渲染

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

@@ -8,7 +8,7 @@
         <leftCenter title="AI分析"></leftCenter>
       </div>
       <div class="leftBottom">
-        <leftBottom title="视频设备"></leftBottom>
+        <leftBottom title="视频设备" :videoCountList="videoCountList"></leftBottom>
       </div>
     </div>
     <div class="centerBox">
@@ -63,7 +63,7 @@ export default {
     return {
       towerList: [], // 塔吊设备列表
       lifterList: [], // 升降机设备列表
-      videoCountList: [], // 视频设备列表
+      videoCountList: {}, // 视频设备列表
       ufaceList: [], // 人脸闸机列表
       ufaceInCount: 0, //人脸闸机今日进场人数
       environmentDevList: [], //环境设备列表
@@ -75,7 +75,6 @@ export default {
       totalDangerLifterDev: 0, //升降机报警数量
       environmentDevNum: 0, //环境设备数量
       environmentTotalAlarm: 0, // 环境设备报警数量
-      videoDevNum: 0, // 视频设备数量
     }
   },
   mounted(){

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

@@ -1,14 +1,14 @@
 <template>
   <Card :title="title">
     <DeviceCard
-      :leftCount="{ value: 22, label: '在线设备', img: 'online' }"
-      :rightCount="{ value: 65, label: '离线设备', img: 'warring2' }"
+      :leftCount="{ value: videoCountList.onlineNum, label: '在线设备', img: 'online' }"
+      :rightCount="{ value: videoCountList.totalDevNum, label: '离线设备', img: 'warring2' }"
     >
       <div class="list">
         <div class="list-head">设备名称</div>
-        <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
-          <div class="label">1号塔吊</div>
-          <div class="status">在线</div>
+        <div class="list-item" :class="item.deviceState ==1 ? 'offline' : 'online'" v-for="(item,index) in videoCountList.videoList" :key="index">
+          <div class="label">{{item.videoName}}</div>
+          <div class="status">{{item.deviceState ==1 ? '在线' :'离线'}}</div>
         </div>
       </div>
     </DeviceCard>
@@ -24,10 +24,17 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    videoCountList:{
+      type:Object,
+      default:[]
     }
   },
   data() {
     return {}
+  },
+  mounted(){
+    console.log('--------------',this.videoCountList)
   }
 }
 </script>