SIS_Web/src/views/NormRanking/GoodnessfitRank.vue

<template>
  <el-container>
    <el-header>
      <el-card style="margin-top: -10px">
        <el-row :gutter="1">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="风场">
              <el-select v-model="fc" clearable placeholder="请选择">
                <el-option
                  v-for="item in FClist"
                  :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"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>

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

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

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

            <el-form-item>
              <el-button type="primary" @click="curveCreation" :plain="true"
                >生成曲线</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </el-card>
    </el-header>

    <el-main>
      <el-card style=" height: 759px">
        <el-table
          v-loading="loading"
          :data="tableData"
          id="tableData"
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="headStyle"
          max-height="739px"
          @selection-change="changeFun"
        >
          >
          <el-table-column label="拟合优度排行榜">
            <el-table-column type="index" width="80"> </el-table-column>
            <el-table-column
              type="selection"
              class="selection"
              @selection-change="changeFun"
              width="60"
            >
            </el-table-column>
            <el-table-column sortable prop="windfarm" label="风场" width="300">
            </el-table-column>
            <el-table-column
              sortable
              prop="windturbine"
              label="风机"
              width="300"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="beginDate"
              :formatter="filter_bdate"
              value-format="yyyy-MM-dd"
              label="起始时间"
              width="300"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="engDate"
              :formatter="filter_edate"
              value-format="yyyy-MM-dd"
              label="截至日期"
              width="220"
            >
            </el-table-column>
            <el-table-column
              :formatter="filter_power"
              sortable
              prop="speed"
              label="平均风速"
              width="295"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="power"
              :formatter="filter_generatingCapacity"
              label="拟合优度"
              width="295"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        title="对标信息分析"
        :visible.sync="dialogTableVisible"
        width="65%"
      >
        <el-row>
          <div id="histogram" style="width: 100%; height: 500px"></div>
        </el-row>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import excelHelper from "@/utils/excelHelper";
import formateDate from "@/utils/date";
import formateDate1 from "@/utils/date_1";
import * as echarts from "echarts";
export default {
  data() {
    return {
      FClist: {
        name: "",
        id: "",
      },
      loading:true,
      tableData: [],
      dialogTableVisible: false,
      beginDate: "2021-01-01",
      endDate: "2021-01-01",
      fc: "MHS_FDC",
      selectrowdate: {},
      histogram_Date: [],
      histogram_sers: [],
    };
  },
  methods: {
    query_fc() {
       var newData = new Date();
       this.beginDate = formateDate1(newData.getTime()/1000);
       this.endDate = formateDate(newData.getTime()/1000);
       this.$http.get("powercompare/windfarmAjax?").then((res) => {
       this.FClist = res.data.data;
      });
    },
    query_table() {
      this.$http
        .get(
          "leaderboard/fittingtoplist?wpIps=" +
            this.fc +
            "&pageNum=" +
            1 +
            "&pageSize=" +
            10 +
            "&orderByColumn=" +
            "" +
            "&isAsc=" +
            "asc" +
            "&beginDate=" +
            this.beginDate +
            "&endDate=" +
            this.endDate
        )
        .then((res) => {
          this.tableData = res.data.data;
          this.loading=false;
        });
    },
    headStyle() {
      return "text-align:center";
    },
    changeFun(val) {
      let wt = [];
      this.histogram_Date = {};
      this.histogram_sers = [];
      for (let i = 0; i < Object.keys(val).length; i++) {
        wt.push(val[i].windturbine);
      }
          this.$http
        .get(
          "leaderboard/fittingtopchart?wtIds=" +
            wt +
            "&beginDate=" +
            this.beginDate +
            "&endDate=" +
            this.endDate
        )
        .then((res) => {
          let that = this;
          this.histogram_Date = [];
          let design = [];
          let h_Date = res.data.data;
          this.histogram_sers = res.data.data.sers;
          
          for (let j = 0; j < Object.keys(this.histogram_sers).length; j++) {
            let name1 = res.data.data.sers[j];
            design = h_Date[name1];
            that.histogram_Date.push({
              type: "line",
              name: name1,
              stack: "总量",
              data: design,
            });
          }
        });
      
    },
    toExcel() {
      let that = this;
      excelHelper.exportExcel("tableData", "拟合优度排行榜", ".xls", true);
    },
    filter_bdate(cellValue) {
      let date = new Date(cellValue.beginDate);

      return formateDate(date / 1000);
    },
    filter_edate(cellValue) {
      let date = new Date(cellValue.endDate);

      return formateDate(date / 1000);
    },
    filter_generatingCapacity(cellValue) {
      return parseFloat(cellValue.power).toFixed(2);
    },
    filter_power(cellValue) {
      return parseFloat(cellValue.power).toFixed(2);
    },
    curveCreation() {
      this.dialogTableVisible = true;
      this.$nextTick(function () {
        this.drawhistogram();
      });
    },
    drawhistogram() {
      var myChart;

      // if (myChart != null && myChart != "" && myChart != undefined) {
      //   myChart.dispose();
      // }
      myChart= this.$echarts.init(document.getElementById('histogram'));

      var option;

      option = {
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.histogram_sers
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: [0.5,1.0,1.5,2.0,2.5,3.0,3.5,4.0,4.5,5.0,5.5,6.0,6.5,7.0,7.5,8.0,8.5,9.0,9.5,10.0,10.5,11.0,11.5,12.0,12.5,13.0,13.5,14.0,14.5,15.0,15.5,16.0,16.5,17.0,17.5,18.0,18.5,19.0,19.5,20.0,20.5,21.0,21.5,22.0,22.5,23.0,23.5,24.0,24.5,25.0],
        },
        yAxis: {
          type: "value",
        },
        series:this.histogram_Date,
      };
      myChart.clear();
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.query_fc();
    this.query_table();
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-table__header-wrapper  .el-checkbox{
	display:none
}
</style>