处理订阅

src/drawApp/lineApp.ts

@@ -95,7 +95,10 @@ export function destroyLineApp(): void {
 
 export function initLineApp(lineId: number): IGraphicApp {
   lineApp = lineAppMap.get(lineId) || null;
-  if (lineApp) return lineApp;
+  if (lineApp) {
+    handleSubscribe(lineApp);
+    return lineApp;
+  }
   lineApp = newGraphicApp({
     interactiveGraphicTypeIncludes: [
       Signal.Type,
@@ -258,6 +261,14 @@ export async function loadLineDatas(): Promise<IGraphicStorage> {
   }
 }
 
+export function cancelSubscribe(lineApp: IGraphicApp) {
+  const lineStore = useLineStore();
+  const lineId = lineStore.lineId;
+  if (lineId) {
+    lineApp.unsubscribe(`/queue/line/${lineId}/device`);
+    lineApp.unsubscribe(`/queue/line/${lineId}/train`);
+  }
+}
 function handleSubscribe(lineApp: IGraphicApp) {
   const lineStore = useLineStore();
   const lineId = lineStore.lineId;

src/drawApp/lineNetApp.ts

@@ -52,7 +52,10 @@ export function destroyLineNetApp(): void {
 }
 
 export function initLineNetApp(): IGraphicApp {
-  if (lineNetApp) return lineNetApp;
+  if (lineNetApp) {
+    handleSubscribe(lineNetApp);
+    return lineNetApp;
+  }
   lineNetApp = newGraphicApp({
     interactiveGraphicTypeIncludes: [
       RunLine.Type,
@@ -146,7 +149,10 @@ export async function loadLineNetDatas(): Promise<IGraphicStorage> {
   }
 }
 
-function handleSubscribe(lineNetApp: IGraphicApp) {
+export function cancelSubscribe(lineApp: IGraphicApp) {
+  lineApp.unsubscribe('/queue/lineNet');
+}
+export function handleSubscribe(lineNetApp: IGraphicApp) {
   const lineNetStore = useLineNetStore();
   lineNetApp.enableWsMassaging({
     wsUrl: `${getWebsocketUrl()}`,

src/pages/LineMonitorPage.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import { useRoute } from 'vue-router';
 import { useLineNetStore } from 'src/stores/line-net-store';
@@ -80,7 +80,7 @@ function centerFaultDevice() {
   }
 }
 
-// onUnmounted(() => {
+onUnmounted(() => {
-//   lineStore.destroy();
+  lineStore.cancelSubscribe();
-// });
+});
 </script>

src/pages/MonitorPage.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 import { useLineNetStore } from 'src/stores/line-net-store';
 import { RunLine } from 'src/graphics/runLine/RunLine';
 import { useRouter } from 'vue-router';
@@ -73,7 +73,7 @@ onMounted(() => {
   }
 });
 
-// onUnmounted(() => {
+onUnmounted(() => {
-//   lineNetStore.destroy();
+  lineNetStore.cancelSubscribe();
-// });
+});
 </script>

src/stores/line-net-store.ts

@@ -4,6 +4,7 @@ import {
   initLineNetApp,
   getLineNetApp,
   destroyLineNetApp,
+  cancelSubscribe,
 } from 'src/drawApp/lineNetApp';
 import { markRaw } from 'vue';
 import { QTable } from 'quasar';
@@ -72,6 +73,10 @@ export const useLineNetStore = defineStore('lineNet', {
       this.selectedGraphics = [];
       return app;
     },
+    cancelSubscribe() {
+      const app = this.getLineNetApp();
+      cancelSubscribe(app);
+    },
     destroy() {
       this.selectedGraphics = null;
       destroyLineNetApp();

src/stores/line-store.ts

@@ -1,6 +1,11 @@
 import { defineStore } from 'pinia';
 import { IJlCanvas, JlGraphic, IGraphicApp } from 'jl-graphic';
-import { initLineApp, getLineApp, destroyLineApp } from 'src/drawApp/lineApp';
+import {
+  initLineApp,
+  getLineApp,
+  destroyLineApp,
+  cancelSubscribe,
+} from 'src/drawApp/lineApp';
 import { markRaw } from 'vue';
 
 export const useLineStore = defineStore('line', {
@@ -50,6 +55,10 @@ export const useLineStore = defineStore('line', {
       this.selectedGraphics = null;
       destroyLineApp();
     },
+    cancelSubscribe() {
+      const app = this.getLineApp();
+      cancelSubscribe(app);
+    },
     setLineId(id: number | null) {
       this.lineId = id;
     },