jn_sis_zhfx/src/views/economicsOperation/stationAnalyse/electricAnalyse/index.vue

<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>
        <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"
          @change="stationChanged"
        >
          <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="year"
          v-model="year"
          value-format="YYYY"
          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>
    <div
      class="parcel-content"
      v-loading="loading"
      element-loading-background="rgba(4, 12, 11, 0.8)"
    >
      <!-- <img src="@/assets/imgs/glycfx-bg1.png" alt="" /> -->
      <div class="line clearfix">
        <div class="leftContent">
          <span>{{ selectValue }}</span>
        </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"
            header-align="center"
            :align="item == '指标名称' ? 'center' : 'right'"
            :width="item == '指标名称' ? '200px' : ''"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span>
                {{
                  scope.row[index] || scope.row[index] == 0
                    ? scope.row[index]
                    : "--"
                }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="echarts">
        <div class="chart-wrapper">
          <BarCharts
            :list="list"
            width="100%"
            height="100%"
            :tabIndex="tabIndex"
          ></BarCharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarCharts from "./components/barCharts.vue";
import { companys } from "@/api/curveAnalyse";
import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
import {
  getMonthElectricAnalyse,
  getMonthElectricAnalyseGf,
} from "@/api/monthlyPerformanceAnalysis.js";
export default {
  name: "ElectricAnalyse",
  components: {
    BarCharts,
  },
  data() {
    return {
      loading: false,
      list: [],
      barList: [],
      tableData: [],
      tableHead: [
        "指标名称",
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
        "合计",
      ],
      company: "",
      companyOptions: [],
      station: "",
      stationOptions: [],
      year: "2023",
      selectValue: "发电量分析",
      headers: [
        "计划电量",
        "预测电量",
        "实发电量",
        "当月占比(实发/计划)",
        "全年占比(实发/计划)",
        "短期功率预测准确率",
      ],
      headersGf: [
        "日照强度(kW/m²)",
        "实发电量",
        "计划电量",
        "计划完成情况(%)",
        "可研电量",
        "可研完成情况(%)",
        "等价发电小时(h)",
      ],
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
    };
  },
  watch: {},
  created() {
    this.initialization();
  },
  methods: {
    tabClick(tab) {
      this.tabIndex = tab;
      if (tab == -2) {
        this.company = "SXJ_KGDL_GFFD_ZGS";
        this.station = "";
        this.getStation();
      } else {
        this.company = this.companyOptions[0].id;
        this.station = "";
        this.getStation();
      }
    },
    initialization() {
      companys().then(({ data: res }) => {
        if (res.data) {
          this.companyOptions = res.data;
          this.company = res.data[0].id;
          this.getStation();
        }
      });
    },
    companyChanged() {
      this.station = "";
      this.getStation();
    },
    getStation() {
      GetStationByCompany({
        companyids: this.company,
        type: this.tabIndex,
      }).then(({ data: res, code }) => {
        if (res.code == 200 && res.data.length) {
          this.stationOptions = res.data;
          this.station = this.stationOptions[0]?.id || "";
          this.getDatas();
        } else {
          this.tableData = [];
          this.list = [];
        }
      });
    },
    getDatas() {
      this.loading = true;
      if (this.tabIndex == -1) {
        this.asyncDataFd();
      } else {
        this.asyncDataGf();
      }
    },
    asyncDataFd() {
      getMonthElectricAnalyse({ wpId: this.station, year: this.year }).then(
        ({ data, code }) => {
          if (code == 200) {
            //合计列
            let hj = [
              data.bnjhdlhj,
              data.rfdlychj,
              data.bnsjdlhj,
              null,
              data.qnzbhj + "%",
              data.dqzqlhj + "%",
            ];
            //处理纵向表格数据
            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.rfdlyc),
                color: "#FF8300",
              },
              {
                name: "实发电量",
                data: resData.map((ele) => ele.sjdl),
                color: "#05BB4C",
              },
            ];
            this.list = list;
          }
          this.loading = false;
        }
      );
    },
    asyncDataGf() {
      getMonthElectricAnalyseGf({ wpId: this.station, year: this.year }).then(
        ({ data, code }) => {
          if (code == 200) {
            //合计列
            let hj = [
              data.rzqdhj,
              data.sjdlhj,
              data.jhdlhj,
              data.wcqkhj + "%",
              data.kydlhj,
              data.kywcqkhj + "%",
              data.dxxsshj,
            ];
            //处理纵向表格数据
            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 == "wcqk" || key == "kywcqk") {
                    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.headersGf[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",
              },
              {
                name: "可研电量",
                data: resData.map((ele) => ele.sjdl),
                color: "#21a4f7",
              },
              {
                name: "日照强度",
                data: resData.map((ele) => ele.rzqd),
                color: "#FF8300",
              },
            ];
            this.list = list;
          }
          this.loading = false;
        }
      );
    },
  },
};
</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: 15px 0;
    align-items: center;
    justify-content: space-between;

    .search-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      .tabCut {
        display: inline-block;
        margin: 0 10px;

        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;
        }
      }
    }

    .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% - 88px);
    // position: relative;
    background: url("~@/assets/imgs/glycfx-bg1.png") no-repeat;
    background-size: 100% 100%;
    background-position: center;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .line {
      .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;
        }
      }
    }

    .echarts {
      height: calc(100% - 305px - 45px);
      padding: 0 20px;
      .chart-wrapper {
        height: 100%;
        width: 100%;
      }
    }
    .table-wrapper {
      height: 305px;
      width: 100%;
      padding: 0 20px;
      padding-top: 10px;
    }
  }
}
</style>