u

src/api/Osp/svgApi.ts

@@ -14,7 +14,8 @@ export function svgdApi(data: any) {
     data,
   });
 }
-export function buttyApi(data: any) {
+// osp页面 储能曲线
+export function buttyApi(data: any) { 
   return request({
     // url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
     // url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
@@ -23,5 +24,25 @@ export function buttyApi(data: any) {
     data,
   });
 }
+// osp页面 光伏曲线
+export function pvApi(data: any) { 
+  return request({
+    // url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
+    // url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
+    url: "/api/wwpm/biz/v1/photo_voltaic/power_curve",
+    method: "POST",
+    data,
+  });
+}
+// osp页面 用户侧充电桩曲线
+export function usrzApi(data: any) { 
+  return request({
+    // url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
+    // url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
+    url: "/api/wwpm/biz/v1/deweller_pipe/power_curve",
+    method: "POST",
+    data,
+  });
+}
 
 

src/views/pages/OpticalStoragePage/cdzLine.vue

@@ -14,16 +14,18 @@
   import transformFontSize from "@/hooks/transFormSize.ts";
   import "echarts/lib/component/dataZoom";
   onMounted(() => {
-    drawOneLine();
+    drawOneLine(props.echartArr);
   });
-  
+  const props = defineProps<{
+  echartArr: any[];
+}>();
   // 获取echart挂载的DOM节点
   const OneLine: any = ref();
   
   // 获取当前组件实例
   const { proxy }: any = getCurrentInstance();
   
-  const drawOneLine = () => {
+  const drawOneLine = (arr: any) => {
     let myChart = proxy.$echarts.init(OneLine.value);
     
     myChart.clear();
@@ -95,7 +97,8 @@
           //   return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
           // },
         },
-        data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
+        // data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
+        data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
   
       },
       yAxis: {
@@ -149,7 +152,9 @@
               ]),
             },
           },
-          data: [20, 42, 41, 24, 40, 30, 10],
+        data: arr.map((yitem) => yitem.p),
+
+          // data: [20, 42, 41, 24, 40, 30, 10],
         },
       ],
     };

src/views/pages/OpticalStoragePage/pvLine.vue

@@ -1,171 +1,174 @@
 <template>
-    <div class="OneLine" ref="OneLine"></div>
+  <div class="OneLine" ref="OneLine"></div>
-  </template>
+</template>
-  
+
-  <script setup lang="ts">
+<script setup lang="ts">
-  import {
+import {
-    ref,
+  ref,
-    inject,
+  inject,
-    onBeforeUnmount,
+  onBeforeUnmount,
-    getCurrentInstance,
+  getCurrentInstance,
-    onMounted,
+  onMounted,
-    watchEffect,
+  watchEffect,
-  } from "vue";
+} from "vue";
-  import transformFontSize from "@/hooks/transFormSize.ts";
+import transformFontSize from "@/hooks/transFormSize.ts";
-  import "echarts/lib/component/dataZoom";
+import "echarts/lib/component/dataZoom";
-  onMounted(() => {
+onMounted(() => {
-    drawOneLine();
+  drawOneLine(props.echartArr);
-  });
+});
-  
+const props = defineProps<{
-  // 获取echart挂载的DOM节点
+  echartArr: any[];
-  const OneLine: any = ref();
+}>();
-  
+
-  // 获取当前组件实例
+// 获取echart挂载的DOM节点
-  const { proxy }: any = getCurrentInstance();
+const OneLine: any = ref();
-  
+
-  const drawOneLine = () => {
+// 获取当前组件实例
-    let myChart = proxy.$echarts.init(OneLine.value);
+const { proxy }: any = getCurrentInstance();
-    
+
-    myChart.clear();
+const drawOneLine = (arr: any) => {
-    const option = {
+  let myChart = proxy.$echarts.init(OneLine.value);
-      tooltip: {
+
-        trigger: "axis",
+  myChart.clear();
-        // axisPointer: { type: 'cross' }
+  const option = {
-        textStyle: {
+    tooltip: {
-          color: "#FFFFFF",
+      trigger: "axis",
-        },
+      // axisPointer: { type: 'cross' }
-        // padding: transformFontSize(15),
+      textStyle: {
-        backgroundColor: "rgba(24,178,0,.9)", //设置自定义背景
+        color: "#FFFFFF",
-        borderColor: "rgba(24,178,0,.9)",
+      },
-        borderRadius: 5,
+      // padding: transformFontSize(15),
-        
+      backgroundColor: "rgba(24,178,0,.9)", //设置自定义背景
-        formatter: function (param: any) {
+      borderColor: "rgba(24,178,0,.9)",
-          let str = `
+      borderRadius: 5,
+
+      formatter: function (param: any) {
+        let str = `
           <div style="width:100%:height:100%">
             <div style="display:flex;justify-content:space-between;"> ${
               param[0].name.split(" ")[0]
             }</div>
             ${getDom(param)}
           </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
+              item.seriesName
-              }：</div><div>${
+            }：</div><div>${
-                item.value === undefined ? "0" : item.value
+              item.value === undefined ? "0" : item.value
-              }kW</div></div>`;
+            }kW</div></div>`;
-            });
+          });
-            return newStr;
+          return newStr;
-          }
+        }
-          return str;
+        return str;
-        },
       },
-      legend: {
+    },
-        top: "0%",
+    legend: {
-        right: "5%",
+      top: "0%",
-        orient: "vertical",
+      right: "5%",
-        data: ["总功率",],
+      orient: "vertical",
-        itemWidth: transformFontSize(40),
+      data: ["总功率"],
-        itemHeight: transformFontSize(18),
+      itemWidth: transformFontSize(40),
-        itemGap:transformFontSize(8),
+      itemHeight: transformFontSize(18),
-        textStyle: {
+      itemGap: transformFontSize(8),
-          fontSize: transformFontSize(35),
+      textStyle: {
-          color: "#FFFFFF",
+        fontSize: transformFontSize(35),
-        },
+        color: "#FFFFFF",
       },
-      grid: {
+    },
-        top: "25%",
+    grid: {
-        left: "8%",
+      top: "25%",
-        right: "8%",
+      left: "8%",
-        bottom: "13%",
+      right: "8%",
+      bottom: "13%",
+    },
+    xAxis: {
+      type: "category",
+      axisTick: {
+        show: false,
+        alignWithLabel: true,
       },
-      xAxis: {
+      boundaryGap: false,
-        type: "category",
+      axisLabel: {
-        axisTick: {
+        color: "#fff",
-          show: false,
+        fontSize: transformFontSize(35),
-          alignWithLabel: true,
+        padding: [0, 0, 0, 30],
-        },
+        // formatter: function (param: any) {
-        boundaryGap: false,
+        //   return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
-        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]
-          // },
-        },
-        data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
-  
       },
-      yAxis: {
+      // data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
-        splitLine: {
+      data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
-          show: false,
+    },
-        },
+    yAxis: {
-        axisLine: {
+      splitLine: {
-          show: true, //y轴轴线
+        show: false,
-        },
-        type: "value",
-        name: "kW",
-        //   min: 0,
-        //   max: 100,
-        nameTextStyle: {
-          //y轴name的颜色
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          padding: [0, 40, 0, 0],
-        },
-        position: "left",
-        axisLabel: {
-          //刻度标签文字的颜色大小
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          formatter: "{value}",
-        },
       },
-      series: [
+      axisLine: {
-        {
+        show: true, //y轴轴线
-          name: "总功率",
+      },
-          type: "line",
+      type: "value",
-          barWidth: 2, // 柱子宽度核心代码
+      name: "kW",
-          smooth: true,
+      //   min: 0,
-          showSymbol: false,
+      //   max: 100,
-          itemStyle: {
+      nameTextStyle: {
-            color: "rgba(107, 255, 130,1)",
+        //y轴name的颜色
+        color: "#fff",
+        fontSize: transformFontSize(35),
+        padding: [0, 40, 0, 0],
+      },
+      position: "left",
+      axisLabel: {
+        //刻度标签文字的颜色大小
+        color: "#fff",
+        fontSize: transformFontSize(35),
+        formatter: "{value}",
+      },
+    },
+    series: [
+      {
+        name: "总功率",
+        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)",
+              },
+            ]),
           },
-          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: [20, 42, 41, 24, 40, 30, 10],
         },
-      ],
+        // data: [20, 42, 41, 24, 40, 30, 10],
-    };
+        data: arr.map((yitem) => yitem.p),
-    myChart.setOption(option);
+      },
-  
+    ],
-    // 根据页面大小自动响应图表大小
-    window.addEventListener("resize", function () {
-      myChart.resize();
-    });
   };
-  </script>
+  myChart.setOption(option);
-  
+
-  <style scoped>
+  // 根据页面大小自动响应图表大小
-  .OneLine {
+  window.addEventListener("resize", function () {
-    height: 100%;
+    myChart.resize();
-    width: 100%;
+  });
-  }
+};
-  </style>
+</script>
-  
+
+<style scoped>
+.OneLine {
+  height: 100%;
+  width: 100%;
+}
+</style>