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

            <el-form-item label="结束时间">
              <el-date-picker
                v-model="endDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions">
              >
              </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" >导出</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_fc">
                  <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_pj"
                >
                  <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_xl"
                  
                >
                  <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 newPerformanceList from "@assets/js/benchmarkingSys/newPerformanceList";
export default newPerformanceList;
</script>

<style lang="scss" scoped>
 @import "@assets/css/benchmarkingSys/newPerformanceList.scss";
</style>