/* eslint-disable vue/valid-template-root */
<template>
<div class="app-container">
<div class="filter-container">
<div class="block">
<el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
</div>
</div>
<el-row v-if="isBarChart1" 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 }}万度
</p>
<el-col :span="24">
<div id="barChart1" style="width: 100%;height:400px;" />
</el-col>
</el-row>
<!-- 年度维修成本 -->
<el-row>
<el-col :span="12">
<div id="lineChart1" style="width: 100%;height:400px;" />
</el-col>
<el-col :span="12">
<div id="lineChart2" style="width: 100%;height:400px;" />
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div id="pieChart1" style="width: 100%;height:400px;" />
</el-col>
<el-col :span="12">
<div id="barChart2" style="width: 100%;height:400px;" />
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// eslint-disable-next-line no-unused-vars
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { GetDataByName, GetDataByNames, GetReportform, checkButtons } from '@/api/common'
import { parseTime } from '@/utils/index.js'
import Cookies from 'js-cookie'
export default {
name: 'QueryElec',
directives: { waves },
components: { Pagination },
data() {
return {
yearDate: new Date(),
pasture: Cookies.get('pasturename'),
year: new Date().getFullYear(),
month: new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
deptment: '维修处',
total: '',
getBarChart1Parm: {
name: 'getpSumNowElec',
parammaps: {
receiveTime: new Date().getFullYear(),
center:'',
pastureName: Cookies.get('pasturename')
}
},
getLineChart1Parm: {
name: 'getPastureSumMonthElec',
parammaps: {
receiveTime: new Date().getFullYear(),
pastureName: Cookies.get('pasturename')
}
},
getLineChart2Parm: {
name: 'getPastureSumDayElec',
parammaps: {
receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
pastureName: Cookies.get('pasturename')
}
},
getPieChart1Parm: {
name: 'getdeptSumMonthElec',
parammaps: {
receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
pastureName: Cookies.get('pasturename')
}
},
getBarChart2Parm: {
name: 'geteqclassSumMonthElec',
parammaps: {
receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
pastureName: Cookies.get('pasturename'),
deptName: ''
}
},
barChart1: null,
lineChart1: null,
lineChart2: null,
pieChart1: null,
barChart2: null,
chart_data1: {
// pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
// nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
// lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
},
chart_data2: {
// months: ['2019-01', '2019-02', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01', '2019-01'],
// nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
// lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
},
chart_data3: {
// day: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
// nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
// lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
},
chart_data4: {
// name: ['饲养处', '其他部门', '设备处', '能源处', '牧场办公室'],
// psum: [
// { value: 335, name: '饲养处' },
// { value: 310, name: '其他部门' },
// { value: 234, name: '设备处' },
// { value: 135, name: '能源处' },
// { value: 1548, name: '牧场办公室' }
// ]
},
chart_data5: {
// typeName: ['小型装载机', '叉车', '拖拉机', '抛料机', '搅拌机'],
// eqCost: [123, 332, 222, 333, 444],
// lastYear: [22, 342, 234, 234, 66]
},
tableKey: 0,
list: null,
total: 0,
listLoading: true,
rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
cellStyle: { padding: 0 + 'px' },
dialogFormVisibleCard: false,
listLoadingSee: true,
rowSeeData: {},
listSee: [],
totalSee: 0,
getdataListParmSee: {
name: 'geteqclassSumDay',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
receiveTime: new Date().getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1),
pastureName: Cookies.get('pasturename'),
deptName: '',
typeName: '',
assetCode: '',
eqName: '',
startTime: '',
stopTime: '',
pastureId: Cookies.get('pastureid')
}
},
buttons: [],
isBarChart1: []
}
},
watch: {
'yearDate': {
deep: true,
handler: function(newVal, oldVal) {
var time = this.yearDate
console.log(newVal.getFullYear())
this.year = time.getFullYear()
this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
this.getLineChart1Parm.parammaps.receiveTime = time.getFullYear()
this.getLineChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
this.getPieChart1Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear() + '-' + (new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1)
this.getBarChart1()
this.getLineChart1()
this.getLineChart2()
this.getPieChart1()
}
}
},
created() {
this.getBarChart1()
this.getLineChart1()
this.getLineChart2()
this.getPieChart1()
const that = this
GetDataByName({ 'name': 'getUserPCButtons', 'parammaps': { 'jwt_username': Cookies.get('name') }}).then(response => {
that.buttons = response.data.list
that.get_auto_buttons()
})
},
mounted() {
// this.roadBarChart1(this.chart_data1)
// this.roadlineChart1(this.chart_data2, this.pasture, this.year)
// this.roadlineChart2(this.chart_data3, this.pasture, this.month)
// this.roadpieChart1(this.chart_data4, this.month)
// this.roadBarChart2(this.chart_data5, this.deptment)
},
methods: {
get_auto_buttons() {
// 图1
const BarChart1 = 'report:queryElec:pastures'
const isBarChart1 = checkButtons(this.$store.state.user.buttons, BarChart1)
this.isBarChart1 = isBarChart1
},
// 各牧场年度维修成本对比
getBarChart1() {
GetReportform(this.getBarChart1Parm).then(response => {
console.log('图1', response)
let pasture = response.data.chart_data.pasture
let keys = []
pasture.forEach((item,key)=>{
if(item.includes("公司")){
keys.push(key)
}
})
let lastYear = response.data.chart_data.lastYear
let new_pasture = pasture.splice(keys[0],keys.length)
let new_lastYear = lastYear.splice(keys[0],keys.length)
let NowYear = response.data.chart_data.nowYear
let new_NowYear = NowYear.splice(keys[0],keys.length)
this.chart_data1.pasture = pasture
this.chart_data1.lastYear = lastYear
this.chart_data1.nowYear = NowYear
// this.chart_data1 = response.data.chart_data
this.roadBarChart1(this.chart_data1)
var nowYear = response.data.chart_data.nowYear
var total = 0
if (nowYear !== null || nowYear !== undefined) {
nowYear.forEach(function(item, index) {
console.log(parseFloat(item))
total = total + parseFloat(item)
})
}
this.total = total.toFixed(4)
})
},
getLineChart1() {
GetReportform(this.getLineChart1Parm).then(response => {
console.log('图2', response)
this.chart_data2 = response.data.chart_data
this.roadlineChart1(this.chart_data2, this.pasture, this.year)
})
},
getLineChart2() {
GetReportform(this.getLineChart2Parm).then(response => {
console.log('图3', response)
this.chart_data3 = response.data.chart_data
this.roadlineChart2(this.chart_data3, this.pasture, this.month)
})
},
getPieChart1() {
GetDataByName(this.getPieChart1Parm).then(response => {
console.log('图4', response)
if (response.data === null || response.data.list === null) {
this.chart_data4 = { name: [], psum: [] }
this.roadpieChart1(this.chart_data4, this.month)
} else {
this.chart_data4.psum = response.data.list
var name = []
console.log(response.data.list)
response.data.list.forEach(function(i) {
name.push(i.name)
})
console.log(this.chart_data4)
this.chart_data4.name = name
this.roadpieChart1(this.chart_data4, this.month)
this.deptment = name[0]
this.getdataListParmSee.parammaps.deptName = name[0]
this.getBarChart2Parm.parammaps.deptName = name[0]
this.getBarChart2()
}
})
},
getBarChart2() {
GetReportform(this.getBarChart2Parm).then(response => {
console.log('图5', response)
this.chart_data5 = response.data.chart_data
this.roadBarChart2(this.chart_data5, this.deptment)
})
},
// 各牧场年度维修成本对比
roadBarChart1(chart_data1) {
if (this.barChart1 != null) {
this.barChart1.dispose()
}
this.barChart1 = echarts.init(document.getElementById('barChart1'))
var option = {
title: { text: '各牧场年度用电量对比', textStyle: { color: '#769cfc' }},
tooltip: { trigger: 'axis' },
legend: {
data: ['今年用量', '去年同期'],
right: 40
},
color: ['#2dc0e8', '#769cfc', '#FFB800'],
grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
xAxis: [{ type: 'category', data: chart_data1.pasture, axisLabel: { interval: 0, rotate: 30 }}],
yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}万' }}],
series: [
{
name: '今年用量',
type: 'bar',
data: chart_data1.nowYear,
emphasis: { label: { show: true, position: 'inside' }}
},
{
name: '去年同期',
type: 'bar',
data: chart_data1.lastYear,
emphasis: { label: { show: true, position: 'inside' }}
}
]
}
this.barChart1.setOption(option)
window.onresize = function() {
this.barChart1.resize()
}
var that = this
this.barChart1.on('click', function(param, i) {
console.log(param)
that.pasture = param.name
that.getLineChart1Parm.parammaps.pastureName = param.name
that.getLineChart2Parm.parammaps.pastureName = param.name
that.getPieChart1Parm.parammaps.pastureName = param.name
that.getBarChart2Parm.parammaps.pastureName = param.name
that.getLineChart1()
that.getLineChart2()
that.getPieChart1()
})
},
// 每月维修成本对比
roadlineChart1(chart_data2, pasture, year) {
if (this.lineChart1 != null) {
this.lineChart1.dispose()
}
this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
var option = {
title: { text: pasture + year + '每月用电量对比', textStyle: { color: '#769cfc' }},
tooltip: { trigger: 'axis' },
legend: {
data: ['今年用量', '去年同期用量'],
x: 'right'
},
color: [ '#769cfc', '#FFB800'],
grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
xAxis: [{ type: 'category', data: chart_data2.months, name: '月份', axisLabel: { interval: 0, rotate: 30 }}],
yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}万' }}],
series: [
{
name: '今年用量',
type: 'line',
data: chart_data2.nowYear,
emphasis: { label: { show: true, position: 'inside' }}
},
{
name: '去年同期用量',
type: 'line',
data: chart_data2.lastYear,
emphasis: { label: { show: true, position: 'inside' }}
}
]
}
this.lineChart1.setOption(option)
window.onresize = function() {
this.lineChart1.resize()
}
var that = this
this.lineChart1.on('click', function(param, i) {
console.log(param)
that.getLineChart2Parm.parammaps.receiveTime = param.name
that.getPieChart1Parm.parammaps.receiveTime = param.name
that.getBarChart2Parm.parammaps.receiveTime = param.name
var num = param.name.substring(5)
console.log(num)
that.month = num
that.getLineChart2()
that.getPieChart1()
})
},
// 每月维修成本对比
roadlineChart2(chart_data3, pasture, month) {
if (this.lineChart2 != null) {
this.lineChart2.dispose()
}
this.lineChart2 = echarts.init(document.getElementById('lineChart2'))
var option = {
title: { text: pasture + month + '月每日用电量对比', textStyle: { color: '#769cfc' }},
tooltip: { trigger: 'axis' },
legend: {
data: ['今年日用量', '去年同期'],
x: 'right'
},
color: [ '#769cfc', '#FFB800'],
grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
xAxis: [{ type: 'category', data: chart_data3.day, name: '日期', axisLabel: { interval: 0 }}],
yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}' }}],
series: [
{
name: '今年日用量',
type: 'line',
data: chart_data3.nowYear,
emphasis: { label: { show: true, position: 'inside' }}
},
{
name: '去年同期',
type: 'line',
data: chart_data3.lastYear,
emphasis: { label: { show: true, position: 'inside' }}
}
]
}
this.lineChart2.setOption(option)
window.onresize = function() {
this.lineChart2.resize()
}
this.lineChart2.on('click', function(param, i) {
console.log(param)
})
},
// 部门统计
roadpieChart1(chart_data4, month) {
if (this.pieChart1 != null) {
this.pieChart1.dispose()
}
this.pieChart1 = echarts.init(document.getElementById('pieChart1'))
var option = {
title: { text: month + '月部门统计', textStyle: { color: '#769cfc' }},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
data: chart_data4.name, top: 40, x: 'right'
},
color: ['#769cfc', '#FFB800'],
grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: chart_data4.psum,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
this.pieChart1.setOption(option)
window.onresize = function() {
this.pieChart1.resize()
}
var that = this
this.pieChart1.on('click', function(param, i) {
console.log(param)
that.deptment = param.name
that.getBarChart2Parm.parammaps.deptName = param.name
that.getBarChart2()
})
},
// 维修成本
roadBarChart2(chart_data5, deptment) {
if (this.barChart2 != null) {
this.barChart2.dispose()
}
this.barChart2 = echarts.init(document.getElementById('barChart2'))
var option = {
title: { text: deptment + '用电量', textStyle: { color: '#769cfc' }},
tooltip: { trigger: 'axis' },
legend: {
data: ['用电量'],
x: 'right'
},
color: [ '#769cfc', '#FFB800'],
grid: { left: '3%', right: '10%', bottom: '4%', containLabel: true },
xAxis: [{ type: 'category', data: chart_data5.typeName, name: '电表名称', axisLabel: { interval: 0 }}],
yAxis: [{ type: 'value', name: '电量(度)', axisLabel: { formatter: '{value}万' }}],
series: [
{
name: '用电量',
type: 'bar',
barWidth: 14,
data: chart_data5.eqCost,
emphasis: { label: { show: true, position: 'inside' }}
}
]
}
this.barChart2.setOption(option)
window.onresize = function() {
this.barChart2.resize()
}
}
}
}
</script>
<style>
.el-row {
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
}
</style>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 20px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>