远程管理错误修复

密码提醒按照一期的来

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>

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

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>

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">{{
+					<template #default="scope">
-							scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)
+                        <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('是否确定要重置密码？', '系统提醒', {
+    formData.value = {
-		type: 'warning',
+        password: '',
-		draggable: true,
+        confirmPassword: '',
-		inputPattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{9,15}$/,
+        username: e.username
-		inputErrorMessage: "密码至少包含字母、数字、特殊字符，不少于9位，最多15位"
+    }
-	}).then((inputVal) => {
+    psDialogVisible.value = true
-		modifyPw({
+    formRef.value.resetFields()
-			username: e.username,
+}
-			password: inputVal.value
+
-		}).then((res: any) => {
+const sbPs = () => {
-			if (res.code == 0) {
+    formRef.value.validate((valid: any, fields: any) => {
-				ElMessage.success('重置成功！')
+        if (valid) {
-			} else {
+            modifyPw({
-				ElMessage.error(res.msg)
+                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

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>

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 (res.status != 2) {
-        if (data.vitalSignsList && data.vitalSignsList.length > 0) {
+            const data = JSON.parse(res.data);
-            Object.assign(patientInfo.value, data.vitalSignsList[0]);
+            if (data.vitalSignsList && data.vitalSignsList.length > 0) {
-            patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
+                Object.assign(patientInfo.value, data.vitalSignsList[0]);
-                    patientInfo.value.DBP_except || patientInfo.value.HR_except);
+                patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
-            setLog(patientInfo.value, props.index)
+                        patientInfo.value.DBP_except || patientInfo.value.HR_except);
-            emit('addLogAfter', props.index)
+                setLog(patientInfo.value, props.index)
+                emit('addLogAfter', props.index)
+            }
         }
     })
 }

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);
+                if (res.status != 2) {
-                chartDom1.value.updateChartData(data.vitalSignsList[0]);
+                    const data = JSON.parse(res.data);
-                chartDom2.value.updateChartData(data.vitalSignsList[0]);
+                    chartDom1.value.updateChartData(data.vitalSignsList[0]);
-                chartDom3.value.updateChartData(data.vitalSignsList[0]);
+                    chartDom2.value.updateChartData(data.vitalSignsList[0]);
-                chartDom4.value.updateChartData(data.vitalSignsList[0]);
+                    chartDom3.value.updateChartData(data.vitalSignsList[0]);
-                updateMedicineTable(data.aiMedicineList[0], data.docMedicineList[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);

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

@@ -1,32 +1,32 @@
 <template>
-	<div class="remote-manage-page">
+    <div class="remote-manage-page">
-		<div class="header-box">
+        <div class="header-box">
-			<div class="thumbnail" @click="viewThumbnail">
+            <div class="thumbnail" @click="viewThumbnail">
-				<el-icon>
+                <el-icon>
-					<Menu/>
+                    <Menu/>
-				</el-icon>
+                </el-icon>
-				<span>缩略图</span>
+                <span>缩略图</span>
-			</div>
+            </div>
-			<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
+            <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
-					 :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
+                 :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
-					 @click="editTask(item)" @dblclick="toRemoteControl(item)">
+                 @click="editTask(item)" @dblclick="toRemoteControl(item)">
-				<span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
+                <span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
-			</div>
+            </div>
-		</div>
+        </div>
-		<div class="content-box">
+        <div class="content-box">
-			<div class="remote-box">
+            <div class="remote-box">
-				<RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
+                <RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
-			</div>
+            </div>
-			<div class="message-box">
+            <div class="message-box">
-				<MessagePart ref="messagePartRef"/>
+                <MessagePart ref="messagePartRef"/>
-			</div>
+            </div>
-		</div>
+        </div>
-	</div>
+    </div>
-	<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
+    <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()
+    remoteTask.value = remoteWsStore.initRemoteTask()
-	remotePartRef.value.initData()
+    remotePartRef.value.initData()
 }
 
 const viewThumbnail = () => {
-	router.push({
+    router.push({
-		path: '/remote-manage/remote-thumbnail',
+        path: '/remote-manage/remote-thumbnail',
-		query: {
+        query: {}
-		}
+    })
-	})
 }
 // 打开任务连接弹窗
 const editTask = (item: any) => {
-	// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
+    // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
-	if (item.isRemote) {
+    if (item.isRemote) {
-		remotePartRef.value.showData(item.index)
+        remotePartRef.value.showData(item.index)
-	} else {
+    } else {
-		remoteDialogRef.value.open(item.index)
+        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')
+        router.push('/remote-manage/remote-control')
-	} else {
+    } else {
-		remoteDialogRef.value.open(item.index)
+        remoteDialogRef.value.open(item.index)
-	}
+    }
 }
 // 连接成功
 const confirmRemote = () => {
-	messagePartRef.value.scrollToBottom()
+    messagePartRef.value.scrollToBottom()
-	// 状态设置为可连接
+    // 状态设置为可连接
-	remotePartRef.value.initData()
+    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%;
+    width: 100%;
-	height: 100%;
+    height: 100%;
-	padding-top: 15px;
+    padding-top: 15px;
-	overflow-y: auto;
+    overflow-y: auto;
-	overflow-x: hidden;
+    overflow-x: hidden;
 
-	.header-box {
+    .header-box {
-		position: relative;
+        position: relative;
-		width: 100%;
+        width: 100%;
-		min-height: 180px;
+        min-height: 180px;
-		background: white;
+        background: white;
-		padding: 0 30px;
+        padding: 0 30px;
-		display: flex;
+        display: flex;
-		flex-wrap: wrap;
+        flex-wrap: wrap;
 
-		.thumbnail {
+        .thumbnail {
-			cursor: pointer;
+            cursor: pointer;
-			position: absolute;
+            position: absolute;
-			width: 70px;
+            width: 70px;
-			height: 70px;
+            height: 70px;
-			top: 0;
+            top: 0;
-			right: 0;
+            right: 0;
-			display: flex;
+            display: flex;
-			justify-content: center;
+            justify-content: center;
-			align-items: center;
+            align-items: center;
-			background: #f8b300;
+            background: #f8b300;
-			border-top-left-radius: 35px;
+            border-top-left-radius: 35px;
-			border-bottom-left-radius: 35px;
+            border-bottom-left-radius: 35px;
-			box-shadow: -3px 3px 5px 0 rgba(black, .2);
+            box-shadow: -3px 3px 5px 0 rgba(black, .2);
-			font-size: 20px;
+            font-size: 20px;
-			color: white;
+            color: white;
-			transition: all .1s;
+            transition: all .1s;
 
-			.el-icon {
+            .el-icon {
-				font-size: 1.4em;
+                font-size: 1.4em;
-			}
+            }
 
-			& > span {
+            & > span {
-				display: none;
+                display: none;
-				margin-left: 5px;
+                margin-left: 5px;
-				line-height: 1;
+                line-height: 1;
-				white-space: nowrap;
+                white-space: nowrap;
-			}
+            }
 
-			&:hover {
+            &:hover {
-				width: 160px;
+                width: 160px;
-				transition: all .3s;
+                transition: all .3s;
 
-				& > span {
+                & > span {
-					display: block;
+                    display: block;
-				}
+                }
-			}
+            }
-		}
+        }
 
-		.task-btn-item {
+        .task-btn-item {
-			cursor: pointer;
+            cursor: pointer;
-			flex-grow: 1;
+            flex-grow: 1;
-			width: 17%;
+            width: 17%;
-			min-width: 200px;
+            min-width: 200px;
-			height: 70px;
+            height: 70px;
-			margin: 10px 20px;
+            margin: 10px 20px;
-			border: 2px solid $main-color;
+            border: 2px solid $main-color;
-			color: $main-color;
+            color: $main-color;
-			border-radius: 5px;
+            border-radius: 5px;
-			font-size: 20px;
+            font-size: 20px;
-			display: flex;
+            display: flex;
-			justify-content: center;
+            justify-content: center;
-			align-items: center;
+            align-items: center;
-			transition: all .6s;
+            transition: all .6s;
 
-			&:hover {
+            &:hover {
-				background: rgba($main-color, .1);
+                background: rgba($main-color, .1);
-				transition: all .6s;
+                transition: all .6s;
-			}
+            }
 
-			&.connecting {
+            &.connecting {
-				background: $main-color;
+                background: $main-color;
-				color: white;
+                color: white;
 
-				&:hover {
+                &:hover {
-					background: rgba($main-color, .8);
+                    background: rgba($main-color, .8);
-				}
+                }
-			}
+            }
 
-			&.alarm {
+            &.alarm {
-				background: #f80000;
+                background: #f80000;
-				border-color: #f80000;
+                border-color: #f80000;
-				color: white;
+                color: white;
 
-				&:hover {
+                &:hover {
-					background: rgba(#f80000, .8);
+                    background: rgba(#f80000, .8);
-				}
+                }
-			}
+            }
-		}
+        }
-	}
+    }
 
-	.content-box {
+    .content-box {
-		width: 100%;
+        width: 100%;
-		height: calc(100% - 195px);
+        height: calc(100% - 195px);
-		min-height: 600px;
+        min-height: 600px;
-		margin-top: 15px;
+        margin-top: 15px;
-		background: white;
+        background: white;
-		padding: 20px 50px;
+        padding: 20px 50px;
-		display: flex;
+        display: flex;
-		justify-content: space-between;
+        justify-content: space-between;
 
-		.remote-box {
+        .remote-box {
-			width: calc(100% - 370px);
+            width: calc(100% - 370px);
-			flex-grow: 1;
+            flex-grow: 1;
-			height: 100%;
+            height: 100%;
-		}
+        }
 
-		.message-box {
+        .message-box {
-			width: 350px;
+            width: 350px;
-			height: 100%;
+            height: 100%;
-			margin-left: 20px;
+            margin-left: 20px;
-		}
+        }
-	}
+    }
 }</style>

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');
 }