SIS_Web/src/views/Performance/NewPerformanceList.vue

<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="24">
          <el-card style="height: 30px">
            <div class="grid-content bg-purple-dark">
              <span>电量绩效榜</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <el-card>
        <el-form :inline="true"  class="demo-form-inline">
          <el-row :gutter="1">
            <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" clearable placeholder="请选择" @change="query_xl()">
                <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="xl" clearable placeholder="请选择">
                <el-option
                  v-for="item in linelist"
                  :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="beginDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker
                v-model="endDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="queryPowerAll" :plain="true"
                >查询</el-button
              >
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="queryApDataMx">返回</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="toExcel">导出</el-button>
            </el-form-item>
          </el-row>
        </el-form>

        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          style="height: 100%; width: 100%"
        >
          <el-tab-pane label="风场" name="first" id="fc">
            <el-row
              style="width: 100%; display: flex; justify-content: space-between"
            >
              <el-card
                shadow="always"
                ref="fc_zzt_card"
                :style="styleObject_fc"
                style="width: 40%; display: table-cell; vertical-align: middle"
              >
                <div
                  id="histogram_fc"
                  style="width: 100%; height: 600px; margin: auto"
                ></div>
              </el-card>

              <el-card
                shadow="always"
                :style="styleObject_fc"
                style="width: 58%"
                id="moban"
              >
                <el-table id="fc_table" :data="fc_date" style="width: 100%;font-size:1px" :max-height="tableHeight">
                  <el-table-column label="项目列表">
                    <el-table-column fixed type="index" width="41">
                    </el-table-column>
                    <el-table-column prop="generation" sortable label="名称" width="75">
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_llfdl"
                      sortable
                      prop="llfdl"
                      label="理论发电量"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_scadafdl"
                      sortable
                      prop="scadafdl"
                      label="发电量"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column :formatter="filter_speed" sortable prop="speed" label="风速" width="70">
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_gzssdl"
                      sortable
                      prop="gzssdl"
                      label="故障损失"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_gzslssdl"
                      sortable
                      prop="gzslssdl"
                      label="故障受累损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                     :formatter="filter_jxssdl"
                     sortable
                      prop="jxssdl"
                      label="检修损失"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_jxslssdl"
                      sortable
                      prop="jxslssdl"
                      label="检修受累损失"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_dwslssdl"
                      sortable
                      prop="dwslssdl"
                      label="电网受累损失"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                     :formatter="filter_hjslssdl"
                     sortable
                      prop="hjslssdl"
                      label="环境受累损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_xdjclssdl"
                      sortable
                      prop="xdjclssdl"
                      label="限电降出力损失"
                      width="110"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_xdtjssdl"
                      sortable
                      prop="xdtjssdl"
                      label="限电停机损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_dfssdl"
                      sortable
                      prop="dfssdl"
                      label="待风损失"
                      width="90"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_sdtjssdl"
                      sortable
                      prop="sdtjssdl"
                      label="手动停机损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_zcfdssdl"
                      sortable
                      prop="zcfdssdl"
                      label="正常发电损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_qxjclssdl"
                      sortable
                      prop="qxjclssdl"
                      label="缺陷降出力"
                      width="90"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_fnlyl"
                      sortable
                      prop="fnlyl"
                      label="风能利用率"
                      width="90"
                    >
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="项目" name="second" id="xm">
            <el-row
              style="width: 100%; display: flex; justify-content: space-between"
            >
              <el-card
                shadow="always"
                :style="styleObject_pj"
                style="width: 40%; display: table-cell; vertical-align: middle"
              >
                <div
                  id="histogram_xm"
                  style="width: 100%; height: 800px; margin: auto"
                ></div>
              </el-card>

              <el-card
                shadow="always"
                :style="styleObject_pj"
                style="width: 58%"
                id="moban"
              >
                <el-table
                  id="pj_table"
                  :data="pj_date"
                  style="width: 100%;font-size:1px;margin-bottom:10px"
                  :max-height="tableHeight"
                >
                  <el-table-column label="项目列表">
                       <el-table-column fixed type="index" width="41">
                    </el-table-column>
                    <el-table-column prop="generation" sortable label="名称" width="75">
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_llfdl"
                      sortable
                      prop="llfdl"
                      label="理论发电量"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_scadafdl"
                      sortable
                      prop="scadafdl"
                      label="发电量"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column :formatter="filter_speed" sortable prop="speed" label="风速" width="70">
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_gzssdl"
                      sortable
                      prop="gzssdl"
                      label="故障损失"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_gzslssdl"
                      sortable
                      prop="gzslssdl"
                      label="故障受累损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                     :formatter="filter_jxssdl"
                     sortable
                      prop="jxssdl"
                      label="检修损失"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_jxslssdl"
                      sortable
                      prop="jxslssdl"
                      label="检修受累损失"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_dwslssdl"
                      sortable
                      prop="dwslssdl"
                      label="电网受累损失"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                     :formatter="filter_hjslssdl"
                     sortable
                      prop="hjslssdl"
                      label="环境受累损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_xdjclssdl"
                      sortable
                      prop="xdjclssdl"
                      label="限电降出力损失"
                      width="110"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_xdtjssdl"
                      sortable
                      prop="xdtjssdl"
                      label="限电停机损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_dfssdl"
                      sortable
                      prop="dfssdl"
                      label="待风损失"
                      width="90"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_sdtjssdl"
                      sortable
                      prop="sdtjssdl"
                      label="手动停机损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_zcfdssdl"
                      sortable
                      prop="zcfdssdl"
                      label="正常发电损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_qxjclssdl"
                      sortable
                      prop="qxjclssdl"
                      label="缺陷降出力"
                      width="90"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_fnlyl"
                      sortable
                      prop="fnlyl"
                      label="风能利用率"
                      width="90"
                    >
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="集电线路" name="jdxl" id="jdxl">
            <el-row
              style="width: 100%; display: flex; justify-content: space-between"
            >
              <el-card
                shadow="always"
                :style="styleObject_xl"
                style="width: 40%; display: table-cell; vertical-align: middle"
                
              >
                <div
                  style="width: 100%; margin: auto;"
                  id="histogram_jdxl"
                >
                </div>
              </el-card>

              <el-card
                :style="styleObject_xl"
                shadow="always"
                style="width: 58%"
                id="moban"
              >
                <el-table
                  id="xl_table"
                  :data="xl_date"
                  style="width: 100%;font-size:1px;margin-bottom:10px"
                  :max-height="tableHeight"
                  
                >
                  <el-table-column label="项目列表">
                       <el-table-column fixed type="index" width="41">
                    </el-table-column>
                    <el-table-column prop="generation" sortable label="名称" width="75">
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_llfdl"
                      sortable
                      prop="llfdl"
                      label="理论发电量"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_scadafdl"
                      sortable
                      prop="scadafdl"
                      label="发电量"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column :formatter="filter_speed" sortable prop="speed" label="风速" width="70">
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_gzssdl"
                      sortable
                      prop="gzssdl"
                      label="故障损失"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_gzslssdl"
                      sortable
                      prop="gzslssdl"
                      label="故障受累损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                     :formatter="filter_jxssdl"
                     sortable
                      prop="jxssdl"
                      label="检修损失"
                      width="90"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_jxslssdl"
                      sortable
                      prop="jxslssdl"
                      label="检修受累损失"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      :formatter="filter_dwslssdl"
                      sortable
                      prop="dwslssdl"
                      label="电网受累损失"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                     :formatter="filter_hjslssdl"
                     sortable
                      prop="hjslssdl"
                      label="环境受累损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_xdjclssdl"
                      sortable
                      prop="xdjclssdl"
                      label="限电降出力损失"
                      width="110"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_xdtjssdl"
                      sortable
                      prop="xdtjssdl"
                      label="限电停机损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_dfssdl"
                      sortable
                      prop="dfssdl"
                      label="待风损失"
                      width="90"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_sdtjssdl"
                      sortable
                      prop="sdtjssdl"
                      label="手动停机损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_zcfdssdl"
                      sortable
                      prop="zcfdssdl"
                      label="正常发电损失"
                      width="100"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_qxjclssdl"
                      sortable
                      prop="qxjclssdl"
                      label="缺陷降出力"
                      width="90"
                    >
                    </el-table-column>

                    <el-table-column
                      :formatter="filter_fnlyl"
                      sortable
                      prop="fnlyl"
                      label="风能利用率"
                      width="90"
                    >
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import * as echarts from "echarts";
import excelHelper from "@/utils/excelHelper";
export default {
  data() {
    return {
      len:10,
      fc:"",
      pj:"",
      xl:"",
      autoHeight_fc: 400,
      autoHeight_pj: 800,
      autoHeight_xl: 1200,
      styleObject_fc: {
        height: '460px'
      },
      styleObject_pj: {
        height: '860px'
      },
      styleObject_xl: {
        height: '1220px'
      },
      wpIdslist: {
        name:"",
        id:"",
      },
      projectlist:{
        name:"",
        id:"",
      },
      linelist:{
        name:"",
        id:"",
      },
      powerAjaxDetailAll: {
        generation: [],
        sacadafdl: [],
        jxssdl: [],
        jxslssdl: [],
        gzssdl: [],
        gzslssdl: [],
        xdjclssdl: [],
        xdtjssdl: [],
        dwslssdl: [],
        hjslssdl: [],
        dfssdl: [],
        sdtjssdl: [],
        zcfdssdl: [],
        qxjclssdl: [],
        llfdl: [],
      },
      fc_date: [],
      pj_date: [],
      xl_date: [],
      beginDate: "2021-01-01",
      endDate: "2021-01-02",
      activeName: "first",
      tableid: "fc",
      celname: [],
      histogram_fc: {},
      histogram_xm: {},
      histogram_jdxl: {},
      table_fc: {},
      table_xm: {},
      table_jdxl: {},
      queryAll_querybutton: {},
      datelength: 0,
    };
  },
  methods: {
    onSubmit() {
    },
    query_wpid() {
      this.$http.get("powercompare/windfarmAjax?").then((res) => {
        this.wpIdslist = res.data.data;
      });
    },
    query_xml(){
      this.pj = "";
      this.xl = "";
      this.$http.get("powercompare/projectAjax?wpIds=" + this.fc).then((res) => {
        this.projectlist = res.data.data;
      });
    },
    query_xl(){
      this.xl = "";
      this.$http.get("powercompare/lineAjax?pjIds=" + this.pj).then((res) => {
        this.linelist = res.data.data;
      });
    },
    filter_llfdl(cellValue){
             return parseFloat(cellValue.llfdl).toFixed(2);
    },
    filter_scadafdl(cellValue){
             return parseFloat(cellValue.scadafdl).toFixed(2);
    },
    filter_speed(cellValue){
             return parseFloat(cellValue.speed).toFixed(2);
    },
    filter_gzssdl(cellValue){
             return parseFloat(cellValue.gzssdl).toFixed(2);
    },
    filter_gzslssdl(cellValue){
             return parseFloat(cellValue.gzslssdl).toFixed(2);
    },
    filter_jxssdl(cellValue){
             return parseFloat(cellValue.jxssdl).toFixed(2);
    },
    filter_jxslssdl(cellValue){
             return parseFloat(cellValue.jxslssdl).toFixed(2);
    },
    filter_dwslssdl(cellValue){
             return parseFloat(cellValue.dwslssdl).toFixed(2);
    },
    filter_hjslssdl(cellValue){
             return parseFloat(cellValue.hjslssdl).toFixed(2);
    },
    filter_xdjclssdl(cellValue){
             return parseFloat(cellValue.xdjclssdl).toFixed(2);
    },
    filter_xdtjssdl(cellValue){
             return parseFloat(cellValue.xdtjssdl).toFixed(2);
    },
    filter_dfssdl(cellValue){
             return parseFloat(cellValue.dfssdl).toFixed(2);
    },
    filter_sdtjssdl(cellValue){
             return parseFloat(cellValue.sdtjssdl).toFixed(2);
    },
    filter_zcfdssdl(cellValue){
             return parseFloat(cellValue.zcfdssdl).toFixed(2);
    },
    filter_qxjclssdl(cellValue){
             return parseFloat(cellValue.qxjclssdl).toFixed(2);
    },
    filter_fnlyl(cellValue){
             return parseFloat(cellValue.fnlyl).toFixed(2);
    },
    handleClick(tab) {
      if (tab.name === "first") {
        this.tableid = "fc";
        this.query();
      } else if (tab.name === "second") {
        this.tableid = "pj";
        this.query();
      } else if (tab.name === "jdxl") {
        this.tableid = "xl";
        this.query();
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    resetdata(){
      Object.assign(
        this.$data.powerAjaxDetailAll,
        this.$options.data().powerAjaxDetailAll
      );
      Object.assign(this.$data.datelength, this.$options.data().datelength);
      Object.assign(this.$data.fc_date, this.$options.data().fc_date);
      Object.assign(this.$data.xl_date, this.$options.data().xl_date);
      Object.assign(this.$data.pj_date, this.$options.data().ipj_date);
      Object.assign(this.$data.autoHeight_fc, this.$options.data().autoHeight_fc);
      Object.assign(this.$data.styleObject_fc, this.$options.data().styleObject_fc);
      Object.assign(this.$data.autoHeight_pj, this.$options.data().autoHeight_pj);
      Object.assign(this.$data.styleObject_pj, this.$options.data().styleObject_pj);
      Object.assign(this.$data.autoHeight_xl, this.$options.data().autoHeight_xl);
      Object.assign(this.$data.styleObject_xl, this.$options.data().styleObject_xl);
    },
    query() {
      this.resetdata();
      this.styleObject_fc.height = '460px';
      this.autoHeight_fc = '400px';
      this.styleObject_pj.height = '860px';
      this.autoHeight_pj = '800px';
      this.styleObject_xl.height = '1260px';
      this.autoHeight_xl = '1200px';
      // this.fc_date = "";
      // this.xl_date = "";
      // this.pj_date = "";
      this.$http
        .get(
          "powercomparedetail/powerAjaxDetailAll?beginDate=" +
            this.beginDate +
            "&endDate=" +
            this.endDate +
            "&queryType=" +
            this.tableid
        )
        .then((res) => {
          let that = this;
          let queryAll = res.data.data;
          this.datelength = queryAll.length;
          for (let i = 0; i < queryAll.length; i++) {
            this.powerAjaxDetailAll.generation[i] = queryAll[i].generation;
            this.powerAjaxDetailAll.sacadafdl[i] = queryAll[i].sacadafdl;
            this.powerAjaxDetailAll.jxssdl[i] = queryAll[i].jxssdl;
            this.powerAjaxDetailAll.jxslssdl[i] = queryAll[i].jxslssdl;
            this.powerAjaxDetailAll.gzssdl[i] = queryAll[i].gzssdl;
            this.powerAjaxDetailAll.gzslssdl[i] = queryAll[i].gzslssdl;
            this.powerAjaxDetailAll.xdjclssdl[i] = queryAll[i].xdjclssdl;
            this.powerAjaxDetailAll.xdtjssdl[i] = queryAll[i].xdtjssdl;
            this.powerAjaxDetailAll.dwslssdl[i] = queryAll[i].dwslssdl;
            this.powerAjaxDetailAll.hjslssdl[i] = queryAll[i].hjslssdl;
            this.powerAjaxDetailAll.dfssdl[i] = queryAll[i].dfssdl;
            this.powerAjaxDetailAll.sdtjssdl[i] = queryAll[i].sdtjssdl;
            this.powerAjaxDetailAll.zcfdssdl[i] = queryAll[i].zcfdssdl;
            this.powerAjaxDetailAll.qxjclssdl[i] = queryAll[i].qxjclssdl;
            this.powerAjaxDetailAll.llfdl[i] = queryAll[i].llfdl;
          }
          if (this.tableid === "fc") {
            that.drawhistogram_fc(this.powerAjaxDetailAll);
          } else if (this.tableid === "pj") {
            that.drawhistogram_pj(this.powerAjaxDetailAll);
          } else if (this.tableid === "xl") {
            this.autoHeight = 1200;
            that.drawhistogram_xl(this.powerAjaxDetailAll);
          }
        });
      //表格数据获取
      this.$http
        .get(
          "powercomparedetail/powerAjaxDetailAll?beginDate=" +
            this.beginDate +
            "&endDate=" +
            this.endDate +
            "&queryType=" +
            this.tableid
        )
        .then((res) => {
          let that = this;
          let queryAll_table = res.data.data;
          if (this.tableid === "fc") {
            that.fc_date = queryAll_table;
          } else if (this.tableid === "pj") {
            that.pj_date = queryAll_table;
          } else if (this.tableid === "xl") {
            that.xl_date = queryAll_table;
          }
        });
    },
    async queryPowerAll() {
      this.judge = false;
      this.autoHeight = 600;
      this.resetdata();
      let that = this;
       if (this.beginDate == "" || this.endDate == "" || this.beginDate == undefined || this.endDate == undefined) {
        this.beginDate = "2021-01-01";
        that.endDate =  "2021-01-02";
        that.$message.error("请选时间！");
        return;
      }
      this.fc_date = "";
      this.xl_date = "";
      this.pj_date = "";
      if (
        that.fc == "" ||
        that.fc == null ||
        that.fc == undefined
      ) {
        that.query();
      } else {
        this.$http
          .get(
            "powercomparedetail/powerAjaxDetail?wpId=" +
              this.fc +
              "&pjId=" +
              this.pj +
              "&xlId=" +
              this.xl +
              "&beginDate=" +
              this.beginDate +
              "&endDate=" +
              this.endDate
          )
          .then((res) => {
            let that = this;
            let queryAll = res.data.data;
            this.datelength = queryAll.length;
            this.len = queryAll.length;
            if(this.len <= 10){that.autoHeight_fc = 580; that.styleObject_fc.height = '700px' }
            else if(this.len > 10 && this.len <=20){that.autoHeight_fc = 780; that.styleObject_fc.height = '800px';that.autoHeight_pj = 780; that.styleObject_pj.height = '800px';that.autoHeight_xl = 780; that.styleObject_xl.height = '800px' }
            else if(this.len > 20 && this.len <=30){that.autoHeight_fc = 980; that.styleObject_fc.height = '1000px';that.autoHeight_pj = 980; that.styleObject_pj.height = '1000px';that.autoHeight_xl = 980; that.styleObject_xl.height = '1000px' }
            else if(this.len > 30 && this.len <=40){that.autoHeight_fc = 1180; that.styleObject_fc.height = '1200px';that.autoHeight_pj = 1180; that.styleObject_pj.height = '1200px';that.autoHeight_xl = 1180; that.styleObject_xl.height = '1200px' }
            else if(this.len > 40 && this.len <=50){that.autoHeight_fc = 1380; that.styleObject_fc.height = '1400px';that.autoHeight_pj = 1380; that.styleObject_pj.height = '1400px';that.autoHeight_xl = 1380; that.styleObject_xl.height = '1400px' }
            else if(this.len > 50 && this.len <=60){that.autoHeight_fc = 1580; that.styleObject_fc.height = '1600px';that.autoHeight_pj = 1580; that.styleObject_pj.height = '1600px';that.autoHeight_xl = 1580; that.styleObject_xl.height = '1600px' }
            else if(this.len > 60 && this.len <=70){that.autoHeight_fc = 1780; that.styleObject_fc.height = '1800px';that.autoHeight_pj = 1780; that.styleObject_pj.height = '1800px';that.autoHeight_xl = 1780; that.styleObject_xl.height = '1800px' }
            else if(this.len > 70 && this.len <=80){that.autoHeight_fc = 1980; that.styleObject_fc.height = '2000px';that.autoHeight_pj = 1980; that.styleObject_pj.height = '2000px';that.autoHeight_xl = 1980; that.styleObject_xl.height = '2000px' }
            else{that.autoHeight_fc = 2180; that.styleObject_fc.height = '2200px';that.autoHeight_pj = 2180; that.styleObject_pj.height = '2200px';that.autoHeight_xl = 2180; that.styleObject_xl.height = '2200px' }
            
            for (let i = 0; i < queryAll.length; i++) {
              this.powerAjaxDetailAll.generation[i] = queryAll[i].generation;
              this.powerAjaxDetailAll.sacadafdl[i] = queryAll[i].sacadafdl;
              this.powerAjaxDetailAll.jxssdl[i] = queryAll[i].jxssdl;
              this.powerAjaxDetailAll.jxslssdl[i] = queryAll[i].jxslssdl;
              this.powerAjaxDetailAll.gzssdl[i] = queryAll[i].gzssdl;
              this.powerAjaxDetailAll.gzslssdl[i] = queryAll[i].gzslssdl;
              this.powerAjaxDetailAll.xdjclssdl[i] = queryAll[i].xdjclssdl;
              this.powerAjaxDetailAll.xdtjssdl[i] = queryAll[i].xdtjssdl;
              this.powerAjaxDetailAll.dwslssdl[i] = queryAll[i].dwslssdl;
              this.powerAjaxDetailAll.hjslssdl[i] = queryAll[i].hjslssdl;
              this.powerAjaxDetailAll.dfssdl[i] = queryAll[i].dfssdl;
              this.powerAjaxDetailAll.sdtjssdl[i] = queryAll[i].sdtjssdl;
              this.powerAjaxDetailAll.zcfdssdl[i] = queryAll[i].zcfdssdl;
              this.powerAjaxDetailAll.qxjclssdl[i] = queryAll[i].qxjclssdl;
              this.powerAjaxDetailAll.llfdl[i] = queryAll[i].llfdl;
            }
            if (this.tableid === "fc") {
              that.drawhistogram_fc(this.powerAjaxDetailAll);
            } else if (this.tableid === "pj") {
              that.drawhistogram_pj(this.powerAjaxDetailAll);
            } else if (this.tableid === "xl") {
              that.drawhistogram_xl(this.powerAjaxDetailAll);
            }
            let queryAll_table = res.data.data;
            if (this.tableid === "fc") {
              that.fc_date = queryAll_table;
            } else if (this.tableid === "pj") {
              that.pj_date = queryAll_table;
            } else if (this.tableid === "xl") {
              that.xl_date = queryAll_table;
            }
          });
      }
    },
    checkwindfarm() {
      if (this.fc == "") {
        this.$message.error("请选择风场！");
        return;
      }
    },
    checkproject() {
      if (this.pj == "") {
        this.$message.error("请选择项目！");
        return;
      }
      if (new Date(this.timedate) == null) {
        this.$message.error("请选择时间");
        return;
      }
    },
    checktime() {
      if (new Date(this.timedate) == null) {
        this.$message.error("请选择时间");
        return;
      }
    },
    queryApDataMx() {
      this.$router.push({ path: "/performanceList_fan" });
    },
    toExcel() {
       let that = this;
            if (this.tableid === "fc") {
            excelHelper.exportExcel("fc_table","fc数据",".xls",true);
            } else if (this.tableid === "pj") {
            excelHelper.exportExcel("pj_table","pj数据",".xls",true);
            } else if (this.tableid === "xl") {
            excelHelper.exportExcel("xl_table","xl数据",".xls",true);
            }
    },
    drawhistogram_fc(date) {
      this.chartLine = echarts.init(document.getElementById("histogram_fc"));
      this.chartLine.clear();
      this.chartLine.resize({height: this.autoHeight_fc})
      var option;
      option = {
        textStyle:{fontSize:10},
        color:["#64E572","#24CBE5","#128A9D","#DDDF00","#AAAC00","#ED561A","#8E5139","#50B532","#216F0A","#048DC7","#006089","#00B3FF","#000000"],
        title: {
          text: "风机绩效榜单",
          left: 300,
          top: -5,
          textStyle: {
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: 15,
          top: 30,
          data: [
            "实发电量",
            "检修损失",
            "检修受累损失",
            "故障损失",
            "故障受累损失",
            "限电降出力损失",
            "限电停机损失",
            "电网受累损失",
            "环境受累损失",
            "待风损失",
            "手动停机损失",
            "正常发电损失",
            "缺陷降出力损失电量",
          ],
        },
        grid: {
          top: "130",
          left: "10%",
          right: "10%",
          bottom: "50",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: date.generation,
        },
        series: [
          {
            name: "实发电量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.sacadafdl,
          },
          {
            name: "检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.jxssdl,
          },
          {
            name: "检修受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.jxslssdl,
          },
          {
            name: "故障损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.gzssdl,
          },
          {
            name: "故障受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.gzslssdl,
          },
          {
            name: "限电降出力损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.xdjclssdl,
          },
          {
            name: "限电停机损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.xdtjssdl,
          },
          {
            name: "电网受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.dwslssdl,
          },
          {
            name: "环境受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.hjslssdl,
          },
          {
            name: "待风损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.dfssdl,
          },
          {
            name: "手动停机损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.sdtjssdl,
          },
          {
            name: "正常发电损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.zcfdssdl,
          },
          {
            name: "缺陷降出力损失电量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.qxjclssdl,
          },
          //曲线
          {
            name: "总和",
            data: date.llfdl,
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            lineStyle: {
              color: "#5470C6",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#EE6666",
              color: "yellow",
            },
          },
        ],
      };
      this.chartLine.setOption(option);
    },
    drawhistogram_pj(date) {
      this.chartLine = echarts.init(document.getElementById("histogram_xm"));
      this.chartLine.clear();
      this.chartLine.resize({height: this.autoHeight_pj})
      var option;

      var option;
      option = {
        color:["#64E572","#24CBE5","#128A9D","#DDDF00","#AAAC00","#ED561A","#8E5139","#50B532","#216F0A","#048DC7","#006089","#00B3FF","#000000"],
        title: {
          text: "风机绩效榜单",
          left: 300,
          top: -5,
          textStyle: {
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: 15,
          top: 30,
          data: [
            "实发电量",
            "检修损失",
            "检修受累损失",
            "故障损失",
            "故障受累损失",
            "限电降出力损失",
            "限电停机损失",
            "电网受累损失",
            "环境受累损失",
            "待风损失",
            "手动停机损失",
            "正常发电损失",
            "缺陷降出力损失电量",
          ],
        },
        grid: {
          top: "130",
          left: "10%",
          right: "10%",
          bottom: "50",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: date.generation,
        },
        series: [
          {
            name: "实发电量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.sacadafdl,
          },
          {
            name: "检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.jxssdl,
          },
          {
            name: "检修受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.jxslssdl,
          },
          {
            name: "故障损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.gzssdl,
          },
          {
            name: "故障受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.gzslssdl,
          },
          {
            name: "限电降出力损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.xdjclssdl,
          },
          {
            name: "限电停机损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.xdtjssdl,
          },
          {
            name: "电网受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.dwslssdl,
          },
          {
            name: "环境受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.hjslssdl,
          },
          {
            name: "待风损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.dfssdl,
          },
          {
            name: "手动停机损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.sdtjssdl,
          },
          {
            name: "正常发电损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.zcfdssdl,
          },
          {
            name: "缺陷降出力损失电量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.qxjclssdl,
          },
          //曲线
          {
            name: "总和",
            data: date.llfdl,
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            lineStyle: {
              color: "#5470C6",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#EE6666",
              color: "yellow",
            },
          },
        ],
      };
      this.chartLine.setOption(option);
    },
    drawhistogram_xl(date) {
      
      this.chartLine = echarts.init(document.getElementById("histogram_jdxl"));
      this.chartLine.clear();
      this.chartLine.resize({height: this.autoHeight_xl})
      var option;

      var option;
      option = {
        color:["#64E572","#24CBE5","#128A9D","#DDDF00","#AAAC00","#ED561A","#8E5139","#50B532","#216F0A","#048DC7","#006089","#00B3FF","#000000"],
        title: {
          text: "风机绩效榜单",
          left: 300,
          top: -5,
          textStyle: {
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: 15,
          top: 30,
          data: [
            "实发电量",
            "检修损失",
            "检修受累损失",
            "故障损失",
            "故障受累损失",
            "限电降出力损失",
            "限电停机损失",
            "电网受累损失",
            "环境受累损失",
            "待风损失",
            "手动停机损失",
            "正常发电损失",
            "缺陷降出力损失电量",
          ],
        },
        grid: {
          top: "130",
          left: "10%",
          right: "10%",
          bottom: "50",
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: date.generation,
        },
        series: [
          {
            name: "实发电量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.sacadafdl,
          },
          {
            name: "检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.jxssdl,
          },
          {
            name: "检修受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.jxslssdl,
          },
          {
            name: "故障损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.gzssdl,
          },
          {
            name: "故障受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.gzslssdl,
          },
          {
            name: "限电降出力损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.xdjclssdl,
          },
          {
            name: "限电停机损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.xdtjssdl,
          },
          {
            name: "电网受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.dwslssdl,
          },
          {
            name: "环境受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.hjslssdl,
          },
          {
            name: "待风损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.dfssdl,
          },
          {
            name: "手动停机损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.sdtjssdl,
          },
          {
            name: "正常发电损失",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.zcfdssdl,
          },
          {
            name: "缺陷降出力损失电量",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: date.qxjclssdl,
          },
          //曲线
          {
            name: "总和",
            data: date.llfdl,
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            lineStyle: {
              color: "#5470C6",
              width: 4,
              type: "dashed",
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: "#EE6666",
              color: "yellow",
            },
          },
        ],
      };
      this.chartLine.setOption(option);
    },
  },
  mounted() {
    this.$nextTick(() => {
                this.tableHeight = window.innerHeight + (this.len /10 ) * (this.len /10 ) * 100; 
            //后面的50：根据需求空出的高度，自行调整
        });
    this.query_wpid();
    this.query();
  },
};
</script>
<style scoped>
.bg-purple-dark {
  background: #fff;
}
.grid-content {
  border-radius: 2px;
  min-height: 36px;
  margin-top: -15px;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.el-row {
  margin: 10px;
}
.extent_1 {
  height: 450px;
}
.extent_2 {
  height: 600px;
}
.extent_3 {
  height: 750px;
}
.extent_4 {
  height: 800px;
}
.extent_5 {
  height: 1150px;
}
</style>