功率预测矩阵第一个接口调试完成

.env.development

@@ -1,6 +1,6 @@
 
-# VUE_APP_API=http://192.168.1.108:6060
-# VUE_APP_Matrix=http://192.168.1.108:6060
+# VUE_APP_API=http://192.168.1.112:6060
+# VUE_APP_Matrix=http://192.168.1.112:6060
 
 VUE_APP_API=http://10.81.3.153:6060
 # 经济运行 安全监视 

src/api/factoryMonitor/index.js

@@ -98,3 +98,19 @@ export function GetTowerinfoById(data) {
     method: "get",
   });
 }
+//查询全部场站功率预测曲线数据
+export function GetAllPowerData(data) {
+  return request({
+    baseURL: process.env.VUE_APP_Matrix,
+    url: `Forecast/shorttype?type=${data.type}&beginDate=${data.beginDate}&endDate=${data.endDate}`,
+    method: "get",
+  });
+}
+//查询单场站功率预测曲线数据
+export function GetPowerData(data) {
+  return request({
+    baseURL: process.env.VUE_APP_Matrix,
+    url: `Forecast/short?wpId=${data.wpId}&beginDate=${data.beginDate}&endDate=${data.endDate}`,
+    method: "get",
+  });
+}

src/components/qushi/lineCharts.vue

@@ -270,7 +270,7 @@ export default {
             formatter: "{value}",
             textStyle: {
               color: this.color[index],
-              fontSize: util.vh(10),
+              fontSize: 12,
             },
           },
           axisLine: {
@@ -372,7 +372,7 @@ export default {
           borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(16),
+            fontSize: 14,
           },
         },
         legend:

src/router/index.js

@@ -21,19 +21,6 @@ export const asyncRoutes = [
     },
   },
   //   {
-  //     path: "/monitor/about",
-  //     name: "About",
-  //     component: () =>
-  //       import(/* webpackChunkName: "about" */ "../views/About.vue"),
-  //   },
-
-  //   {
-  //     path: "/sisView",
-  //     name: "sisView",
-  //     component: () =>
-  //       import(/* webpackChunkName: "sisView" */ "../views/sisView/index.vue"),
-  //   },
-  //   {
   //     path: "/monitor/status", // 状态监视
   //     name: "Status",
   //     component: () =>
@@ -81,6 +68,16 @@ export const asyncRoutes = [
         },
       },
       {
+        path: "powerPredictMatrix", // 明细矩阵
+        name: "PowerPredictMatrix",
+        component: () => import("@/views/stateMonitor/powerPredictMatrix"),
+        meta: {
+          title: "功率预测",
+          icon: "svg-power-predict",
+          permissions: ["jn_mxjz", "*:*:*"],
+        },
+      },
+      {
         path: "zhzb", // 综合指标统计
         name: "zhzb",
         component: () =>

src/views/Home/components/map.vue

@@ -1051,7 +1051,7 @@
         <img class="dialog-img" src="@assets/imgs/dialog.png" />
         <windChartCom
           :windCurveValues="groupList"
-          :unit="'MW'"
+          :unit="unit"
           :CurveTitle="chartName"
           width="100%"
           height="480px"
@@ -1948,8 +1948,9 @@ export default {
       this.currentActiveTab(penetrateType);
     },
     // 全国实时负荷点击弹窗
-    showPowerChart({ dialogTitle, data, chartName = "" }) {
+    showPowerChart({ dialogTitle, data, chartName = "", unit }) {
       this.dialogGroupRealname = true;
+      this.unit = unit;
       this.showName = dialogTitle;
       this.chartName = chartName ? chartName : dialogTitle;
       this.groupList = data;
@@ -2958,7 +2959,7 @@ p {
       font-size: 25px;
       font-weight: 400;
       color: #ffffff;
-    //   line-height: 1;
+      //   line-height: 1;
       cursor: pointer;
     }
 

src/views/Home/components/power-review-home.vue

@@ -10,7 +10,7 @@
           :max="item.max"
           height="98px"
           width="100%"
-          @click="openDialog(item.dialogTitle)"
+          @click="openDialog(item.dialogTitle, item.unit)"
         />
       </Col>
     </Row>
@@ -100,7 +100,7 @@ export default {
   },
 
   methods: {
-    openDialog(dialogTitle) {
+    openDialog(dialogTitle, unit) {
       let obj = this.valuelist.find((item) => item.name == dialogTitle);
       let params = {
         wpId: this.wpId,
@@ -121,6 +121,7 @@ export default {
             };
           }),
           chartName: obj.sign ? "实际功率" : obj.dialogTitle,
+          unit,
         });
       });
     },

src/views/stateMonitor/powerPredictMatrix/components/multiple-line-chart.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+import { right } from "@antv/x6/lib/registry/port-layout/main";
+
+export default {
+  name: "multiple-line-chart",
+  componentName: "multiple-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      default: () => {},
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["MW", "m/s"],
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#323E6F",
+        "#1DA0D7",
+        "#02BB4C",
+        "#DB5520",
+        "#EDB32F",
+        "#EDEB2F",
+      ],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      chartName: [
+        { name: "实际功率", code: "sjgl", color: "#4B55AE" },
+        { name: "理论功率", code: "llgl", color: "#1C99FF" },
+        { name: "预测功率", code: "ycgl", color: "#F8DE5B" },
+        { name: "实际风速", code: "pjfs", color: "#05BB4C" },
+        { name: "预测风速", code: "ycfs", color: "#FF8300" },
+      ],
+    };
+  },
+  computed: {
+    series() {
+      let series = [];
+      if (this.chartData && this.chartData.xAxis.length) {
+        for (let key in this.chartData) {
+          this.chartName.forEach((ele) => {
+            if (ele.code == key) {
+              series.push({
+                name: ele.name,
+                type: "line",
+                showAllSymbol: true,
+                symbolSize: 0,
+                smooth: true,
+                lineStyle: {
+                  normal: {
+                    width: 1,
+                    color: ele.color,
+                  },
+                  //   borderColor: "rgba(0,0,0,.4)",
+                },
+                itemStyle: {
+                  color: ele.color,
+                },
+                tooltip: {
+                  show: true,
+                },
+
+                data: this.chartData[key],
+              });
+            }
+          });
+        }
+      }
+      console.log(series);
+      return series;
+    },
+    // lengend() {
+    //     let arr=[]
+    //   this.chartData.lengend.forEach((i) => {
+    //     if (this.chartName.some((item) => item.code == i)) {
+    //       i = item.name;
+    //     }
+    //   });
+    // },
+  },
+  methods: {
+    initChart() {
+      //   console.log(this.chartData);
+      console.log(this.series);
+      let chart = echarts.init(this.$el);
+      //图表所需数据区
+      var charts = {
+        names: ["点击量", "访客"],
+        lineX: [
+          "2018-11-11 17:01",
+          "2018-11-11 17:02",
+          "2018-11-11 17:03",
+          "2018-11-11 17:04",
+          "2018-11-11 17:05",
+          "2018-11-11 17:06",
+          "2018-11-11 17:07",
+          "2018-11-11 17:08",
+          "2018-11-11 17:09",
+          "2018-11-11 17:10",
+          "2018-11-11 17:11",
+          "2018-11-11 17:12",
+          "2018-11-11 17:13",
+          "2018-11-11 17:14",
+          "2018-11-11 17:15",
+          "2018-11-11 17:16",
+          "2018-11-11 17:17",
+          "2018-11-11 17:18",
+          "2018-11-11 17:19",
+          "2018-11-11 17:20",
+        ],
+        useNum: [
+          4.51, 3.52, 3.03, 5.34, 0.95, 2.36, 2.17, 3.28, 1.59, 1.51, 2.31,
+          1.92, 4.53, 5.24, 1.65, 2.36, 5.27, 3.28, 1.29, 5.3,
+        ],
+        visitorNum: [
+          360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65,
+          325, 468, 108, 253, 98,
+        ],
+      };
+      var color = ["rgba(23, 255, 243", "rgba(255,100,97"];
+
+      //y轴样式  arrIndex相关目标数组的index值，lineYData目标y轴值
+      function getLineYSeries(arrIndex, lineYData) {
+        var data = {
+          name: charts.names[arrIndex],
+          type: "line",
+          yAxisIndex: arrIndex, //使用相对的y轴
+          color: color[arrIndex] + ")",
+          smooth: true,
+          symbol: "circle",
+          symbolSize: 5,
+          data: lineYData,
+        };
+
+        return data;
+      }
+
+      var lineY = [getLineYSeries(0), getLineYSeries(1, charts.visitorNum)];
+
+      //图表配置
+      var option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: this.chartName.map((item) => item.name),
+            textStyle: {
+              fontSize: 12,
+              color: "#93989A",
+            },
+          top: "5%",
+          right: "15%",
+        },
+        grid: {
+          top: "22%",
+          left: "4%",
+          right: "4%",
+          bottom: "12%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.chartData?.xAxis || [],
+          axisLabel: {
+            textStyle: {
+              color: "rgb(255,255,255)",
+            },
+            // formatter: function (params) {
+            //   return params.split(" ")[0] + "\n" + params.split(" ")[1];
+            // },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255,255,255)",
+            },
+          },
+        },
+        yAxis: [
+          {
+            name: "MW",
+            type: "value",
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "rgb(255,255,255)",
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgb(255,255,255,0.4)",
+                type: "dashed",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255,255,255)",
+              },
+            },
+          },
+          {
+            name: "m/s",
+            type: "value",
+            axisLabel: {
+              show: true,
+              formatter: "{value}",
+              textStyle: {
+                color: "rgb(255,255,255)",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255,255,255)",
+              },
+            },
+          },
+        ],
+        series: this.series || [],
+      };
+      chart.setOption(option);
+    },
+  },
+  emits: {
+    areaClick: null,
+  },
+  created() {
+    this.id = "line-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/stateMonitor/powerPredictMatrix/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="page-wrapper">
+    <!-- 头部按钮选项 -->
+    <HeaderNav @typeFlag="typeFlag" :isAll="true" />
+    <div class="chart-wrapper">
+      <div
+        class="chart-item"
+        v-for="(item, index) in list"
+        :key="index"
+        @click="handleClick(item.name)"
+      >
+        <div class="chart-item-name">
+          <p class="text">{{ item.name }}</p>
+        </div>
+        <div class="chart-item-chart">
+          <multipleLineChartVue
+            ref="multipLineChart"
+            height="100%"
+            width="100%"
+            :chartData="item"
+          />
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      class="dialogs"
+      width="90%"
+      top="120px"
+      v-model="displayDialog"
+      :show-close="true"
+      destroy-on-close
+    >
+      <template #title>
+        <div class="dialog-title">
+          <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
+          <div class="title">{{ showName }}未来十天功率预测</div>
+        </div>
+      </template>
+      <div class="dialog-body" style="height: 600px">
+        <img class="dialog-img" src="@assets/imgs/dialog.png" />
+        <div class="dialog-form">
+          <div class="date-wrapper">
+            开始时间
+            <div style="margin-left: 10px">
+              <el-date-picker
+                v-model="beginDate"
+                type="date"
+                size="mini"
+                placeholder="选择日期"
+                popper-class="date-select"
+                format="YYYY-MM-DD"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="date-wrapper">
+            结束时间
+            <div style="margin-left: 10px">
+              <el-date-picker
+                v-model="endDate"
+                size="mini"
+                type="date"
+                popper-class="date-select"
+                placeholder="选择日期"
+                format="YYYY-MM-DD"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="btns">
+            <el-button round size="mini" class="searchColor">查 询</el-button>
+          </div>
+        </div>
+        <div class="dialog-chart">
+          <multipleLineChartVue ref="multipLineChart" :chartData="chartData" />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import HeaderNav from "@/components/headerNavSta/index.vue";
+import multipleLineChartVue from "./components/multiple-line-chart.vue";
+import { GetAllPowerData, GetPowerData } from "@/api/factoryMonitor/index.js";
+import dayjs from "dayjs";
+export default {
+  name: "PowerCurveMatrix", //安全监视
+  data() {
+    return {
+      activeTab: -1,
+      list: {},
+      displayDialog: false,
+      showName: "",
+      beginDate: "",
+      endDate: "",
+      format: "YYYY-MM-DD",
+    };
+  },
+  components: {
+    HeaderNav,
+    multipleLineChartVue,
+  },
+  created() {
+    this.beginDate = dayjs().startOf("day").format(this.format);
+    this.endDate = dayjs().add(10, "day").format(this.format);
+    this.init();
+  },
+  methods: {
+    init() {
+      GetAllPowerData({
+        type: this.activeTab == -1 ? "F" : "G",
+        beginDate: this.beginDate,
+        endDate: this.endDate,
+      }).then(({ code, data }) => {
+        if (code == 200) {
+          let resData = JSON.parse(JSON.stringify(data));
+          for (let key in resData) {
+            resData[key] = {
+              name: "",
+              pjfs: [],
+              ycfs: [],
+              sjgl: [],
+              ycgl: [],
+              llgl: [],
+              lengend: [],
+              xAxis: [],
+            };
+          }
+          for (let index in data) {
+            resData[index].name = data[index][0].name;
+            data[index].forEach((ele) => {
+              resData[index].pjfs.push(ele.pjfs);
+              resData[index].ycfs.push(ele.ycfs);
+              resData[index].sjgl.push(ele.sjgl);
+              resData[index].ycgl.push(ele.ycgl);
+              resData[index].llgl.push(ele.llgl);
+              resData[index].xAxis.push(
+                dayjs(ele.hours).format("YYYY-MM-DD HH:mm:ss")
+              );
+            });
+          }
+        //   console.log(resData);
+          this.list = resData;
+        }
+      });
+    },
+    typeFlag(activeTab) {
+      this.activeTab = activeTab;
+    },
+    handleClick(name) {
+      this.displayDialog = true;
+      this.showName = name;
+      this.beginDate = dayjs().startOf("day").format(this.format);
+      this.endDate = dayjs().add(10, "day").format(this.format);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.page-wrapper {
+  height: 100%;
+}
+.chart-wrapper {
+  height: calc(100% - 57px);
+  padding: 0 20px 10px 20px;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-auto-rows: 232px;
+  //   grid-auto-columns: 935px;
+  grid-gap: 20px;
+  .chart-item {
+    width: 935px;
+    height: 232px;
+    // border: 1px solid #fff;
+    display: flex;
+    align-items: center;
+    background: url("~@/assets/imgs/power-bg.png") no-repeat;
+    .chart-item-name {
+      display: flex;
+      width: 50px;
+      height: 232px;
+      border-right: 1px solid #3a3f43;
+      justify-content: center;
+      align-items: center;
+      .text {
+        writing-mode: vertical-lr;
+        margin: 0;
+      }
+    }
+    .chart-item-chart {
+      //   width: calc(100% - 50px);
+      flex: 1 0 auto;
+      height: 100%;
+    }
+  }
+}
+.dialog-body {
+  .dialog-form {
+    display: flex;
+    align-items: center;
+    height: 38px;
+    .date-wrapper {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      color: #b3b3b3;
+      margin-right: 10px;
+    }
+    .searchColor {
+      background: rgba(0, 70, 199, 0.4);
+      color: #b3b3b3;
+      font-size: 14px;
+      border: none;
+      width: 80px;
+      min-height: 25px !important;
+
+      &:hover {
+        background-color: rgba(0, 70, 199, 0.5);
+        color: #ffffff;
+      }
+    }
+  }
+  .dialog-chart {
+    height: calc(100% - 38px);
+  }
+}
+</style>