diff --git a/package.json b/package.json index 904ef56..56424f5 100644 --- a/package.json +++ b/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", - "ws": "^8.14.1" + "umi": "^3.5.23" }, "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", diff --git a/src/components/LeftBar/Kiln.jsx b/src/components/LeftBar/Kiln.jsx index 1b2f708..74e4ef5 100644 --- a/src/components/LeftBar/Kiln.jsx +++ b/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.runState?.waterTemp || '0℃' }, - { label: '循环水流量', value: ctx.runState?.waterFlow || '0㎡/h' }, - { label: '循环水压力', value: ctx.runState?.waterPressure || '0Pa' }, - { label: '助燃风压力', value: ctx.runState?.combustionAirPressure || '0℃' }, - { label: '碹顶加权温度', value: ctx.runState?.topTemp || '0℃' }, + { label: '窑炉压力', value: ctx.kilnInfo?.kilnPressure || '0Pa' }, + { label: '循环水温度', value: ctx.kilnInfo?.waterLoopTemperature || '0℃' }, + { label: '循环水流量', value: ctx.kilnInfo?.waterLoopFlow || '0㎡/h' }, + { label: '循环水压力', value: ctx.kilnInfo?.waterLoopPressure || '0Pa' }, + { label: '助燃风压力', value: ctx.kilnInfo?.windPressure || '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 ( diff --git a/src/store/socket-data-provider.js b/src/store/socket-data-provider.js index 436f39d..ae37149 100644 --- a/src/store/socket-data-provider.js +++ b/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 ( - + {props.children} ); diff --git a/websocket/demo.json b/websocket/demo.json index 2980fcb..996d698 100644 --- a/websocket/demo.json +++ b/websocket/demo.json @@ -1,11 +1,13 @@ { - "baseInfo": { - "fireChangeTime": "20分钟", - "waterInTemp": "75.0", - "lastFireChangeTime": "10分15秒", - "kilnPressure": "94.0", - "fireDirection": "南火", - "waterOutTemp": "26.0" + "kilnInfo": { + "kilnPressure": "***Kpa", + "waterLoopTemperature": "...℃", + "waterLoopFlow": "+++m³/h", + "waterLoopPressure": "***Kpa", + "windPressure": "***Kpa", + "gasPressure": "***Kpa", + "topTemperature": "...℃", + "meltTemperature": "...℃" }, "fan": [ ["8#压延冷却风机", "4373Hz", "正常"], diff --git a/websocket/server.ts b/websocket/server.ts index 74b4ee4..23a0f49 100644 --- a/websocket/server.ts +++ b/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': - data = demoData.baseInfo; + case 'kiln-info': + 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 })); } diff --git a/websocket/utils.ts b/websocket/utils.ts new file mode 100644 index 0000000..bf430b7 --- /dev/null +++ b/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; + }, +};