feat:智慧消防

app/src/components/Maintenance3D.vue

@@ -393,7 +393,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   position: absolute;
   width: 290px;
   height: 198px;
-  background: url("../assets/1.png") no-repeat;
+  background: url("../assets/images/1.png") no-repeat;
   background-size: 100% 100%;
   left: calc(50% - 145px);
   bottom: 1%;

app/src/components/Monitor3D.vue

@@ -283,30 +283,25 @@ function getPie3D(pieData, internalDiameterRatio) {
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
     color: [ "#5ef8c9", "#5ed3f8", "#EDE400"],
-    legend: {
-      // type: "scroll",
-      data: legendData,
-      icon: "roundRect",
-    //   orient: "vertical",
-      padding: 5,
-      itemGap: 20,
-      bottom:'5%',
-      left:'2%',
-      itemWidth: 10, // 设置宽度
-      itemHeight: 10, // 设置高度
-      selectedMode: true,
-      textStyle: {
-        color: "#FFFFFF",
-        fontSize: 14,
-        lineHeight: 14,
-        rich: {
-          a: {
-            // verticalAlign: "middle",
-          },
-        },
-        padding: [0, 0, -3, 0],
-      },
-    },
+    // legend: {
+    //   // type: "scroll",
+    //   data: legendData,
+    //   icon: "roundRect",
+    // //   orient: "vertical",
+    //   padding: 5,
+    //   itemGap: 20,
+    //   bottom:'5%',
+    //   left:'2%',
+    //   itemWidth: 10, // 设置宽度
+    //   itemHeight: 10, // 设置高度
+    //   selectedMode: true,
+    //   textStyle: {
+    //     color: "#FFFFFF",
+    //     fontSize: 14,
+    //     lineHeight: 14,
+    //     padding: [0, 0, -3, 0],
+    //   },
+    // },
     tooltip: {
       formatter: (params) => {
         if (params.seriesName !== "mouseoutSeries") {
@@ -385,20 +380,20 @@ function getPie3D(pieData, internalDiameterRatio) {
 <style scoped lang="less">
 .container {
   width: 440px;
-  height: 264px;
+  height: 184px;
   position: relative;
 }
 
 .container::after {
   content: "";
   position: absolute;
-  width: 290px;
-  height: 198px;
+  width: 190px;
+  height: 138px;
   background: url("../assets/images/1.png") no-repeat;
   background-size: 100% 100%;
 //   left: calc(50% - 145px);
-  bottom: 10px;
-  left: 70px;
+  bottom:10px;
+  left: 124px;
 }
 
 .container::before {

app/src/components/Overhaul3D.vue

@@ -389,7 +389,7 @@ function getPie3D(pieData, internalDiameterRatio) {
   position: absolute;
   width: 290px;
   height: 198px;
-  background: url("../assets/1.png") no-repeat;
+  background: url("../assets/images/1.png") no-repeat;
   background-size: 100% 100%;
   left: calc(50% - 145px);
   bottom: 1%;

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

@@ -7,9 +7,69 @@
             <img src="../../../assets/images/Group 1321314650.png" alt="">
             <img src="../../../assets/images/Group 1321314651.png" alt="">
         </div>
-        <div>
             <Monitor3D/>
-        </div>
+            <div class="info">
+                <div class="bg-num">
+                    <div class="line-box">
+                        <span class="line"></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 class="bg-num">
+                    <div class="line-box">
+                        <span class="line"></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 class="bg-num">
+                    <div class="line-box">
+                        <span class="line"></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>
 </template>
 
@@ -21,7 +81,52 @@ components:{Monitor3D}
 </script>
 
 <style lang="less" scoped>
+.info{
+    display: flex;
+    justify-content: space-between;
+        .online{
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background: #15FF2D;
+            border-radius: 50%;
+        }
+        .off-line{
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background: #F06040;
+            border-radius: 50%;
+        }
+        .dis-online{
+            display: flex;
+            // justify-content: space-between;
+            gap:20px;
+            margin-top: 8px;
+        }
+}
 .video-list{
     padding: 10px 10px;
+    font-size: 13px;
+    // 渐变
+    .bg-num{
+        width: 125px;
+        height: 50px;
+        background: #00D5FF;
+        padding: 5px 5px;
+
+    }
+    .line-box{
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+    }
+    .line{
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        background:#D5C307 ;
+        margin-right: 5px;
+    }
 }
 </style>