modernDairy/src/views/report/maintenanceCategoryAnalysis/index.vue

<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">
      <el-date-picker v-model="table.getListParm.parammaps.year" style="width:100px;" :clearable="false" class="filter-item" type="year" placeholder="选择年" format="yyyy" value-format="yyyy" @change="changeYear" />
      <el-date-picker v-model="month" class="filter-item" type="month" style="width:90px;" placeholder="选择月" format="MM" value-format="MM" />
      <el-select v-model="table.getListParm.parammaps.eqClassName" clearable filterable placeholder="设备类别" class="filter-item" @change="changeEqClassName">
        <el-option v-for="item in equipmentCategoryList" :key="item.id" :label="item.typeName" :value="item.typeName" />
      </el-select>
      <el-select v-model="table.getListParm.PastureName" :disabled="table.isChart && checkDepartment== '2'" multiple clearable filterable placeholder="牧场" class="filter-item" @change="changeEqClassName">
        <el-option v-for="item in findAllPasture" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-select v-model="table.getListParm.DepartmentName" :disabled="table.isChart && checkPasture== '1'" multiple clearable filterable placeholder="部门" class="filter-item" @change="changeEqClassName">
        <el-option v-for="item in findAllDepart" :key="item.id" :label="item.name" :value="item.name" />
      </el-select>
      <el-radio v-if="table.isChart" v-model="checkPasture" label="1" @change="changeRadio">牧场</el-radio>
      <el-radio v-if="table.isChart" v-model="checkDepartment" label="2" @change="changeRadio">部门</el-radio>
      <el-button class="filter-item" type="success" icon="el-icon-download" style="float: right;margin-right: 5px;" @click="handleExport('table')">导出</el-button>
    </div>
    <div v-if="table.isTable" class="table">
      <el-button type="text" style="float: right;margin-right: 5px;" @click="handleSwitchChart('table')">切换图表</el-button>
      <h4>维修费用（元）</h4>
      <el-table
        :key="table.tableKey"
        v-loading="table.listLoading"
        element-loading-text="给我一点时间"
        :data="table.list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="tableCellStyle"
        class="elTable table-fixed"
        @sort-change="tableSort1"
      >
        <el-table-column label="序号" align="center" type="index" width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="牧场" min-width="110px" align="center" prop="pastureName" />
        <el-table-column label="部门" min-width="110px" align="center" prop="departmentName" />
        <el-table-column label="设备类别" min-width="130px" align="center">
          <template slot-scope="{row}">
            <a @click="handleEquipment(row)">{{ row.eqClassName }}</a>
          </template>
        </el-table-column>
        <el-table-column label="维修费用（元）" min-width="110px" align="center" sortable prop="psum" />
        <el-table-column label="维修设备数量" min-width="110px" align="center" sortable prop="eqcodes" />
        <el-table-column label="平均维修费（元）" min-width="110px" align="center" sortable prop="avgsum" />
      </el-table>
      <pagination v-show="table.total>0" :total="table.total" :page.sync="table.getListParm.offset" :limit.sync="table.getListParm.pagecount" @pagination="getList" />
    </div>
    <div v-if="table.isChart" class="chart">
      <el-row>
        <el-col :span="24">
          <el-button type="text" style="float: right;margin-right: 5px;" @click="handleSwitchTable('table')">切换表格</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div id="barChart1" style="width: 100%;height:400px;" />
        </el-col>
      </el-row>
    </div>

    <!-- 设备类别 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="equipment.dialogFormVisible" :close-on-click-modal="false" width="90%">
      <div v-if="equipment.isTable" class="table">
        <el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('equipment')">导出</el-button>
        <el-button type="text" style="float: right;margin-right: 5px;" @click="handleSwitchChart('equipment')">切换图表</el-button>
        <el-table
          :key="equipment.tableKey"
          v-loading="equipment.listLoading"
          element-loading-text="给我一点时间"
          :data="equipment.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="tableCellStyle2"
          class="elTable table-fixed"
          @sort-change="tableSort2"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="牧场" min-width="130px" align="center">
            <template slot-scope="{row}">
              <a @click="handlePasture(row)">{{ row.pastureName }}</a>
            </template>
          </el-table-column>
          <el-table-column label="维修费用（元）" min-width="110px" align="center" sortable prop="psum" />
          <el-table-column label="维修设备数量" min-width="110px" align="center" sortable prop="eqcodes" />
          <el-table-column label="平均维修费（元）" min-width="110px" align="center" sortable prop="avgsum" />
        </el-table>
      </div>
      <div v-if="equipment.isChart" class="chart">
        <el-row>
          <el-col :span="24">
            <el-button type="text" style="float: right;margin-right: 5px;" @click="handleSwitchTable('equipment')">切换表格</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div id="equipmentBarChart1" style="width: 100%;height:400px;" />
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="pasture.dialogFormVisible" :close-on-click-modal="false" width="90%">
      <div class="filter-container">
        <el-input v-model="pasture.getListParm.parammaps.eqName" placeholder="设备名称" style="width: 130px;" class="filter-item" />
        <el-input v-model="pasture.getListParm.parammaps.assetCode" placeholder="资产编号" clearable class="filter-item" style="width: 130px" />
        <el-date-picker ref="inputDatetime1" v-model="pasture.getListParm.parammaps.inputDatetime" class="inputDatetime" type="datetimerange" style="width: 300px;top:-3px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="领用开始日期" end-placeholder="领用结束日期" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button class="filter-item" type="success" icon="el-icon-download" style="float: right;margin-right: 5px;" @click="handleExport('pasture')">导出</el-button>
      </div>
      <div class="table">
        <el-table
          :key="pasture.tableKey"
          v-loading="pasture.listLoading"
          element-loading-text="给我一点时间"
          :data="pasture.list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
          @sort-change="tableSort3"
        >
          <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.$index + (pasture.pageNum-1) * pasture.pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="资产编号" min-width="110px" align="center" prop="assetCode" />
          <el-table-column label="设备名称" min-width="110px" align="center" prop="eqName" />
          <el-table-column label="设备内部编号" min-width="110px" align="center" prop="eqCode" />
          <el-table-column label="设备规格" min-width="110px" align="center" prop="eqSpecification" />
          <el-table-column label="领用日期" min-width="110px" align="center" prop="receiveTime" />
          <el-table-column label="领用部门" min-width="110px" align="center" prop="deptName" />
          <el-table-column label="备件编号" min-width="110px" align="center" prop="partCode" />
          <el-table-column label="备件名称" min-width="110px" align="center" prop="partName" />
          <el-table-column label="备件规格" min-width="110px" align="center" prop="specification" />
          <el-table-column label="备件品牌" min-width="110px" align="center" prop="brandName" />
          <el-table-column label="计量单位" min-width="110px" align="center" prop="unit" />
          <el-table-column label="出库数量" min-width="110px" align="center" sortable prop="checkoutNumber" />
          <el-table-column label="退库数量" min-width="110px" align="center" sortable prop="quitNumber" />
          <el-table-column label="单价" min-width="110px" align="center" sortable prop="price" />
          <el-table-column label="总价" min-width="110px" align="center" sortable prop="sumPrice" />
        </el-table>
        <pagination v-show="pasture.total>0" :total="pasture.total" :page.sync="pasture.getListParm.offset" :limit.sync="pasture.getListParm.pagecount" @pagination="getPastureList" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons')
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { GetDataByName, GetDataByNames, GetReportform } from '@/api/common'
import { parseTime, json2excel, sortChange } from '@/utils/index.js'
import Cookies from 'js-cookie'
export default {
  name: 'MaintenanceCategoryAnalysis',
  components: { Pagination },
  data() {
    return {
      requestParams: [
        { name: 'geteqclasslistSection', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'section': '3' }},
        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
        { name: 'findAllDepart1', offset: 0, pagecount: 0, parammaps: { 'pastureId': Cookies.get('pastureid'), 'eId': Cookies.get('employeid') }}
      ],
      equipmentCategoryList: [],
      findAllPasture: [],
      findAllDepart: [],
      month: new Date(),
      table: {
        tableKey: 0,
        listLoading: true,
        list: [],
        total: 0,
        getListParm: {
          name: 'geteqclassFeeSum',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          PastureName: [],
          DepartmentName: [],
          parammaps: {
            year: parseTime(new Date(), '{y}'),
            month: parseTime(new Date(), '{m}'),
            eqClassName: ''
          }
        },
        getBarChartParm: {
          name: 'geteqclassSumMonthWater',
          parammaps: {
            receiveTime: '2021-03',
            pastureName: Cookies.get('pasturename'),
            deptName: '牧场办公室'
          }
        },
        barChart: null,
        isTable: true,
        isChart: false
      },
      deptment: '维修处',

      dialogStatus: '',
      equipment: {
        dialogFormVisible: false,
        tableKey: 1,
        listLoading: true,
        list: [],
        total: 0,
        getListParm: {
          name: 'geteqclassFeeSumPasture',
          page: 1,
          offset: 1,
          pagecount: 0,
          returntype: 'Map',
          parammaps: {
            year: '',
            month: '',
            eqClassName: ''
          }
        },
        getBarChartParm: {
          name: 'geteqclassSumMonthWater',
          parammaps: {
            receiveTime: '2021-03',
            pastureName: Cookies.get('pasturename'),
            deptName: '牧场办公室'
          }
        },
        barChart: null,
        isTable: true,
        isChart: false
      },
      pasture: {
        dialogFormVisible: false,
        tableKey: 2,
        listLoading: true,
        list: [],
        total: 0,
        getListParm: {
          name: 'geteqclassFeeSumPastureDetail',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            year: '',
            month: '',
            pastureName: '',
            assetCode: '',
            eqName: '',
            eqClassName: '',
            inputDatetime: '',
            startTime: '',
            stopTime: ''
          }
        }
      },
      textMap: {
        equipment: '牧场维修费',
        pasture: '牧场'
      },
      downLoadParm: {},
      downLoadList: [],
      isPercentage: false,
      percentage: 1,
      checkPasture: '',
      checkDepartment: '',
      getPastureidParm: { name: 'getPastureid' },
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }

    }
  },
  watch: {
    'month': {
      deep: true,
      handler: function(newVal, oldVal) {
        if (newVal == null) {
          this.month = ''
        } else {
          this.month = newVal
        }
        this.table.getListParm.offset = 1
        this.table.getListParm.parammaps.month = this.month
        this.getList()
      }
    }
  },
  created() {
    this.getPastureid()
    this.getList()
  },
  mounted() {
  },
  methods: {
    tableSort1(column) {
      sortChange(column, this.table.list)
    },
    tableSort2(column) {
      sortChange(column, this.equipment.list)
    },
    tableSort3(column) {
      sortChange(column, this.pasture.list)
    },
    getPastureid() {
      GetDataByName(this.getPastureidParm).then(response => {
        if (response.data.list !== null) {
          this.requestParams[2].parammaps.pastureId = response.data.list[0].id
          this.get_select_list()
        }
      })
    },
    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        this.equipmentCategoryList = response.data.geteqclasslistSection.list
        this.findAllPasture = response.data.findAllPasture.list
        this.findAllDepart = response.data.findAllDepart1.list
      })
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.eqClassName !== null && columnIndex == 3 || row.pastureName !== null && columnIndex == 3) {
        return {
          textDecoration: 'underline'
        }
      }
    },
    tableCellStyle2({ row, column, rowIndex, columnIndex }) {
      if (row.eqClassName !== null && columnIndex == 1 || row.pastureName !== null && columnIndex == 1) {
        return {
          textDecoration: 'underline'
        }
      }
    },
    handleSwitchChart(item) {
      if (item == 'table') {
        this.table.isChart = true
        this.table.isTable = false

        if (this.table.getListParm.PastureName.length > 0 && this.table.getListParm.DepartmentName.length > 0) {
          console.log(this.table.getListParm.PastureName)
          this.table.getListParm.DepartmentName = []
          this.checkPasture = '1'
          this.checkDepartment = ''
        } else if (this.table.getListParm.PastureName.length > 0 && this.table.getListParm.DepartmentName.length == 0) {
          this.checkPasture = '1'
          this.checkDepartment = ''
        } else if (this.table.getListParm.PastureName.length == 0 && this.table.getListParm.DepartmentName.length > 0) {
          this.checkPasture = ''
          this.checkDepartment = '2'
        } else {
          this.checkPasture = '1'
          this.checkDepartment = ''
        }
        this.getTableBarChart()
      } else if (item == 'equipment') {
        this.equipment.isChart = true
        this.equipment.isTable = false
        this.getEquipmentBarChart()
      }
    },
    changeRadio(item) {
      console.log('item==>', item)
      if (item == 1) {
        this.checkPasture = '1'
        this.checkDepartment = ''
        this.table.getListParm.DepartmentName = []
      } else {
        this.checkPasture = ''
        this.checkDepartment = '2'
        this.table.getListParm.PastureName = []
      }
      this.getTableBarChart()
    },
    handleSwitchTable(item) {
      if (item == 'table') {
        this.table.isChart = false
        this.table.isTable = true
        this.getList()
      } else if (item == 'equipment') {
        this.equipment.isChart = false
        this.equipment.isTable = true
        this.getEquipmentList()
      }
    },
    handleExport(item) {
      if (item == 'table') {
        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 = this.table.getListParm
        this.downLoadParm.pagecount = 0
        GetDataByName(this.downLoadParm).then(response => {
          this.table.getListParm.pagecount = 10
          this.downLoadList = response.data.list
          if (response.data.list !== '') {
            this.percentage = 99
            setTimeout(() => {
              this.isPercentage = false
            }, 2000)
          }
          var elecExcelDatas = []
          if (this.table.getListParm.DepartmentName.length > 0) {
            console.log(1111)
            elecExcelDatas = [{
              tHeader: ['牧场', '部门', '设备类别', '维修费用（元）', '维修设备数量', '平均维修费（元）'],
              filterVal: ['pastureName', 'departmentName', 'eqClassName', 'psum', 'eqcodes', 'avgsum'],
              tableDatas: this.downLoadList,
              sheetName: 'sheet'
            }]
          } else {
            console.log(222)
            elecExcelDatas = [{
              tHeader: ['牧场', '设备类别', '维修费用（元）', '维修设备数量', '平均维修费（元）'],
              filterVal: ['pastureName', 'eqClassName', 'psum', 'eqcodes', 'avgsum'],
              tableDatas: this.downLoadList,
              sheetName: 'sheet'
            }]
          }

          json2excel(elecExcelDatas, '维修费用', true, 'xlsx')
        })
      } else if (item == 'equipment') {
        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 = this.equipment.getListParm
        this.downLoadParm.pagecount = 0
        GetDataByName(this.downLoadParm).then(response => {
          this.equipment.getListParm.pagecount = 10
          this.downLoadList = response.data.list
          if (response.data.list !== '') {
            this.percentage = 99
            setTimeout(() => {
              this.isPercentage = false
            }, 2000)
          }
          const elecExcelDatas = [{
            tHeader: ['牧场', '维修费用（元）', '维修设备数量', '平均维修费（元）'],
            filterVal: ['pastureName', 'psum', 'eqcodes', 'avgsum'],
            tableDatas: this.downLoadList,
            sheetName: 'sheet'
          }]
          json2excel(elecExcelDatas, this.textMap.equipment, true, 'xlsx')
        })
      } else if (item == 'pasture') {
        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 = this.pasture.getListParm
        this.downLoadParm.pagecount = 0
        GetDataByName(this.downLoadParm).then(response => {
          this.pasture.getListParm.pagecount = 10
          this.downLoadList = response.data.list
          if (response.data.list !== '') {
            this.percentage = 99
            setTimeout(() => {
              this.isPercentage = false
            }, 2000)
          }
          const elecExcelDatas = [{
            tHeader: ['资产编号', '设备名称', '设备内部编号', '设备规格', '领用日期', '领用部门', '备件编号', '备件名称', '备件规格', '备件品牌', '计量单位', '出库数量', '退库数量', '单价', '总价'],
            filterVal: ['assetCode', 'eqName', 'eqCode', 'eqSpecification', 'receiveTime', 'deptName', 'partCode', 'partName', 'specification', 'brandName', 'unit', 'checkoutNumber', 'quitNumber', 'price', 'sumPrice'],
            tableDatas: this.downLoadList,
            sheetName: 'sheet'
          }]
          json2excel(elecExcelDatas, this.textMap.pasture, true, 'xlsx')
        })
      }
    },
    // table
    changeYear() {
      this.table.getListParm.offset = 1
      this.getList()
      this.getTableBarChart()
    },
    changeEqClassName() {
      this.table.getListParm.offset = 1
      this.getList()
      this.getTableBarChart()
    },
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getListParm).then(response => {
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.table.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
        } else {
          this.table.list = []
          this.table.pageNum = 0
          this.table.pageSize = 0
        }
        this.table.total = response.data.total
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    getTableBarChart() {
      this.table.getBarChartParm = this.table.getListParm
      this.table.getBarChartParm = {}
      this.table.getBarChartParm.name = this.table.getListParm.name
      this.table.getBarChartParm.page = this.table.getListParm.page
      this.table.getBarChartParm.offset = this.table.getListParm.offset
      this.table.getBarChartParm.pagecount = this.table.getListParm.pagecount
      this.table.getBarChartParm.returntype = this.table.getListParm.returntype
      this.table.getBarChartParm.parammaps = {}
      this.table.getBarChartParm.parammaps.year = this.table.getListParm.parammaps.year
      this.table.getBarChartParm.parammaps.month = this.table.getListParm.parammaps.month
      this.table.getBarChartParm.parammaps.eqClassName = this.table.getListParm.parammaps.eqClassName
      this.table.getBarChartParm.parammaps.PastureName = this.table.getListParm.PastureName
      this.table.getBarChartParm.parammaps.DepartmentName = this.table.getListParm.DepartmentName
      GetReportform(this.table.getBarChartParm).then(response => {
        if (response.data !== null) {
          this.table.chart_data = response.data.chart_data
        } else {
          this.table.chart_data = []
        }
        this.roadTableBarChart(this.table.chart_data, this.deptment)
      })
    },
    roadTableBarChart(chart_data, deptment) {
      if (this.table.barChart != null) {
        this.table.barChart.dispose()
      }
      this.table.barChart = echarts.init(document.getElementById('barChart1'))
      var option = {
        title: { text: '集团设备类别维修费用', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: [''],
          x: 'right'
        },
        color: ['#42b983', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', data: chart_data.data2, name: '设备类别' }],
        yAxis: [{ type: 'value', name: '维修费用(元)', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '维修费用',
            type: 'bar',
            data: chart_data.data1,
            barWidth: 14,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.table.barChart.setOption(option)
      window.onresize = function() {
        this.table.barChart.resize()
      }
    },

    // 设备类别点点击
    handleEquipment(row) {
      this.equipment.dialogFormVisible = true
      this.equipment.isChart = false
      this.equipment.isTable = true
      this.textMap.equipment = '牧场维修费    ' + row.eqClassName
      this.dialogStatus = 'equipment'
      this.equipment.getListParm.parammaps.year = this.table.getListParm.parammaps.year
      this.equipment.getListParm.parammaps.month = this.table.getListParm.parammaps.month
      this.equipment.getListParm.parammaps.eqClassName = row.eqClassName
      this.getEquipmentList()
    },
    getEquipmentList() {
      this.equipment.listLoading = true
      GetDataByName(this.equipment.getListParm).then(response => {
        if (response.data.list !== null) {
          this.equipment.list = response.data.list
          if (response.data.total) {
            this.equipment.total = response.data.total
          }
        } else {
          this.equipment.list = []
        }
        setTimeout(() => {
          this.equipment.listLoading = false
        }, 100)
      })
    },
    getEquipmentBarChart() {
      this.equipment.getBarChartParm = this.equipment.getListParm
      GetReportform(this.equipment.getBarChartParm).then(response => {
        this.equipment.chart_data = response.data.chart_data
        this.roadEquipmentBarChart(this.equipment.chart_data, this.equipment.getBarChartParm.parammaps.eqClassName)
      })
    },
    roadEquipmentBarChart(chart_data, deptment) {
      if (this.equipment.barChart != null) {
        this.equipment.barChart.dispose()
      }
      this.equipment.barChart = echarts.init(document.getElementById('equipmentBarChart1'))
      var option = {
        title: { text: deptment + '各牧场维修费用', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: [''],
          x: 'right'
        },
        color: ['#769cfc'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', data: chart_data.data2, name: '牧场' }],
        yAxis: [{ type: 'value', name: '维修费用(元)', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '维修费用',
            type: 'bar',
            barWidth: 14,
            data: chart_data.data1,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.equipment.barChart.setOption(option)
      window.onresize = function() {
        this.equipment.barChart.resize()
      }
    },

    handlePasture(row) {
      this.pasture.dialogFormVisible = true
      this.textMap.pasture = row.pastureName + '——' + row.eqClassName + '维修明细'
      this.dialogStatus = 'pasture'
      this.pasture.getListParm.offset = 1
      this.pasture.getListParm.parammaps.year = this.equipment.getListParm.parammaps.year
      this.pasture.getListParm.parammaps.month = this.equipment.getListParm.parammaps.month
      this.pasture.getListParm.parammaps.pastureName = row.pastureName
      this.pasture.getListParm.parammaps.eqClassName = row.eqClassName

      this.pasture.getListParm.parammaps.inputDatetime = ''
      this.pasture.getListParm.parammaps.startTime = ''
      this.pasture.getListParm.parammaps.stopTime = ''
      this.pasture.getListParm.parammaps.assetCode = ''
      this.pasture.getListParm.parammaps.eqName = ''
      this.getPastureList()
    },
    getPastureList() {
      this.pasture.listLoading = true
      if (this.pasture.getListParm.parammaps.inputDatetime == null) {
        this.pasture.getListParm.parammaps.inputDatetime = ''
      } else {
        this.pasture.getListParm.parammaps.startTime = this.pasture.getListParm.parammaps.inputDatetime[0]
        this.pasture.getListParm.parammaps.stopTime = this.pasture.getListParm.parammaps.inputDatetime[1]
      }
      GetDataByName(this.pasture.getListParm).then(response => {
        if (response.data.list !== null) {
          this.pasture.list = response.data.list
          this.pasture.pageNum = response.data.pageNum
          this.pasture.pageSize = response.data.pageSize
          if (response.data.total) {
            this.pasture.total = response.data.total
          }
        } else {
          this.pasture.list = []
        }
        setTimeout(() => {
          this.pasture.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      this.pasture.listLoading = true
      if (this.pasture.getListParm.parammaps.inputDatetime == null) {
        this.pasture.getListParm.parammaps.inputDatetime = ''
      } else {
        this.pasture.getListParm.parammaps.startTime = this.pasture.getListParm.parammaps.inputDatetime[0]
        this.pasture.getListParm.parammaps.stopTime = this.pasture.getListParm.parammaps.inputDatetime[1]
      }
      this.pasture.getListParm.offset = 1
      this.getPastureList()
    }

  }
}
</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>