update websocket reconnect policy & fix some bugs

src/components/Common/GasFlow/index.jsx

@@ -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()}`;

src/components/Common/NatGasFlow/gasChart/chart.config.js

@@ -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()}`;

src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx

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

src/components/Common/SmokeHandle/index.jsx

@@ -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 />

src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx

@@ -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()}`;

src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx

@@ -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()}`;

src/utils/energeChartOption.js

@@ -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,

src/utils/index.ts

@@ -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
 );