jn_sis_zhfx/src/views/economicsOperation/benchmarkingManagement/wiringBenchmarking/index.vue

<template>
  <div class="parcel-box">
    <div class="form-wrapper">
      <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>
      <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>
      <div class="station">
        场站：
        <el-select
          size="mini"
          :disabled="displayDetail"
          v-model="stationObj"
          multiple
          collapse-tags
          placeholder="请选择"
          @change="handleStationChange(stationObj)"
          clearable
        >
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        项目：
        <el-select
          size="mini"
          :disabled="displayDetail"
          v-model="projectObj"
          multiple
          collapse-tags
          placeholder="请选择"
          @change="handleProjectChange(projectObj)"
          clearable
        >
          <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        线路：
        <el-select
          size="mini"
          :disabled="displayDetail"
          v-model="lineObj"
          multiple
          collapse-tags
          placeholder="请选择"
          clearable
          @change="gerXldb()"
        >
          <el-option
            v-for="item in lineList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        开始日期
        <div class="search-input">
          <el-date-picker
            :disabled="displayDetail"
            v-model="starTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="station">
        结束日期
        <div class="search-input">
          <el-date-picker
            v-model="endTime"
            :disabled="displayDetail"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="but">
        <el-button
          round
          size="mini"
          :disabled="displayDetail"
          class="buttons"
          @click="gerXldb"
          >搜索</el-button
        >
        <el-button
          round
          size="mini"
          class="buttons"
          @click="dbfx"
          :disabled="
            chooseList.length <= 5 && chooseList.length > 1 ? false : true
          "
          >对标分析</el-button
        >
        <el-button
          round
          size="mini"
          class="buttons"
          @click="goBack"
          v-if="displayDetail"
          >返回</el-button
        >
        <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
      </div>
    </div>
    <div class="bodys" v-if="!displayDetail">
      <div class="line">
        <div class="leftContent"><span>线路对标</span></div>
      </div>
      <div class="economicTable">
        <el-table
          :data="tableData"
          ref="multipleTable"
          size="mini"
          height="calc(100% - 40px)"
          :cell-style="{ padding: '4px' }"
          :row-style="{ height: '0' }"
          stripe
          @selection-change="handleCurrentChange"
        >
          <el-table-column type="selection" width="56" align="center">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="name"
            label="名称"
            sortable
          >
            <template v-slot="scope">
              <span
                @click="goDetail(scope.row)"
                style="cursor: pointer; color: #05bb4c"
                >{{ scope.row.name }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-for="item in tabIndex == -1 ? tableHeader : tableHeaderG"
            :key="item.code"
            :prop="item.code"
            :label="item.name"
            :width="item.name.length == 4 ? 55 : 67"
            show-overflow-tooltip
            sortable
          />
        </el-table>
        <div class="pagination-class">
          <el-pagination
            @current-change="handlePageChange"
            :current-page="page.currentPage"
            :page-size="page.pagesize"
            layout="total, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="echarts" v-if="!displayDetail">
      <div class="pie-echarts">
        <div class="chart-name">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          损失电量分析
        </div>
        <PieChart
          :lossPower="lossPower"
          width="100%"
          height="calc(100% - 39px)"
          :showLable="false"
        ></PieChart>
      </div>
      <div class="bar-echarts">
        <div class="chart-name">
          <div class="point point-left bottom"></div>
          <div class="point point-right bottom"></div>
          五项损失
        </div>
        <BarCharts
          :list="barList"
          width="100%"
          height="calc(100% - 39px)"
          :showLegend="true"
          :xdate="false"
          :colorIndex="true"
        ></BarCharts>
      </div>
    </div>

    <div
      v-if="displayDetail"
      style="height: calc(100% - 43px - 35px); padding-bottom: 10px"
    >
      <el-table
        :data="detailTable"
        ref="multipleTable"
        size="mini"
        height="100%"
        :cell-style="{ padding: '0px' }"
        :row-style="{ height: '0' }"
        stripe
        @selection-change="handleCurrentChange"
      >
        <el-table-column type="selection" width="60" align="center">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="风机名称"
          sortable
        >
        </el-table-column>
        <el-table-column
          v-for="item in tabIndex == -1
            ? tableHeaderDetail
            : tableHeaderGDetail"
          :key="item.code"
          :prop="item.code"
          :label="item.name"
          :width="item.name.length == 4 ? 58 : 88"
          show-overflow-tooltip
          align="center"
          sortable
        />
      </el-table>
      <div class="pagination-class">
        <el-pagination
          @current-change="handlePageDChange"
          :current-page="pageD.currentPage"
          :page-size="pageD.pagesize"
          layout="total, prev, pager, next, jumper"
          :total="pageD.total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      class="dialogs"
      width="90%"
      top="40px"
      v-model="dialogVisible"
      :show-close="true"
    >
      <template #title>
        <div class="dialog-title">
          <div class="title">对标排名分析</div>
        </div>
      </template>
      <div class="dialog-body">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <dayinfo
          :radarValue="radarValue"
          :title="[windNum, windNum2, windNum3, windNum4, windNum5]"
          :windNum="windNum"
          :windNum2="windNum2"
          :windNum3="windNum3"
          :windNum4="windNum4"
          :windNum5="windNum5"
          :tabs="tabs"
          :analyisDialog="analyisDialog"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  tableHeader,
  tableHeaderG,
  tableHeaderDetail,
  tableHeaderGDetail,
} from "@/utills//constant.js";
import { companys } from "@/api/curveAnalyse";
import {
  getStation,
  getProject,
  getLine,
  xldb,
  details,
} from "@/api/performance";
import PieChart from "../../homePage/components/pieChart.vue";
import BarCharts from "../../homePage/components/barCharts.vue";
import dayinfo from "../compontent/dayinfo.vue";
export default {
  name: "wiringBenchmarking", //线路对标
  components: {
    PieChart,
    BarCharts,
    dayinfo,
  },
  data() {
    return {
      tableHeader,
      tableHeaderG,
      tableHeaderDetail,
      tableHeaderGDetail,
      page: {
        pagesize: 11,
        currentPage: 1,
        total: 0,
      },
      pageD: {
        pagesize: 19,
        currentPage: 1,
        total: 0,
      },
      company: "",
      companyOptions: [],
      stationObj: [],
      stationList: [],
      projectObj: [],
      projectList: [],
      lineObj: [],
      lineList: [],
      starTime: "",
      endTime: "",
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      tableData: [],
      detailTable: [],
      chooseList: [],
      lossPower: [],
      barList: [],
      displayDetail: false,
      dialogVisible: false,
      radarValue: [],
      windNum: "",
      windNum2: "",
      windNum3: "",
      windNum4: "",
      windNum5: "",
      tabs: [],
      analyisDialog: [],
      screenHeight: window.innerHeight,
      echartsHeight: "53vh",
      detailRow: {},
    };
  },
  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();
  },
  mounted() {
    if (this.screenHeight > 1100) {
      this.echartsHeight = "58vh";
    } else {
      this.echartsHeight = "53vh";
    }
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    handlePageChange(val) {
      this.page.currentPage = val;
      this.gerXldb();
    },
    handlePageDChange(val) {
      this.pageD.currentPage = val;
      this.goDetail();
    },
    tabClick(val) {
      this.tabIndex = val;
      this.stationList = [];
      this.stationObj = [];
      this.projectObj = [];
      this.lineObj = [];
      this.getStation(this.company);
      this.gerXldb();
    },
    initialization() {
      companys().then(({ data: res }) => {
        if (res.data) {
          this.company = res.data[0].id;
          this.companyOptions = res.data;
          this.getStation(res.data[0].id);
        }
      });
    },
    getStation(companyids) {
      getStation({
        companyids: companyids,
        type: this.tabIndex,
      }).then(({ data: res }) => {
        if (res.data.length) {
          this.stationList = res.data;
          this.gerXldb();
          this.getProject(this.stationObj.join(","));
        }
      });
    },
    getProject(wpids) {
      getProject({
        wpids: wpids,
      }).then(({ data: res }) => {
        if (res.data.length) {
          this.projectList = res.data;
          this.getLine(res.data[0].id);
        }
      });
    },
    getLine(pjids) {
      getLine({
        pjids: pjids,
      }).then(({ data: res }) => {
        if (res.data.length) {
          this.lineList = res.data;
          this.gerXldb();
        }
      });
    },
    gerXldb() {
      xldb({
        companys: this.company,
        type: this.tabIndex,
        beginDate: this.starTime,
        endDate: this.endTime,
        wpids: this.stationObj.join(","),
        projectids: this.projectObj.join(","),
        lineids: this.lineObj.join(","),
        pageSize: this.page.pagesize,
        pageNum: this.page.currentPage,
        target: "",
        sort: "",
      }).then(({ data: res }) => {
        if (res.data) {
          let barList = [
            {
              name: "故障损失电量",
              children: [],
              date: [],
            },
            {
              name: "检修损失电量",
              children: [],
            },
            {
              name: "性能损失电量",
              children: [],
            },
            {
              name: "限电损失电量",
              children: [],
            },
            {
              name: "受累损失电量",
              children: [],
            },
          ];
          this.tableData = res.data.resultList;
          this.page.total = res.data.total;
          let lossPower = [];
          res.data.resultList.forEach((item) => {
            let obj = {
              name: item.name,
              value: item.zssdl,
            };
            lossPower.push(obj);
            barList[0].date.push(item.name);
            barList[0].children.push(item.gzssdl);
            barList[1].children.push(item.jxssdl);
            barList[2].children.push(item.xnssdl);
            barList[3].children.push(item.xdssdl);
            barList[4].children.push(item.slssdl);
          });
          this.lossPower = lossPower;
          this.barList = barList;
        }
      });
    },
    handleCompanyChange(val) {
      this.company = val;
      //   this.lineObj = [];
      this.getStation(val);
      this.gerXldb();
    },
    handleStationChange(val) {
      this.gerXldb();
      //   this.lineObj = [];
      this.getProject(val);
    },
    handleProjectChange(val) {
      this.gerXldb();
      //   this.lineObj = [];
      this.getLine(val);
    },
    handleCurrentChange(val) {
      if (val.length > 5) {
        let del_row = val.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      let arr = [];
      val.forEach((item, index) => {
        if (index < 5) {
          arr.push(item);
        }
      });
      this.chooseList = arr;
    },
    goDetail(row) {
      if (!this.displayDetail) {
        this.displayDetail = true;
        this.detailRow = row;
      }

      details({
        id: this.detailRow.id,
        beginDate: this.starTime,
        endDate: this.endTime,
        pageSize: this.pageD.pagesize,
        pageNum: this.pageD.currentPage,
        target: "",
        sort: "",
      }).then(({ data: res }) => {
        if (res.data) {
          this.detailTable = res.data.resultList;
          this.pageD.total = res.data.total;
        }
      });
    },
    goBack() {
      this.displayDetail = false;
    },
    dbfx() {
      if (this.chooseList.length <= 5) {
        this.dialogVisible = true;
        this.AjaxDbfx();
      }
    },
    AjaxDbfx() {
      var data = this.chooseList;
      this.windNum = data[0]?.date || data[0]?.name;
      this.windNum2 = data[1]?.date || data[1]?.name;
      this.windNum3 = data[2]?.date || data[2]?.name;
      this.windNum4 = data[3]?.date || data[3]?.name;
      this.windNum5 = data[4]?.date || data[4]?.name;
      let tabs = [
        {
          name: "发电量",
          code: "fdl",
        },
        {
          name: "故障损失电量",
          code: "gzssdl",
        },
        {
          name: "检修损失电量",
          code: "jxssdl",
        },
        {
          name: "性能未达标损失电量",
          code: "xnssdl",
        },
        {
          name: "受累损失电量",
          code: "slssdl",
        },
        {
          name: "风能利用率",
          code: "fnlyl",
        },
        {
          name: "故障损失率",
          code: "gzssl",
        },
        {
          name: "检修损失率",
          code: "jxssl",
        },
        {
          name: "弃风率",
          code: "qfl",
        },
        {
          name: "性能损失率",
          code: "xnssl",
        },
        {
          name: "受累损失率",
          code: "slssl",
        },
      ];
      tabs = tabs.map((item) => {
        if (item.code == "fnlyl") {
          if (this.tabIndex == -1) {
            item.name = "风能利用率";
          } else {
            item.name = "光能利用率";
          }
        }
        if (item.code == "qfl") {
          if (this.tabIndex == -1) {
            item.name = "弃风率";
          } else {
            item.name = "弃光率";
          }
        }
        return item;
      });

      tabs.forEach((val) => {
        data.forEach((item, index) => {
          val["windData" + (index + 1)] = item[val.code];
        });
      });
      this.tabs = tabs;
      let radarValue = [];
      data.forEach((item, index) => {
        let data = {
          indicator: [
            "风能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃风率排名",
            "性能损失率排名",
            "受累损失率排名",
          ],
          data: [
            {
              value: [
                item.fnlylpm,
                item.gzsslpm,
                item.jxsslpm,
                item.qflpm,
                item.xnsslpm,
                item.slsslpm,
              ],
              name: item.name,
            },
          ],
        };
        if (this.tabIndex == -1) {
          data.indicator = [
            "风能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃风率排名",
            "性能损失率排名",
            "受累损失率排名",
          ];
        } else {
          data.indicator = [
            "光能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃光率排名",
            "性能损失率排名",
            "受累损失率排名",
          ];
        }
        radarValue.push(data);
      });
      this.radarValue = radarValue;
      var analyis = [],
        gzssdl = [],
        jxssdl = [],
        xnssdl = [],
        xdssdl = [],
        slssdl = [];
      data.forEach((item, index) => {
        gzssdl.push({
          text: item.name,
          value: item.gzssdl,
        });
        jxssdl.push({
          text: item.name,
          value: item.jxssdl,
        });
        xnssdl.push({
          text: item.name,
          value: item.xnssdl,
        });
        xdssdl.push({
          text: item.name,
          value: item.xdssdl,
        });
        slssdl.push({
          text: item.name,
          value: item.slssdl,
        });
      });
      analyis.push(
        {
          title: "故障损失电量",
          yAxisIndex: 0,
          value: gzssdl,
        },
        {
          title: "检修损失电量",
          yAxisIndex: 0,
          value: jxssdl,
        },
        {
          title: "性能损失电量",
          yAxisIndex: 0,
          value: xnssdl,
        },
        {
          title: "限电损失电量",
          yAxisIndex: 0,
          value: xdssdl,
        },
        {
          title: "受累损失电量",
          yAxisIndex: 0,
          value: slssdl,
        }
      );
      this.analyisDialog = analyis;
    },
  },
  watch: {
    screenHeight(val) {
      this.screenHeight = val;
      if (val > 1100) {
        this.echartsHeight = "58vh";
      } else {
        this.echartsHeight = "53vh";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pagination-class {
  text-align: right;
  margin-top: 5px;
}
.parcel-box {
  height: 100%;
  width: 100%;
  padding: 0 30px;
  padding-bottom: 10px;
}

.form-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;

  .tabCut {
    display: inline-block;
    margin: 0 10px;
    white-space: nowrap;
    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 {
      pointer-events: none;
    }
  }

  .tabCut1 {
    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;
    }

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

    .active {
      background-color: rgba(5, 187, 76, 0.9);
      color: #fff;
    }
  }

  .station {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    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(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;
    }
  }
}
.bodys {
  width: 100%;
  height: calc(100% - 350px - 43px - 20px);
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 5px;
}
.economicTable {
  width: 100%;
  height: calc(100% - 36px);
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    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;
    }
  }

  .rightContent {
    width: 212px;
    height: 28px;
    margin-top: 13px;
    background: url("~@/assets/imgs/title_right_bg.png");
  }
}

.echarts {
  width: 100%;
  height: 350px;
  display: flex;
  flex-direction: row;
  align-items: center;

  .chart-name {
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: relative;
    height: 39px;
    width: 98%;
    margin-left: 1%;
    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }

  .pie-echarts {
    width: 30%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }

  .bar-echarts {
    width: 69%;
    margin-left: 1%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }
}

.point {
  width: 6px;
  height: 1px;
  background-color: #ffffff;
  position: absolute;

  &.point-left {
    left: 0;
  }
  &.point-right {
    right: 0;
  }

  &.top {
    top: -1px;
  }

  &.bottom {
    bottom: -1px;
  }
}

/*去除表头全选框*/
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
::v-deep .el-table__body-wrapper .el-checkbox {
  .el-checkbox__input {
    display: block;
  }
}
</style>