From 5aee40bfc4bf043b7a347f80985a395962e15d00 Mon Sep 17 00:00:00 2001
From: yy <11@11.com>
Date: Fri, 7 Jun 2024 10:23:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9C=E7=A8=8B=E7=AE=A1=E7=90=86=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E4=BF=AE=E5=A4=8D=20=E5=AF=86=E7=A0=81=E6=8F=90?=
 =?UTF-8?q?=E9=86=92=E6=8C=89=E7=85=A7=E4=B8=80=E6=9C=9F=E7=9A=84=E6=9D=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user-info.vue                  |   6 +-
 src/stores/remote-ws-store.ts                 |  12 +-
 src/views/login/login.vue                     |   6 +-
 .../permissions-manage/doctor-manage.vue      | 103 ++++--
 .../permissions-manage/form/doctor-form.vue   |   6 +-
 .../remote-manage/part/remote-item-part.vue   |  16 +-
 src/views/remote-manage/remote-control.vue    |  29 +-
 src/views/remote-manage/remote-manage.vue     | 316 +++++++++---------
 src/views/remote-manage/remote-thumbnail.vue  |  11 +-
 9 files changed, 298 insertions(+), 207 deletions(-)

diff --git a/src/components/user-info.vue b/src/components/user-info.vue
index 3b939e3..f5251c6 100644
--- a/src/components/user-info.vue
+++ b/src/components/user-info.vue
@@ -33,14 +33,14 @@
       </template>
       <template v-else>
         <el-form-item label="密码" prop="password" label-width="100">
-          <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码"></el-input>
+          <el-input v-model="formData.password" type="password" show-password placeholder="8~16位字母或数字（区分大小写）"></el-input>
         </el-form-item>
         <el-form-item label="新密码" prop="newPassword" label-width="100">
-          <el-input v-model="formData.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
+          <el-input v-model="formData.newPassword" type="password" show-password placeholder="8~16位字母或数字（区分大小写）"></el-input>
         </el-form-item>
         <el-form-item label="确认密码" prop="confirmPassword" label-width="100">
           <el-input v-model="formData.confirmPassword" type="password" show-password
-                    placeholder="请输入新密码"></el-input>
+                    placeholder="请输入密码"></el-input>
         </el-form-item>
       </template>
     </el-form>
diff --git a/src/stores/remote-ws-store.ts b/src/stores/remote-ws-store.ts
index 5499469..e9337be 100644
--- a/src/stores/remote-ws-store.ts
+++ b/src/stores/remote-ws-store.ts
@@ -48,13 +48,13 @@ export const useRemoteWsStore = defineStore("remoteWs", {
             Session.set("remoteTasks", this.remoteTasks)
         },
         getRemoteTask() {
-            if (Session.get("remoteTasks") && !this.remoteTasks) {
+            if (Session.get("remoteTasks") && this.remoteTasks.length == 0) {
                 this.remoteTasks = Session.get("remoteTasks")
             }
             return this.remoteTasks
         },
         initRemoteTask() {
-            if (Session.get("remoteTasks") && !this.remoteTasks) {
+            if (Session.get("remoteTasks")) {
                 this.remoteTasks = Session.get("remoteTasks")
             }
             if (this.remoteTasks.length <= 0) {
@@ -139,7 +139,7 @@ export const useRemoteWsStore = defineStore("remoteWs", {
                 }
             } else {
                 cb({
-                    status: 1,
+                    status: 2,
                     msg: "已断开连接"
                 })
             }
@@ -169,7 +169,7 @@ export const useRemoteWsStore = defineStore("remoteWs", {
         },
         unsubscribeVital(name: string, id: string, date: string, index: number) {
             const patient: any = this.patient[name + id + date + index]
-            if (patient) {
+            if (patient && patient.vitalWS) {
                 patient.vitalWS.onmessage = undefined
                 patient.vitalWS.onclose = undefined
                 patient.vitalWS.onerror = undefined
@@ -242,7 +242,7 @@ export const useRemoteWsStore = defineStore("remoteWs", {
         },
         unsubscribeChat(name: string, id: string, date: string, index: number) {
             const patient: any = this.patient[name + id + date + index]
-            if (patient) {
+            if (patient && patient.chatWS) {
                 patient.chatWS.onmessage = undefined
                 patient.chatWS.onclose = undefined
                 patient.chatWS.onerror = undefined
@@ -335,7 +335,7 @@ export const useRemoteWsStore = defineStore("remoteWs", {
         },
         unsubscribeMedicine(name: string, id: string, date: string, index: number) {
             const patient: any = this.patient[name + id + date + index]
-            if (patient) {
+            if (patient && patient.medicineWS) {
                 patient.medicineWS.onmessage = undefined
                 patient.medicineWS.onclose = undefined
                 patient.medicineWS.onerror = undefined
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 6211696..2f7ac8d 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -12,7 +12,7 @@
             <div v-if="!isShowRegister" class="login-block move_2">
                 <div class="login-way">
                     <span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
-                    <span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
+<!--                    <span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>-->
                 </div>
                 <el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
                     <div class="login-form password-login" v-if="passwordLogin">
@@ -86,11 +86,11 @@
                     </el-form-item>
                     <el-form-item label="密码" prop="password">
                         <el-input v-model="registerParams.password" type="password" show-password
-                                  placeholder="请输入密码"></el-input>
+                                  placeholder="8~16位字母或数字（区分大小写）"></el-input>
                     </el-form-item>
                     <el-form-item label="确认密码" prop="confirmPassword">
                         <el-input v-model="registerParams.confirmPassword" type="password" show-password
-                                  placeholder="请输入密码8~16位字母或数字（区分大小写）"></el-input>
+                                  placeholder="请输入密码"></el-input>
                     </el-form-item>
                     <el-form-item label="姓名" prop="name">
                         <el-input v-model="registerParams.name" placeholder="请输入姓名"></el-input>
diff --git a/src/views/permissions-manage/doctor-manage.vue b/src/views/permissions-manage/doctor-manage.vue
index 8c90344..376e4d1 100644
--- a/src/views/permissions-manage/doctor-manage.vue
+++ b/src/views/permissions-manage/doctor-manage.vue
@@ -24,9 +24,12 @@
 				<el-table-column type="index" label="#" width="55" align="center"/>
 				<el-table-column property="name" label="姓名" width="120" align="center"/>
 				<el-table-column label="手机号" width="220" align="center">
-					<template #default="scope">{{
-							scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)
-						}}
+					<template #default="scope">
+                        <div v-if="scope.row.phone">
+                            {{
+                                scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)
+                            }}
+                        </div>
 					</template>
 				</el-table-column>
 				<el-table-column label="角色" width="220" align="center">
@@ -59,6 +62,26 @@
 			<CommonPagination :total="total" @paginationChange="paginationChange"/>
 		</div>
 	</div>
+    <el-dialog v-model="psDialogVisible" title="密码重置" width="500" draggable>
+        <el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
+            <el-form-item label="密码" prop="password" label-width="100">
+                <el-input v-model="formData.password" type="password" show-password
+                          placeholder="8~16位字母或数字（区分大小写）"></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码" prop="confirmPassword" label-width="100">
+                <el-input v-model="formData.confirmPassword" type="password" show-password
+                          placeholder="确认密码"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="psDialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="sbPs">
+                    确定
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
 	<el-dialog v-model="isFormDialog" :title="formDialogTitle" width="750px">
 		<DoctorForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false"
 								@save="doctorFormSave"/>
@@ -76,6 +99,7 @@ import CommonPagination from '@/components/common-pagination.vue'
 import DoctorForm from './form/doctor-form.vue'
 import ImportDialog from '@/components/import-dialog.vue'
 import {deleteU, modifyPw, updateUserInfo, userPage} from "@/api/user";
+import {REGEXP} from "@/enum/global-enum";
 
 const tableRef = ref()
 const doctorFormRef = ref()
@@ -83,6 +107,7 @@ const importDialogRef = ref()
 const isSearch = ref(true)
 const loading = ref(true)
 const isFormDialog = ref(false)
+const psDialogVisible = ref(false)
 const formDialogTitle = ref('')
 const queryParams = ref({
 	userName: ''
@@ -91,6 +116,36 @@ const tableData = ref([] as any)
 let current = 0
 let size = 10
 const total = ref(0)
+const formRef = ref()
+const formData = ref()
+
+const validatePassword = (rule: any, value: any, callback: any) => {
+    if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
+        callback("8~16位字母或数字（区分大小写）")
+    } else {
+        callback()
+    }
+}
+
+const validateConsistent = (rule: any, value: any, callback: any) => {
+    if (formData.value.password != formData.value.confirmPassword) {
+        callback('两次密码不一致')
+    } else {
+        callback()
+    }
+}
+
+const rules = ref({
+    password: [
+        {required: true, message: '请输入密码', trigger: ['blur', 'change']},
+        {validator: validatePassword, trigger: ['blur', 'change']},
+    ],
+    confirmPassword: [
+        {required: true, message: '请输入密码', trigger: ['blur', 'change']},
+        {validator: validatePassword, trigger: ['blur', 'change']},
+        {validator: validateConsistent, trigger: ['blur', 'change']}
+    ]
+})
 
 queryData()
 
@@ -167,23 +222,31 @@ const enableChange = (e: any) => {
 	})
 }
 const resetPassword = (e: any) => {
-	ElMessageBox.prompt('是否确定要重置密码？', '系统提醒', {
-		type: 'warning',
-		draggable: true,
-		inputPattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{9,15}$/,
-		inputErrorMessage: "密码至少包含字母、数字、特殊字符，不少于9位，最多15位"
-	}).then((inputVal) => {
-		modifyPw({
-			username: e.username,
-			password: inputVal.value
-		}).then((res: any) => {
-			if (res.code == 0) {
-				ElMessage.success('重置成功！')
-			} else {
-				ElMessage.error(res.msg)
-			}
-		})
-	})
+    formData.value = {
+        password: '',
+        confirmPassword: '',
+        username: e.username
+    }
+    psDialogVisible.value = true
+    formRef.value.resetFields()
+}
+
+const sbPs = () => {
+    formRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            modifyPw({
+                username: formData.value.username,
+                password: formData.value.password
+            }).then((res: any) => {
+                if (res.code == 0) {
+                    ElMessage.success('重置成功！')
+                    psDialogVisible.value = false
+                } else {
+                    ElMessage.error(res.msg)
+                }
+            })
+        }
+    })
 }
 const editData = (e: any) => {
 	isFormDialog.value = true
diff --git a/src/views/permissions-manage/form/doctor-form.vue b/src/views/permissions-manage/form/doctor-form.vue
index e2c633d..a671d15 100644
--- a/src/views/permissions-manage/form/doctor-form.vue
+++ b/src/views/permissions-manage/form/doctor-form.vue
@@ -3,7 +3,7 @@
         <el-row>
             <el-col :span="12">
                 <el-form-item label="用户名" prop="username">
-                    <el-input v-model="formData.username" placeholder="请输入用户名2~16位字母或数字（区分大小写）"
+                    <el-input v-model="formData.username" placeholder="2~16位字母或数字（区分大小写）"
                               :disabled="type === 'edit'"></el-input>
                 </el-form-item>
             </el-col>
@@ -46,13 +46,13 @@
         <el-row v-if="type != 'edit'">
             <el-col :span="12">
                 <el-form-item label="密码" prop="password">
-                    <el-input v-model="formData.password" placeholder="请输入密码8~16位字母或数字（区分大小写）"
+                    <el-input v-model="formData.password" placeholder="8~16位字母或数字（区分大小写）"
                               :disabled="type === 'edit'" type="password" show-password></el-input>
                 </el-form-item>
             </el-col>
             <el-col :span="12">
                 <el-form-item label="确认密码" prop="confirmPassword">
-                    <el-input v-model="formData.confirmPassword" placeholder="请输入密码8~16位字母或数字（区分大小写）"
+                    <el-input v-model="formData.confirmPassword" placeholder="请输入密码"
                               :disabled="type === 'edit'" type="password" show-password></el-input>
                 </el-form-item>
             </el-col>
diff --git a/src/views/remote-manage/part/remote-item-part.vue b/src/views/remote-manage/part/remote-item-part.vue
index 8849515..8f55f32 100644
--- a/src/views/remote-manage/part/remote-item-part.vue
+++ b/src/views/remote-manage/part/remote-item-part.vue
@@ -88,13 +88,15 @@ function initData() {
 
 function subscribeVital() {
     remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, remoteTask.value.index, (res: any) => {
-        const data = JSON.parse(res.data);
-        if (data.vitalSignsList && data.vitalSignsList.length > 0) {
-            Object.assign(patientInfo.value, data.vitalSignsList[0]);
-            patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
-                    patientInfo.value.DBP_except || patientInfo.value.HR_except);
-            setLog(patientInfo.value, props.index)
-            emit('addLogAfter', props.index)
+        if (res.status != 2) {
+            const data = JSON.parse(res.data);
+            if (data.vitalSignsList && data.vitalSignsList.length > 0) {
+                Object.assign(patientInfo.value, data.vitalSignsList[0]);
+                patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
+                        patientInfo.value.DBP_except || patientInfo.value.HR_except);
+                setLog(patientInfo.value, props.index)
+                emit('addLogAfter', props.index)
+            }
         }
     })
 }
diff --git a/src/views/remote-manage/remote-control.vue b/src/views/remote-manage/remote-control.vue
index 20f0f92..a21f6f0 100644
--- a/src/views/remote-manage/remote-control.vue
+++ b/src/views/remote-manage/remote-control.vue
@@ -2,7 +2,7 @@
     <div class="remote-box" id="screenBox">
         <div class="main-box">
             <div class="left-box">
-                <h3>{{ currentRemote.taskName }}</h3>
+                <h3>{{ currentRemote?.taskName }}</h3>
                 <chart-line ref="chartDom1" class="chart-line" :names="['BIS', 'HR']"
                             @exception-event="vitalExcepEvent"></chart-line>
                 <chart-line ref="chartDom2" class="chart-line" :names="['SBP', 'DBP']"
@@ -268,9 +268,6 @@ onMounted(() => {
     msgLogScrollBottom()
     initScale()
     createConnect()
-    onVitalClose()
-    onChatClose()
-    onMedicineClose()
     subscribeWS()
 });
 
@@ -289,6 +286,13 @@ function createConnect() {
 function disconnect() {
     remoteWsStore.disconnectMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
     remoteWsStore.disconnectChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index)
+
+    if (!router.currentRoute.value.path.startsWith('/remote-manage/')) {
+        const tasks: any = remoteWsStore.getRemoteTask()
+        tasks.forEach((task: any) => {
+            remoteWsStore.disconnect(task.patient, task.patientId, task.date, task.index)
+        })
+    }
 }
 
 function subscribeWS() {
@@ -298,18 +302,22 @@ function subscribeWS() {
 }
 
 const subscribeVital = () => {
+    onVitalClose()
     remoteWsStore.subscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
             (res: any) => {
-                const data = JSON.parse(res.data);
-                chartDom1.value.updateChartData(data.vitalSignsList[0]);
-                chartDom2.value.updateChartData(data.vitalSignsList[0]);
-                chartDom3.value.updateChartData(data.vitalSignsList[0]);
-                chartDom4.value.updateChartData(data.vitalSignsList[0]);
-                updateMedicineTable(data.aiMedicineList[0], data.docMedicineList[0]);
+                if (res.status != 2) {
+                    const data = JSON.parse(res.data);
+                    chartDom1.value.updateChartData(data.vitalSignsList[0]);
+                    chartDom2.value.updateChartData(data.vitalSignsList[0]);
+                    chartDom3.value.updateChartData(data.vitalSignsList[0]);
+                    chartDom4.value.updateChartData(data.vitalSignsList[0]);
+                    updateMedicineTable(data.aiMedicineList[0], data.docMedicineList);
+                }
             })
 }
 
 const subscribeChat = () => {
+    onChatClose()
     remoteWsStore.subscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
             (res: any) => {
                 mssageList.value.push(JSON.parse(res.data));
@@ -317,6 +325,7 @@ const subscribeChat = () => {
 }
 
 const subscribeMedicine = () => {
+    onMedicineClose()
     remoteWsStore.subscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, currentRemote.value.index,
             (res: any) => {
                 const data = JSON.parse(res.data);
diff --git a/src/views/remote-manage/remote-manage.vue b/src/views/remote-manage/remote-manage.vue
index 81b5855..85df96b 100644
--- a/src/views/remote-manage/remote-manage.vue
+++ b/src/views/remote-manage/remote-manage.vue
@@ -1,32 +1,32 @@
 <template>
-	<div class="remote-manage-page">
-		<div class="header-box">
-			<div class="thumbnail" @click="viewThumbnail">
-				<el-icon>
-					<Menu/>
-				</el-icon>
-				<span>缩略图</span>
-			</div>
-			<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
-					 :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
-					 @click="editTask(item)" @dblclick="toRemoteControl(item)">
-				<span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
-			</div>
-		</div>
-		<div class="content-box">
-			<div class="remote-box">
-				<RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
-			</div>
-			<div class="message-box">
-				<MessagePart ref="messagePartRef"/>
-			</div>
-		</div>
-	</div>
-	<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
+    <div class="remote-manage-page">
+        <div class="header-box">
+            <div class="thumbnail" @click="viewThumbnail">
+                <el-icon>
+                    <Menu/>
+                </el-icon>
+                <span>缩略图</span>
+            </div>
+            <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
+                 :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
+                 @click="editTask(item)" @dblclick="toRemoteControl(item)">
+                <span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="remote-box">
+                <RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
+            </div>
+            <div class="message-box">
+                <MessagePart ref="messagePartRef"/>
+            </div>
+        </div>
+    </div>
+    <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
 </template>
 
 <script lang='ts' setup>
-import {onMounted, ref} from 'vue'
+import {onMounted, onUnmounted, ref} from 'vue'
 import {useRouter} from 'vue-router'
 import RemoteDialog from './part/remote-dialog.vue'
 import RemotePart from './part/remote-part.vue'
@@ -41,178 +41,186 @@ const remoteTask = ref([] as Array<any>)
 const remoteWsStore = useRemoteWsStore();
 
 onMounted(() => {
-	initRemoteTask()
+    initRemoteTask()
+})
+
+onUnmounted(() => {
+    if (!router.currentRoute.value.path.startsWith('/remote-manage/')) {
+        const tasks: any = remoteWsStore.getRemoteTask()
+        tasks.forEach((task: any) => {
+          remoteWsStore.disconnect(task.patient, task.patientId, task.date, task.index)
+        })
+    }
 })
 
 function initRemoteTask() {
-	remoteTask.value = remoteWsStore.initRemoteTask()
-	remotePartRef.value.initData()
+    remoteTask.value = remoteWsStore.initRemoteTask()
+    remotePartRef.value.initData()
 }
 
 const viewThumbnail = () => {
-	router.push({
-		path: '/remote-manage/remote-thumbnail',
-		query: {
-		}
-	})
+    router.push({
+        path: '/remote-manage/remote-thumbnail',
+        query: {}
+    })
 }
 // 打开任务连接弹窗
 const editTask = (item: any) => {
-	// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
-	if (item.isRemote) {
-		remotePartRef.value.showData(item.index)
-	} else {
-		remoteDialogRef.value.open(item.index)
-	}
+    // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
+    if (item.isRemote) {
+        remotePartRef.value.showData(item.index)
+    } else {
+        remoteDialogRef.value.open(item.index)
+    }
 }
 // 跳转到远程控制
 const toRemoteControl = (item: any) => {
-	// 如果当前任务是已连接状态则跳转，否则打开弹窗
-	if (item.isRemote) {
+    // 如果当前任务是已连接状态则跳转，否则打开弹窗
+    if (item.isRemote) {
         remoteWsStore.setCurrentTaskIndex(item.index)
-		router.push('/remote-manage/remote-control')
-	} else {
-		remoteDialogRef.value.open(item.index)
-	}
+        router.push('/remote-manage/remote-control')
+    } else {
+        remoteDialogRef.value.open(item.index)
+    }
 }
 // 连接成功
 const confirmRemote = () => {
-	messagePartRef.value.scrollToBottom()
-	// 状态设置为可连接
-	remotePartRef.value.initData()
+    messagePartRef.value.scrollToBottom()
+    // 状态设置为可连接
+    remotePartRef.value.initData()
 }
 // 连接失败
 const errorRemote = () => {
-	messagePartRef.value.scrollToBottom()
+    messagePartRef.value.scrollToBottom()
 }
 // 断开连接
 const breakRemote = () => {
-	messagePartRef.value.scrollToBottom()
+    messagePartRef.value.scrollToBottom()
 }
 const addLogAfter = () => {
-	messagePartRef.value.scrollToBottom()
+    messagePartRef.value.scrollToBottom()
 }
 
 </script>
 
 <style lang='scss' scoped>
 .remote-manage-page {
-	width: 100%;
-	height: 100%;
-	padding-top: 15px;
-	overflow-y: auto;
-	overflow-x: hidden;
+    width: 100%;
+    height: 100%;
+    padding-top: 15px;
+    overflow-y: auto;
+    overflow-x: hidden;
 
-	.header-box {
-		position: relative;
-		width: 100%;
-		min-height: 180px;
-		background: white;
-		padding: 0 30px;
-		display: flex;
-		flex-wrap: wrap;
+    .header-box {
+        position: relative;
+        width: 100%;
+        min-height: 180px;
+        background: white;
+        padding: 0 30px;
+        display: flex;
+        flex-wrap: wrap;
 
-		.thumbnail {
-			cursor: pointer;
-			position: absolute;
-			width: 70px;
-			height: 70px;
-			top: 0;
-			right: 0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			background: #f8b300;
-			border-top-left-radius: 35px;
-			border-bottom-left-radius: 35px;
-			box-shadow: -3px 3px 5px 0 rgba(black, .2);
-			font-size: 20px;
-			color: white;
-			transition: all .1s;
+        .thumbnail {
+            cursor: pointer;
+            position: absolute;
+            width: 70px;
+            height: 70px;
+            top: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #f8b300;
+            border-top-left-radius: 35px;
+            border-bottom-left-radius: 35px;
+            box-shadow: -3px 3px 5px 0 rgba(black, .2);
+            font-size: 20px;
+            color: white;
+            transition: all .1s;
 
-			.el-icon {
-				font-size: 1.4em;
-			}
+            .el-icon {
+                font-size: 1.4em;
+            }
 
-			& > span {
-				display: none;
-				margin-left: 5px;
-				line-height: 1;
-				white-space: nowrap;
-			}
+            & > span {
+                display: none;
+                margin-left: 5px;
+                line-height: 1;
+                white-space: nowrap;
+            }
 
-			&:hover {
-				width: 160px;
-				transition: all .3s;
+            &:hover {
+                width: 160px;
+                transition: all .3s;
 
-				& > span {
-					display: block;
-				}
-			}
-		}
+                & > span {
+                    display: block;
+                }
+            }
+        }
 
-		.task-btn-item {
-			cursor: pointer;
-			flex-grow: 1;
-			width: 17%;
-			min-width: 200px;
-			height: 70px;
-			margin: 10px 20px;
-			border: 2px solid $main-color;
-			color: $main-color;
-			border-radius: 5px;
-			font-size: 20px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			transition: all .6s;
+        .task-btn-item {
+            cursor: pointer;
+            flex-grow: 1;
+            width: 17%;
+            min-width: 200px;
+            height: 70px;
+            margin: 10px 20px;
+            border: 2px solid $main-color;
+            color: $main-color;
+            border-radius: 5px;
+            font-size: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all .6s;
 
-			&:hover {
-				background: rgba($main-color, .1);
-				transition: all .6s;
-			}
+            &:hover {
+                background: rgba($main-color, .1);
+                transition: all .6s;
+            }
 
-			&.connecting {
-				background: $main-color;
-				color: white;
+            &.connecting {
+                background: $main-color;
+                color: white;
 
-				&:hover {
-					background: rgba($main-color, .8);
-				}
-			}
+                &:hover {
+                    background: rgba($main-color, .8);
+                }
+            }
 
-			&.alarm {
-				background: #f80000;
-				border-color: #f80000;
-				color: white;
+            &.alarm {
+                background: #f80000;
+                border-color: #f80000;
+                color: white;
 
-				&:hover {
-					background: rgba(#f80000, .8);
-				}
-			}
-		}
-	}
+                &:hover {
+                    background: rgba(#f80000, .8);
+                }
+            }
+        }
+    }
 
-	.content-box {
-		width: 100%;
-		height: calc(100% - 195px);
-		min-height: 600px;
-		margin-top: 15px;
-		background: white;
-		padding: 20px 50px;
-		display: flex;
-		justify-content: space-between;
+    .content-box {
+        width: 100%;
+        height: calc(100% - 195px);
+        min-height: 600px;
+        margin-top: 15px;
+        background: white;
+        padding: 20px 50px;
+        display: flex;
+        justify-content: space-between;
 
-		.remote-box {
-			width: calc(100% - 370px);
-			flex-grow: 1;
-			height: 100%;
-		}
+        .remote-box {
+            width: calc(100% - 370px);
+            flex-grow: 1;
+            height: 100%;
+        }
 
-		.message-box {
-			width: 350px;
-			height: 100%;
-			margin-left: 20px;
-		}
-	}
+        .message-box {
+            width: 350px;
+            height: 100%;
+            margin-left: 20px;
+        }
+    }
 }</style>
diff --git a/src/views/remote-manage/remote-thumbnail.vue b/src/views/remote-manage/remote-thumbnail.vue
index c14f803..9858f65 100644
--- a/src/views/remote-manage/remote-thumbnail.vue
+++ b/src/views/remote-manage/remote-thumbnail.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script lang='ts' setup>
-import {onMounted, ref} from 'vue';
+import {onMounted, onUnmounted, ref} from 'vue';
 import {useRoute, useRouter} from 'vue-router';
 import RemoteItemPart from './part/remote-item-part.vue';
 import MessageItemPart from './part/message-item-part.vue';
@@ -42,6 +42,15 @@ onMounted(() => {
 	remoteTask.value = remoteWsStore.getRemoteTask();
 })
 
+onUnmounted(() => {
+    if (!router.currentRoute.value.path.startsWith('/remote-manage/')) {
+        const tasks: any = remoteWsStore.getRemoteTask()
+        tasks.forEach((task: any) => {
+            remoteWsStore.disconnect(task.patient, task.patientId, task.date, task.index)
+        })
+    }
+})
+
 const openRemote = (params: any) => {
 	router.push('/remote-manage/remote-manage');
 }