fd_dwgz_zhyw_nx/src/views/economicsOperation/stationAnalyse/stationElectricAnalyse/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" v-if="$store.state.showGf">
          <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"
          v-model="year"
          type="year"
          value-format="YYYY"
          placeholder="请选择"
          style="margin-left: 15px"
          popper-class="date-select"
        >
        </el-date-picker>
        <el-radio-group v-model="filter" size="mini">
          <el-radio label="1"> 同比 </el-radio>
          <el-radio label="2"> 环比 </el-radio>
        </el-radio-group>

        <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 align="center" label="指标名称" width="158">
            <template #default="{ row }">
              {{ row[0] }}
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tableHead.slice(1, 13)"
            :label="item.title"
            :key="index"
            align="center"
            show-overflow-tooltip
          >
            <el-table-column
              label="本月"
              width="85"
              v-if="filter == 1 || filter == 2"
              align="center"
              header-align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span>
                  {{
                    scope.row[index + 1][0] || scope.row[index + 1][0] == 0
                      ? scope.row[index + 1][0]
                      : "--"
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="同比"
              width="85"
              v-if="filter == 1"
              align="center"
              header-align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span>
                  {{
                    scope.row[index + 1][1] || scope.row[index + 1][1] == 0
                      ? scope.row[index + 1][1]
                      : "--"
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="环比"
              width="85"
              v-if="filter == 2"
              align="center"
              header-align="center"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span>
                  {{
                    scope.row[index + 1][2] || scope.row[index + 1][2] == 0
                      ? scope.row[index + 1][2]
                      : "--"
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="合计"
            width="85"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              {{ row[13] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="echarts">
        <div class="chart-wrapper">
          <LineCharts :list="list" width="100%" height="100%" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineCharts from "./components/line-bar-charts.vue";
import { companys } from "@/api/curveAnalyse";
import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
import dataJson from "./dataJson.json";
import {
  getOwnDemand,
  getAllStation,
} from "@/api/monthlyPerformanceAnalysis.js";
import dayjs from "dayjs";
export default {
  name: "StationElectricAnalyse",
  components: {
    // ChartColumnar,
    // Panel,
    LineCharts,
  },
  data() {
    return {
      loading: false,
      list: [],
      barList: [],
      tableData: [],
      showDisplay: true,
      tableHead: [
        { title: "指标名称", children: [] },
        { title: "一月", children: ["本月", "同比", "环比"] },
        { title: "二月", children: ["本月", "同比", "环比"] },
        { title: "三月", children: ["本月", "同比", "环比"] },
        { title: "四月", children: ["本月", "同比", "环比"] },
        { title: "五月", children: ["本月", "同比", "环比"] },
        { title: "六月", children: ["本月", "同比", "环比"] },
        { title: "七月", children: ["本月", "同比", "环比"] },
        { title: "八月", children: ["本月", "同比", "环比"] },
        { title: "九月", children: ["本月", "同比", "环比"] },
        { title: "十月", children: ["本月", "同比", "环比"] },
        { title: "十一月", children: ["本月", "同比", "环比"] },
        { title: "十二月", children: ["本月", "同比", "环比"] },
        { title: "合计", children: [] },
      ],
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      company: "",
      companyOptions: [],
      station: "",
      stationOptions: [],
      year: dayjs().format("YYYY"),
      selectValue: "综合场用电量分析",
      headers: [
        "综合场用电量(万kWh)",
        "发电量(万kWh)",
        "上网电量(万kWh)",
        "购网电量(万kWh)",
        "综合场用电率(%)",
      ],
      filter: "1",
    };
  },
  watch: {},
  created() {
    this.initialization();
    this.year = dayjs().format("YYYY");
  },
  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() {
      //   this.dataChange(dataJson.data, dataJson.code);

      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) {
          this.stationOptions = res.data;
          this.station = this.stationOptions[0].id;
          this.getDatas();
        }
      });
    },
    getDatas() {
      this.loading = true;
      getOwnDemand({ wpId: this.station, year: this.year }).then(
        ({ data, code }) => {
          this.dataChange(data, code);
        }
      );
    },
    dataChange(data, code) {
      if (code == 200) {
        //合计列
        let hj = [
          data.zhcydlsum,
          data.sjdlsum,
          data.swdlsum,
          data.gwdlsum,
          data.zhcydllsum + "%",
        ];
        //处理纵向表格数据
        let resData = JSON.parse(JSON.stringify(data.value));
        let subKey = [
          ["zhcydl", "zhcydltb", "zhcydlhb"],
          ["sjdl", "sjdltb", "sjdlhb"],
          ["swdl", "swdltb", "swdlhb"],
          ["gwdl", "gwdltb", "gwdlhb"],
          ["zhcydll", "zhcydlltb", "zhcydllhb"],
        ];
        // 数组按矩阵思路, 变成转置矩阵
        let matrixData = resData.map((row) => {
          let arr = [];
          for (var i = 0; i <= 4; i++) {
            let subArr = [];
            subKey[i].forEach((sub) => {
              subArr.push(row[sub]);
            });
            arr.push(subArr);
          }
          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;
        });
        //   .map((item) => {
        //     item[item.length - 1] = [item[item.length - 1]];
        //     return item;
        //   });

        //处理图表数据
        let list = [
          {
            name: "综合场用电量",
            data: resData.map((ele) => ele.zhcydl),
            color: "#4B55AE",
          },
          {
            name: "实发电量",
            data: resData.map((ele) => ele.sjdl),
            color: "#05BB4C",
          },
          {
            name: "上网电量",
            data: resData.map((ele) => ele.swdl),
            color: "#21a4f7",
          },
          {
            name: "购网电量",
            data: resData.map((ele) => ele.gwdl),
            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_bg.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;
    }
  }
}
.el-radio-group::v-deep {
  margin-left: 15px;
  display: flex;
  align-items: center;
  .el-radio__inner:hover {
    border-color: #05bb4c;
  }
}
.el-table--border::v-deep {
  th.el-table__cell {
    border-bottom: 1px solid #000 !important;
  }
}
</style>