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

<template>
  <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"
          header-align="center"
          :align="
            item.prop == 'zfzd' || item.prop == 'zdfdz' ? 'right' : '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,
  getVoltaicAnalysisChart,
} 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) {
        getVoltaicAnalysisChart({
          wpid: row.wpid,
          Data: this.date,
        }).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>
.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>