|
|
@@ -11,7 +11,7 @@
|
|
|
|
|
|
<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">
|
|
|
- {{ year }}年集团柴油量：{{ total }}万升
|
|
|
+ 燃动费用{{ total }}万元
|
|
|
</p>
|
|
|
<el-radio-group v-model="radio1" class="group" @change="changeGroup('1')">
|
|
|
<el-radio :label="1">集团</el-radio>
|
|
|
@@ -23,7 +23,25 @@
|
|
|
<div id="chart1" style="width: 100%;height:400px;" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
+ <el-row 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-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>
|
|
|
+ </el-row>
|
|
|
+ <el-row style="position: relative;">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div id="chart12" 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="1">集团</el-radio>
|
|
|
@@ -108,6 +126,26 @@ export default {
|
|
|
pastureName: Cookies.get('pasturename')
|
|
|
}
|
|
|
},
|
|
|
+ radio11:1,
|
|
|
+ isChart11: [],
|
|
|
+ chart_data11: {},
|
|
|
+ getChart11Parm: {
|
|
|
+ name: 'getpSumNowWater',
|
|
|
+ parammaps: {
|
|
|
+ receiveTime: new Date().getFullYear(),
|
|
|
+ pastureName: Cookies.get('pasturename')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radio12:1,
|
|
|
+ isChart12: [],
|
|
|
+ chart_data12: {},
|
|
|
+ getChart12Parm: {
|
|
|
+ name: 'getpSumNowWater',
|
|
|
+ parammaps: {
|
|
|
+ receiveTime: new Date().getFullYear(),
|
|
|
+ pastureName: Cookies.get('pasturename')
|
|
|
+ }
|
|
|
+ },
|
|
|
radio2:1,
|
|
|
isChart2: [],
|
|
|
chart_data2: {},
|
|
|
@@ -193,6 +231,8 @@ export default {
|
|
|
created() {
|
|
|
this.get_select_list()
|
|
|
this.getChart1()
|
|
|
+ this.getChart11()
|
|
|
+ this.getChart12()
|
|
|
this.getChart2()
|
|
|
this.getChart4()
|
|
|
this.getChart5()
|
|
|
@@ -245,7 +285,7 @@ export default {
|
|
|
const isChart1 = checkButtons(this.$store.state.user.buttons, chart1)
|
|
|
this.isChart1 = isChart1
|
|
|
},
|
|
|
- // 各牧场年度用水量对比
|
|
|
+ // 各牧场年度燃动费用对比
|
|
|
getChart1() {
|
|
|
GetReportform(this.getChart1Parm).then(response => {
|
|
|
console.log('图1', response)
|
|
|
@@ -266,6 +306,32 @@ export default {
|
|
|
this.total = total.toFixed(2)
|
|
|
})
|
|
|
},
|
|
|
+ // 各牧场柴油用量对比
|
|
|
+ getChart11() {
|
|
|
+ GetReportform(this.getChart11Parm).then(response => {
|
|
|
+ console.log('图1', response)
|
|
|
+ // this.chart_data1 = response.data.chart_data
|
|
|
+ this.chart_data11 = {
|
|
|
+ data1:[10,20,30,40,50],
|
|
|
+ data2:[20,30,40,50,60],
|
|
|
+ xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
|
|
|
+ }
|
|
|
+ this.roadChart11(this.chart_data11)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 单头牛柴油用量
|
|
|
+ getChart12() {
|
|
|
+ GetReportform(this.getChart12Parm).then(response => {
|
|
|
+ console.log('图1', response)
|
|
|
+ // this.chart_data1 = response.data.chart_data
|
|
|
+ this.chart_data12 = {
|
|
|
+ data1:[10,20,30,40,50],
|
|
|
+ data2:[20,30,40,50,60],
|
|
|
+ xdata:["马鞍山牧场", "汶上牧场", "商河牧场", "合肥牧场", "蚌埠牧场"]
|
|
|
+ }
|
|
|
+ this.roadChart12(this.chart_data12)
|
|
|
+ })
|
|
|
+ },
|
|
|
// 单头牛燃动费用
|
|
|
getChart2() {
|
|
|
GetReportform(this.getChart2Parm).then(response => {
|
|
|
@@ -369,17 +435,17 @@ 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: ['今年用量', '去年同期'],
|
|
|
+ data: ['燃动费用', '预算'],
|
|
|
right: 40
|
|
|
},
|
|
|
color: ['#2dc0e8', '#769cfc'],
|
|
|
@@ -388,14 +454,14 @@ export default {
|
|
|
yAxis: [{ type: 'value', name: '升', axisLabel: { formatter: '{value}万' }}],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '今年用量',
|
|
|
+ name: '燃动费用',
|
|
|
type: 'bar',
|
|
|
data: chart_data.data1,
|
|
|
barMaxWidth:20,
|
|
|
emphasis: { label: { show: true, position: 'inside' }}
|
|
|
},
|
|
|
{
|
|
|
- name: '去年同期',
|
|
|
+ name: '预算',
|
|
|
type: 'bar',
|
|
|
barMaxWidth:20,
|
|
|
data: chart_data.data2,
|
|
|
@@ -413,6 +479,86 @@ export default {
|
|
|
console.log(param)
|
|
|
})
|
|
|
},
|
|
|
+ // 各牧场柴油用量对比
|
|
|
+ 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,
|
|
|
+ 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) {
|
|
|
@@ -471,7 +617,7 @@ export default {
|
|
|
this.chart4.dispose()
|
|
|
}
|
|
|
this.chart4 = echarts.init(document.getElementById('chart4'))
|
|
|
- var text = '各牧场' + parseTime(this.yearDate, '{y}') + '年每月单头牛用水量对比'
|
|
|
+ var text = parseTime(this.yearDate, '{y}') + '年每月单头牛用油量对比'
|
|
|
var option = {
|
|
|
title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
@@ -483,7 +629,7 @@ export default {
|
|
|
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: 'm³'}],
|
|
|
+ yAxis: [{ type: 'value',name: '油量(升)'}],
|
|
|
series: (function() {
|
|
|
var serie = []
|
|
|
if(chart_data.data1 !== null){
|
|
|
@@ -527,7 +673,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: '实际',
|
|
|
@@ -561,7 +707,7 @@ export default {
|
|
|
}
|
|
|
this.chart6 = echarts.init(document.getElementById('chart6'))
|
|
|
var option = {
|
|
|
- title: { text: 'XX牧场XX年每月用水量对比', left:'center',textStyle: { color: '#769cfc' }},
|
|
|
+ title: { text: 'XX年每月用油量对比', left:'center',textStyle: { color: '#769cfc' }},
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
legend: {
|
|
|
data: ['去年同期用量', '今年用量','预算'],
|
|
|
@@ -571,7 +717,7 @@ export default {
|
|
|
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: '水量(m³)'}],
|
|
|
+ yAxis: [{ type: 'value',name: '油量(升)' }],
|
|
|
series: [
|
|
|
{
|
|
|
name: '去年同期用量',
|
|
|
@@ -611,7 +757,7 @@ export default {
|
|
|
this.chart7.dispose()
|
|
|
}
|
|
|
this.chart7 = echarts.init(document.getElementById('chart7'))
|
|
|
- var text = parseTime(new Date(), '{m}') + '月每日用水量'
|
|
|
+ var text = parseTime(new Date(), '{m}') + '月每日用油量'
|
|
|
var option = {
|
|
|
title: { text: text, left:'left',textStyle: { color: '#769cfc' }},
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
@@ -623,7 +769,7 @@ export default {
|
|
|
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: '水量(m³)'}],
|
|
|
+ yAxis: [{ type: 'value', name: '油量(升)'}],
|
|
|
series: (function() {
|
|
|
var serie = []
|
|
|
if(chart_data.data1 !== null){
|
|
|
@@ -666,7 +812,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: '实际',
|
|
|
@@ -699,19 +845,19 @@ export default {
|
|
|
this.chart9.dispose()
|
|
|
}
|
|
|
this.chart9 = echarts.init(document.getElementById('chart9'))
|
|
|
- var text = 'XX部门用X量'
|
|
|
+ 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 }}],
|
|
|
- yAxis: [{ type: 'value',name: '吨', axisLabel: { formatter:'{value} 万'}}],
|
|
|
+ yAxis: [{ type: 'value',name: '油量(升)', axisLabel: { formatter:'{value} 万'}}],
|
|
|
series: [
|
|
|
{
|
|
|
name: '实际',
|
|
|
@@ -720,13 +866,6 @@ export default {
|
|
|
emphasis: { label: { show: true, position: 'inside' }},
|
|
|
barMaxWidth:20
|
|
|
},
|
|
|
- {
|
|
|
- name: '预算',
|
|
|
- type: 'bar',
|
|
|
- data: chart_data.data2,
|
|
|
- emphasis: { label: { show: true, position: 'inside' }},
|
|
|
- barMaxWidth:20
|
|
|
- }
|
|
|
]
|
|
|
}
|
|
|
this.chart9.setOption(option)
|
