shanxi_power/src/views/economicsOperation/benchmarkingManagement/loseRate/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.aname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        项目：
        <el-select
          :disabled="displayDetail"
          size="mini"
          v-model="projectObj"
          multiple
          collapse-tags
          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"
          :disabled="displayDetail"
          v-model="lineObj"
          multiple
          collapse-tags
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in lineList"
            :key="item.id"
            :label="item.aname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        开始日期
        <div class="search-input">
          <el-date-picker
            v-model="starTime"
            :disabled="displayDetail"
            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
            :disabled="displayDetail"
            v-model="endTime"
            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"
          class="buttons"
          :disabled="displayDetail"
          @click="gerWxssl"
          >搜 索</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" :data-type="$store.state.moreSty"><span>{{selectValue}}</span></div>
        <div class="search-right">
            <img class="select-back" src="@assets/imgs/select-back.png" />
            <div class="title-select">
            <el-select
                v-model="selectValue"
                placeholder="请选择"
                @change="getselectData()"
                clearable
            >
                <el-option
                v-for="item in selectList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
                >
                </el-option>
            </el-select>
            </div>
        </div>
      </div>
      <div class="economicTable">
        <el-table
          :data="tableData"
          ref="multipleTable"
          size="mini"
          height="100%"
          :cell-style="{ padding: '4px' }"
          :row-style="{ height: '0' }"
          stripe
          @selection-change="handleCurrentChange"
        >
          <el-table-column type="selection" width="58" align="center">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="名称"
            show-overflow-tooltip
            sortable
          >
            <template #default="scope">
              <span
                @click="goDetail(scope.row)"
                style="cursor: pointer; "
                :style="$store.state.moreSty === 'greenSty' ? 'color: #05bb4c' : 'color: #67b9ff'"
                >{{ scope.row.name }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            :align="item.align ? item.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 : 68"
            show-overflow-tooltip
            sortable
          />
        </el-table>
      </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="55" align="center">
        </el-table-column>
        <el-table-column 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"
          header-align="center"
          :align="item.align ? item.align : 'center'"
          :width="item.name.length == 4 ? 58 : 88"
          show-overflow-tooltip
          sortable
        />
      </el-table>
      <div class="pagination-class">
        <el-pagination
          @size-change="handleSizeDChange"
          :page-sizes="[23, 50, 100, 500]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageDChange"
          :current-page="pageD.currentPage"
          :page-size="pageD.pagesize"
          :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,
  wxssl,
  details,
} from "@/api/performance";
import PieChart from "../../homePage/components/pieChart.vue";
import BarCharts from "../../homePage/components/barCharts.vue";
import dayinfo from "../compontent/dayinfo.vue";
import dataJson from "./dataJson.json"
export default {
  name: "lostRate", //场际对标
  components: {
    PieChart,
    BarCharts,
    dayinfo,
  },
  data() {
    return {
      tableHeader,
      tableHeaderG,
      tableHeaderDetail,
      tableHeaderGDetail,
      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: [],
      detailRow: {},
      pageD: {
        pagesize: 23,
        currentPage: 1,
        total: 0,
      },
      selectValue: "五项损失率",
      selectList: [
        {
            name: "五项损失率",
        },
        {
          name: "故障损失率",
        },
        {
          name: "检修损失率",
        },
        {
          name: "限电损失率",
        },
        {
          name: "受累损失率",
        },
        {
          name: "性能损失率",
        },
      ],
    };
  },
  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: {
    handlePageDChange(val) {
      this.pageD.currentPage = val;
      this.goDetail();
    },

    handleSizeDChange(val) {
      this.pageD.currentPage = 1;
      this.pageD.pagesize = val;
      this.goDetail();
    },

    tabClick(val) {
      this.tabIndex = val;
      this.stationObj = [];
      this.stationList = [];
      this.projectObj = [];
      this.projectList = [];
      this.lineObj = [];
      this.lineList = [];
      this.tableData = [];
      if (val == -2) {
        this.company = "SXJ_KGDL_GFFD_ZGS";
        this.getStation(this.company);
      } else {
        this.company = this.companyOptions[0].id;
        this.getStation(this.company);
      }
      //   this.gerWxssl();
    },
    getselectData() {
        
    },
    initialization() {
        this.dataChange(dataJson.data)
      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.getProject(res.data[0].id);
        }
      });
    },
    getProject(wpids) {
      getProject({
        wpids: wpids,
      }).then(({ data: res }) => {
        if (res.data.length) {
          this.projectList = res.data;
          this.getLine(res.data[0].id);
        } else {
          this.projectList = [];
          this.getLine("");
        }
      });
    },
    getLine(pjids) {
      getLine({
        pjids: pjids,
      }).then(({ data: res }) => {
        if (res.data.length) {
          this.lineList = res.data;
          this.gerWxssl();
        } else {
          this.lineList = [];
          this.gerWxssl();
        }
      });
    },
    gerWxssl() {
      this.BASE.showLoading();
      wxssl({
        companys: this.company,
        type: this.tabIndex,
        beginDate: this.starTime,
        endDate: this.endTime,
        wpids: this.stationObj.join(","),
        projectids: this.projectObj.join(","),
        lineids: this.lineObj.join(","),
        target: "",
        sort: "",
      }).then(({ data: res }) => {
        this.dataChange(res)
        
      });
    },
    dataChange(res) {
        if (res.data.length) {
          let barList = [
            {
              name: "故障损失电量",
              children: [],
              date: [],
            },
            {
              name: "检修损失电量",
              children: [],
            },
            {
              name: "性能损失电量",
              children: [],
            },
            {
              name: "限电损失电量",
              children: [],
            },
            {
              name: "受累损失电量",
              children: [],
            },
          ];
          this.tableData = res.data;
          let lossPower = [];
          res.data.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;
          this.BASE.closeLoading();
        } else {
          this.BASE.closeLoading();
          this.tableData = [];
          this.lossPower = [];
          this.barList = [];
        }
    },
    handleCompanyChange(val) {
      this.company = val;
      this.lineObj = [];
      this.getStation(val);
    },
    handleStationChange(val) {
      this.projectObj = [];
      this.lineObj = [];
      this.getProject(val);
    },
    handleProjectChange(val) {
      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: {},
};
</script>

<style lang="less" scoped>
.parcel-box {
  height: 100%;
  width: 100%;
  padding: 0 20px;
  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 {
      cursor: not-allowed;
      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% - 345px - 43px - 20px);
  background-color: rgba(0, 0, 0, 0.45);
  //   padding-bottom: 20px;
  border-radius: 5px;
}

.line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .leftContent[data-type~="greenSty"] {
            background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
        }
        .leftContent[data-type~="blueSty"] {
            background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
        }
  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;

    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #05bb4c;
      margin-left: 25px;
    }
  }
  .search-right {
      position: relative;
      top: -3px;

      .select-back {
        position: absolute;
        right: 5px;
        top: 0px;
        z-index: 0;
      }

      .title-select {
        z-index: 2;
      }
    }
}

.economicTable {
  width: 100%;
  height: calc(100% - 36px);
}

.echarts {
  width: 100%;
  height: 345px;
  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: calc(70% - 20px);
    margin-left: 20px;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }
}
.pagination-class {
  text-align: right;
  margin-top: 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>