jn_sis_zhfx/src/views/economicsOperation/monthElectricAnalyseGf/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] == 0
                    ? scope.row[index]
                    : "--"
                }}
              </span>
            </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 { getMonthElectricAnalyseGf } from "@/api/monthlyPerformanceAnalysis.js";
export default {
  name: "monthElectricAnalyseGf",
  components: {
    // ChartColumnar,
    // Panel,
    LineCharts,
  },
  data() {
    return {
      loading: false,
      list: [],
      barList: [],
      tableData: [],
      tableHead: [
        "指标名称",
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
        "合计",
      ],
      company: "",
      companyOptions: [],
      station: "",
      stationOptions: [],
      selectValue: "光伏电量分析",
      headers: [
        "日照强度(W/m²)",
        "实发电量",
        "计划电量",
        "计划完成情况(%)",
        "可研电量",
        "可研完成情况(%)",
        "等效发电小时(h)",
      ],
    };
  },
  watch: {},
  created() {
    this.initialization();
  },
  methods: {
    initialization() {
      companys().then(({ data: res }) => {
        if (res.data) {
          this.companyOptions = [res.data[1]];
          this.company = res.data[1].id;
          this.getStation();
        }
      });
    },
    companyChanged() {
      this.station = "";
      this.getStation();
    },
    getStation() {
      GetStationByCompany({ companyids: this.company, type: -2 }).then(
        ({ data: res, code }) => {
          if (res.code == 200) {
            this.stationOptions = res.data;
            this.station = this.stationOptions[0].id;
            this.getDatas();
          }
        }
      );
    },
    getDatas() {
      this.loading = true;
      getMonthElectricAnalyseGf({ wpId: this.station }).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.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.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;
    }

    .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% - 310px - 45px);
      padding: 0 20px;
      .chart-wrapper {
        height: 100%;
        width: 100%;
      }
    }
    .table-wrapper {
      height: 310px;
      width: 100%;
      padding: 0 20px;
      padding-top: 10px;
    }
  }
}
</style>