<template>
  <div class="dashboard-editor-container" ref="prev">
    <div v-if="isPercentage" class="percentage" style="width: 210px;height: 90px;background: #fff;position: fixed;bottom: 0;left: 0;z-index: 9999999999999;">
      <h4 style="padding-left: 10px;line-height: 0;">导出进度：</h4>
      <el-progress style="padding-left: 10px;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </div>
    <div :style="{position: 'fixed',height:'55px',top: '90px',zIndex: '999',marginBottom: '50px',background:'#f0f2f5',width: myWidth}">
      <el-date-picker v-model="yearDate" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" style="width: 250px;" format="yyyy-MM" value-format="yyyy-MM" :clearable="false" @change="changeTime" />
      <el-select v-model="jump" style="width: 140pxmargin-top:5px;;" placeholder="快捷跳转方式" class="filter-item" @visible-change="changeJump($event,jump)">
        <el-option v-for="item in jumpList" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-select v-model="pastureId" style="width: 140px;margin-top:5px;" placeholder="全部牧场" class="filter-item" @change="changePasture">
        <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="filter-item" style="position: absolute;right: 0;margin-top:5px;" type="success" icon="el-icon-edit" @click="handleDownload">导出</el-button>
    </div>
    <div style="margin-top: 50px;">
      <div>
        <h3 id="equipmentIndexCostTable">设备指标</h3>
        <el-table
          :key="equipmentIndexCostTable.tableKey"
          v-loading="equipmentIndexCostTable.listLoading"
          element-loading-text="给我一点时间"
          :data="equipmentIndexCostTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort1"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickEquipmentIndex(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标(万元)" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标(元)" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="repairCostTable">维修费</h3>
        <el-table
          :key="repairCostTable.tableKey"
          v-loading="repairCostTable.listLoading"
          element-loading-text="给我一点时间"
          :data="repairCostTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort2"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickRepairCost(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标(万元)" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标(元)" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="waterCostTable">水费</h3>
        <el-table
          :key="waterCostTable.tableKey"
          v-loading="waterCostTable.listLoading"
          element-loading-text="给我一点时间"
          :data="waterCostTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort3"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickWaterCost(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标(万元)" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标(元)" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="elecCostTable">电费</h3>
        <el-table
          :key="elecCostTable.tableKey"
          v-loading="elecCostTable.listLoading"
          element-loading-text="给我一点时间"
          :data="elecCostTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort4"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickElecCost(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标(万元)" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标(元)" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="gasCostTable">柴油费</h3>
        <el-table
          :key="gasCostTable.tableKey"
          v-loading="gasCostTable.listLoading"
          element-loading-text="给我一点时间"
          :data="gasCostTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort5"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickGasCost(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标(万元)" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标(元)" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="waterConsumptionTable">水量(吨)</h3>
        <el-table
          :key="waterConsumptionTable.tableKey"
          v-loading="waterConsumptionTable.listLoading"
          element-loading-text="给我一点时间"
          :data="waterConsumptionTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort6"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickWaterConsumption(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="elecConsumptionTable">电量(度)</h3>
        <el-table
          :key="elecConsumptionTable.tableKey"
          v-loading="elecConsumptionTable.listLoading"
          element-loading-text="给我一点时间"
          :data="elecConsumptionTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort7"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickElecConsumption(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
      <div>
        <h3 id="gasConsumptionTable">柴油用量(L)</h3>
        <el-table
          :key="gasConsumptionTable.tableKey"
          v-loading="gasConsumptionTable.listLoading"
          element-loading-text="给我一点时间"
          :data="gasConsumptionTable.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle"
          class="elTable"
          height="650"
          @sort-change="tableSort8"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="牧场" min-width="70px" align="center">
              <template slot-scope="{row}">
                <a @click="clickGasConsumption(row)">{{ row.pastureName }}</a>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="总指标" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialog.dialogFormVisible" :close-on-click-modal="false">
      <div class="table">
        <el-table
          :key="dialog.tableKey"
          v-loading="dialog.listLoading"
          element-loading-text="给我一点时间"
          :data="dialog.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable"
          @sort-change="tableSort9"
        >
          <el-table-column label="设备指标" align="center">
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="部门" min-width="70px" align="center" prop="deptname" />
          </el-table-column>
          <el-table-column label="总指标" align="center">
            <el-table-column label="预算" sortable min-width="80px" align="center" prop="monthBudget" />
            <el-table-column label="内控" sortable min-width="80px" align="center" prop="monthLimit" />
            <el-table-column label="迄今内控" sortable min-width="80px" align="center" prop="qmonthBudget" />
            <el-table-column label="迄今实际" sortable min-width="80px" align="center" prop="sumPrice" />
            <el-table-column label="实际节约" sortable min-width="80px" align="center" prop="asave" />
            <el-table-column label="实际达成率" :sortable="true" :sort-method="(a,b) => sortMethod(a ,b , 'realReason')" min-width="90px" align="center" prop="realReason" />
          </el-table-column>
          <el-table-column label="单头牛指标" align="center">
            <el-table-column label="单头牛预算" sortable min-width="80px" align="center" prop="oneCowBudget" />
            <!-- <el-table-column label="单头牛内控" sortable min-width="80px" align="center" prop="oneCowLimit" /> -->
            <el-table-column label="单头牛迄今内控" sortable min-width="80px" align="center" prop="oneCowQmonthBudget" />
            <el-table-column label="单头牛迄今实际" sortable min-width="80px" align="center" prop="oneCowSumPrice" />
            <el-table-column label="单头牛实际节约" sortable min-width="80px" align="center" prop="oneCowAsave" />
          </el-table-column>
        </el-table>
        <pagination v-show="dialog.total>=0" :total="dialog.total" :page.sync="dialog.getdataListParm.offset" :limit.sync="dialog.getdataListParm.pagecount" @pagination="getListDialog" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入
require('script-loader!file-saver')
import { GetDataByName } from '@/api/common'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { parseTime, sortChange, json2excel } from '@/utils/index.js'
import Cookies from 'js-cookie'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'EquipmentIndex',
  components: { Pagination },
  directives: { waves },
  filters: {
    keepTwoNum(value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data() {
    return {
      jump: '',
      jumpList: [{ name: '设备指标', id: '0' }, { name: '维修费用', id: '4' }, { name: '水费', id: '1' }, { name: '电费', id: '2' }, { name: '柴油费', id: '3' }, { name: '水量', id: '5' }, { name: '电量', id: '6' }, { name: '柴油量', id: '7' }],
      pastureId: parseInt(Cookies.get('pastureid')),
      findAllPasture: [],
      getPastureParam: { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
      getDepartParam: { name: 'findAllDepart1', offset: 0, pagecount: 0, parammaps: { 'pastureId': Cookies.get('pastureid'), 'eId': Cookies.get('employeid') }},
      departmentId: '',
      findAllDept: [],
      yearDate: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
      // 设备指标
      equipmentIndexCostTable: {
        listLoading: true,
        list: [],
        tableKey: 0,
        getdataListParm: {
          name: 'getChooseEqMonthBudgetListSumAll', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 维修费
      repairCostTable: {
        listLoading: true,
        list: null,
        tableKey: 0,
        getdataListParm: {
          name: 'getChooseMonthWX', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 水费
      waterCostTable: {
        listLoading: true,
        list: null,
        tableKey: 0,
        getdataListParm: {
          name: 'getChooseWaterPrice', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 电费
      elecCostTable: {
        listLoading: true,
        list: null,
        tableKey: 0,
        getdataListParm: {
          name: 'getChooseElectricityPrice', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 燃动费
      gasCostTable: {
        listLoading: true,
        list: null,
        tableKey: 0,
        getdataListParm: {
          name: 'getChooseMonthiolPrice', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 水量
      waterConsumptionTable: {
        listLoading: true, list: null, tableKey: 0,
        getdataListParm: {
          name: 'getChooseMonthWater', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 电量
      elecConsumptionTable: {
        listLoading: true, list: null, tableKey: 0,
        getdataListParm: {
          name: 'getChooseMonthElectricity', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      // 柴油用量
      gasConsumptionTable: {
        listLoading: true, list: null, tableKey: 0,
        getdataListParm: {
          name: 'getChooseMonthOilT', page: 1, offset: 1, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '', departmentId: '' }
        }
      },
      dialog: {
        dialogFormVisible: false,
        tableKey: 0, listLoading: true, list: null, total: 0,
        getdataListParm: {
          name: '', page: 1, offset: 1, pagecount: 10, returntype: 'Map',
          parammaps: { startTime: '', endTime: '', pastureId: '' }
        }
      },
      dialogStatus: '',
      textMap: {},
      requestParam: { name: '', offset: 0, pagecount: 0, parammaps: {}},
      downloadAll: {},
      isPercentage: false,
      percentage: 1,
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      myWidth:''
    }
  },
  created() {
    this.getWindowWidth()
    this.getPastureDownList()
    this.getlistEquipmentIndex()
  },

  methods: {
    getWindowWidth() {
      this.$nextTick(()=>{
        this.myWidth = this.$refs.prev.clientWidth -30 +'px'
        console.log(this.myWidth)
      })
    },
    sortMethod(a, b, c) {
      var str = 0
      var str2 = 0
      str2 = parseFloat(a[c].substring(0, a[c].length - 1))
      str = parseFloat(b[c].substring(0, b[c].length - 1))
      return str2 - str
    },
    tableSort1(column) {
      sortChange(column, this.equipmentIndexCostTable.list)
    },
    tableSort2(column) {
      sortChange(column, this.repairCostTable.list)
    },
    tableSort3(column) {
      sortChange(column, this.waterCostTable.list)
    },
    tableSort4(column) {
      sortChange(column, this.elecCostTable.list)
    },
    tableSort5(column) {
      sortChange(column, this.gasCostTable.list)
    },
    tableSort6(column) {
      sortChange(column, this.waterConsumptionTable.list)
    },
    tableSort7(column) {
      sortChange(column, this.elecConsumptionTable.list)
    },
    tableSort8(column) {
      sortChange(column, this.gasConsumptionTable.list)
    },
    tableSort9(column) {
      sortChange(column, this.dialog.list)
    },
    changeJump(callback, jump) {
      if (!callback) {
        if (jump !== '') {
          console.log(jump)
          if (jump == '维修费用') {
            window.scrollTo(0, document.getElementById('repairCostTable').offsetTop - 150)
            // console.log(myHeight1, '11111')
          } else if (jump == '水费') {
            window.scrollTo(0, document.getElementById('waterCostTable').offsetTop - 150)
          } else if (jump == '电费') {
            window.scrollTo(0, document.getElementById('elecCostTable').offsetTop - 150)
            // console.log(myHeight3, '3333')
          } else if (jump == '柴油费') {
            window.scrollTo(0, document.getElementById('gasCostTable').offsetTop - 150)
          } else if (jump == '水量') {
            window.scrollTo(0, document.getElementById('waterConsumptionTable').offsetTop - 150)
          } else if (jump == '电量') {
            window.scrollTo(0, document.getElementById('elecConsumptionTable').offsetTop - 150)
          } else if (jump == '柴油量') {
            window.scrollTo(0, document.getElementById('gasConsumptionTable').offsetTop - 150)
          } else {
            window.scrollTo(0, document.getElementById('equipmentIndexCostTable').offsetTop - 150)
          }
        }
      }
    },
    handleDownload() {
      this.$alert('正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
      this.isPercentage = true
      this.percentage = 1
      var timer = setInterval(() => {
        this.percentage += 5
        if (this.percentage > 95) {
          this.percentage = 99
          clearInterval(timer)
        }
        this.percentage = this.percentage
      }, 1000)
      this.requestParam.name = 'DownloadEquipment'
      this.requestParam.offset = 0
      this.requestParam.pagecount = 0
      this.requestParam.parammaps = {}
      this.requestParam.parammaps.startTime = this.yearDate[0]
      this.requestParam.parammaps.endTime = this.yearDate[1]
      if (this.pastureId == 18) {
        this.requestParam.parammaps.pastureId = ''
      } else {
        this.requestParam.parammaps.pastureId = this.pastureId
      }
      this.requestParam.parammaps.departmentId = this.departmentId
      this.requestParam.parammaps.deptId = this.requestParam.parammaps.departmentId
      console.log(this.requestParam)
      const requestParam = this.requestParam
      const url = process.env.VUE_APP_BASE_API + 'authdata/downloadmailreport'// 请求下载文件的地址
      axios({
        method: 'post', url: url, data: requestParam, headers: { token: getToken(), optname: 'insertcustomdoc' }, responseType: 'blob'
      }).then(res => {
        if (!res) return
        this.percentage = 99
        setTimeout(() => {
          this.isPercentage = false
        }, 2000)
        const blob = new Blob([res.data], {
          type: 'application/octet-stream'
        })
        const url = window.URL.createObjectURL(blob)
        const aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        const docname = '设备指标.xlsx'
        aLink.setAttribute('download', docname) // 下载的文件
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
        window.URL.revokeObjectURL(url)
      })
    },
    getPastureDownList() {
      GetDataByName(this.getPastureParam).then(response => {
        this.findAllPasture = response.data.list
        this.getDepartDownList()
      })
    },
    getDepartDownList() {
      GetDataByName(this.getDepartParam).then(response => {
        this.findAllDept = response.data.list
      })
    },
    changePasture(item) {
      this.getDepartParam.parammaps.pastureId = item
      this.getDepartDownList()
      this.departmentId = ''
      this.getlistEquipmentIndex()
    },
    changeTime() {
      if (parseTime(this.yearDate[0], '{y}-{m}') == parseTime(this.yearDate[1], '{y}-{m}') && parseTime(this.yearDate[0], '{y}-{m}') == parseTime(new Date(), '{y}-{m}')) {
        this.yearDate = [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')]
      } else if (parseTime(this.yearDate[0], '{y}-{m}') !== parseTime(this.yearDate[1], '{y}-{m}') && parseTime(this.yearDate[0], '{y}-{m}') == parseTime(new Date(), '{y}-{m}')) {
        this.yearDate = [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(this.yearDate[1], '{y}-{m}') + '-00']
      } else if (parseTime(this.yearDate[0], '{y}-{m}') !== parseTime(this.yearDate[1], '{y}-{m}') && parseTime(this.yearDate[1], '{y}-{m}') == parseTime(new Date(), '{y}-{m}')) {
        this.yearDate = [parseTime(this.yearDate[0], '{y}-{m}') + '-00', parseTime(new Date(), '{y}-{m}-{d}')]
      } else {
        this.yearDate = [parseTime(this.yearDate[0], '{y}-{m}') + '-00', parseTime(this.yearDate[1], '{y}-{m}') + '-00']
      }
      this.getlistEquipmentIndex()
    },
    // 设备指标
    getlistEquipmentIndex() {
      this.equipmentIndexCostTable.listLoading = true
      this.equipmentIndexCostTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.equipmentIndexCostTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.equipmentIndexCostTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.equipmentIndexCostTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.equipmentIndexCostTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            response.data.list[i].index = i + 1
          }
          this.equipmentIndexCostTable.list = response.data.list
        } else {
          this.equipmentIndexCostTable.list = []
        }
        setTimeout(() => {
          this.equipmentIndexCostTable.listLoading = false
          this.getListRepair()
        }, 100)
      })
    },
    // 维修费
    getListRepair() {
      this.repairCostTable.listLoading = true
      this.repairCostTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.repairCostTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.repairCostTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.repairCostTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.repairCostTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.repairCostTable.list = response.data.list
        } else {
          this.repairCostTable.list = []
        }
        setTimeout(() => {
          this.getListWater()
          this.repairCostTable.listLoading = false
        }, 100)
      })
    },
    // 水费
    getListWater() {
      this.waterCostTable.listLoading = true
      this.waterCostTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.waterCostTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.waterCostTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.waterCostTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.waterCostTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.waterCostTable.list = response.data.list
        } else {
          this.waterCostTable.list = []
        }
        setTimeout(() => {
          this.waterCostTable.listLoading = false
          this.getListElec()
        }, 100)
      })
    },
    // 电费
    getListElec() {
      this.elecCostTable.listLoading = true
      this.elecCostTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.elecCostTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.elecCostTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.elecCostTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.elecCostTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.elecCostTable.list = response.data.list
        } else {
          this.elecCostTable.list = []
        }
        setTimeout(() => {
          this.getListGas()
          this.elecCostTable.listLoading = false
        }, 100)
      })
    },
    // 燃动费 table
    getListGas() {
      this.gasCostTable.listLoading = true
      this.gasCostTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.gasCostTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.gasCostTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.gasCostTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.gasCostTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.gasCostTable.list = response.data.list
        } else {
          this.gasCostTable.list = []
        }
        setTimeout(() => {
          this.gasCostTable.listLoading = false
          this.getListWaterConsumption()
        }, 100)
      })
    },
    // 水量 table
    getListWaterConsumption() {
      this.waterConsumptionTable.listLoading = true
      this.waterConsumptionTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.waterConsumptionTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.waterConsumptionTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.waterConsumptionTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.waterConsumptionTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.waterConsumptionTable.list = response.data.list
        } else {
          this.waterConsumptionTable.list = []
        }
        setTimeout(() => {
          this.getListElecConsumption()
          this.waterConsumptionTable.listLoading = false
        }, 100)
      })
    },
    // 电量 table
    getListElecConsumption() {
      this.elecConsumptionTable.listLoading = true
      this.elecConsumptionTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.elecConsumptionTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.elecConsumptionTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.elecConsumptionTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.elecConsumptionTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.elecConsumptionTable.list = response.data.list
        } else {
          this.elecConsumptionTable.list = []
        }
        setTimeout(() => {
          this.getListGasConsumption()
          this.elecConsumptionTable.listLoading = false
        }, 100)
      })
    },
    // 柴油用量 table
    getListGasConsumption() {
      this.gasConsumptionTable.listLoading = true
      this.gasConsumptionTable.getdataListParm.parammaps.startTime = this.yearDate[0]
      this.gasConsumptionTable.getdataListParm.parammaps.endTime = this.yearDate[1]
      this.gasConsumptionTable.getdataListParm.parammaps.pastureId = this.pastureId
      this.gasConsumptionTable.getdataListParm.parammaps.departmentId = this.departmentId
      GetDataByName(this.gasConsumptionTable.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.gasConsumptionTable.list = response.data.list
        } else {
          this.gasConsumptionTable.list = []
        }
        setTimeout(() => {
          this.gasConsumptionTable.listLoading = false
        }, 100)
      })
    },
    getListDialog() {
      this.dialog.listLoading = true
      GetDataByName(this.dialog.getdataListParm).then(response => {
        if (response.data.list == null) {
          this.dialog.list = response.data.list
          this.dialog.pageNum = 0
          this.dialog.pageSize = 0
          this.dialog.total = 0
        } else {
          this.dialog.list = response.data.list
          this.dialog.pageNum = response.data.pageNum
          this.dialog.pageSize = response.data.pageSize
          this.dialog.total = response.data.total
        }
        setTimeout(() => {
          this.dialog.listLoading = false
        }, 100)
      })
    },
    // 设备指标-点击
    clickEquipmentIndex(row) {
      if (row.pastureName !== '现代牧业') {
        console.log(this.yearDate, '0000233')
        console.log(this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')), '0000233')
        this.textMap.equipmentIndex = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '设备指标'
        this.dialogStatus = 'equipmentIndex'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseEqMonthBudgetListSumAllDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 维修费-点击
    clickRepairCost(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.repair = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '维修费'
        this.dialogStatus = 'repair'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseMonthWXDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 水费-点击
    clickWaterCost(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.water = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '水费'
        this.dialogStatus = 'water'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseWaterPriceDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 电费-点击
    clickElecCost(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.elec = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '电费'
        this.dialogStatus = 'elec'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseElectricityPriceDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 柴油费-点击
    clickGasCost(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.gas = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '柴油费'
        this.dialogStatus = 'gas'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseMonthiolPriceDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 水量-点击
    clickWaterConsumption(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.waterConsumption = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '水量'
        this.dialogStatus = 'waterConsumption'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseMonthWaterDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 电量-点击
    clickElecConsumption(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.elecConsumption = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '电量'
        this.dialogStatus = 'elecConsumption'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseMonthElectricityDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    // 柴油用量-点击
    clickGasConsumption(row) {
      if (row.pastureName !== '现代牧业') {
        this.textMap.gasConsumption = row.pastureName + this.yearDate[0].substring(0, this.yearDate[0].lastIndexOf('-')) + '-' + this.yearDate[1].substring(0, this.yearDate[1].lastIndexOf('-')) + '柴油用量'
        this.dialogStatus = 'gasConsumption'
        this.dialog.dialogFormVisible = true
        this.dialog.getdataListParm.name = 'getChooseMonthOilTDepartment'
        this.dialog.getdataListParm.parammaps.startTime = this.yearDate[0]
        this.dialog.getdataListParm.parammaps.endTime = this.yearDate[1]
        this.dialog.getdataListParm.parammaps.pastureId = row.pastureId
        this.getListDialog()
      }
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (row.pastureName == '现代牧业') {
          return {
            textDecoration: 'none'
          }
        } else {
          return {
            textDecoration: 'underline'
          }
        }
      }
      return {
        textDecoration: 'none'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  h3{
    background:#fff;line-height:50px;margin-bottom: 0;padding-left:10px;
  }
}
</style>
<style type="text/css">
  .el-date-editor .el-range-separator{width: 10%;}
</style>
