yudao-dev/src/views/databoard/components/GasChart.vue

<!-- 
    filename: GasChart.vue
    author: liubin
    date: 2023-12-12 10:53:49
    description: 
-->

<template>
	<div class="gas-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'

export default {
	name: 'GasChart',
	mixins: [resize],
	components: {},
	props: {
		chartType: '', // 能源类型
		chartTime: ''
	},
	data() {
		const colors = [
			'#12FFF5',
			'#2760FF',
			'#FFD160',
			'#E80091',
			'#8064ff',
			'#ff8a3b',
			'#8cd26d',
			'#2aa1ff',
		];
		return {
			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()
				}
			}
		},
		gasChartMsg: {// 监听天然气，更新图
			handler(newVal, oldVal) {
				if (this.chartType === '天然气I' || this.chartType === '天然气II') {
					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':{
					if (this.chartTime === '周') {
						yData = this.gasChartMsg.hisSumGas1For7Day || []
					}else if(this.chartTime === '月') {
						yData = this.gasChartMsg.sumGas1ForMonth || []
					}else{
						yData = this.gasChartMsg.sumGas1ForYear || []
					}
					gasName = '天然气I'
					xData = this.getXdata()
					break;
				}
				default:
				gasName = '天然气II'
				if (this.chartTime === '周') {
						yData = this.gasChartMsg.hisSumGas2For7Day || []
					}else if(this.chartTime === '月') {
						yData = this.gasChartMsg.sumGas2ForMonth || []
					}else{
						yData = this.gasChartMsg.sumGas2ForYear || []
					}
				xData = this.getXdata()
			}
			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: 60 },
				xAxis: {
					type: 'category',
					data: xData,
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisTick: { show: false },
					axisLine: {
						lineStyle: {
							width: 1,
							color: '#213259',
						},
					},
				},
				yAxis: {
					name: '单位m³/h',
					nameTextStyle: {
						color: '#fff',
						fontSize: 10,
						align: 'right',
					},
					type: 'value',
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#213259',
						},
					},
					splitLine: {
						lineStyle: {
							color: '#213259a0',
						},
					},
				},
				series: seriesData,
				tooltip: {
					trigger: 'axis',
					className: "gas-tooltip"
				},
			}
			option && this.chart.setOption(option)
		},
		getXdata() {
			const today = new Date();
			const currentYear = today.getFullYear();
			const currentMonth = today.getMonth() + 1;
			let days = 30;
			if (this.chartTime === '周') {
				return 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()
			}else if (this.chartTime == "月") {
				if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
					days = 31;
				} else if (currentMonth == 2) {
					days = this.isLeapYear(currentYear) ? 29 : 28;
				}
				return Array(days)
						.fill(1)
						.map((_, index) => {
							return `${currentMonth}.${days - index}`;}).reverse()
			} else {
				return Array(12)
						.fill(1)
						.map((_, index) => {
							return `${currentYear}.${12 - index}`;}).reverse()
			}
		},
		isLeapYear(year) {
			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
		}
	},
};
</script>

<style scoped lang="scss">
.gas-chart {
	width: 100%;
	height: 100%;
}
</style>
<style>
  .gas-tooltip {
    background: #0a2b4f77 !important;
    border: none !important;
    backdrop-filter: blur(12px);
  }
  .gas-tooltip * {
    color: #fff !important;
  }
</style>