diff --git a/package.json b/package.json index 56424f5..4905675 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "scripts": { - "server": "ts-node websocket/server.ts", + "server": "nodemon --watch websocket/**/*.ts --exec ts-node websocket/server.ts", "start": "umi dev", "build": "umi build", "postinstall": "umi generate tmp", diff --git a/src/components/BottomBar/gasi/index.jsx b/src/components/BottomBar/gasi/index.jsx index a4b8fd5..ea5a43b 100644 --- a/src/components/BottomBar/gasi/index.jsx +++ b/src/components/BottomBar/gasi/index.jsx @@ -10,7 +10,7 @@ import SocketContext from '../../../store/socket-data-provider'; function GasI(props) { const [showChart, setShowChart] = useState(true); - const { runState, hisState } = useContext(SocketContext); + const { realtimeState, hisState } = useContext(SocketContext); let dataList = []; let seriesData = []; @@ -27,20 +27,16 @@ function GasI(props) { let options = null; if (showChart) { // keys() 结果不是按照顺序，需要 sort() - seriesData = hisState?.combustionAir - ? Object.keys(hisState.combustionAir) + seriesData = hisState?.wind + ? Object.keys(hisState.wind) .sort() - .map((key) => hisState.combustionAir[key]) + .map((key) => hisState.wind[key]) : Array(8) .fill(1) .map((_) => Array(7).fill(0)); // debug - console.log( - '助燃风 chart series data', - hisState?.combustionAir, - seriesData, - ); + console.log('助燃风 chart series data', hisState?.wind, seriesData); options = { color: colors, grid: { top: 32, right: 12, bottom: 20, left: 48 }, @@ -113,7 +109,7 @@ function GasI(props) { }, }; } else { - dataList = runState?.combustionAirPressureArr + dataList = realtimeState?.wind ? [ { id: 1, name: '1#助燃风', value: '0m³/h' }, { id: 2, name: '2#助燃风', value: '0m³/h' }, @@ -125,7 +121,7 @@ function GasI(props) { { id: 8, name: '8#助燃风', value: '0m³/h' }, ].map((item, index) => ({ ...item, - value: runState.combustionAirPressureArr[index] ?? '/', + value: realtimeState.wind[index] ?? '/', })) : [ { id: 1, name: '1#助燃风', value: '0m³/h' }, @@ -137,8 +133,6 @@ function GasI(props) { { id: 7, name: '7#助燃风', value: '0m³/h' }, { id: 8, name: '8#助燃风', value: '0m³/h' }, ]; - // debug - console.log('助燃风 实时 data', runState?.combustionAirPressureArr); } function handleSwitchChange(val) { diff --git a/src/components/BottomBar/gasii/gasChart/index.jsx b/src/components/BottomBar/gasii/gasChart/index.jsx index 5238a7c..5ddd72f 100644 --- a/src/components/BottomBar/gasii/gasChart/index.jsx +++ b/src/components/BottomBar/gasii/gasChart/index.jsx @@ -8,8 +8,8 @@ function GasChart(props) { const { dataSource } = props; const { hisState } = useContext(SocketContext); - const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2'; - + // const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2'; + const dataName = 'gas'; // keys() 的结果不是按照顺序的，需要 sort() const seriesData = hisState?.[dataName] ? Object.keys(hisState?.[dataName]) diff --git a/src/components/BottomBar/gasii/gridList/index.jsx b/src/components/BottomBar/gasii/gridList/index.jsx index 1788ce1..2b5f57d 100644 --- a/src/components/BottomBar/gasii/gridList/index.jsx +++ b/src/components/BottomBar/gasii/gridList/index.jsx @@ -31,12 +31,16 @@ function getData(type) { } function GridList(props) { - const { runState } = useContext(SocketContext); - const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr'; + const { realtimeState } = useContext(SocketContext); + // const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr'; let dataList = getData(props.dataSource); - dataList = runState?.[key] - ? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' })) + // dataList = realtimeState?.[key] + dataList = realtimeState?.['gasii'] + ? dataList.map((v, i) => ({ + ...v, + value: realtimeState['gasii'][i] ?? '/', + })) : dataList; return ( diff --git a/src/store/socket-data-provider.js b/src/store/socket-data-provider.js index 9999537..1a3c4bc 100644 --- a/src/store/socket-data-provider.js +++ b/src/store/socket-data-provider.js @@ -7,6 +7,7 @@ export const SocketContextProvider = (props) => { const [runState, setRunState] = useState(null); const [energyState, setEnergyState] = useState(null); const [hisState, setHisState] = useState(null); + const [realtimeState, setRealtimeState] = useState(null); useEffect(() => { // const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1'); @@ -35,7 +36,11 @@ export const SocketContextProvider = (props) => { console.log('设置能耗数据'); setEnergyState(incommingData.data); break; - case 'HisData': + case 'realtime': + console.log('设置流量实时数据'); + setRealtimeState(incommingData.data); + break; + case 'his-trend': console.log('his data arrived, set 历史数据'); setHisState(incommingData.data); break; @@ -46,7 +51,7 @@ export const SocketContextProvider = (props) => { return ( {props.children} diff --git a/websocket/demo.json b/websocket/demo.json index 9b69ca3..a023fa1 100644 --- a/websocket/demo.json +++ b/websocket/demo.json @@ -47,425 +47,447 @@ ["2#池壁拐角风机", "1972Hz", "正常"], ["1#池壁拐角风机", "7730Hz", "正常"] ], - "gas": { - "kilnGasT1": { + "realtime": { + "gasii": [ + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h" + ], + "wind": [ + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h", + "...m³/h" + ] + }, + "hisTrend": { + "gas": { "FE111R": [ - 53.02, - 69.84, - 99.33, - 17.21, - 1.17, - 27.84, - 95.44, - 30.72, - 32.24, - 64.16, - 59.65, - 14.59, - 78.58, - 99.15, - 58.91, - 34.13, - 99.62, - 2.23, - 28.31, - 91.17, - 97.15, - 60.62, - 94.12, - 23.24 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE113R": [ - 22.04, - 40.78, - 75.62, - 61.01, - 72.7, - 48.46, - 32.44, - 42.51, - 59.61, - 22.86, - 32.95, - 21.32, - 23.59, - 84.16, - 55.14, - 55.71, - 10.81, - 56.53, - 75.51, - 2.85, - 27.77, - 52.42, - 43.34, - 22.04 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE112R": [ - 77.02, - 13.83, - 1.71, - 53.99, - 4.03, - 1, - 22.17, - 61.73, - 11.25, - 31.69, - 90.31, - 69.26, - 68.72, - 80.79, - 3.08, - 39.17, - 12.6, - 35.31, - 97.2, - 38.77, - 27.5, - 11.78, - 72.32, - 23.13 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE115R": [ - 28.31, - 10.16, - 13.22, - 41.44, - 97.19, - 60.08, - 34.13, - 16.75, - 92.7, - 79.48, - 3.08, - 14.71, - 4.4, - 0.88, - 77.6, - 57, - 31, - 86.14, - 44.31, - 45.7, - 6.85, - 65.62, - 77.97, - 49.2 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE114R": [ - 17.72, - 32.45, - 1.42, - 24.51, - 68.57, - 61.48, - 2.08, - 3.1, - 38.27, - 20.07, - 25.71, - 85.58, - 48.31, - 78.14, - 22.43, - 87.47, - 83.78, - 17.66, - 72.36, - 19, - 20.69, - 33.92, - 25.66, - 91.28 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE117R": [ - 47.8, - 62.27, - 90.23, - 28.31, - 73.09, - 34.04, - 9.03, - 44.69, - 32.62, - 25.78, - 27.79, - 25.42, - 28.96, - 56.52, - 75.43, - 50.56, - 90.22, - 11.85, - 4.56, - 39.9, - 9.83, - 65.98, - 91.22, - 92.43 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE116R": [ - 64.79, - 46.14, - 58.67, - 54.46, - 15.67, - 72.02, - 15.06, - 5.88, - 38.19, - 66.98, - 89.24, - 33.13, - 87.57, - 43.95, - 55.06, - 93.26, - 96.91, - 56.5, - 20.75, - 83.76, - 60.88, - 62.04, - 22.34, - 82.43 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE118R": [ - 94.32, - 86.26, - 5.13, - 47.33, - 40.01, - 34.97, - 18.69, - 81.81, - 87.37, - 96.47, - 16.04, - 23.33, - 0.66, - 16.86, - 13.19, - 67.32, - 37.63, - 13.74, - 22.85, - 78.89, - 9.52, - 75.46, - 0.2, - 1.51 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ] }, - "kilnGasT2": { + "wind": { "FE124R": [ - 53.02, - 69.84, - 99.33, - 17.21, - 1.17, - 27.84, - 95.44, - 30.72, - 32.24, - 64.16, - 59.65, - 14.59, - 78.58, - 99.15, - 58.91, - 34.13, - 99.62, - 2.23, - 28.31, - 91.17, - 97.15, - 60.62, - 94.12, - 23.24 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE123aR": [ - 17.72, - 32.45, - 1.42, - 24.51, - 68.57, - 61.48, - 2.08, - 3.1, - 38.27, - 20.07, - 25.71, - 85.58, - 48.31, - 78.14, - 22.43, - 87.47, - 83.78, - 17.66, - 72.36, - 19, - 20.69, - 33.92, - 25.66, - 91.28 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE123R": [ - 77.02, - 13.83, - 1.71, - 53.99, - 4.03, - 1, - 22.17, - 61.73, - 11.25, - 31.69, - 90.31, - 69.26, - 68.72, - 80.79, - 3.08, - 39.17, - 12.6, - 35.31, - 97.2, - 38.77, - 27.5, - 11.78, - 72.32, - 23.13 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE124aR": [ - 22.04, - 40.78, - 75.62, - 61.01, - 72.7, - 48.46, - 32.44, - 42.51, - 59.61, - 22.86, - 32.95, - 21.32, - 23.59, - 84.16, - 55.14, - 55.71, - 10.81, - 56.53, - 75.51, - 2.85, - 27.77, - 52.42, - 43.34, - 22.04 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE126R": [ - 64.79, - 46.14, - 58.67, - 54.46, - 15.67, - 72.02, - 15.06, - 5.88, - 38.19, - 66.98, - 89.24, - 33.13, - 87.57, - 43.95, - 55.06, - 93.26, - 96.91, - 56.5, - 20.75, - 83.76, - 60.88, - 62.04, - 22.34, - 82.43 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE125aR": [ - 47.8, - 62.27, - 90.23, - 28.31, - 73.09, - 34.04, - 9.03, - 44.69, - 32.62, - 25.78, - 27.79, - 25.42, - 28.96, - 56.52, - 75.43, - 50.56, - 90.22, - 11.85, - 4.56, - 39.9, - 9.83, - 65.98, - 91.22, - 92.43 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE125R": [ - 28.31, - 10.16, - 13.22, - 41.44, - 97.19, - 60.08, - 34.13, - 16.75, - 92.7, - 79.48, - 3.08, - 14.71, - 4.4, - 0.88, - 77.6, - 57, - 31, - 86.14, - 44.31, - 45.7, - 6.85, - 65.62, - 77.97, - 49.2 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ], "FE126aR": [ - 94.32, - 86.26, - 5.13, - 47.33, - 40.01, - 34.97, - 18.69, - 81.81, - 87.37, - 96.47, - 16.04, - 23.33, - 0.66, - 16.86, - 13.19, - 67.32, - 37.63, - 13.74, - 22.85, - 78.89, - 9.52, - 75.46, - 0.2, - 1.51 + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$", + "$$$" ] } }, diff --git a/websocket/server.ts b/websocket/server.ts index 21c40f0..00fe28b 100644 --- a/websocket/server.ts +++ b/websocket/server.ts @@ -28,7 +28,8 @@ wss.on('connection', function (ws, req) { sendMsg(ws, 'kiln-info'); // 窑炉信息 sendMsg(ws, 'run-state'); // 运行状态 sendMsg(ws, 'energy-cost'); // 运行状态 - // sendMsg(ws, 'fan'); + sendMsg(ws, 'realtime'); + sendMsg(ws, 'his-trend'); // sendMsg(ws, 'gas'); // sendMsg(ws, 'kiln-top'); // sendMsg(ws, 'kiln-bottom'); @@ -44,15 +45,23 @@ type MsgType = | 'kiln-info' | 'run-state' | 'energy-cost' + | 'realtime' + | 'his-trend' | 'fan' | 'gas' | 'kiln-top' | 'kiln-bottom'; +type ResponseData = { + [key: string]: string | string[]; +}; + +type ResponseDataComplex = { + [key: string]: ResponseData; +}; + function sendMsg(ws: WebSocket, type: MsgType) { - let data: { - [key: string]: string; - } = {}; + let data: ResponseData | ResponseDataComplex = {}; switch (type) { case 'kiln-info': for (const key in demoData.kilnInfo) { @@ -71,8 +80,31 @@ function sendMsg(ws: WebSocket, type: MsgType) { case 'run-state': data = demoData.runState; break; - case 'fan': - // data = demoData.fan; + case 'realtime': + /** 天然气 实时流量 */ + data.gasii = demoData.realtime.gasii.map((v) => utils.getRandom(v)); + /** 助燃风 实时流量 */ + data.wind = demoData.realtime.wind.map((v) => utils.getRandom(v)); + break; + case 'his-trend': + const hisTrend: { + gas: ResponseData; + wind: ResponseData; + } = { + gas: {}, + wind: {}, + }; + Object.keys(demoData.hisTrend.gas).forEach((key) => { + hisTrend.gas[key] = demoData.hisTrend.gas[ + key as keyof typeof demoData.hisTrend.gas + ].map((v) => utils.getRandom(v)); + }); + Object.keys(demoData.hisTrend.wind).forEach((key) => { + hisTrend.wind[key] = demoData.hisTrend.wind[ + key as keyof typeof demoData.hisTrend.wind + ].map((v) => utils.getRandom(v)); + }); + data = hisTrend; break; case 'gas': // data = demoData.gas; diff --git a/websocket/utils.ts b/websocket/utils.ts index bf430b7..a614943 100644 --- a/websocket/utils.ts +++ b/websocket/utils.ts @@ -1,9 +1,10 @@ export default { // 生成随机数 - randomNum({ min, max }: { min: number; max: number }) { + randomNum({ min, max }: { min: number; max: number }, isFloat = false) { + if (isFloat) return (Math.random() * (max - min) + min).toFixed(2); return Math.floor(Math.random() * (max - min + 1) + min); }, - getMinmax(type: '*' | '.' | '+') { + getMinmax(type: '*' | '.' | '+' | '$') { let min: number, max: number; switch (type) { case '*': @@ -18,6 +19,10 @@ export default { min = 20; max = 70; break; + case '$': + min = 1; + max = 100; + break; } return { min, max }; }, @@ -34,6 +39,10 @@ export default { '+++', '' + this.randomNum({ ...this.getMinmax('+') }), ); + value = value.replace( + '$$$', + '' + this.randomNum({ ...this.getMinmax('$') }, true), + ); return value; }, };