mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-23 20:44:58 +08:00
临时提交
This commit is contained in:
zhaoyz
parent
db7031eb20
commit
fdea342eec
|
|
@ -1,46 +0,0 @@
|
||||||
let ws: WebSocket;
|
|
||||||
|
|
||||||
function init(url: string | URL, protocols?: string | string[]) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
try {
|
|
||||||
ws = new WebSocket(url);
|
|
||||||
resolve(true)
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function close(code?: number, reason?: string) {
|
|
||||||
ws.close(code, reason)
|
|
||||||
}
|
|
||||||
|
|
||||||
function send(data: string | ArrayBufferLike | Blob | ArrayBufferView) {
|
|
||||||
ws.send(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeListener(cb: any) {
|
|
||||||
ws.onclose = cb
|
|
||||||
}
|
|
||||||
|
|
||||||
function openListener(cb: any) {
|
|
||||||
ws.onopen = cb
|
|
||||||
}
|
|
||||||
|
|
||||||
function errorListener(cb: any) {
|
|
||||||
ws.onerror = cb
|
|
||||||
}
|
|
||||||
|
|
||||||
function messageListener(cb: any) {
|
|
||||||
ws.onmessage = cb
|
|
||||||
}
|
|
||||||
|
|
||||||
export const wsApi= {
|
|
||||||
init,
|
|
||||||
close,
|
|
||||||
send,
|
|
||||||
closeListener,
|
|
||||||
openListener,
|
|
||||||
errorListener,
|
|
||||||
messageListener
|
|
||||||
}
|
|
||||||
|
|
@ -67,7 +67,6 @@ import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
import {useLoginStore} from '@/stores/user-info-store'
|
import {useLoginStore} from '@/stores/user-info-store'
|
||||||
import {getHospitalsData} from '@/static-data/core'
|
import {getHospitalsData} from '@/static-data/core'
|
||||||
import userInfoForm from '@/components/user-info.vue'
|
import userInfoForm from '@/components/user-info.vue'
|
||||||
import {wsApi} from "@/api/ws";
|
|
||||||
import {Session} from "@/utils/storage";
|
import {Session} from "@/utils/storage";
|
||||||
import {logout} from "@/api/login";
|
import {logout} from "@/api/login";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,41 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="remote-manage-page">
|
<div class="remote-manage-page">
|
||||||
<div class="header-box">
|
<button @click="getSurgeryData">123</button>
|
||||||
<div class="thumbnail" @click="viewThumbnail">
|
<button @click="disconnectSurgeryData">断开</button>
|
||||||
<el-icon>
|
<div class="header-box">
|
||||||
<Menu/>
|
<div class="thumbnail" @click="viewThumbnail">
|
||||||
</el-icon>
|
<el-icon>
|
||||||
<span>缩略图</span>
|
<Menu/>
|
||||||
</div>
|
</el-icon>
|
||||||
<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
|
<span>缩略图</span>
|
||||||
:class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
|
</div>
|
||||||
@click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
|
<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
|
||||||
<span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
|
:class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
|
||||||
</div>
|
@click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
|
||||||
</div>
|
<span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
|
||||||
<div class="content-box">
|
</div>
|
||||||
<div class="remote-box">
|
</div>
|
||||||
<RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
|
<div class="content-box">
|
||||||
</div>
|
<div class="remote-box">
|
||||||
<div class="message-box">
|
<RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote"/>
|
||||||
<MessagePart ref="messagePartRef"/>
|
</div>
|
||||||
</div>
|
<div class="message-box">
|
||||||
</div>
|
<MessagePart ref="messagePartRef"/>
|
||||||
</div>
|
</div>
|
||||||
<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
|
</div>
|
||||||
|
</div>
|
||||||
|
<RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
import {onMounted, reactive, ref, toRefs, watch} from 'vue'
|
import {ref} from 'vue'
|
||||||
import {useRouter} from 'vue-router'
|
import {useRouter} from 'vue-router'
|
||||||
import {useRemoteStore} from '@/stores/remote-info-store'
|
import {useRemoteStore} from '@/stores/remote-info-store'
|
||||||
import type {RemoteItem} from '@/utils/public-interface'
|
import type {RemoteItem} from '@/utils/public-interface'
|
||||||
import RemoteDialog from './part/remote-dialog.vue'
|
import RemoteDialog from './part/remote-dialog.vue'
|
||||||
import RemotePart from './part/remote-part.vue'
|
import RemotePart from './part/remote-part.vue'
|
||||||
import MessagePart from './part/message-part.vue'
|
import MessagePart from './part/message-part.vue'
|
||||||
import {Client} from "@stomp/stompjs";
|
|
||||||
import {Session} from "@/utils/storage";
|
import {Session} from "@/utils/storage";
|
||||||
import {wsApi} from "@/api/ws";
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const remoteStore = useRemoteStore()
|
const remoteStore = useRemoteStore()
|
||||||
|
|
@ -48,104 +48,126 @@ const remoteTask = ref([] as Array<RemoteItem>)
|
||||||
initRemoteTask()
|
initRemoteTask()
|
||||||
|
|
||||||
function resetRemoteTaskItem(e: RemoteItem) {
|
function resetRemoteTaskItem(e: RemoteItem) {
|
||||||
Object.assign(remoteTask.value[e.index], {
|
Object.assign(remoteTask.value[e.index], {
|
||||||
isRemote: false,
|
isRemote: false,
|
||||||
dataAlarm: false,
|
dataAlarm: false,
|
||||||
title: '',
|
title: '',
|
||||||
serverUser: '',
|
serverUser: '',
|
||||||
patientName: '',
|
patientName: '',
|
||||||
patientCode: '',
|
patientCode: '',
|
||||||
index: e.index,
|
index: e.index,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function initRemoteTask() {
|
function initRemoteTask() {
|
||||||
remoteTask.value = remoteStore.remoteTasks
|
remoteTask.value = remoteStore.remoteTasks
|
||||||
if (remoteTask.value.length < 1) {
|
if (remoteTask.value.length < 1) {
|
||||||
while (remoteTask.value.length < 10) {
|
while (remoteTask.value.length < 10) {
|
||||||
const obj = {
|
const obj = {
|
||||||
isRemote: false, // 连接状态
|
isRemote: false, // 连接状态
|
||||||
dataAlarm: false, // 异常状态
|
dataAlarm: false, // 异常状态
|
||||||
title: '',
|
title: '',
|
||||||
serverUser: '', // 服务器用户名
|
serverUser: '', // 服务器用户名
|
||||||
patientName: '', // 病人名称
|
patientName: '', // 病人名称
|
||||||
patientCode: '', // 病人身份证
|
patientCode: '', // 病人身份证
|
||||||
index: remoteTask.value.length,
|
index: remoteTask.value.length,
|
||||||
log: []
|
log: []
|
||||||
}
|
}
|
||||||
if (remoteTask.value.length < 3) {
|
if (remoteTask.value.length < 3) {
|
||||||
obj.isRemote = true
|
obj.isRemote = true
|
||||||
obj.title = '远程控制' + (remoteTask.value.length + 1)
|
obj.title = '远程控制' + (remoteTask.value.length + 1)
|
||||||
obj.serverUser = 'root'
|
obj.serverUser = 'root'
|
||||||
obj.patientName = '测试' + (remoteTask.value.length + 1)
|
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)
|
remoteTask.value.push(obj)
|
||||||
}
|
}
|
||||||
remoteStore.setRemoteTasks(remoteTask.value)
|
remoteStore.setRemoteTasks(remoteTask.value)
|
||||||
if (!remoteStore.currentRemote.index) {
|
if (!remoteStore.currentRemote.index) {
|
||||||
remoteStore.$patch({currentRemote: remoteTask.value[0]})
|
remoteStore.$patch({currentRemote: remoteTask.value[0]})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const viewThumbnail = () => {
|
const viewThumbnail = () => {
|
||||||
router.push({
|
router.push({
|
||||||
path: '/remote-manage/remote-thumbnail'
|
path: '/remote-manage/remote-thumbnail'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 打开任务连接弹窗
|
// 打开任务连接弹窗
|
||||||
const editTask = (item: RemoteItem, index: number) => {
|
const editTask = (item: RemoteItem, index: number) => {
|
||||||
item.index = index
|
item.index = index
|
||||||
// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
|
// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
|
||||||
if (item.isRemote) {
|
if (item.isRemote) {
|
||||||
confirmRemote(item)
|
confirmRemote(item)
|
||||||
} else {
|
} else {
|
||||||
remoteDialogRef.value.open(item)
|
remoteDialogRef.value.open(item)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 跳转到远程控制
|
// 跳转到远程控制
|
||||||
const toRemoteControl = (item: RemoteItem, index: number) => {
|
const toRemoteControl = (item: RemoteItem, index: number) => {
|
||||||
// 如果当前任务是已连接状态则跳转，否则打开弹窗
|
// 如果当前任务是已连接状态则跳转，否则打开弹窗
|
||||||
if (item.isRemote) {
|
if (item.isRemote) {
|
||||||
router.push('/remote-manage/remote-control')
|
router.push('/remote-manage/remote-control')
|
||||||
} else {
|
} else {
|
||||||
editTask(item, index)
|
editTask(item, index)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 连接成功
|
// 连接成功
|
||||||
const confirmRemote = (e: RemoteItem) => {
|
const confirmRemote = (e: RemoteItem) => {
|
||||||
messagePartRef.value.setData({
|
messagePartRef.value.setData({
|
||||||
time: new Date(),
|
time: new Date(),
|
||||||
title: e.title,
|
title: e.title,
|
||||||
state: '连接成功'
|
state: '连接成功'
|
||||||
}, e.index)
|
}, e.index)
|
||||||
remoteTask.value[e.index] = e // 状态设置为可连接
|
remoteTask.value[e.index] = e // 状态设置为可连接
|
||||||
remotePartRef.value.initData(e)
|
remotePartRef.value.initData(e)
|
||||||
console.log(e);
|
console.log(e);
|
||||||
getSurgeryData(e.patientCode, e.patientName);
|
getSurgeryData();
|
||||||
}
|
}
|
||||||
// 连接失败
|
// 连接失败
|
||||||
const errorRemote = (e: RemoteItem) => {
|
const errorRemote = (e: RemoteItem) => {
|
||||||
messagePartRef.value.setData({
|
messagePartRef.value.setData({
|
||||||
time: new Date(),
|
time: new Date(),
|
||||||
title: e.title,
|
title: e.title,
|
||||||
state: '连接失败'
|
state: '连接失败'
|
||||||
}, e.index)
|
}, e.index)
|
||||||
}
|
}
|
||||||
// 断开连接
|
// 断开连接
|
||||||
const breakRemote = (e: RemoteItem) => {
|
const breakRemote = (e: RemoteItem) => {
|
||||||
resetRemoteTaskItem(e)
|
resetRemoteTaskItem(e)
|
||||||
remotePartRef.value.initData()
|
remotePartRef.value.initData()
|
||||||
messagePartRef.value.setData({
|
messagePartRef.value.setData({
|
||||||
time: new Date(),
|
time: new Date(),
|
||||||
title: e.title,
|
title: e.title,
|
||||||
state: '断开连接'
|
state: '断开连接'
|
||||||
}, e.index)
|
}, e.index)
|
||||||
disconnectSurgeryData("", "1")
|
// disconnectSurgeryData("", "1")
|
||||||
}
|
}
|
||||||
const addLogAfter = () => {
|
const addLogAfter = () => {
|
||||||
messagePartRef.value.scrollToBottom()
|
messagePartRef.value.scrollToBottom()
|
||||||
|
}
|
||||||
|
|
||||||
|
const ws = new WebSocket("ws://localhost:5173/socket.io/admin/rax/vitalSignsMedicine?token=" + Session.getToken());
|
||||||
|
|
||||||
|
ws.onopen = function () {
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSurgeryData() {
|
||||||
|
const params = {
|
||||||
|
patientName: "1111111",
|
||||||
|
idNum: "123567890",
|
||||||
|
date: "20230505"
|
||||||
|
}
|
||||||
|
ws.send(JSON.stringify(params))
|
||||||
|
}
|
||||||
|
|
||||||
|
function disconnectSurgeryData() {
|
||||||
|
ws.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
ws.onmessage = function (e) {
|
||||||
|
console.log(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
/*const surgeryClient = new Client({
|
/*const surgeryClient = new Client({
|
||||||
|
|
@ -229,133 +251,126 @@ function sendChatMessage() {
|
||||||
})
|
})
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
wsApi.init("ws://localhost:5173/socket.io/admin/vitalSignsMedicine").then(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
wsApi.openListener((cb: any) => {
|
|
||||||
console.log(cb)
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
.remote-manage-page {
|
.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>
|
}</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user