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

<template>
  <div class="parcel-box">
    <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"
            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="date-wrapper">
          <div class="date-item-wrapper">
            开始日期
            <div class="date-item-date">
              <el-date-picker
                v-model="starTime"
                :disabled="displayDetail"
                type="date"
                size="mini"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="date-item-wrapper">
            结束日期
            <div class="date-item-date">
              <el-date-picker
                :disabled="displayDetail"
                v-model="endTime"
                type="date"
                size="mini"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>
      <div class="but">
        <el-button
          round
          size="mini"
          :disabled="displayDetail"
          class="buttons"
          @click="gerCjdb"
          >搜索</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 class="rightContent"></div>
      </div>
      <div class="economicTable" v-if="!displayDetail">
        <el-table
          :data="tableData"
          ref="multipleTable"
          size="mini"
          height="100%"
          :cell-style="{ padding: '6px' }"
          :row-style="{ height: '0' }"
          :header-cell-style="{ 'text-align': 'center' }"
          stripe
          @selection-change="handleCurrentChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column
            align="left"
            prop="name"
            label="名称"
            width="80"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="zhpm"
            label="综合排名"
            width="73"
            sortable
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="fdlpm"
            label="发电量排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="fdl"
            label="发电量"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="gzssdlpm"
            label="故障损失排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="gzssdl"
            label="故障损失"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="jxssdlpm"
            label="检修损失排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="jxssdl"
            label="检修损失"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xnssdlpm"
            label="性能损失排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xnssdl"
            label="性能损失"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xdssdlpm"
            label="限电损失排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xdssdl"
            label="限电损失"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="slssdlpm"
            label="受累损失排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="slssdl"
            label="受累损失"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="fnlylpm"
            :label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="fnlyl"
            :label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="gzsslpm"
            label="故障损失率排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="gzssl"
            label="故障损失率(%)"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="jxsslpm"
            label="检修损失率排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="jxssl"
            label="检修损失率(%)"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="qflpm"
            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="qfl"
            :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xnsslpm"
            label="性能损失率排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xnssl"
            label="性能损失率(%)"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="slsslpm"
            label="受累损失率排名"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="slssl"
            label="受累损失率(%)"
            sortable
            width="67"
          >
          </el-table-column>
          <el-table-column align="center" prop="" label="操作" width="63">
            <template v-slot="scope">
              <span
                @click="goDetail(scope.row)"
                style="cursor: pointer; color: #1c99ff"
                >详情</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="!displayDetail" 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="calc(100% - 49px)"
          :showLable="false"
        ></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"
          :top="25"
          width="100%"
          height="calc(100% - 49px)"
          :showLegend="true"
          :xdate="false"
          :colorIndex="true"
        ></BarCharts>
      </div>
    </div>
    <div
      v-if="displayDetail"
      style="height: calc(100% - 80px)"
      class="economicTable details"
    >
      <el-table
        :data="detailTable"
        ref="multipleTable"
        size="mini"
        height="78vh"
        :cell-style="{ padding: '6px' }"
        :row-style="{ height: '4' }"
        stripe
        @selection-change="handleCurrentChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          :label="tabIndex == -2 ? '逆变器名称' : '风机名称'"
          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="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
          sortable
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="qfl"
          :label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
          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
      class="dialogs"
      width="90%"
      top="40px"
      v-model="dialogVisible"
      :show-close="true"
      destroy-on-close
    >
      <template #title>
        <div class="dialog-title">
          <img
            class="dialog-title-img"
            src="@assets/img/images/dialog-title.png"
          />
          <div class="title">对标排名分析</div>
        </div>
      </template>
      <div class="dialog-body">
        <img class="dialog-img" src="@assets/img/images/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 {
  GetOrganization,
  GetStationByCompany,
  GetProjectList,
  GetLineList,
  GetSquareList,
} from "@/api/headerNav.js";
import { getStation, cjdb, 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: -2,
      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: "55vh",
    };
  },
  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 = "55vh";
    }
    window.onresize = () => {
      return (() => {
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    tabClick(val) {
      this.tabIndex = val;
      this.stationObj = [];
      this.initialization();
    },
    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) => {
        if (res.data.length) {
          this.stationList = res.data;
          //   this.stationObj = [res.data[0].id];
        } else {
          this.stationList = [];
        }
        this.gerCjdb();
      });
    },
    gerCjdb() {
      cjdb({
        companys: this.company,
        type: this.tabIndex,
        beginDate: this.starTime,
        endDate: this.endTime,
        wpids: this.stationObj.join(","),
        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.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;
        }
      });
    },
    handleStationChange(val) {
      this.stationObj = val;
      this.gerCjdb();
    },
    handleCompanyChange(val) {
      this.company = val;
      this.getStation(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) {
      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 <= 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 = "55vh";
      }
    },
  },
};
</script>

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

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

  .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;
          .el-input {
            width: 155px;
          }
          .el-input .el-input__inner {
            width: 150px;
            font-size: 13px;
            color: #b3b3b3;
          }
        }
      }
    }
  }
  .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;
    }
  }
}
.bodys {
  width: 100%;
  height: calc(100% - 260px - 50px - 30px);
  background-color: rgba(0, 0, 0, 0.45);
  padding: 5px;
  margin-bottom: 19px;
  border-radius: 5px;
}
.line {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 5px;

  .leftContent {
    width: 242px;
    height: 41px;
    display: flex;
    align-items: center;
    background: url("../../../../../assets/imgs/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/imgs/title_right_bg.png");
  }
}

.economicTable {
  width: 100%;
  height: calc(100% - 46px);
  //   &.details {
  //     padding: 5px;
  //     background-color: rgba(0, 0, 0, 0.45);
  //     border-radius: 5px;
  //   }
}

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