SIS_Web/src/views/PropertyBenchnark/PropertBenchmark_particulars.vue

<template>
  <div class="box">
    <div class="searchBar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:1%">
        <el-row :gutter="1">
          <!-- <el-form-item label="风场一">
              <el-select v-model="value"  multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item> -->
          <el-form-item label="风场一">
            <el-select
              v-model="fc"
              clearable
              placeholder="请选择"
              @change="query_xml()"
            >
              <el-option
                v-for="item in wpIdslist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="风机一">
            <el-select v-model="pj" multiple clearable placeholder="请选择">
              <el-option
                v-for="item in projectlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="风场二">
              <el-select v-model="value2" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item> -->

          <el-form-item label="风场二">
            <el-select
              v-model="fc2"
              clearable
              placeholder="请选择"
              @change="query_xml2()"
            >
              <el-option
                v-for="item in wpIdslist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="风机二">
            <el-select v-model="pj2" multiple clearable placeholder="请选择">
              <el-option
                v-for="item in projectlist2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择时间：">
            <el-date-picker
              v-model="timedate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryApData" :plain="true"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querycheck"
              >对标分析</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goReturn">返回</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-card>
        <el-table
          v-loading="loading"
          :data="fdcLineData"
          :row-style="{ height: '10px' }"
          :cell-style="{ textAlign: 'center'}"
          :header-cell-style="headStyle"
          @selection-change="handleSelectionChange"
          @sort-change="changeTableSort"
          style="widht: 100%"
          max-height="399px"
        >
          <el-table-column label="场际对标列表一">
            <el-table-column fixed type="index" width="45"> </el-table-column>
            <el-table-column type="selection" width="45"> </el-table-column>
            <el-table-column prop="wtName" label="风机名称" width="110">
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="ordernum"
              label="排名"
              width="80"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="scadafdlnum"
              label="发电量排名"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="scadafdl"
              :formatter="filter_fdl"
              label="发电量"
              width="120"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzssnum"
              label="故障排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzss"
              label="故障损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.gzss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="whssnum"
              label="检修排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="whss"
              label="检修损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.whss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qfssnum"
              label="性能排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qfss"
              label="性能损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.qfss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xdssnum"
              label="限电排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xdss"
              label="限电损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.xdss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slssnum"
              label="受累排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slss"
              label="受累损失"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="fnlyl"
              label="风能利用率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzsslnum"
              label="故障损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzssl"
              label="故障损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="jxsslnum"
              label="检修损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="jxssl"
              label="检修损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qflnum"
              label="弃风率排名"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qfl"
              label="弃风率"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xnsslnum"
              label="性能损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xnssl"
              label="性能损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slsslnum"
              label="受累损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slssl"
              label="受累损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="fwjsl"
              label="复位及时率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xqjsl"
              label="消缺及时率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="ztzhjsl"
              label="状态转换率"
              width="130"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card>
        <el-table
          v-loading="loading2"
          :data="fdcLineData2"
          :row-style="{ height: '10px' }"
          :cell-style="{ textAlign: 'center'}"
          :header-cell-style="headStyle"
          @selection-change="handleSelectionChange2"
          @sort-change="changeTableSort"
          style="widht: 100%"
          max-height="399px"
          v-if="tb2"
        >
          <el-table-column label="场际对标列表二">
            <el-table-column fixed type="index" width="45"> </el-table-column>
            <el-table-column type="selection" width="45"> </el-table-column>
            <el-table-column prop="wtName" label="风机名称" width="110">
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="ordernum"
              label="排名"
              width="80"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="scadafdlnum"
              label="发电量排名"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="scadafdl"
              :formatter="filter_fdl"
              label="发电量"
              width="120"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzssnum"
              label="故障排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzss"
              label="故障损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.gzss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="whssnum"
              label="检修排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="whss"
              label="检修损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.whss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qfssnum"
              label="性能排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qfss"
              label="性能损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.qfss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xdssnum"
              label="限电排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xdss"
              label="限电损失"
              width="110"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.xdss | rounding }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slssnum"
              label="受累排名"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slss"
              label="受累损失"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="fnlyl"
              label="风能利用率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzsslnum"
              label="故障损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="gzssl"
              label="故障损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="jxsslnum"
              label="检修损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="jxssl"
              label="检修损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qflnum"
              label="弃风率排名"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="qfl"
              label="弃风率"
              width="110"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xnsslnum"
              label="性能损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xnssl"
              label="性能损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slsslnum"
              label="受累损失率排名"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="slssl"
              label="受累损失率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="fwjsl"
              label="复位及时率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="xqjsl"
              label="消缺及时率"
              width="130"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="ztzhjsl"
              label="状态转换率"
              width="130"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        class="el-dialog_body"
        width="60%"
        title="对标信息分析"
        :visible.sync="dialogTableVisible"
        append-to-body
      >
        <div class="margin">
          <div class="dialogLeftData">
            <div id="leiDaTu3" class="echart"></div>
            <div id="leiDaTu4" class="echart"></div>
          </div>
          <div class="dialogRightData">
            <el-table
              :data="getTableData"
              height="618"
              :row-style="{ height: '10px' }"
              border
              :header-cell-style="headStyle"
              :cell-style="{ textAlign: 'center', padding: '7px' }"
              style="width: 100%; font-size: 10px"
            >
              <el-table-column prop="index" label="指标"> </el-table-column>
              <el-table-column prop="data1" :label="pjName1"> </el-table-column>
              <el-table-column prop="data2" :label="pjName2"> </el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import formateDate from "@/utils/date";
export default {
  data() {
    return {
      tb2: false,
      loading:true,
      loading2:true,
      tableData: [],
      options: [],
      fc: "",
      fc2: "",
      pj: "",
      pj2: "",
      timedate: [],
      multipleSelection: [],
      multipleSelection1: [],
      multipleSelection2: [],
      orderByColumn: "",
      isAsc: "asc",
      fdcLineData: "",
      fdcLineData2: "",
      currentPage2: 1,
      pagesize: 10,
      wpId: "",
      pjId: "",
      beginDate: "",
      endDate: "",
      dialogTableVisible: false,
      sortInOrder: [],
      sortInOrderTop: [],
      pjName1: "",
      pjName2: "",
      sortInOrde2: [],
      getTableData: [],
      fdcND: [],
      fdcND1: "",
      fdcND2: "",
      wpIdslist: {
        name: "",
        id: "",
      },
      projectlist: {
        name: "",
        id: "",
      },
      projectlist2: {
        name: "",
        id: "",
      },
    };
  },
  filters: {
    rounding(fc) {
      return fc.toFixed(2);
    },
  },
  created() {
    this.timedate[0] = this.$route.query.beginDate;
    this.timedate[1] = this.$route.query.endDate;
    this.fc = this.$route.query.wpId;
    this.query_xml();
    this.query_wpid();
    this.YardTableData();
  },
  methods: {
    queryApData() {
      this.YardTableData();
      if (this.fc2 != null || this.fc2 != undefined) {
        this.tb2 = true;
        if (this.timedate == "") {
          this.beginDate = this.$route.query.beginDate;
          this.endDate = this.$route.query.endDate;
        } else {
          this.beginDate = this.timedate[0];
          this.endDate = this.timedate[1];
        }
        var guilty = new URLSearchParams();
        guilty.append("pageNum", this.currentPage2);
        guilty.append("pageSize", this.pagesize);
        guilty.append("orderByColumn", this.orderByColumn);
        guilty.append("isAsc", this.isAsc);
        guilty.append("wpId", this.fc2);
        guilty.append("wtId", this.pj2);
        guilty.append("beginDate", this.beginDate);
        guilty.append("endDate", this.endDate);
        this.$http.post("/contrast/benchmarkWtList", guilty).then((res) => {
          this.fdcLineData2 = res.data.data;
          this.loading2 = false;
        });
      }
    },
    querycheck(){
      if(this.multipleSelection1.length + this.multipleSelection2.length ==2){
        this.queryApDataMx();
      }else{
        this.$message({
          message:"请选择两个项目！",
          type:'error'
        });
        return
      }
    },
    queryApDataMx() {
      this.dialogTableVisible = true;
      if (
        this.multipleSelection1.length + this.multipleSelection2.length ==
        2
      ) {
        this.multipleSelection = this.multipleSelection1.concat(
          this.multipleSelection2
        );
      } else {
        this.$message.error("请选两个风场！");
        return;
      }
      if (this.multipleSelection.length == 2) {
        this.pjName1 = this.multipleSelection[0].wtName;
        this.pjName2 = this.multipleSelection[1].wtName;
        this.fdcND1 =
          this.multipleSelection[0].wtName +
          "" +
          formateDate(new Date(this.multipleSelection[0].recordDate) / 1000);
        this.fdcND2 =
          this.multipleSelection[1].wtName +
          "" +
          formateDate(new Date(this.multipleSelection[1].recordDate) / 1000);
        this.fdcND.push(this.fdcND1, this.fdcND2);
        this.sortInOrder.push(
          this.multipleSelection[0].fnlyl,
          this.multipleSelection[0].xqjsl,
          this.multipleSelection[0].ztzhjsl,
          this.multipleSelection[0].fwjsl,
          this.multipleSelection[0].slssl,
          this.multipleSelection[0].xnssl,
          this.multipleSelection[0].qfl,
          this.multipleSelection[0].jxssl,
          this.multipleSelection[0].gzssl
        );
        this.sortInOrderTop.push(
          this.multipleSelection[1].fnlyl,
          this.multipleSelection[1].xqjsl,
          this.multipleSelection[1].ztzhjsl,
          this.multipleSelection[1].fwjsl,
          this.multipleSelection[1].slssl,
          this.multipleSelection[1].xnssl,
          this.multipleSelection[1].qfl,
          this.multipleSelection[1].jxssl,
          this.multipleSelection[1].gzssl
        );
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.sortInOrde2.push({
            product: this.multipleSelection[i].wtName+" "+formateDate(this.multipleSelection[i].recordDate/1000),
            "限电损失电量单位:万KWh": this.multipleSelection[i].xdss,
            "故障损失电量单位:万KWh": this.multipleSelection[i].gzss,
            "检修损失电量单位:万KWh": this.multipleSelection[i].jxssl,
            "性能损失电量单位:万KWh": this.multipleSelection[i].xnssl,
            "受累损失电量单位:万KWh": this.multipleSelection[i].slss,
          });
        }
        this.getTableData.push({
          index: "发电量",
          data1: this.multipleSelection[0].scadafdl,
          data2: this.multipleSelection[1].scadafdl,
        });
        this.getTableData.push({
          index: "故障损失电量",
          data1: this.multipleSelection[0].gzss,
          data2: this.multipleSelection[1].gzss,
        });
        this.getTableData.push({
          index: "检修损失电量",
          data1: this.multipleSelection[0].jxssl,
          data2: this.multipleSelection[1].jxssl,
        });
        this.getTableData.push({
          index: "性能未达标损失电量",
          data1: this.multipleSelection[0].xnsslfraction,
          data2: this.multipleSelection[1].xnsslfraction,
        });
        this.getTableData.push({
          index: "受累损失电量",
          data1: this.multipleSelection[0].slss,
          data2: this.multipleSelection[1].slss,
        });
        this.getTableData.push({
          index: "风能利用率",
          data1: this.multipleSelection[0].fnlyl,
          data2: this.multipleSelection[1].fnlyl,
        });
        this.getTableData.push({
          index: "故障损失率",
          data1: this.multipleSelection[0].gzssl,
          data2: this.multipleSelection[1].gzssl,
        });
        this.getTableData.push({
          index: "检修损失率",
          data1: this.multipleSelection[0].jxssl,
          data2: this.multipleSelection[1].jxssl,
        });
        this.getTableData.push({
          index: "弃风率",
          data1: this.multipleSelection[0].qfl,
          data2: this.multipleSelection[1].qfl,
        });
        this.getTableData.push({
          index: "性能损失率",
          data1: this.multipleSelection[0].xnssl,
          data2: this.multipleSelection[1].xnssl,
        });
        this.getTableData.push({
          index: "受累损失率",
          data1: this.multipleSelection[0].slssl,
          data2: this.multipleSelection[1].slssl,
        });
        this.getTableData.push({
          index: "复位及时率",
          data1: this.multipleSelection[0].fwjsl,
          data2: this.multipleSelection[1].fwjsl,
        });
        this.getTableData.push({
          index: "消缺及时率",
          data1: this.multipleSelection[0].xqjsl,
          data2: this.multipleSelection[1].xqjsl,
        });
        this.getTableData.push({
          index: "状态转换率",
          data1: this.multipleSelection[0].ztzhjsl,
          data2: this.multipleSelection[1].ztzhjsl,
        });
      }
      this.$nextTick(function () {
        this.drawPie("leiDaTu3");
      });
      this.$nextTick(function () {
        this.drawPie2("leiDaTu4");
      });
    },
    filter_fdl(cellValue) {
      return parseFloat(cellValue.scadafdl).toFixed(2);
    },
    YardTableData() {
      this.$http.get("/powercompare/windfarmAjax").then((res) => {
        this.options = res.data.data;
      });
      this.wpId = this.$route.query.wpId;
      if (this.timedate == "") {
        this.beginDate = this.$route.query.beginDate;
        this.endDate = this.$route.query.endDate;
      } else {
        this.beginDate = this.timedate[0];
        this.endDate = this.timedate[1];
      }
      var guilty = new URLSearchParams();
      guilty.append("pageNum", this.currentPage2);
      guilty.append("pageSize", this.pagesize);
      guilty.append("orderByColumn", this.orderByColumn);
      guilty.append("isAsc", this.isAsc);
      if (this.fc == "") {
        guilty.append("wpId", this.wpId);
      } else {
        guilty.append("wpId", this.fc);
      }
      if (this.pj == "") {
        guilty.append("wtId", this.pjId);
      } else {
        guilty.append("wtId", this.pj);
      }
      guilty.append("beginDate", this.beginDate);
      guilty.append("endDate", this.endDate);
      this.$http.post("/contrast/benchmarkWtList", guilty).then((res) => {
        this.fdcLineData = res.data.data;
        this.loading = false;
      });
    },
    query_xml() {
      this.pj = "";
      this.xl = "";
      this.pj2 = "";
      this.xl2 = "";
      this.$http
        .get("powercompare/windturbineAjax?wpId=" + this.fc)
        .then((res) => {
          this.projectlist = res.data.data;
        });
    },
    query_xml2() {
      this.pj = "";
      this.xl = "";
      this.$http
        .get("powercompare/windturbineAjax?wpId=" + this.fc2)
        .then((res) => {
          this.projectlist2 = res.data.data;
        });
    },
    query_wpid() {
      this.$http.get("powercompare/windfarmAjax?").then((res) => {
        this.wpIdslist = res.data.data;
      });
    },
    headStyle() {
      return "text-align:left";
    },
    handleSelectionChange(val) {
      this.sortInOrder = [];
      this.sortInOrderTop = [];
      this.getTableData = [];
      this.sortInOrde2 = [];
      this.multipleSelection1 = [];
      this.multipleSelection1 = val;
    },
    handleSelectionChange2(val) {
      this.sortInOrder = [];
      this.sortInOrderTop = [];
      this.getTableData = [];
      this.sortInOrde2 = [];
      this.multipleSelection2 = [];
      this.multipleSelection2 = val;
    },
    changeTableSort(column) {
      this.orderByColumn = column.prop;
      if (column.order == "descending") {
        this.isAsc = "desc";
      } else if (column.order == "ascending") {
        this.isAsc = "asc";
      }
      this.YardTableData();
    },
    filter_date(cellValue) {
      let date = new Date(cellValue.recordDate);
      return formateDate(date / 1000);
    },
    drawPie() {
      var charts;
      if (charts != null && charts != "" && charts != undefined) {
        charts.dispose();
      }
      charts = this.$echarts.init(document.getElementById("leiDaTu3"));
      let option = {
        title: {
          // text: '对标排名分析',
          left: "center",
        },
        tooltip: {},
        // legend: {
        //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
        //     left: 'right'
        // },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "风能利用率", max: 150 },
            { name: "消缺及时率", max: 150 },
            { name: "状态转换率", max: 150 },
            { name: "复位及时率", max: 150 },
            { name: "受累损失率", max: 150 },
            { name: "性能损失率", max: 150 },
            { name: "弃风率", max: 150 },
            { name: "检修损失率", max: 150 },
            { name: "故障损失率", max: 150 },
          ],
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: this.sortInOrder,
                name: this.pjName1,
              },
              {
                value: this.sortInOrderTop,
                name: this.pjName2,
              },
            ],
          },
        ],
      };
      charts.clear();
      charts.setOption(option);
    },
    drawPie2() {
      var charts2;
      if (charts2 != null && charts2 != "" && charts2 != undefined) {
        charts2.dispose();
      }
      charts2 = this.$echarts.init(document.getElementById("leiDaTu4"));
      let option2 = {
        legend: {
          orient: "vertical",
          left: "right",
        },
        tooltip: {},
        dataset: {
          dimensions: [
            "product",
            "限电损失电量单位:万KWh",
            "故障损失电量单位:万KWh",
            "检修损失电量单位:万KWh",
            "性能损失电量单位:万KWh",
            "受累损失电量单位:万KWh",
          ],
          source: this.sortInOrde2,
        },
        xAxis: {
          type: "category",
          date: this.fdcND,
          axisPointer: {
            type: "shadow",
          },
        },
        yAxis: { type: "category" },
        series: [
          {
            // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#D201D8",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#FD0100",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#FF7B16",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#8085E9",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#A6A6A6",
              },
            },
          },
        ],
      };
      charts2.clear();
      charts2.setOption(option2);
    },
    goReturn() {
      this.$router.push("/benchmark_property");
    },
    toExcel() {},
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.searchBar {
  margin-top: 1%;
}
#leiDaTu3 {
  margin-left: 5%;
  height: 300px;
  width: 100%;
  float: left;
}
#leiDaTu4 {
  margin: 15%;
  height: 300px;
  width: 450px;
  float: left;
}
.margin {
  width: 100%;
  height: 618px;
}
.dialogLeftData {
  width: 50%;
  height: 650px;
  text-align: center;
  float: left;
}
/deep/::-webkit-scrollbar {
  z-index: 99999999;
  width: 6px;
  height: 13px !important;
  background-color: #f5f5f5;
}
.dialogRightData {
  width: 50%;
  height: 650px;
  text-align: center;
  float: left;
}
</style>