
<template>
  <div class="app-container">
    <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 class="filter-container" style="position: relative;">
      <div v-show="isPraseTime" class="block">
        <el-date-picker v-model="praseTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="top:-3px" :clearable="false" />
      </div>
      <div v-show="isPraseTime" style="position: absolute;top:10px;right:15%;font-size:30px">
        <i class="el-icon-s-data" @click="chartIcon" />
        <i class="el-icon-date" @click="tableIcon" />
      </div>
      <el-button v-if="isDownLoad" class="filter-item" type="success" icon="el-icon-edit" style="position: absolute;top:10px;right:2%;" @click="handleDownloadAll">导出</el-button>
    </div>

    <el-row v-show="chartBx">
      <el-col :span="16">
        <p style="color:#769cfc;font-weight:bold;font-size:22px">各牧场设备概况比例</p>
        <div id="lineChart1" style="width: 100%;height:400px;" />
      </el-col>
      <el-col :span="8">
        <p style="color:#769cfc;font-weight:bold;font-size:22px">{{ pasture }}设备概况</p>
        <div id="lineChart2" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <el-row v-show="tableBx">
      <el-select v-show="isType" v-model="getDeptListParm.parammaps.type" class="filter-item" style="width: 120px;" @change="changeType">
        <el-option
          v-for="item in types"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <div style="padding:20px 0px">
        <div v-show="isTitle"><b @click="goBackPasture">所有牧场</b>&gt;<span>{{ seeTemp.pastureName }}</span></div>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="tableCellStyle"
        class="elTable"
      >
        <el-table-column label="序号" align="center" type="index" width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="isTable1" label="牧场" min-width="140px" align="center">
          <template slot-scope="{row}">
            <a @click="tableCellClick1(row)">{{ row.pastureName }}</a>
          </template>
        </el-table-column>
        <el-table-column v-if="isTable2" label="部门" min-width="140px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.departmentName }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="isTable3" label="设备类别" min-width="140px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备数量" min-width="110px" align="center">
          <template slot-scope="scope">
            <span v-if="isTable1">{{ scope.row.eqSum }}</span>
            <a v-if="isTable2" @click="tableCellClick2(scope.row)">{{ scope.row.eqSum }}</a>
            <a v-if="isTable3" @click="tableCellClick3(scope.row)">{{ scope.row.eqSum }}</a>
          </template>
        </el-table-column>
        <el-table-column label="在用数量" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.eqUse }}</span>
          </template>
        </el-table-column>
        <el-table-column label="闲置数量" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.eqXZ }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报废数量" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.eqBF }}</span>
          </template>
        </el-table-column>
        <el-table-column label="封存数量" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.eqFC }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在用比例" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ (scope.row.eqUse / scope.row.eqSum)*100 | keepTwoNum }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="闲置比例" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ (scope.row.eqXZ / scope.row.eqSum)*100 | keepTwoNum }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="报废比例" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ (scope.row.eqBF / scope.row.eqSum)*100 | keepTwoNum }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="封存比例" min-width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ (scope.row.eqFC / scope.row.eqSum)*100 | keepTwoNum }}%</span>
          </template>
        </el-table-column>

      </el-table>
      <pagination
        v-show="total>0"
        v-if="isTable1"
        :total="total"
        :page.sync="getdataListParm.offset"
        :limit.sync="getdataListParm.pagecount"
        @pagination="getList"
      />
      <pagination
        v-show="total>0"
        v-if="isTable2"
        :total="total2"
        :page.sync="getDeptListParm.offset"
        :limit.sync="getDeptListParm.pagecount"
        @pagination="getDeptList"
      />
      <pagination
        v-show="total>0"
        v-if="isTable3"
        :total="total3"
        :page.sync="getTypeListParm.offset"
        :limit.sync="getTypeListParm.pagecount"
        @pagination="getTypeList"
      />
    </el-row>
  </div>

</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme

// eslint-disable-next-line no-unused-vars
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { GetDataByName, GetDataByNames, GetReportform, GetAccount } from '@/api/common'
import { parseTime } from '@/utils/index.js'
import { json2excel } from '@/utils/index.js'

import Cookies from 'js-cookie'
export default {
  name: 'EquipmentOverview',
  directives: { waves },
  components: { Pagination },
  filters: {
    keepTwoNum(value) {
      value = Number(value)
      return value.toFixed(2)
    }
  },
  data() {
    return {
      isDownLoad: false,
      downLoadParm: {},
      pasture: Cookies.get('pasturename'),
      praseTime: parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'),
      getLineChart1Parm: {
        name: 'getEqRunSurveyListPasture',
        parammaps: {
          praseTime: parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'),
          pastureName: Cookies.get('pasturename')
        }
      },
      getLineChart2Parm: {
        name: 'getEqRunSurveyListDay',
        parammaps: {
          praseTime: parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'),
          pastureName: Cookies.get('pasturename')
        }
      },

      lineChart1: null,
      lineChart2: null,

      chart_data2: {
        // pastureName: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
        // arr1: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
        // arr2: [22, 44, 77, 88, 444, 234, 342, 34, 234, 66],
        // arr3: [22, 24, 77, 88, 45, 24, 42, 34, 234, 66],
        // arr4: [222, 54, 6, 88, 444, 234, 32, 34, 34, 66]
      },
      chart_data3: {
        // total: 5000,
        // name: ['在用', '闲置', '封存', '报废'],
        // psum: [
        //   { value: 335, name: '在用' },
        //   { value: 310, name: '闲置' },
        //   { value: 234, name: '封存' },
        //   { value: 135, name: '报废' }
        // ]
      },

      tableBx: false,
      chartBx: true,

      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      getdataListParm: {
        name: 'getEqRunSurveyListPasture',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          praseTime: parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'),
          type: 0
        }
      },

      seeTemp: {},
      isTitle: false,
      isPraseTime: true,
      isTable1: true,
      types: [{ id: 0, name: '按部门' }, { id: 1, name: '按设备类别' }],
      isType: false,
      total2: 0,
      isTable2: false,
      getDeptListParm: {
        name: 'getEqRunSurveyListDept',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          praseTime: parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'),
          type: 0,
          pastureName: ''
        }
      },
      total3: 0,
      isTable3: false,
      isPercentage: false,
      percentage: 1,
      getTypeListParm: {
        name: 'getEqRunSurveyListEqclass',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          praseTime: parseTime(new Date().getTime() - 24 * 60 * 60 * 1000, '{y}-{m}-{d}'),
          pastureName: '',
          type: 0
        }
      }
    }
  },

  watch: {
    'praseTime': {
      deep: true,
      handler: function(newVal, oldVal) {
        this.getLineChart1Parm.parammaps.praseTime = newVal
        this.getLineChart2Parm.parammaps.praseTime = newVal
        this.getdataListParm.parammaps.praseTime = newVal
        this.getDeptListParm.parammaps.praseTime = newVal
        this.getTypeListParm.parammaps.praseTime = newVal

        this.getLineChart1()
        this.getLineChart2()
        this.getList()
      }
    },
    'isTitle': {
      deep: true,
      handler: function(newVal, oldVal) {
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      }
    }
  },

  created() {
    this.getLineChart1()
    this.getLineChart2()
    this.getList()
  },
  mounted() {
    // this.roadlineChart1(this.chart_data2)
    // this.roadlineChart2(this.chart_data3, this.pasture)

  },
  methods: {
    // 各牧场年度维修成本对比

    chartIcon() {
      this.tableBx = false
      this.chartBx = true
      this.isDownLoad = false
    },
    tableIcon() {
      this.tableBx = true
      this.chartBx = false
      this.isDownLoad = true
    },
    getLineChart1() {
      GetReportform(this.getLineChart1Parm).then(response => {
        console.log('图2', response)
        this.chart_data2 = response.data.chart_data
        this.roadlineChart1(this.chart_data2)
      })
    },
    getLineChart2() {
      GetReportform(this.getLineChart2Parm).then(response => {
        console.log('图3', response)
        if (response.data === null || response.data.psm === null) {
          this.chart_data3 = { name: [], psum: [] }
          this.chart_data3.total = '0'
          this.roadlineChart2(this.chart_data3, this.pasture)
        } else {
          this.chart_data3.psum = response.data.psm
          var name = []

          response.data.psm.forEach(function(i) {
            name.push(i.name)
          })

          this.chart_data3.name = name
          this.chart_data3.total = response.data.total
          this.roadlineChart2(this.chart_data3, this.pasture)
        }
      })
    },

    // 每月维修成本对比
    roadlineChart1(chart_data2) {
      if (this.lineChart1 != null) {
        this.lineChart1.dispose()
      }
      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
      var option = {
        title: { },
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['在用比例', '闲置比例', '报废比例', '封存比例']
        },
        color: ['#42b983', '#769cfc', '#FFB800', '#ff9d6e'],
        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', data: chart_data2.pastureName, name: '牧场', axisLabel: { interval: 0, rotate: 45 }}],

        yAxis: [{ type: 'value', name: '比率(%)', mix: 0, max: 100, interval: 10, axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '在用比例',
            type: 'line',
            data: chart_data2.eqUseRate,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '闲置比例',
            type: 'line',
            data: chart_data2.eqXZRate,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '报废比例',
            type: 'line',
            data: chart_data2.eqBFRate,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '封存比例',
            type: 'line',
            data: chart_data2.eqFCRate,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.lineChart1.setOption(option)
      window.onresize = function() {
        this.lineChart1.resize()
      }
      var that = this
      this.lineChart1.on('click', function(param, i) {
        console.log(param)
        that.pasture = param.name
        that.getLineChart2Parm.parammaps.pastureName = param.name
        that.getLineChart2()
      })
    },

    // 每月维修成本对比
    roadlineChart2(chart_data3, pasture) {
      if (this.lineChart2 != null) {
        this.lineChart2.dispose()
      }
      this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
      var option = {
        // title: { text: pasture + '设备情况', textStyle: { color: '#769cfc' }},
        title: {
          zlevel: 0,
          text: [
            '{value|设备数量}',
            '{name|' + chart_data3.total + '}'
          ].join('\n'),
          rich: {
            value: {
              color: '#303133',
              fontSize: 20,
              fontWeight: 'bold',
              lineHeight: 40
            },
            name: {
              color: '#909399',
              lineHeight: 20
            }
          },
          top: 'center',
          left: '50%',
          textAlign: 'center',
          textStyle: {
            rich: {
              value: {
                color: '#303133',
                fontSize: 20,
                fontWeight: 'bold',
                lineHeight: 40
              },
              name: {
                color: '#909399',
                fontSize: 20,
                lineHeight: 20
              }
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: chart_data3.name, top: 40
        },
        color: ['#42b983', '#769cfc', '#FFB800', '#cebbfd'],
        grid: { left: '1%', right: '5%', bottom: '4%', containLabel: true },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'outside',
              normal: {
                show: false,
                position: 'outside',
                formatter: function(data) { // 设置圆饼图中间文字排版
                  return data.value + '\n' + data.name
                }
              }
            },

            labelLine: {
              show: false
            },
            data: chart_data3.psum,
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            }
          }

        ]
      }
      this.lineChart2.setOption(option)
      window.onresize = function() {
        this.lineChart2.resize()
      }
      this.lineChart2.on('click', function(param, i) {
        console.log(param)
      })
    },

    // 部门统计
    roadpieChart1(chart_data4, month) {
      if (this.pieChart1 != null) {
        this.pieChart1.dispose()
      }
      this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
      var option = {
        title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: chart_data4.name, top: 40
        },
        color: ['#42b983', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: chart_data4.psum,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }

        ]
      }
      this.pieChart1.setOption(option)
      window.onresize = function() {
        this.pieChart1.resize()
      }
      var that = this
      this.pieChart1.on('click', function(param, i) {
        console.log(param)
        that.deptment = param.name
        that.getBarChart2Parm.parammaps.deptName = param.name
        that.getBarChart2()
      })
    },
    // 维修成本
    roadBarChart2(chart_data5, deptment) {
      if (this.barChart2 != null) {
        this.barChart2.dispose()
      }
      this.barChart2 = echarts.init(document.getElementById('barChart2'))
      var option = {
        title: { text: deptment + '维修成本', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['成本']
        },
        color: ['#42b983', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', data: chart_data5.typeName, name: '设备类别', axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value', name: '元' }],
        series: [
          {
            name: '成本',
            type: 'bar',
            data: chart_data5.eqCost,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.barChart2.setOption(option)
      window.onresize = function() {
        this.barChart2.resize()
      }
      var that = this
    },

    getList() {
      GetDataByName(this.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        this.list = response.data.list
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.pastureName !== '现代牧业' && row.departmentName == null && row.typeName == null && columnIndex === 1) {
        return {
          textDecoration: 'underline'
        }
      }
      if (this.isTable2 == true) {
        if (row.eqSum !== null && columnIndex == 2) {
          return {
            textDecoration: 'underline'
          }
        }
      }
      if (this.isTable3 == true) {
        if (row.eqSum !== null && columnIndex == 2) {
          return {
            textDecoration: 'underline'
          }
        }
      }

      return {
        textDecoration: 'none'
      }
    },
    tableCellClick1(row) { // 获取焦点弹出关联多个子账号
      if (row.pastureName !== '现代牧业') {
        this.seeTemp = Object.assign({}, row)
        // 日期/牧场table隐藏
        this.isPraseTime = false
        this.isTable1 = false
        // 部门table/标题显示
        this.isTable2 = true
        this.isTitle = true
        this.isType = true
        this.listLoading = true
        this.getDeptList()
      } else {
        this.isTitle = false
      }
    },
    tableCellClick2(row) {
      console.log('跳转了', row)
      // this.$router.push({ path: '/asset/basics', query: { providerName: row.providerName }})

      if (Cookies.get('pasturename') == '现代牧业') {
        this.$router.push({ path: '/asset/basics', query: { myPath: 'equipmentOverview', pastureName: this.getDeptListParm.parammaps.pastureName, pastureId: this.getDeptListParm.parammaps.pastureId, departmentId: row.deptId }})
      } else {
        if (this.getDeptListParm.parammaps.pastureName == Cookies.get('pasturename')) {
          this.$router.push({ path: '/asset/basics', query: { pastureName: this.getDeptListParm.parammaps.pastureName, pastureId: this.getDeptListParm.parammaps.pastureId, departmentId: row.deptId }})
          this.getdataListParm.parammaps.pastureName = this.getDeptListParm.parammaps.pastureName
          this.getdataListParm.parammaps.pastureId = this.getDeptListParm.parammaps.pastureId
          this.getdataListParm.parammaps.departmentId = row.deptId
        } else {
          this.$message({ type: 'error', message: '请联系管理员开通相关牧场数据权限' })
        }
      }
    },
    tableCellClick3(row) {
      console.log('跳转了', row)
      // this.$router.push({ path: '/asset/basics', query: { providerName: row.providerName }})

      if (Cookies.get('pasturename') == '现代牧业') {
        this.$router.push({ path: '/asset/basics', query: { myPath: 'equipmentOverview2', pastureName: this.getDeptListParm.parammaps.pastureName, pastureId: this.getDeptListParm.parammaps.pastureId, eqClassId: row.eqClassId }})
      } else {
        if (this.getDeptListParm.parammaps.pastureName == Cookies.get('pasturename')) {
          this.$router.push({ path: '/asset/basics', query: { pastureName: this.getDeptListParm.parammaps.pastureName, pastureId: this.getDeptListParm.parammaps.pastureId, eqClassId: row.eqClassId }})
          this.getdataListParm.parammaps.pastureName = this.getDeptListParm.parammaps.pastureName
          this.getdataListParm.parammaps.pastureId = this.getDeptListParm.parammaps.pastureId
          this.getdataListParm.parammaps.eqClassId = row.eqClassId
        } else {
          this.$message({ type: 'error', message: '请联系管理员开通相关牧场数据权限' })
        }
      }
    },
    changeType(val) {
      console.log('选中值')
      this.Type = val
      if (this.Type == 0) {
        this.listLoading = true
        this.getDeptList()
        // 类别table隐藏/部门table显示
        this.isTable1 = false
        this.isTable2 = true
        this.isTable3 = false
      } else {
        this.listLoading = true
        // 部门table隐藏/类别table显示
        this.isTable1 = false
        this.isTable2 = false
        this.isTable3 = true
        this.getTypeList()
      }
    },
    getDeptList() {
      this.getDeptListParm.parammaps.pastureName = this.seeTemp.pastureName
      this.getDeptListParm.parammaps.pastureId = this.seeTemp.pastureId
      GetDataByName(this.getDeptListParm).then(response => {
        console.log('table数据', response.data.list)
        this.list = response.data.list
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.total2 = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    getTypeList() {
      this.getTypeListParm.parammaps.pastureName = this.seeTemp.pastureName
      GetDataByName(this.getTypeListParm).then(response => {
        console.log('table数据', response.data.list)
        this.list = response.data.list
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        this.total3 = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    goBackPasture() {
      // 集团table1显示/部门table/类别table/标题隐藏
      this.isTable1 = true
      this.isTable2 = false
      this.isTable3 = false
      this.isTitle = false
      this.isType = false
      this.listLoading = true
      this.isPraseTime = true

      this.getList()
    },

    handleDownloadAll() {
      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.downLoadParm.name = 'getEqRunSurveyListPasture'
      this.downLoadParm.parammaps = this.getdataListParm.parammaps
      GetAccount(this.downLoadParm).then(response => {
        if (response.data.list !== '') {
          this.percentage = 99
          setTimeout(() => {
            this.isPercentage = false
          }, 2000)
        }
        this.$nextTick(() => {
          this.downLoadElecList = response.data.list
          console.log(this.downLoadElecList)
          if (response.data.list !== null) {
            for (var i = 0; i < response.data.list.length; i++) {
              this.downLoadElecList[i].ZYBL = ((parseFloat(response.data.list[i].eqUse) / parseFloat(response.data.list[i].eqSum)) * 100).toFixed(2) + '%'
              this.downLoadElecList[i].XZBL = ((parseFloat(response.data.list[i].eqXZ) / parseFloat(response.data.list[i].eqSum)) * 100).toFixed(2) + '%'
              this.downLoadElecList[i].BFBL = ((parseFloat(response.data.list[i].eqBF) / parseFloat(response.data.list[i].eqSum)) * 100).toFixed(2) + '%'
              this.downLoadElecList[i].FCBL = ((parseFloat(response.data.list[i].eqFC) / parseFloat(response.data.list[i].eqSum)) * 100).toFixed(2) + '%'
            }
          }
          const elecExcelDatas = [
            {
              tHeader: ['牧场', '设备数量', '在用数量', '闲置数量', '报废数量', '封存数量', '在用比例', '闲置比例', '报废比例', '封存比例'],
              filterVal: ['pastureName', 'eqSum', 'eqUse', 'eqXZ', 'eqBF', 'eqFC', 'ZYBL', 'XZBL', 'BFBL', 'FCBL'],
              tableDatas: this.downLoadElecList,
              sheetName: '设备概况'
            }
          ]
          json2excel(elecExcelDatas, '设备概况', true, 'xlsx')
        })
      })
    }

  }
}
</script>
<style>
.el-row {
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>

<style lang="scss" scoped>

.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
