燃动分析页面

src/views/report/queryCombustion/index.vue

@@ -2,10 +2,7 @@
   <div class="app-container">
     <div class="filter-container">
       <div class="block">
-        <el-date-picker v-model="yearDate" :clearable="false" type="month" placeholder="选择年" />
-        <el-select v-model="type" placeholder="类型" @change="changeType()">
-          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
-        </el-select>
+        <el-date-picker v-model="monthDate" :clearable="false" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeMonth()" />
       </div>
     </div>
 
@@ -13,7 +10,7 @@
       <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-group v-model="radio1" class="group" @change="changeGroup()">
           <el-radio :label="1">集团</el-radio>
           <el-radio :label="2">一中心</el-radio>
           <el-radio :label="3">二中心</el-radio>
@@ -27,12 +24,6 @@
        <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-radio-group v-model="radio1" class="group" @change="changeGroup('11')">
-           <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="chart11" style="width: 100%;height:400px;" />
        </el-col>
@@ -43,12 +34,6 @@
        </el-col>
     </el-row>
     <el-row style="position: relative;">
-       <el-radio-group v-model="radio2" class="group" @change="changeGroup('2')">
-          <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="chart2" style="width: 100%;height:400px;" />
       </el-col>
@@ -56,7 +41,7 @@
     <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-select style="float: right;margin-right: 20px;" v-model="getChart4Parm.parammaps.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>
@@ -64,7 +49,7 @@
       </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-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>
@@ -74,15 +59,9 @@
 
     <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>
@@ -101,20 +80,22 @@
 
 <script>
 import echarts from 'echarts'
-import { GetDataByName,GetDataByNames, GetReportform, checkButtons } from '@/api/common'
+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:[],
+      deptList:[{id:0,name:'挤奶处'},{id:1,name:'犊牛处'},{id:2,name:'办公室'},{id:3,name:'饲养处'},{id:4,name:'兽医处'},{id:5,name:'品控处'},{id:6,name:'设备处'}],
       total: '',
       radio1:1,
       isChart1: [],
@@ -257,24 +238,21 @@ export default {
         this.pastureList = response.data.findAllPasture.list
       })
     },
-    changeGroup(item){
-      if(item == 1){
-        this.getChart1()
-      }else if(item == 2){
-        this.getChart2()
-      }
+    changeGroup(){
+      this.getChart1()
+      this.getChart11()
+      this.getChart12()
+      this.getChart2()
     },
-    changePasture(item){
-      if(item == 4){
-        this.getChart4()
-      }else if(item == 7){
-        this.getChart7()
-      }
+    changePasture(){
+      this.getChart4()
+      this.getChart5()
+      this.getChart6()
+      this.getChart7()
+
     },
-    changeDept(item){
-      if(item == 5){
-        this.getChart5()
-      }
+    changeDept(){
+      this.getChart5()
     },
     changeType(){
 
@@ -285,32 +263,76 @@ export default {
       const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
       this.isChart1 = isChart1
     },
-    // 各牧场年度燃动费用对比
+    // 各牧场燃动费用对比
     getChart1() {
-      GetReportform(this.getChart1Parm).then(response => {
+      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)
-        // this.chart_data1 = response.data.chart_data
+        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.chart_data1 = {
           data1:[10,20,30,40,50],
           data2:[20,30,40,50,60],
           xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
         }
         this.roadChart1(this.chart_data1)
-        var nowYear = response.data.chart_data.nowYear
-        var total = 0
-        if (nowYear !== null || nowYear !== undefined) {
-          nowYear.forEach(function(item, index) {
-            total = total + parseFloat(item)
-          })
-        }
-        this.total = total.toFixed(2)
+        this.getChart4()
+        this.getChart5()
+        this.getChart6()
+        this.getChart7()
+        this.getChart8()
+        this.getChart9()
       })
     },
     // 各牧场柴油用量对比
     getChart11() {
-      GetReportform(this.getChart11Parm).then(response => {
-        console.log('图1', response)
-        // this.chart_data1 = response.data.chart_data
+      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('图11', 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.chart_data11 = {
           data1:[10,20,30,40,50],
           data2:[20,30,40,50,60],
@@ -321,9 +343,32 @@ export default {
     },
     // 单头牛柴油用量
     getChart12() {
-      GetReportform(this.getChart12Parm).then(response => {
-        console.log('图1', response)
-        // this.chart_data1 = response.data.chart_data
+      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('图12', 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.chart_data12 = {
           data1:[10,20,30,40,50],
           data2:[20,30,40,50,60],
@@ -334,9 +379,31 @@ export default {
     },
     // 单头牛燃动费用
     getChart2() {
-      GetReportform(this.getChart2Parm).then(response => {
+      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)
-        // this.chart_data2 = response.data.chart_data
+        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.chart_data2 = {
           data1:[10,20,30,40,50],
           data2:[20,30,40,50,60],
@@ -349,7 +416,7 @@ export default {
 
 
 
-    // XX牧场XX年每月单头牛用水量对比
+    // 牧场每月单头牛用水量对比
     getChart4() {
       GetReportform(this.getChart4Parm).then(response => {
         console.log('图4', response)
@@ -380,7 +447,7 @@ export default {
         this.roadChart5(this.chart_data5)
       })
     },
-    // XX牧场XX年每月用水量对比
+    // 牧场每月用油量对比
     getChart6() {
       GetReportform(this.getChart6Parm).then(response => {
         console.log('图6', response)
@@ -394,7 +461,7 @@ export default {
         this.roadChart6(this.chart_data6)
       })
     },
-    // XX月每日用水量
+    // XX月每日用油量
     getChart7() {
       GetReportform(this.getChart7Parm).then(response => {
         console.log('图7', response)
@@ -435,14 +502,14 @@ export default {
         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' }},
+        title: { text: '各牧场燃动费用对比', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
           data: ['燃动费用', '预算'],
@@ -451,7 +518,7 @@ export default {
         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}万' }}],
+        yAxis: [{ type: 'value', name: '元', axisLabel: { formatter: '{value}万' }}],
         series: [
           {
             name: '燃动费用',
@@ -475,8 +542,15 @@ export default {
         this.chart1.resize()
       }
       var that = this
-      this.chart1.on('click', function(param, i) {
-        console.log(param)
+      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()
       })
     },
     // 各牧场柴油用量对比
@@ -489,7 +563,7 @@ export default {
         title: { text: '各牧场柴油用量对比', textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['柴油用量', '预算'],
+          data: ['柴油用量', '去年同期'],
           right: 40
         },
         color: ['#2dc0e8', '#769cfc'],
@@ -505,7 +579,7 @@ export default {
             emphasis: { label: { show: true, position: 'inside' }}
           },
           {
-            name: '预算',
+            name: '去年同期',
             type: 'bar',
             barMaxWidth:20,
             data: chart_data.data2,
@@ -569,7 +643,7 @@ export default {
         title: { text: '单头牛燃动费用', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['实际费用','预算', '去年同期'],
+          data: ['实际费用','预算',],
           right: 40
         },
         color: ['#2dc0e8', '#769cfc', '#FFB800'],
@@ -592,14 +666,6 @@ export default {
             emphasis: { label: { show: true, position: 'inside' }},
             barMaxWidth:20
           },
-          {
-            name: '去年同期',
-            type: 'bar',
-            data: chart_data.data3,
-            emphasis: { label: { show: true, position: 'inside' }},
-            barMaxWidth:20
-          }
-
         ]
       }
       this.chart2.setOption(option)
@@ -611,13 +677,13 @@ export default {
         console.log(param)
       })
     },
-    // 各牧场XX年每月单头牛用水量对比
+    // 牧场每月单头牛用油量对比
     roadChart4(chart_data) {
       if (this.chart4 != null) {
         this.chart4.dispose()
       }
       this.chart4 = echarts.init(document.getElementById('chart4'))
-      var text = parseTime(this.yearDate, '{y}') + '年每月单头牛用油量对比'
+      var text = '牧场每月单头牛用油量对比'
       var option = {
         title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
@@ -700,21 +766,21 @@ export default {
         console.log(param)
       })
     },
-    // XX牧场XX年每月用水量对比
+    // 牧场每月用油量对比
     roadChart6(chart_data) {
       if (this.chart6 != null) {
         this.chart6.dispose()
       }
       this.chart6 = echarts.init(document.getElementById('chart6'))
       var option = {
-        title: { text: 'XX年每月用油量对比', left:'center',textStyle: { color: '#769cfc' }},
+        title: { text: '牧场每月用油量对比', left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['去年同期用量', '今年用量','预算'],
+          data: ['去年同期用量', '今年用量'],
           right: 40,
           bottom:0
         },
-        color: ['#2dc0e8', '#769cfc', '#FFB800'],
+        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: '油量(升)' }],
@@ -732,13 +798,6 @@ export default {
             data: chart_data.data2,
             emphasis: { label: { show: true, position: 'inside' }},
             barMaxWidth:20
-          },
-          {
-            name: '预算',
-            type: 'line',
-            data: chart_data.data3,
-            emphasis: { label: { show: true, position: 'inside' }},
-            barMaxWidth:20
           }
         ]
       }
@@ -747,11 +806,12 @@ export default {
         this.chart6.resize()
       }
       var that = this
-      this.chart6.on('click', function(param, i) {
+      that.chart6.on('click', function(param, i) {
         console.log(param)
+        that.roadChart7()
       })
     },
-    // XX月每日用水量
+    // XX月每日用油量
     roadChart7(chart_data) {
       if (this.chart7 != null) {
         this.chart7.dispose()
@@ -805,7 +865,7 @@ export default {
         title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          data: ['实际', '预算'],
+          data: ['实际用量'],
           right: 40,
           bottom:0
         },
@@ -815,19 +875,12 @@ export default {
         yAxis: [{ type: 'value',name: '油量(升)', axisLabel: { formatter:'{value} 万'}}],
         series: [
           {
-            name: '实际',
+            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.chart8.setOption(option)
@@ -835,8 +888,9 @@ export default {
         this.chart8.resize()
       }
       var that = this
-      this.chart8.on('click', function(param, i) {
+      that.chart8.on('click', function(param, i) {
         console.log(param)
+        that.roadChart9()
       })
     },
     // XX部门用X量
@@ -845,22 +899,22 @@ export default {
         this.chart9.dispose()
       }
       this.chart9 = echarts.init(document.getElementById('chart9'))
-      var text = 'XX月部门'
+      var text = 'XX部门用油量'
       var option = {
         title: { text: text, left:'center',textStyle: { color: '#769cfc' }},
         tooltip: { trigger: 'axis' },
         legend: {
-          // data: ['实际'],
+          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 }}],
+        xAxis: [{ type: 'category',  name: '设备',data: chart_data.xdata, axisLabel: { interval: 0, rotate: 30 }}],
         yAxis: [{ type: 'value',name: '油量(升)', axisLabel: { formatter:'{value} 万'}}],
         series: [
           {
-            name: '实际',
+            name: '实际费用',
             type: 'bar',
             data: chart_data.data1,
             emphasis: { label: { show: true, position: 'inside' }},