ims-gyee/src/views/layout/economicsOperation/benchmarkingManagement/performanceRankingList/index.vue

<template>
  <div class="parcel-box" style="height: 100%">
    <div class="title">
      <div class="form-wrapper">
        <div class="select-wrapper">
          <el-select
            size="mini"
            :disabled="displayDetail"
            v-model="tabIndex"
            placeholder="请选择"
            @change="tabClick"
          >
            <el-option
              v-for="item in tabOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            size="mini"
            :disabled="displayDetail"
            v-model="company"
            placeholder="请选择"
            @change="handleCompanyChange(company)"
          >
            <el-option
              v-for="item in companyOptions"
              :key="item.id"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            size="mini"
            :disabled="displayDetail"
            v-model="stationObj"
            placeholder="请选择"
            @change="handleStationChange(stationObj)"
            clearable
          >
            <el-option
              v-for="item in stationList"
              :key="item.id"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            size="mini"
            v-model="projectObj"
            placeholder="请选择"
            @change="handleProjectChange(projectObj)"
            clearable
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            size="mini"
            v-model="lineObj"
            placeholder="请选择"
            @change="handleLineChange(lineObj)"
            clearable
          >
            <el-option
              v-for="item in lineList"
              :key="item.id"
              :label="item.nemName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="date-wrapper">
          <div class="date-item-wrapper">
            开始日期
            <div class="date-item-date">
              <el-date-picker
                v-model="starTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                size="mini"
                @change="typeClick('1')"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="date-item-wrapper">
            结束日期
            <div class="date-item-date">
              <el-date-picker
                v-model="endTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                size="mini"
                @change="typeClick('1')"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="but">
        <el-button
          round
          size="mini"
          class="buttons active"
          @click="getPerformance"
          >搜索</el-button
        >
        <el-button round size="mini" class="buttons" @click="mxClick"
          >明细</el-button
        >
        <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
      </div>
    </div>
    <div class="tabCut1">
      <div
        class="tabCut-item"
        @click="typeClick(val.id)"
        :class="typeIndex === val.id ? 'active' : ''"
        v-for="val in typeOptions"
        :key="val.id"
      >
        <span>{{
          val.id == 1 ? (tabIndex == -1 ? val.name : val.name1) : val.name
        }}</span>
      </div>
    </div>
    <div class="performance">
      <div class="economicTable" style="height: 100%">
        <el-table
          :data="tableData"
          size="mini"
          :cell-style="{ padding: '6px' }"
          :row-style="{ height: '0px' }"
          stripe
          @header-click="onHeaderClick"
        >
          <el-table-column align="center" prop="" label="" width="900">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            show-overflow-tooltip
            label="名称"
          >
            <template v-slot="{ row }">
              <span @click.stop="handleNameClick(row)">{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="llfdl" label="理论发电量">
          </el-table-column>
          <el-table-column align="center" prop="sjfdl" label="实际发电量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="fnlly"
            :label="tabIndex === -1 ? '风能利用率%' : '光能利用率%'"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="speed"
            :label="tabIndex === -1 ? '风速' : '辐照'"
          >
          </el-table-column>
          <el-table-column align="center" prop="fjhjx" label="故障">
          </el-table-column>
          <el-table-column align="center" prop="jhjx" label="检修">
          </el-table-column>
          <el-table-column align="center" prop="sl" label="受累">
          </el-table-column>
          <el-table-column align="center" prop="xd" label="限电">
          </el-table-column>
          <el-table-column align="center" prop="xn" label="性能">
          </el-table-column>
        </el-table>
      </div>
      <div class="left">
        <bar-line-chart
          v-if="showDisplay"
          :height="height"
          :bardata="bardata"
          :lineData="lineData"
          :color="barColor"
          lineName="理论发电量"
        />
        <div class="lyl" :style="{ height: tableData.length * 38 + 'px' }">
          <div class="lyl-item" v-for="(item, index) in tableData" :key="index">
            {{ item.fnlly }}%
            <img class="lyl-item-img" src="@assets/img/images/fnlyl.png" />
          </div>
        </div>
        <div class="dashed" :style="{ height: height }"></div>
      </div>
    </div>
  </div>
</template>

<script>
import BarLineChart from "../compontent/bar-line-chart.vue";
import { companys } from "@/api/curveAnalyse";
import {
  GetOrganization,
  GetStationByCompany,
  GetProjectList,
  GetLineList,
  GetSquareList,
} from "@/api/headerNav.js";
import dayjs from "dayjs";
import {
  getStation,
  getProject,
  getLine,
  performance,
} from "@/api/performance";
export default {
  name: "performanceRankingList", //风机绩效榜
  components: {
    BarLineChart,
  },
  data() {
    return {
      barColor: [
        "#1c99ff",
        "#e17e23",
        "#ba3237",
        "#c531c7",
        "#ffffff",
        "#05bb4c",
      ],
      company: "",
      companyOptions: [],
      stationObj: "",
      stationList: [],
      projectObj: "",
      projectList: [],
      lineObj: "",
      lineList: [],
      starTime: "",
      endTime: "",
      tabIndex: -2,
      bardata: [],
      lineData: [],
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      typeIndex: "1",
      typeOptions: [
        { id: "1", name: "风场", name1: "电站" },
        { id: "2", name: "项目" },
        { id: "3", name: "线路" },
      ],
      typeIndexFlag: false,
      tableData: [],
      showDisplay: true,
      height: "880px",
      sort: "",
      target: "",
      sortList: [
        {
          id: "name",
          sort: false,
        },
        {
          id: "llfdl",
          sort: false,
        },
        {
          id: "sjfdl",
          sort: false,
        },
        {
          id: "speed",
          sort: false,
        },
        {
          id: "fjhjx",
          sort: false,
        },
        {
          id: "jhjx",
          sort: false,
        },
        {
          id: "sl",
          sort: false,
        },
        {
          id: "xd",
          sort: false,
        },
        {
          id: "xn",
          sort: false,
        },
        {
          id: "fnlly",
          sort: false,
        },
      ],
    };
  },
  computed: {},
  created() {
    let date = new Date();
    date.setDate(1);
    let month = parseInt(date.getMonth() + 1);
    let day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    this.starTime = date.getFullYear() + "-" + month + "-" + day;
    this.endTime = dayjs(new Date().getTime()).format("YYYY-MM-DD");
    this.initialization();
  },
  methods: {
    handleNameClick(row) {
      if (this.typeIndex == 4) {
        return;
      } else {
        this.typeIndexFlag = true;
        if (this.typeIndex == "1") {
          this.stationObj = row.id;
          this.getProject(this.stationObj);
        } else if (this.typeIndex == "2") {
          this.projectObj = row.id;
          this.getLineList(this.projectObj);
        } else if (this.typeIndex == "2") {
          this.lineObj = row.id;
        }
        this.typeIndex = "4";
        this.getPerformance();
      }
    },
    onHeaderClick(column) {
      console.log(column);
      this.target = column.property;
      this.sortList.forEach((item) => {
        if (item.id === column.property) {
          item.sort = !item.sort;
          this.sort = item.sort ? 1 : 2;
        } else {
          item.sort = false;
        }
      });
      this.getPerformance();
    },
    initialization() {
      GetOrganization({ type: this.tabIndex }).then((res) => {
        if (res.data) {
          this.company = res.data[0].id;
          this.companyOptions = res.data;
          this.getStation(res.data[0].id);
        }
      });
    },
    getStation(companyids) {
      GetStationByCompany({
        companyids: companyids,
        type: this.tabIndex,
      }).then((res) => {
        this.stationObj = "";
        this.projectObj = "";
        this.lineObj = "";
        if (res.data.length) {
          this.stationList = res.data;
          this.getPerformance();
        } else {
          this.stationList = [];
        }
      });
    },
    getProject(stationids) {
      GetProjectList(stationids).then((res) => {
        this.projectObj = "";
        this.lineObj = "";
        if (res.data.length) {
          this.projectList = res.data;
        } else {
          this.projectList = [];
        }
        this.getPerformance();
      });
    },
    getLineList(projectids) {
      GetLineList(projectids).then((res) => {
        this.lineObj = "";
        if (res.data.length) {
          this.lineList = res.data;
        } else {
          this.lineList = [];
        }
        this.getPerformance();
      });
    },
    handleCompanyChange(val) {
      this.typeIndex = "1";
      this.getStation(val);
    },
    handleStationChange(val) {
      this.typeIndex = "1";
      this.getProject(val);
    },
    handleProjectChange(val) {
      this.typeIndex = "1";
      this.getLineList(val);
    },
    handleLineChange(val) {
      this.typeIndex = "1";
      this.getPerformance();
    },
    tabClick(data) {
      this.tabIndex = data;
      (this.stationObj = ""),
        (this.stationList = []),
        (this.projectObj = ""),
        (this.projectList = []),
        (this.lineObj = ""),
        (this.lineList = []);
      this.initialization();
    },
    typeClick(data) {
      if (this.typeIndexFlag) {
        if (data == "1") {
          this.stationObj = "";
          this.projectObj = "";
          this.lineObj = "";
        } else if (data == "2") {
          this.projectObj = "";
          this.lineObj = "";
        } else if (data == "3") {
          this.lineObj = "";
        }
      }
      this.typeIndex = data;
      this.getPerformance();
    },
    getPerformance() {
      performance({
        companyid: this.company,
        getype: this.tabIndex,
        sttype: this.typeIndex,
        beginDate: this.starTime,
        endDate: this.endTime,
        wpids: this.stationObj,
        projectids: this.projectObj,
        lineids: this.lineObj,
        target: this.target,
        sort: this.sort,
      }).then((res) => {
        if (res.data) {
          let name = [],
            data = [],
            llfdl = [],
            legend = [
              "实际电量",
              "检修损失电量",
              "故障损失电量",
              "限电损失电量",
              "受累损失电量",
              "性能损失电量",
            ]; //项目列表
          res.data.forEach((item, index) => {
            name.push(item.name);
            data.push([
              item.sjfdl,
              item.jhjx,
              item.fjhjx,
              item.xd,
              item.sl,
              item.xn,
            ]);
            llfdl.push(item.llfdl);
          });
          name.pop();
          data.pop();
          llfdl.pop();
          if (data.length > 0) {
            let arr1 = [];
            const length = data[0].length;
            for (let i = 0; i < length; i++) {
              let arr2 = [];
              data.forEach((ele) => {
                arr2.push(ele[i]);
              });
              arr1.push(arr2);
            }
            this.lineData = llfdl;
            this.bardata = {
              area: name,
              legend: legend,
              data: arr1,
            };
          } else {
            (this.bardata = []), (this.lineData = []);
          }
          if (this.lineData.length > 22) {
            this.height = this.lineData.length * 37 + 53 + "px";
          } else {
            this.height = 23 * 37 + 80 + "px";
          }
          this.showDisplay = false;
          setTimeout(() => {
            this.showDisplay = true;
          }, 10);
          this.tableData = res.data;
        }
      });
    },
    mxClick() {
      this.$router.push("/benchmarkingManagement/decision1Mx");
    },
  },
};
</script>

<style lang="less" scoped>
.parcel-box {
  display: flex;
  flex-direction: column;
}

.title ::v-deep {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  .form-wrapper {
    display: flex;
    align-items: center;
    .select-wrapper {
      display: flex;
      align-items: center;
      .el-select {
        width: 155px;
        margin-right: 10px;
        .el-input .el-input__inner {
          width: 150px;
        }
      }
    }
    .date-wrapper {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      .date-item-wrapper {
        white-space: nowrap;
        display: flex;
        align-items: center;
        margin-right: 15px;
        .date-item-date {
          margin-left: 10px;
          width: 155px;
          .el-input .el-input__inner {
            width: 150px;
            font-size: 13px;
            color: #b3b3b3;
          }
          .el-input .el-input__suffix {
            right: 70px;
          }
        }
      }
    }
  }
  .but {
    display: flex;
    flex-direction: row;
    align-content: center;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  .buttons {
    background-color: rgba(0, 70, 199, 0.2);
    border: 1px solid #3b4c6c;
    color: #b3b3b3;
    font-size: 14px;
    margin-right: 10px;
    &:hover {
      background-color: rgba(0, 70, 199, 0.5);
      color: #ffffff;
    }
  }
}
.performance {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 98.5%;
  background-color: rgba(0, 0, 0, 0.4);
  margin-top: 10px;
  margin-left: 1%;
  border-radius: 5px;
  overflow-y: auto;
  position: relative;

  .left {
    width: 45%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;

    .dashed {
      position: absolute;
      width: 1px;
      background-image: linear-gradient(
        #3a4043 0%,
        #3a4043 40%,
        transparent 50%
      );
      background-size: 1px 9px;
      margin-top: 45px;
      height: 100%;
      right: -50px;
    }
  }

  .center {
    width: 3%;
    height: 90%;
    position: relative;
    margin-top: 50px;

    .using {
      width: 100%;
      height: 100%;
      z-index: 99;
      position: absolute;
      right: 0px;
      top: 0px;
    }
  }

  .dashed1 {
    width: 1px;
    background-image: linear-gradient(#3a4043 0%, #3a4043 40%, transparent 50%);
    background-size: 1px 9px;
    margin-top: 45px;
    margin-left: 20px;
  }

  .economicTable {
    width: 100%;
  }
}

.tabCut1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0px 0px 20px;

  .tabCut-item {
    width: 93px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: rgba(0, 70, 199, 0.4);
    color: #abb5cc;
    position: relative;
  }

  .active {
    background: rgba(0, 70, 199, 0.7);
    color: #fff;
  }

  .active:before {
    content: "";
    width: 1px;
    height: 7px;
    background-color: #ffffff;
    position: absolute;
    left: 0;
  }

  .active:after {
    content: "";
    width: 1px;
    height: 7px;
    background-color: #ffffff;
    position: absolute;
    right: 0;
  }
}
.lyl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #1c98fe;
  margin-top: 37px;
  margin-left: 10px;
}
.lyl-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  position: relative;
  width: 120px;
}
.lyl-item-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 32px;
}
</style>