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

<template>
  <div class="home-body" style="height: 93vh">
    <HomeNav
      :hiddenProject="true"
      :hiddenLine="true"
      :hiddenSearch="true"
      @firstRender="firstRender"
    />
    <div class="title">
      <el-select v-model="tabIndex" placeholder="请选择">
        <el-option
          v-show="item.id"
          v-for="(item, index) in tabOptions"
          :key="index"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        size="mini"
        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>
      <!-- <div class="tabCut">
        <div
            @click="tabClick(val.id)"
            :class="tabIndex === val.id ? 'active' : ''"
            v-for="val in tabOptions"
            :key="val.id"
        >
          <span>{{ val.name }}</span>
        </div>
      </div> -->

      <div class="station">
        场站：
        <el-select
          size="mini"
          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>
      </div>
      <template v-if="tabIndex === -1">
        <div class="station">
          项目：
          <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>
        </div>
        <div class="station">
          线路：
          <el-select
            size="mini"
            v-model="lineObj"
            placeholder="请选择"
            clearable
            @change="typeClick('1')"
          >
            <el-option
              v-for="item in lineList"
              :key="item.id"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </template>

      <div class="dates">
        开始日期
        <div class="search-input">
          <el-date-picker
            v-model="starTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            popper-class="date-select"
            @change="typeClick('1')"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="dates">
        结束日期
        <div class="search-input">
          <el-date-picker
            v-model="endTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            popper-class="date-select"
            @change="typeClick('1')"
          >
          </el-date-picker>
        </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
        >
      </div>
    </div>

    <div class="tabCut1" v-if="tabIndex === -1">
      <div
        class="tabCut-item"
        @click="typeClick(val.id)"
        :class="typeIndex === val.id ? 'active' : ''"
        v-for="val in typeOptions"
        :key="val.id"
      >
        <span>{{ val.name }}</span>
      </div>
    </div>
    <div class="performance" style="height: 90vh">
      <div class="economicTable" style="height: 86vh">
        <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="名称"
          >
          </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 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: -1,
      bardata: [],
      lineData: [],
      tabType: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      typeIndex: "1",
      typeOptions: [
        { id: "1", name: "风场" },
        { id: "2", name: "项目" },
        { id: "3", name: "线路" },
      ],
      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: {
    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() {
      companys().then((res) => {
        this.companyOptions = res.data;
        if (res.data.length) {
          this.company = res.data[0].id;
          this.getStation(res.data[0].id);
        } else {
          (this.company = ""),
            (this.stationObj = ""),
            (this.stationList = []),
            (this.projectObj = ""),
            (this.projectList = []),
            (this.lineObj = ""),
            (this.lineList = []);
        }
      });
    },
    getStation(companyids) {
      getStation({
        companyids: companyids,
        type: this.tabIndex,
      }).then((res) => {
        if (res.data.length) {
          this.stationList = res.data;
          this.getProject(res.data[0].id);
        } else {
          (this.stationObj = ""),
            (this.stationList = []),
            (this.projectObj = ""),
            (this.projectList = []),
            (this.lineObj = ""),
            (this.lineList = []);
        }
      });
    },
    getProject(wpids) {
      getProject({
        wpids: wpids,
      }).then((res) => {
        if (res.data.length) {
          this.projectList = res.data;
          this.getLine(res.data[0].id);
        } else {
          (this.projectObj = ""),
            (this.projectList = []),
            (this.lineObj = ""),
            (this.lineList = []);
        }
      });
    },
    getLine(pjids) {
      getLine({
        pjids: pjids,
      }).then((res) => {
        if (res.data.length) {
          this.lineList = res.data;
        } else {
          (this.lineObj = ""), (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.getLine(val);
    },
    tabClick(data) {
      this.tabIndex = data;
      (this.stationObj = ""),
        (this.stationList = []),
        (this.projectObj = ""),
        (this.projectList = []),
        (this.lineObj = ""),
        (this.lineList = []);
      this.getStation(this.company);
      this.getPerformance();
    },
    typeClick(data) {
      this.typeIndex = data;
      this.getPerformance();
    },
    getPerformance() {
      performance({
        companyid: this.company,
        getype: this.tabIndex,
        sttype: this.stationObj ? "" : 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;
          console.log(111, this.tableData);
        }
      });
    },
    mxClick() {
      this.$router.push("/benchmarkingManagement/decision1Mx");
    },
  },
};
</script>

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

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  padding-left: 20px;

  .tabCut {
    display: inline-block;
    margin: 0 10px;

    div {
      display: inline-block;
      width: 60px;
      height: 27px;
      border: 1px solid #354460;
      text-align: center;
      line-height: 25px;
      cursor: pointer;
    }

    div:nth-child(1) {
      border-radius: 13px 0px 0px 13px;
    }

    div:nth-child(2) {
      border-radius: 0px 13px 13px 0px;
    }

    .active {
      background-color: #0c3378;
      color: #fff;
    }
  }

  .station {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #b3b3b3;
    margin-right: 10px;
  }

  .dates {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #b3b3b3;
    margin-right: 10px;
  }

  .search-input {
    margin-left: 10px;
  }

  .but {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-left: 20px;
  }

  .buttons {
    background-color: rgba(0, 70, 199, 0.2);
    border: 1px solid #3b4c6c;
    color: #b3b3b3;
    font-size: 14px;

    &:hover,
    &.active {
      background-color: rgba(0, 70, 199, 0.5);
      color: #ffffff;
    }
  }
}

.performance {
  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>