整体优化js脚本，解决页面切换速度过快导致上一个页面异步fetch的结果返回会污染当前页面同名变量的问题

web-ui.service/web/static/js/app.js

@@ -56,17 +56,6 @@ async function fetchIMEI() {
   }
 }
 
-function setText(id, value)
-{
-  const el = document.getElementById(id);
-  if (el) el.textContent = value ?? "--";
-}
-
-function setBtnStatus(id, enabled) {
-  const btn = document.getElementById(id);
-  if (btn) btn.disabled = !enabled;
-}
-
 let sysTimeTimer = null;
 function startSysTime() {
   if (sysTimeTimer !== null) {

web-ui.service/web/static/js/page1.js

@@ -110,13 +110,13 @@ function getLoadInfo(){
     })
     .then(data => {
       ["load1m","load5m","load15m","runQueue","bootTime","uptime"]
-        .forEach(id => setText(id, data[id]));
+        .forEach(id => setText(id, data[id], "page1"));
     })
     .catch(e => {
       console.error("load info failed:", e);
 
       ["load1m","load5m","load15m","runQueue","bootTime","uptime"]
-        .forEach(id => setText(id, null));
+        .forEach(id => setText(id, null, "page1"));
     });
 }
 
@@ -135,7 +135,7 @@ function getServiceInfo(){
         "var6","var7","var8","var9",
         "var11","var22","var33","var44",
         "var55","var66","var77","var88"
-      ].forEach(id => setText(id, data[id]));
+      ].forEach(id => setText(id, data[id], "page1"));
     })
     .catch(e => {
       console.error("getAllServiceStatus() failed:", e);
@@ -145,7 +145,7 @@ function getServiceInfo(){
         "var6","var7","var8","var9",
         "var11","var22","var33","var44",
         "var55","var66","var77","var88"
-      ].forEach(id => setText(id, null));
+      ].forEach(id => setText(id, null, "page1"));
     });
 }
 

web-ui.service/web/static/js/page2.js

@@ -183,13 +183,13 @@ function getNetworkStatus() {
     })
     .then(data => {
       ["var1","var2","var3","var4","var5"]
-        .forEach(id => setText(id, data[id]));
+        .forEach(id => setText(id, data[id], "page2"));
     })
     .catch(e => {
       console.error("getNetworkStatus() failed:", e);
 
       ["var1","var2","var3","var4","var5"]
-        .forEach(id => setText(id, null));
+        .forEach(id => setText(id, null, "page2"));
     });
 
   getNetLogLevel();

web-ui.service/web/static/js/page3.js

@@ -123,13 +123,13 @@ function getTimeStatus() {
     })
     .then(data => {
       ["var1","var2","var3","var4","var5","var6"]
-        .forEach(id => setText(id, data[id]));
+        .forEach(id => setText(id, data[id], "page3"));
     })
     .catch(e => {
       console.error("getTimeStatus() failed:", e);
 
       ["var1","var2","var3","var4","var5","var6"]
-        .forEach(id => setText(id, null));
+        .forEach(id => setText(id, null, "page3"));
     });
 
   getTimeLogLevel();

web-ui.service/web/static/js/page4.js

@@ -123,16 +123,16 @@ function getGnssStatus() {
     })
     .then(data => {
       ["var1", "var2", "var3"].forEach(id => {
-        setText(id, data[id]);
+        setText(id, data[id], "page4");
       });
       const located = data.var2 !== "" && data.var3 !== "" && data.var2 !== "--" && data.var3 !== "--";
-      setText("var4", located ? "🟢已定位" : "🔵定位中");
+      setText("var4", located ? "🟢已定位" : "🔵定位中", "page4");
     })
     .catch(e => {
       console.error("getGnssStatus() failed:", e);
 
       ["var1", "var2", "var3", "var4"].forEach(id => {
-        setText(id, null);
+        setText(id, null, "page4");
       });
     });
 

web-ui.service/web/static/js/page5.js

@@ -114,10 +114,10 @@ function restartCameraService() {
 }
 
 function getCameraStatus() {
-  setBtnStatus("btn1", false);
-  setBtnStatus("btn2", false);
-  setBtnStatus("btn3", false);
-  setBtnStatus("btn4", false);
+  setBtnStatus("btn1", false, "page5");
+  setBtnStatus("btn2", false, "page5");
+  setBtnStatus("btn3", false, "page5");
+  setBtnStatus("btn4", false, "page5");
 
   fetch("/api/camera/status")
     .then(async r => {
@@ -129,19 +129,19 @@ function getCameraStatus() {
     })
     .then(data => {
       ["avar1","avar2","avar3","avar4","avar5", "avar6"]
-        .forEach(id => setText(id, data[id]));
+        .forEach(id => setText(id, data[id], "page5"));
     })
     .catch(e => {
       console.error("getCameraStatus() failed:", e);
 
       ["avar1","avar2","avar3","avar4","avar5", "avar6"]
-        .forEach(id => setText(id, null));
+        .forEach(id => setText(id, null, "page5"));
     })
     .finally(() => {
-      setBtnStatus("btn1", true);
-      setBtnStatus("btn2", true);
-      setBtnStatus("btn3", true);
-      setBtnStatus("btn4", true);
+      setBtnStatus("btn1", true, "page5");
+      setBtnStatus("btn2", true, "page5");
+      setBtnStatus("btn3", true, "page5");
+      setBtnStatus("btn4", true, "page5");
     });
 
   getCameraLogLevel();
@@ -166,13 +166,14 @@ function cameraPower(enable) {
   })
   .then(data => {
     if (data.ok) {
-      setText("avar5", enable === "true" ? "🟢打开" : null);
+      setText("avar5", enable === "true" ? "🟢打开" : null, "page5");
       alert(enable === "true" ? "上电成功" : "断电成功");
     } else { // 目前后端不会这么返回，避免以后修改代码
       alert("操作失败");
     }
   })
   .catch(e => {
+    setText("avar5", null, "page5");
     alert("操作失败: " + e.message);
   });
 }
@@ -181,11 +182,11 @@ function cameraPing() {
   fetch("/api/camera/pingGigeCamera", {method:"POST"})
   .then(r => r.json())
   .then(data => {
-    setText("avar6", data.avar6);
+    setText("avar6", data.avar6, "page5");
     alert(data.avar6 === "🟢正常" ? "网口相机Ping测试成功" : "网口相机Ping测试失败");
   })
   .catch(() => {
-    setText("avar6", null);
+    setText("avar6", null, "page5");
     alert("网口相机Ping测试失败");
   });
 }

web-ui.service/web/static/js/router.js

@@ -119,3 +119,24 @@ async function loadPage(name) {
     loadingPage = false;
   }
 }
+
+function setText(id, value, page)
+{
+  if (page && currentPage !== page) {
+    return;
+  }
+
+  const el = document.getElementById(id);
+  if (el) el.textContent = value ?? "--";
+}
+
+
+function setBtnStatus(id, enabled, page)
+{
+  if (page && currentPage !== page) {
+      return;
+  }
+
+  const btn = document.getElementById(id);
+  if (btn) btn.disabled = !enabled;
+}