湖里大屏(数字工地)：塔吊设备联调

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

@@ -17,15 +17,17 @@
       </div>
     </div>
     <div class="list">
-      <div class="list-item" :class="i === 2 ? 'offline' : 'online'" v-for="i in 3" :key="i">
+      <vue-scroll>
-        <div class="status">在线</div>
+        <div class="list-item" :class="item.devonline == '0' ? 'online' : 'offline'" v-for="(item, i) in list" :key="i">
-        <div class="label">1号塔吊</div>
+          <div class="status">{{ item.devonline == '0' ? '在线' : '离线' }}</div>
-        <div class="num" v-if="type === 'waring'">今日报警：2</div>
+          <div class="label">{{ item.devName }}</div>
+          <div class="num" v-if="type === 'waring'">今日报警：{{ item.alarmNum }}</div>
           <div class="persons" v-if="type === 'persons'">
             <div class="person">进场人数：67</div>
             <div class="person">出场人数：67</div>
           </div>
         </div>
+      </vue-scroll>
     </div>
   </div>
 </template>
@@ -69,6 +71,7 @@ export default {
 
 <style lang="less" scoped>
 .h-count-list {
+  height: 100%;
   .counts {
     padding: 10px 26px 20px;
     display: flex;
@@ -85,9 +88,15 @@ export default {
         &.towercrane {
           background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-tower-crane.png');
         }
+        &.towercrane2 {
+          background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-tower-crane2.png');
+        }
         &.warring {
           background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-warring.png');
         }
+        &.warring2 {
+          background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-warring2.png');
+        }
         &.facegate {
           background-image: url('~@/views/projectAdmin/dataBoard/projectHuScreen/assets/images/icons/i-face-gate.png');
         }
@@ -109,6 +118,7 @@ export default {
   }
 
   .list {
+    height: calc(100% - 90px);
     padding: 0 10px;
     .list-item {
       margin-bottom: 6px;

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

@@ -1,6 +1,7 @@
 <template>
   <Card :title="title">
-    <DeviceCard
+    <!-- 无用功 -->
+    <!-- <DeviceCard
       :leftCount="{ value: totalTowerDev, label: '塔吊设备数', img: 'towercrane2' }"
       :rightCount="{ value: totalDangerTowerDev, label: '今日报警数', img: 'warring2' }"
     >
@@ -9,20 +10,28 @@
         <div class="item">离线</div>
       </div>
       <JBarChart :tooltip="{}" :xData="xData" :yData="yData" />
-    </DeviceCard>
+    </DeviceCard> -->
+
+    <CountList
+      :allCount="{ value: totalTowerDev, label: '塔吊总数', img: 'towercrane2' }"
+      :todayCount="{ value: totalDangerTowerDev, label: '今日报警总数', img: 'warring2' }"
+      :list="towerList"
+    />
   </Card>
 </template>
 
 <script>
-import Card from "../components/Card.vue";
+import Card from '../components/Card.vue'
-import DeviceCard from "./components/DeviceCard.vue";
+// import DeviceCard from './components/DeviceCard.vue'
-import JBarChart from "../jChart/bar/JBarChart.vue";
+// import JBarChart from '../jChart/bar/JBarChart.vue'
+import CountList from '../components/CountList.vue'
 export default {
-  components: { Card, DeviceCard, JBarChart },
+  // components: { Card, DeviceCard, JBarChart },
+  components: { Card, CountList },
   props: {
     title: {
       type: String,
-      default: ""
+      default: ''
     },
     towerList: {
       type: Array,
@@ -30,48 +39,20 @@ export default {
     },
     totalTowerDev: {
       type: Number,
-      default: ""
+      default: ''
     },
     totalDangerTowerDev: {
       type: Number,
-      default: ""
+      default: ''
     }
-  },
-  data() {
-    const yData = [23, 44, 63, 12, 45, 78, 34, 67].map((value, i) => {
-      if (i > 4 && i < 7) {
-        return {
-          name: "离线",
-          value,
-          itemStyle: { color: "#FF6C7F" }
-        };
-      } else {
-        return {
-          name: "报警数",
-          value,
-          itemStyle: { color: "#3CABFD" }
-        };
   }
-    });
+  // data() {
-    return {
+  //   return {
-      xData: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号"],
+  //     xData: [],
-      yData
+  //     yData: []
-    };
+  //   }
-  },
-  mounted() {
-    // console.log("------", this.towerList, this.totalTowerDev);
-    // 备注：此处xy轴数据没有处理 报警数很多为0 无法渲染
-    //var datax = [],datay =[]
-    //this.towerList.forEach((item)=>{
-    // datax.push(item.devName)
-    // datay.push(item.alarmNum)
-    // if(item.deviceState == 1){
   // }
-    //})
-    // this.xData = datax
-    // console.log('塔吊设备--------', this.xData)
 }
-};
 </script>
 
 <style lang="less" scoped>
@@ -87,7 +68,7 @@ export default {
     align-items: center;
     &::before {
       margin-right: 8px;
-      content: "";
+      content: '';
       width: 16px;
       height: 6px;
       border-radius: 2px;