fd_dwgz_zhyw/src/views/economicsOperation/monthElectricAnalyse/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>
        <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-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"
            align="center"
            :width="item == '指标名称' ? '200px' : ''"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span>
                {{ scope.row[index] ? 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%"></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 } from "@/api/monthlyPerformanceAnalysis.js";
export default {
  name: "monthElectricAnalyse",
  components: {
    // ChartColumnar,
    // Panel,
    BarCharts,
  },
  data() {
    return {
      loading: false,
      list: [],
      barList: [],
      tableData: [],
      tableHead: [
        "指标名称",
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
        "合计",
      ],
      company: "",
      companyOptions: [],
      station: "",
      stationOptions: [],
      selectValue: "功率预测分析",
      headers: [
        "计划电量",
        "预测电量",
        "实发电量",
        "当月占比(实发/计划)",
        "全年占比(实发/计划)",
        "短期准确率",
      ],
    };
  },
  watch: {},
  filters: {},
  created() {
    this.initialization();
  },
  methods: {
    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: 0 }).then(
        ({ data: res, code }) => {
          if (res.code == 200) {
            this.stationOptions = res.data;
            this.station = this.stationOptions[0].id;
            this.getDatas();
          }
        }
      );
    },
    getDatas() {
      this.loading = true;
      getMonthElectricAnalyse({ wpId: this.station }).then(({ data, code }) => {
        if (code == 200) {
          //合计列
          let hj = [
            data.bnjhdlhj,
            data.rfdlychj,
            data.bnsjdlhj,
            null,
            data.qnzbhj + "%",
            null,
          ];
          //处理纵向表格数据
          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;
        }
      });
    },
  },
};
</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;
    }

    .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;
    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");

        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          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>