SIS_Web/src/views/Performance/PerformanceList.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"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker
                v-model="endDate"
                value-format="yyyy-MM-dd"
                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%;
                height: 100%;
                display: flex;
                justify-content: space-between;
              "
            >
              <el-card
                shadow="always"
                ref="fc_zzt_card"
                :style="styleObject_fc"
                style="
                  width: 45%;
                  display: table-cell;
                  vertical-align: middle;
                "
              >

                <div
                  id="histogram_fc"
                  ref="fc_zzt"
                  style="width: 800px"
                  
                ></div>
              </el-card>

              <el-card
                shadow="always"
                style="width: 48%"
                :style="styleObject_fc"
                id="moban"
              >
                <el-table
                  id="fc_table"
                  :data="fc_date"
                  style="width: 100%; font-size: 1px"
                  :max-height="tableHeight_fc"
                >
                  <el-table-column label="项目列表">
                    <el-table-column fixed type="index" width="40">
                    </el-table-column>
                    <el-table-column
                      prop="wtName"
                      sortable
                      label="名称"
                      width="103"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_total"
                      prop="total"
                      label="理论发电"
                      width="83"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daydl2"
                      prop="daydl2"
                      label="SCADA"
                      width="81"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_dayspeed"
                      prop="dayspeed"
                      label="风速"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhgzssdl"
                      prop="daynhgzssdl"
                      label="非计划检修"
                      width="103"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhwhssdl"
                      prop="daynhwhssdl"
                      label="计划检修"
                      width="85"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhcfdl"
                      prop="daynhcfdl"
                      label="受累"
                      width="75"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhxdssdl"
                      prop="daynhxdssdl"
                      label="限电"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhxdssdl"
                      prop="daynhxdssdl"
                      label="性能"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_lyl"
                      prop="lyl"
                      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%;
                height: 100%;
                display: flex;
                justify-content: space-between;
              "
            >
              <el-card
                shadow="always"
                :style="styleObject_pj"
                style="
                  width: 48%;
                  display: table-cell;
                  vertical-align: middle;
                "
              >

                <div
                  id="histogram_xm"
                  style="width: 800px; height: 400px; margin: auto"
                ></div>
              </el-card>

              <el-card
                shadow="always"
                :style="styleObject_pj"
                style="width: 48%"
                id="moban"
              >
                <el-table
                  id="pj_table"
                  :data="pj_date"
                  style="width: 100%; font-size: 1px"
                  :max-height="tableHeight_pj"
                >
                  <el-table-column label="项目列表">
                    <el-table-column fixed type="index" width="40">
                    </el-table-column>
                    <el-table-column
                      prop="wtName"
                      sortable
                      label="名称"
                      width="103"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_total"
                      prop="total"
                      label="理论发电"
                      width="83"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daydl2"
                      prop="daydl2"
                      label="SCADA"
                      width="81"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_dayspeed"
                      prop="dayspeed"
                      label="风速"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhgzssdl"
                      prop="daynhgzssdl"
                      label="非计划检修"
                      width="103"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhwhssdl"
                      prop="daynhwhssdl"
                      label="计划检修"
                      width="85"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhcfdl"
                      prop="daynhcfdl"
                      label="受累"
                      width="75"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhxdssdl"
                      prop="daynhxdssdl"
                      label="限电"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhxdssdl"
                      prop="daynhqfdl"
                      label="性能"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_lyl"
                      prop="lyl"
                      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%;
                height: 100%;
                display: flex;
                justify-content: space-between;
              "
            >
              <el-card
                shadow="always"
                :style="styleObject_xl"
                style="width: 48%; display: table-cell; vertical-align: middle"
              >

                <div
                  id="histogram_jdxl"
                  style="width: 800px; margin: auto"
                ></div>
              </el-card>

              <el-card
                shadow="always"
                style="width: 48%"
                :style="styleObject_xl"
                id="moban"
              >
                <el-table
                  id="xl_table"
                  :data="xl_date"
                  style="width: 100%; font-size: 1px;margin-bottom:10px"
                  :max-height="tableHeight_xl"
                >
                  <el-table-column label="项目列表">
                    <el-table-column fixed type="index" width="40">
                    </el-table-column>
                    <el-table-column
                      prop="wtName"
                      sortable
                      label="名称"
                      width="103"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_total"
                      prop="total"
                      label="理论发电"
                      width="83"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daydl2"
                      prop="daydl2"
                      label="SCADA"
                      width="81"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_dayspeed"
                      prop="dayspeed"
                      label="风速"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhgzssdl"
                      prop="daynhgzssdl"
                      label="非计划检修"
                      width="103"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhwhssdl"
                      prop="daynhwhssdl"
                      label="计划检修"
                      width="85"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhcfdl"
                      prop="daynhcfdl"
                      label="受累"
                      width="75"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhxdssdl"
                      prop="daynhxdssdl"
                      label="限电"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_daynhxdssdl"
                      prop="daynhxdssdl"
                      label="性能"
                      width="63"
                    >
                    </el-table-column>
                    <el-table-column
                      sortable
                      :formatter="filter_lyl"
                      prop="lyl"
                      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 formateDate from "@/utils/date";
import formateDate1 from "@/utils/date_1";
import excelHelper from "@/utils/excelHelper";
export default {
  data() {
    return {
      len:10,
      fc:"",
      pj:"",
      xl:"",
      autoHeight_fc: 400,
      autoHeight_pj: 800,
      autoHeight_xl: 1200,
      tableHeight_fc:460,
      tableHeight_pj:860,
      tableHeight_xl:1220,
      queryAll_table_lyl:[],
      wpIdslist: {
        name:"",
        id:"",
      },
      projectlist:{
        name:"",
        id:"",
      },
      linelist:{
        name:"",
        id:"",
      },
      fc_date: [],
      pj_date: [],
      xl_date: [],
      beginDate: "",
      endDate: "",
      activeName: "first",
      tableid: "fc",
      styleObject_fc: {
        height: '460px'
      },
      styleObject_pj: {
        height: '860px'
      },
      styleObject_xl: {
        height: '1220px'
      },
      linechar_data:{
        dayspeed:[],
        daydl2:[],
        daynhgzssdl:[],
        daynhcfdl:[],
        daynhqfdl:[],
        daynhxdssdl:[],
        lyl:[],
        wtName:[],
        total:[],
        daynhwhssdl:[]
      }
    };
  },
  methods: {
    created(){
      
      },
    onSubmit() {},
    query_wpid() {
       var newData = new Date();
       this.beginDate = formateDate1((newData.getTime()-86400000)/1000);
       this.endDate = formateDate1(newData.getTime()/1000);
       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;
      });
    },
    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);
    },
    query() {
      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);
      Object.assign(this.$data.queryAll_table_lyl, this.$options.data().queryAll_table_lyl);
      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(
          "powercompare/powerAjaxAll?wpIds=" +
            this.fc +
            "&beginDate=" +
            this.beginDate +
            "&endDate=" +
            this.endDate +
            "&queryType=" +
            this.tableid +
            "&sortName=" +
            this.fc +
            "&sortOrder=" +
            "Asc"
        )
        .then((res) => {
          let that = this;
          Object.assign(this.$data.linechar_data, this.$options.data().linechar_data);
          this.linechar_data.dayspeed=[];
          this.linechar_data.daydl2=[];
          this.linechar_data.daynhgzssdl=[];
          this.linechar_data.daynhcfdl=[];
          this.linechar_data.daynhqfdl=[];
          this.linechar_data.daynhxdssdl=[];
          this.linechar_data.lyl=[];
          this.linechar_data.wtName=[];
          this.linechar_data.daynhwhssdl=[];
          let queryAll_table = res.data.data.list;
          let queryAll_table_lyl = res.data.data.lyl;
          for(let i = 0;i < Object.keys(queryAll_table).length;i++){
            if(queryAll_table[i].wtName!="合计"){
            that.linechar_data.dayspeed.push(queryAll_table[i].dayspeed.toFixed(2));
            that.linechar_data.daydl2.push(queryAll_table[i].daydl2.toFixed(2));
            that.linechar_data.daynhgzssdl.push(queryAll_table[i].daynhgzssdl.toFixed(2));
            that.linechar_data.daynhcfdl.push(queryAll_table[i].daynhcfdl.toFixed(2));
            that.linechar_data.daynhqfdl.push(queryAll_table[i].daynhqfdl.toFixed(2));
            that.linechar_data.daynhxdssdl.push(queryAll_table[i].daynhxdssdl.toFixed(2));
            that.linechar_data.lyl.push(queryAll_table[i].lyl.toFixed(2));
            that.linechar_data.wtName.push(queryAll_table[i].wtName);
            that.linechar_data.total.push(queryAll_table[i].total.toFixed(2));
             that.linechar_data.daynhwhssdl.push(queryAll_table[i].daynhwhssdl.toFixed(2));
            }
          }
          if (this.tableid === "fc") {
            that.fc_date = queryAll_table;
            that.drawhistogram_fc(this.linechar_data,queryAll_table_lyl);
          } else if (this.tableid === "pj") {
            that.pj_date = queryAll_table;
            that.drawhistogram_pj(this.linechar_data,queryAll_table_lyl);
          } else if (this.tableid === "xl") {
            that.xl_date = queryAll_table;
            that.drawhistogram_xl(this.linechar_data,queryAll_table_lyl);
          }
        });
    },
    async queryPowerAll() {
      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.linechar_data, this.$options.data().linechar_data);
      let that = this;
      if (
        this.beginDate == "" ||
        this.endDate == "" ||
        this.beginDate == undefined ||
        this.endDate == undefined
      ) {
        this.query_wpid();
        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(
        //     "powercompare/queryPower?wpIds=" +
        //       this.fc +
        //       "&pjIds=" +
        //       this.pj +
        //       "&lineIds=" +
        //       this.xl +
        //       "&beginDate=" +
        //       this.beginDate +
        //       "&endDate=" +
        //       this.endDate
        //   )
          // .then((res) => {
          //   let that = this;
            // let queryAll = res.data.data;
            // this.len = Object.keys(queryAll.names).length;
            // if(this.len <= 10){that.autoHeight_fc = 575; that.styleObject_fc.height = '700px' }
            // else if(this.len > 10 && this.len <=20){that.autoHeight_fc = 775; that.styleObject_fc.height = '800px';that.autoHeight_pj = 775; that.styleObject_pj.height = '800px';that.autoHeight_xl = 775; that.styleObject_xl.height = '800px' }
            // else if(this.len > 20 && this.len <=30){that.autoHeight_fc = 975; that.styleObject_fc.height = '1000px';that.autoHeight_pj = 975; that.styleObject_pj.height = '1000px';that.autoHeight_xl = 975; that.styleObject_xl.height = '1000px' }
            // else if(this.len > 30 && this.len <=40){that.autoHeight_fc = 1175; that.styleObject_fc.height = '1200px';that.autoHeight_pj = 1175; that.styleObject_pj.height = '1200px';that.autoHeight_xl = 1175; that.styleObject_xl.height = '1200px' }
            // else if(this.len > 40 && this.len <=50){that.autoHeight_fc = 1375; that.styleObject_fc.height = '1400px';that.autoHeight_pj = 1375; that.styleObject_pj.height = '1400px';that.autoHeight_xl = 1375; that.styleObject_xl.height = '1400px' }
            // else if(this.len > 50 && this.len <=60){that.autoHeight_fc = 1575; that.styleObject_fc.height = '1600px';that.autoHeight_pj = 1575; that.styleObject_pj.height = '1600px';that.autoHeight_xl = 1575; that.styleObject_xl.height = '1600px' }
            // else if(this.len > 60 && this.len <=70){that.autoHeight_fc = 1775; that.styleObject_fc.height = '1800px';that.autoHeight_pj = 1775; that.styleObject_pj.height = '1800px';that.autoHeight_xl = 1775; that.styleObject_xl.height = '1800px' }
            // else if(this.len > 70 && this.len <=80){that.autoHeight_fc = 1975; that.styleObject_fc.height = '2000px';that.autoHeight_pj = 1975; that.styleObject_pj.height = '2000px';that.autoHeight_xl = 1975; that.styleObject_xl.height = '2000px' }
            // else{that.autoHeight_fc = 2175; that.styleObject_fc.height = '2200px';that.autoHeight_pj = 2175; that.styleObject_pj.height = '2200px';that.autoHeight_xl = 2175; that.styleObject_xl.height = '2200px' }
            //  this.tableHeight_fc = this.autoHeight_fc - 20; 
            //  this.tableHeight_pj = this.autoHeight_pj - 20; 
            //  this.tableHeight_xl = this.autoHeight_xl - 20; 
          //});
        this.$http
          .get(
            "powercompare/powerAjax?wpIds=" +
              this.fc +
              "&pjIds=" +
              this.pj +
              "&lineIds=" +
              this.xl +
              "&beginDate=" +
              this.beginDate +
              "&endDate=" +
              this.endDate +
              "&sortName=" +
              this.fc +
              "&sortOrder=" +
              "Asc"
          )
          .then((res) => {
            let that = this;
            this.len = Object.keys(res.data.data.list).length;
            if(this.len <= 10){that.autoHeight_fc = 575; that.styleObject_fc.height = '700px' }
            else if(this.len > 10 && this.len <=20){that.autoHeight_fc = 775; that.styleObject_fc.height = '800px';that.autoHeight_pj = 775; that.styleObject_pj.height = '800px';that.autoHeight_xl = 775; that.styleObject_xl.height = '800px' }
            else if(this.len > 20 && this.len <=30){that.autoHeight_fc = 975; that.styleObject_fc.height = '1000px';that.autoHeight_pj = 975; that.styleObject_pj.height = '1000px';that.autoHeight_xl = 975; that.styleObject_xl.height = '1000px' }
            else if(this.len > 30 && this.len <=40){that.autoHeight_fc = 1175; that.styleObject_fc.height = '1200px';that.autoHeight_pj = 1175; that.styleObject_pj.height = '1200px';that.autoHeight_xl = 1175; that.styleObject_xl.height = '1200px' }
            else if(this.len > 40 && this.len <=50){that.autoHeight_fc = 1375; that.styleObject_fc.height = '1400px';that.autoHeight_pj = 1375; that.styleObject_pj.height = '1400px';that.autoHeight_xl = 1375; that.styleObject_xl.height = '1400px' }
            else if(this.len > 50 && this.len <=60){that.autoHeight_fc = 1575; that.styleObject_fc.height = '1600px';that.autoHeight_pj = 1575; that.styleObject_pj.height = '1600px';that.autoHeight_xl = 1575; that.styleObject_xl.height = '1600px' }
            else if(this.len > 60 && this.len <=70){that.autoHeight_fc = 1775; that.styleObject_fc.height = '1800px';that.autoHeight_pj = 1775; that.styleObject_pj.height = '1800px';that.autoHeight_xl = 1775; that.styleObject_xl.height = '1800px' }
            else if(this.len > 70 && this.len <=80){that.autoHeight_fc = 1975; that.styleObject_fc.height = '2000px';that.autoHeight_pj = 1975; that.styleObject_pj.height = '2000px';that.autoHeight_xl = 1975; that.styleObject_xl.height = '2000px' }
            else{that.autoHeight_fc = 2175; that.styleObject_fc.height = '2200px';that.autoHeight_pj = 2175; that.styleObject_pj.height = '2200px';that.autoHeight_xl = 2175; that.styleObject_xl.height = '2200px' }
             this.tableHeight_fc = this.autoHeight_fc - 20; 
             this.tableHeight_pj = this.autoHeight_pj - 20; 
             this.tableHeight_xl = this.autoHeight_xl - 20; 
          Object.assign(this.$data.linechar_data, this.$options.data().linechar_data);
          this.linechar_data.dayspeed=[];
          this.linechar_data.daydl2=[];
          this.linechar_data.daynhgzssdl=[];
          this.linechar_data.daynhcfdl=[];
          this.linechar_data.daynhqfdl=[];
          this.linechar_data.daynhxdssdl=[];
          this.linechar_data.lyl=[];
          this.linechar_data.wtName=[];
          this.linechar_data.daynhwhssdl=[];
          let queryAll_table = res.data.data.list;
          let queryAll_table_lyl = res.data.data.lyl;
          //this.query_lyl(queryAll_table);
          for(let i = 0;i < Object.keys(queryAll_table).length;i++){
            if(queryAll_table[i].wtName!="合计"){
            that.linechar_data.dayspeed.push(queryAll_table[i].dayspeed.toFixed(2));
            that.linechar_data.daydl2.push(queryAll_table[i].daydl2.toFixed(2));
            that.linechar_data.daynhgzssdl.push(queryAll_table[i].daynhgzssdl.toFixed(2));
            that.linechar_data.daynhcfdl.push(queryAll_table[i].daynhcfdl.toFixed(2));
            that.linechar_data.daynhqfdl.push(queryAll_table[i].daynhqfdl.toFixed(2));
            that.linechar_data.daynhxdssdl.push(queryAll_table[i].daynhxdssdl.toFixed(2));
            that.linechar_data.lyl.push(queryAll_table[i].lyl.toFixed(2));
            that.linechar_data.wtName.push(queryAll_table[i].wtName);
            that.linechar_data.total.push(queryAll_table[i].total.toFixed(2));
            that.linechar_data.daynhwhssdl.push(queryAll_table[i].daynhwhssdl.toFixed(2));
            }
            
          }
           if (this.tableid === "fc") {
            that.fc_date = queryAll_table;
            that.drawhistogram_fc(this.linechar_data,queryAll_table_lyl);
          } else if (this.tableid === "pj") {
            that.pj_date = queryAll_table;
            that.drawhistogram_pj(this.linechar_data,queryAll_table_lyl);
          } else if (this.tableid === "xl") {
            that.xl_date = queryAll_table;
            that.drawhistogram_xl(this.linechar_data,queryAll_table_lyl);
          }
          });
      }
    },
    checkwindfarm() {
      if (this.fc == "") {
        this.$message.error("请选择风场！");
        return;
      }
    },
    checkproject() {
      if (this.fc == "") {
        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: "/new_performanceList_fan" ,
      query: {
            beginDate : this.beginDate,
            endDate : this.endDate
          },});
    },
    filter_total(cellValue) {
      return parseFloat(cellValue.total).toFixed(2);
    },

    filter_daydl2(cellValue) {
      return parseFloat(cellValue.daydl2).toFixed(2);
    },
    filter_dayspeed(cellValue) {
      return parseFloat(cellValue.dayspeed).toFixed(2);
    },
    filter_daynhwhssdl(cellValue) {
      return parseFloat(cellValue.daynhwhssdl).toFixed(2);
    },
    filter_daynhcfdl(cellValue) {
      return parseFloat(cellValue.daynhcfdl).toFixed(2);
    },
    filter_daynhxdssdl(cellValue) {
      return parseFloat(cellValue.daynhqfdl).toFixed(2);
    },
    filter_lyl(cellValue) {
      return parseFloat(cellValue.lyl).toFixed(2);
    },
    filter_daynhgzssdl(cellValue) {
      return parseFloat(cellValue.daynhgzssdl).toFixed(2);
    },
    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,date2) {
      this.chartLine = echarts.init(document.getElementById("histogram_fc"));
      this.chartLine.clear();
      this.chartLine.resize({ height: this.autoHeight_fc });

      var option;
      option = {
        color: [
          "#64E572",
          "#24CBE5",
          "#DDDF00",
          "#ED561B",
          "#50B432",
          "#058DC7",
        ],
        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: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          max: Math.ceil(Math.max.apply(null, date.total))+ Math.ceil((Math.max.apply(null, date.total))*0.08)
        },
        yAxis: {
          type: "category",
          data: date.wtName,
        },
        series: [
          {
            name: "实发电量",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daydl2,
          },
          {
            name: "计划检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhwhssdl,
          },
          {
            name: "非计划检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhgzssdl,
          },
          {
            name: "限电损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhxdssdl,
          },
          {
            name: "受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhcfdl,
          },
          {
            name: "性能损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhqfdl,
          },
          //曲线
          {
            name: "-",
            data: date.total,
            markPoint: {
                data: date2,
                        },
            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,date2) {
      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",
          "#DDDF00",
          "#ED561B",
          "#50B432",
          "#058DC7",
        ],
        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: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          max: Math.ceil(Math.max.apply(null, date.total))+ Math.ceil((Math.max.apply(null, date.total))*0.08)
         },
        yAxis: {
          type: "category",
          data: date.wtName,
        },
        series: [
          {
            name: "实发电量",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daydl2,
          },
          {
            name: "计划检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhwhssdl,
          },
          {
            name: "非计划检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhgzssdl,
          },
          {
            name: "限电损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhxdssdl,
          },
          {
            name: "受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhcfdl,
          },
          {
            name: "性能损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhqfdl,
          },
          //曲线
          {
            name: "-",
            data: date.total,
            markPoint: {
                data: date2,
                        },
            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,date2) {
      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",
          "#DDDF00",
          "#ED561B",
          "#50B432",
          "#058DC7",
        ],
        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: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          max: Math.ceil(Math.max.apply(null, date.total))+ Math.ceil((Math.max.apply(null, date.total))*0.08)
        },
        yAxis: {
          type: "category",
          data: date.wtName,
        },
        series: [
          {
            name: "实发电量",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daydl2,
          },
          {
            name: "计划检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhwhssdl,
          },
          {
            name: "非计划检修损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhgzssdl,
          },
          {
            name: "限电损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhxdssdl,
          },
          {
            name: "受累损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhcfdl,
          },
          {
            name: "性能损失",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: date.daynhqfdl,
          },
          //曲线
          {
            name: "-",
            data: date.total,
            markPoint: {
                data: date2,
                        },
            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(() => {
               
            //后面的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;
}
</style>