more clean job

src/components/BottomBar/gasi/index.jsx

@@ -11,36 +11,8 @@ function GasI(props) {
 	const [showChart, setShowChart] = useState(true);
 	const { runState, hisState } = useContext(SocketContext);
 
-	const dataList = runState?.combustionAirFlow
-		? [
-				{ id: 1, name: '1#助燃风', value: '122m³/h' },
-				{ id: 2, name: '2#助燃风', value: '200m³/h' },
-				{ id: 3, name: '3#助燃风', value: '112m³/h' },
-				{ id: 4, name: '4#助燃风', value: '189m³/h' },
-				{ id: 5, name: '5#助燃风', value: '109m³/h' },
-				{ id: 6, name: '6#助燃风', value: '167m³/h' },
-				{ id: 7, name: '7#助燃风', value: '172m³/h' },
-				{ id: 8, name: '8#助燃风', value: '145m³/h' },
-		  ].map((item, index) => ({
-				...item,
-				value: runState.combustionAirFlow[index],
-		  }))
-		: [
-				{ id: 1, name: '1#助燃风', value: '122m³/h' },
-				{ id: 2, name: '2#助燃风', value: '200m³/h' },
-				{ id: 3, name: '3#助燃风', value: '112m³/h' },
-				{ id: 4, name: '4#助燃风', value: '189m³/h' },
-				{ id: 5, name: '5#助燃风', value: '109m³/h' },
-				{ id: 6, name: '6#助燃风', value: '167m³/h' },
-				{ id: 7, name: '7#助燃风', value: '172m³/h' },
-				{ id: 8, name: '8#助燃风', value: '145m³/h' },
-		  ];
-	const seriesData = hisState?.combustionAir
-		? Object.keys(hisState.combustionAir).map(
-				(key) => hisState.combustionAir[key],
-		  )
-		: Array(8).fill(Array(7).fill(0));
-
+	let dataList = [];
+	let seriesData = [];
 	const colors = [
 		'#12FFF5',
 		'#2760FF',
@@ -51,84 +23,123 @@ function GasI(props) {
 		'#8cd26d',
 		'#2aa1ff',
 	];
-	const options = {
-		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',
+	let options = null;
+	if (showChart) {
+		// keys() 结果不是按照顺序，需要 sort()
+		hisState?.combustionAir
+			? Object.keys(hisState.combustionAir)
+					.sort()
+					.map((key) => hisState.combustionAir[key])
+			: Array(8)
+					.fill(1)
+					.map((_) => Array(7).fill(0));
+
+		// debug
+		console.log('gasI series data', hisState?.combustionAir, seriesData);
+		options = {
+			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,
 				},
-			},
-		},
-		yAxis: {
-			name: '单位/m³',
-			nameTextStyle: {
-				color: '#fff',
-				fontSize: 10,
-				align: 'right',
-			},
-			type: 'value',
-			axisLabel: {
-				color: '#fff',
-				fontSize: 12,
-				formatter: '{value} %',
-			},
-			axisLine: {
-				show: true,
-				lineStyle: {
-					color: '#213259',
+				axisTick: { show: false },
+				axisLine: {
+					lineStyle: {
+						width: 1,
+						color: '#213259',
+					},
 				},
 			},
-			splitLine: {
-				lineStyle: {
-					color: '#213259a0',
+			yAxis: {
+				name: '单位/m³',
+				nameTextStyle: {
+					color: '#fff',
+					fontSize: 10,
+					align: 'right',
 				},
+				type: 'value',
+				axisLabel: {
+					color: '#fff',
+					fontSize: 12,
+					formatter: '{value} %',
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: '#213259',
+					},
+				},
+				splitLine: {
+					lineStyle: {
+						color: '#213259a0',
+					},
+				},
+				interval: 10,
+				min: 0,
+				max: 100,
 			},
-			interval: 10,
-			min: 0,
-			max: 100,
-		},
-		series: seriesData.map((v, i) => ({
-			name: i + 1 + '#助燃风',
-			data: v,
-			type: 'line',
-			areaStyle: {
-				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-					{ offset: 0, color: colors[i] + '40' },
-					{ offset: 0.5, color: colors[i] + '20' },
-					{ offset: 1, color: colors[i] + '00' },
-				]),
+			series: seriesData.map((v, i) => ({
+				name: i + 1 + '#助燃风',
+				data: v,
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: colors[i] + '40' },
+						{ offset: 0.5, color: colors[i] + '20' },
+						{ offset: 1, color: colors[i] + '00' },
+					]),
+				},
+			})),
+			tooltip: {
+				trigger: 'axis',
 			},
-		})),
-		tooltip: {
-			trigger: 'axis',
-		},
-	};
+		};
+	} else {
+		runState?.combustionAirFlow
+			? [
+					{ id: 1, name: '1#助燃风', value: '0m³/h' },
+					{ id: 2, name: '2#助燃风', value: '0m³/h' },
+					{ id: 3, name: '3#助燃风', value: '0m³/h' },
+					{ id: 4, name: '4#助燃风', value: '0m³/h' },
+					{ id: 5, name: '5#助燃风', value: '0m³/h' },
+					{ id: 6, name: '6#助燃风', value: '0m³/h' },
+					{ id: 7, name: '7#助燃风', value: '0m³/h' },
+					{ id: 8, name: '8#助燃风', value: '0m³/h' },
+			  ].map((item, index) => ({
+					...item,
+					value: runState.combustionAirFlow[index],
+			  }))
+			: [
+					{ id: 1, name: '1#助燃风', value: '0m³/h' },
+					{ id: 2, name: '2#助燃风', value: '0m³/h' },
+					{ id: 3, name: '3#助燃风', value: '0m³/h' },
+					{ id: 4, name: '4#助燃风', value: '0m³/h' },
+					{ id: 5, name: '5#助燃风', value: '0m³/h' },
+					{ id: 6, name: '6#助燃风', value: '0m³/h' },
+					{ id: 7, name: '7#助燃风', value: '0m³/h' },
+					{ id: 8, name: '8#助燃风', value: '0m³/h' },
+			  ];
+		// debug
+		console.log('gasI grid data', runState?.combustionAirFlow);
+	}
 
 	function handleSwitchChange(val) {
 		if (val) {
-			// 展示图表
 			setShowChart(true);
 		} else {
-			// 展示数据
 			setShowChart(false);
 		}
 	}

src/components/BottomBar/gasii/gasChart/index.jsx

@@ -10,13 +10,16 @@ function GasChart(props) {
 
 	const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
 
+	// keys() 的结果不是按照顺序的，需要 sort()
 	const seriesData = hisState?.[dataName]
-		? Object.keys(hisState?.[dataName]).map(
-				(key, index) => hisState?.[dataName][key],
-		  )
+		? Object.keys(hisState?.[dataName])
+				.sort()
+				.map((key, index) => hisState?.[dataName][key])
 		: Array(dataSource == 'gas-i' ? 8 : 5).fill(Array(7).fill(0));
 
-	console.log('series data ===> ', seriesData);
+	// debug
+	// console.log('gasII series data', dataName, hisState?.[dataName], seriesData)
+
 	return (
 		<div className={cls.gasChart}>
 			<ReactECharts

src/components/BottomBar/gasii/index.jsx

@@ -12,10 +12,8 @@ function GasII(props) {
 
 	function handleSwitchChange(val) {
 		if (val) {
-			// 展示图表
 			setShowChart(true);
 		} else {
-			// 展示数据
 			setShowChart(false);
 		}
 	}