hb_sis_zhfx/src/views/specific/ztfx.vue

<template>
  <div class="ztfx pdfDom" >
    <div class="action-bar">
      <div class="query mg-b-16">
        <div class="query-items">
          <div class="query-item">
            <div class="lable">日期：</div>
            <div class="search-input">
              <el-date-picker
                v-model="monthValue"
                type="month"
                placeholder="选择月份"
                popper-class="date-select"
                :clearable="false"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="query-item">
            <div class="search-input select-btn">
              <button class="btn green" @click="onClickSearch">搜索</button>
              
              <!-- <el-select
                v-model="value2"
                multiple
                placeholder="计算"
                popper-class="select"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </div>
            <div class="search-input select-btn">
              <button class="btn green" @click="exportPDF">导出</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="20" class="table-panel">
      <el-col :span="12">
        <panel :title="'月度'" :showLine="false">
          <div class="table">
            <table style="width:100%;" border="0" cellspacing="0">
              <thead>
                <tr>
                  <th rowspan="2" class="type1" style="width:6vh;"></th>
                  <th rowspan="2" class="type1">
                    理论发电量
                  </th>
                  <th rowspan="2" class="type1">
                    实际发电量
                  </th>
                  <th rowspan="2" class="type1">
                    风能利用率
                  </th>
                  <th rowspan="2" class="type1">
                    维护损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    维护损失率
                  </th>
                  <th rowspan="2" class="type1">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    故障损失率
                  </th>
                  <th rowspan="2" class="type1">
                    限电损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    限电损失率
                  </th>
                  <th rowspan="2" class="type1">
                    性能损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    性能损失率
                  </th>
                  <th rowspan="2" class="type1">
                    受累损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    受累损失率
                  </th>
                </tr>
              </thead>
            </table>
            <el-scrollbar>
              <div style=" ">
                <table
                  style="width:100%;text-align:center;"
                  border="0"
                  cellspacing="0"
                >
                  <tbody>
                    <tr>
                      <td style="width:5vh;">
                        本期
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yllfdl }}
                        
                        <template v-if="compares.yllfdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yllfdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ysjfdl }}
                        <template v-if="compares.ysjfdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ysjfdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yfnlyl}}
                        <template v-if="compares.yfnlyl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yfnlyl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ywhssdl }}
                        <template v-if="compares.ywhssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ywhssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ywhssl }}
                        <template v-if="compares.ywhssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ywhssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ygzssdl }}
                        <template v-if="compares.ygzssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ygzssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ygzssl }}
                        <template v-if="compares.ygzssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ygzssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yxdssdl }}
                        <template v-if="compares.yxdssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yxdssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yxdssl }}
                        <template v-if="compares.yxdssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yxdssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yxnssdl }}
                        <template v-if="compares.yxnssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yxnssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yxnssl}}
                        <template v-if="compares.yxnssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yxnssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yslssdl }}
                        <template v-if="compares.yslssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yslssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.yslssl }}
                        <template v-if="compares.yslssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.yslssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                    </tr>
                    <tr>
                      <td style="width:5vh;">
                        同期
                      </td>
                      <td class="td-item">
                        {{ sameList.yllfdl }}
                        
                      </td>
                      <td class="td-item">
                        {{ sameList.ysjfdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.yfnlyl}}
                      </td>
                      <td class="td-item">
                        {{ sameList.ywhssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.ywhssl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.ygzssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.ygzssl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.yxdssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.yxdssl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.yxnssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.yxnssl}}
                      </td>
                      <td class="td-item">
                        {{ sameList.yslssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.yslssl }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-scrollbar>
          </div>
        </panel>
      </el-col>
      <el-col :span="12">
        <panel :title="'年度'" :showLine="false">
          <div class="table">
            <table style="width:100%;" border="0" cellspacing="0">
              <thead>
                <tr>
                <th rowspan="2" class="type1">
                    理论发电量
                  </th>
                  <th rowspan="2" class="type1">
                    实际电量
                  </th>
                  <th rowspan="2" class="type1">
                    风能利用率
                  </th>
                  <th rowspan="2" class="type1">
                    维护损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    维护损失率
                  </th>
                  <th rowspan="2" class="type1">
                    故障损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    故障损失率
                  </th>
                  <th rowspan="2" class="type1">
                    限电损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    限电损失率
                  </th>
                  <th rowspan="2" class="type1">
                    性能损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    性能损失率
                  </th>
                  <th rowspan="2" class="type1">
                    受累损失电量
                  </th>
                  <th rowspan="2" class="type1">
                    受累损失率
                  </th>
                </tr>
              </thead>
            </table>
            <el-scrollbar>
              <div style=" ">
                <table
                  style="width:100%;text-align:center;"
                  border="0"
                  cellspacing="0"
                >
                  <tbody>
                    <tr>
                       <td class="td-item">
                        {{ nowCurrents.nllfdl }}
                        
                        <template v-if="compares.nllfdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nllfdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nsjfdl }}
                        <template v-if="compares.nsjfdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nsjfdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nfnlyl}}
                        <template v-if="compares.nfnlyl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nfnlyl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nwhssdl }}
                        <template v-if="compares.nwhssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nwhssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nwhssl }}
                        <template v-if="compares.nwhssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nwhssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ngzssdl }}
                        <template v-if="compares.ngzssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ngzssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.ngzssl }}
                        <template v-if="compares.ngzssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.ngzssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nxdssdl }}
                        <template v-if="compares.nxdssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nxdssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nxdssl }}
                        <template v-if="compares.nxdssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nxdssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nxnssdl }}
                        <template v-if="compares.nxnssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nxnssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nxnssl}}
                        <template v-if="compares.nxnssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nxnssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nslssdl }}
                        <template v-if="compares.nslssdl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nslssdl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                      <td class="td-item">
                        {{ nowCurrents.nslssl }}
                        <template v-if="compares.nslssl === 2">
                          <span class="svg-icon svg-icon-green">
                            <svg-icon svgid="svg-arrow-up-1" />
                          </span>
                        </template>
                        <template v-if="compares.nslssl === 1">
                          <span class="svg-icon svg-icon-yellow">
                            <svg-icon svgid="svg-arrow-dpwn-1" />
                          </span>
                        </template>
                      </td>
                    </tr>
                    <tr>
                      <td class="td-item">
                        {{ sameList.nllfdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nsjfdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nfnlyl}}
                      </td>
                      <td class="td-item">
                        {{ sameList.nwhssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nwhssl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.ngzssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.ngzssl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nxdssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nxdssl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nxnssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nxnssl}}
                      </td>
                      <td class="td-item">
                        {{ sameList.nslssdl }}
                      </td>
                      <td class="td-item">
                        {{ sameList.nslssl }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-scrollbar>
          </div>
        </panel>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="table-complex">
      <el-col :span="12">
        <div class="table">
          <table style="width:100%;" border="0" cellspacing="0">
            <thead>
              <tr>
                <th rowspan="2" class="type1" style="width:50px;"></th>
                <th colspan="2" class="type1" style="width:205px;">麻黄山</th>
                <th colspan="2" class="type1" style="width:205px;">牛首山</th>
                <th colspan="2" class="type1" style="width:205px;">青山</th>
                <th colspan="2" class="type1" style="width:205px;">石板泉</th>
                <th colspan="2" class="type1" style="width:205px;">香山</th>
              </tr>
              <tr>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当月</th>
                <th style="width:105px;">同期</th>
              </tr>
            </thead>
          </table>
          <el-scrollbar>
            <div style=" ">
              <table
                style="width:100%;text-align:center;"
                border="0"
                cellspacing="0"
              >
                <tbody>
                  <tr>
                    <td style="width:50px;">
                      MTBF
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].mtbf }}
                      <template v-if="currentMonth['麻黄山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['麻黄山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].mtbf }}
                      <template v-if="currentMonth['牛首山'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['牛首山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].mtbf }}
                      <template v-if="currentMonth['青山'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['青山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].mtbf }}
                      <template v-if="currentMonth['石板泉'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['石板泉'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].mtbf }}
                      <template v-if="currentMonth['香山'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['香山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].tqmtbf }}
                    </td>
                  </tr>

                  <tr>
                    <td style="width:50px;">
                      MTTR
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].mttr }}
                      <template v-if="currentMonth['麻黄山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['麻黄山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].mttr }}
                      <template v-if="currentMonth['牛首山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['牛首山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].mttr }}
                      <template v-if="currentMonth['青山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['青山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].mttr }}
                      <template v-if="currentMonth['石板泉'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['石板泉'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].mttr }}
                      <template v-if="currentMonth['香山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['香山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].tqmttr }}
                    </td>
                  </tr>


                  <tr>
                    <td style="width:50px;">
                      复位
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].fwjsl }}
                      <template v-if="currentMonth['麻黄山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['麻黄山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].mttr }}
                      <template v-if="currentMonth['牛首山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['牛首山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].fwjsl }}
                      <template v-if="currentMonth['青山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['青山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].fwjsl }}
                      <template v-if="currentMonth['石板泉'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['石板泉'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].fwjsl }}
                      <template v-if="currentMonth['香山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['香山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].tqfwjsl }}
                    </td>
                  </tr>

                  <tr>
                    <td style="width:50px;">
                      转换
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].ztzhl }}
                      <template v-if="currentMonth['麻黄山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['麻黄山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].ztzhl }}
                      <template v-if="currentMonth['牛首山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['牛首山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].ztzhl }}
                      <template v-if="currentMonth['青山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['青山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].ztzhl }}
                      <template v-if="currentMonth['石板泉'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['石板泉'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].ztzhl }}
                      <template v-if="currentMonth['香山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['香山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].tqztzhl }}
                    </td>
                  </tr>

                   <tr>
                    <td style="width:50px;">
                      消缺
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].xqjsl }}
                      <template v-if="currentMonth['麻黄山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['麻黄山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['麻黄山'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].xqjsl }}
                      <template v-if="currentMonth['牛首山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['牛首山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['牛首山'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].xqjsl }}
                      <template v-if="currentMonth['青山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['青山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['青山'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].xqjsl }}
                      <template v-if="currentMonth['石板泉'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['石板泉'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['石板泉'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].xqjsl }}
                      <template v-if="currentMonth['香山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentMonth['香山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentMonth['香山'].tqxqjsl }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="table">
          <table style="width:100%;" border="0" cellspacing="0">
            <thead>
              <tr>
                <th rowspan="2" class="type1" style="width:50px;"></th>
                <th colspan="2" class="type1" style="width:205px;">麻黄山</th>
                <th colspan="2" class="type1" style="width:205px;">牛首山</th>
                <th colspan="2" class="type1" style="width:205px;">青山</th>
                <th colspan="2" class="type1" style="width:205px;">石板泉</th>
                <th colspan="2" class="type1" style="width:205px;">香山</th>
              </tr>
              <tr>
                <th style="width:105px;">当年 </th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当年</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当年</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当年</th>
                <th style="width:105px;">同期</th>
                <th style="width:105px;">当年</th>
                <th style="width:105px;">同期</th>
              </tr>
            </thead>
          </table>
          <el-scrollbar>
            <div style=" ">
              <table
                style="width:100%;text-align:center;"
                border="0"
                cellspacing="0"
              >
                <tbody>
                  <tr>
                    <td style="width:50px;">
                      MTBF
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].mtbf }}
                      <template v-if="currentYear['麻黄山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['麻黄山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].mtbf }}
                      <template v-if="currentYear['牛首山'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['牛首山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].mtbf }}
                      <template v-if="currentYear['青山'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['青山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].mtbf }}
                      <template v-if="currentYear['石板泉'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['石板泉'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].tqmtbf }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].mtbf }}
                      <template v-if="currentYear['香山'].mtbfCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['香山'].mtbfCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].tqmtbf }}
                    </td>
                  </tr>

                  <tr>
                    <td style="width:50px;">
                      MTTR
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].mttr }}
                      <template v-if="currentYear['麻黄山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['麻黄山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].mttr }}
                      <template v-if="currentYear['牛首山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['牛首山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].mttr }}
                      <template v-if="currentYear['青山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['青山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].mttr }}
                      <template v-if="currentYear['石板泉'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['石板泉'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].tqmttr }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].mttr }}
                      <template v-if="currentYear['香山'].mttrCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['香山'].mttrCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].tqmttr }}
                    </td>
                  </tr>


                  <tr>
                    <td style="width:50px;">
                      复位
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].fwjsl }}
                      <template v-if="currentYear['麻黄山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['麻黄山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].mttr }}
                      <template v-if="currentYear['牛首山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['牛首山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].fwjsl }}
                      <template v-if="currentYear['青山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['青山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].fwjsl }}
                      <template v-if="currentYear['石板泉'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['石板泉'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].tqfwjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].fwjsl }}
                      <template v-if="currentYear['香山'].fwjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['香山'].fwjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].tqfwjsl }}
                    </td>
                  </tr>

                  <tr>
                    <td style="width:50px;">
                      转换
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].ztzhl }}
                      <template v-if="currentYear['麻黄山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['麻黄山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].ztzhl }}
                      <template v-if="currentYear['牛首山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['牛首山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].ztzhl }}
                      <template v-if="currentYear['青山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['青山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].ztzhl }}
                      <template v-if="currentYear['石板泉'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['石板泉'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].tqztzhl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].ztzhl }}
                      <template v-if="currentYear['香山'].ztzhlCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['香山'].ztzhlCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].tqztzhl }}
                    </td>
                  </tr>

                   <tr>
                    <td style="width:50px;">
                      消缺
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].xqjsl }}
                      <template v-if="currentYear['麻黄山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['麻黄山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['麻黄山'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].xqjsl }}
                      <template v-if="currentYear['牛首山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['牛首山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['牛首山'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].xqjsl }}
                      <template v-if="currentYear['青山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['青山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['青山'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].xqjsl }}
                      <template v-if="currentYear['石板泉'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['石板泉'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['石板泉'].tqxqjsl }}
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].xqjsl }}
                      <template v-if="currentYear['香山'].xqjslCompare === 1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="currentYear['香山'].xqjslCompare === 2">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width:105px;">
                      {{ currentYear['香山'].tqxqjsl }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-scrollbar></div
      ></el-col>
    </el-row>
    <el-row :gutter="20" class="pie-chart-panel">
        <el-col :span="6">
            <panel title="当月理论平衡分析">
              <dual-pie-chart height="27.296vh" width="500px" :innerData=innerDataCurentsChart :outerData=innerDataCurentsChart />
            </panel>
          </el-col>
          <el-col :span="6">
            <panel title="同期理论平衡分析">
              <dual-pie-chart height="27.296vh" width="500px" :innerData=innerDataSameChart :outerData=innerDataSameChart />
            </panel>
          </el-col>
          <el-col :span="6">
            <panel title="当年理论平衡分析">
              <dual-pie-chart height="27.296vh" width="500px" :innerData=innerDataCurentsYearChart :outerData=innerDataCurentsYearChart />
            </panel>
          </el-col>
          <el-col :span="6">
            <panel title="年同期理论平衡分析">
              <dual-pie-chart height="27.296vh" width="500px" :innerData=innerDataSameYearChart :outerData=innerDataSameYearChart />
            </panel>
          </el-col>
      </el-row>
      
  </div>
</template>

<script>
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import Panel from "../../components/coms/panel/panel.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Get_PDF from "@tools/htmlToPdf";
export default {
  setup() {},
  components: {
    Panel,
    DualPieChart,
    SvgIcon,
    VertivalBarLineChart
  },
  data() {
    return {
      pickerOptions: {},
      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
      lineData: [],
      timmer: null,
      monthValue: this.getmonthValue(),
      nowCurrents: {},
      innerDataCurentsChart: [],
      innerDataSameChart: [],
      innerDataCurentsYearChart: [],
      innerDataSameYearChart: [],
      currentMonth: {
        '麻黄山': {},
        '牛首山': {},
        '石板泉': {},
        '香山': {},
        '青山':{}
      },
      currentYear: {
        '麻黄山': {},
        '牛首山': {},
        '石板泉': {},
        '香山': {},
        '青山':{}
      },
      compares: {},
      sameList: {}
    };
  },
  created() {
    
    let _this = this
    _this.$nextTick(() => {
      _this.getMonthList(false);
      _this.getSecordList(false)
      _this.timmer = setInterval(() => {
        _this.getMonthList(false)
        _this.getSecordList(false)
      }, _this.$store.state.websocketTimeSec);
    });
  },
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
  mounted() {},
  methods: {
    exportPDF (name) {
      this.BASE.showMsg({
        type: "success",
        msg: "正在导出...请稍后..."
      });
      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "测试123");
    },
    getmonthValue(){
      let data = new Date()
      let year = data.getFullYear();
      let month = data.getMonth() > 9 ? data.getMonth() : '0' + (data.getMonth() + 1)
      let toMonth = year + '-' + month
      return toMonth
    },
    monthChange(data){
      let year = data.getFullYear();
      let month = data.getMonth() > 9 ? data.getMonth() : '0' + (data.getMonth() + 1)
      let toMonth = year + '-' + month
      return toMonth
    },
    onClickSearch() {
      this.getMonthList(false)
      this.getSecordList(false)
    },

    isNumber(val) {
      return typeof val === 'number' && !isNaN(val)
    },
    getSecordList(showLoading) {
      let _this = this
      let months = ''
      if (typeof(this.monthValue) === 'string') {
        months = this.monthValue
      } else {
        months = this.monthChange(this.monthValue)
      }
      _this.API.requestData({
          showLoading,
          method: "GET",
          baseURL: 'http://10.155.32.4:8034',
          subUrl: "/specific/maincenterlist",
          data:{
            month: months
          },
          success(res) {
            let currentMonth = {}
            let currentYear = {}
            res.data['当月'].map(item => {
              for (let key in item) {
                if(_this.isNumber(item[key]) && key.indexOf('Compare') === -1) {
                  item[key] = item[key].toFixed(2)
                }
              }
              if (item.wpid === '麻黄山风电场') {
                currentMonth['麻黄山'] = item
              } else if (item.wpid === '牛首山风电场') {
                currentMonth['牛首山'] = item
              } else if (item.wpid === '青山风电场') {
                currentMonth['青山'] = item
              } else if (item.wpid === '石板泉风电场') {
                currentMonth['石板泉'] = item
              } else if (item.wpid === '香山风电场') {
                currentMonth['香山'] = item
              }
              
            })
            res.data['当年'].map(item => {
              for (let key in item) {
                if(_this.isNumber(item[key]) && key.indexOf('Compare') === -1) {
                  item[key] = item[key].toFixed(2)
                }
              }
              if (item.wpid === '麻黄山风电场') {
                currentYear['麻黄山'] = item
              } else if (item.wpid === '牛首山风电场') {
                currentYear['牛首山'] = item
              } else if (item.wpid === '青山风电场') {
                currentYear['青山'] = item
              } else if (item.wpid === '石板泉风电场') {
                currentYear['石板泉'] = item
              } else if (item.wpid === '香山风电场') {
                currentYear['香山'] = item
              }
              
            })
            _this.currentMonth = currentMonth
            _this.currentYear = currentYear
          }
      })
    },
    getMonthList(showLoading) {
      let _this = this
      let months = ''
      if (typeof(this.monthValue) === 'string') {
        months = this.monthValue
      } else {
        months = this.monthChange(this.monthValue)
      }
      _this.API.requestData({
          showLoading,
          method: "GET",
          baseURL: 'http://10.155.32.4:8034',
          subUrl: "/specific/maintoplist",
          data:{
            month: months
          },
          success(res) {
            res.data.map(item => {
              for (let key in item) {
                if(_this.isNumber(item[key]) && item.type !== '比较') {
                  item[key] = item[key].toFixed(2)
                }
              }
              if (item.type === '本期') {
                _this.nowCurrents = item
                _this.innerDataCurentsChart = [
                  {
                    value: item.ywhssl,
                    name: '维护损失率'
                  },
                  {
                    value: item.ygzssl,
                    name: '故障损失率'
                  },
                  {
                    value: item.yxdssl,
                    name: '限电损失率'
                  },
                  {
                    value: item.yxnssl,
                    name: '性能损失率'
                  },
                  {
                    value: item.yslssl,
                    name: '受累损失率'
                  },
                  {
                    value: item.yfnlyl,
                    name: '风能利用率'
                  }
                ]

                _this.innerDataCurentsYearChart = [
                  {
                    value: item.nwhssl,
                    name: '维护损失率'
                  },
                  {
                    value: item.ngzssl,
                    name: '故障损失率'
                  },
                  {
                    value: item.nxdssl,
                    name: '限电损失率'
                  },
                  {
                    value: item.nxnssl,
                    name: '性能损失率'
                  },
                  {
                    value: item.nslssl,
                    name: '受累损失率'
                  },
                  {
                    value: item.nfnlyl,
                    name: '风能利用率'
                  }
                ]
              } else if (item.type === '比较') {
                _this.compares = item
              } else {
                _this.sameList = item
                _this.innerDataSameChart = [
                  {
                    value: item.ywhssl,
                    name: '维护损失率'
                  },
                  {
                    value: item.ygzssl,
                    name: '故障损失率'
                  },
                  {
                    value: item.yxdssl,
                    name: '限电损失率'
                  },
                  {
                    value: item.yxnssl,
                    name: '性能损失率'
                  },
                  {
                    value: item.yslssl,
                    name: '受累损失率'
                  },
                  {
                    value: item.yfnlyl,
                    name: '风能利用率'
                  }
                ]
                _this.innerDataSameYearChart = [
                  {
                    value: item.nwhssl,
                    name: '维护损失率'
                  },
                  {
                    value: item.ngzssl,
                    name: '故障损失率'
                  },
                  {
                    value: item.nxdssl,
                    name: '限电损失率'
                  },
                  {
                    value: item.nxnssl,
                    name: '性能损失率'
                  },
                  {
                    value: item.nslssl,
                    name: '受累损失率'
                  },
                  {
                    value: item.nfnlyl,
                    name: '风能利用率'
                  }
                ]
              }
            })
          }
      })
    }
  }
};
</script>

<style lang="less">
.ztfx {
  font-size: 12px;
  .select-btn {
    width: 92px;
  }
  .com-panel {
    border: 1px solid #6067697d;
  }
  .table-complex {
    margin-top: 10px;
    .table {
      border: 1px solid #6067697d;
      tbody {
        tr:nth-child(2n) td {
          background-color: fade(@gray, 20%);

          &.item {
            background-color: transparent;
          }
        }
      }

      th {
        background: fade(@gray, 40);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: @gray-l;

        &.type1 {
          border-left: 0;
          border-right: 0;
        }
      }
      td {
        color: @gray-l;
        text-align: center;
        height: 26px;
        line-height: 26px;

        &.item {
          width: 100px;
        }
      }
      svg {
        height: 1.222vh;
      }
    }
  }
  .table-panel {
    margin-top: 10px;
    .panel-header {
      text-align: center;
    }
    .table {
      border: 1px solid #6067697d;
      tbody {
        tr:nth-child(2n) td {
          background-color: fade(@gray, 20%);

          &.item {
            background-color: transparent;
          }
        }
      }
      .td-item {
        width: 6vh;
      }
      th {
        background: fade(@gray, 40);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: @gray-l;

        &.type1 {
          border-left: 0;
          border-right: 0;
          height: 4vh;
        }
      }
      td {
        color: @gray-l;
        text-align: center;
        height: 26px;
        line-height: 26px;

        &.item {
          width: 100px;
        }
      }
      svg {
        height: 1.222vh;
      }
    }
  }
  .pie-chart-panel {
    margin-top: 10px;
    .line{
      border:none;
    }
  }
}
</style>