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 {getHospitalsData} from '@/static-data/core'
|
||||
import userInfoForm from '@/components/user-info.vue'
|
||||
import {wsApi} from "@/api/ws";
|
||||
import {Session} from "@/utils/storage";
|
||||
import {logout} from "@/api/login";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
<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.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" @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">
|
||||
<button @click="getSurgeryData">123</button>
|
||||
<button @click="disconnectSurgeryData">断开</button>
|
||||
<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.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" @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, reactive, ref, toRefs, watch} from 'vue'
|
||||
import {ref} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import {useRemoteStore} from '@/stores/remote-info-store'
|
||||
import type {RemoteItem} from '@/utils/public-interface'
|
||||
import RemoteDialog from './part/remote-dialog.vue'
|
||||
import RemotePart from './part/remote-part.vue'
|
||||
import MessagePart from './part/message-part.vue'
|
||||
import {Client} from "@stomp/stompjs";
|
||||
import {Session} from "@/utils/storage";
|
||||
import {wsApi} from "@/api/ws";
|
||||
|
||||
const router = useRouter()
|
||||
const remoteStore = useRemoteStore()
|
||||
|
|
@ -48,104 +48,126 @@ const remoteTask = ref([] as Array<RemoteItem>)
|
|||
initRemoteTask()
|
||||
|
||||
function resetRemoteTaskItem(e: RemoteItem) {
|
||||
Object.assign(remoteTask.value[e.index], {
|
||||
isRemote: false,
|
||||
dataAlarm: false,
|
||||
title: '',
|
||||
serverUser: '',
|
||||
patientName: '',
|
||||
patientCode: '',
|
||||
index: e.index,
|
||||
})
|
||||
Object.assign(remoteTask.value[e.index], {
|
||||
isRemote: false,
|
||||
dataAlarm: false,
|
||||
title: '',
|
||||
serverUser: '',
|
||||
patientName: '',
|
||||
patientCode: '',
|
||||
index: e.index,
|
||||
})
|
||||
}
|
||||
|
||||
function initRemoteTask() {
|
||||
remoteTask.value = remoteStore.remoteTasks
|
||||
if (remoteTask.value.length < 1) {
|
||||
while (remoteTask.value.length < 10) {
|
||||
const obj = {
|
||||
isRemote: false, // 连接状态
|
||||
dataAlarm: false, // 异常状态
|
||||
title: '',
|
||||
serverUser: '', // 服务器用户名
|
||||
patientName: '', // 病人名称
|
||||
patientCode: '', // 病人身份证
|
||||
index: remoteTask.value.length,
|
||||
log: []
|
||||
}
|
||||
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
|
||||
remoteTask.value.push(obj)
|
||||
}
|
||||
remoteStore.setRemoteTasks(remoteTask.value)
|
||||
if (!remoteStore.currentRemote.index) {
|
||||
remoteStore.$patch({currentRemote: remoteTask.value[0]})
|
||||
}
|
||||
}
|
||||
remoteTask.value = remoteStore.remoteTasks
|
||||
if (remoteTask.value.length < 1) {
|
||||
while (remoteTask.value.length < 10) {
|
||||
const obj = {
|
||||
isRemote: false, // 连接状态
|
||||
dataAlarm: false, // 异常状态
|
||||
title: '',
|
||||
serverUser: '', // 服务器用户名
|
||||
patientName: '', // 病人名称
|
||||
patientCode: '', // 病人身份证
|
||||
index: remoteTask.value.length,
|
||||
log: []
|
||||
}
|
||||
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
|
||||
remoteTask.value.push(obj)
|
||||
}
|
||||
remoteStore.setRemoteTasks(remoteTask.value)
|
||||
if (!remoteStore.currentRemote.index) {
|
||||
remoteStore.$patch({currentRemote: remoteTask.value[0]})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const viewThumbnail = () => {
|
||||
router.push({
|
||||
path: '/remote-manage/remote-thumbnail'
|
||||
})
|
||||
router.push({
|
||||
path: '/remote-manage/remote-thumbnail'
|
||||
})
|
||||
}
|
||||
// 打开任务连接弹窗
|
||||
const editTask = (item: RemoteItem, index: number) => {
|
||||
item.index = index
|
||||
// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
confirmRemote(item)
|
||||
} else {
|
||||
remoteDialogRef.value.open(item)
|
||||
}
|
||||
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)
|
||||
}
|
||||
// 如果当前任务是已连接状态则跳转，否则打开弹窗
|
||||
if (item.isRemote) {
|
||||
router.push('/remote-manage/remote-control')
|
||||
} else {
|
||||
editTask(item, index)
|
||||
}
|
||||
}
|
||||
// 连接成功
|
||||
const confirmRemote = (e: RemoteItem) => {
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接成功'
|
||||
}, e.index)
|
||||
remoteTask.value[e.index] = e // 状态设置为可连接
|
||||
remotePartRef.value.initData(e)
|
||||
console.log(e);
|
||||
getSurgeryData(e.patientCode, e.patientName);
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接成功'
|
||||
}, e.index)
|
||||
remoteTask.value[e.index] = e // 状态设置为可连接
|
||||
remotePartRef.value.initData(e)
|
||||
console.log(e);
|
||||
getSurgeryData();
|
||||
}
|
||||
// 连接失败
|
||||
const errorRemote = (e: RemoteItem) => {
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接失败'
|
||||
}, e.index)
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接失败'
|
||||
}, e.index)
|
||||
}
|
||||
// 断开连接
|
||||
const breakRemote = (e: RemoteItem) => {
|
||||
resetRemoteTaskItem(e)
|
||||
remotePartRef.value.initData()
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '断开连接'
|
||||
}, e.index)
|
||||
disconnectSurgeryData("", "1")
|
||||
resetRemoteTaskItem(e)
|
||||
remotePartRef.value.initData()
|
||||
messagePartRef.value.setData({
|
||||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '断开连接'
|
||||
}, e.index)
|
||||
// disconnectSurgeryData("", "1")
|
||||
}
|
||||
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({
|
||||
|
|
@ -229,133 +251,126 @@ function sendChatMessage() {
|
|||
})
|
||||
}*/
|
||||
|
||||
wsApi.init("ws://localhost:5173/socket.io/admin/vitalSignsMedicine").then(() => {
|
||||
|
||||
})
|
||||
wsApi.openListener((cb: any) => {
|
||||
console.log(cb)
|
||||
})
|
||||
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user