大屏(数字工地)：使用 DataCard 组件优化环境监测代码

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

@@ -28,14 +28,30 @@
         <vue-scroll>
           <div
             class="list-item"
-            :class="item.devonline == 0 ? 'offline' : 'online'"
+            :class="
+              item.devonline !== undefined
+                ? item.devonline == 0
+                  ? 'offline'
+                  : 'online'
+                : item.devOnline == 2
+                ? 'offline'
+                : 'online'
+            "
             v-for="(item, index) in list"
             :key="index"
           >
             <span class="type">
-              {{ item.devonline == 0 ? '在线' : '离线' }}
+              {{
+                item.devonline !== undefined
+                  ? item.devonline == 0
+                    ? '在线'
+                    : '离线'
+                  : item.devOnline == 2
+                  ? '离线'
+                  : '在线'
+              }}
             </span>
-            <p>{{ item.devName }}</p>
+            <p>{{ item.devName || item.deviceName }}</p>
             <span class="alarm">今日报警:{{ item.alarmNum || 0 }}</span>
           </div>
         </vue-scroll>

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

@@ -151,15 +151,6 @@
               ref="bgPackImg"
               @load="countBoxSize"
             />
-            <!-- <el-image
-              style="width: 100%; height: auto;position: relative;"
-              :src="bgUrl"
-              class="bgPackImg"
-              ref="bgPackImg"
-            ></el-image> -->
-            <!-- <img class="bgPackImg" src="@/assets/images/longguang2/bg.jpg"  style="width: auto; height: auto;position:absolute"
-              ref="bgPackImg">
-            <!-- 点位 -->
             <div
               v-for="(item, index) in pointList"
               class="point"
@@ -520,11 +511,6 @@
           <div class="pointDialog_l" v-if="showVideoDialog">
             <i class="closeBtn el-icon-error" @click="closeVideoDialog"></i>
             <div class="pointDialogContent">
-              <!-- <div class="videoListBox">
-                  <ul>
-                    <li></li>
-                  </ul>
-                </div> -->
               <areaTree
                 @playParams="getPlayParams"
                 :activeLive="activeLiveData"
@@ -2968,54 +2954,19 @@
             />
           </div>
         </div>
-        <div class="blockBox">
+        <!-- 环境监测 -->
-          <!-- 环境监测 -->
+        <DataCard
-          <div class="blockTitle">
+          :data="{
-            {{ $t('message.companyDiagram.environmentMonitor') }}
+            title: 'companyDiagram.environmentMonitor',
-          </div>
+            countNum: onlineDevNum,
-          <div class="blockContent">
+            countLabel: 'onlineDev',
-            <div class="devInfoBox">
+            countImg: require('@/assets/images/dataBoard/online.jpg'),
-              <div class="item">
+            todayNum: offlineDevNum,
-                <img src="@/assets/images/dataBoard/online.jpg" />
+            todayLabel: 'notOnlineDev',
-                <div>
+            todayImg: require('@/assets/images/dataBoard/offline.jpg')
-                  <p class="num" style="color: #5181f6">{{ onlineDevNum }}</p>
+          }"
-                  <p>
+          :list="environmentDevList"
-                    <!-- 在线设备 -->
+        ></DataCard>
-                    {{ $t('message.dataBoard.onlineDev') }}
-                  </p>
-                </div>
-              </div>
-              <div class="item">
-                <img src="@/assets/images/dataBoard/offline.jpg" />
-                <div>
-                  <p class="num" style="color: #f67f51">{{ offlineDevNum }}</p>
-                  <p>
-                    <!-- 离线设备 -->
-                    {{ $t('message.dataBoard.notOnlineDev') }}
-                  </p>
-                </div>
-              </div>
-              <div class="list-box">
-                <vue-scroll>
-                  <div
-                    class="list-item"
-                    :class="item.devOnline == 2 ? 'offline' : 'online'"
-                    v-for="(item, index) in environmentDevList"
-                    :key="index"
-                  >
-                    <span class="type" v-if="item.devOnline != 2">在线</span>
-                    <span class="type" v-else>离线</span>
-                    <p>{{ item.deviceName }}</p>
-                    <span class="alarm" v-if="item.alarmNum"
-                      >今日报警:{{ item.alarmNum }}</span
-                    >
-                    <span class="alarm" v-else>今日报警:0</span>
-                  </div>
-                </vue-scroll>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
       <!-- 设备类型切换 -->
       <div class="pointTabBox">
@@ -3126,18 +3077,6 @@ export default {
       videoList: [],
       playList: [],
       svgTimer: null,
-      // [
-      //   { name: "全部", id: "" },
-      //   { name: "视频监控", id: 4 },
-      //   { name: "塔吊监测", id: 2 },
-      //   { name: "升降机监测", id: 3 },
-      //   { name: "车辆监测", id: 1 },
-      //   { name: "用电监测", id: 5 },
-      //   { name: "环境监测", id: 6 },
-      //   { name: "人脸闸机", id: 7 },
-      //   { name: "龙门吊监测", id: 9 },
-      //   { name: "应急管理", id: 99 },
-      // ],
       devTypeList: this.$t('message.dataBoard.devTypeList'),
       realTimeData: {},
       devTypeIndex: 0,
@@ -4283,18 +4222,6 @@ export default {
 
         this.pointList = res.result
         console.log(res.result)
-        // [
-        //   { name: "全部", id: "" },
-        //   { name: "视频监控", id: 4 },
-        //   { name: "塔吊监测", id: 2 },
-        //   { name: "升降机监测", id: 3 },
-        //   { name: "车辆监测", id: 1 },
-        //   { name: "用电监测", id: 5 },
-        //   { name: "环境监测", id: 6 },
-        //   { name: "人脸闸机", id: 7 },
-        //   { name: "龙门吊监测", id: 9 },
-        //   { name: "应急管理", id: 99 },
-        // ],
       })
     },
     //获取环境设备列表--环境监测实时数据--下拉