fix:配置设备告警 联系方式

hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue

@@ -30,7 +30,9 @@
         style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
         <div ref="echartPieOne" style="width: 100%; height: 100%"></div>
       </div>
-      <div style="flex: 1; height: 100%; background-color: white; border-radius: 4px"> xxxx </div>
+      <div style="flex: 1; height: 100%; background-color: white; border-radius: 4px">
+        <div ref="echartPieTow" style="width: 100%; height: 100%"></div>
+      </div>
     </div>
     <!-- 告警矩形 echarts -->
     <div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
@@ -49,8 +51,10 @@
   const info = ref({});
   let chartInstance: echarts.ECharts | null = null;
   let chartInstanceOne: echarts.ECharts | null = null;
+  let chartInstanceTow: echarts.ECharts | null = null;
   const graphChart = ref(null);
   const echartPieOne = ref(null);
+  const echartPieTow = ref(null);
   const getGraphChart = () => {
     let dayData = [];
     let energyAlarm = [];
@@ -294,7 +298,7 @@
           },
           textAlign: 'center',
           x: '44.3%',
-          y: '46%',
+          y: '43%',
         },
       ],
       tooltip: {
@@ -327,9 +331,10 @@
           clockwise: false, //饼图的扇区是否是顺时针排布
           avoidLabelOverlap: false,
           label: {
+            show: true,
             normal: {
               show: true,
-              position: 'outter',
+              position: 'outside',
               textStyle: {
                 fontSize: 14,
                 fontWeight: 'bold',
@@ -342,7 +347,7 @@
           labelLine: {
             show: true, // 控制标签线是否显示
             length: 10, // 标签线长度
-            length2: 20, // 标签线引出部分长度
+            length2: 0, // 标签线引出部分长度
             // 其他样式属性，如 lineStyle 等
           },
           data: m2R2Data,
@@ -352,11 +357,107 @@
     chartInstanceOne = echarts.init(echartPieOne.value);
     chartInstanceOne.setOption(option);
   };
+  const getEchartPieTow = () => {
+    if (chartInstanceTow) {
+      chartInstanceTow.dispose();
+    }
+    chartInstanceTow = echarts.init(echartPieTow.value);
+    var m2R2Data = [
+      { value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
+      { value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
+      { value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
+    ];
+    const option = {
+      title: [
+        {
+          text: '优先级 / 近30天',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#aaaaaa',
+          },
+          left: '2%',
+          top: '2%',
+        },
+        {
+          text: '优先级',
+          subtext: 12312 + '个',
+          textStyle: {
+            fontSize: 24,
+            color: 'black',
+          },
+          subtextStyle: {
+            fontSize: 24,
+            fontWeight: '700',
+            color: 'black',
+          },
+          textAlign: 'center',
+          x: '44.3%',
+          y: '43%',
+        },
+      ],
+      tooltip: {
+        trigger: 'item',
+        formatter: function (parms) {
+          var str = parms.marker + ' :' + parms.data.value;
+          return str;
+        },
+      },
+      legend: {
+        // 设置图例靠右，上下居中，垂直排列
+        right: 50,
+        top: 'center',
+        orient: 'vertical',
+        // 图例图标设置为圆形
+        icon: 'circle',
+        itemWidth: 12,
+        itemHeight: 12,
+        itemGap: 16,
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      series: [
+        {
+          name: '优先级',
+          type: 'pie',
+          center: ['45%', '50%'],
+          radius: ['50%', '70%'],
+          clockwise: false, //饼图的扇区是否是顺时针排布
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            normal: {
+              show: true,
+              position: 'outside',
+              textStyle: {
+                fontSize: 14,
+                fontWeight: 'bold',
+              },
+              formatter: function (parms) {
+                return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
+              },
+            },
+          },
+          labelLine: {
+            show: true, // 控制标签线是否显示
+            length: 10, // 标签线长度
+            length2: 0, // 标签线引出部分长度
+            // 其他样式属性，如 lineStyle 等
+          },
+          data: m2R2Data,
+        },
+      ],
+    };
+    chartInstanceTow = echarts.init(echartPieTow.value);
+    chartInstanceTow.setOption(option);
+  };
   onMounted(() => {
     //渲染第三个图表
     getGraphChart();
     //优先级
     getEchartPieOne();
+    getEchartPieTow();
   });
 </script>
 <style lang="less" scoped>