update websocket

package.json

@@ -1,7 +1,7 @@
 {
     "private": true,
     "scripts": {
-        "server": "nodemon --watch websocket --exec ts-node websocket/server.ts",
+        "server": "ts-node websocket/server.ts",
         "start": "umi dev",
         "build": "umi build",
         "postinstall": "umi generate tmp",
@@ -23,8 +23,6 @@
     "dependencies": {
         "@ant-design/icons": "^4.7.0",
         "@jiaminghi/data-view-react": "^1.2.5",
-        "@types/node": "^20.6.0",
-        "@types/ws": "^8.5.5",
         "antd": "^4.20.6",
         "echarts": "^5.3.2",
         "echarts-for-react": "^3.0.2",
@@ -32,17 +30,19 @@
         "less": "^4.1.3",
         "less-loader": "^11.0.0",
         "moment": "^2.29.4",
-        "nodemon": "^3.0.1",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-router-dom": "^6.3.0",
         "style-components": "^0.1.0",
         "styled-components": "^5.3.5",
-        "ts-node": "^10.9.1",
+        "umi": "^3.5.23"
-        "umi": "^3.5.23",
-        "ws": "^8.14.1"
     },
     "devDependencies": {
+        "@types/node": "^20.6.0",
+        "@types/ws": "^8.5.5",
+        "nodemon": "^3.0.1",
+        "ws": "^8.14.1",
+        "ts-node": "^10.9.1",
         "@babel/runtime": "^7.18.0",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",

src/components/LeftBar/Kiln.jsx

@@ -8,17 +8,17 @@ export default function Kiln() {
 	const ctx = useContext(SocketContext);
 
 	const infos = [
-		{ label: '窑炉压力', value: ctx.runState?.kilnPressure || '0Pa' },
+		{ label: '窑炉压力', value: ctx.kilnInfo?.kilnPressure || '0Pa' },
-		{ label: '循环水温度', value: ctx.runState?.waterTemp || '0℃' },
+		{ label: '循环水温度', value: ctx.kilnInfo?.waterLoopTemperature || '0℃' },
-		{ label: '循环水流量', value: ctx.runState?.waterFlow || '0㎡/h' },
+		{ label: '循环水流量', value: ctx.kilnInfo?.waterLoopFlow || '0㎡/h' },
-		{ label: '循环水压力', value: ctx.runState?.waterPressure || '0Pa' },
+		{ label: '循环水压力', value: ctx.kilnInfo?.waterLoopPressure || '0Pa' },
-		{ label: '助燃风压力', value: ctx.runState?.combustionAirPressure || '0℃' },
+		{ label: '助燃风压力', value: ctx.kilnInfo?.windPressure || '0℃' },
-		{ label: '碹顶加权温度', value: ctx.runState?.topTemp || '0℃' },
+		{ label: '碹顶加权温度', value: ctx.kilnInfo?.topTemperature || '0℃' },
 		{
 			label: '压缩气压力',
-			value: ctx.runState?.compressedAirPressure || '0Pa',
+			value: ctx.kilnInfo?.gasPressure || '0Pa',
 		},
-		{ label: '融化加权温度', value: ctx.runState?.meltTemp || '0℃' },
+		{ label: '融化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' },
 	];
 
 	return (

src/store/socket-data-provider.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 const SocketContext = React.createContext();
 
 export const SocketContextProvider = (props) => {
+	const [kilnInfo, setkilnInfo] = useState(null);
 	const [runState, setRunState] = useState(null);
 	const [hisState, setHisState] = useState(null);
 
@@ -19,8 +20,12 @@ export const SocketContextProvider = (props) => {
 			if ('data' in e) {
 				console.log('[ws] data ===> ', e.data);
 				if (e.data == '连接成功') return;
+
 				let incommingData = JSON.parse(e.data);
 				switch (incommingData.type) {
+					case 'kiln-info':
+						console.log('设置窑炉信息');
+						setkilnInfo(incommingData.data);
 					case 'RunData':
 						console.log('run data arrived, set 运行时数据');
 						setRunState(incommingData.data);
@@ -35,7 +40,7 @@ export const SocketContextProvider = (props) => {
 	}, []);
 
 	return (
-		<SocketContext.Provider value={{ runState, hisState }}>
+		<SocketContext.Provider value={{ kilnInfo, runState, hisState }}>
 			{props.children}
 		</SocketContext.Provider>
 	);

websocket/demo.json

@@ -1,11 +1,13 @@
 {
-	"baseInfo": {
+	"kilnInfo": {
-		"fireChangeTime": "20分钟",
+		"kilnPressure": "***Kpa",
-		"waterInTemp": "75.0",
+		"waterLoopTemperature": "...℃",
-		"lastFireChangeTime": "10分15秒",
+		"waterLoopFlow": "+++m³/h",
-		"kilnPressure": "94.0",
+		"waterLoopPressure": "***Kpa",
-		"fireDirection": "南火",
+		"windPressure": "***Kpa",
-		"waterOutTemp": "26.0"
+		"gasPressure": "***Kpa",
+		"topTemperature": "...℃",
+		"meltTemperature": "...℃"
 	},
 	"fan": [
 		["8#压延冷却风机", "4373Hz", "正常"],

websocket/server.ts

@@ -1,5 +1,6 @@
 import { WebSocket, WebSocketServer } from 'ws';
 import demoData from './demo.json';
+import utils from './utils';
 
 const wss = new WebSocketServer({ port: 9800 });
 const frequency = 3; // seconds
@@ -24,7 +25,7 @@ wss.on('connection', function (ws, req) {
 	ws.on('error', console.error);
 
 	const timer = setInterval(() => {
-		sendMsg(ws, 'base-info');
+		sendMsg(ws, 'kiln-info'); // 窑炉信息
 		sendMsg(ws, 'fan');
 		sendMsg(ws, 'gas');
 		sendMsg(ws, 'kiln-top');
@@ -37,31 +38,37 @@ wss.on('connection', function (ws, req) {
 	});
 });
 
-type MsgType = 'base-info' | 'fan' | 'gas' | 'kiln-top' | 'kiln-bottom';
+type MsgType = 'kiln-info' | 'fan' | 'gas' | 'kiln-top' | 'kiln-bottom';
 
 function sendMsg(ws: WebSocket, type: MsgType) {
-	let data: any;
+	let data: {
+		[key: string]: string;
+	} = {};
 	switch (type) {
-		case 'base-info':
+		case 'kiln-info':
-			data = demoData.baseInfo;
+			for (const key in demoData.kilnInfo) {
+				data[key] = utils.getRandom(
+					demoData.kilnInfo[key as keyof typeof demoData.kilnInfo],
+				);
+			}
 			break;
 		case 'fan':
-			data = demoData.fan;
+			// data = demoData.fan;
 			break;
 		case 'gas':
-			data = demoData.gas;
+			// data = demoData.gas;
 			break;
 		case 'kiln-top':
-			data = demoData.kilnTop;
+			// data = demoData.kilnTop;
 			break;
 		case 'kiln-bottom':
-			data = demoData.kilnBottom;
+			// data = demoData.kilnBottom;
 			break;
 		default:
-			data = 'You are connected!';
+			// data = 'You are connected!';
 			break;
 	}
 	// console.log("sendMsg: ", ws);
 	// ws.emit("message", JSON.stringify(data));
-	ws.send(JSON.stringify(data));
+	ws.send(JSON.stringify({ type, data }));
 }

websocket/utils.ts

@@ -0,0 +1,39 @@
+export default {
+	// 生成随机数
+	randomNum({ min, max }: { min: number; max: number }) {
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	},
+	getMinmax(type: '*' | '.' | '+') {
+		let min: number, max: number;
+		switch (type) {
+			case '*':
+				min = 30;
+				max = 150;
+				break;
+			case '.':
+				min = 60;
+				max = 200;
+				break;
+			case '+':
+				min = 20;
+				max = 70;
+				break;
+		}
+		return { min, max };
+	},
+	getRandom(value: string) {
+		value = value.replace(
+			'***',
+			'' + this.randomNum({ ...this.getMinmax('*') }),
+		);
+		value = value.replace(
+			'...',
+			'' + this.randomNum({ ...this.getMinmax('.') }),
+		);
+		value = value.replace(
+			'+++',
+			'' + this.randomNum({ ...this.getMinmax('+') }),
+		);
+		return value;
+	},
+};