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

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

@@ -17,11 +17,15 @@
                 <div class="title">
                     <span>监测终端状态</span>
                 </div>
-
                 <div style="display: flex" class="mt2">
                     <img src="@/assets/img/FGX.png" />
                 </div>
-                <MyEChart :style="tabHeight" :options="terminalCharts" />
+                <div class="TJTop">
+                    <img src="@/assets/img/TJ.png" />
+                    终端在线率：
+                    <span>{{ onlineRate }}%</span>
+                </div>
+                <MyEChart :style="`height: calc(${tabHeight.height} - 27px)`" :options="terminalCharts" />
             </div>
             <!-- 监测点 -->
             <div :style="boxHeight">
@@ -46,16 +50,19 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref, provide } from 'vue'
+
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 
 import { getPracticalRunDeviceInfo, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
-
+import { useConfig } from '@/stores/config'
+const config = useConfig()
 const dictData = useDictData()
 const height = mainHeight(30)
 const boxHeight = mainHeight(40, 3)
 const tabHeight: any = mainHeight(150, 3)
+const onlineRate = ref(0)
 const show = ref(false)
 const formRow: any = ref({})
 const terminalCharts: any = ref({})
@@ -84,7 +91,7 @@ const info = (row: any) => {
             tooltip: {},
             yAxis: {
                 type: 'value',
-                name:'个'
+                name: '个'
             },
 
             xAxis: {
@@ -124,60 +131,72 @@ const info = (row: any) => {
     })
     // 终端
     getGridDiagramCityDev({ ...form, deviceInfoParam: form, pageNum: 1, pageSize: 1000 }).then(res => {
+        onlineRate.value = res.data[1]
+        let data = [
+            {
+                name: '运行',
+                value: res.data[0] - 0
+            },
+            {
+                name: '检修',
+                value: res.data[2] - 0
+            },
+            {
+                name: '退役',
+                value: res.data[4] - 0
+            }
+        ]
+
         terminalCharts.value = {
             title: {
-                text: ''
+                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: {
-                show: true,
-                right: 90
+                orient: 'vertical',
+                top: 'center',
+                right: '10%',
+                formatter: function (e: any) {
+                    return e + '   ' + data.filter(item => item.name == e)[0].value + '台'
+                }
             },
             xAxis: {
-                data: ['运行', '检修', '退运']
+                show: false
             },
-            yAxis: [
-                {
-                    name: '个',
-                    type: 'value'
-                },
-                {
-                    type: 'value',
-                    name: '%',
-                    splitLine: {
-                        show: false
-                    },
-                    max: 100
-                }
-            ],
-            grid: {
-                top: '35px',
-                left: '20px',
-                right: '20px'
+            yAxis: {
+                show: false
             },
+            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
             options: {
                 dataZoom: null,
                 series: [
                     {
-                        name: '终端个数',
-                        type: 'bar',
+                        type: 'pie',
+                        center: ['30%', '50%'],
+                        radius: ['40%', '60%'],
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
 
-                        data: [res.data[0], res.data[2], res.data[4]],
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
-                    },
-                    {
-                        name: '在线率',
-                        type: 'bar',
-                        yAxisIndex: 1,
-                        data: [res.data[1]],
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
+                        data: data
                     }
                 ]
             }
@@ -295,4 +314,16 @@ defineExpose({ info, show })
 :deep(.el-table thead) {
     color: #000;
 }
+.TJTop {
+    margin-top: 10px;
+    display: flex;
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+    span {
+        color: #2dcd28;
+    }
+}
 </style>