同步现场电网一张图代码代码

src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue

@@ -32,9 +32,18 @@
                 </div>
                 <div>
                     <div class="monitoringPoints">
-                        <div>在线监测点数：{{ monitorList.onlineNum }}</div>
-                        <div>超标监测点数：{{ monitorList.overNum }}</div>
-                        <div>超标监测点占比：{{ monitorList.overRatio }}</div>
+                        <div>
+                            <span class="line"></span>
+                            在线监测点数：{{ monitorList.onlineNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点数：{{ monitorList.overNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点占比：{{ monitorList.overRatio }}
+                        </div>
                     </div>
 
                     <MyEChart :style="`height:calc(${EchHeight.height} + 10px)`" :options="exceededCharts" />
@@ -137,7 +146,8 @@ const exceededRef = ref()
 const formRow: any = ref({})
 const monitorList: any = ref({})
 const statisticsCharts: any = ref({})
-
+import { useConfig } from '@/stores/config'
+const config = useConfig()
 const passingCharts = ref()
 const exceededCharts = ref()
 
@@ -324,8 +334,9 @@ const info = (row: any) => {
         monitorList.value = res.data[0]
         exceededCharts.value = {
             tooltip: {},
+            color: [config.layout.elementUiPrimary[0], '#FFBF00'],
             yAxis: {
-                name: '%',
+                name: '',
                 type: 'value',
                 max: 100
             },
@@ -387,36 +398,70 @@ const info = (row: any) => {
     // 稳态电能质量指标水平评估
 
     getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
+        let data = [
+            {
+                name: '电压暂升',
+                value: res.data[0].upCount - 0
+            },
+            {
+                name: '电压暂降',
+                value: res.data[0].sagsCount - 0
+            },
+            {
+                name: '短时中断',
+                value: res.data[0].breakCount - 0
+            }
+        ]
         statisticsCharts.value = {
-            tooltip: {},
-            yAxis: {
-                type: 'value'
-            },
-            legend: {
-                show: false
-            },
-            xAxis: {
-                type: 'category',
-                data: ['电压暂升', '电压暂降', '短时中断']
-            },
-            grid: {
-                top: '30px',
-                left: '10px',
-                right: '20px'
+            title: {
+                text: data[0].value + data[1].value + data[2].value,
+                left: '26%',
+                top: '40%',
+                textStyle: {
+                    fontWeight: 600,
+                    fontSize: 16
+                },
+                subtext: '总数',
+                subtextStyle: {
+                    fontWeight: 550,
+                    fontSize: 14
+                }
             },
 
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                top: 'center',
+                right: '10%',
+                formatter: function (e: any) {
+                    return e + '   ' + data.filter(item => item.name == e)[0].value + '条'
+                }
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
             options: {
                 dataZoom: null,
                 series: [
                     {
-                        name: '暂态个数',
-                        type: 'bar',
-                        data: [res.data[0].upCount, res.data[0].sagsCount, res.data[0].breakCount],
+                        type: 'pie',
+                        center: ['30%', '50%'],
+                        radius: ['50%', '70%'],
                         label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+
+                        data: data
                     }
                 ]
             }
@@ -553,5 +598,14 @@ defineExpose({ info, show })
     grid-template-columns: 1fr 1fr 1fr;
     margin-top: 10px;
     margin-bottom: 10px;
+    .line {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--el-color-primary);
+        margin-right: 2px;
+        margin-bottom: 1px;
+    }
 }
 </style>