modernDairy/src/views/report/queryCombustion/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()" />
      </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">
        燃动费用{{ 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;">
       <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">
         柴油用量
       </p>
       <el-col :span="24">
         <div id="chart11" style="width: 100%;height:400px;" />
       </el-col>
    </el-row>
    <el-row v-if="isChart1"  style="position: relative;">
       <el-col :span="24">
         <div id="chart12" 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;">
          <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="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()">
            <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 id="chart6" style="width: 100%;height:400px;" />
      </el-col>
      <el-col :span="12">
        <div id="chart7" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <el-row style="position: relative;">
      <el-col :span="12">
        <div id="chart8" style="width: 100%;height:400px;" />
      </el-col>
      <el-col :span="12">
        <div id="chart9" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>
  </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'
export default {
  name: 'QueryCombustion',
  data() {
    return {
      monthDate: [new Date(),new Date()],
      pastureName:'',
      yearDate: new Date(),
      year: new Date().getFullYear(),
      month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
      type:0,
      typeList:[{id:0,name:'柴油'},{id:1,name:'天然气'},{id:2,name:'煤炭'},{id:3,name:'生物质颗粒'}],
      pastureList:[],
      deptList:[{id:0,name:'挤奶处'},{id:1,name:'犊牛处'},{id:2,name:'办公室'},{id:3,name:'饲养处'},{id:4,name:'兽医处'},{id:5,name:'品控处'},{id:6,name:'设备处'}],
      total: '',
      radio1:'集团',
      pastureName:'',
      isChart1: [],
      chart_data1: {},
      getChart1Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart11: [],
      chart_data11: {},
      getChart11Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart12: [],
      chart_data12: {},
      getChart12Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      radio2:1,
      isChart2: [],
      chart_data2: {},
      getChart2Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },

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


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

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

      isChart6: [],
      chart_data6: {},
      getChart6Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart7: [],
      chart_data7: {},
      getChart7Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart8: [],
      chart_data8: {},
      getChart8Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      isChart9: [],
      chart_data9: {},
      getChart9Parm: {
        name: '',
        parammaps: {
          receiveTime: new Date().getFullYear(),
          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': Cookies.get('pastureid') }},
      ]
      GetDataByNames(send_data).then(response => {
        this.pastureList = response.data.findAllPasture.list
      })
    },
    changeMonth(){
      if(this.isChart1){
        this.getChart1()
        this.getChart11()
        this.getChart12()
        this.getChart2()
      }else{
        this.pastureName = [Cookies.get('pasturename')]
        this.getChart4()
        this.getChart6()
      }
    },
    changeGroup(){
      this.getChart1()
      this.getChart11()
      this.getChart12()
      this.getChart2()
    },
    changePasture(){
      this.getChart4()
      this.getChart5()
      this.getChart6()
      this.getChart7()
    },
    changeDept(){
      this.getChart5()
    },
    changeType(){

    },
    get_auto_buttons() {
      // 图1
      const chart1 = 'report:queryCombustion:pastures'
      const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
      this.isChart1 = isChart1
      if(this.isChart1){
        this.getChart1()
        this.getChart11()
        this.getChart12()
        this.getChart2()
      }else{
        this.pastureName = [Cookies.get('pasturename')]
        this.getChart4()
        this.getChart6()
      }
    },
    // 各牧场燃动费用对比
    getChart1() {
      let url = '/authdata/ignition/nowwater?'
      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('图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
        }
        this.roadChart1(this.chart_data1)
        this.getChart4()
        this.getChart6()
      })
    },
    // 各牧场柴油用量对比
    getChart11() {
      let url = '/authdata/diesel/nowwater?'
      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('图11', response)
        if(response.data){
          this.chart_data11.data1 = response.data.nowYear
          this.chart_data11.data2 = response.data.lastYear
          this.chart_data11.xdata = response.data.pasture
        }else{
          this.chart_data11.data1 = []
          this.chart_data11.data2 = []
          this.chart_data11.xdata = []
        }
        this.roadChart11(this.chart_data11)
      })
    },
    // 单头牛柴油用量
    getChart12() {
      let url = '/authdata/diesel/rate?'
      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('图12', response)
        if(response.data){
          this.chart_data12.data1 = response.data.actual
          this.chart_data12.line = response.data.line
          this.chart_data12.xdata = response.data.pasture
        }else{
          this.chart_data12.data1 = []
          this.chart_data12.line = 0
          this.chart_data12.xdata = []
        }
        this.roadChart12(this.chart_data12)
      })
    },
    // 单头牛燃动费用
    getChart2() {
      let url = '/authdata/ignition/rate?'
      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.actual
          this.chart_data2.data2 = response.data.budget
          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)
      })
    },



    // 牧场每月单头牛用油量对比
    getChart4() {
      this.getChart5Parm.parammaps.deptName = this.deptList[0].name
      let url = '/authdata/diesel/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 = []
      console.log(this.pastureList,'pastureList')
      this.pastureList.forEach((item)=>{
        if(this.pastureName){
          this.pastureName.forEach((item1)=>{
            if(item.name == item1){
              pastureId.push(item.id)
            }
          })
        }
      })
      console.log(pastureId,'pastureId')
      let data = 'startTime=' + startTime
                + '&endTime=' + endTime
                + '&center=' + radio
                + '&pastureId=' + pastureId.toString()
      getJson(url,data).then(response => {
        console.log('图4', response)
        if(response.data){
          this.chart_data4.data1 = response.data.data3
          this.chart_data4.data_name = response.data.data1
          this.chart_data4.xdata = response.data.data2
        }else{
          this.chart_data4.data1 = []
          this.chart_data4.data_name = []
          this.chart_data4.xdata = []
        }
        if(response.data.data1 == null){
          this.chart_data4.data_name = []
        }
        if(response.data.data2 == null ){
          this.chart_data4.xdata = []
          this.getChart5Parm.parammaps.date = ''
        }else{
          this.getChart5Parm.parammaps.date = response.data.data2[0]
        }
        if(response.data.data3 == null){
          this.chart_data4.data1 = []
        }

        console.log(this.chart_data4,'chart_data4')
        this.roadChart4(this.chart_data4)
        this.getChart5()
      })
    },

    // XX月部门统计
    getChart5() {
      let startTime = ''
      let endTime = ''
      if(this.getChart5Parm.parammaps.date !== ''){
        startTime = parseTime(this.getChart5Parm.parammaps.date,'{y}-{m}') + '-01'
        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();
        endTime = parseTime(this.getChart5Parm.parammaps.date,'{y}-{m}') + '-' + lastDay
      }else{
        startTime = ''
        endTime = ''
      }
      let data = {
        name:"getdeptSumMonthDiesel",
        parammaps:{
          startTime:startTime,
          endTime:endTime,
          pastureName:this.pastureName.toString(),
          departmentName:this.getChart5Parm.parammaps.deptName,
        },
      }
      GetDataByName(data).then(response => {
        console.log('图5', response)
        let data1 = []
        let xdata = []
        if(response.data){
          response.data.list.forEach((item)=>{
            data1.push(item.value)
            xdata.push(item.name)
          })
        }
        this.chart_data5 = {
          data1:data1,
          xdata:xdata
        }
        this.roadChart5(this.chart_data5)
      })
    },
    // 牧场每月用油量对比
    getChart6() {
      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:"getPastureSumMonthDiesel",
        parammaps:{
          startTime:startTime,
          endTime:endTime,
          pastureName:this.pastureName.toString(),
        },
      }
      GetReportform(data).then(response => {
        console.log('图6', response)
        if(response.data.chart_data){
          this.chart_data6 = {
            data1:response.data.chart_data.nowYear,
            data_name:response.data.chart_data.pastureName,
            xdata:response.data.chart_data.months
          }
        }else{
          this.chart_data6 = {
            data1:[],
            data_name:[],
            xdata:[]
          }
        }
        if(response.data.chart_data.months == null ){
          this.getChart7Parm.parammaps.date = ''
        }else{
          this.getChart7Parm.parammaps.date = response.data.chart_data.months[0]
          this.getChart8Parm.parammaps.date = response.data.chart_data.months[0]
          this.getChart9Parm.parammaps.date = response.data.chart_data.months[0]
        }
        this.roadChart6(this.chart_data6)
        this.getChart7()
        this.getChart8()
      })
    },
    // XX月每日用油量
    getChart7() {
      let data = {
        name:"getPastureSumDayDiesel",
        parammaps:{
          startTime:this.getChart7Parm.parammaps.date,
          pastureName:this.pastureName.toString(),
        },
      }
      GetReportform(data).then(response => {
        console.log('图7', response)
        if(response.data.chart_data){
          this.chart_data7 = {
              data1:response.data.chart_data.nowYear,
              data_name:response.data.chart_data.pastureName,
              xdata:response.data.chart_data.day
            }
        }else{
          this.chart_data7 = {
            data1:[],
            data_name:[],
            xdata:[]
          }
        }
        this.roadChart7(this.chart_data7)
      })
    },
    // XX月部门统计
    getChart8() {
      let startTime = parseTime(this.getChart8Parm.parammaps.date,'{y}-{m}') + '-01'
      let date = new Date(this.getChart8Parm.parammaps.date);
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let lastDay = new Date(year, month, 0).getDate();
      let endTime = parseTime(this.getChart8Parm.parammaps.date,'{y}-{m}') + '-' + lastDay
      let data = {
        name:"getdeptSumMonthDiesel",
        parammaps:{
          startTime:startTime,
          endTime:endTime,
          pastureName:this.pastureName.toString(),
          departmentName:''
        },
      }
      GetDataByName (data).then(response => {
        console.log('图8', response)
        let data1 = []
        let xdata = []
        if(response.data){
          response.data.list.forEach((item)=>{
            data1.push(item.value)
            xdata.push(item.name)
          })
        }
        this.chart_data8 = {
          data1:data1,
          xdata:xdata
        }
        if(response.data.list){
          this.getChart9Parm.parammaps.deptName = response.data.list[0].name
        }
        this.roadChart8(this.chart_data8)
        this.getChart9()
      })
    },
    // XX部门用油量
    getChart9() {
      let data = {
        name:"geteqclassSumMonthDiesel",
        parammaps:{
          startTime:this.getChart9Parm.parammaps.date,
          pastureName:this.pastureName.toString(),
          deptName:this.getChart9Parm.parammaps.deptName
        },
      }
      GetReportform(data).then(response => {
        console.log('图9', response)
        if(response.data.chart_data){
          this.chart_data9 = {
            data1:response.data.eqCost,
            xdata:response.data.typeName
          }
        }else{
          this.chart_data9 = {
            data1:[],
            xdata:[]
          }
        }
        this.roadChart9(this.chart_data9)
      })
    },
    // 各牧场燃动费用对比
    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: ['#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: [
          {
            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) {
        console.log(param,'图一点击')
        that.pastureName = [param.name]
        that.getChart4()
        that.getChart5()
        that.getChart6()
        that.getChart7()
        that.getChart8()
        that.getChart9()
      })
    },
    // 各牧场柴油用量对比
    roadChart11(chart_data) {
      if (this.chart11 != null) {
        this.chart11.dispose()
      }
      this.chart11 = echarts.init(document.getElementById('chart11'))
      var option = {
        title: { text: '各牧场柴油用量对比', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['柴油用量', '去年同期'],
          right: 40
        },
        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: [
          {
            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.chart11.setOption(option)
      window.onresize = function() {
        this.chart11.resize()
      }
      var that = this
      this.chart11.on('click', function(param, i) {
        console.log(param)
      })
    },
    // 单头牛柴油用量
    roadChart12(chart_data) {
      if (this.chart12 != null) {
        this.chart12.dispose()
      }
      this.chart12 = echarts.init(document.getElementById('chart12'))
      var option = {
        title: { text: '单头牛柴油用量',left:'center', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用'],
          right: 40
        },
        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: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data.data1,
            barMaxWidth:20,
            markLine:{ data:[ {yAxis:chart_data.line} ] },
            emphasis: { label: { show: true, position: 'inside' }}
          },
        ]
      }
      this.chart12.setOption(option)
      window.onresize = function() {
        this.chart12.resize()
      }
      var that = this
      this.chart12.on('click', function(param, i) {
        console.log(param)
      })
    },
    // 单头牛燃动费用
    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: ['#2dc0e8', '#769cfc', '#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} ] }
          },
          {
            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)
      })
    },
    // 牧场每月单头牛用油量对比
    roadChart4(chart_data) {
      if (this.chart4 != null) {
        this.chart4.dispose()
      }
      this.chart4 = echarts.init(document.getElementById('chart4'))
      var text = '牧场每月单头牛用油量对比'
      var option = {
        title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: chart_data.data_name,
          left: 40,
          bottom:0
        },
        color: ['#2dc0e8', '#769cfc', '#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: (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.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月部门统计
    roadChart5(chart_data) {
      if (this.chart5 != null) {
        this.chart5.dispose()
      }
      this.chart5 = echarts.init(document.getElementById('chart5'))
      var text = this.getChart5Parm.parammaps.date + '月部门统计'
      var option = {
        title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际', '预算'],
          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: [
          {
            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.chart5.setOption(option)
      window.onresize = function() {
        this.chart5.resize()
      }
      var that = this
      this.chart5.on('click', function(param, i) {
        console.log(param)
      })
    },
    // 牧场每月用油量对比
    roadChart6(chart_data) {
      if (this.chart6 != null) {
        this.chart6.dispose()
      }
      this.chart6 = echarts.init(document.getElementById('chart6'))
      var option = {
        title: { text: '牧场每月用油量对比', left:'center',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: chart_data.data_name,
          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: '油量(升)' }],
        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
      that.chart6.on('click', function(param, i) {
        console.log(param,'======6')
        that.getChart7Parm.parammaps.date = param.name
        that.getChart7()
        that.getChart8Parm.parammaps.date = param.name
        that.getChart8()
      })
    },
    // XX月每日用油量
    roadChart7(chart_data) {
      console.log(chart_data,'====you')
      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: chart_data.data_name,
          left: 40,
          bottom:0
        },
        color: ['#2dc0e8', '#769cfc', '#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: (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.chart7.setOption(option)
      window.onresize = function() {
        this.chart7.resize()
      }
      var that = this
      this.chart7.on('click', function(param, i) {
        console.log(param)
      })
    },
    // XX月部门统计
    roadChart8(chart_data) {
      if (this.chart8 != null) {
        this.chart8.dispose()
      }
      this.chart8 = echarts.init(document.getElementById('chart8'))
      var text =  this.getChart8Parm.parammaps.date + '月部门统计'
      var option = {
        title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际用量'],
          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: [
          {
            name: '实际用量',
            type: 'bar',
            data: chart_data.data1,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20
          },
        ]
      }
      this.chart8.setOption(option)
      window.onresize = function() {
        this.chart8.resize()
      }
      var that = this
      that.chart8.on('click', function(param, i) {
        console.log(param)
        that.getChart9Parm.parammaps.deptName = param.name
        that.getChart9()
      })
    },
    // XX部门用X量
    roadChart9(chart_data) {
      if (this.chart9 != null) {
        this.chart9.dispose()
      }
      this.chart9 = echarts.init(document.getElementById('chart9'))
      var text = this.getChart9Parm.parammaps.deptName +'用油量'
      var option = {
        title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用'],
          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: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data.data1,
            emphasis: { label: { show: true, position: 'inside' }},
            barMaxWidth:20
          },
        ]
      }
      this.chart9.setOption(option)
      window.onresize = function() {
        this.chart9.resize()
      }
      var that = this
      this.chart9.on('click', function(param, i) {
        console.log(param)
      })
    },
  }
}
</script>
<style>
.el-row {
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>

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