增加光资源分析页面并实现页面功能

src/api/monthlyPerformanceAnalysis.js

@@ -386,3 +386,11 @@ export function getPrAnalysis(params) {
     method: "GET",
   });
 }
+//查询光资源分析
+export function getVoltaicAnalysis(Data) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/analysisfx/gzanalysis?Data=${Data}`,
+    method: "GET",
+  });
+}

src/views/Home/components/windChartCom.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="home_card">
-    <!-- <div class="header"> <img src="@/../public/img/home/arrows.png"> {{CurveTitle}}曲线</div> -->
-    <div class="windChart">
-      <div :id="chartId" :style="{ width: width, height: height }"></div>
-    </div>
-  </div>
+  <div :id="chartId" :style="{ width: width, height: height }"></div>
 </template>
 
 <script>

src/views/economicsOperation/stationAnalyse/stationElectricAnalyse/index.vue

@@ -169,7 +169,7 @@
 </template>
 
 <script>
-import LineCharts from "./components/lineCharts.vue";
+import LineCharts from "./components/line-bar-charts.vue";
 import { companys } from "@/api/curveAnalyse";
 import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
 import {

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/barChart.vue

@@ -0,0 +1,206 @@
+<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: "wp-bar-chart",
+  componentName: "wp-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    chartName: { type: String },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+    };
+  },
+  computed: {
+    series() {
+      let result = [];
+      if (this.list && this.list.length > 0) {
+        result = {
+          name: this.chartName,
+          type: "bar",
+          data: this.list.map((i) => i.value),
+          itemStyle: {
+            color: "#1c99bf",
+          },
+          barWidth: "20%",
+        };
+      }
+      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)",
+          borderColor: "#05bb4c",
+          formatter: function (params) {
+            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
+            for (var i = 0; i < params.length; i++) {
+              htmlStr += `<div style='margin-bottom:2px'>`;
+              var param = params[i];
+              var seriesName = param.seriesName; //图例名称
+              var value = param.value; //y轴值
+              var seriesType = param.seriesType; //单位判断code
+              var mark = param.marker; //点
+              var unit = `<span style='font-size:14px'>kWh/m²</span>`;
+
+              htmlStr += mark; //一个点
+              htmlStr += `${seriesName} : ${
+                value != null ? value + unit : "--"
+              }`; //圆点后面显示的文本
+              htmlStr += "</div>";
+            }
+            return htmlStr;
+          },
+          padding: [10, 10, 3, 10],
+          textStyle: {
+            color: "#fff",
+            fontSize: 16,
+          },
+          axisPointer: {
+            type: "shadow",
+            shadowStyle: {
+              color: "rgba(105,105,105, .05)",
+              width: "1",
+            },
+          },
+        },
+        legend: {
+          show: true,
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            fontSize: 12,
+            color: partten.getColor("grayl"),
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "2%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.list.map((i) => i.name),
+            nameLocation: "center",
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#93989A",
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                fontSize: 14,
+                color: "#93989A",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位：kWh/m²",
+            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 = "wp-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/stationAnalyse/windAndPhotovoltaic/components/lineCharts.vue

@@ -0,0 +1,237 @@
+<template>
+  <div :id="chartId" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+import { h } from "vue";
+export default {
+  name: "windChartCom",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "70vh",
+    },
+    CurveTitle: {
+      type: String,
+      required: true,
+    },
+    chartShow: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    windCurveValues: {
+      type: Array,
+      required: true,
+    },
+    chartId: {
+      type: String,
+      required: true,
+    },
+    ratio: {
+      type: Number,
+      default: 1,
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+    color: { type: String },
+  },
+  async created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.getChart();
+    });
+  },
+  data() {
+    return {
+      emptyData: [],
+    };
+  },
+  methods: {
+    getChart() {
+      var chartDom = document.getElementById(this.chartId);
+      var myChart = echarts.init(chartDom); // 绘制图表
+      var units = this.unit;
+      var options = {
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            fontSize: 16,
+            fontFamily: "楷体",
+            color: "white", //设置文字颜色
+            fontWeight: "400",
+          },
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          borderColor: "#05bb4c",
+          formatter: function (params) {
+            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
+            for (var i = 0; i < params.length; i++) {
+              htmlStr += `<div style='margin-bottom:2px'>`;
+              var param = params[i];
+              var seriesName = param.seriesName; //图例名称
+              var value = param.value; //y轴值
+              var data = param.data; //单位判断code
+              var mark = param.marker; //点
+              var unit = `<span style='font-size:14px'>`;
+
+              htmlStr += mark; //一个点
+              htmlStr += `${seriesName} : ${
+                value[1] != null ? value[1] + unit + ` ${units}</span>` : "--"
+              }`; //圆点后面显示的文本
+              htmlStr += "</div>";
+            }
+
+            return htmlStr;
+          },
+        },
+        legend: {
+          show: true,
+          right: 56,
+
+          itemWidth: 8,
+          itemHeight: 8,
+
+          textStyle: {
+            fontSize: "12",
+            color: "#A4A4A5",
+          },
+          orient: "vertical",
+          icon: "roundRect",
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisTick: {
+            alignWithLabel: true,
+          },
+
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: "#93989A",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#606769", //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          //   splitLine: { show: false },
+          //   data: this.windCurveValues.map((item) => item.dateTime),
+        },
+        yAxis: {
+          name: this.unit,
+          nameTextStyle: {
+            color: "#93989A",
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(96,103,105,0.3)",
+              type: "dashed",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: "#93989A",
+            },
+          },
+          type: "value",
+          splitNumber: this.unit == "%" ? 2 : 3,
+          max: this.unit == "%" ? "100" : null,
+        },
+        grid: [
+          {
+            top: "10%",
+            left: "2%",
+            right: "5%",
+            bottom: "5%",
+            containLabel: true,
+          },
+        ],
+        series: [
+          {
+            name: this.CurveTitle,
+            type: "line",
+            smooth: true,
+            symbol: "none",
+            // areaStyle: {
+            //   opacity: 0.7,
+            //   color: new echarts.graphic.LinearGradient(2, 2, 0, 2, [
+            //     {
+            //       offset: 0,
+            //       color: "rgba(53, 150, 235, 1)",
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: "rgba(18, 32, 50, 0.2)",
+            //     },
+            //   ]),
+            // },
+            lineStyle: {
+              width: 1,
+            },
+            color: this.color,
+            data: this.windCurveValues.map((item) => {
+              return [item.dateTime, item.value];
+            }),
+          },
+        ],
+      };
+      myChart.setOption(options);
+    },
+    //处理数据
+    getData(datas) {
+      let data = [];
+      //查询的测点没有数据情况
+      if (datas && datas.length > 0) {
+        datas.forEach((item) => {
+          let result;
+          if (item.value) {
+            result = (Number(item.value) / this.ratio).toFixed(2);
+          } else {
+            result = item.value;
+          }
+          data.push(result);
+        });
+        return data;
+      } else {
+        return this.emptyData;
+      }
+    },
+  },
+  computed: {
+    getTimeStanp() {
+      // 当日0点时间
+      var timeStamp = [];
+      let stamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
+      for (let i = 0; i < 96; i++) {
+        timeStamp.push(dayjs(stamp).format("HH:mm"));
+        this.emptyData.push("0");
+        stamp = parseInt(stamp) + 15 * 60 * 1000;
+      }
+      timeStamp.push("24:00");
+      return timeStamp;
+    },
+  },
+  watch: {
+    windCurveValues: {
+      handler() {
+        this.getChart();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue

@@ -1,11 +1,156 @@
 <template>
-  <div>光资源分析</div>
+  <div class="voltaic-body">
+    <div class="table-wrapper">
+      <el-table
+        :data="tableData"
+        size="mini"
+        stripe
+        width="100%"
+        height="100%"
+        @row-click="rowClick"
+      >
+        <el-table-column
+          v-for="(item, index) in tableHead"
+          :label="item.label"
+          :prop="item.prop"
+          :key="index"
+          align="center"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="chart-wrapper">
+      <div class="left-chart">
+        <lineCharts
+          :unit="'W/m²'"
+          :windCurveValues="lineChart"
+          :CurveTitle="chartName + '实时光照'"
+          :color="'#ff8300'"
+          width="100%"
+          height="100%"
+          chartId="photo-fs"
+        />
+      </div>
+      <div class="right-chart">
+        <barChart
+          chartName="总辐照度"
+          width="100%"
+          height="100%"
+          :list="barChart"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import barChart from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/barChart.vue";
+import lineCharts from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/lineCharts.vue";
+import dayjs from "dayjs";
+import { getVoltaicAnalysis } from "@/api/monthlyPerformanceAnalysis.js";
+import { FindGroupRealtime } from "@/api/home/home.js";
 export default {
   name: "Photovoltaic", //光资源分析
+  components: { lineCharts, barChart },
+  props: {
+    date: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      tableData: [],
+      tableHead: [
+        { prop: "name", label: "场站名称" },
+        { prop: "zfzd", label: "总辐照量(kWh/m²)" },
+        { prop: "zdfdz", label: "最大辐照(W/m²)" },
+        { prop: "rcsj", label: "日出时间" },
+        { prop: "rlsj", label: "日落时间" },
+        { prop: "cxsj", label: "持续小时数(h)" },
+      ],
+      chartName: "总辐照量",
+      lineChart: [],
+      barChart: [],
+      uniformCode: "RPJGZD",
+      format: "YYYY-MM-DD HH:mm:ss",
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.BASE.showLoading();
+      getVoltaicAnalysis(this.date).then((res) => {
+        if (res.code == 200) {
+          this.tableData = res.data
+            ? res.data.map((item) => {
+                return {
+                  ...item,
+                  rcsj: dayjs(item.rcsj).format(this.format),
+                  rlsj: dayjs(item.rlsj).format(this.format),
+                };
+              })
+            : [];
+          this.barChart = res.data
+            ? res.data.map((item) => {
+                return {
+                  name: item.name,
+                  value: item.zfzd,
+                };
+              })
+            : [];
+          this.rowClick(this.tableData[0] || {});
+        }
+      });
+    },
+    rowClick(row) {
+      if (Object.keys(row).length) {
+        FindGroupRealtime({
+          wpId: row.wpid,
+          uniformCode: this.uniformCode,
+        }).then((res) => {
+          this.BASE.closeLoading();
+          if (res.code == 200) {
+            this.chartName = row.name;
+            this.lineChart = res.data
+              ? res.data.map((item) => {
+                  return {
+                    dateTime: dayjs(item.time).format("MM-DD HH:mm"),
+                    value: item.value6,
+                  };
+                })
+              : [];
+          }
+        });
+      }
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.voltaic-body {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .table-wrapper {
+    height: calc(100% - 500px - 20px);
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .chart-wrapper {
+    height: 500px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    .left-chart,
+    .right-chart {
+      width: 49%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue

@@ -1,11 +1,104 @@
 <template>
-  <div>风资源分析</div>
+  <div class="wind-body">
+    <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.label"
+          :prop="item.prop"
+          :key="index"
+          align="center"
+          @row-click="rowClick"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="chart-wrapper">
+      <div class="left-chart">
+        <lineCharts
+          :unit="'m/s'"
+          :windCurveValues="lineChart"
+          :CurveTitle="chartName"
+          width="100%"
+          :color="'#05bb4c'"
+          height="100%"
+          chartId="wind-fs"
+        />
+      </div>
+      <div class="right-chart"></div>
+    </div>
+  </div>
 </template>
 
 <script>
+import lineCharts from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/lineCharts.vue";
+import dayjs from "dayjs";
+import { FindGroupRealtime } from "@/api/home/home.js";
 export default {
   name: "Wind", //风资源分析
+  components: { lineCharts },
+  props: {},
+  data() {
+    return {
+      tableData: [...new Array(24)].map((i, index) => {
+        let a = Math.random() * (100 - 1 + 1) + 1;
+        return {
+          name: "#" + (index + 1),
+          pjfs: a.toFixed(2),
+          maxf: Math.random() * (100 - 1 + 1) + 1,
+          minf: Math.random() * (100 - 1 + 1) + 1,
+          pjfx: Math.random() * (100 - 1 + 1) + 1,
+        };
+      }),
+      tableHead: [
+        { prop: "name", label: "场站名称" },
+        { prop: "pjfs", label: "平均风速" },
+        { prop: "maxf", label: "最大风速" },
+        { prop: "minf", label: "最小风速" },
+        { prop: "pjfx", label: "平均风向" },
+      ],
+      chartName: "实时风速",
+      lineChart: [...new Array(24)].map((i, index) => {
+        let a = Math.random() * (100 - 1 + 1) + 1;
+        return {
+          value: a.toFixed(2),
+          dateTime: dayjs()
+            .startOf("day")
+            .add(index, "hour")
+            .format("YYYY-MM-DD HH:mm"),
+        };
+      }),
+      uniformCode: "SSPJFS",
+    };
+  },
+  methods: {
+    rowClick(row) {
+      console.log(row);
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.wind-body {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .table-wrapper {
+    height: calc(100% - 450px - 20px);
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  .chart-wrapper {
+    height: 450px;
+    display: flex;
+    width: 100%;
+    .left-chart {
+      width: 65%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/index.vue

@@ -1,15 +1,112 @@
 <template>
   <div class="windAndPhotovoltaic">
-    <div class=""></div>
+    <div class="wp-search">
+      <div class="tabCut">
+        <div
+          @click="tabClick(val.id)"
+          :class="[
+            tabIndex === val.id ? 'active' : '',
+            displayDetail ? 'disabled' : '',
+          ]"
+          v-for="val in tabOptions"
+          :key="val.id"
+        >
+          <span>{{ val.name }}</span>
+        </div>
+      </div>
+      <!-- <el-select
+        size="mini"
+        v-model="station"
+        placeholder="请选择"
+        style="margin-left: 15px"
+      >
+        <el-option
+          v-for="item in stationOptions"
+          :key="item.id"
+          :label="item.aname"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select> -->
+      <el-date-picker
+        size="mini"
+        type="date"
+        v-model="date"
+        value-format="YYYY-MM-DD"
+        placeholder="请选择"
+        style="margin-left: 15px"
+        popper-class="date-select"
+      >
+      </el-date-picker>
+      <el-button round size="mini" class="searchColor" @click="getDatas"
+        >搜索</el-button
+      >
+    </div>
+    <div class="wp-content">
+      <div class="leftContent">
+        <span>{{ selectValue }}</span>
+      </div>
+      <div class="wp-body">
+        <Wind v-if="tabIndex == -1" :date="date" ref="wind" />
+        <Photovoltaic v-if="tabIndex == -2" :date="date" ref="voltaic" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Wind from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue";
 import Photovoltaic from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue";
+import dayjs from "dayjs";
+import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
 export default {
   name: "WindAndPhotovoltaic", //风光资源分析
   components: { Wind, Photovoltaic },
+  data() {
+    return {
+      station: "",
+      stationOptions: [],
+      date: dayjs().format("YYYY-MM-DD"),
+      tabIndex: -2,
+      tabOptions: [
+        { id: -1, name: "风电" },
+        { id: -2, name: "光伏" },
+      ],
+    };
+  },
+  created() {
+    this.getStation();
+  },
+  computed: {
+    selectValue() {
+      return this.tabIndex == -1 ? "风资源分析" : "光资源分析";
+    },
+  },
+  methods: {
+    getStation() {
+      GetStationByCompany({ companyids: 0, type: this.tabIndex }).then(
+        ({ data: res, code }) => {
+          if (res.code == 200) {
+            this.stationOptions = res.data;
+            this.station = this.stationOptions[0]?.id || "";
+            // this.getDatas();
+          }
+        }
+      );
+    },
+    tabClick(tab) {
+      this.tabIndex = tab;
+      this.selectValue = tab == -1 ? "风资源分析" : "光资源分析";
+      this.getStation();
+    },
+    getDatas() {
+      if (this.tabIndex == -1) {
+        this.$refs.Wind.rowClick();
+      } else {
+        this.$refs.voltaic.getData();
+      }
+    },
+  },
 };
 </script>
 
@@ -18,5 +115,78 @@ export default {
   height: 100%;
   width: 100%;
   padding: 0 20px;
+  .wp-search {
+    padding: 10px 0;
+    .tabCut {
+      display: inline-block;
+
+      div {
+        display: inline-block;
+        width: 60px;
+        height: 27px;
+        border: 1px solid #274934;
+        text-align: center;
+        line-height: 25px;
+        cursor: pointer;
+      }
+
+      div:nth-child(1) {
+        border-radius: 13px 0px 0px 13px;
+        border-right-width: 0;
+      }
+
+      div:nth-child(2) {
+        border-radius: 0px 13px 13px 0px;
+      }
+
+      .active {
+        background-color: rgba(5, 187, 76, 0.9);
+        color: #fff;
+      }
+      .disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+    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;
+      }
+    }
+  }
+  .wp-content {
+    height: calc(100% - 40px);
+    padding-bottom: 10px;
+    .leftContent {
+      width: 242px;
+      height: 45px;
+      line-height: 45px;
+      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
+
+      span {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #05bb4c;
+        margin-left: 25px;
+      }
+    }
+    .wp-body {
+      height: calc(100% - 36px);
+    }
+  }
 }
 </style>