远程控制交互逻辑调整

src/components/import-dialog.vue

@@ -1,11 +1,11 @@
 <template>
-    <el-dialog v-model="dialogVisible" :title="title" width="30%">
+    <el-dialog v-model="dialogVisible" :title="title" width="50%">
         <el-upload v-model:file-list="fileList" drag accept=".xls, .xlsx" :auto-upload="false" :limit="1">
-            <div class="el-upload__text">
+            <div class="el-upload__text" style="padding: 80px 10px;font-size: 20px;">
                 将文件拖到此处，或 <em>点击上传</em>
             </div>
             <template #tip>
-                <div class="el-upload__tip">
+                <div class="el-upload__tip" style="font-size: 16px;">
                     仅允许导入xls、xlsx格式文件。<span class="main-color" style="cursor: pointer;"
                         @click="downloadTemplate">下载模板</span>
                 </div>

src/utils/public-interface.ts

@@ -10,5 +10,5 @@ export interface RemoteItem{
     serverUser: string
     patientName: string
     patientCode: string
-    index?: number
+    index: number
 }

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

@@ -1,6 +1,8 @@
 <template>
     <div class="message-part">
-        <div class="title">消息通知</div>
+        <div class="title">
+            <span>消息通知</span>
+        </div>
         <div class="content">
             <el-timeline>
                 <el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"

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

@@ -15,7 +15,7 @@
         </div>
         <div class="btn-box">
             <el-button class="f18" type="primary" @click="confirmRemote">确定连接</el-button>
-            <el-button class="f18" @click="breakRemote">断开连接</el-button>
+            <!-- <el-button class="f18" @click="breakRemote">断开连接</el-button> -->
             <el-button class="f18" @click="dialogVisible = false">返回</el-button>
         </div>
     </el-dialog>
@@ -44,11 +44,7 @@ onMounted(() => {
 })
 
 function open(e: RemoteItem) {
-    if(useRemoteStore().getCurrentRemote().index === e.index) {
+    patientInfo.value = JSON.parse(JSON.stringify(e))
-        router.push('/remote-manage/remote-control')
-        return
-    }
-    patientInfo.value = e
     dialogVisible.value = true
 }
 function close() {
@@ -58,6 +54,8 @@ function close() {
 const confirmRemote = () => {
     if(patientInfo.value.patientCode) {
         ElMessage.success('连接成功！')
+        patientInfo.value.isRemote = true
+        patientInfo.value.title = '远程控制' + (patientInfo.value.index + 1)
         emit('confirmRemote', patientInfo.value)
         close()
     }else{

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

@@ -1,7 +1,10 @@
 <template>
     <div class="remote-part">
-        <div class="title">{{ title }}</div>
+        <div class="title">
-        <div class="content" :class="{'is-total': isRemote}">
+            <span>{{ remoteItem?.title || '远程控制' }}</span>
+            <el-button v-if="remoteItem" class="break-btn" @click="breakRemote">断开连接</el-button>
+        </div>
+        <div class="content" :class="{'is-total': remoteItem?.isRemote}">
             <div class="left-box">
                 <div class="info-box">
                     <div class="row-item">
@@ -62,6 +65,7 @@
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { dateFormater } from '@/utils/date-util'
 import { useRemoteStore } from '@/stores/remote-info-store';
+import type { RemoteItem } from '@/utils/public-interface'
 
 interface PatientInfoItem {
     name: string // 病人名称
@@ -76,8 +80,9 @@ interface PatientInfoItem {
     TEMP: number
 }
 
-const title = ref('远程控制')
+const emit = defineEmits(['breakRemote'])
-const isRemote = ref(false) // 连接状态
+
+const remoteItem = ref<RemoteItem>()
 const patientInfo = ref({} as PatientInfoItem)
 
 initData(useRemoteStore().getCurrentRemote())
@@ -87,9 +92,8 @@ defineExpose({
 })
 
 function initData(e?: any) {
+    if(e) remoteItem.value = e
     const obj = e || {}
-    title.value = e.title
-    isRemote.value = e.isRemote
     patientInfo.value.state = e.dataAlarm
     patientInfo.value.name = obj.patientName || ''
     patientInfo.value.code = 'XXXXXX'
@@ -102,6 +106,10 @@ function initData(e?: any) {
     patientInfo.value.TEMP = Math.ceil(Math.random() * 100)
 }
 
+const breakRemote = () => {
+    emit('breakRemote', remoteItem.value)
+}
+
 </script>
 
 <style lang='scss' scoped>
@@ -111,6 +119,7 @@ function initData(e?: any) {
     border: 1px solid $border-color;
 
     .title {
+        position: relative;
         width: 100%;
         height: 40px;
         font-size: 20px;
@@ -119,6 +128,11 @@ function initData(e?: any) {
         font-weight: 600;
         color: white;
         background: $main-color;
+        .break-btn {
+            position: absolute;
+            top: 4px;
+            right: 20px;
+        }
     }
     .content {
         width: 100%;

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

@@ -2,20 +2,21 @@
     <div class="remote-manage-page">
         <div class="header-box">
             <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
-                :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }" @click="editTask(item, index)">
+                :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
+                @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
                 <span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
             </div>
         </div>
         <div class="content-box">
             <div class="remote-box">
-                <RemotePart ref="remotePartRef" />
+                <RemotePart ref="remotePartRef" @breakRemote="breakRemote" />
             </div>
             <div class="message-box">
                 <MessagePart ref="messagePartRef" />
             </div>
         </div>
     </div>
-    <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" @breakRemote="breakRemote" />
+    <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" />
 </template>
 
 <script lang='ts' setup>
@@ -36,23 +37,36 @@ const remoteTask = ref([] as Array<RemoteItem>)
 
 initRemoteTask()
 
+function resetRemoteTaskItem(e: RemoteItem) {
+    remoteTask.value[e.index] = {
+        isRemote: false,
+        dataAlarm: false,
+        title: '',
+        serverUser: '',
+        patientName: '',
+        patientCode: '',
+        index: e.index
+    }
+}
 function initRemoteTask() {
     remoteTask.value = []
     while (remoteTask.value.length < 10) {
         const obj = {
-            isRemote: true, // 连接状态
+            isRemote: false, // 连接状态
             dataAlarm: false, // 异常状态
             title: '',
             serverUser: '', // 服务器用户名
             patientName: '', // 病人名称
             patientCode: '', // 病人身份证
+            index: remoteTask.value.length
         }
-        if(remoteTask.value.length < 3) {
+        if (remoteTask.value.length < 3) {
+            obj.isRemote = true
             obj.title = '远程控制' + (remoteTask.value.length + 1)
             obj.serverUser = 'root'
             obj.patientName = '测试' + (remoteTask.value.length + 1)
         }
-        if(remoteTask.value.length == 1) obj.dataAlarm = true
+        if (remoteTask.value.length == 1) obj.dataAlarm = true
         remoteTask.value.push(obj)
     }
 }
@@ -60,16 +74,30 @@ function initRemoteTask() {
 // 打开任务连接弹窗
 const editTask = (item: RemoteItem, index: number) => {
     item.index = index
+    // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
+    if (item.isRemote) {
+        confirmRemote(item)
+    } else {
         remoteDialogRef.value.open(item)
+    }
+}
+// 跳转到远程控制
+const toRemoteControl = (item: RemoteItem, index: number) => {
+    // 如果当前任务是已连接状态则跳转，否则打开弹窗
+    if (item.isRemote) {
+        router.push('/remote-manage/remote-control')
+    } else {
+        editTask(item, index)
+    }
 }
 // 连接成功
 const confirmRemote = (e: RemoteItem) => {
-    console.log(e)
     messagePartRef.value.setData({
         time: new Date(),
         title: e.title,
         state: '连接成功'
     })
+    remoteTask.value[e.index] = e // 状态设置为可连接
     remotePartRef.value.initData(e)
     useRemoteStore().setCurrentRemote(e)
 }
@@ -83,7 +111,8 @@ const errorRemote = (e: RemoteItem) => {
 }
 // 断开连接
 const breakRemote = (e: RemoteItem) => {
-    remotePartRef.value.initData({})
+    resetRemoteTaskItem(e)
+    remotePartRef.value.initData()
     messagePartRef.value.setData({
         time: new Date(),
         title: e.title,
@@ -134,10 +163,12 @@ const breakRemote = (e: RemoteItem) => {
                     background: rgba($main-color, .8);
                 }
             }
+
             &.alarm {
                 background: #f80000;
                 border-color: #f80000;
                 color: white;
+
                 &:hover {
                     background: rgba(#f80000, .8);
                 }
@@ -153,13 +184,16 @@ const breakRemote = (e: RemoteItem) => {
         padding: 20px 50px;
         display: flex;
         justify-content: space-between;
+
         .remote-box {
             width: calc(100% - 370px);
             height: 100%;
         }
+
         .message-box {
             width: 350px;
             height: 100%;
         }
     }
-}</style>
+}
+</style>