电用量接口对接

src/views/report/queryElec/index.vue

@@ -1,880 +1,888 @@
-<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('1')">
-          <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 style="position: relative;">
-       <el-radio-group v-model="radio2" class="group" @change="changeGroup('2')">
-          <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="chart2" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-
-    <el-row style="position: relative;">
-      <!-- <el-radio-group v-model="radio3" class="group" @change="changeGroup('3')">
-          <el-radio :label="1">集团</el-radio>
-          <el-radio :label="2">一中心</el-radio>
-          <el-radio :label="3">二中心</el-radio>
-          <el-radio :label="4">三中心</el-radio>
-        </el-radio-group> -->
-      <el-col :span="24">
-        <div id="chart3" style="width: 100%;height:400px;" />
-      </el-col>
-    </el-row>
-    <el-row style="position: relative;">
-      <el-col :span="24">
-        <div id="chart8" 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="getChart4Parm.parammaps.pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture('4')">
-            <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('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;" />
-        <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.pastureName" multiple :multiple-limit="5" collapse-tags placeholder="牧场" @change="changePasture('7')">
-            <el-option v-for="item in pastureList" :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>
-  </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: 'QueryWater',
-  data() {
-    return {
-      monthDate: [new Date(),new Date()],
-      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:'设备处'}],
-      total: '',
-      radio1:'集团',
-      isChart1: [],
-      chart_data1: {},
-      getChart1Parm: {
-        name: 'getpSumNowWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-      radio2:'集团',
-      isChart2: [],
-      chart_data2: {},
-      getChart2Parm: {
-        name: 'getpSumNowWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-
-      radio3:1,
-      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')
-        }
-      },
-      isChart8: [],
-      chart_data8: {},
-      getChart8Parm: {
-        name: 'getpSumNowWater',
-        parammaps: {
-          receiveTime: new Date().getFullYear(),
-          pastureName: Cookies.get('pasturename')
-        }
-      },
-    }
-  },
-  created() {
-    this.get_select_list()
-    this.getChart1()
-    this.getChart2()
-    this.getChart3()
-    this.getChart8()
-    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)
-          }
-        })
-      })
-    },
-    changeGroup(item){
-      if(item == 1){
-        this.getChart1()
-      }else if(item == 2){
-        this.getChart2()
-      }else if(item == 3){
-        this.getChart3()
-      }
-    },
-    changeMonth(){
-      this.getChart1()
-      this.getChart2()
-      this.getChart3()
-      this.getChart8()
-    },
-    changePasture(item){
-      console.log(item,'=====item')
-      if(item == 4){
-        this.getChart4()
-      }else if(item == 7){
-        this.getChart7()
-      }
-    },
-    changeDept(item){
-      if(item == 5){
-        this.getChart5()
-      }
-    },
-    get_auto_buttons() {
-      // 图1
-      const chart1 = 'report:queryWater:pastures'
-      const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
-      this.isChart1 = isChart1
-    },
-    // 各牧场年度用电量对比
-    getChart1() {
-      let url = '/authdata/electricity/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
-      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.getChart4Parm.parammaps.pastureName = [response.data.pasture[0]]
-          this.getChart6Parm.parammaps.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()
-      })
-    },
-    // 单头牛电量
-    getChart2() {
-      let url = '/authdata/electricity/singlecow?'
-      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
-      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
-      let radio = ''
-      if(this.radio2 == '集团'){
-        radio = ''
-      }else{
-        radio = this.radio2
-      }
-      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
-          this.total = response.data.all
-        }else{
-          this.chart_data2.data1 = []
-          this.chart_data2.data2 = []
-          this.chart_data2.xdata = []
-          this.chart_data2.line = 0
-          this.total = 0
-        }
-        this.roadChart2(this.chart_data2)
-      })
-    },
-
-    // 单头牛电费
-    getChart3() {
-      let url = '/authdata/electricity/electricityrate?'
-      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
-      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
-      let radio = ''
-      let data = 'startTime=' + startTime
-                + '&endTime=' + endTime
-                + '&center=' + radio
-      getJson(url,data).then(response => {
-        console.log('图3', response)
-        if(response.data){
-          this.chart_data3.data1 = response.data.actual
-          this.chart_data3.xdata = response.data.pasture
-          this.chart_data3.line = response.data.line
-          this.total = response.data.all
-        }else{
-          this.chart_data3.data1 = []
-          this.chart_data3.xdata = []
-          this.chart_data3.line =0
-          this.total = 0
-        }
-        this.roadChart3(this.chart_data3)
-      })
-    },
-
-    // XX牧场XX年每月单头牛用电量对比
-    getChart4() {
-      console.log(this.getChart4Parm.parammaps.pastureName,'pastureName')
-      this.getChart5Parm.parammaps.deptName = this.deptList[0].name
-      let url = '/authdata/electricity/perhead?'
-      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
-      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
-      let radio = ''
-      let pastureId = []
-      this.pastureList.forEach((item)=>{
-        if(this.getChart4Parm.parammaps.pastureName){
-          this.getChart4Parm.parammaps.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
-          this.total = response.data.all
-        }else{
-          this.chart_data4.data1 = []
-          this.chart_data4.data_name = []
-          this.chart_data4.xdata = []
-          this.chart_data4.line =0
-          this.total = 0
-        }
-        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 = []
        }
        if(response.data.all == null ){
          this.total = 0
        }
-        console.log(this.chart_data4,'chart_data4')
-        this.roadChart4(this.chart_data4)
-        this.getChart5()
-      })
-    },
-    // XX月部门统计
-    getChart5() {
-      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:"getdeptSumMonthElec",
-        parammaps:{
-          startTime:startTime,
-          endTime:endTime,
-          pastureName:this.getChart4Parm.parammaps.pastureName.toString(),
-          deptname:this.getChart5Parm.parammaps.deptName,
-        },
-      }
-      GetDataByName(data).then(response => {
-        console.log('图5', response)
-        let data1 = []
-        let xdata = []
-        if( response.data.list){
-          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)
-      })
-    },
-    // XX牧场XX年每月用电量对比
-    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:"getPastureSumMonthElec",
-        parammaps:{
-          startTime:startTime,
-          endTime:endTime,
-          pastureName:this.getChart6Parm.parammaps.pastureName.toString(),
-        },
-      }
-      GetReportform(data).then(response => {
-        console.log('图6', response)
-        // this.chart_data6 = response.data.chart_data
-        if(response.data){
-          this.chart_data6 = {
-            data1:response.data.chart_data.lastYear,
-            data2:response.data.chart_data.nowYear,
-            xdata:response.data.chart_data.months
-          }
-        }else{
-          this.chart_data6 = {
-            data1:[],
-            data2:[],
-            xdata:[]
-          }
-        }
-         if(response.data.chart_data.months){
          this.getChart7Parm.parammaps.date = response.data.chart_data.months[0]
        }else{
          this.getChart7Parm.parammaps.date = ''
        }
-        this.roadChart6(this.chart_data6)
-        this.getChart7()
-      })
-    },
-    // XX月每日用电量
-    getChart7() {
-      let startTime = this.getChart7Parm.parammaps.date
-      let endTime = this.getChart7Parm.parammaps.date
-      let data = {
-        name:"getPastureSumDayElec",
-        parammaps:{
-          startTime:startTime,
-          endTime:endTime,
-          pastureName:this.getChart7Parm.parammaps.pastureName.toString(),
-        },
-      }
-      GetReportform(data).then(response => {
-        console.log('图7', response)
-        // this.chart_data7 = response.data.chart_data
-        if(response.data){
-          this.chart_data7 = {
-            data1:response.data.chart_data.nowYear,
-            data_name:this.getChart7Parm.parammaps.pastureName,
-            xdata:response.data.chart_data.day
-          }
-        }else{
-          this.chart_data7 = {
-            data1:[],
-            data_name:[],
-            xdata:[]
-          }
-        }
-        this.roadChart7(this.chart_data7)
-      })
-    },
-    // 电费完成率
-    getChart8() {
-      let url = '/authdata/electricity/ratecomplete?'
-      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
-      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
-      let radio = ''
-      let data = 'startTime=' + startTime
-                + '&endTime=' + endTime
-                + '&center=' + radio
-      getJson(url,data).then(response => {
-        console.log('图8', response)
-        if(response.data){
-          this.chart_data8.data1 = response.data.actual
-          this.chart_data8.data2 = response.data.budget
-          this.chart_data8.data3 = response.data.complete
-          this.chart_data8.xdata = response.data.pasture
-          this.total = response.data.all
-        }else{
-          this.chart_data8.data1 = []
-          this.chart_data8.data2= []
-          this.chart_data8.data3= []
-          this.chart_data8.xdata = []
-          this.total = 0
-        }
-        this.roadChart8(this.chart_data8)
-      })
-    },
-    // 各牧场年度用电量对比
-    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) {
-        console.log(param,'=====param')
-        that.getChart4Parm.parammaps.pastureName = [param.name]
-        that.getChart6Parm.parammaps.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)
-      })
-    },
-    // 单头牛电费
-    roadChart3(chart_data) {
-      if (this.chart3 != null) {
-        this.chart3.dispose()
-      }
-      this.chart3 = echarts.init(document.getElementById('chart3'))
-      var option = {
-        title: { text: '单头牛电费', left:'center',textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['实际费用'],
-          right: 40
-        },
-        color: ['#61A5E8'],
-        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'
-              }
-            }
-          },
-
-        ]
-      }
-      this.chart3.setOption(option)
-      window.onresize = function() {
-        this.chart3.resize()
-      }
-      var that = this
-      this.chart3.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 = '各牧场' + parseTime(this.monthDate, '{y}') + '年每月单头牛用电量对比'
-      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', '#7ECF51', '#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: {
-          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)
-      })
-    },
-    // XX牧场XX年每月用电量对比
-    roadChart6(chart_data) {
-      if (this.chart6 != null) {
-        this.chart6.dispose()
-      }
-      this.chart6 = echarts.init(document.getElementById('chart6'))
-      var text = this.getChart6Parm.parammaps.pastureName +'牧场XX年每月用电量对比'
-      var option = {
-        title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['去年同期用量', '今年用量'],
-          right: 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: [
-          {
-            name: '去年同期用量',
-            type: 'line',
-            data: chart_data.data1,
-            emphasis: { label: { show: true, position: 'inside' }},
-            barMaxWidth:20
-          },
-          {
-            name: '今年用量',
-            type: 'line',
-            data: chart_data.data2,
-            emphasis: { label: { show: true, position: 'inside' }},
-            barMaxWidth:20
-          }
-        ]
-      }
-      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: 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)
-      })
-    },
-    // 电费完成率
-    roadChart8(chart_data) {
-      if (this.chart8 != null) {
-        this.chart8.dispose()
-      }
-      this.chart8 = echarts.init(document.getElementById('chart8'))
-      var option = {
-        title: { text: '电费完成率',left:'center', textStyle: { color: '#769cfc' }},
-        tooltip: { trigger: 'axis' },
-        legend: {
-          data: ['实际费用', '预算','完成率'],
-          right: 40
-        },
-        color: ['#61A5E8', '#7ECF51','#FFFF00'],
-        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: '' }},
-          { 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' }} },
-          { name: '完成率', type: 'line',yAxisIndex: 1, data: chart_data.data3, emphasis: { label: { show: true, position: 'inside' }} }
-        ]
-      }
-      this.chart8.setOption(option)
-      window.onresize = function() {
-        this.chart8.resize()
-      }
-      var that = this
-      this.chart8.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>
+<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 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="24">
+        <div id="chart3" style="width: 100%;height:400px;" />
+      </el-col>
+    </el-row>
+    <el-row style="position: relative;">
+      <el-col :span="24">
+        <div id="chart8" 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('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;" />
+        <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>
+  </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: 'QueryWater',
+  data() {
+    return {
+      monthDate: [new Date(),new Date()],
+      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:'设备处'}],
+      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')
+        }
+      },
+      isChart8: [],
+      chart_data8: {},
+      getChart8Parm: {
+        name: 'getpSumNowWater',
+        parammaps: {
+          receiveTime: new Date().getFullYear(),
+          pastureName: Cookies.get('pasturename')
+        }
+      },
+    }
+  },
+  created() {
+    this.get_select_list()
+    this.getChart1()
+    this.getChart2()
+    this.getChart3()
+    this.getChart8()
+    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)
+          }
+        })
+      })
+    },
+    changeGroup(){
+      this.getChart1()
+      this.getChart2()
+      this.getChart3()
+      this.getChart4()
+    },
+    changeMonth(){
+      this.getChart1()
+      this.getChart2()
+      this.getChart3()
+      this.getChart8()
+    },
+    changePasture(){
+      this.getChart4()
+      this.getChart6()
+    },
+    changeDept(item){
+      if(item == 5){
+        this.getChart5()
+      }
+    },
+    get_auto_buttons() {
+      // 图1
+      const chart1 = 'report:queryWater:pastures'
+      const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
+      this.isChart1 = isChart1
+    },
+    // 各牧场年度用电量对比
+    getChart1() {
+      let url = '/authdata/electricity/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
+      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()
+      })
+    },
+    // 单头牛电量
+    getChart2() {
+      let url = '/authdata/electricity/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)
+      })
+    },
+
+    // 单头牛电费
+    getChart3() {
+      let url = '/authdata/electricity/electricityrate?'
+      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('图3', response)
+        if(response.data){
+          this.chart_data3.data1 = response.data.actual
+          this.chart_data3.xdata = response.data.pasture
+          this.chart_data3.line = response.data.line
+        }else{
+          this.chart_data3.data1 = []
+          this.chart_data3.xdata = []
+          this.chart_data3.line =0
+        }
+        this.roadChart3(this.chart_data3)
+      })
+    },
+
+    // XX牧场每月单头牛用电量对比
+    getChart4() {
+      this.getChart5Parm.parammaps.deptName = this.deptList[0].name
+      let url = '/authdata/electricity/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 = []
+          this.chart_data4.line =0
+        }
+        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 = 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:"getdeptSumMonthElec",
+        parammaps:{
+          startTime:startTime,
+          endTime:endTime,
+          pastureName:this.pastureName.toString(),
+          deptname: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)
+      })
+    },
+    // XX牧场XX年每月用电量对比
+    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:"getPastureSumMonthElec",
+        parammaps:{
+          startTime:startTime,
+          endTime:endTime,
+          pastureName:this.pastureName.toString(),
+        },
+      }
+      GetReportform(data).then(response => {
+        console.log('图6', response)
+        // this.chart_data6 = response.data.chart_data
+        if(response.data){
+          this.chart_data6 = {
+            data1:response.data.chart_data.lastYear,
+            data2:response.data.chart_data.nowYear,
+            xdata:response.data.chart_data.months,
+            data_name:response.data.chart_data.pastureName
+          }
+        }else{
+          this.chart_data6 = {
+            data1:[],
+            data2:[],
+            xdata:[],
+            data_name:[]
+          }
+        }
+        if(response.data.chart_data.months){
+          this.getChart7Parm.parammaps.date = response.data.chart_data.months[0]
+        }else{
+          this.getChart7Parm.parammaps.date = ''
+        }
+
+        this.roadChart6(this.chart_data6)
+        this.getChart7()
+      })
+    },
+    // XX月每日用电量
+    getChart7() {
+      let startTime = this.getChart7Parm.parammaps.date
+      let endTime = this.getChart7Parm.parammaps.date
+      let data = {
+        name:"getPastureSumDayElec",
+        parammaps:{
+          startTime:startTime,
+          endTime:endTime,
+          pastureName:this.pastureName.toString(),
+        },
+      }
+      GetReportform(data).then(response => {
+        console.log('图7', response)
+        // this.chart_data7 = response.data.chart_data
+        if(response.data){
+          this.chart_data7 = {
+            data1:response.data.chart_data.nowYear,
+            data_name:this.pastureName,
+            xdata:response.data.chart_data.day
+          }
+        }else{
+          this.chart_data7 = {
+            data1:[],
+            data_name:[],
+            xdata:[]
+          }
+        }
+        this.roadChart7(this.chart_data7)
+      })
+    },
+    // 电费完成率
+    getChart8() {
+      let url = '/authdata/electricity/ratecomplete?'
+      let startTime = parseTime(this.monthDate[0],'{y}-{m}')
+      let endTime = parseTime(this.monthDate[1],'{y}-{m}')
+      let radio = ''
+      let data = 'startTime=' + startTime
+                + '&endTime=' + endTime
+                + '&center=' + radio
+      getJson(url,data).then(response => {
+        console.log('图8', response)
+        if(response.data){
+          this.chart_data8.data1 = response.data.actual
+          this.chart_data8.data2 = response.data.budget
+          this.chart_data8.data3 = response.data.complete
+          this.chart_data8.xdata = response.data.pasture
+        }else{
+          this.chart_data8.data1 = []
+          this.chart_data8.data2= []
+          this.chart_data8.data3= []
+          this.chart_data8.xdata = []
+        }
+        this.roadChart8(this.chart_data8)
+      })
+    },
+    // 各牧场用电量对比
+    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) {
+        console.log(param,'=====param')
+        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)
+      })
+    },
+    // 单头牛电费
+    roadChart3(chart_data) {
+      if (this.chart3 != null) {
+        this.chart3.dispose()
+      }
+      this.chart3 = echarts.init(document.getElementById('chart3'))
+      var option = {
+        title: { text: '单头牛电费', left:'center',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: ['实际费用'],
+          right: 40
+        },
+        color: ['#61A5E8'],
+        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'
+              }
+            }
+          },
+
+        ]
+      }
+      this.chart3.setOption(option)
+      window.onresize = function() {
+        this.chart3.resize()
+      }
+      var that = this
+      this.chart3.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 = '各牧场' + parseTime(this.monthDate, '{y}') + '年每月单头牛用电量对比'
+      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', '#7ECF51', '#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: {
+          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)
+      })
+    },
+    // XX牧场XX年每月用电量对比
+    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:'center',textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: chart_data.data_name,
+          right: 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
+        }())
+        // series: [
+        //   {
+        //     name: '去年同期用量',
+        //     type: 'line',
+        //     data: chart_data.data1,
+        //     emphasis: { label: { show: true, position: 'inside' }},
+        //     barMaxWidth:20
+        //   },
+        //   {
+        //     name: '今年用量',
+        //     type: 'line',
+        //     data: chart_data.data2,
+        //     emphasis: { label: { show: true, position: 'inside' }},
+        //     barMaxWidth:20
+        //   }
+        // ]
+      }
+      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: 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)
+      })
+    },
+    // 电费完成率
+    roadChart8(chart_data) {
+      if (this.chart8 != null) {
+        this.chart8.dispose()
+      }
+      this.chart8 = echarts.init(document.getElementById('chart8'))
+      var option = {
+        title: { text: '电费完成率',left:'center', textStyle: { color: '#769cfc' }},
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: ['实际费用', '预算','完成率'],
+          right: 40
+        },
+        color: ['#61A5E8', '#7ECF51','#FFFF00'],
+        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: '' }},
+          { 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' }} },
+          { name: '完成率', type: 'line',yAxisIndex: 1, data: chart_data.data3, emphasis: { label: { show: true, position: 'inside' }} }
+        ]
+      }
+      this.chart8.setOption(option)
+      window.onresize = function() {
+        this.chart8.resize()
+      }
+      var that = this
+      this.chart8.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>