仿真销毁提示退出

src/layouts/LineLayout.vue

@@ -67,6 +67,7 @@ import { ApiError } from 'src/boot/axios';
 import { layerList } from 'src/drawApp/lineScene';
 import { IGraphicScene } from 'src/jl-graphic';
 import { ISceneName, getSceneName } from 'src/drawApp/lineApp';
+import { useTestManageStore } from 'src/stores/testManage-store';
 
 const $q = useQuasar();
 const canvasWidth = ref(0);
@@ -75,6 +76,7 @@ const headerHeight = ref(0);
 const route = useRoute();
 const router = useRouter();
 const lineStore = useLineStore();
+const testManageStore = useTestManageStore();
 const pslDialog = ref(false);
 const simulationId = (route.query.simulationId as string) || '';
 const projectId = (route.query.projectId as string) || '';
@@ -114,6 +116,7 @@ const lineApp = lineStore.initLineApp();
 let scene: null | IGraphicScene = null;
 
 onMounted(async () => {
+  testManageStore.socketConnect();
   const dom = document.getElementById('line-app-container');
   if (dom && defaultMapId && simulationId) {
     lineStore.setMapId(+defaultMapId);
@@ -196,10 +199,29 @@ watch(
       });
   }
 );
+
+watch(
+  () => testManageStore.socketInfo,
+  (val) => {
+    const removeS = val.removeSimulations.find((item) => {
+      return item.simulationId == simulationId;
+    });
+    if (removeS) {
+      $q.dialog({
+        title: '确认',
+        message: `【${projectName.value}】项目仿真已经结束，是否确认退出?`,
+        cancel: true,
+      }).onOk(() => {
+        backConfirm();
+      });
+    }
+  }
+);
+
 function destroySimAndBack() {
   $q.dialog({
     title: '确认',
-    message: `确认结束项目 "${projectName.value}" 吗?`,
+    message: `确认结束项目【${projectName.value}】吗?`,
     cancel: true,
   }).onOk(async () => {
     try {

src/layouts/MainLayout.vue

@@ -123,8 +123,10 @@ import { useRouter } from 'vue-router';
 import { clearJwtToken } from 'src/configs/TokenManage';
 import { Dialog } from 'quasar';
 import { useAuthStore } from 'src/stores/auth-store';
+import { useTestManageStore } from 'src/stores/testManage-store';
 
 const router = useRouter();
+const testManageStore = useTestManageStore();
 
 const leftDrawerOpen = ref(false);
 
@@ -169,6 +171,7 @@ function logOut() {
     cancel: true,
     persistent: true,
   }).onOk(() => {
+    testManageStore.socketClose();
     clearJwtToken();
     authStore.clearCurrentUser();
     router.push({ name: 'login' });

src/pages/TestManage.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed, onUnmounted } from 'vue';
+import { ref, reactive, onMounted, computed, watch } from 'vue';
 import { useQuasar, type QTableColumn, QForm } from 'quasar';
 import { getProjectList } from '../api/ProjectApi';
 import { ApiError } from 'src/boot/axios';
@@ -96,18 +96,17 @@ import {
   createSimulationByProject,
   getSimulationList,
   destroySimulation,
-  getSimulationChannelName,
 } from 'src/api/Simulation';
 import { useRouter } from 'vue-router';
 import { PublishItem, getPublishList } from 'src/api/PublishApi';
-import { getWebsocketUrl } from 'src/configs/UrlManage';
-import { getOnlyToken } from 'src/configs/TokenManage';
 import { state } from 'src/protos/device_state';
-import { CentrifugeMessagingClient } from 'src/jl-graphic/message/CentrifugeBroker';
+import { useTestManageStore } from 'src/stores/testManage-store';
 
 const router = useRouter();
 const $q = useQuasar();
 
+const testManageStore = useTestManageStore();
+
 const props = withDefaults(
   defineProps<{
     sizeHeight: number;
@@ -123,7 +122,7 @@ onMounted(() => {
   tableRef.value.requestServerInteraction();
   getAllProjectList();
   getMapList();
-  socketConnect();
+  testManageStore.socketConnect();
 });
 
 const columnDefs: QTableColumn[] = [
@@ -311,28 +310,14 @@ function getMapNames(ids: number[]) {
   return nameArr.join('，');
 }
 
-let socket: CentrifugeMessagingClient | null = null;
-let destination = '';
-
-async function socketConnect() {
-  getSimulationChannelName()
-    .then((res) => {
-      destination = res;
-      socket = new CentrifugeMessagingClient({
-        wsUrl: `${getWebsocketUrl()}`,
-        token: getOnlyToken() as string,
-        protocol: 'protobuf',
-      });
-      socket.on('connected', () => {
-        socket?.subscribe(destination, handler);
-      });
-    })
-    .catch((err) => {
-      console.log(err, '获取仿真信息更新通道名称失败！');
-    });
+watch(
+  () => testManageStore.socketInfo,
+  (val) => {
+    handler(val as state.MemoryDataStatus);
   }
-function handler(message: Uint8Array) {
-  const storage = state.MemoryDataStatus.deserialize(message);
+);
+
+function handler(storage: state.MemoryDataStatus) {
   if (storage.addSimulations.length) {
     const arr = storage.addSimulations.map((item) => {
       return {
@@ -366,13 +351,4 @@ function handler(message: Uint8Array) {
     });
   }
 }
-function closeSocket() {
-  socket?.unsubscribe0(destination);
-  socket?.close();
-  socket = null;
-}
-
-onUnmounted(() => {
-  closeSocket();
-});
 </script>

src/stores/testManage-store.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { CentrifugeMessagingClient } from 'src/jl-graphic/message/CentrifugeBroker';
+import { getSimulationChannelName } from 'src/api/Simulation';
+import { getWebsocketUrl } from 'src/configs/UrlManage';
+import { getOnlyToken } from 'src/configs/TokenManage';
+import { state } from 'src/protos/device_state';
+
+export const useTestManageStore = defineStore('testManage', {
+  state: () => ({
+    socket: null as CentrifugeMessagingClient | null, // 启动项目的socket
+    destination: '', // 启动项目的socket订阅路径
+    socketInfo: new state.MemoryDataStatus(),
+  }),
+  actions: {
+    socketHandler(message: Uint8Array) {
+      const storage = state.MemoryDataStatus.deserialize(message);
+      this.socketInfo = storage;
+    },
+    socketConnect() {
+      if (this.socket) return;
+      getSimulationChannelName()
+        .then((res) => {
+          this.destination = res;
+          this.socket = new CentrifugeMessagingClient({
+            wsUrl: `${getWebsocketUrl()}`,
+            token: getOnlyToken() as string,
+            protocol: 'protobuf',
+          });
+          this.socket.on('connected', () => {
+            this.socket?.subscribe(this.destination, this.socketHandler);
+          });
+        })
+        .catch((err) => {
+          console.log(err, '获取仿真信息更新通道名称失败！');
+        });
+    },
+    socketClose() {
+      this.socket?.unsubscribe0(this.destination);
+      this.socket?.close();
+      this.socket = null;
+      this.destination = '';
+      this.socketInfo = new state.MemoryDataStatus();
+    },
+  },
+});