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

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="block">
        <el-date-picker v-model="monthDate" :clearable="false" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeMonth()" />
        <el-select v-model="type" placeholder="类型" @change="changeType">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </div>
    </div>

    <el-row v-if="isChart1" style="position: relative;">
      <p style="position: absolute;top:-12px;left:40%;color:rgb(130, 165, 252);background:rgb(230, 243, 255);border:1px solid rgb(130, 165, 252);padding:10px;border-radius:10px">
        集团{{costTypeName}}：{{ total }}万元
      </p>
       <el-radio-group v-model="radio1" class="group" @change="changeGroup">
          <el-radio :label="'集团'">集团</el-radio>
          <el-radio :label="'一中心'"></el-radio>
          <el-radio :label="'二中心'"></el-radio>
          <el-radio :label="'三中心'"></el-radio>
        </el-radio-group>
      <el-col :span="24">
        <div id="chart1" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <el-row v-if="isChart1" style="position: relative;">
      <el-col :span="24">
        <div id="chart2" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>
    <el-row style="position: relative;">
      <el-col :span="12">
        <div style="height: 50px;" />
        <div id="chart4" style="width: 100%;height:400px;" />
      </el-col>
      <el-col :span="12">
        <div style="height: 50px;">
          <el-select style="float: right;margin-right: 20px;" v-model="getChart5Parm.parammaps.deptName" placeholder="部门" @change="changeDept('5')">
            <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </div>
        <div id="chart5" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <el-row style="position: relative;">
      <el-col :span="12">
        <div style="height: 50px;">
          <el-select style="float: right;margin-right: 20px;" v-model="pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture()">
            <el-option v-for="item in pastureList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </div>
        <div id="chart6" style="width: 100%;height:400px;" />
      </el-col>
      <el-col :span="12">
        <div style="height: 50px;">
          <el-select style="float: right;margin-right: 20px;" v-model="getChart7Parm.parammaps.deptName" placeholder="部门" @change="changeDept('7')">
            <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
          </el-select>
        </div>
        <div id="chart7" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <el-dialog title="详情" :visible.sync="dialogFormVisibleCard" width="90%" :close-on-click-modal="false">
      <div class="app-contentcard">
      <el-form ref="rowSeeData" :model="rowSeeData" label-position="right" label-width="120px" style="width: 100%;margin:0 auto;">
        <div class="filter-container">
          <el-input v-model="getdataListParmSee.parammaps.eqName" placeholder="设备内部编号" clearable class="filter-item" style="width: 130px" />
          <el-input v-model="getdataListParmSee.parammaps.assetCode" placeholder="资产编号" clearable class="filter-item" style="width: 130px" />
          <el-date-picker ref="inputDatetime" v-model="getdataListParmSee.parammaps.inputDatetime" class="inputDatetime" type="datetimerange" style="width: 250px;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="form_searchDelivery">搜索</el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-edit" @click="handleDownloadDelivery">导出</el-button>
        </div>
      </el-form>
      <el-table
        :key="tableKey"
        v-loading="listLoadingSee"
        element-loading-text="给我一点时间"
        :data="listSee"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable"
      >
        <el-table-column label="序号" align="center" type="index" width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + (pageNumSee-1) * pageSizeSee + 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" prop="checkoutNumber" />
        <el-table-column label="退库数量" min-width="110px" align="center" prop="quitNumber" />
        <el-table-column label="单价" min-width="110px" align="center" prop="price" />
        <el-table-column label="总价" min-width="110px" align="center" prop="sumPrice" />
    </el-table>
    <pagination v-show="totalSee>=0" :total="totalSee" :page.sync="getdataListParmSee.offset" :limit.sync="getdataListParmSee.pagecount" @pagination="get_table_dataSee" />
    <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom:10px">
      <el-button @click="dialogFormVisibleCard = false">关闭</el-button>
    </div>
  </div>
  </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
import { GetDataByName,GetDataByNames, GetReportform, checkButtons,getJson } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'QueryRepair',
  components: { Pagination },
  data() {
    return {
      monthDate: [new Date(),new Date()],
      costTypeName:'所有维修费',
      type:'',
      year: new Date().getFullYear(),
      month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
      pastureList:[],
      deptList:[{id:0,name:'挤奶处'},{id:1,name:'犊牛处'},{id:2,name:'办公室'},{id:3,name:'饲养处'},{id:4,name:'兽医处'},{id:5,name:'品控处'},{id:6,name:'设备处'}],
      // typeList:[{id:0,name:'全部费用'},{id:1,name:'制造费用'},{id:2,name:'直接费用'},{id:3,name:'管理费用'}],
      typeList: [{ id: '', name: '全部费用' }, { id: '挤奶处', name: '直接费用' }, { id: '牧场办公室', name: '管理费用' }, { id: 1, name: '制造费用' }],
      total: '',
      radio1:'集团',
      pastureName:'',
      isChart1: [],
      chart_data1: {},
      getChart1Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart2: [],
      chart_data2: {},
      getChart2Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },

      isChart3: [],
      chart_data3: {},
      getChart3Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },


      isChart4: [],
      chart_data4: {},
      getChart4Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: ''
        }
      },

      isChart5: [],
      chart_data5: {},
      getChart5Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename'),
          deptName:''
        }
      },

      isChart6: [],
      chart_data6: {},
      getChart6Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart7: [],
      chart_data7: {},
      getChart7Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename'),
          deptName:''
        }
      },
      isChart8: [],
      chart_data8: {},
      getChart8Parm: {
        name: 'getpSumNowWater',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      dialogFormVisibleCard: false,
      listLoadingSee: true,
      rowSeeData: {},
      listSee: [],
      totalSee: 0,
      getdataListParmSee: {
        name: 'geteqclassSumDay',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
          deptName: '',
          typeName: '',
          assetCode: '',
          eqName: '',
          startTime: '',
          stopTime: '',
          pastureId: Cookies.get('pastureid'),
          pastureName: Cookies.get('pasturename')
        }
      },
    }
  },
  created() {
    this.get_select_list()
    const that = this
    GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
      that.buttons = response.data.list
      that.get_auto_buttons()
    })
  },
  mounted() {
  },
  methods: {
    get_select_list() {
      var send_data =  [
        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': 18 }},
      ]
      this.pastureList = []
      GetDataByNames(send_data).then(response => {
        response.data.findAllPasture.list.forEach((item)=>{
          if(item.name !== '现代牧业'){
            this.pastureList.push(item)
          }
        })
      })
    },
    changeType(item){
      console.log(item)
      if (item == '挤奶处') {
        this.costTypeName = '直接维修费'
      } else if (item == '牧场办公室') {
        this.costTypeName = '管理维修费'
      } else if (item == 1) {
        this.costTypeName = '制造维修费'
      } else if (item == '') {
        this.costTypeName = '所有维修费'
        this.type = ''
      } else {
        this.costTypeName = '所有维修费'
      }
      if(this.isChart1){
        this.getChart1()
        this.getChart2()
      }else{
        this.getChart4()
        this.getChart6()
      }
    },
    changeGroup(){
      this.getChart1()
      this.getChart2()
      this.getChart4()
    },
    changeMonth(){
      if(this.isChart1){
        this.getChart1()
        this.getChart2()
      }else{
        this.pastureName = [Cookies.get('pasturename')]
        this.getChart4()
        this.getChart6()
      }
    },
    changePasture(){
      // this.getChart4()
      this.getChart6()
    },
    changeDept(item){
      if(item == 5){
        this.getChart5()
      }else if(item == 7){
        this.getChart7()
      }
    },
    get_auto_buttons() {
      // 图1
      const chart1 = 'report:queryWater:pastures'
      const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
      this.isChart1 = isChart1
      if(this.isChart1){
        this.getChart1()
        this.getChart2()
      }else{
        this.pastureName = [Cookies.get('pasturename')]
        this.getChart4()
        this.getChart6()
      }
    },
    // 各牧场维修费用对比
    getChart1() {
      let url = '/authdata/repair/nowelectricity?'
      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
      let radio = ''
      if(this.radio1 == '集团'){
        radio = ''
      }else{
        radio = this.radio1
      }
      let data = 'startTime=' + startTime
                + '&endTime=' + endTime
                + '&center=' + radio
                + '&departmentName=' + this.type
      getJson(url,data).then(response => {
        console.log('各牧场维修费用对比==>图1', response)
        if(response.data){
          this.chart_data1.data1 = response.data.nowYear
          this.chart_data1.data2 = response.data.lastYear
          this.chart_data1.xdata = response.data.pasture
          this.pastureName = [response.data.pasture[0]]
          this.total = response.data.all
        }else{
          this.chart_data1.data1 = []
          this.chart_data1.data2 = []
          this.chart_data1.xdata = []
          this.total = 0
    // 各牧场年度维修成本对比
    getBarChart1() {
      GetReportform(this.getBarChart1Parm).then(response => {
        console.log('图1', response)
        let pasture =  response.data.chart_data.pasture
        let keys = []
        pasture.forEach((item,key)=>{
          if(item.includes("公司")){
            keys.push(key)
          }
        })
        let lastYear = response.data.chart_data.lastYear
        let new_pasture =  pasture.splice(keys[0],keys.length)
        let new_lastYear =  lastYear.splice(keys[0],keys.length)
        let NowYear = response.data.chart_data.nowYear
        let new_NowYear =  NowYear.splice(keys[0],keys.length)
        this.chart_data1.pasture = pasture
        this.chart_data1.lastYear = lastYear
        this.chart_data1.nowYear = NowYear
        // this.chart_data1 = response.data.chart_data
        this.roadBarChart1(this.chart_data1)
        var nowYear = response.data.chart_data.nowYear
        var totaltitle = 0
        if (nowYear !== null || nowYear !== undefined) {
          nowYear.forEach(function(item, index) {
            // console.log(parseFloat(item))
            totaltitle = totaltitle + parseFloat(item)
          })
        }
        this.roadChart1(this.chart_data1)
        this.getChart4()
        this.getChart6()
      })
    },
    // 单头牛维修费用
    getChart2() {
      let url = '/authdata/repair/singlecow?'
      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
      let radio = ''
      if(this.radio1 == '集团'){
        radio = ''
      }else{
        radio = this.radio1
      }
      let data = 'startTime=' + startTime
                + '&endTime=' + endTime
                + '&center=' + radio
      getJson(url,data).then(response => {
        console.log('单头牛维修费用==>图2', response)
        if(response.data){
          this.chart_data2.data1 = response.data.nowYear
          this.chart_data2.data2 = response.data.lastYear
          this.chart_data2.xdata = response.data.pasture
          this.chart_data2.line = response.data.line
        }else{
          this.chart_data2.data1 = []
          this.chart_data2.data2 = []
          this.chart_data2.xdata = []
          this.chart_data2.line = 0
        }
        this.roadChart2(this.chart_data2)
      })
    },



    // XX牧场每月维修费对比
    getChart4() {
      let startTime = parseTime(this.monthDate[0],'{y}-{m}') + '-01'
      let date = this.monthDate[1];
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let lastDay = new Date(year, month, 0).getDate();
      let endTime = parseTime(this.monthDate[1],'{y}-{m}') + '-' + lastDay
      let data = {
        name:"getPastureSumMonth",
        parammaps:{
          startTime:startTime,
          endTime:endTime,
          pastureName:this.pastureName.toString(),
          departmentName:this.type
        },
      }
      GetReportform(data).then(response => {
        console.log('XX牧场每月维修费对比==>图3', response)
        if(response.data){
          this.chart_data4 = {
            data1:response.data.chart_data.lastYear,
            data2:response.data.chart_data.nowYear,
            data3:response.data.chart_data.monthBudgetList,
            xdata:response.data.chart_data.months,
            data_name:['去年同期用量','今年用量','预算']
          }
        }else{
          this.chart_data4 = {
            data1:[],
            data2:[],
            data3:[],
            xdata:[],
            data_name:['去年同期用量','今年用量','预算']
          }
        }
        if(response.data.chart_data.months){
          this.getChart5Parm.parammaps.date = response.data.chart_data.months[0]
        }else{
          this.getChart5Parm.parammaps.date = ''
        }
        this.roadChart4(this.chart_data4)
        this.getChart5Parm.parammaps.deptName = this.deptList[0].name
        this.getChart5()
      })
    },
    // XX月部门统计
    getChart5() {
      console.log(this.getChart5Parm.parammaps.deptName,'deptName')
      let startTime = parseTime(this.getChart5Parm.parammaps.date,'{y}-{m}')
      let date =  new Date(this.getChart5Parm.parammaps.date);
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let lastDay = new Date(year, month, 0).getDate();
      let endTime = parseTime(this.getChart5Parm.parammaps.date,'{y}-{m}')
      let data = {
        name:"geteqclassSumMonth",
        parammaps:{
          startTime:startTime,
          endTime:endTime,
          pastureName:this.pastureName.toString(),
          deptName:this.getChart5Parm.parammaps.deptName,
        },
      }
      GetReportform(data).then(response => {
        console.log('XX部门维修费用==>图4', response)
        if(response.data.chart_data){
          this.chart_data5 = {
            data1:response.data.chart_data.eqCost,
            xdata:response.data.chart_data.typeName
          }
        }else{
          this.chart_data5 = {
            data1:[],
            xdata:[]
          }
        }
        this.roadChart5(this.chart_data5)
      })
    },
    // XX牧场XX年每月用电量对比
    getChart6() {
      let url = '/authdata/repair/perhead?'
      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
      let radio = ''
      if(this.radio1 == '集团'){
        radio = ''
      }else{
        radio = this.radio1
      }
      let pastureId = []
      this.pastureList.forEach((item)=>{
        if(this.pastureName){
          this.pastureName.forEach((item1)=>{
            if(item.name == item1){
              pastureId.push(item.id)
            }
          })
        }
      })
      let data = 'startTime=' + startTime
                + '&endTime=' + endTime
                + '&center=' + radio
                + '&pastureId=' + pastureId.toString()
      getJson(url,data).then(response => {
        console.log('牧场每月单头牛维修费对比==>图5', response)
        if(response.data){
          this.chart_data6.data1 = response.data.data3
          this.chart_data6.data_name = response.data.data1
          this.chart_data6.xdata = response.data.data2
        }else{
          this.chart_data6.data1 = []
          this.chart_data6.data_name = []
          this.chart_data6.xdata = []
          this.chart_data6.line =0
        }
        if(response.data.data1 == null){
          this.chart_data6.data_name = []
        }
        if(response.data.data2 == null ){
          this.chart_data6.xdata = []
          this.getChart7Parm.parammaps.date = ''
        }else{
          this.getChart7Parm.parammaps.date = response.data.data2[0]
        }
        if(response.data.data3 == null){
          this.chart_data6.data1 = []
        }
        this.roadChart6(this.chart_data6)
        this.getChart7Parm.parammaps.deptName = this.deptList[0].name
        this.getChart7()
      })
    },
    // XX月部门统计
    getChart7() {
      let startTime = parseTime(this.getChart7Parm.parammaps.date,'{y}-{m}') + '-01'
      let date =  new Date(this.getChart7Parm.parammaps.date);
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let lastDay = new Date(year, month, 0).getDate();
      let endTime = parseTime(this.getChart7Parm.parammaps.date,'{y}-{m}') + '-' + lastDay
      let data = {
        name:"getdeptSumMonth",
        parammaps:{
          startTime:startTime,
          endTime:endTime,
          pastureName:this.pastureName.toString(),
          departmentName:this.getChart7Parm.parammaps.deptName
        },
      }
      GetDataByName(data).then(response => {
        console.log('XX月部门统计==>图6', response)
        // this.chart_data7 = response.data.chart_data
        if(response.data){
          var data1 = []
          var data2 = []
          var xdata = []
          response.data.list.forEach((item)=>{
            data1.push(item.value)
            data2.push(item.monthBudget)
            xdata.push(item.name)
          })
          this.chart_data7 = {
            data1:data1,
            data2:data2,
            xdata:xdata
          }
        }else{
          this.chart_data7 = {
            data1:[],
            data2:[],
            xdata:[]
          }
        }
        this.roadChart7(this.chart_data7)
      })
    },

    // 各牧场维修费用对比
    roadChart1(chart_data) {
      if (this.chart1 != null) {
        this.chart1.dispose()
      }
      this.chart1 = echarts.init(document.getElementById('chart1'))
      var option = {
        title: { text: '各牧场维修费用对比', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算'],
          right: 40
        },
        color: ['#61A5E8', '#9933FF'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category',  name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value', name: '费用(元)', axisLabel: { formatter: '{value}万' }}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data.data1,
            barMaxWidth:20,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'bar',
            barMaxWidth:20,
            data: chart_data.data2,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.chart1.setOption(option)
      window.onresize = function() {
        this.chart1.resize()
      }
      var that = this
      that.chart1.on('click', function(param, i) {
        that.pastureName = [param.name]
        that.getChart4()
        that.getChart6()
      })
    },
    // 单头牛维修费用
    roadChart2(chart_data) {
      if (this.chart2 != null) {
        this.chart2.dispose()
      }
      this.chart2 = echarts.init(document.getElementById('chart2'))
      var option = {
        title: { text: '单头牛维修费用', left:'center',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算'],
          right: 40
        },
        color:  ['#61A5E8', '#9933FF','#FFB800'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category',  name: '牧场',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value', name: '费用(元)'}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data.data1,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20,
            markLine:{
              data:[ {yAxis:chart_data.line} ],
              lineStyle: {
                  color: '#FFB800'
              }
            }
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data.data2,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20
          }

        ]
      }
      this.chart2.setOption(option)
      window.onresize = function() {
        this.chart2.resize()
      }
      var that = this
      this.chart2.on('click', function(param, i) {
        // console.log(param)
      })
    },
    // XX牧场每月维修费对比
    roadChart4(chart_data) {
      console.log(chart_data,'666')
      if (this.chart4 != null) {
        this.chart4.dispose()
      }
      this.chart4 = echarts.init(document.getElementById('chart4'))
      var text = this.pastureName +'每月维修费对比'
      var option = {
        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: chart_data.data_name,
          left: 40,
          bottom:0
        },
        color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category',  name: '月份',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value', name: '费用(元)'}],
        series: [{
          name: '去年同期用量',
          type: 'line',
          data: chart_data.data1[0]
        },
        {
          name: '今年用量',
          type: 'line',
          data: chart_data.data2[0]
        },{
          name: '预算',
          type: 'line',
          data: chart_data.data3[0]
        }]
      }
      this.chart4.setOption(option)
      window.onresize = function() {
        this.chart4.resize()
      }
      var that = this
      that.chart4.on('click', function(param, i) {
        // console.log(param)
        that.getChart5Parm.parammaps.date = param.name
        that.getChart5()
      })
    },
    // XX牧场xx部门维修费用
    roadChart5(chart_data) {
      if (this.chart5 != null) {
        this.chart5.dispose()
      }
      this.chart5 = echarts.init(document.getElementById('chart5'))
      var text = this.pastureName + this.getChart5Parm.parammaps.deptName + '维修费用'
      var option = {
        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          right: 40,
          bottom:0
        },
        color: ['#2dc0e8', '#769cfc'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category',  name: '设备',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value',name: '费用(元)', axisLabel: { formatter:'{value} 万'}}],
        series: [
          {
            type: 'bar',
            data: chart_data.data1,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20
          },
        ]
      }
      this.chart5.setOption(option)
      window.onresize = function() {
        this.chart5.resize()
      }
      var that = this
      this.chart5.on('click', function(param, i) {
        // console.log(param)
        that.getdataListParmSee.parammaps.typeName = param.name
        that.getdataListParmSee.offset = 1
        that.get_table_dataSee()
        that.dialogFormVisibleCard = true
      })
    },
    // 牧场每月单头牛维修费对比
    roadChart6(chart_data) {
      if (this.chart6 != null) {
        this.chart6.dispose()
      }
      this.chart6 = echarts.init(document.getElementById('chart6'))
      var text = '牧场每月单头牛维修费对比'
      var option = {
        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: chart_data.data_name,
          right: 40,
          bottom:0
        },
        color: ['#eb123a','#eba612','#124feb','#15ab2e','#b20fdb'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category',  name: '月份',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value',name: '费用(元)'}],
        series: (function() {
          var serie = []
          if(chart_data.data1 !== null){
            for (var i = 0; i < chart_data.data1.length; i++) {
              var item = {
                name: chart_data.data_name[i],
                type: 'line',
                data: chart_data.data1[i]
              }
              serie.push(item)
            }
          }
          return serie
        }())
      }
      this.chart6.setOption(option)
      window.onresize = function() {
        this.chart6.resize()
      }
      var that = this
      this.chart6.on('click', function(param, i) {
        // console.log(param)
        that.getChart7Parm.parammaps.date = param.name
        that.getChart7()
      })
    },
    // XX月部门统计
    roadChart7(chart_data) {
      console.log(chart_data,'chart_data')
      if (this.chart7 != null) {
        this.chart7.dispose()
      }
      this.chart7 = echarts.init(document.getElementById('chart7'))
      var text = this.getChart7Parm.parammaps.date + '月部门统计'
      var option = {
        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际','预算'],
          left: 40,
          bottom:0
        },
        color: ['#61A5E8', '#9933FF'],
        grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category',  name: '部门',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
        yAxis: [{ type: 'value', name: '费用(元)'}],
        series: [
          {
            name: '实际',
            type: 'bar',
            data: chart_data.data1,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data.data2,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20
          }
        ]
      }
      this.chart7.setOption(option)
      window.onresize = function() {
        this.chart7.resize()
      }
      var that = this
      this.chart7.on('click', function(param, i) {
        // console.log(param)
      })
    },
    form_searchDelivery() {
      if (this.getdataListParmSee.parammaps.inputDatetime == null) {
        this.getdataListParmSee.parammaps.startTime = ''
        this.getdataListParmSee.parammaps.stopTime = ''
      }
      this.getdataListParmSee.offset = 1
      this.get_table_dataSee()
    },
    get_table_dataSee() {
      if (this.getdataListParmSee.parammaps.inputDatetime !== undefined && this.getdataListParmSee.parammaps.inputDatetime !== null) {
        this.getdataListParmSee.parammaps.startTime = this.$refs['inputDatetime'].value[0]
        this.getdataListParmSee.parammaps.stopTime = this.$refs['inputDatetime'].value[1]
      } else {
        this.getdataListParmSee.parammaps.startTime = ''
        this.getdataListParmSee.parammaps.stopTime = ''
      }

      GetDataByName(this.getdataListParmSee).then(response => {
        this.listSee = response.data.list
        console.log('记录列表数据', response.data.list)
        this.pageNumSee = response.data.pageNum
        this.pageSizeSee = response.data.pageSize
        if (response.data.total) {
          this.totalSee = response.data.total
        }
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoadingSee = false
        }, 300)
      })
    },
    handleDownloadDelivery() {
      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)
      var downLoadParm = {}
      downLoadParm.name = 'geteqclassSumDay'
      downLoadParm.returntype = 'Map'
      downLoadParm.parammaps = this.getdataListParmSee.parammaps
      GetAccount(downLoadParm).then(response => {
        if (response.data.list !== '') {
          this.percentage = 99
          setTimeout(() => {
            this.isPercentage = false
          }, 2000)
        }
        this.$nextTick(() => {
          this.downLoadList = response.data.list
          console.log(this.downLoadList)
          const ExcelDatas = [
            {
              tHeader: ['资产编号', '设备名称', '设备内部编号', '设备规格', '领用日期', '领用部门', '备件编号', '备件名称', '备件规格', '备件品牌', '计量单位', '出库数量', '退库数量', '单价', '总价'],
              filterVal: ['assetCode', 'eqName', 'eqCode', 'eqSpecification', 'receiveTime', 'deptName', 'partCode', 'partName', 'specification', 'brandName', 'unit', 'checkoutNumber', 'quitNumber', 'price', 'sumPrice'],
              tableDatas: this.downLoadList,
              sheetName: '设备维修费用'
            }
          ]
          json2excel(ExcelDatas, '设备维修费用', true, 'xlsx')
        })
      })
    },
  }
}
</script>
<style>
.el-row {
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>

<style lang="scss" scoped>
.group{
  float: right;margin-bottom: 20px;
}
</style>