实现全域当年月发电量分析页面功能

.env.development

@@ -1,10 +1,10 @@
 
-VUE_APP_API=http://192.168.1.110:6060
-VUE_APP_Matrix=http://192.168.1.110:6060
+# VUE_APP_API=http://192.168.1.103:6060
+# VUE_APP_Matrix=http://192.168.1.103:6060
 
-# VUE_APP_API=http://10.81.3.153:6060
-# # # 经济运行 全景监视 
-# VUE_APP_Matrix=http://10.81.3.153:6060
+VUE_APP_API=http://10.81.3.153:6060
+# # 经济运行 全景监视 
+VUE_APP_Matrix=http://10.81.3.153:6060
 
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011

src/api/monthlyPerformanceAnalysis.js

@@ -340,3 +340,11 @@ export function getApimaincenterlist(params) {
     method: "GET",
   });
 }
+//查询全域当年电量
+export function getMonthElectricAnalyse(params) {
+  return request({
+    baseURL: process.env.VUE_APP_Matrix,
+    url: `/electricity/statistics?wpId=${params.wpId}&timetype=month`,
+    method: "GET",
+  });
+}

src/router/index.js

@@ -752,6 +752,17 @@ export const asyncRoutes = [
           },
         ],
       },
+      {
+        path: "monthElectricAnalyse",
+        component: () =>
+          import("@/views/economicsOperation/monthElectricAnalyse/index.vue"),
+        name: "monthElectricAnalyse",
+        meta: {
+          title: "月发电量分析",
+          icon: "svg-yfdl",
+          permissions: ["jn_ztfx", "*:*:*"],
+        },
+      },
       //   {
       //     path: "reportForms",
       //     redirect: "reportForms/newEnergyDaily",

src/views/economicsOperation/benchmarkingManagement/index.vue

@@ -1,15 +1,11 @@
 <template>
-  <div>
-    <router-view />
-  </div>
+  <router-view />
 </template>
 
 <script>
 export default {
-  name:'benchmarkingManagement',//对标管理
-}
+  name: "benchmarkingManagement", //对标管理
+};
 </script>
 
-<style>
-
-</style>
+<style></style>

src/views/economicsOperation/monthElectricAnalyse/components/barCharts.vue

@@ -0,0 +1,207 @@
+<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 dayjs from "dayjs";
+export default {
+  name: "yfdl-multiple-bar-chart",
+  componentName: "yfdl-multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+    };
+  },
+  computed: {
+    xdata() {
+      return [
+        "一月",
+        "二月",
+        "三月",
+        "四月",
+        "五月",
+        "六月",
+        "七月",
+        "八月",
+        "九月",
+        "十月",
+        "十一月",
+        "十二月",
+      ];
+    },
+    series() {
+      let result = [];
+      if (this.list && this.list.length > 0) {
+        this.list.forEach((listItem, index) => {
+          let seriesItem = {
+            name: listItem?.name,
+            type: "bar",
+            data: listItem?.data,
+            itemStyle: {
+              color: listItem.color,
+            },
+            barWidth: "20%",
+          };
+
+          result.push(seriesItem);
+        });
+      }
+      return result;
+    },
+  },
+  methods: {
+    resize() {
+      this.initChart();
+    },
+    initChart() {
+      let chart = echarts.init(this.$el);
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          borderWidth: 1,
+          padding: [10, 10, 3, 10],
+          borderColor: "#05bb4c",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisPointer: {
+            type: "shadow",
+            shadowStyle: {
+              color: "rgba(105,105,105, .05)",
+              width: "1",
+            },
+          },
+        },
+        legend: {
+          show: true,
+          data: ["计划电量", "实发电量"],
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            fontSize: 12,
+            color: partten.getColor("grayl"),
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "1%",
+          right: "2%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            nameLocation: "center",
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#93989A",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                fontSize: 14,
+                color: "#93989A",
+              },
+            },
+          },
+        ],
+        yAxis: {
+          type: "value",
+          name: "单位：万千瓦时",
+          nameTextStyle: {
+            color: "#93989A",
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(96,103,105,0.3)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: "#93989A",
+            },
+          },
+        },
+        series: this.series,
+      };
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+      this.firstAnimation = false;
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/economicsOperation/monthElectricAnalyse/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="parcel-box">
+    <div class="search">
+      <div class="search-left">
+        <el-select
+          size="mini"
+          v-model="company"
+          placeholder="请选择"
+          @change="companyChanged"
+        >
+          <el-option
+            v-for="item in companyOptions"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <el-select
+          size="mini"
+          v-model="station"
+          placeholder="请选择"
+          style="margin-left: 15px"
+          @change="stationChanged"
+        >
+          <el-option
+            v-for="item in stationOptions"
+            :key="item.id"
+            :label="item.aname"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <el-button round size="mini" class="searchColor" @click="getDatas"
+          >搜索</el-button
+        >
+      </div>
+    </div>
+    <div class="parcel-content" v-loading="loading" element-loading-background="rgba(4, 12, 11, 0.8)">
+      <div class="line clearfix">
+        <div class="leftContent">
+          <span>{{ selectValue }}</span>
+        </div>
+      </div>
+      <div class="echarts">
+        <div class="chart-wrapper">
+          <BarCharts :list="list" width="100%" height="100%"></BarCharts>
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <el-table
+          :data="tableData"
+          size="mini"
+          stripe
+          width="100%"
+          height="100%"
+        >
+          <el-table-column
+            v-for="(item, index) in tableHead"
+            :label="item"
+            :key="index"
+            align="center"
+          >
+            <template #default="scope">
+              <span>
+                {{ scope.row[index] ? scope.row[index] : "--" }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import Panel from "@/components/curveAnalyse/panel.vue";
+// import ChartColumnar from '@/components/curveAnalyse/multiple-bar-chart.vue'
+import BarCharts from "./components/barCharts.vue";
+// import { companys, fnlylList, gzsslList, whsslList, xdsslList, xnsslList, slsslList } from '@/api/curveAnalyse'
+import {
+  companys,
+  gzsslList,
+  whsslList,
+  xdsslList,
+  xnsslList,
+  slsslList,
+} from "@/api/curveAnalyse";
+import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
+import { getMonthElectricAnalyse } from "@/api/monthlyPerformanceAnalysis.js";
+export default {
+  name: "monthElectricAnalyse",
+  components: {
+    // ChartColumnar,
+    // Panel,
+    BarCharts,
+  },
+  data() {
+    return {
+      loading: false,
+      list: [],
+      barList: [],
+      tableData: [],
+      tableHead: [
+        "指标名称",
+        "一月",
+        "二月",
+        "三月",
+        "四月",
+        "五月",
+        "六月",
+        "七月",
+        "八月",
+        "九月",
+        "十月",
+        "十一月",
+        "十二月",
+        "合计",
+      ],
+      company: "",
+      companyOptions: [],
+      station: "",
+      stationOptions: [],
+      selectValue: "全域数据当年-月发电量",
+      headers: [
+        "计划电量",
+        "实发电量",
+        "当月占比",
+        "全年占比",
+        "短期准确率",
+        "超短期准确率",
+      ],
+    };
+  },
+  watch: {},
+  filters: {},
+  created() {
+    this.initialization();
+  },
+  methods: {
+    initialization() {
+      companys().then(({ data: res }) => {
+        if (res.data) {
+          this.companyOptions = res.data;
+          this.company = res.data[0].id;
+          //   this.search();
+          this.getStation();
+        }
+      });
+    },
+    companyChanged() {
+      this.station = "";
+      this.getStation();
+    },
+    getStation() {
+      GetStationByCompany({ companyids: this.company, type: 0 }).then(
+        ({ data: res, code }) => {
+          if (res.code == 200) {
+            this.stationOptions = res.data;
+            this.station = this.stationOptions[0].id;
+            this.getDatas();
+          }
+        }
+      );
+    },
+    getDatas() {
+      this.loading = true;
+      getMonthElectricAnalyse({ wpId: this.station }).then(({ data, code }) => {
+        if (code == 200) {
+          //合计列
+          let hj = [
+            data.bnjhdlhj,
+            data.bnsjdlhj + "%",
+            null,
+            data.bnsjdlhj + "%",
+            null,
+            null,
+          ];
+          //处理纵向表格数据
+          let resData = JSON.parse(JSON.stringify(data.value));
+          // 数组按矩阵思路, 变成转置矩阵
+          let matrixData = resData.map((row) => {
+            let arr = [];
+            for (let key in row) {
+              if (key != "hours") {
+                if (key.includes("zb") || key.includes("zql")) {
+                  arr.push(row[key] ? row[key] + "%" : row[key]);
+                } else {
+                  arr.push(row[key]);
+                }
+              }
+            }
+            return arr;
+          });
+          // 加入标题拼接最终的数据
+          this.tableData = matrixData[0].map((col, i) => {
+            let newArr = new Array(
+              this.tableHead.length - matrixData.length - 2
+            ).fill(null);
+            let array = [
+              this.headers[i],
+              ...matrixData.map((row) => {
+                return row[i];
+              }),
+              ...newArr,
+              hj[i],
+            ];
+            return array;
+          });
+
+          //处理图表数据
+          let list = [
+            {
+              name: "计划电量",
+              data: resData.map((ele) => ele.jhdl),
+              color: "#4B55AE",
+            },
+            {
+              name: "实发电量",
+              data: resData.map((ele) => ele.sjdl),
+              color: "#05BB4C",
+            },
+          ];
+          this.list = list;
+          this.loading = false;
+        }
+      });
+    },
+  },
+  mounted() {},
+  beforeUnmount() {},
+};
+</script>
+
+<style lang="less" scoped>
+.parcel-box {
+  padding: 0 20px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  .search {
+    display: flex;
+    flex-direction: row;
+    padding-top: 20px;
+    align-items: center;
+    justify-content: space-between;
+
+    .search-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .search-right {
+      position: relative;
+
+      .select-back {
+        position: absolute;
+        right: 5px;
+        top: 0px;
+        z-index: 0;
+      }
+
+      .title-select {
+        z-index: 2;
+      }
+    }
+
+    button {
+      margin-left: 10px;
+      background: rgba(67, 81, 107, 0.3);
+      border: 1px solid #274934;
+      color: #b3b3b3;
+    }
+
+    .searchColor {
+      background-color: rgba(5, 187, 76, 0.2);
+      border: 1px solid #3b6c53;
+      color: #b3b3b3;
+      font-size: 14px;
+
+      &:hover {
+        background-color: rgba(5, 187, 76, 0.5);
+        color: #ffffff;
+      }
+    }
+  }
+  .parcel-content {
+    width: 100%;
+    height: calc(100% - 77px);
+    margin-top: 10px;
+    // background: url("~@/assets/imgs/yfdl-bg.png") no-repeat;
+    // background-size: contain;
+    .line {
+      .leftContent {
+        width: 242px;
+        height: 45px;
+        line-height: 45px;
+        background: url("~@/assets/imgs/title_left_bg.png");
+
+        span {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          margin-left: 25px;
+        }
+      }
+    }
+
+    .echarts {
+      height: calc(100% - 300px - 45px);
+      padding: 0 20px;
+      .chart-wrapper {
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .table-wrapper {
+      height: 300px;
+      width: 100%;
+      padding: 0 20px;
+    }
+  }
+}
+</style>

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

@@ -148,9 +148,6 @@ export default {
             textStyle: {
               color: "#93989A",
             },
-            // formatter: function (params) {
-            //   return params.split(" ")[0] + "\n" + params.split(" ")[1];
-            // },
           },
           splitLine: {
             show: false,