PowerAnalysis_blue/src/views/economicsOperation/benchmarkingManagement/siteBenchmarking/index.vue

<template>
  <div class="parcel-box">
    <div class="title">
      <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>
      <div class="station">
        开始日期
        <div class="search-input">
          <el-date-picker 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" 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" @click="gerCndb">查询</el-button>
        <el-button round size="mini" class="buttons" @click="dbfx"  :disabled="chooseList.length === 2?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 v-if="!displayDetail">
      <div class="line">
        <div class="leftContent"><span>场内对标</span></div>
        <div class="rightContent"></div>
      </div>
      <div class="table">
        <el-table :data="tableData" ref="multipleTable" size="mini" height="58vh" :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="zhpm" label="综合排名" width="80" sortable>
          </el-table-column>
          <el-table-column align="center" prop="date" label="日期" sortable width="100">
          </el-table-column>
          <el-table-column align="center" prop="fdlpm" label="发电量排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="fdl" label="发电量" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="gzssdlpm" label="故障损失排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="gzssdl" label="故障损失" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="jxssdlpm" label="检修损失排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="jxssdl" label="检修损失" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="xnssdlpm" label="性能损失排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="xnssdl" label="性能损失" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="xdssdlpm" label="限电损失排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="xdssdl" label="限电损失" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="slssdlpm" label="受累损失排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="slssdl" label="受累损失" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="fnlylpm" label="风能利用率排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="fnlyl" label="风能利用率(%)" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="gzsslpm" label="故障损失率排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="gzssl" label="故障损失率(%)" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="jxsslpm" label="检修损失率排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="jxssl" label="检修损失率(%)" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="qflpm" label="弃风率排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="qfl" label="弃风率(%)" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="xnsslpm" label="性能损失率排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="xnssl" label="性能损失率(%)" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="slsslpm" label="受累损失率排名" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="slssl" label="受累损失率(%)" sortable width="66">
          </el-table-column>
          <el-table-column align="center" prop="" label="操作">
            <template v-slot="scope">
              <span @click="goDetail(scope.row)" style="cursor: pointer;color: #1C99FF;">详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="echarts">
        <div class="pie-echarts">
          <div class="chart-name">
            <div class="point left bottom"></div>
            <div class="point right bottom"></div>
            损失电量分析
          </div>
          <PieChart :lossPower="lossPower" width="100%" height="20vh"></PieChart>
        </div>
        <div class="bar-echarts">
          <div class="chart-name">
            <div class="point left bottom"></div>
            <div class="point right bottom"></div>
            五项损失
          </div>
          <BarCharts :list="barList" width="100%" height="30vh" :showLegend="true" :xdate="false"></BarCharts>
        </div>
      </div>
    </div>

    <div v-if="displayDetail">
      <el-table :data="detailTable" ref="multipleTable" size="mini" height="88vh" :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="风机名称" width="150" sortable>
          </el-table-column>
          <el-table-column align="center" prop="zhpm" label="综合排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="gzssdl" label="故障损失" sortable>
          </el-table-column>
          <el-table-column align="center" prop="jxssdlpm" label="检修损失排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="jxssdl" label="检修损失" sortable>
          </el-table-column>
          <el-table-column align="center" prop="xnssdlpm" label="性能损失排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="xnssdl" label="性能损失" sortable>
          </el-table-column>
          <el-table-column align="center" prop="xdssdlpm" label="限电损失排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="xdssdl" label="限电损失" sortable>
          </el-table-column>
          <el-table-column align="center" prop="slssdlpm" label="受累损失排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="slssdl" label="受累损失" sortable>
          </el-table-column>
          <el-table-column align="center" prop="gzsslpm" label="故障损失率排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="gzssl" label="故障损失率(%)" sortable>
          </el-table-column>
          <el-table-column align="center" prop="jxsslpm" label="检修损失率排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="jxssl" label="检修损失率(%)" sortable>
          </el-table-column>
          <el-table-column align="center" prop="qflpm" label="弃风率排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="qfl" label="弃风率(%)" sortable>
          </el-table-column>
          <el-table-column align="center" prop="xnsslpm" label="性能损失率排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="xnssl" label="性能损失率(%)" sortable>
          </el-table-column>
          <el-table-column align="center" prop="slsslpm" label="受累损失率排名" sortable>
          </el-table-column>
          <el-table-column align="center" prop="slssl" label="受累损失率(%)" sortable>
          </el-table-column>
        </el-table>
    </div>

    <el-dialog
      title="对标排名分析"
      v-model="dialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="false"
    >
      <dayinfo
        :radarValue="radarValue"
        :title="[windNum, windNum2]"
        :windNum="windNum"
        :windNum2="windNum2"
        :tabs="tabs"
        :analyisDialog="analyisDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { companys } from '@/api/curveAnalyse'
import { getStation, cndb, 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: 'intervalBenchmarking',//场际对标
  components: {
    PieChart,
    BarCharts,
    dayinfo,
  },
  data() {
    return {
      company: '',
      companyOptions: [],
      stationObj: '',
      stationList: [],
      starTime: '',
      endTime: '',
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
      tableData: [],
      detailTable: [],
      chooseList: [],
      lossPower: [],
      barList: [],
      displayDetail: false,
      dialogVisible: false,
      radarValue: [],
      windNum: "dd",
      windNum2: "dd",
      tabs: [],
      analyisDialog: [],
    }
  },
  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: {
    initialization() {
      companys().then(res => {
        if (res.data) {
          this.company = res.data[4].id
          this.companyOptions = res.data
          this.getStation(res.data[4].id)
        }
      })
    },
    getStation(companyids) {
      getStation({
        companyids: companyids
      }).then(res => {
        if (res.data.length) {
          this.stationList = res.data
          this.stationObj = res.data[0].id
          this.gerCndb()
        }
      })
    },
    gerCndb() {
      cndb({
        companys: this.company,
        type: this.tabIndex,
        beginDate: this.starTime,
        endDate: this.endTime,
        wpids: this.stationObj,
        target: '',
        sort: '',
      }).then(res => {
        if (res.data) {
          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.date,
              value: item.zssdl,
            }
            lossPower.push(obj)
            barList[0].date.push(item.date)
            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
        }
      })
    },
    handleStationChange(val) {
      this.stationObj = val
    },
    handleCurrentChange(val) {
      if (val.length > 2) {
        let del_row = val.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      let arr = []
      val.forEach((item, index) => {
        if (index < 2) {
          arr.push(item)
        }
      })
      this.chooseList = arr
    },
    goDetail(row) {
      this.displayDetail = true
      details({
        id: row.id,
        beginDate: this.starTime,
        endDate: this.endTime,
        target: '',
        sort: '',
      }).then(res =>{
        if(res.data){
          this.detailTable = res.data
        }
      })
    },
    goBack(){
      this.displayDetail = false
    },
    dbfx() {
      if(this.chooseList.length === 2){
        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.tabs = [
        {
          name: "发电量",
          windData1: data[0].fdl,
          windData2: data[1].fdl,
        },
        {
          name: "故障损失电量",
          windData1: data[0].gzssdl,
          windData2: data[1].gzssdl,
        },
        {
          name: "检修损失电量",
          windData1: data[0].jxssdl,
          windData2: data[1].jxssdl,
        },
        {
          name: "性能未达标损失电量",
          windData1: data[0].xnssdl,
          windData2: data[1].xnssdl,
        },
        {
          name: "受累损失电量",
          windData1: data[0].slssdl,
          windData2: data[1].slssdl,
        },
        {
          name: "风能利用率",
          windData1: data[0].fnlyl,
          windData2: data[1].fnlyl,
        },
        {
          name: "故障损失率",
          windData1: data[0].gzssl,
          windData2: data[1].gzssl,
        },
        {
          name: "检修损失率",
          windData1: data[0].jxssl,
          windData2: data[1].jxssl,
        },
        {
          name: "弃风率",
          windData1: data[0].qfl,
          windData2: data[1].qfl,
        },
        {
          name: "性能损失率",
          windData1: data[0].xnssl,
          windData2: data[1].xnssl,
        },
        {
          name: "受累损失率",
          windData1: data[0].slssl,
          windData2: data[1].slssl,
        },
      ];

      this.radarValue = [
        {
          indicator: [
            "风能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃风率排名",
            "性能损失率排名",
            "受累损失率排名",
          ],
          data: [
            {
              value: [
                data[0].fnlylpm,
                data[0].gzsslpm,
                data[0].jxsslpm,
                data[0].qflpm,
                data[0].xnsslpm,
                data[0].slsslpm,
              ],
              name: data[0].name
            },
          ],
        },
        {
          indicator: [
          "风能利用率排名",
            "故障损失率排名",
            "检修损失率排名",
            "弃风率排名",
            "性能损失率排名",
            "受累损失率排名",
          ],
          data: [
          {
              value: [
                data[1].fnlylpm,
                data[1].gzsslpm,
                data[1].jxsslpm,
                data[1].qflpm,
                data[1].xnsslpm,
                data[1].slsslpm,
              ],
              name: data[1].name
            },
          ],
        },
      ];
      var analyis = [],
        gzssdl = [],
        jxssdl = [],
        xnssdl = [],
        xdssdl = [],
        slssdl = [];
      data.forEach((item, index) => {
        gzssdl.push({
          text: item.date || item.name,
          value: item.gzssdl,
        });
        jxssdl.push({
          text: item.date || item.name,
          value: item.jxssdl,
        });
        xnssdl.push({
          text: item.date || item.name,
          value: item.xnssdl,
        });
        xdssdl.push({
          text: item.date || item.name,
          value: item.xdssdl,
        });
        slssdl.push({
          text: item.date || 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;
    },
  },
}
</script>

<style lang="less" scoped>
.parcel-box {
  padding: 0 15px;
}

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

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

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

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

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

  .buttons {
    background-color: rgba(67, 81, 107, .3);
    border: 1px solid #3B4C6C;
    color: #B3B3B3;
    font-size: 14px;

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

.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/img/title_left_bg.png");

    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      margin-left: 25px;
    }
  }

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

.table {
  width: 100%;
}

.echarts {
  width: 100%;
  height: 26vh;
  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;

  &.left {
    left: 0;
  }

  &.right {
    right: 0;
  }

  &.top {
    top: -1px;
  }

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

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