src/views/databoard/components/GasChart.vue

@@ -0,0 +1,150 @@
+<!-- 
+    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';
+
+export default {
+	name: 'GasChart',
+	components: {},
+	props: {},
+	data() {
+		const colors = [
+			'#12FFF5',
+			'#2760FF',
+			'#FFD160',
+			'#E80091',
+			'#8064ff',
+			'#ff8a3b',
+			'#8cd26d',
+			'#2aa1ff',
+		];
+		return {
+			chart: null,
+			option: {
+				color: colors,
+				grid: { top: 32, right: 12, bottom: 20, left: 48 },
+				xAxis: {
+					type: 'category',
+					data: Array(7)
+						.fill(1)
+						.map((_, index) => {
+							const today = new Date();
+							const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+								dtimestamp
+							).getDate()}`;
+						})
+						.reverse(),
+					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: [
+					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' },
+						]),
+					},
+				})),
+				tooltip: {
+					trigger: 'axis',
+				},
+			},
+		};
+	},
+	inject: ['resizeChart'],
+	computed: {
+		sidebarStatus() {
+			return this.$store.state.app.sidebar.opened;
+		},
+	},
+	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);
+		},
+		// resizeChart(val) {
+		// 	console.log('resizeChart', val);
+		// 	val && this.chart && this.chart.resize();
+		// },
+	},
+	mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.chart = echarts.init(this.$el);
+		this.chart.setOption(this.option);
+	},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.gas-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/databoard/kiln/EnergeCost.vue

@@ -17,6 +17,11 @@
 					烟气趋势图
 				</h2>
 				<Switcher />
+				<div>
+					<span class="lgd lgd-total">总量</span>
+					<!-- <span class="lgd lgd-day">白班</span>
+						<span class="lgd lgd-night">夜班</span> -->
+				</div>
 			</div>
 			<div
 				class="select-line"
@@ -29,7 +34,9 @@
 					:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
 				<SelectorBtnGroup :options="['日', '周', '月', '年']" />
 			</div>
-			<div class="chart" style="height: 193px"></div>
+			<div class="chart" style="height: 150px; margin-top: 8px;">
+				<GasChart />
+			</div>
 		</div>
 	</Container>
 </template>
@@ -40,9 +47,19 @@ import ShadowRect from '../components/ShadowRect.vue';
 import SplitLine from '../components/line';
 import Switcher from '../components/Switcher.vue';
 import EnergeTop from './EnergeTop.vue';
+import GasChart from '../components/GasChart.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
 export default {
 	name: 'EnergeCost',
-	components: { Container, ShadowRect, SplitLine, Switcher, EnergeTop },
+	components: {
+		Container,
+		ShadowRect,
+		SplitLine,
+		Switcher,
+		EnergeTop,
+		GasChart,
+		SelectorBtnGroup,
+	},
 	props: {},
 	data() {
 		return {};
@@ -52,4 +69,33 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.lgd {
+	color: #fff;
+
+	&:not(:last-child) {
+		margin-right: 12px;
+	}
+}
+
+.lgd::before {
+	content: '';
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.lgd.lgd-total::before {
+	background-color: #ff9e00;
+}
+
+.lgd.lgd-day::before {
+	background-color: #08d8cd;
+}
+
+.lgd.lgd-night::before {
+	background-color: #0b58ff;
+}
+</style>

src/views/databoard/kiln/GasHandle.vue

@@ -89,6 +89,11 @@
 						烟气趋势图
 					</h2>
 					<Switcher />
+					<div>
+						<span class="lgd lgd-total">总量</span>
+						<span class="lgd lgd-day">白班</span>
+						<span class="lgd lgd-night">夜班</span>
+					</div>
 				</div>
 				<div
 					class="select-line"
@@ -101,7 +106,9 @@
 						:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
 					<SelectorBtnGroup :options="['日', '周', '月', '年']" />
 				</div>
-				<div class="chart" style="height: 220px"></div>
+				<div class="chart" style="height: 220px">
+					<GasChart />
+				</div>
 			</div>
 		</Container>
 	</div>
@@ -113,10 +120,18 @@ import ShadowRect from '../components/ShadowRect.vue';
 import KilnLine from '../components/line';
 import Switcher from '../components/Switcher.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
+import GasChart from '../components/GasChart.vue';
 
 export default {
 	name: 'GasHandle',
-	components: { Container, ShadowRect, KilnLine, Switcher, SelectorBtnGroup },
+	components: {
+		Container,
+		ShadowRect,
+		KilnLine,
+		Switcher,
+		SelectorBtnGroup,
+		GasChart,
+	},
 	props: {},
 	data() {
 		return {};
@@ -129,4 +144,33 @@ export default {
 <style scoped lang="scss">
 .gas-handle {
 }
+
+.lgd {
+	color: #fff;
+
+	&:not(:last-child) {
+		margin-right: 12px;
+	}
+}
+
+.lgd::before {
+	content: '';
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.lgd.lgd-total::before {
+	background-color: #ff9e00;
+}
+
+.lgd.lgd-day::before {
+	background-color: #08d8cd;
+}
+
+.lgd.lgd-night::before {
+	background-color: #0b58ff;
+}
 </style>

src/views/databoard/kiln/index.vue

@@ -44,6 +44,17 @@ export default {
 		LeftFour,
 		RightTwo,
 	},
+	// provide() {
+	// 	return {
+	// 		resizeChart: null,
+	// 	};
+	// },
+	mounted() {
+		// this.$el.addEventListener('resize', () => {
+		// 	console.log('resizzzze...')
+		// 	this.resizeChart = Math.random();
+		// });
+	},
 	data() {
 		return {};
 	},