update fakedata

src/components/RightBar/EnergyCost/index.jsx

@@ -2,8 +2,25 @@ import cls from './index.module.less';
 import Container from '../../Container';
 import TechSplitline from '../TechSplitline';
 import EnergyCostChart from './EnergyCostChart';
+import SocketContext from '../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function EnergyCost(props) {
+	const { energyState = {} } = useContext(SocketContext);
+	console.log('energyState', energyState);
+	// let {
+	// 	restHeat = '0kWh',
+	// 	water = '0Km³',
+	// 	gasi = '0m³',
+	// 	gasii = '0m³',
+	// 	electricity = '0kWh',
+	// } = energyState;
+	let restHeat = energyState?.restHeat || '0kWh';
+	let water = energyState?.water || '0Km³';
+	let gasi = energyState?.gasi || '0m³';
+	let gasii = energyState?.gasii || '0m³';
+	let electricity = energyState?.electricity || '0kWh';
+
 	return (
 		<Container title="能耗" icon="charger" className={cls.energyCost}>
 			<div className={`flex flex-col`}>
@@ -12,13 +29,13 @@ function EnergyCost(props) {
 						className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
 					>
 						<span>余 热 发 电</span>
-						<span>922kWh</span>
+						<span>{restHeat}</span>
 					</div>
 					<div className={cls.info__item_groups}>
-						<div className={cls.info__item}>水 耗 量 : 32Km³</div>
-						<div className={cls.info__item}>天 然 气 I : 83m³</div>
-						<div className={cls.info__item}>电 耗 量 : 52kWh</div>
-						<div className={cls.info__item}>天 然 气 II: 32m³</div>
+						<div className={cls.info__item}>水 耗 量 : {water}</div>
+						<div className={cls.info__item}>天 然 气 I : {gasi}</div>
+						<div className={cls.info__item}>电 耗 量 : {electricity}</div>
+						<div className={cls.info__item}>天 然 气 II: {gasii}</div>
 					</div>
 				</div>
 

src/components/yx-dark/Header.jsx

@@ -10,15 +10,15 @@ export default (props) => {
 	}, 1000);
 
 	return (
-		<header class="header">
+		<header className="header">
 			<div>
-				<span class="header--logo"></span>
+				<span className="header--logo"></span>
 				<h1>宜兴新能源生产线大数据指挥中心</h1>
 			</div>
-			<span class="header--wing absolute company">
+			<span className="header--wing absolute company">
 				设计单位：中建材智能自动化研究院
 			</span>
-			<span class="header--wing absolute datetime">
+			<span className="header--wing absolute datetime">
 				{moment(today).format('YYYY.M.D dddd HH:mm:ss')}
 			</span>
 		</header>

src/store/socket-data-provider.js

@@ -5,6 +5,7 @@ const SocketContext = React.createContext();
 export const SocketContextProvider = (props) => {
 	const [kilnInfo, setkilnInfo] = useState(null);
 	const [runState, setRunState] = useState(null);
+	const [energyState, setEnergyState] = useState(null);
 	const [hisState, setHisState] = useState(null);
 
 	useEffect(() => {
@@ -26,10 +27,14 @@ export const SocketContextProvider = (props) => {
 					case 'kiln-info':
 						console.log('设置窑炉信息');
 						setkilnInfo(incommingData.data);
-					case 'RunData':
-						console.log('run data arrived, set 运行时数据');
+					case 'run-state':
+						console.log('设置运行时数据');
 						setRunState(incommingData.data);
 						break;
+					case 'energy-cost':
+						console.log('设置能耗数据');
+						setEnergyState(incommingData.data);
+						break;
 					case 'HisData':
 						console.log('his data arrived, set 历史数据');
 						setHisState(incommingData.data);
@@ -40,7 +45,9 @@ export const SocketContextProvider = (props) => {
 	}, []);
 
 	return (
-		<SocketContext.Provider value={{ kilnInfo, runState, hisState }}>
+		<SocketContext.Provider
+			value={{ kilnInfo, energyState, runState, hisState }}
+		>
 			{props.children}
 		</SocketContext.Provider>
 	);

websocket/demo.json

@@ -9,6 +9,18 @@
 		"topTemperature": "...℃",
 		"meltTemperature": "...℃"
 	},
+	"energyCost": {
+		"restHeat": "***kWh",
+		"water": "+++Km³",
+		"electricity": "+++kWh",
+		"gasi": "...m³",
+		"gasii": "...m³"
+	},
+	"runState": {
+		"lastFireChangeTime": "3分28秒",
+		"fireChangeTime": "04:00",
+		"fireDirection": "东火"
+	},
 	"fan": [
 		["8#压延冷却风机", "4373Hz", "正常"],
 		["7#压延冷却风机", "4772Hz", "正常"],

websocket/server.ts

@@ -3,7 +3,7 @@ import demoData from './demo.json';
 import utils from './utils';
 
 const wss = new WebSocketServer({ port: 9800 });
-const frequency = 3; // seconds
+const frequency = 10; // seconds
 wss.on('connection', function (ws, req) {
 	// console.log("ws", ws);
 	console.log(
@@ -26,10 +26,12 @@ wss.on('connection', function (ws, req) {
 
 	const timer = setInterval(() => {
 		sendMsg(ws, 'kiln-info'); // 窑炉信息
-		sendMsg(ws, 'fan');
-		sendMsg(ws, 'gas');
-		sendMsg(ws, 'kiln-top');
-		sendMsg(ws, 'kiln-bottom');
+		sendMsg(ws, 'run-state'); // 运行状态
+		sendMsg(ws, 'energy-cost'); // 运行状态
+		// sendMsg(ws, 'fan');
+		// sendMsg(ws, 'gas');
+		// sendMsg(ws, 'kiln-top');
+		// sendMsg(ws, 'kiln-bottom');
 	}, frequency * 1000);
 
 	ws.on('close', function () {
@@ -38,7 +40,14 @@ wss.on('connection', function (ws, req) {
 	});
 });
 
-type MsgType = 'kiln-info' | 'fan' | 'gas' | 'kiln-top' | 'kiln-bottom';
+type MsgType =
+	| 'kiln-info'
+	| 'run-state'
+	| 'energy-cost'
+	| 'fan'
+	| 'gas'
+	| 'kiln-top'
+	| 'kiln-bottom';
 
 function sendMsg(ws: WebSocket, type: MsgType) {
 	let data: {
@@ -52,6 +61,16 @@ function sendMsg(ws: WebSocket, type: MsgType) {
 				);
 			}
 			break;
+		case 'energy-cost':
+			for (const key in demoData.energyCost) {
+				data[key] = utils.getRandom(
+					demoData.energyCost[key as keyof typeof demoData.energyCost],
+				);
+			}
+			break;
+		case 'run-state':
+			data = demoData.runState;
+			break;
 		case 'fan':
 			// data = demoData.fan;
 			break;