大屏(数字工地)：封装 DataCard 组件

src/views/projectAdmin/dataBoard/digitalSite/DataCard.vue

@@ -1,15 +1,166 @@
 <template>
-  <div class="card">是打发发发</div>
+  <div class="card">
+    <div class="card-title">
+      {{ $t('message.' + data.title) }}
+    </div>
+    <div class="card-content">
+      <div class="counts">
+        <div class="count">
+          <img :src="data.countImg" />
+          <div class="info">
+            <div class="num blue">{{ data.countNum }}</div>
+            <div class="label">
+              {{ $t('message.dataBoard.' + data.countLabel) }}
+            </div>
+          </div>
+        </div>
+        <div class="count">
+          <img :src="data.todayImg" />
+          <div class="info">
+            <div class="num orange">{{ data.todayNum }}</div>
+            <div class="label">
+              {{ $t('message.dataBoard.' + data.todayLabel) }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="list">
+        <vue-scroll>
+          <div
+            class="list-item"
+            :class="item.devonline == 0 ? 'offline' : 'online'"
+            v-for="(item, index) in list"
+            :key="index"
+          >
+            <span class="type">
+              {{ item.devonline == 0 ? '在线' : '离线' }}
+            </span>
+            <p>{{ item.devName }}</p>
+            <span class="alarm">今日报警:{{ item.alarmNum || 0 }}</span>
+          </div>
+        </vue-scroll>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {
+          title: '',
+          countNum: 0,
+          countLabel: '',
+          countImg: '',
+          todayNum: 0,
+          todayLabel: '',
+          todayImg: ''
+        }
+      }
+    },
+    list: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .card {
-  width: 100px;
+  position: relative;
-  height: 100px;
+  margin-bottom: 25px;
-  color: red;
+  width: 100%;
+  height: calc(33.33% - 25px);
+  background-image: url(/img/blockBG.8e204bca.png);
+  background-position: bottom center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  z-index: 1;
+  .card-title {
+    position: relative;
+    top: -10px;
+    font-size: 17px;
+    font-weight: bold;
+    text-align: center;
+    color: #6ce9f0;
+  }
+  .card-content {
+    position: relative;
+    padding: 10px 20px;
+    height: calc(100% - 20px - 24px);
+    z-index: 2;
+    .counts {
+      padding: 0 10px;
+      display: flex;
+      .count {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        img {
+          margin-right: 6px;
+          width: 52px;
+          height: 52px;
+        }
+      }
+    }
+    .list {
+      box-sizing: border-box;
+      margin-top: 10px;
+      width: 100%;
+      height: calc(100% - 52px);
+      overflow: hidden;
+      .list-item {
+        margin-top: 8px;
+        width: 100%;
+        height: 37px;
+        line-height: 37px;
+        background-color: #121a21;
+        display: flex;
+        &.online {
+          background-color: #0a2124;
+          .type {
+            background-color: #298372;
+          }
+        }
+        .type {
+          display: inline-block;
+          width: 50px;
+          border-radius: 10px;
+          text-align: center;
+          height: 18px;
+          line-height: 18px;
+          margin-top: 10px;
+          margin-left: 10px;
+          font-size: 15px;
+          background-color: #949494;
+        }
+        p {
+          flex: 1;
+          padding: 0 10px;
+          height: 37px;
+          line-height: 37px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .alarm {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  .blue {
+    color: #5181f6;
+  }
+  .orange {
+    color: #f67f51;
+  }
 }
 </style>

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

@@ -50,6 +50,18 @@
     <div class="digitalSitePage fullHeight" v-if="bgUrl">
       <!-- 侧边栏 -->
       <div class="fullHeight aside">
+        <DataCard
+          :data="{
+            title: 'companyDiagram.towerDev',
+            countNum: totalTowerDev,
+            countLabel: 'totalTowerDev',
+            countImg: require('@/assets/images/dataBoard/tower.png'),
+            todayNum: totalDangerTowerDev,
+            todayLabel: 'todayAlarmCount',
+            todayImg: require('@/assets/images/dataBoard/alarmcount.png')
+          }"
+          :list="towerList"
+        ></DataCard>
         <!-- 塔吊设备 -->
         <div class="blockBox">
           <div class="blockTitle">
@@ -103,7 +115,7 @@
           </div>
         </div>
         <!-- 升降机设备 -->
-        <div class="blockBox">
+        <div class="blockBox" v-if="false">
           <div class="blockTitle">
             {{ $t('message.companyDiagram.lifterDev') }}
           </div>
@@ -3215,8 +3227,10 @@ var $moveBox2
 var $xMove
 var $line
 var $line2
+
+import DataCard from './DataCard.vue'
 export default {
-  components: { areaTree, videoModule },
+  components: { areaTree, videoModule, DataCard },
   data() {
     return {
       countDownTime: null,