<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="选择日期"
                :picker-options="pickerOptions">
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker
                v-model="endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              >
              </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" :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"
        :modal-append-to-body="false"
        width="65%"
      >
        <el-row>
          <div id="histogram" style="width: 100%; height: 500px"></div>
        </el-row>
      </el-dialog>
    </el-main>
  </el-container>
</template>


<script>
  import goodnessfitRank from "@assets/js/normRanking/goodnessfitRank";
  export default goodnessfitRank;
</script>

<style lang="scss" scoped>
 @import "@assets/css/normRanking/goodnessfitRank.scss";
</style>