窑炉

src/views/databoard/components/FlueGas.vue

@@ -0,0 +1,234 @@
+<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: {
+		gasChartDayTrend() {
+			return this.$store.state.websocket.gasChartDayTrend
+		},
+		gasChartWeekTrend() {
+			return this.$store.state.websocket.gasChartWeekTrend
+		},
+		gasChartMonthTrend() {
+			return this.$store.state.websocket.gasChartMonthTrend
+		},
+		gasChartYearTrend() {
+			return this.$store.state.websocket.gasChartYearTrend
+		}
+	},
+	watch: {
+		gasChartDayTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '日') {
+					this.updateChart()
+				}
+			}
+		},
+		gasChartWeekTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+					this.updateChart()
+				}
+			}
+		},
+		gasChartMonthTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+					this.updateChart()
+				}
+			}
+		},
+		gasChartYearTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+					this.updateChart()
+				}
+			}
+		},
+		chartType: {// 监听类型变化，更新图
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		},
+		chartTime: {// 监听时间变化，更新图
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		}
+	},
+	mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+	methods: {
+		updateChart() {
+			let gasName  = ''
+			const colors = ['#FFCB59'];
+			let temp1 = []
+			let temp2 = []
+			let seriesData = []
+			let xData = []
+			let yData = []
+			switch (this.chartTime) {
+				case '日':{
+					temp1 = this.gasChartDayTrend
+					break;
+				}
+				case '周':{
+					temp1 = this.gasChartWeekTrend
+					break;
+				}
+				case '月':{
+					temp1 = this.gasChartMonthTrend
+					break;
+				}
+				case '年':{
+					temp1 = this.gasChartYearTrend
+					break;
+				}
+				default:
+			}
+			switch (this.chartType) {
+				case '氧气含量':{
+					temp2 = temp1.O2_float || []
+					break;
+				}
+				case '二氧化硫':{
+					temp2 = temp1.SO2_float || []
+					break;
+				}
+				case '一氧化氮':{
+					temp2 = temp1.NOX_float || []
+					break;
+				}
+				case '颗粒物':{
+					temp2 = temp1.dust_float || []
+					break;
+				}
+				default:
+			}
+			temp2.length > 0 && temp2.map(i => {
+				xData.push(i.time)
+				yData.push(i.value)
+			}) 
+			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,
+					},
+					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',
+				},
+			}
+			option && this.chart.setOption(option)
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.gas-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/databoard/components/GasChart.vue

@@ -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>
 

src/views/databoard/components/ISRAChart.vue

@@ -1,10 +1,3 @@
-<!-- 
-    filename: ISRAChart.vue
-    author: liubin
-    date: 2023-12-12 09:05:25
-    description: 
--->
-
 <template>
 	<div class="isra-chart"></div>
 </template>
@@ -68,9 +61,7 @@ export default {
 	watch: {
 		israChartMsg: {
 			handler(newVal, oldVal) {
-				console.log(newVal)
 				this.chartData = newVal
-				console.log('newVal============')
 				this.updateChart()
 			}
 		}
@@ -99,48 +90,18 @@ export default {
 						color: '#fff',
 					},
 					subtextStyle: {
-						fontSize: 16,
+						fontSize: 20,
 						color: '#fff00',
 					},
 				},
 				series:[{
-						name: 'Access From',
+						name: 'ISRA缺陷检测',
 						type: 'pie',
-						radius: ['45%', '65%'],
+						center: ['50%', '40%'],
+						radius: ['45%', '70%'],
 						avoidLabelOverlap: true,
 						label: {
-							show: true,
-							position: 'outside',
-							formatter: ({ dataIndex, percent }) => {
-								const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
-								return `{${styleName}|${percent}%}`;
-							},
-							rich: {
-								a: {
-									color: '#2760ff',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-								b: {
-									color: '#518eec',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-								c: {
-									color: '#0ee8e4',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-								d: {
-									color: '#ddb523',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-							},
+							show: false
 						},
 						labelLine: {
 							show: true,

src/views/databoard/components/SelectorBtnGroup.vue

@@ -11,7 +11,7 @@
 			class="btn"
 			v-for="opt in options"
 			:key="opt"
-			@click="active = opt"
+			@click="clickBtn(opt)"
 			:class="active == opt ? 'btn-active' : ''">
 			{{ opt }}
 		</button>
@@ -22,15 +22,18 @@
 export default {
 	name: 'SelectorBtnGroup',
 	components: {},
-	props: ['options'],
+	props: ['options', 'active'],
 	data() {
 		return {
-			active: this.options[0] || 'default'
+			// active: this.options[0] || 'default'
 		};
 	},
 	computed: {},
 	methods: {
-		
+		clickBtn(opt) {
+			// this.active = opt
+			this.$emit('emitFun', opt)
+		}
 	},
 };
 </script>