bugfix

src/components/BottomBar/gasi/index.jsx

@@ -36,7 +36,7 @@ function GasI(props) {
 					.map((_) => Array(7).fill(0));
 
 		// debug
-		console.log('助燃风 chart series data', hisState?.wind, seriesData);
+		// console.log('助燃风 chart series data', hisState?.wind, seriesData);
 		options = {
 			color: colors,
 			grid: { top: 32, right: 12, bottom: 20, left: 48 },
@@ -60,7 +60,8 @@ function GasI(props) {
 				axisLine: {
 					lineStyle: {
 						width: 1,
-						color: '#213259',
+						color: '#4561AE',
+						// color: '#213259',
 					},
 				},
 			},
@@ -79,12 +80,14 @@ function GasI(props) {
 				axisLine: {
 					show: true,
 					lineStyle: {
-						color: '#213259',
+						color: '#4561AE',
+						// color: '#213259',
 					},
 				},
 				splitLine: {
 					lineStyle: {
-						color: '#213259a0',
+						color: '#4561AEa0',
+						// color: '#213259a0',
 					},
 				},
 				// interval: 10,

src/components/BottomBar/gasii/gasChart/chart.config.js

@@ -50,7 +50,8 @@ export default function getOptions(seriesData, name) {
 			axisLine: {
 				lineStyle: {
 					width: 1,
-					color: '#213259',
+					// color: '#213259',
+					color: '#4561AE',
 				},
 			},
 		},
@@ -69,18 +70,22 @@ export default function getOptions(seriesData, name) {
 			},
 			axisLine: {
 				show: true,
+				// lineStyle: {
+				// 	color: '#213259',
+				// },
 				lineStyle: {
-					color: '#213259',
+					color: '#4561AE',
 				},
 			},
 			splitLine: {
 				lineStyle: {
-					color: '#213259a0',
+					// color: '#213259a0',
+					color: '#4561AEa0',
 				},
 			},
 		},
 		series: seriesData.map((arr, index) => ({
-			name: index ? index + 1 + '#' + name : '天然气总流量',
+			name: index !== 0 ? index + '#' + name : '天然气总流量',
 			data: arr,
 			type: 'line',
 			areaStyle: {

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

@@ -18,7 +18,7 @@ function GasChart(props) {
 		: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
 
 	// debug
-	console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
+	// console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
 
 	return (
 		<div className={cls.gasChart}>

src/components/CenterTopData/LeftBoxes/index.jsx

@@ -1,18 +1,21 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useMemo } from 'react';
 import SocketContext from '../../../store/socket-data-provider';
 import icon1 from '@/assets/CenterChart2icon1.svg';
 import icon2 from '@/assets/CenterChart2icon2.svg';
 import icon3 from '@/assets/CenterChart2icon3.svg';
-import icon4 from '@/assets/CenterChart2icon4.svg';
+// import icon4 from '@/assets/CenterChart2icon4.svg';
 
 import cls from './leftbox.module.less';
 
 const Chart2 = () => {
-	const ctx = useContext(SocketContext);
+	const { runState } = useContext(SocketContext);
-	let [time, setTime] = useState([0, 0]);
+	const [time, setTime] = useState([0, 0]);
+
+	// console.clear();
+	// console.log('>>>>>>>> runstate 更新 (', runState, ')');
 
 	useEffect(() => {
-		const restTime = ctx.runState?.lastFireChangeTime;
+		const restTime = runState?.lastFireChangeTime;
 		if (restTime == null) return;
 		console.log('restTime is:', restTime);
 		let timer = null;
@@ -71,23 +74,38 @@ const Chart2 = () => {
 		return () => {
 			clearInterval(timer);
 		};
-	}, [ctx.runState?.lastFireChangeTime]);
+	}, [runState?.lastFireChangeTime, runState?.updateKey]);
+
+	const lastFireChangeTime = {
+		icon: icon3,
+		label: '剩余时间',
+		value: `${time[0]}分${time[1]}秒`,
+	};
+
+	const fireChangeTime = useMemo(() => {
+		return runState?.fireChangeTime || '00:00';
+	}, [runState?.fireChangeTime]);
+
+	const fireDirection = useMemo(() => {
+		// let lastValue = null;
+		// if (runState?.fireDirection) {
+		// 	lastValue = runState?.fireDirection;
+		// }
+		// console.log('换火方向： <', runState?.fireDirection, '>')
+		return runState?.fireDirection || '南火';
+	}, [runState?.fireDirection]);
 
 	const data = [
 		{
 			icon: icon1,
 			label: '换火时间',
-			value: ctx.runState?.fireChangeTime || '00:00',
+			value: fireChangeTime,
-		},
-		{
-			icon: icon3,
-			label: '剩余时间',
-			value: `${time[0]}分${time[1]}秒`,
 		},
+		lastFireChangeTime,
 		{
 			icon: icon2,
 			label: '当前火向',
-			value: ctx.runState?.fireDirection || '南火',
+			value: fireDirection,
 		},
 	];
 

src/components/LeftBar/Kiln.jsx

@@ -18,7 +18,7 @@ export default function Kiln() {
 			label: '压缩气压力',
 			value: ctx.kilnInfo?.gasPressure || '0Pa',
 		},
-		{ label: '融化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' },
+		{ label: '熔化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' },
 	];
 
 	return (

src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx

@@ -112,7 +112,7 @@ const GoodRateChart = (props) => {
 
 	function handleSwitchChange(val) {
 		// val: boolean
-		console.log('switch change', val);
+		// console.log('switch change', val);
 	}
 
 	return (

src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx

@@ -85,7 +85,7 @@ const EnergyCostChart = (props) => {
 
 	function handleSwitchChange(val) {
 		// val: boolean
-		console.log('switch change', val);
+		// console.log('switch change', val);
 	}
 
 	return (

src/components/RightBar/EnergyCost/index.jsx

@@ -7,7 +7,7 @@ import { useContext } from 'react';
 
 function EnergyCost(props) {
 	const { energyState = {} } = useContext(SocketContext);
-	console.log('energyState', energyState);
+	// console.log('energyState', energyState);
 	// let {
 	// 	restHeat = '0kWh',
 	// 	water = '0Km³',
@@ -33,9 +33,9 @@ function EnergyCost(props) {
 					</div>
 					<div className={cls.info__item_groups}>
 						<div className={cls.info__item}>水 耗 量 : {water}</div>
-						<div className={cls.info__item}>天 然 气 I : {gasi}</div>
+						<div className={cls.info__item}>天 然 气 : {gasi}</div>
 						<div className={cls.info__item}>电 耗 量 : {electricity}</div>
-						<div className={cls.info__item}>天 然 气 II: {gasii}</div>
+						{/* <div className={cls.info__item}>天 然 气 II: {gasii}</div> */}
 					</div>
 				</div>
 

src/store/socket-data-provider.js

@@ -20,7 +20,6 @@ export const SocketContextProvider = (props) => {
 		};
 		socket.onmessage = (e) => {
 			if ('data' in e) {
-				console.log('[ws] data ===> ', e.data);
 				if (e.data == '连接成功') return;
 
 				let incommingData = JSON.parse(e.data);
@@ -28,9 +27,10 @@ export const SocketContextProvider = (props) => {
 					case 'kiln-info':
 						console.log('设置窑炉信息');
 						setkilnInfo(incommingData.data);
+						break;
 					case 'run-state':
 						console.log('设置运行时数据');
-						setRunState(incommingData.data);
+						setRunState({ ...incommingData.data, updateKey: Math.random() });
 						break;
 					case 'energy-cost':
 						console.log('设置能耗数据');
@@ -41,7 +41,7 @@ export const SocketContextProvider = (props) => {
 						setRealtimeState(incommingData.data);
 						break;
 					case 'his-trend':
-						console.log('his data arrived, set 历史数据');
+						console.log('设置历史数据');
 						setHisState(incommingData.data);
 						break;
 				}

websocket/server.ts

@@ -85,6 +85,8 @@ function sendMsg(ws: WebSocket, type: MsgType) {
 			break;
 		case 'run-state':
 			data = template.runState;
+			data.fireDirection =
+				Math.floor(Math.random() * 10) % 2 === 0 ? '南火' : '北火';
 			break;
 		case 'realtime':
 			/** 天然气 实时流量 */