perf: 调整样式

app/src/components/Monitor3D.vue

@@ -17,15 +17,14 @@ onMounted(() => {
       },
       {
         name: "电气火灾监测点位",
-        value: 12,
+        value: 120,
       },
       {
         name: "水压检测点位",
-        value: 46,
-      },
-      
+        value: 130,
+      }
     ],
-    0.75
+    0
   );
 
   // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
@@ -236,8 +235,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     sumValue += pieData[i].value;
     // console.log(pieData[i].name);
     const seriesItem = {
-      name:
-        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+      name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
       type: "surface",
       parametric: true,
       wireframe: {
@@ -249,6 +247,7 @@ function getPie3D(pieData, internalDiameterRatio) {
         hovered: false,
         k,
       },
+      // radius: 'dataValue',
     };
     if (typeof pieData[i].itemStyle !== "undefined") {
       const { itemStyle } = pieData[i];
@@ -282,26 +281,30 @@ 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,
-    //     padding: [0, 0, -3, 0],
-    //   },
-    // },
+    color: [ "#D5C307", "#01ADEF", "#12A647"],
+    labelLine: {
+      show: true,
+      lineStyle: {
+          color: '#404772',
+      },
+    },
+    label: {
+        show: true,
+        position: 'inside',
+        rich: {
+          b: {
+            fontSize: 24,
+            lineHeight: 30,
+            fontWeight: 'bold',
+            color: '#fff',
+          },
+          c: {
+            fontSize: 18,
+            color: '#fff',
+          },
+        },
+        formatter: '{b|{b}}\n{c|{c}%}',
+    },
     tooltip: {
       formatter: (params) => {
         if (params.seriesName !== "mouseoutSeries") {
@@ -314,15 +317,6 @@ function getPie3D(pieData, internalDiameterRatio) {
         return "";
       },
     },
-    // title:[{
-    //     text: '单位：栋',
-    //     top: 8,
-    //     left: 10,
-    //     textStyle: {
-    //         fontSize: 12,
-    //         color:'#5ed3f8',
-    //     }
-    // }],
     xAxis3D: {
       min: -1,
       max: 1,
@@ -337,18 +331,18 @@ function getPie3D(pieData, internalDiameterRatio) {
     },
     grid3D: {
       show: false,
-      boxHeight: 16,
+      boxHeight: 25,
       top: "-17%",
       left: "0",
       viewControl: {
         // 3d效果可以放大、旋转等，请自己去查看官方配置
-        alpha: 27,
+        alpha: 25,
         beta: 70, //旋转角度
         rotateSensitivity: 1,
         zoomSensitivity: 0,
         panSensitivity: 0,
-        // autoRotate: true,
-        distance: 150,
+        autoRotate: true,
+        distance: 210,
       },
       // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
       postEffect: {
@@ -361,7 +355,7 @@ function getPie3D(pieData, internalDiameterRatio) {
         SSAO: {
           enable: true,
           quality: "medium",
-          radius: 2,
+          radius: 0,
         },
       },
     },
@@ -379,21 +373,21 @@ function getPie3D(pieData, internalDiameterRatio) {
 
 <style scoped lang="less">
 .container {
-  width: 440px;
-  height: 184px;
+  width: 443px;
+  height: 188px;
   position: relative;
 }
 
 .container::after {
   content: "";
   position: absolute;
-  width: 190px;
+  width: 250px;
   height: 138px;
   background: url("../assets/images/1.png") no-repeat;
   background-size: 100% 100%;
-//   left: calc(50% - 145px);
-  bottom:10px;
-  left: 124px;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .container::before {

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

@@ -32,7 +32,7 @@
                 <div class="bg-num">
                     <div class="line-box">
                         <span class="line line-g"></span>
-                    <span>生命通道监控点位</span>
+                        <span>生命通道监控点位</span>
                     </div>
                    <div> 
                     <!-- 在线 -->
@@ -129,12 +129,15 @@ components:{Monitor3D}
         height: 14px;
         background:#D5C307 ;
         margin-right: 5px;
+        cursor: pointer;
     }
     .line-g{
         background: #01ADEF !important;
+        cursor: pointer;
     }
     .line-b{
         background: #12A647 !important;
+        cursor: pointer;
     }
 }
 </style>