湖里大屏(数字工地):人脸闸机数据渲染

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

@@ -24,7 +24,7 @@
         <rightCenter title="环境监测"></rightCenter>
       </div>
       <div class="rightBottom">
-        <rightBottom title="人脸闸机"></rightBottom>
+        <rightBottom title="人脸闸机" :ufaceList="ufaceList"></rightBottom>
       </div>
     </div>
   </div>
@@ -64,7 +64,8 @@ export default {
       towerList: [], // 塔吊设备列表
       lifterList: [], // 升降机设备列表
       videoCountList: {}, // 视频设备列表
-      ufaceList: [], // 人脸闸机列表
+      ufaceList: {}, // 人脸闸机列表
+      uface:[],
       ufaceInCount: 0, //人脸闸机今日进场人数
       environmentDevList: [], //环境设备列表
       dangerAlarmTypeList: [], // 预警类型列表
@@ -90,7 +91,7 @@ export default {
       // 获取塔吊数量
       getAllTowerDangerInfo(data).then(res => {
         if (res.code === 200) {
-          console.log('获取塔吊数量',res)
+          // console.log('获取塔吊数量',res)
           let { result } = res
           this.totalTowerDev = result.devCount.devNum
           this.totalDangerTowerDev = result.towerAlarmCount
@@ -154,7 +155,7 @@ export default {
       selectTowerDevAlarmCountList(data).then(res => {
         if (res.code === 200) {
           this.towerList = res.result.devList
-          console.log('获取塔吊设备信息',this.towerList)
+          // console.log('获取塔吊设备信息',this.towerList)
         }
       })
       // 获取升降机设备信息
@@ -173,8 +174,10 @@ export default {
       // 获取人脸闸机设备信息
       selectUfaceDevStatisticsList(data).then(res => {
         if (res.code === 200) {
-          this.ufaceList = res.result.devList
+          console.log('获取人脸闸机设备信息',res)
-          this.ufaceList.forEach(item => {
+          this.ufaceList = res.result
+          this.uface = res.result.devList
+          this.uface.forEach(item => {
             this.ufaceInCount += item.inTotalNum
           })
         }

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

@@ -6,10 +6,12 @@
     >
       <div class="list">
         <div class="list-head">设备名称</div>
-        <div class="list-item" :class="item.deviceState ==1 ? 'offline' : 'online'" v-for="(item,index) in videoCountList.videoList" :key="index">
+        <div class="listBox">
+           <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>
       </div>
     </DeviceCard>
   </Card>
@@ -34,13 +36,18 @@ export default {
     return {}
   },
   mounted(){
-    console.log('--------------',this.videoCountList)
+    // console.log('--------------',this.videoCountList)
   }
 }
 </script>
 
 <style lang="less" scoped>
-.list {
+::-webkit-scrollbar {
+  width: 3px;
+  color: #636364;
+}
+
+  .list {
   padding: 0 10px;
   color: #fff;
   .list-head {
@@ -48,7 +55,10 @@ export default {
     padding-left: 16px;
     font-size: 12px;
   }
-  .list-item {
+  .listBox{
+  height:120px;
+  overflow: auto;
+   .list-item {
     margin-bottom: 6px;
     padding: 0 16px;
     height: 22px;
@@ -80,5 +90,9 @@ export default {
       font-size: 14px;
     }
   }
+  }
+ 
 }
+
+
 </style>

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

@@ -59,7 +59,7 @@ export default {
     };
   },
   mounted() {
-    console.log("传过来了吗", this.towerList, this.totalTowerDev);
+    // console.log("------", this.towerList, this.totalTowerDev);
     // 备注：此处xy轴数据没有处理 报警数很多为0 无法渲染
     //var datax = [],datay =[]
     //this.towerList.forEach((item)=>{

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

@@ -10,11 +10,13 @@
           <div class="enter">进场人数</div>
           <div class="outer">出场人数</div>
         </div>
-        <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
+        <div class="listBox">
-          <div class="status">在线</div>
+          <div class="list-item" :class="item.deviceState ==1 ? 'offline' : 'online'" v-for="(item,index) in ufaceList.devList" :key="index">
-          <div class="label">1号塔吊</div>
+          <div class="status">{{item.deviceState ==1 ? '在线' :'离线'}}</div>
-          <div class="enter">66</div>
+          <div class="label">{{item.devName}}</div>
-          <div class="outer">99</div>
+          <div class="enter">{{item.isEnter}}</div>
+          <div class="outer">{{item.outTotalNum}}</div>
+        </div>
         </div>
       </div>
     </DeviceCard>
@@ -30,15 +32,26 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    ufaceList:{
+      type: Object,
+      default: []
     }
   },
   data() {
     return {}
+  },
+  mounted(){
+    // console.log('--------------', this.ufaceList)
   }
 }
 </script>
 
 <style lang="less" scoped>
+::-webkit-scrollbar {
+  width: 3px;
+  color: #636364;
+}
 .list {
   padding: 0 10px;
   color: #fff;
@@ -59,7 +72,10 @@ export default {
       text-align: right;
     }
   }
-  .list-item {
+  .listBox{
+    height:100px;
+    overflow:auto;
+      .list-item {
     margin-bottom: 6px;
     padding: 0 16px;
     height: 22px;
@@ -98,5 +114,7 @@ export default {
       text-align: right;
     }
   }
+  }
+
 }
 </style>