运行情况

src/components/echarts/MyEchart.vue

@@ -109,14 +109,14 @@ const handlerBar = (options: any) => {
                 item.itemStyle = Object.assign(
                     {
                         color: (params: any) => {
-                            console.log(params)
                             if (params.value == 0 || params.value == 3.14159) {
                                 return '#ccc'
                             } else {
                                 return color[params.seriesIndex]
                             }
                         }
-                    }
+                    },
+                    item.itemStyle
                 )
             }
         })

src/views/pms/voltageSags/monitoringPoint/online/index.vue

@@ -32,7 +32,7 @@ defineOptions({
 })
 const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(82)
-const activeName = ref('3')
+const activeName = ref('1')
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {

src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue

@@ -9,6 +9,15 @@
             </el-form-item>
         </el-form>
         <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <div
+                style='position: absolute; right: 10px; top: 10px;  z-index: 2;display: flex;align-items: center;font-size: 12px'>
+                <el-tag style='width: 20px;height: 12px' :style='{background: gradeColor[2]}'></el-tag>
+                <span  class='ml2' :style='{color: gradeColor[2]}'> {{ 'X<60%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[1]}'></el-tag>
+                <span  class='ml2' :style='{color: gradeColor[1]}'>{{ '60%≤X<90%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[0]}'></el-tag>
+                <span  class='ml2' :style='{color: gradeColor[0]}'>  {{ 'X≥90 %' }}</span>
+            </div>
             <my-echart :options='secondOptions' style='flex: 1;height: 100%' />
             <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
         </div>
@@ -21,6 +30,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
 import { gradeColor } from '@/components/echarts/color'
+
 const datePickerRef = ref()
 const loading = ref(true)
 const monitoringPoint = useMonitoringPoint()
@@ -73,10 +83,6 @@ const initFirst = () => {
                 fontWeight: 'normal'
             }
         },
-        // legend: {
-        //   data: ["在线率"],
-        //   left: "5%",
-        // },
         tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -98,9 +104,9 @@ const initFirst = () => {
                 tips += '时间:' + year + '-' + params[0].name + '</br/>'
                 for (let i = 0; i < params.length; i++) {
                     if (params[i].value == 3.14159) {
-                        tips += params[i].seriesName + ':暂无数据<br/>'
+                        tips += '在线率' + ':暂无数据<br/>'
                     } else {
-                        tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
+                        tips += '在线率' + ':' + params[i].value + '%<br/>'
                     }
                 }
                 return tips
@@ -145,14 +151,21 @@ const initFirst = () => {
         ],
         series: [
             {
-                name: '在线率',
-                zlevel: -99,
                 type: 'bar',
                 data: handle,
-                label: {
-                    normal: {
-                        show: false,
-                        position: 'top'
+                itemStyle: {
+                    color: (params: any) => {
+                        if (params.value == 3.14159) {
+                            return '#ccc'
+                        } else {
+                            if (params.value < 60) {
+                                return gradeColor[2]
+                            } else if (params.value < 90) {
+                                return gradeColor[1]
+                            } else {
+                                return gradeColor[0]
+                            }
+                        }
                     }
                 },
                 markLine: {
@@ -240,10 +253,6 @@ const initSecond = () => {
                 return res
             }
         },
-        legend: {
-            data: ['运行状态'],
-            left: '5%'
-        },
         dataZoom: [
             {
                 type: 'inside',
@@ -305,6 +314,7 @@ onMounted(() => {
 </script>
 <style lang='scss'>
 .zanjiangfenbutongji {
+    position: relative;
     display: flex;
     overflow: hidden;
 }