窑炉
This commit is contained in:
@@ -17,7 +17,10 @@ export default {
|
||||
name: 'GasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
chartType: '', // 能源类型
|
||||
chartTime: ''
|
||||
},
|
||||
data() {
|
||||
const colors = [
|
||||
'#12FFF5',
|
||||
@@ -30,22 +33,154 @@ export default {
|
||||
'#2aa1ff',
|
||||
];
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(7)
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
gasChartMsg() {
|
||||
return this.$store.state.websocket.sumGasInfo
|
||||
},
|
||||
energyWeekTrend() {
|
||||
return this.$store.state.websocket.energyWeekTrend
|
||||
},
|
||||
energyMonthTrend() {
|
||||
return this.$store.state.websocket.energyMonthTrend
|
||||
},
|
||||
energyYearTrend() {
|
||||
return this.$store.state.websocket.energyYearTrend
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
energyWeekTrend: {// 监听时间变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '周' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
energyMonthTrend: {// 监听时间变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '月' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
energyYearTrend: {// 监听时间变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
if (this.chartTime === '年' && this.chartType === '电耗能') {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
chartTime: {// 监听时间变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
},
|
||||
chartType: {// 监听能源类型变化，更新图
|
||||
handler(newVal, oldVal) {
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.updateChart()
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
let gasName = ''
|
||||
const colors = ['#FFCB59'];
|
||||
let temp = []
|
||||
let seriesData = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
switch (this.chartType) {
|
||||
case '电耗能':{
|
||||
gasName = '电耗能'
|
||||
if (this.chartTime === '周') {
|
||||
temp = this.energyWeekTrend || []
|
||||
}else if(this.chartTime === '月') {
|
||||
temp = this.energyMonthTrend || []
|
||||
}else{
|
||||
temp = this.energyYearTrend || []
|
||||
}
|
||||
temp && temp.map(i => {
|
||||
xData.push(i.time)
|
||||
yData.push(i.qty)
|
||||
})
|
||||
break;
|
||||
}
|
||||
case '天然气I':{
|
||||
yData = this.gasChartMsg.hisSumGas1 || []
|
||||
gasName = '天然气I'
|
||||
xData = Array(7)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
|
||||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse(),
|
||||
.reverse()
|
||||
break;
|
||||
}
|
||||
default:
|
||||
gasName = '天然气II'
|
||||
yData = this.gasChartMsg.hisSumGas2 || []
|
||||
xData = Array(7)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
const today = new Date();
|
||||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
||||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||
dtimestamp
|
||||
).getDate()}`;
|
||||
})
|
||||
.reverse()
|
||||
}
|
||||
if (yData.length == 0) {
|
||||
seriesData = []
|
||||
}else {
|
||||
seriesData = [{
|
||||
name: gasName,
|
||||
data: yData,
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFCB59' + "40" },
|
||||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
||||
{ offset: 1, color: '#FFCB59' + "00" },
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbolSize: 1,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
}]
|
||||
|
||||
}
|
||||
// 绘图
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chart = echarts.init(this.$el);
|
||||
var option = {
|
||||
color: colors,
|
||||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
@@ -82,71 +217,14 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
Array(7)
|
||||
.fill(1)
|
||||
.map((_) => Math.ceil(Math.random() * 100)),
|
||||
Array(7)
|
||||
.fill(1)
|
||||
.map((_) => Math.ceil(Math.random() * 100)),
|
||||
Array(7)
|
||||
.fill(1)
|
||||
.map((_) => Math.ceil(Math.random() * 100)),
|
||||
].map((v, i) => ({
|
||||
name: ['总量', '白班', '夜班'][i],
|
||||
data: v,
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// i % 8 避免超过8个数据时无颜色的问题
|
||||
{ offset: 0, color: colors[i % 8] + '40' },
|
||||
{ offset: 0.5, color: colors[i % 8] + '20' },
|
||||
{ offset: 1, color: colors[i % 8] + '00' },
|
||||
]),
|
||||
},
|
||||
})),
|
||||
series: seriesData,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
sidebarStatus() {
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
},
|
||||
gasChartMsg() {
|
||||
return this.$store.state.websocket.gasInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sidebarStatus(val) {
|
||||
console.log('sidebarStatus', val);
|
||||
this.chart && this.chart.dispose();
|
||||
|
||||
setTimeout(() => {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
}, 500);
|
||||
},
|
||||
gasChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
// this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
// this.updateChart()
|
||||
}
|
||||
option && this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
console.log('resziing.....');
|
||||
});
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user