mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update data

Browse Source
This commit is contained in:
lb 2023-09-11 10:39:38 +08:00
parent aba16e68c2
commit 6133117039
8 changed files with 483 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"server": "ts-node websocket/server.ts", "server": "nodemon --watch websocket/**/*.ts --exec ts-node websocket/server.ts",
"start": "umi dev", "start": "umi dev",
"build": "umi build", "build": "umi build",
"postinstall": "umi generate tmp", "postinstall": "umi generate tmp",

20
src/components/BottomBar/gasi/index.jsx
View File

@ -10,7 +10,7 @@ import SocketContext from '../../../store/socket-data-provider';
function GasI(props) { function GasI(props) {
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
const { runState, hisState } = useContext(SocketContext); const { realtimeState, hisState } = useContext(SocketContext);
let dataList = []; let dataList = [];
let seriesData = []; let seriesData = [];
@ -27,20 +27,16 @@ function GasI(props) {
let options = null; let options = null;
if (showChart) { if (showChart) {
// keys() 结果不是按照顺序，需要 sort() // keys() 结果不是按照顺序，需要 sort()
seriesData = hisState?.combustionAir seriesData = hisState?.wind
? Object.keys(hisState.combustionAir) ? Object.keys(hisState.wind)
.sort() .sort()
.map((key) => hisState.combustionAir[key]) .map((key) => hisState.wind[key])
: Array(8) : Array(8)
.fill(1) .fill(1)
.map((_) => Array(7).fill(0)); .map((_) => Array(7).fill(0));
// debug // debug
console.log( console.log('助燃风 chart series data', hisState?.wind, seriesData);
'助燃风 chart series data',
hisState?.combustionAir,
seriesData,
);
options = { options = {
color: colors, color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 }, grid: { top: 32, right: 12, bottom: 20, left: 48 },
@ -113,7 +109,7 @@ function GasI(props) {
}, },
}; };
} else { } else {
dataList = runState?.combustionAirPressureArr dataList = realtimeState?.wind
? [ ? [
{ id: 1, name: '1#助燃风', value: '0m³/h' }, { id: 1, name: '1#助燃风', value: '0m³/h' },
{ id: 2, name: '2#助燃风', value: '0m³/h' }, { id: 2, name: '2#助燃风', value: '0m³/h' },
@ -125,7 +121,7 @@ function GasI(props) {
{ id: 8, name: '8#助燃风', value: '0m³/h' }, { id: 8, name: '8#助燃风', value: '0m³/h' },
].map((item, index) => ({ ].map((item, index) => ({
...item, ...item,
value: runState.combustionAirPressureArr[index] ?? '/', value: realtimeState.wind[index] ?? '/',
})) }))
: [ : [
{ id: 1, name: '1#助燃风', value: '0m³/h' }, { id: 1, name: '1#助燃风', value: '0m³/h' },
@ -137,8 +133,6 @@ function GasI(props) {
{ id: 7, name: '7#助燃风', value: '0m³/h' }, { id: 7, name: '7#助燃风', value: '0m³/h' },
{ id: 8, name: '8#助燃风', value: '0m³/h' }, { id: 8, name: '8#助燃风', value: '0m³/h' },
]; ];
// debug
console.log('助燃风 实时 data', runState?.combustionAirPressureArr);
} }
function handleSwitchChange(val) { function handleSwitchChange(val) {

4
src/components/BottomBar/gasii/gasChart/index.jsx
View File

@ -8,8 +8,8 @@ function GasChart(props) {
const { dataSource } = props; const { dataSource } = props;
const { hisState } = useContext(SocketContext); const { hisState } = useContext(SocketContext);
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2'; // const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
const dataName = 'gas';
// keys() 的结果不是按照顺序的，需要 sort() // keys() 的结果不是按照顺序的，需要 sort()
const seriesData = hisState?.[dataName] const seriesData = hisState?.[dataName]
? Object.keys(hisState?.[dataName]) ? Object.keys(hisState?.[dataName])

12
src/components/BottomBar/gasii/gridList/index.jsx
View File

@ -31,12 +31,16 @@ function getData(type) {
} }
function GridList(props) { function GridList(props) {
const { runState } = useContext(SocketContext); const { realtimeState } = useContext(SocketContext);
const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr'; // const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
let dataList = getData(props.dataSource); let dataList = getData(props.dataSource);
dataList = runState?.[key] // dataList = realtimeState?.[key]
? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' })) dataList = realtimeState?.['gasii']
? dataList.map((v, i) => ({
...v,
value: realtimeState['gasii'][i] ?? '/',
}))
: dataList; : dataList;
return ( return (

9
src/store/socket-data-provider.js
View File

@ -7,6 +7,7 @@ export const SocketContextProvider = (props) => {
const [runState, setRunState] = useState(null); const [runState, setRunState] = useState(null);
const [energyState, setEnergyState] = useState(null); const [energyState, setEnergyState] = useState(null);
const [hisState, setHisState] = useState(null); const [hisState, setHisState] = useState(null);
const [realtimeState, setRealtimeState] = useState(null);
useEffect(() => { useEffect(() => {
// const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1'); // const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1');
@ -35,7 +36,11 @@ export const SocketContextProvider = (props) => {
console.log('设置能耗数据'); console.log('设置能耗数据');
setEnergyState(incommingData.data); setEnergyState(incommingData.data);
break; break;
case 'HisData': case 'realtime':
console.log('设置流量实时数据');
setRealtimeState(incommingData.data);
break;
case 'his-trend':
console.log('his data arrived, set 历史数据'); console.log('his data arrived, set 历史数据');
setHisState(incommingData.data); setHisState(incommingData.data);
break; break;
@ -46,7 +51,7 @@ export const SocketContextProvider = (props) => {
return ( return (
<SocketContext.Provider <SocketContext.Provider
value={{ kilnInfo, energyState, runState, hisState }} value={{ kilnInfo, energyState, runState, hisState, realtimeState }}
> >
{props.children} {props.children}
</SocketContext.Provider> </SocketContext.Provider>

796
websocket/demo.json
View File

@ -47,425 +47,447 @@
["2#池壁拐角风机", "1972Hz", "正常"], ["2#池壁拐角风机", "1972Hz", "正常"],
["1#池壁拐角风机", "7730Hz", "正常"] ["1#池壁拐角风机", "7730Hz", "正常"]
], ],
"gas": { "realtime": {
"kilnGasT1": { "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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": [ "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 "$$$"
] ]
} }
}, },

44
websocket/server.ts
View File

@ -28,7 +28,8 @@ wss.on('connection', function (ws, req) {
sendMsg(ws, 'kiln-info'); // 窑炉信息 sendMsg(ws, 'kiln-info'); // 窑炉信息
sendMsg(ws, 'run-state'); // 运行状态 sendMsg(ws, 'run-state'); // 运行状态
sendMsg(ws, 'energy-cost'); // 运行状态 sendMsg(ws, 'energy-cost'); // 运行状态
// sendMsg(ws, 'fan'); sendMsg(ws, 'realtime');
sendMsg(ws, 'his-trend');
// sendMsg(ws, 'gas'); // sendMsg(ws, 'gas');
// sendMsg(ws, 'kiln-top'); // sendMsg(ws, 'kiln-top');
// sendMsg(ws, 'kiln-bottom'); // sendMsg(ws, 'kiln-bottom');
@ -44,15 +45,23 @@ type MsgType =
| 'kiln-info' | 'kiln-info'
| 'run-state' | 'run-state'
| 'energy-cost' | 'energy-cost'
| 'realtime'
| 'his-trend'
| 'fan' | 'fan'
| 'gas' | 'gas'
| 'kiln-top' | 'kiln-top'
| 'kiln-bottom'; | 'kiln-bottom';
type ResponseData = {
[key: string]: string | string[];
};
type ResponseDataComplex = {
[key: string]: ResponseData;
};
function sendMsg(ws: WebSocket, type: MsgType) { function sendMsg(ws: WebSocket, type: MsgType) {
let data: { let data: ResponseData | ResponseDataComplex = {};
[key: string]: string;
} = {};
switch (type) { switch (type) {
case 'kiln-info': case 'kiln-info':
for (const key in demoData.kilnInfo) { for (const key in demoData.kilnInfo) {
@ -71,8 +80,31 @@ function sendMsg(ws: WebSocket, type: MsgType) {
case 'run-state': case 'run-state':
data = demoData.runState; data = demoData.runState;
break; break;
case 'fan': case 'realtime':
// data = demoData.fan; /** 天然气 实时流量 */
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; break;
case 'gas': case 'gas':
// data = demoData.gas; // data = demoData.gas;

13
websocket/utils.ts
View File

@ -1,9 +1,10 @@
export default { 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); return Math.floor(Math.random() * (max - min + 1) + min);
}, },
getMinmax(type: '*' | '.' | '+') { getMinmax(type: '*' | '.' | '+' | '$') {
let min: number, max: number; let min: number, max: number;
switch (type) { switch (type) {
case '*': case '*':
@ -18,6 +19,10 @@ export default {
min = 20; min = 20;
max = 70; max = 70;
break; break;
case '$':
min = 1;
max = 100;
break;
} }
return { min, max }; return { min, max };
}, },
@ -34,6 +39,10 @@ export default {
'+++', '+++',
'' + this.randomNum({ ...this.getMinmax('+') }), '' + this.randomNum({ ...this.getMinmax('+') }),
); );
value = value.replace(
'$$$',
'' + this.randomNum({ ...this.getMinmax('$') }, true),
);
return value; return value;
}, },
}; };