fd_dwgz_zhyw/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">
          <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="year"
          v-model="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="128">
            <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="66"
              v-if="filter == 1 || filter == 2"
              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="66"
              v-if="filter == 1"
              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="66"
              v-if="filter == 2"
              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"
            label="合计"
            width="76"
            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/lineCharts.vue";
import { companys } from "@/api/curveAnalyse";
import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
import {
  getOwnDemand,
  getAllStation,
} from "@/api/monthlyPerformanceAnalysis.js";
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: "2023",
      selectValue: "综合场用电量分析",
      headers: [
        "综合场用电量",
        "发电量",
        "上网电量",
        "购网电量",
        "综合场用电率(%)",
      ],
      filter: "1",
    };
  },
  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) {
          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 }) => {
          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_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;
    }
  }
}
.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>