<template>
  <el-container>
    <el-main>
      <el-tabs
        type="border-card"
        style="height: 100%; width: 99.8%"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane label="日风机对比" name="first" id="ri">
          <el-row>
            <el-card shadow="always">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="风场">
                  <el-select
                    v-model="fc"
                    clearable
                    placeholder="请选择"
                    @change="query1()"
                  >
                    <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="fj"
                    collapse-tags
                    multiple
                    clearable
                    placeholder="请选择"
                    :multiple-limit="5"
                  >
                    <el-option
                      v-for="item in wtIdslist"
                      :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="Date1"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" :plain="true" @click="query_check"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :plain="true" @click="clear"
                    >清空</el-button
                  >
                </el-form-item>
              </el-form>
            </el-card>

            <el-table
              :data="tableData"
              :row-style="{ height: '1px' }"
              border
              style="width: 100%"
            >
              <el-table-column label="单机日信息对比">
                <el-table-column prop="name" label="项目" width="220">
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value1"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value1"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value2"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value2"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value3"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value3"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value4"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value4"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value5"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value5"></p>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <div id="linechar" style="width: 1900px; height: 350px"></div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="月风机对比" name="second" id="yue">
          <el-row>
            <el-card shadow="always">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="风场">
                  <el-select
                    v-model="fc"
                    clearable
                    placeholder="请选择"
                    @change="query1()"
                  >
                    <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="fj"
                    collapse-tags
                    multiple
                    clearable
                    placeholder="请选择"
                    :multiple-limit="5"
                  >
                    <el-option
                      v-for="item in wtIdslist"
                      :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="Date1"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" :plain="true" @click="query_check"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :plain="true" @click="clear"
                    >清空</el-button
                  >
                </el-form-item>
              </el-form>
            </el-card>

            <el-table
              :data="tableData_y"
              :row-style="{ height: '1px' }"
              border
              style="width: 100%"
            >
              <el-table-column label="单机月信息对比">
                <el-table-column prop="name" label="项目" width="220">
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value1"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value1"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value2"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value2"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value3"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value3"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value4"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value4"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value5"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value5"></p>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <div id="linechar_y" style="width: 1900px; height: 350px"></div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="年风机对比" name="thired" id="nian">
          <el-row>
            <el-card shadow="always">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="风场">
                  <el-select
                    v-model="fc"
                    clearable
                    placeholder="请选择"
                    @change="query1()"
                  >
                    <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="fj"
                    multiple
                    collapse-tags
                    clearable
                    placeholder="请选择"
                    :multiple-limit="5"
                  >
                    <el-option
                      v-for="item in wtIdslist"
                      :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="Date1"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" :plain="true" @click="query_check"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :plain="true" @click="clear"
                    >清空</el-button
                  >
                </el-form-item>
              </el-form>
            </el-card>

            <el-table
              :data="tableData_n"
              :row-style="{ height: '1px' }"
              border
              style="width: 100%"
            >
              <el-table-column label="单机月信息对比">
                <el-table-column prop="name" label="项目" width="220">
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value1"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value1"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value2"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value2"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value3"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value3"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value4"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value4"></p>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value1"
                  label=""
                  width="330"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.name == '风资源'">
                      <p v-html="scope.row.value5"></p>
                    </div>
                    <div v-else>
                      <p v-text="scope.row.value5"></p>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <div id="linechar_n" style="width: 1900px; height: 350px"></div>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>
<script>
import singleTransverseBenchmark from "@assets/js/benchmarkingSys/singleTransverseBenchmark";
export default singleTransverseBenchmark;
</script>

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