update

src/hooks/handleFun.ts

@@ -1,10 +1,39 @@
 // 处理一些常用的方法
 
+
 // 处理单位换算
 export function handleUnit(data) {
-    if(Number(data) > 10000) {
+    if (Number(data) > 10000) {
         return (data / 1000).toFixed(2)
-    }else{
+    } else {
         return data
     }
 }
+
+
+
+
+// 处理echarts数据
+export function handleEchartsData(data) {
+    // 间隔可以设置成动态的
+    let timeArray = [];
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 5) {
+            let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
+            timeArray.push(
+                { datetime: timeString, measValue: '-' }
+            );
+        }
+    }
+
+    timeArray.forEach(item => {
+        data.forEach(ite => {
+            let iteTime = ite.datetime.split(' ')[1].split(':')[0] + ':' + ite.datetime.split(' ')[1].split(':')[1]
+            if (iteTime === item.datetime) {
+                item.measValue =ite.measValue
+            }
+        })
+    })
+
+    return timeArray
+}

src/views/pages/homePage/runListenPage.vue

@@ -20,17 +20,17 @@
                   <div class="source_echart">
                     <div class="tabDate">
                       <div :class="[
-                          sourcetabDateFlag === item.id
+                          sourcetabDateFlagOne === item.id
                             ? 'tab_active'
                             : 'tab_default',
                           'tab',
-                        ]" v-for="item in sourceEchart" @click="sourcehandleTabDate(item)">
+                        ]" v-for="(item,index) in sourceEchart" @click="sourcehandleTabDate(item)" :key="index">
                         {{ item.name }}
                       </div>
                     </div>
                     <div class="source_echart_box">
                       <!--光伏曲线  -->
-                      <source_Photovoltaic_echart v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart>
+                      <source_Photovoltaic_echart v-if="sourcetabDateFlagOne === 1"></source_Photovoltaic_echart>
                       <!-- 厂站曲线 -->
                       <source_factoryStation_echart v-else></source_factoryStation_echart>
                     </div>
@@ -164,7 +164,7 @@
                       <div class="key">&nbsp;线路重过载&nbsp;:&nbsp;</div>
                     </div>
                     <div class="val">
-                      <div class="ratekw">&nbsp;2</div>
+                      <div class="ratekw">&nbsp;{{networkSonData.lineData.length|| 0}}</div>
                       <span></span>
                     </div>
                   </div>
@@ -174,7 +174,7 @@
                       <div class="key">&nbsp;台区重过载&nbsp;:&nbsp;</div>
                     </div>
                     <div class="val">
-                      <div class="ratekw">&nbsp;3</div>
+                      <div class="ratekw">&nbsp;{{networkSonData.zoneAreaData.length|| 0}}</div>
                       <span></span>
                     </div>
                   </div>
@@ -192,9 +192,9 @@
                   </div>
                   <div class="source_echart_box">
                     <!--光伏曲线  -->
-                    <source_Photovoltaic_echart_Line v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart_Line>
+                    <source_Photovoltaic_echart_Line :paramsData="networkSonData.lineData" v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart_Line>
                     <!-- 厂站曲线 -->
-                    <source_Photovoltaic_echart_Line v-else></source_Photovoltaic_echart_Line>
+                    <source_Photovoltaic_echart_Line :paramsData="networkSonData.zoneAreaData" v-else></source_Photovoltaic_echart_Line>
                   </div>
                   <!-- <div class="line">
                     <img
@@ -355,6 +355,7 @@ import storage_echart from './oneLine.vue'
 import threeEchart from './3Dechart.vue'
 
 import { alert_api, statInfo_api, runAlarm_api } from '@/api/homePage/SoureceApi'
+import { handleEchartsData } from '@/hooks/handleFun'
 
 onMounted(() => {
   getStatInfo()
@@ -768,7 +769,8 @@ let runNetworkFlag = ref(true)
 let runStorageFlag = ref(true)
 // 源
 // 切换tabDate
-let sourcetabDateFlag = ref(1)
+let sourcetabDateFlag = ref(0)
+let sourcetabDateFlagOne = ref(1)
 let sourceEchart = reactive([
   {
     id: 1,
@@ -920,13 +922,32 @@ const handleThree = val => {
 // 获取运行监视---重过载告警统计
 let networkSonData = reactive<any>({
   lineData: [],
-  zoneAreaData: [ ]
+  zoneAreaData: []
 })
 let getRunAlarm = () => {
   runAlarm_api({
     orgID: '8af8470a47aad8e20147aad92e400335'
-  }).then(res => {
+  }).then((res: any) => {
-    console.log(res, '88888889999')
+    // 线
+    res?.data?.feeder.forEach((item: any) => {
+      let result = handleEchartsData(item?.loadRate)
+      networkSonData.lineData.push({
+        mrid: item.mrid,
+        name: item.name,
+        data: result
+      })
+    })
+    // 台区
+    res?.data?.transformer.forEach((item: any) => {
+      let result = handleEchartsData(item?.loadRate)
+      networkSonData.zoneAreaData.push({
+        mrid: item.mrid,
+        name: item.name,
+        data: result
+      })
+    })
+    sourcetabDateFlag.value = 1
+    console.log(networkSonData.lineData, networkSonData.zoneAreaData)
   })
 }
 //

src/views/pages/homePage/threeLine_Line.vue

@@ -1,229 +1,244 @@
 <template>
-    <div class="ThreeLine" ref="ThreeLine"></div>
+  <div class="ThreeLine" ref="ThreeLine"></div>
-  </template>
+</template>
   
   <script setup lang="ts">
-  import {
+import { ref, inject, onBeforeUnmount, getCurrentInstance, onMounted, watchEffect } from 'vue'
-    ref,
+import transformFontSize from '@/hooks/transFormSize.ts'
-    inject,
+import 'echarts/lib/component/dataZoom'
-    onBeforeUnmount,
+onMounted(() => {
-    getCurrentInstance,
+  drawOneLine()
-    onMounted,
+})
-    watchEffect,
-  } from "vue";
-  import transformFontSize from "@/hooks/transFormSize.ts";
-  import "echarts/lib/component/dataZoom";
-  onMounted(() => {
-    drawOneLine();
-  });
 
-  // 获取echart挂载的DOM节点
+const props = defineProps<{
-  const ThreeLine: any = ref();
+  paramsData: any
+}>()
 
-  // 获取当前组件实例
+// 获取echart挂载的DOM节点
-  const { proxy }: any = getCurrentInstance();
+const ThreeLine: any = ref()
 
-  const drawOneLine = () => {
+// 获取当前组件实例
-    let myChart = proxy.$echarts.init(ThreeLine.value);
+const { proxy }: any = getCurrentInstance()
 
-    myChart.clear();
+const drawOneLine = () => {
-    const option = {
+  let legendData: any = []
-      tooltip: {
+  let xData: any = []
-        trigger: "axis",
+  let yData1: any = []
-        // axisPointer: { type: 'cross' }
+  let yData2: any = []
-        textStyle: {
+  let yData3: any = []
-          color: "#FFFFFF",
+  props.paramsData &&
-        },
+    props.paramsData.forEach((item,index) => {
-        // padding: transformFontSize(15),
+      legendData.push(item.name+index)
-        backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景
+    })
-        borderColor: "rgba(0,163,166,.9)",
+  console.log(props.paramsData)
-        borderRadius: 5,
 
-        formatter: function (param: any) {
+  props.paramsData &&
-          let str = `
+    props.paramsData[0]?.data.forEach(item => {
+      xData.push(item.datetime)
+      yData1.push(item.measValue)
+    })
+  props.paramsData &&
+    props.paramsData[1]?.data.forEach(item => {
+      yData2.push(item.measValue)
+    })
+  props.paramsData &&
+    props.paramsData[2]?.data.forEach(item => {
+      yData3.push(item.measValue)
+    })
+  console.log(legendData, xData, yData1, yData2, yData3, 'props.paramsData')
+
+  let myChart = proxy.$echarts.init(ThreeLine.value)
+  myChart.clear()
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      // axisPointer: { type: 'cross' }
+      textStyle: {
+        color: '#FFFFFF'
+      },
+      // padding: transformFontSize(15),
+      backgroundColor: 'rgba(0,163,166,.9)', //设置自定义背景
+      borderColor: 'rgba(0,163,166,.9)',
+      borderRadius: 5,
+
+      formatter: function (param: any) {
+        let str = `
           <div style="width:100%:height:100%">
-            <div style="display:flex;justify-content:space-between;"> ${
+            <div style="display:flex;justify-content:space-between;"> ${param[0].name.split(' ')[0]}</div>
-              param[0].name.split(" ")[0]
-            }</div>
             ${getDom(param)}
-          </div>`;
+          </div>`
-          function getDom(param: any) {
+        function getDom(param: any) {
-            let newStr = "";
+          let newStr = ''
-            param.forEach((item: any) => {
+          param.forEach((item: any) => {
-              newStr += `<div style="display:flex;"><div>${
+            newStr += `<div style="display:flex;"><div>${item.seriesName}负荷：</div><div>${item.value === undefined ? '0' : item.value}kW</div></div>`
-                item.seriesName
+          })
-              }负荷：</div><div>${
+          return newStr
-                item.value === undefined ? "0" : item.value
+        }
-              }kW</div></div>`;
+        return str
-            });
+      }
-            return newStr;
+    },
+    legend: {
+      top: '10%',
+      right: '0%',
+      orient: 'vertical',
+      data: legendData,
+      itemWidth: transformFontSize(30),
+      itemHeight: transformFontSize(12),
+      itemGap: transformFontSize(8),
+      textStyle: {
+        fontSize: transformFontSize(30),
+        color: '#FFFFFF'
+      }
+    },
+    grid: {
+      top: '25%',
+      left: '10%',
+      right: '8%',
+      bottom: '13%'
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+        alignWithLabel: true
+      },
+      boundaryGap: false,
+      axisLabel: {
+        color: '#fff',
+        fontSize: transformFontSize(35),
+        padding: [0, 0, 0, 30]
+        // formatter: function (param: any) {
+        //   return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
+        // },
+      },
+      offset: transformFontSize(15),
+      data: xData
+    },
+    yAxis: {
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true //y轴轴线
+      },
+      type: 'value',
+      name: '%',
+      min: 0,
+      max: 100,
+      nameTextStyle: {
+        //y轴name的颜色
+        color: '#fff',
+        fontSize: transformFontSize(35),
+        padding: [0, 40, 10, 0]
+      },
+      position: 'left',
+      offset: transformFontSize(15),
+      axisLabel: {
+        //刻度标签文字的颜色大小
+        color: '#fff',
+        fontSize: transformFontSize(35),
+        formatter: '{value}'
+      }
+    },
+    series: [
+      {
+        name: legendData[0],
+        type: 'line',
+        barWidth: 2, // 柱子宽度核心代码
+        smooth: true,
+        showSymbol: false,
+        itemStyle: {
+          color: 'rgba(18, 231, 227, 1)'
+        },
+        areaStyle: {
+          normal: {
+            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(18, 231, 227, 0.4)'
+              },
+
+              {
+                offset: 1,
+
+                color: 'rgba(18, 231, 227, 0.01)'
+              }
+            ])
           }
-          return str;
         },
+        data: yData1
       },
-      legend: {
+      {
-        top: "10%",
+        name: legendData[1],
-        right: "0%",
+        type: 'line',
-        orient: "vertical",
+        barWidth: 2, // 柱子宽度核心代码
-        data: ["55607", "55608", "55604"],
+        smooth: true,
-        itemWidth: transformFontSize(30),
+        showSymbol: false,
-        itemHeight: transformFontSize(12),
+        itemStyle: {
-        itemGap:transformFontSize(8),
+          color: 'rgba(251, 187, 111, 1)'
-        textStyle: {
-          fontSize: transformFontSize(30),
-          color: "#FFFFFF",
         },
+        areaStyle: {
+          normal: {
+            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+
+                color: 'rgba(251, 187, 111, 0.4)'
+              },
+
+              {
+                offset: 1,
+
+                color: 'rgba(251, 187, 111, 0.01)'
+              }
+            ])
+          }
+        },
+        data: yData2
       },
-      grid: {
+      {
-        top: "25%",
+        name: legendData[2],
-        left: "10%",
+        type: 'line',
-        right: "8%",
+        barWidth: 2, // 柱子宽度核心代码
-        bottom: "13%",
+        smooth: true,
-      },
+        showSymbol: false,
-      xAxis: {
+        itemStyle: {
-        type: "category",
+          color: 'rgba(107, 255, 130, 1)'
-        axisTick: {
-          show: false,
-          alignWithLabel: true,
         },
-        boundaryGap: false,
+        areaStyle: {
-        axisLabel: {
+          normal: {
-          color: "#fff",
+            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          fontSize: transformFontSize(35),
+              {
-          padding: [0, 0, 0, 30],
+                offset: 0,
-          // formatter: function (param: any) {
+
-          //   return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
+                color: 'rgba(107, 255, 130, 0.4)'
-          // },
+              },
+
+              {
+                offset: 1,
+
+                color: 'rgba(107, 255, 130, 0.01)'
+              }
+            ])
+          }
         },
-        offset:transformFontSize(15),
+        data: yData3
-        data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
+      }
+    ]
+  }
+  myChart.setOption(option)
 
-      },
+  // 根据页面大小自动响应图表大小
-      yAxis: {
+  window.addEventListener('resize', function () {
-        splitLine: {
+    myChart.resize()
-          show: false,
+  })
-        },
+}
-        axisLine: {
+</script>
-          show: true, //y轴轴线
-        },
-        type: "value",
-        name: "%",
-          min: 0,
-          max: 100,
-        nameTextStyle: {
-          //y轴name的颜色
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          padding: [0, 40, 10, 0],
-        },
-        position: "left",
-        offset:transformFontSize(15),
-        axisLabel: {
-          //刻度标签文字的颜色大小
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          formatter: "{value}",
-        },
-      },
-      series: [
-        {
-          name: "55607",
-          type: "line",
-          barWidth: 2, // 柱子宽度核心代码
-          smooth: true,
-          showSymbol: false,
-          itemStyle: {
-            color: "rgba(18, 231, 227, 1)",
-          },
-          areaStyle: {
-            normal: {
-              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(18, 231, 227, 0.4)",
-                },
-  
-                {
-                  offset: 1,
-  
-                  color: "rgba(18, 231, 227, 0.01)",
-                },
-              ]),
-            },
-          },
-          data: [20, 42, 41, 24, 40, 30, 10],
-        },
-        {
-          name: "55608",
-          type: "line",
-          barWidth: 2, // 柱子宽度核心代码
-          smooth: true,
-          showSymbol: false,
-          itemStyle: {
-            color: "rgba(251, 187, 111, 1)",
-          },
-          areaStyle: {
-            normal: {
-              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-  
-                  color: "rgba(251, 187, 111, 0.4)",
-                },
-  
-                {
-                  offset: 1,
-  
-                  color: "rgba(251, 187, 111, 0.01)",
-                },
-              ]),
-            },
-          },
-          data: [30, 12, 11, 24, 20, 30, 30],
-        },
-        {
-          name: "55604",
-          type: "line",
-          barWidth: 2, // 柱子宽度核心代码
-          smooth: true,
-          showSymbol: false,
-          itemStyle: {
-            color: "rgba(107, 255, 130, 1)",
-          },
-          areaStyle: {
-            normal: {
-              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-  
-                  color: "rgba(107, 255, 130, 0.4)",
-                },
-  
-                {
-                  offset: 1,
-  
-                  color: "rgba(107, 255, 130, 0.01)",
-                },
-              ]),
-            },
-          },
-          data: [40, 18, 19, 23, 29, 33, 31],
-        },
-      ],
-    };
-    myChart.setOption(option);
-  
-    // 根据页面大小自动响应图表大小
-    window.addEventListener("resize", function () {
-      myChart.resize();
-    });
-  };
-  </script>
   
   <style scoped>
-  .ThreeLine {
+.ThreeLine {
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
-  }
+}
-  </style>
+</style>