独栋智慧系哦啊方

app/src/views/Detail/components/VideoInfo.vue

@@ -17,9 +17,29 @@
         <span>暂无视频数据</span>
       </div>
     </div>
-    <Monitor3D ref="monitor" :data="pieData" v-if="totalZs > 0" />
-    <div v-else style="width: 440px; height: 130px; display: flex; justify-content: center;">
-      <img src="../../../assets/images/null3.png" style="" />
+    <!-- <Monitor3D ref="monitor" :data="pieData" v-if="totalZs > 0" /> -->
+    <div style="width: 420px; height: auto">
+      <div class="sum">
+        <div class="item yellow">设备总数 <span>{{ totalZs }}</span> 个</div>
+        <div class="item green">在线 <span>{{ totalZx }}</span> 个</div>
+        <div class="item red">告警 <span>{{ totalGj }}</span> 个</div>
+      </div>
+      <div class="line2"></div>
+      <div class="status">
+        <div class="txt">设备状态</div>
+        <div class="s">
+          <div class="legend">
+            <div class="item green">
+              <div class="dot"></div>
+              在线
+            </div>
+            <div class="item red">
+              <div class="dot"></div>
+              告警
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div v-if="pieData">
       <div class="info">
@@ -182,6 +202,8 @@ export default {
       caremaList: [],
       pieData: null,
       totalZs: 0,
+      totalZx: 0,
+      totalGj: 0
     };
   },
   props: ["detail"],
@@ -264,9 +286,13 @@ export default {
           },
         };
         let totalZs = 0;
+        let totalZx = 0;
+        let totalGj = 0;
         if (res.data.rows) {
           res.data.rows.forEach((p) => {
             totalZs = totalZs + p.sbzs;
+            totalZx = totalZx + p.zxs;
+            totalGj = totalGj + p.gjs;
             if (p.sblx.indexOf("水压") >= 0) {
               // 水压
               pieData.sy.zs += p.sbzs || 0;
@@ -299,10 +325,12 @@ export default {
 
         console.log(totalZs);
         this.totalZs = totalZs;
+        this.totalZx = totalZx;
+        this.totalGj = totalGj;
         this.pieData = pieData;
         console.log(this.pieData);
       });
-    }
+    },
   },
   mounted() {
     this.getCaremarList();
@@ -344,13 +372,14 @@ export default {
   // 渐变
   .bg-num {
     width: 125px;
-    height: 50px;
+    height: 58px;
     background: rgba(0, 213, 255, 0.18);
     padding: 5px 5px;
     cursor: pointer;
   }
 
   .line-box {
+        height: 24px;
     display: flex;
     align-items: center;
     margin-top: 7px;
@@ -383,7 +412,7 @@ export default {
 
 .info-2 {
   display: flex;
-  margin-top: 4px;
+  margin-top: 8px;
   gap: 8px;
 
   .online {
@@ -413,13 +442,14 @@ export default {
 
   .bg-num {
     width: 197px;
-    height: 50px;
+    height: 58px;
     background: rgba(0, 213, 255, 0.18);
     padding: 5px 5px;
     cursor: pointer;
   }
 
   .line-box {
+        height: 24px;
     display: flex;
     align-items: center;
     margin-top: 7px;
@@ -476,4 +506,115 @@ export default {
     }
   }
 }
+.sum {
+  width: 100%;
+  height: 36px;
+  margin-top: 26px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 148, 255, 0.5) 0%,
+    rgba(0, 148, 255, 0) 100%
+  );
+  box-sizing: border-box;
+  padding: 6px 17px 6px 7px;
+  display: flex;
+  justify-content: space-between;
+  .item {
+    font-family: "Abel";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 24px;
+    /* identical to box height, or 200% */
+
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    /* F/100 */
+
+    color: #ffffff;
+    span {
+      font-family: "Abel";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 36px;
+      /* identical to box height, or 150% */
+
+      display: flex;
+      align-items: center;
+      text-align: center;
+      margin: 0 4px;
+    }
+
+    &.yellow span {
+      color: #ffd74b;
+    }
+    &.green span {
+      color: #00ff66;
+    }
+    &.red span {
+      color: #ff4b23;
+    }
+  }
+}
+.line2 {
+  width: 100%;
+  height: 1px;
+  background: rgba(0, 213, 255, 0.27);
+  margin: 10px 0 7px 0;
+}
+.status {
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  display: flex;
+  justify-content: space-between;
+
+  .txt {
+    font-family: "PingFang SC";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 36px;
+    /* identical to box height, or 257% */
+
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    color: #ffffff;
+  }
+}
+.legend {
+  width: 150px;
+  height: 36px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  .item {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 2px;
+    display: flex;
+    align-content: center;
+    align-items: center;
+
+    .dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      margin-right: 10px;
+    }
+
+    &.green .dot {
+      background-color: #15ff2d;
+    }
+
+    &.red .dot {
+      background-color: #f06040;
+    }
+  }
+}
 </style>