<template>
  <div class="box">
    <div class="overallSituation">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        type="border-card"
        style="width: 100%; margin: 0.5%; height: 130px"
      >
        <el-tab-pane label="风机日信息等级评估管理" name="first" :key="'first'">
          <div style="float: left">查询条件</div>
          <div style="margin-left: 5%; width: 20%; float: left">
            <span>风场</span>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="margin-left: 5%"
              @change="currentSel"
            >
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="block" style="width: 20%; float: left">
            <span>日期</span>
            <el-date-picker
              v-model="value1"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="margin-left: 5%"
              format="yyyy-MM-dd"
              @change="gradeByDaygData"
            >
            </el-date-picker>
          </div>
          <div style="width: 2%; float: left; margin-left: 10%">
            <el-button type="primary" @click="dialogTableVisibleOpen()"
              >对比</el-button
            >
          </div>
          <div style="width: 2%; float: left; margin-left: 10%">
            <el-button type="primary" @click="exportDayData()">导出</el-button>
          </div>
          <el-dialog
            class="el-dialog_body"
            width="65%"
            title="日信息对比"
            :visible.sync="dialogTableVisible"
            append-to-body
          >
            <div class="margin">
              <div class="dialogLeftData">
                <el-table
                  class="table_sty"
                  :data="sortInOrderTop"
                  height="97"
                  border
                  :header-cell-style="headStyle"
                  :cell-style="{ textAlign: 'center', padding: '0px' }"
                  :row-style="{ height: '10px' }"
                  style="width: 100%; font-size: 10px"
                >
                  <el-table-column
                    prop="lhpj"
                    :label="fanNumber1"
                    width="252.5"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="zhpm"
                    :label="fanNumber2"
                    width="252.5"
                  >
                  </el-table-column>
                </el-table>
                <div id="leiDaTu" class="echart"></div>
              </div>

              <div class="dialogRightData">
                <el-table
                class="table_sty"
                  :data="sortInOrder"
                  height="618"
                  :row-style="{ height: '10px' }"
                  border
                  :header-cell-style="headStyle"
                  :cell-style="{ textAlign: 'center', padding: '1px' }"
                  style="width: 100%; font-size: 10px"
                >
                  <el-table-column label="基础指标">
                    <el-table-column prop="lx" label="类型" width="85">
                    </el-table-column>
                    <el-table-column prop="index" label="指标" width="115">
                    </el-table-column>
                    <el-table-column prop="data1" :label="fan1" width="100">
                    </el-table-column>
                    <el-table-column prop="data2" :label="fan2" width="100">
                    </el-table-column>
                    <el-table-column
                      prop="ranking1"
                      :label="ranking1"
                      width="74"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ranking2"
                      :label="ranking2"
                      width="74"
                    >
                    </el-table-column>
                    <el-table-column prop="score1" :label="score1" width="74">
                    </el-table-column>
                    <el-table-column prop="score2" :label="score2" width="74">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane
          label="风机月信息等级评估管理"
          name="second"
          :key="'second'"
        >
          <div style="float: left">查询条件</div>
          <div style="margin-left: 5%; width: 20%; float: left">
            <span>风场</span>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="margin-left: 5%"
              @change="currentSel"
            >
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="block" style="width: 20%; float: left">
            <span>月份</span>
            <el-date-picker
              v-model="value2"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月"
              style="margin-left: 5%"
              format="yyyy-MM"
              @change="gamonthlistByPage"
            >
            </el-date-picker>
          </div>
          <div style="width: 2%; float: left; margin-left: 10%">
            <el-button type="primary" @click="dialogTableVisibleOpenMonth()"
              >对比</el-button
            >
          </div>
          <div style="width: 2%; float: left; margin-left: 10%">
            <el-button type="primary" @click="exportMonthData()"
              >导出</el-button
            >
          </div>
          <el-dialog
            class="el-dialog_body"
            width="65%"
            title="月信息对比"
            :visible.sync="dialogTableVisibleMonth"
            append-to-body
          >
            <div class="margin">
              <div class="dialogLeftData">
                <el-table
                  :data="sortInOrderTop"
                  height="97"
                  border
                  :header-cell-style="headStyle"
                  :cell-style="{ textAlign: 'center', padding: '0px' }"
                  :row-style="{ height: '10px' }"
                  style="width: 100%; font-size: 10px"
                >
                  <el-table-column
                    prop="lhpj"
                    :label="fanNumber1"
                    width="252.5"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="zhpm"
                    :label="fanNumber2"
                    width="252.5"
                  >
                  </el-table-column>
                </el-table>
                <div id="leiDaTu2" class="echart"></div>
              </div>

              <div class="dialogRightData">
                <el-table
                class="table_sty"
                  :data="sortInOrder"
                  height="618"
                  :row-style="{ height: '10px' }"
                  border
                  :header-cell-style="headStyle"
                  :cell-style="{ textAlign: 'center', padding: '1px' }"
                  style="width: 100%; font-size: 10px"
                >
                  <el-table-column label="基础指标">
                    <el-table-column prop="lx" label="类型" width="85">
                    </el-table-column>
                    <el-table-column prop="index" label="指标" width="115">
                    </el-table-column>
                    <el-table-column prop="data1" :label="fan1" width="100">
                    </el-table-column>
                    <el-table-column prop="data2" :label="fan2" width="100">
                    </el-table-column>
                    <el-table-column
                      prop="ranking1"
                      :label="ranking1"
                      width="74"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ranking2"
                      :label="ranking2"
                      width="74"
                    >
                    </el-table-column>
                    <el-table-column prop="score1" :label="score1" width="74">
                    </el-table-column>
                    <el-table-column prop="score2" :label="score2" width="74">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="风机年信息等级评估管理" name="cord" :key="'cord'">
          <div style="float: left">查询条件</div>
          <div style="margin-left: 5%; width: 20%; float: left">
            <span>风场</span>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="margin-left: 5%"
              @change="currentSel"
            >
              <el-option
                v-for="item in options"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="block" style="width: 20%; float: left">
            <span>年份</span>
            <el-date-picker
              v-model="value3"
              value-format="yyyy"
              type="year"
              placeholder="选择年"
              style="margin-left: 5%"
              format="yyyy"
              @change="gayearlistByPage"
            >
            </el-date-picker>
          </div>
          <div style="width: 2%; float: left; margin-left: 10%">
            <el-button type="primary" @click="dialogTableVisibleOpenYear()"
              >对比</el-button
            >
          </div>
          <div style="width: 2%; float: left; margin-left: 10%">
            <el-button type="primary" @click="exportYearData()">导出</el-button>
          </div>
          <el-dialog
            class="el-dialog_body"
            width="65%"
            title="年信息对比"
            :visible.sync="dialogTableVisibleYear"
            append-to-body
          >
            <div class="margin">
              <div class="dialogLeftData">
                <el-table
                class="table_sty"
                  :data="sortInOrderTop"
                  height="97"
                  border
                  :header-cell-style="headStyle"
                  :cell-style="{ textAlign: 'center', padding: '0px' }"
                  :row-style="{ height: '10px' }"
                  style="width: 100%; font-size: 10px"
                >
                  <el-table-column
                    prop="lhpj"
                    :label="fanNumber1"
                    width="252.5"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="zhpm"
                    :label="fanNumber2"
                    width="252.5"
                  >
                  </el-table-column>
                </el-table>
                <div id="leiDaTu3" class="echart"></div>
              </div>

              <div class="dialogRightData">
                <el-table
                class="table_sty"
                  :data="sortInOrder"
                  height="618"
                  :row-style="{ height: '10px' }"
                  border
                  :header-cell-style="headStyle"
                  :cell-style="{ textAlign: 'center', padding: '1px' }"
                  style="width: 100%; font-size: 10px"
                >
                  <el-table-column label="基础指标">
                    <el-table-column prop="lx" label="类型" width="85">
                    </el-table-column>
                    <el-table-column prop="index" label="指标" width="115">
                    </el-table-column>
                    <el-table-column prop="data1" :label="fan1" width="100">
                    </el-table-column>
                    <el-table-column prop="data2" :label="fan2" width="100">
                    </el-table-column>
                    <el-table-column
                      prop="ranking1"
                      :label="ranking1"
                      width="74"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="ranking2"
                      :label="ranking2"
                      width="74"
                    >
                    </el-table-column>
                    <el-table-column prop="score1" :label="score1" width="74">
                    </el-table-column>
                    <el-table-column prop="score2" :label="score2" width="74">
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>

      <el-main v-if="dailyInformation == true">
        <el-table
        class="table_sty"
          id="daytable"
          :data="gridData"
          height="640"
          sortTable="custom"
          @selection-change="handleSelectionChange"
          :header-cell-style="headStyle"
          @sort-change="changeTableSort"
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column label="等级评定日信息查看">
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="windturbineid"
              label="风机"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="level"
              label="等级"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="rank"
              label="排名"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayfdl"
              label="发电量"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayllfdl"
              label="理论电量"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayfs"
              label="风速"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daygl"
              label="功率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daygzssdl"
              label="故障损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxdssdl"
              label="限电损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daywhssdl"
              label="维护损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxnssdl"
              label="性能损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayslssdl"
              label="受累损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daylyxs"
              label="利用小时数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daynhyd"
              label="拟合优度"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daysbklyl"
              label="设备可利用率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daydxkyxs"
              label="等效可用系数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayyxfss"
              label="有效风时数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxfqr"
              label="切入风速"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayjfpl"
              label="静风频率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayglyzxxs"
              label="功率一致性系数"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="text-align: center">
          <el-pagination
            
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="[18, 50, 100, 1000]"
            :page-size="pagesize"
            small
            layout="total,sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-main>
      <el-main v-if="monthlyInformation == true">
        <el-table
        class="table_sty"
          id="monthtable"
          :data="gridDataMonth"
          height="640"
          @selection-change="handleSelectionChange"
          :header-cell-style="headStyle"
          @sort-change="changeTableSort"
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column label="等级评定月信息查看">
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="windturbineid"
              label="风机"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="level"
              label="等级"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="rank"
              label="排名"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayfdl"
              label="发电量"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayllfdl"
              label="理论电量"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayfs"
              label="风速"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daygl"
              label="功率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daygzssdl"
              label="故障损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxdssdl"
              label="限电损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daywhssdl"
              label="维护损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxnssdl"
              label="性能损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayslssdl"
              label="受累损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daylyxs"
              label="利用小时数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daynhyd"
              label="拟合优度"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daysbklyl"
              label="设备可利用率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daydxkyxs"
              label="等效可用系数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayyxfss"
              label="有效风时数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxfqr"
              label="切入风速"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayjfpl"
              label="静风频率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayglyzxxs"
              label="功率一致性系数"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="text-align: center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="[18, 50, 100, 1000]"
            :page-size="pagesize"
            layout="total,sizes, prev, pager, next"
            :total="totalMonth"
          >
          </el-pagination>
        </div>
      </el-main>
      <el-main v-if="annualInformation == true">
        <el-table
        class="table_sty"
          id="yeartable"
          :data="gridDataYear"
          height="640"
          @selection-change="handleSelectionChange"
          :header-cell-style="headStyle"
          @sort-change="changeTableSort"
          :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column label="等级评定年信息查看">
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="windturbineid"
              label="风机"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="level"
              label="等级"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="rank"
              label="排名"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayfdl"
              label="发电量"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayllfdl"
              label="理论电量"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayfs"
              label="风速"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daygl"
              label="功率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daygzssdl"
              label="故障损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxdssdl"
              label="限电损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daywhssdl"
              label="维护损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxnssdl"
              label="性能损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayslssdl"
              label="受累损失"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daylyxs"
              label="利用小时数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daynhyd"
              label="拟合优度"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daysbklyl"
              label="设备可利用率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="daydxkyxs"
              label="等效可用系数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayyxfss"
              label="有效风时数"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayxfqr"
              label="切入风速"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayjfpl"
              label="静风频率"
            >
            </el-table-column>
            <el-table-column
              :sortable="'custom'"
              prop="dayglyzxxs"
              label="功率一致性系数"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
        <div style="text-align: center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage2"
            :page-sizes="[18, 50, 100, 1000]"
            :page-size="pagesize"
            layout="total,sizes, prev, pager, next"
            :total="totalYear"
          >
          </el-pagination>
        </div>
      </el-main>
    </div>
  </div>
</template>


<script>
import gradeEvaluation from "@assets/js/performanceAnalysis/gradeEvaluation";
export default gradeEvaluation;
</script>

<style lang="scss" scoped>
@import "@assets/css/performanceAnalysis/gradeEvaluation.scss";
</style>
