索引下标问题, 断连后中止原有的重连回调函数

src/stores/remote-ws-store.ts

@@ -21,7 +21,8 @@ const chatUrl = "/socket.io/admin/rax/chatRoom?token=" + Session.getToken()
 export const useRemoteWsStore = defineStore("remoteWs", {
     state: () => {
         return {
-
+            activeDisconnect: [] as boolean[], //  记录主动断开状态,明确为boolean数组
+            reconnectTimers: [] as (number | null)[],// 记录重连定时器,明确为number或null的数组
             patient: {} as any,
             remoteTasks: [] as any,
             remoteTasksCap: 10,
@@ -44,6 +45,27 @@ export const useRemoteWsStore = defineStore("remoteWs", {
         }
     },
     actions: {
+        // 设置主动断开状态
+        setActiveDisconnect(index : number, value : boolean) {
+            this.activeDisconnect[index] = value;
+        },
+
+        // 检查是否是主动断开
+        isActiveDisconnect(index : number) {
+            return this.activeDisconnect[index] || false;
+        },
+        // 保存重连定时器
+        setReconnectTimer(index : number, timerId : number) {
+            this.reconnectTimers[index] = timerId
+        },
+
+        // 清除指定索引的重连定时器
+        clearReconnectTimer(index : number) {
+            if (this.reconnectTimers[index]) {
+                clearTimeout(this.reconnectTimers[index])
+                this.reconnectTimers[index] = null
+            }
+        },
         setCurrentTaskIndex(i: number) {
             this.currentTaskIndex = i
             Session.set("currentTaskIndex", i)

src/views/remote-manage/part/remote-item-part.vue

@@ -61,11 +61,11 @@
                     <span class="label">ST</span>
                     <span class="value">{{ patientInfo.ST }}</span>
                 </div>
-                <div class="row-item yellow" >
+                <div class="row-item yellow">
                     <span class="label">EtCO2</span>
                     <span class="value">{{ patientInfo.EtCO2 }}</span>
                 </div>
-                <div class="row-item yellow" >
+                <div class="row-item yellow">
                     <span class="label">TEMP</span>
                     <span class="value">{{ patientInfo.TEMP }}</span>
                 </div>
@@ -138,7 +138,7 @@ function subscribeVital() {
 function wsClose() {
     remoteWsStore.vitalOnclose(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index, () => {
         setTimeout(() => {
-            ElMessage.info('远程查看' + props.index + '， 生命体征数据连接断开，正在尝试重连……')
+            ElMessage.info('远程查看' + (props.index + 1) + '， 生命体征数据连接断开，正在尝试重连……')
             initData()
         }, 3000)
     })
@@ -165,7 +165,7 @@ function wsClose() {
 //     // }
 // }
 
-const lastTimes:any = ref([]); // 使用数组来存储每个任务的lastTime
+const lastTimes: any = ref([]); // 使用数组来存储每个任务的lastTime
 
 function setLog(data: any, index: number) {
     console.log(lastTimes.value[index], data.Time);

src/views/remote-manage/part/remote-part.vue

@@ -216,11 +216,23 @@ function initData() {
     if (remoteItem.value && remoteItem.value.patient) {
         remoteWsStore.createVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex)
         remoteWsStore.vitalOnclose(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex, () => {
-            setTimeout(() => {
-                ElMessage.info('远程查看' + (currentIndex + 1) + '， 生命体征数据连接断开，正在尝试重连……')
-                remoteWsStore.createVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex)
+            if (remoteWsStore.isActiveDisconnect(currentIndex)) {
+                return;
+            }
+            // 创建定时器并保存到store
+            const timerId = setTimeout(() => {
+                ElMessage.info(`远程查看${currentIndex + 1}，生命体征数据连接断开，正在尝试重连……`)
+                remoteWsStore.createVital(
+                    remoteItem.value.patient,
+                    remoteItem.value.patientId,
+                    remoteItem.value.date,
+                    currentIndex
+                )
                 initData()
             }, 3000)
+
+            // 将定时器ID保存到store中
+            remoteWsStore.setReconnectTimer(currentIndex, timerId)
         })
         remoteWsStore.createChat(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex)
         remoteWsStore.chatOnclose(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex, () => {
@@ -275,6 +287,12 @@ function setLog(data: any) {
 }
 
 const breakRemote = () => {
+    ElMessage.success('断开连接成功!')
+    // 1. 标记为主动断开
+    remoteWsStore.setActiveDisconnect(currentIndex, true)
+    // 2. 清除对应的重连定时器
+    remoteWsStore.clearReconnectTimer(currentIndex)
+    // 3. 关闭websocket连接
     remoteWsStore.getRemoteTask()[currentIndex]
     remoteWsStore.disconnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex)
     remoteWsStore.resetRemoteTask(currentIndex)

src/views/remote-manage/remote-control.vue

@@ -352,7 +352,7 @@ const subscribeVital = () => {
         })
     remoteWsStore.vitalOnclose(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentIndex, () => {
         setTimeout(() => {
-            ElMessage.info('远程查看' + currentIndex + '， 生命体征数据连接断开，正在尝试重连……')
+            // ElMessage.info('远程查看' + currentIndex + '， 生命体征数据连接断开，正在尝试重连……')
             subscribeVital()
         }, 3000)
     })
@@ -376,7 +376,7 @@ const subscribeChat = () => {
                 messageList.value = msg.history;
             }
             if (msg.msgType == "destroy") {
-                ElMessageBox.confirm('远程查看' + currentIndex + '已断开与手术室连接', '提示', {
+                ElMessageBox.confirm('远程查看' + (currentIndex + 1) + '已断开与手术室连接', '提示', {
                     confirmButtonText: '确认',
                     type: 'info'
                 }).then(() => {