fix: 修复数码管时常无法使用的问题

src/components/equipments/SevenSegmentDisplayUltimate.vue

@@ -184,7 +184,7 @@ async function initDigitalTwin() {
   if (
     !eqps.enableSevenSegmentDisplay ||
     props.digitalTwinNum <= 0 ||
-    props.digitalTwinNum > 31
+    props.digitalTwinNum > 32
   )
     return;
 
@@ -205,7 +205,7 @@ watch(
     if (
       !eqps.sevenSegmentDisplayData ||
       props.digitalTwinNum <= 0 ||
-      props.digitalTwinNum > 31
+      props.digitalTwinNum > 32
     )
       return;
 

src/stores/equipments.ts

@@ -1,4 +1,4 @@
-import { ref, reactive, watchPostEffect, onMounted, onUnmounted } from "vue";
+import { ref, reactive, shallowRef, onMounted, onUnmounted } from "vue";
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
 import { isString, toNumber, isUndefined, type Dictionary } from "lodash";
@@ -302,40 +302,74 @@ export const useEquipments = defineStore("equipments", () => {
   const enableSevenSegmentDisplay = ref(false);
   const sevenSegmentDisplayFrequency = ref(100);
   const sevenSegmentDisplayData = ref<Uint8Array>();
-  const sevenSegmentDisplayHub = ref<HubConnection>();
+
-  const sevenSegmentDisplayHubProxy = ref<IDigitalTubesHub>();
+  const sevenSegmentDisplayHub = shallowRef<{
+    connection: HubConnection;
+    proxy: IDigitalTubesHub;
+  } | null>(null);
+
+  async function initSevenDigitalTubesHub() {
+    // 每次挂载都重新创建连接
+    if (sevenSegmentDisplayHub.value) return;
+    const connection = AuthManager.createHubConnection("DigitalTubesHub");
+    const proxy =
+      getHubProxyFactory("IDigitalTubesHub").createHubProxy(connection);
+
+    getReceiverRegister("IDigitalTubesReceiver").register(connection, {
+      onReceive: handleSevenSegmentDisplayOnReceive,
+    });
+    await connection.start();
+    sevenSegmentDisplayHub.value = { connection, proxy };
+  }
+
+  async function clearSevenDigitalTubesHub() {
+    if (!sevenSegmentDisplayHub.value) return;
+    sevenSegmentDisplayHub.value.connection.stop();
+    sevenSegmentDisplayHub.value = null;
+  }
+
+  async function reinitializeSevenDigitalTubesHub() {
+    await clearSevenDigitalTubesHub();
+    await initSevenDigitalTubesHub();
+  }
+
+  function getSevenDigitalTubesHubProxy() {
+    if (!sevenSegmentDisplayHub.value) {
+      reinitializeSevenDigitalTubesHub();
+      throw new Error("Hub not initialized");
+    }
+    return sevenSegmentDisplayHub.value.proxy;
+  }
+
+  onMounted(async () => {
+    await initSevenDigitalTubesHub();
+  });
+
+  onUnmounted(async () => {
+    // 断开连接，清理资源
+    await clearSevenDigitalTubesHub();
+  });
 
   async function sevenSegmentDisplaySetOnOff(enable: boolean) {
-    if (!sevenSegmentDisplayHub.value || !sevenSegmentDisplayHubProxy.value)
+    const proxy = getSevenDigitalTubesHubProxy();
-      return;
-    if (sevenSegmentDisplayHub.value.state === HubConnectionState.Disconnected)
-      await sevenSegmentDisplayHub.value.start();
 
     if (enable) {
-      await sevenSegmentDisplayHubProxy.value.startScan();
+      await proxy.startScan();
       enableSevenSegmentDisplay.value = true;
     } else {
-      await sevenSegmentDisplayHubProxy.value.stopScan();
+      await proxy.stopScan();
       enableSevenSegmentDisplay.value = false;
     }
   }
 
   async function sevenSegmentDisplaySetFrequency(frequency: number) {
-    if (!sevenSegmentDisplayHub.value || !sevenSegmentDisplayHubProxy.value)
+    const proxy = getSevenDigitalTubesHubProxy();
-      return;
+    return await proxy.setFrequency(frequency);
-    if (sevenSegmentDisplayHub.value.state === HubConnectionState.Disconnected)
-      await sevenSegmentDisplayHub.value.start();
-
-    await sevenSegmentDisplayHubProxy.value.setFrequency(frequency);
   }
 
   async function sevenSegmentDisplayGetStatus() {
-    if (!sevenSegmentDisplayHub.value || !sevenSegmentDisplayHubProxy.value)
+    const proxy = getSevenDigitalTubesHubProxy();
-      return;
+    return await proxy.getStatus();
-    if (sevenSegmentDisplayHub.value.state === HubConnectionState.Disconnected)
-      await sevenSegmentDisplayHub.value.start();
-
-    return await sevenSegmentDisplayHubProxy.value.getStatus();
   }
 
   async function handleSevenSegmentDisplayOnReceive(msg: string) {
@@ -343,31 +377,6 @@ export const useEquipments = defineStore("equipments", () => {
     sevenSegmentDisplayData.value = new Uint8Array(bytes);
   }
 
-  onMounted(async () => {
-    // 每次挂载都重新创建连接
-    sevenSegmentDisplayHub.value =
-      AuthManager.createHubConnection("DigitalTubesHub");
-    sevenSegmentDisplayHubProxy.value = getHubProxyFactory(
-      "IDigitalTubesHub",
-    ).createHubProxy(sevenSegmentDisplayHub.value);
-
-    getReceiverRegister("IDigitalTubesReceiver").register(
-      sevenSegmentDisplayHub.value,
-      {
-        onReceive: handleSevenSegmentDisplayOnReceive,
-      },
-    );
-  });
-
-  onUnmounted(() => {
-    // 断开连接，清理资源
-    if (sevenSegmentDisplayHub.value) {
-      sevenSegmentDisplayHub.value.stop();
-      sevenSegmentDisplayHub.value = undefined;
-      sevenSegmentDisplayHubProxy.value = undefined;
-    }
-  });
-
   return {
     boardAddr,
     boardPort,