<template>
|
<div class="echarts-wrapper" @dblclick="dblclick">
|
<div class="echarts-content" ref="chart">
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import {
|
chartFontsize
|
} from '@/assets/js/chartFontsize'
|
import { WebSocketClass } from '@/assets/js/socket'
|
import { checkboxs } from '@/assets/js/powerInfoData'
|
export default {
|
name: "latticeBar",
|
chart: "",
|
chartData: {},
|
props: {
|
id: {
|
require: true,
|
type: String,
|
default: "",
|
},
|
},
|
data() {
|
return {
|
websock: null
|
}
|
},
|
methods: {
|
findParents(node, select) {
|
var parent = node.parentNode;
|
if (parent === null || parent.className.indexOf(select) != -1) {
|
return parent;
|
} else {
|
return this.findParents(parent, select);
|
}
|
},
|
dblclick(e) {
|
this.isAllScreen = !this.isAllScreen
|
let parents = this.findParents(e.currentTarget, 'vdr')
|
if (this.isAllScreen) {
|
this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
|
parents.style.transform = 'none';
|
parents.style.width = '100%';
|
parents.style.height = '100%';
|
parents.style.position = 'fixed';
|
parents.style.left = 0;
|
parents.style.right = 0;
|
parents.style.bottom = 0;
|
parents.style.top = 0;
|
parents.style.zIndex = 99999;
|
} else {
|
parents.style.transform = this.parentsStyle.transform;
|
parents.style.width = this.parentsStyle.width;
|
parents.style.height = this.parentsStyle.height;
|
parents.style.position = this.parentsStyle.position;
|
parents.style.left = 'initial';
|
parents.style.right = 'initial';
|
parents.style.bottom = 'initial';
|
parents.style.top = 'initial';
|
parents.style.zIndex = 'auto';
|
}
|
this.$options.chart.resize();
|
},
|
toParentPage(value) {
|
if (typeof (value) == 'string') {
|
if (sessionStorage.getItem('newPlatform') == 1) {
|
window.parent.parent.postMessage({
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: "电池实时告警",
|
name: "batteryrTimequery",
|
src: "/alarmMager/batteryrTimequery/?alarmType=" + value,
|
closable: true
|
},
|
}
|
}, "*");
|
} else {
|
window.parent.parent.postMessage({
|
cmd: "syncPage",
|
params: {
|
pageInfo: {
|
label: "电池实时告警",
|
name: "batteryrTimequery",
|
src: "#/batteryrTimequery/?alarmType=" + value,
|
closable: true
|
},
|
}
|
}, "*");
|
}
|
}
|
},
|
setOption(opt) {
|
this.$options.chart.setOption(opt);
|
this.$options.chart.on('click', (params) => {
|
let name;
|
if (params.seriesName == '放电') {
|
name = '放电电流';
|
} else if (params.seriesName == '充电') {
|
name = '充电电流';
|
}
|
checkboxs.dcgj.map(item => {
|
if (item.label == name) {
|
this.toParentPage(item.value)
|
}
|
})
|
})
|
},
|
organizeData(data) {
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: function (item) {
|
let str = item[0].axisValueLabel + '<br />';
|
item.map(jtem => {
|
if (jtem.seriesName !== 'bg') {
|
str += jtem.seriesName + ': ' + jtem.data + '<br />'
|
}
|
});
|
return str
|
}
|
},
|
legend: {
|
top: '2%',
|
itemWidth: chartFontsize(18),
|
itemHeight: chartFontsize(12),
|
textStyle: {
|
color: '#ffffff',
|
fontSize: chartFontsize(14),
|
},
|
data: ['访问量', '订单量']
|
},
|
grid: {
|
top: 40,
|
right: 20,
|
left: 50,
|
bottom: 30
|
},
|
xAxis: [{
|
type: 'category',
|
data: [],
|
axisLine: {
|
lineStyle: {
|
color: '#007ed3'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
color: '#FFFFFF',
|
fontSize: chartFontsize(14),
|
interval: 0
|
}
|
}],
|
yAxis: [{
|
max: 200,
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#007ed3'
|
}
|
},
|
axisLabel: {
|
color: '#FFFFFF',
|
fontSize: chartFontsize(14),
|
},
|
}],
|
series: []
|
};
|
let max;
|
data.series.map(item => {
|
max = item.data[0];
|
item.data.map(jtem => {
|
if (jtem > max) {
|
max = jtem;
|
}
|
})
|
});
|
option.yAxis[0].max = max;
|
option.xAxis[0].data = data.xData;
|
let legendData = [];
|
data.series.map(item => {
|
legendData.push(item.name);
|
})
|
option.legend.data = legendData;
|
for (let i = 0; i < data.series.length; i++) {
|
let maxArr = [];
|
data.series[i].data.map(() => {
|
maxArr.push(max)
|
})
|
let plusMinus = (i % 2);
|
let offset;
|
if (plusMinus == 0) {
|
offset = '-65%'
|
} else if (plusMinus == 1) {
|
offset = '65%'
|
}
|
option.series.push({
|
name: data.series[i].name,
|
type: 'pictorialBar',
|
symbol: 'roundRect',
|
itemStyle: {
|
color: data.series[i].color
|
},
|
symbolRepeat: true,
|
symbolSize: ["16%", "4%"],
|
symbolMargin: 2,
|
symbolPosition: 'start',
|
symbolOffset: [offset, 0],
|
z: -20,
|
data: data.series[i].data,
|
});
|
option.series.push({
|
name: 'bg',
|
type: 'pictorialBar',
|
symbol: 'roundRect',
|
itemStyle: {
|
color: '#052b6c'
|
},
|
symbolRepeat: true,
|
symbolSize: ["16%", "4%"],
|
symbolMargin: 2,
|
symbolPosition: 'start',
|
symbolOffset: [offset, 0],
|
z: -30,
|
data: maxArr
|
});
|
}
|
// 设置配置项
|
this.setOption(option);
|
},
|
setData(sendData) {
|
if (sendData) {
|
this.$options.chartData = sendData;
|
this.organizeData(sendData)
|
} else {
|
this.postData()
|
}
|
},
|
postData() {
|
let userId = localStorage.getItem('userId');
|
this.websock = new WebSocketClass(`/screen/batteryAlarm/chargeAnalysis/${userId}`, this.wsMessage)
|
},
|
wsMessage(res) {
|
if (res.code == 1) {
|
let optionData = {
|
xData: [],
|
series: [{
|
name: '放电',
|
data: [],
|
color: '#90ec7d'
|
}, {
|
name: '充电',
|
data: [],
|
color: '#ff6b6b'
|
}]
|
}
|
let resData = res.data;
|
for (let key in resData.reCharge) {
|
if (typeof resData.reCharge[key] == 'string') {
|
optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
|
} else {
|
optionData.series[0].data.push(resData.reCharge[key])
|
}
|
}
|
for (let key in resData.disCharge) {
|
optionData.xData.push(key)
|
if (typeof resData.disCharge[key] == 'string') {
|
optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
|
} else {
|
optionData.series[1].data.push(resData.disCharge[key])
|
}
|
}
|
this.$options.chartData = optionData;
|
this.organizeData(optionData)
|
}
|
},
|
resize() {
|
setTimeout(() => {
|
this.$options.chart.resize();
|
if (JSON.stringify(this.$options.chartData) != '{}') {
|
this.setData(this.$options.chartData);
|
}
|
}, 300)
|
},
|
outClear() {
|
this.websock.closeMyself()
|
this.websock = null
|
window.removeEventListener('resize', this.resize);
|
},
|
stop() {
|
this.websock.status = "close"
|
this.websock.stop()
|
},
|
open() {
|
this.websock.status = "start"
|
this.websock.start()
|
}
|
},
|
mounted() {
|
// 基于准备好的dom，初始化echarts实例
|
this.$options.chart = echarts.init(this.$refs.chart);
|
|
window.addEventListener('resize', this.resize);
|
},
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
