1.监控中心 - 设备监测 根据UI设计图进行页面优化

2.监控中心 - 能耗监测  根据UI设计图进行页面优化
3.监控中心 - 环境监测  修改bug，添加loading

hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-row type="flex" style="height: 92%">
+  <a-row type="flex" style="height: 90%">
     <a-col :span="8" style="height: 100%">
       <div
         style="
@@ -14,14 +14,16 @@
           style="
             padding-bottom: 10px;
             width: 40%;
-            height: 4%;
-            padding-left: 30px;
+            height: 20%;
+            padding-right: 30px;
             padding-top: 10px;
+            display: flex;
+            float: right;
           ">
           <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
           <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
         </a-radio-group>
-        <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
+        <div ref="analysisGraphchart" style="width: 100%; height: 95%; padding-top: 10%"></div>
       </div>
     </a-col>
     <a-col :span="16" style="height: 100%">
@@ -37,7 +39,7 @@
         ref="analysisGraphBarchart"
         style="
           width: 98%;
-          height: 58%;
+          height: 57%;
           box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
           margin: 1%;
         "></div>
@@ -179,7 +181,7 @@
 
           const option = {
             grid: {
-              top: 60,
+              top: 80,
               bottom: 20,
             },
             dataZoom: [
@@ -243,13 +245,22 @@
           for (let i = 0; i < data.value.length; i++) {
             dateX.push(data.value[i].name);
 
-            seriesdata.push({ value: data.value[i].value, name: data.value[i].name });
+            seriesdata.push({
+              value: data.value[i].value,
+              name: data.value[i].name,
+              radius: ['70%', '90%'],
+            });
           }
           var seriesList = [
             {
               // name: data.value[0].energyType,
               data: seriesdata,
               type: 'pie',
+              // // 可单选
+              selectedMode: true,
+              // 选中扇区的偏移距离
+              clockwise: '10',
+              // hoverAnimation: true,
               // 圆环内径和外径
               radius: ['70%', '90%'],
               center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
@@ -264,7 +275,7 @@
                 // formatter: '{b}',
                 position: 'outside', // 确保标签在环形图外部
                 // alignTo: 'edge',
-                formatter: '{c}' + data.value[0].energyUnit + '\n{d}%',
+                formatter: '{c}' + data.value[0].unit + '\n{d}%',
                 alignTo: 'labelLine',
                 distanceToLabelLine: 5, // 调整标签和引导线之间的距离
                 distance: 10, // 调整标签距离图形的距离
@@ -312,10 +323,12 @@
           };
 
           chartRight1 = echarts.init(analysisGraphRingchart.value);
-          chartRight1.setOption(option);
+          // chartRight1.setOption(option);
 
           // 默认点击第一个
           if (seriesdata.length > 0) {
+            seriesdata[0].radius = ['50%', '100%'];
+            chartRight1.setOption(option);
             drawRight2(seriesdata[0]);
           }
           chartRight1.on('click', function (params) {
@@ -368,10 +381,10 @@
               },
             },
           },
-          grid: {
-            top: 20,
-            bottom: 60,
-          },
+          // grid: {
+          //   top: 20,
+          //   bottom: 60,
+          // },
           xAxis: {
             type: 'category',
             axisLine: { show: false },