chore: 优化高度分布统计

app/src/components/Monitor3D.vue

@@ -23,6 +23,14 @@ onMounted(() => {
         name: "水压检测点位",
         value: 130,
       },
+      {
+        name: "火灾报警主机监测点位",
+        value: 120,
+      },
+      {
+        name: "消防监控室人员离岗检测点位",
+        value: 130,
+      },
     ],
     0
   );
@@ -292,7 +300,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   }
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
-    color: ["#D5C307", "#01ADEF", "#12A647"],
+    color: ["#D5C307", "#01ADEF", "#12A647", "#caf869", "#88ffc6"],
     legend: {
       top: "200%",
     },
@@ -365,18 +373,18 @@ function getPie3D(pieData, internalDiameterRatio) {
 <style scoped lang="less">
 .container {
   width: 443px;
-  height: 188px;
+  height: 130px;
   position: relative;
 }
 
 .container::after {
   content: "";
   position: absolute;
-  width: 250px;
-  height: 138px;
+  width: 150px;
+  height: 68px;
   background: url("../assets/images/1.png") no-repeat;
   background-size: 100% 100%;
-  bottom: -20px;
+  bottom: -2px;
   left: 50%;
   transform: translateX(-50%);
 }

app/src/views/Basic/components/HeightDistribution.vue

@@ -111,15 +111,11 @@ export default {
                   [
                     {
                       offset: 0,
-                      color: "#0B4EC3", // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.6,
-                      color: "#138CEB", // 60% 处的颜色
+                      color: "rgba(0,209,255, 1)", // 0% 处的颜色
                     },
                     {
                       offset: 1,
-                      color: "#17AAFE", // 100% 处的颜色
+                      color: "rgba(0, 255,224, .87)", // 100% 处的颜色
                     },
                   ],
                   false
@@ -142,15 +138,11 @@ export default {
                   [
                     {
                       offset: 0,
-                      color: "#09337C", // 0% 处的颜色
-                    },
-                    {
-                      offset: 0.6,
-                      color: "#0761C0", // 60% 处的颜色
+                      color: "rgba(0,209,255, 1)", // 0% 处的颜色
                     },
                     {
                       offset: 1,
-                      color: "#0575DE", // 100% 处的颜色
+                      color: "rgba(0, 255,224, .87)", // 100% 处的颜色
                     },
                   ],
                   false

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

@@ -8,77 +8,131 @@
       <img src="../../../assets/images/Group 1321314651.png" alt="" />
     </div>
     <Monitor3D ref="monitor" />
-    <div class="info">
-      <div class="bg-num" @click="clickItem(1)">
-        <div class="line-box">
-          <span
-            :class="{
-              line: true,
-              active: pieActive1,
-            }"
-          ></span>
-          <span>生命通道监控点位</span>
-        </div>
-        <div>
-          <!-- 在线 -->
-          <div class="dis-online">
-            <div>
-              <span class="online"></span>
-              <span>1234个</span>
-            </div>
-            <div>
-              <span class="off-line"> </span>
-              <span>1234个</span>
+    <div>
+      <div class="info">
+        <div class="bg-num" @click="clickItem(1)">
+          <div class="line-box">
+            <span
+              :class="{
+                line: true,
+                active: pieActive1,
+              }"
+            ></span>
+            <span>生命通道监控点位</span>
+          </div>
+          <div>
+            <!-- 在线 -->
+            <div class="dis-online">
+              <div>
+                <span class="online"></span>
+                <span>1234个</span>
+              </div>
+              <div>
+                <span class="off-line"> </span>
+                <span>1234个</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="bg-num" @click="clickItem(2)">
-        <div class="line-box">
-          <span
-            :class="{
-              line: true,
-              'line-b': true,
-              active: pieActive2,
-            }"
-          ></span>
-          <span>电气火灾监测点位</span>
-        </div>
-        <div>
-          <!-- 在线 -->
-          <div class="dis-online">
-            <div>
-              <span class="online"></span>
-              <span>1234个</span>
+        <div class="bg-num" @click="clickItem(2)">
+          <div class="line-box">
+            <span
+              :class="{
+                line: true,
+                'line-b': true,
+                active: pieActive2,
+              }"
+            ></span>
+            <span>电气火灾监测点位</span>
+          </div>
+          <div>
+            <!-- 在线 -->
+            <div class="dis-online">
+              <div>
+                <span class="online"></span>
+                <span>1234个</span>
+              </div>
+              <div>
+                <span class="off-line"> </span>
+                <span>1234个</span>
+              </div>
             </div>
-            <div>
-              <span class="off-line"> </span>
-              <span>1234个</span>
+          </div>
+        </div>
+        <div class="bg-num" @click="clickItem(3)">
+          <div class="line-box">
+            <span
+              :class="{
+                line: true,
+                active: pieActive3,
+                'line-g': true,
+              }"
+            ></span>
+            <span>水压检测点位</span>
+          </div>
+          <div>
+            <!-- 在线 -->
+            <div class="dis-online">
+              <div>
+                <span class="online"></span>
+                <span>1234个</span>
+              </div>
+              <div>
+                <span class="off-line"> </span>
+                <span>1234个</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="bg-num" @click="clickItem(3)">
-        <div class="line-box">
-          <span
-            :class="{
-              line: true,
-              active: pieActive3,
-              'line-g': true,
-            }"
-          ></span>
-          <span>水压检测点位</span>
-        </div>
-        <div>
-          <!-- 在线 -->
-          <div class="dis-online">
-            <div>
-              <span class="online"></span>
-              <span>1234个</span>
+      <div class="info-2">
+        <div class="bg-num" @click="clickItem(4)">
+          <div class="line-box">
+            <span
+              :class="{
+                line: true,
+                'line-d': true,
+                active: pieActive4,
+              }"
+            ></span>
+            <span>火灾报警主机监测点位</span>
+          </div>
+          <div>
+            <!-- 在线 -->
+            <div class="dis-online">
+              <div>
+                <span class="online"></span>
+                <span>1234个</span>
+              </div>
+              <div>
+                <span class="off-line"> </span>
+                <span>1234个</span>
+              </div>
             </div>
-            <div>
-              <span class="off-line"> </span>
-              <span>1234个</span>
+          </div>
+        </div>
+        <div class="bg-num" @click="clickItem(5)">
+          <div class="line-box">
+            <span
+              :class="{
+                line: true,
+                'line-e': true,
+                active: pieActive5,
+              }"
+            ></span>
+            <span>消防监控室人员离岗检测点位</span>
+          </div>
+          <div>
+            <!-- 在线 -->
+            <div class="dis-online">
+              <div>
+                <span class="online"></span>
+                <span>1234个</span>
+              </div>
+              <div>
+                <span class="off-line"> </span>
+                <span>1234个</span>
+              </div>
             </div>
           </div>
         </div>
@@ -96,7 +150,9 @@ export default {
       pieActive1: true,
       pieActive2: true,
       pieActive3: true,
-      ctx: ["生命通道监控点位", "电气火灾监测点位", "水压检测点位"],
+      pieActive4: true,
+      pieActive5: true,
+      ctx: ["生命通道监控点位", "电气火灾监测点位", "水压检测点位", '火灾报警主机监测点位', '消防监控室人员离岗检测点位'],
     };
   },
   methods: {
@@ -134,10 +190,7 @@ export default {
     gap: 20px;
     margin-top: 12px;
   }
-}
-.video-list {
-  padding: 10px 10px;
-  font-size: 13px;
+  
   // 渐变
   .bg-num {
     width: 125px;
@@ -172,4 +225,64 @@ export default {
     }
   }
 }
+.info-2 {
+  display: flex;
+  margin-top: 4px;
+  gap: 8px;
+  .online {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #15ff2d;
+    border-radius: 50%;
+    margin-right: 2px;
+  }
+  .off-line {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background: #f06040;
+    border-radius: 50%;
+    margin-right: 2px;
+  }
+  .dis-online {
+    display: flex;
+    // justify-content: space-between;
+    gap: 20px;
+    margin-top: 12px;
+  }
+  .bg-num {
+    width: 197px;
+    height: 50px;
+    background: rgba(0, 213, 255, 0.18);
+    padding: 5px 5px;
+    cursor: pointer;
+  }
+  .line-box {
+    display: flex;
+    align-items: center;
+    margin-top: 7px;
+  }
+  .line {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background: #d3d3d3;
+    margin-right: 5px;
+  }
+  .line-d {
+    &.active {
+      background: #caf869;
+    }
+  }
+  .line-e {
+    &.active {
+      background: #88ffc6;
+    }
+  }
+}
+.video-list {
+  padding: 10px 10px;
+  font-size: 13px;
+}
 </style>