mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update websocket reconnect policy & fix some bugs

Browse Source
This commit is contained in:
lb
2024-01-03 15:07:43 +08:00
parent 6b838ce089
commit 0f56538c27
8 changed files with 124 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/GasFlow/index.jsx
View File

@@ -94,7 +94,7 @@ function getOptions(showChart, hisState, runState) {
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;

2
src/components/Common/NatGasFlow/gasChart/chart.config.js
View File

@@ -36,7 +36,7 @@ export default function getOptions(seriesData, name) {
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;

2
src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
View File

@@ -133,7 +133,7 @@ function getOptions(source, period, trend) {
},
},
yAxis: {
name: "单位m³/h",
name: source == 'O2_float' ? "单位:%" : "单位mg/m³",
nameTextStyle: {
color: "#fff",
fontSize: 10,

8
src/components/Common/SmokeHandle/index.jsx
View File

@@ -12,16 +12,16 @@ function SmokeHandle(props) {
<div className={`${cls.smokeHandle__content} flex flex-col`}>
<div className={cls.info__item_groups}>
<div className={cls.info__item}>
氧 气 含 量 : {smokeInfo?.O2_float || 0}%
氧 气 含 量 : {smokeInfo?.O2_float?.toFixed(2) || 0}%
</div>
<div className={cls.info__item}>
氮氧化物浓度: {smokeInfo?.NOX_float || 0}mg/m³
氮氧化物浓度: {smokeInfo?.NOX_float?.toFixed(2) || 0}mg/m³
</div>
<div className={cls.info__item}>
二氧化硫浓度: {smokeInfo?.SO2_float || 0}mg/m³
二氧化硫浓度: {smokeInfo?.SO2_float?.toFixed(2) || 0}mg/m³
</div>
<div className={cls.info__item}>
颗粒物浓度: {smokeInfo?.dust_float || 0}mg/m³
颗粒物浓度: {smokeInfo?.dust_float?.toFixed(2) || 0}mg/m³
</div>
</div>
<TechSplitline />

2
src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
View File

@@ -115,7 +115,7 @@ function getOptions(period, trend) {
.fill(1)
.map((_, index) => {
if (period == "week") {
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;

2
src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
View File

@@ -114,7 +114,7 @@ function getOptions(period, trend) {
.fill(1)
.map((_, index) => {
if (period == "week") {
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;

4
src/utils/energeChartOption.js
View File

@@ -40,7 +40,7 @@ export function getOptions(period, source, trend, options={}) {
.fill(1)
.map((_, index) => {
if (period == "week") {
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;
@@ -65,7 +65,7 @@ export function getOptions(period, source, trend, options={}) {
},
},
yAxis: {
name: "单位/m³",
name: source == 'elec' ? '单位/kWh' : "单位/Nm³",
nameTextStyle: {
color: "#fff",
fontSize: 10,

142
src/utils/index.ts
View File

@@ -12,69 +12,153 @@ class XClient {
url: string;
name: string;
ws: WebSocket;
timeout: number = 1000 * 5;
reconnectCount: number = 0;
onmessage: (msg: MessageEvent) => void;
hb: number = 0;
constructor(
url: string,
name: string,
config: {
url: string;
name: string;
timeout?: number;
reconnectCount?: number;
},
onmessage: (msg: MessageEvent) => void
) {
this.url = url;
this.name = name;
this.ws = new WebSocket(url);
this.url = config.url;
this.name = config.name;
this.ws = new WebSocket(config.url);
this.timeout = config.timeout || 1000 * 5;
this.ws.onopen = () => {
// console.log(`[*] ${this.name} ws connected`);
console.log(`[*] ${this.name} 初始化连接成功`);
this.hb = this.heartbeat();
};
this.onmessage = onmessage;
this.ws.onmessage = onmessage;
this.ws.onerror = (err) => {
console.log("[*] websocket error!", err);
console.log(`[*] ${this.name} 连接错误`, err);
this.tryReconnect();
};
this.ws.onclose = (e) => {
console.log(`[*] ${this.name} ws closed`);
console.log(`[*] ${this.name} 连接关闭`);
};
}
heartbeat() {
if (this.hb) clearInterval(this.hb);
return setInterval(() => {
console.log(`${this.name} ping...`);
if (this.ws.readyState == WebSocket.OPEN) {
this.ws.send("ping");
} else {
clearInterval(this.hb);
this.tryReconnect();
}
}, 1000 * 1);
}
tryReconnect() {
console.log(`[*] ${this.name} 重连中，已尝试:`, this.reconnectCount, "次");
setTimeout(
() => {
if (this.ws.readyState === WebSocket.OPEN) {
this.reconnectCount = 0;
console.log(`[*] ${this.name} 已恢复连接，取消重连`);
return;
}
this.reconnectCount++;
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
console.log(`[*] ${this.name} 重连成功`);
this.reconnectCount = 0;
this.hb = this.heartbeat();
};
this.ws.onmessage = this.onmessage;
this.ws.onerror = (err) => {
console.log(`[*] ${this.name} 重连出错`);
this.tryReconnect();
};
this.ws.onclose = (e) => {
console.log(`[*] ${this.name} 重连连接关闭`);
};
},
this.reconnectCount == 0 ? 0 : this.timeout
);
}
logStatus() {
console.log(
`[*] ${this.name} 重连状态: 连接中`,
this.ws.readyState == WebSocket.CONNECTING
);
console.log(
`[*] ${this.name} 重连状态: 已连接`,
this.ws.readyState == WebSocket.OPEN
);
console.log(
`[*] ${this.name} 重连状态: 关闭中`,
this.ws.readyState == WebSocket.CLOSING
);
console.log(
`[*] ${this.name} 重连状态: 关闭`,
this.ws.readyState == WebSocket.CLOSED
);
}
}
const newUser = uuidv4();
new XClient(
// "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001",
// "ws://192.168.1.114:8081/xc-screen/websocket/xc001",
"ws://10.70.180.10:8081/xc-screen/websocket/xc001",
// "ws://192.168.1.12:8081/xc-screen/websocket/xc001",
"DCS_DATA",
{
url: "ws://10.70.180.10:8081/xc-screen/websocket/xc001" + newUser,
name: "DCS_DATA",
// "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001",
// "ws://192.168.1.114:8081/xc-screen/websocket/xc001",
// "ws://192.168.1.12:8081/xc-screen/websocket/xc001",
},
dcsHandler
);
const newUser = uuidv4();
new XClient(
// "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
"ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
// "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
"MES_DATA",
{
url: "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
name: "MES_DATA",
// "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
// "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",
},
energeHandler
);
// 产线缺陷相关数据
new XClient(
"ws://10.70.2.2:8080/websocket/message?userId=IS" + newUser,
// "ws://192.168.0.33:48082/websocket/message?userId=IS111",
"QUALITY_DATA",
{
url: "ws://10.70.2.2:8080/websocket/message?userId=IS" + newUser,
name: "QUALITY_DATA",
// "ws://192.168.0.33:48082/websocket/message?userId=IS111",
},
IsHandler
);
// 良品率相关数据
new XClient(
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
"ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
// "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser,
"CUTTING_DATA",
{
url: "ws://10.70.2.2:8080/websocket/message?userId=CUTTING" + newUser,
name: "CUTTING_DATA",
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
// "ws://192.168.0.33:48082/websocket/message?userId=CUTTING" + newUser,
},
cuttingHandler
);
// 烟气处理相关数据
new XClient(
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
"ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
// "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
"SMOKE_DATA",
{
url: "ws://10.70.2.2:8080/websocket/message?userId=GAS" + newUser,
name: "SMOKE_DATA",
// "ws://10.70.27.122:8080/websocket/message?userId=CUTTING",
// "ws://192.168.1.62:48082/websocket/message?userId=GAS" + newUser,
},
smokeHandler
);