root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2025-08-24 04:54:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

远程控制交互逻辑调整

This commit is contained in:
gaofy 2023-12-20 17:55:51 +08:00
parent 4b40bec196
commit 0747c8a344
6 changed files with 75 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/import-dialog.vue
View File

@ -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>

2
src/utils/public-interface.ts
View File

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

4
src/views/remote-manage/part/message-part.vue
View File

@ -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)"

10
src/views/remote-manage/part/remote-dialog.vue
View File

@ -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) {
router.push('/remote-manage/remote-control')
return
}
patientInfo.value = e
patientInfo.value = JSON.parse(JSON.stringify(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{

26
src/views/remote-manage/part/remote-part.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="remote-part">
<div class="title">{{ title }}</div>
<div class="content" :class="{'is-total': isRemote}">
<div class="title">
<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 isRemote = ref(false) // 连接状态
const emit = defineEmits(['breakRemote'])
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%;

54
src/views/remote-manage/remote-manage.vue
View File

@ -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
remoteDialogRef.value.open(item)
// 如果当前任务是已连接状态则直接渲染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>