root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2026-06-14 17:11:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

远程管理

This commit is contained in:
zhaoyz 2024-04-23 09:42:25 +08:00
parent fddc1b5d25
commit 298074da1f
17 changed files with 2093 additions and 2194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/patient.ts Normal file
View File

@ -0,0 +1,17 @@
import request from "@/utils/request";
const patientInfoUrl = "/admin/medicine/getPatientInfo";
export function getPatientInfo(name: string, id: string, date: string) {
return new Promise((resolve, reject) => {
request.postForm(patientInfoUrl, {
patientName: name,
idNum: id,
date: date
})
}).then((res: any) => {
console.log(res.data)
}).catch(error => {
reject(error)
})
}

40
src/router/index.ts
View File

@ -10,7 +10,7 @@ const router = createRouter({
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
const loginInfo = useLoginStore().getlogin() const loginInfo = useLoginStore().getlogin()
const isLogin = loginInfo.isLogin // const isLogin = loginInfo.isLogin
// 普通用户 // 普通用户
const commonUser = [ const commonUser = [
'/login', '/login',
@ -49,31 +49,31 @@ router.beforeEach((to, from, next) => {
'/logs-manage/logs-manage' '/logs-manage/logs-manage'
] ]
const isViewRoute = () => { const isViewRoute = () => {
let release = false let release = true
switch (loginInfo.permissions) { /*switch (loginInfo.permissions) {
case '超级管理员': case '超级管理员':
release = true release = true
break; break;
case '高级管理员': case '高级管理员':
release = SeniorAdmin.some((p: string) => p === to.path) release = SeniorAdmin.some((p: string) => p === to.path)
break; break;
case '中级管理员': case '中级管理员':
release = IntermediateAdmin.some((p: string) => p === to.path) release = IntermediateAdmin.some((p: string) => p === to.path)
break; break;
case '普通用户': case '普通用户':
release = commonUser.some((p: string) => p === to.path) release = commonUser.some((p: string) => p === to.path)
break; break;
default: default:
break; break;
} }*/
return release return release
} }
if(to.fullPath ==='/login') { if(to.fullPath ==='/login') {
next() next()
return return
} }
if (!isLogin) next('/login') // 重定向登录页 /*if (!isLogin) next('/login') // 重定向登录页
else if(!isViewRoute()) { else */if(!isViewRoute()) {
ElMessage.error('无权访问！') ElMessage.error('无权访问！')
next(from.fullPath) next(from.fullPath)
}else next() }else next()

4
src/router/routes.ts
View File

@ -1,6 +1,6 @@
export const constantRoute=[ export const constantRoute=[
{ path: '/:pathMatch(.*)*', name: 'not-found', redirect: '/home' }, { path: '/:pathMatch(.*)*', name: 'not-found', redirect: '/login' },
{ {
path: '/login', path: '/login',
name: '登录', name: '登录',
@ -8,7 +8,7 @@ export const constantRoute=[
}, },
{ {
path: '/', path: '/',
redirect: '/home', redirect: '/login',
component: () => import('@/views/index.vue'), component: () => import('@/views/index.vue'),
children: [ children: [
{ {

214
src/stores/remote-ws-store.ts Normal file
View File

@ -0,0 +1,214 @@
import {defineStore} from "pinia";
import {Session} from "@/utils/storage";
const vitalUrl = "ws://localhost:5173/socket.io/admin/rax/vitalSignsMedicine?token=" + Session.getToken()
const medicineUrl = "ws://localhost:5173/socket.io/admin/rax/addMedicine?token=" + Session.getToken()
const chatUrl = "ws://localhost:5173/socket.io/admin/rax/chatRoom?token=" + Session.getToken()
export const useRemoteWsStore = defineStore("remoteWs", {
state: () => {
return {
patient: {} as any,
remoteTasks: [] as any,
remoteTasksCap: 10,
currentTaskIndex: 0,
varMedicine: ["丙泊酚", "舒芬太尼", "瑞芬太尼", "顺阿曲库胺"],
fixedMedicine: ["尼卡地平", "艾司洛尔", "麻黄素", "阿托品"],
exceptionType: ["BIS_except", "DBP_except", "EtCO2_except", "HR_except", "SBP_except", "ST_except"],
exceptionMsg: {
"BIS_except": "脑电双频指数异常", "DBP_except": "舒张压异常", "EtCO2_except": "呼气末二氧化碳异常",
"HR_except": "心率异常", "SBP_except": "收缩压异常", "ST_except": "ST异常"
},
}
},
actions: {
initRemoteTask() {
if (this.remoteTasks.length <= 0) {
for (let i = 0; i < 10; i++) {
this.remoteTasks.push({
isRemote: false,
isException: false,
taskName: "",
server: "",
serverun: "",
serverps: "",
patient: "",
patientId: "",
date: "",
log: [],
index: i
})
}
}
return this.remoteTasks
},
resetRemoteTask(i: number) {
this.remoteTasks[i] = Object.assign(this.remoteTasks[i], {
isRemote: false,
isException: false,
taskName: "",
server: "",
serverun: "",
serverps: "",
patient: "",
patientId: "",
date: "",
log: [],
index: i,
message: []
})
},
getActiveRemoteTask() {
for (let i = 0; i < this.remoteTasks.length; i++) {
if (this.remoteTasks[i].isRemote) return i
}
},
setRemoteLog(log: any, i: number) {
this.remoteTasks[i].log.push(log)
},
createConnect(name: string, id: string, date: string) {
if (!this.patient[name + id + date]) {
const vitalWS = new WebSocket(vitalUrl)
const medicineWS = new WebSocket(medicineUrl)
const chatWS = new WebSocket(chatUrl)
vitalWS.onopen = function () {
vitalWS.send(JSON.stringify({
patientName: name,
idNum: id,
date: date
}))
}
medicineWS.onopen = function () {
medicineWS.send(JSON.stringify({
patientName: name,
idNum: id,
date: date
}))
}
chatWS.onopen = function () {
chatWS.send(JSON.stringify({
patientName: name,
idNum: id,
date: date
}))
}
this.patient[name + id + date] = {
vitalWS,
medicineWS,
chatWS
}
}
},
disconnect(name: string, id: string, date: string) {
const patient: any = this.patient[name + id + date]
if (patient) {
patient.vitalWS.close()
patient.medicineWS.close()
patient.chatWS.close()
delete this.patient[name + id + date]
}
},
subscribeVital(name: string, id: string, date: string, cb: any) {
const patient: any = this.patient[name + id + date]
if (patient) {
patient.vitalWS.onmessage = cb
patient.vitalCB = cb
} else {
cb({
status: 1,
msg: "已断开连接"
})
}
},
unsubscribeVital(name: string, id: string, date: string) {
const patient: any = this.patient[name + id + date]
if (patient && patient.vitalWS) {
patient.vitalWS.onmessage = undefined;
patient.vitalCB = undefined;
}
},
sendMsg(name: string, id: string, date: string, msg: string, cb: any) {
const patient: any = this.patient[name + id + date]
if (patient) {
const params = {
patientName: name,
idNum: id,
date: date,
msg
}
patient.chatWS.send(JSON.stringify(params))
cb({
status: 0
})
} else {
cb({
status: 1,
msg: "已断开连接"
})
}
},
subscribeChat(name: string, id: string, date: string, cb: any) {
const patient: any = this.patient[name + id + date]
if (patient) {
patient.chatCB = cb
patient.chatWS.onmessage = cb
} else {
cb({
status: 1,
msg: "已断开连接"
})
}
},
unsubscribeChat(name: string, id: string, date: string) {
const patient: any = this.patient[name + id + date]
patient.chatCB = undefined;
patient.chatWS.onmessage = undefined;
},
sendMedicine(args: {
name: string,
id: string,
date: string,
flag: string,
medicine: string,
value: string
}, cb: any) {
const patient: any = this.patient[args.name + args.id + args.date]
if (patient) {
const params = {
patientName: args.name,
idNum: args.id,
date: args.date,
flag: args.flag,
medicine: args.medicine,
value: args.value
}
patient.medicineWS.send(JSON.stringify(params))
cb({
status: 0
})
} else {
cb({
status: 1,
msg: "已断开连接"
})
}
},
subscribeMedicine(name: string, id: string, date: string, cb: any) {
const patient = this.patient[name + id + date]
if (patient) {
patient.medicineCB = cb
patient.medicineWS.onmessage = cb
} else {
cb({
status: 1,
msg: "已断开连接"
})
}
},
unsubscribeMedicine(name: string, id: string, date: string) {
const patient: any = this.patient[name + id + date]
patient.medicineCB = undefined;
patient.medicineWS.onmessage = undefined;
}
}
})

2
src/stores/user-info-store.ts
View File

@ -4,7 +4,6 @@ export const useLoginStore = defineStore('login', {
state: () => { state: () => {
return { return {
login: { login: {
isLogin: false,
account: '', account: '',
name: '', name: '',
/** /**
@ -13,7 +12,6 @@ export const useLoginStore = defineStore('login', {
* 医院中级管理员： 首页、患者管理、远程管理 * 医院中级管理员： 首页、患者管理、远程管理
* 医院普通用户： 首页、患者管理 * 医院普通用户： 首页、患者管理
*/ */
permissions: '',
hospital: '' hospital: ''
} as any } as any
} }

57
src/views/index.vue
View File

@ -82,32 +82,37 @@ getHospitalsData().then((res: any) => {
const menus = [] as any const menus = [] as any
switch (userInfo.permissions) { switch (userInfo.permissions) {
case '超级管理员': case '超级管理员':
menus.push({label: '首页', path: '/home', icon: 'icon-shouye'}) menus.push({label: '首页', path: '/home', icon: 'icon-shouye'})
menus.push({label: '权限管理', path: '/permissions-manage', icon: 'icon-users'}) menus.push({label: '权限管理', path: '/permissions-manage', icon: 'icon-users'})
menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'}) menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'})
menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'}) menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'})
menus.push({label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli'}) menus.push({label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli'})
menus.push({label: '系统管理', path: '/logs-manage', icon: 'icon-setting'}) menus.push({label: '系统管理', path: '/logs-manage', icon: 'icon-setting'})
break; break;
case '高级管理员': case '高级管理员':
menus.push({label: '首页', path: '/home', icon: 'icon-shouye'}) menus.push({label: '首页', path: '/home', icon: 'icon-shouye'})
menus.push({label: '权限管理', path: '/permissions-manage', icon: 'icon-users'}) menus.push({label: '权限管理', path: '/permissions-manage', icon: 'icon-users'})
menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'}) menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'})
menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'}) menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'})
menus.push({label: '系统管理', path: '/logs-manage', icon: 'icon-setting'}) menus.push({label: '系统管理', path: '/logs-manage', icon: 'icon-setting'})
break; break;
case '中级管理员': case '中级管理员':
menus.push({label: '首页', path: '/home', icon: 'icon-shouye'}) menus.push({label: '首页', path: '/home', icon: 'icon-shouye'})
menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'}) menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'})
menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'}) menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'})
break; break;
case '普通用户': case '普通用户':
menus.push({label: '首页', path: '/home', icon: 'icon-shouye'}) menus.push({label: '首页', path: '/home', icon: 'icon-shouye'})
menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'}) menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'})
break; break;
default: default:
break; menus.push({label: '首页', path: '/home', icon: 'icon-shouye'})
menus.push({label: '权限管理', path: '/permissions-manage', icon: 'icon-users'})
menus.push({label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli'})
menus.push({label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang'})
menus.push({label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli'})
menus.push({label: '系统管理', path: '/logs-manage', icon: 'icon-setting'})
} }
const isShowUserInfoDrawer = ref(false) const isShowUserInfoDrawer = ref(false)

851
src/views/login/login.vue
View File

@ -1,127 +1,127 @@
<template> <template>
<div class="login-page"> <div class="login-page">
<div class="left-content move_4"></div> <div class="left-content move_4"></div>
<div class="right-content"> <div class="right-content">
<div class="select-hospital-box"> <!-- <div class="select-hospital-box">
<el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital"> <el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital">
<el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/> <el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</div> </div>-->
<img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png"> <img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
<div v-if="!isShowRegister" class="login-block move_2"> <div v-if="!isShowRegister" class="login-block move_2">
<div class="login-way"> <div class="login-way">
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span> <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> </div>
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small"> <el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
<div class="login-form password-login" v-if="passwordLogin"> <div class="login-form password-login" v-if="passwordLogin">
<el-form-item prop="account"> <el-form-item prop="account">
<el-input v-model="loginParams.account" placeholder="请输入用户名"> <el-input v-model="loginParams.account" placeholder="请输入用户名">
<template #prepend> <template #prepend>
<el-icon> <el-icon>
<User/> <User/>
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginParams.password" type="password" show-password placeholder="请输入密码"> <el-input v-model="loginParams.password" type="password" show-password placeholder="请输入密码">
<template #prepend> <template #prepend>
<el-icon> <el-icon>
<Lock/> <Lock/>
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录</el-button> <el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录</el-button>
<span class="register-btn" @click="getCaptchaCode()">注册账号</span> <span class="register-btn" @click="getCaptchaCode()">注册账号</span>
</div> </div>
<div class="login-form code-login" v-else> <div class="login-form code-login" v-else>
<el-form-item prop="phone"> <el-form-item prop="phone">
<el-input v-model="loginParams.phone" placeholder="请输入手机号"> <el-input v-model="loginParams.phone" placeholder="请输入手机号">
<template #prepend> <template #prepend>
<div @click.stop style="display: flex;align-items: center;"> <div @click.stop style="display: flex;align-items: center;">
<el-dropdown @command="selectPhoneArea"> <el-dropdown @command="selectPhoneArea">
<span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon> <span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
<DCaret/> <DCaret/>
</el-icon></span> </el-icon></span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item in phoneAreas" :command="item">{{ <el-dropdown-item v-for="item in phoneAreas" :command="item">{{
item item
}} }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
<el-input v-model="loginParams.code" placeholder="请输入6位短信验证码"> <el-input v-model="loginParams.code" placeholder="请输入6位短信验证码">
<template #append> <template #append>
<span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span> <span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-button class="login-btn" type="primary" @click="login('code')">登录</el-button> <el-button class="login-btn" type="primary" @click="login('code')">登录</el-button>
</div> </div>
</el-form> </el-form>
</div> </div>
<div v-else class="register-block move_2"> <div v-else class="register-block move_2">
<div class="header-box"> <div class="header-box">
<span class="title">新用户申请</span> <span class="title">新用户申请</span>
<el-icon @click="isShowRegister = false"> <el-icon @click="isShowRegister = false">
<Close/> <Close/>
</el-icon> </el-icon>
</div> </div>
<el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100"> <el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100">
<el-form-item label="用户名" prop="username"> <el-form-item label="用户名" prop="username">
<el-input v-model="registerParams.username" placeholder="请输入用户名"></el-input> <el-input v-model="registerParams.username" placeholder="请输入用户名"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
<el-input v-model="registerParams.password" type="password" show-password <el-input v-model="registerParams.password" type="password" show-password
placeholder="请输入密码"></el-input> placeholder="请输入密码"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
<el-input v-model="registerParams.name" placeholder="请输入姓名"></el-input> <el-input v-model="registerParams.name" placeholder="请输入姓名"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="phone">
<el-input v-model="registerParams.phone" placeholder="请输入手机号"></el-input> <el-input v-model="registerParams.phone" placeholder="请输入手机号"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="医院" prop="hospital"> <el-form-item label="医院" prop="hospital">
<el-select v-model="registerParams.hospital" style="width: 100%;"> <el-select v-model="registerParams.hospital" style="width: 100%;">
<el-option v-for="item in hospitals" :key="item.id" :label="item.name" <el-option v-for="item in hospitals" :key="item.id" :label="item.name"
:value="item.id"/> :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="性别" prop="sex"> <el-form-item label="性别" prop="sex">
<el-radio-group v-model="registerParams.sex"> <el-radio-group v-model="registerParams.sex">
<el-radio label="男"/> <el-radio label="男"/>
<el-radio label="女"/> <el-radio label="女"/>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="验证码" prop="code"> <el-form-item label="验证码" prop="code">
<el-input v-model="registerParams.code" placeholder="请输入验证码" <el-input v-model="registerParams.code" placeholder="请输入验证码"
style="width: calc(100% - 110px);"></el-input> style="width: calc(100% - 110px);"></el-input>
<img width="100" height="32" style="margin-left: 10px;" :src="captchaImgUrl"/> <img width="100" height="32" style="margin-left: 10px;" :src="captchaImgUrl"/>
<a class="change_img" @click="refreshImg" href="#">看不清？</a> <a class="change_img" @click="refreshImg" href="#">看不清？</a>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="footer-box"> <div class="footer-box">
<el-button type="primary" @click="register">注 册</el-button> <el-button type="primary" @click="register">注 册</el-button>
<span @click="isShowRegister = false">已有账号?</span> <span @click="isShowRegister = false">已有账号?</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl" <SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl"
:height="sliderVConf.height" @success="sliderSuccess" @close="sliderClose"></SliderVerify> :height="sliderVConf.height" @success="sliderSuccess" @close="sliderClose"></SliderVerify>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
@ -153,74 +153,74 @@ let loading = ref(false);
//自定义校验规则函数 //自定义校验规则函数
const validatorUserName = (rule: any, value: any, callback: any) => { const validatorUserName = (rule: any, value: any, callback: any) => {
//rule:即为校验规则对象 //rule:即为校验规则对象
//value:即为表单元素文本内容 //value:即为表单元素文本内容
//函数:如果符合条件callBack放行通过即为 //函数:如果符合条件callBack放行通过即为
//如果不符合条件callBack方法,注入错误提示信息 //如果不符合条件callBack方法,注入错误提示信息
if (/^[a-zA-Z0-9_-]{4,16}$/) { if (/^[a-zA-Z0-9_-]{4,16}$/) {
callback(); callback();
} else { } else {
callback(new Error('账号长度4到16位（字母，数字，下划线，减号）')); callback(new Error('账号长度4到16位（字母，数字，下划线，减号）'));
} }
} }
const validatorPassword = (rule: any, value: any, callback: any) => { const validatorPassword = (rule: any, value: any, callback: any) => {
if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/) { if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/) {
callback(); callback();
} else { } else {
callback(new Error('密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符')); callback(new Error('密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符'));
} }
} }
const validatorPhone = (rule: any, value: any, callback: any) => { const validatorPhone = (rule: any, value: any, callback: any) => {
var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
if (value.indexOf('****') >= 0) { if (value.indexOf('****') >= 0) {
return callback().trim(); return callback().trim();
} }
if (!isPhone.test(value)) { if (!isPhone.test(value)) {
callback(new Error('请输入合法手机号')); callback(new Error('请输入合法手机号'));
} else { } else {
callback(); callback();
} }
} }
const loginRules = reactive({ const loginRules = reactive({
account: [ account: [
{required: true, validator: validatorUserName, trigger: 'change'}, {required: true, validator: validatorUserName, trigger: 'change'},
], ],
password: [ password: [
{required: true, validator: validatorPassword, trigger: 'change'}, {required: true, validator: validatorPassword, trigger: 'change'},
], ],
phone: [ phone: [
{required: true, validator: validatorPhone, trigger: 'blur'}, {required: true, validator: validatorPhone, trigger: 'blur'},
], ],
code: [ code: [
{required: true, message: '请输入验证码', trigger: 'blur'}, {required: true, message: '请输入验证码', trigger: 'blur'},
] ]
}) })
const registerRules = reactive({ const registerRules = reactive({
username: [ username: [
{required: true, validator: validatorUserName, trigger: 'change'}, {required: true, validator: validatorUserName, trigger: 'change'},
], ],
password: [ password: [
{required: true, validator: validatorUserName, trigger: 'change'}, {required: true, validator: validatorUserName, trigger: 'change'},
], ],
name: [ name: [
{required: true, message: '请输入用户名', trigger: 'blur'}, {required: true, message: '请输入用户名', trigger: 'blur'},
], ],
phone: [ phone: [
{required: true, validator: validatorPhone, trigger: 'change'}, {required: true, validator: validatorPhone, trigger: 'change'},
], ],
hospital: [ hospital: [
{required: true, message: '请选择医院', trigger: 'blur'}, {required: true, message: '请选择医院', trigger: 'blur'},
], ],
code: [ code: [
{required: true, message: '请输入验证码', trigger: 'blur'}, {required: true, message: '请输入验证码', trigger: 'blur'},
] ]
}) })
//获取路由器 //获取路由器
@ -234,29 +234,29 @@ const currentHospital = ref(useLoginStore().getlogin().hospital)
const isShowRegister = ref(false) const isShowRegister = ref(false)
const passwordLogin = ref(true) const passwordLogin = ref(true)
const loginParams = ref({ const loginParams = ref({
account: 'admin', account: 'admin',
name: '', name: '',
password: '123456', password: '123456',
phone: '', phone: '',
phoneArea: phoneAreas[0], phoneArea: phoneAreas[0],
code: '', code: '',
isSendCode: false, isSendCode: false,
sendTimer: 0, sendTimer: 0,
sendText: '获取短信验证码' sendText: '获取短信验证码'
}) })
const registerParams = ref({ const registerParams = ref({
username: '', username: '',
password: '', password: '',
name: '', name: '',
phone: '', phone: '',
hospital: '', hospital: '',
sex: '', sex: '',
code: '' code: ''
}) })
const sliderVConf = ref({ const sliderVConf = ref({
isShowSelf: false, isShowSelf: false,
width: 400, width: 400,
height: 200 height: 200
}) })
const captchaImgUrl = ref('') const captchaImgUrl = ref('')
@ -264,312 +264,289 @@ const sliderImgUrl = ref('')
let randomStr = "" let randomStr = ""
onMounted(() => { onMounted(() => {
hospitalApi.getHospitalList().then((res: any) => { hospitalApi.getHospitalList().then((res: any) => {
if (res.data) { if (res.data) {
hospitals.value = res.data hospitals.value = res.data
} else { } else {
hospitals.value.length = 0 hospitals.value.length = 0
} }
}) })
}) })
const selectHospital = (e: string) => { const selectHospital = (e: string) => {
// console.log(e) // console.log(e)
} }
const register = async () => { const register = async () => {
await registerFormRef.value.validate((valid: any, fields: any) => { await registerFormRef.value.validate((valid: any, fields: any) => {
if (valid) { if (valid) {
loginApi.register({...registerParams.value, randomStr}).then(data => { loginApi.register({...registerParams.value, randomStr}).then(data => {
ElMessageBox.confirm( ElMessageBox.confirm(
'注册成功，是否登录？', '注册成功，是否登录？',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'success', type: 'success',
draggable: true draggable: true
} }
).then(() => { ).then(() => {
loginParams.value.account = registerFormRef.value.account loginParams.value.account = registerFormRef.value.account
loginParams.value.name = registerFormRef.value.name loginParams.value.name = registerFormRef.value.name
currentHospital.value = registerFormRef.value.hospital currentHospital.value = registerFormRef.value.hospital
isShowRegister.value = false; isShowRegister.value = false;
}).catch(() => { }).catch(() => {
}) })
}) })
} else { } else {
// console.log('error submit!', fields) // console.log('error submit!', fields)
} }
}) })
} }
const selectPhoneArea = (e: string) => { const selectPhoneArea = (e: string) => {
loginParams.value.phoneArea = e loginParams.value.phoneArea = e
} }
const sendCode = () => { const sendCode = () => {
if (loginParams.value.isSendCode) return if (loginParams.value.isSendCode) return
let num = 60 let num = 60
ElMessage.success('发送成功！') ElMessage.success('发送成功！')
loginParams.value.isSendCode = true loginParams.value.isSendCode = true
loginParams.value.sendText = '请' + num + '秒后重新发送' loginParams.value.sendText = '请' + num + '秒后重新发送'
loginParams.value.sendTimer = setInterval(() => { loginParams.value.sendTimer = setInterval(() => {
num-- num--
if (num > 0) { if (num > 0) {
loginParams.value.sendText = '请' + num + '秒后重新发送' loginParams.value.sendText = '请' + num + '秒后重新发送'
} else { } else {
loginParams.value.isSendCode = false loginParams.value.isSendCode = false
loginParams.value.sendText = '重新获取短信验证码' loginParams.value.sendText = '重新获取短信验证码'
clearInterval(loginParams.value.sendTimer) clearInterval(loginParams.value.sendTimer)
} }
}, 1000); }, 1000);
} }
const login = async (type: string) => { const login = async (type: string) => {
//加载效果:开始加载 //加载效果:开始加载
loading.value=true; loading.value = true;
const obj = loginParams.value /*if (!currentHospital.value) {
if (!currentHospital.value) { ElMessage.warning('请在右上角选择院区')
ElMessage.warning('请在右上角选择院区') return
return }*/
} //加载效果:开始加载
//加载效果:开始加载 loading.value = true;
loading.value = true; //保证全部表单正常再发请求
//保证全部表单正常再发请求 await loginFormRef.value.validate((valid: any, fields: any) => {
await loginFormRef.value.validate((valid: any, fields: any) => { if (valid) {
if (valid) { sliderVConf.value.isShowSelf = true;
sliderVConf.value.isShowSelf = true; }
} })
})
} }
function getCaptchaCode() { function getCaptchaCode() {
isShowRegister.value = true isShowRegister.value = true
refreshImg() refreshImg()
} }
function refreshImg() { function refreshImg() {
randomStr = v4() randomStr = v4()
captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr
} }
function sliderSuccess() { function sliderSuccess() {
loginApi.login({ loginApi.login({
username: loginParams.value.account, // 用户名 username: loginParams.value.account, // 用户名
password: loginParams.value.password, // 密码 password: loginParams.value.password, // 密码
randomStr: v4() randomStr: v4()
}).then((data: any) => { }).then((data: any) => {
sliderVConf.value.isShowSelf = false sliderVConf.value.isShowSelf = false
if (data.code == 1 || data.error) { if (data.code == 1 || data.error) {
ElMessage.error(data.msg ? data.msg : data.error) ElMessage.error(data.msg ? data.msg : data.error)
loading.value = false loading.value = false
} else { } else {
// 存储token 信息 // 存储token 信息
Session.set('token', data.access_token); console.log(data)
Session.set('refresh_token', data.refresh_token); ElNotification({
console.log(data) type: 'success',
toHome() message: '欢迎回来',
} title: `HI,${getTime()}好`
}) });
loginPost(data)
router.push('/home')
}
})
} }
function sliderClose() { function sliderClose() {
loading.value = false loading.value = false
} }
const toHome = () => { const loginPost = (data: any) => {
Session.set('token', data.access_token);
ElNotification({ Session.set('refresh_token', data.refresh_token);
type: 'success', useLoginStore().setlogin('account', data.username)
message: '欢迎回来', console.log(data)
title: `HI,${getTime()}好` useLoginStore().setlogin('name', data.user_info.name || '暂未设置姓名')
});
const getPermissions = () => {
let permissions = '普通用户'
switch (loginParams.value.account) {
case 'admin':
permissions = '超级管理员'
break;
case 'dev1':
permissions = '高级管理员'
break;
case 'dev2':
permissions = '中级管理员'
break;
default:
break;
}
return permissions
}
useLoginStore().setlogin('isLogin', true)
useLoginStore().setlogin('account', loginParams.value.account)
useLoginStore().setlogin('name', loginParams.value.name || '暂未设置姓名')
useLoginStore().setlogin('hospital', currentHospital.value)
useLoginStore().setlogin('permissions', getPermissions())
router.push('/home')
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.login-page { .login-page {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
background-color: #F8F8F8; background-color: #F8F8F8;
.left-content { .left-content {
width: 50%; width: 50%;
height: 100%; height: 100%;
background: url(@/assets/imgs/login/login_bck.png) no-repeat; background: url(@/assets/imgs/login/login_bck.png) no-repeat;
background-size: cover; background-size: cover;
} }
.right-content { .right-content {
position: relative; position: relative;
width: 50%; width: 50%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.select-hospital-box { .select-hospital-box {
position: absolute; position: absolute;
top: 25px; top: 25px;
right: 25px; right: 25px;
} }
.logo { .logo {
height: 70px; height: 70px;
} }
.login-block { .login-block {
width: 65%; width: 65%;
height: 430px; height: 430px;
min-width: 500px; min-width: 500px;
min-height: 300px; min-height: 300px;
padding: 50px; padding: 50px;
margin-top: 20px; margin-top: 20px;
background: white; background: white;
.login-way { .login-way {
font-size: 18px; font-size: 18px;
color: #909399; color: #909399;
span { span {
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
} }
.active { .active {
color: $main-color; color: $main-color;
font-weight: 600; font-weight: 600;
} }
} }
.login-form { .login-form {
:deep(.el-input) { :deep(.el-input) {
font-size: 16px; font-size: 16px;
margin-top: 20px; margin-top: 20px;
.el-input-group__prepend, .el-input-group__prepend,
.el-input__wrapper, .el-input__wrapper,
.el-input-group__append { .el-input-group__append {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
background-color: transparent; background-color: transparent;
padding: 10px 20px; padding: 10px 20px;
} }
.el-input-group__prepend, .el-input-group__prepend,
.el-input-group__append { .el-input-group__append {
position: relative; position: relative;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 16px; height: 16px;
top: calc(50% - 8px); top: calc(50% - 8px);
right: 0; right: 0;
background-color: $border-color; background-color: $border-color;
} }
} }
.el-input-group__append::after { .el-input-group__append::after {
right: auto; right: auto;
left: 0; left: 0;
} }
} }
.send-btn { .send-btn {
cursor: pointer; cursor: pointer;
color: $main-color; color: $main-color;
font-weight: 600; font-weight: 600;
} }
} }
.login-btn { .login-btn {
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
padding: 25px 0 25px 0.3em; padding: 25px 0 25px 0.3em;
border-radius: 0px; border-radius: 0px;
letter-spacing: 0.3em; letter-spacing: 0.3em;
} }
.register-btn { .register-btn {
cursor: pointer; cursor: pointer;
float: right; float: right;
color: $main-color; color: $main-color;
margin-top: 20px; margin-top: 20px;
} }
} }
.register-block { .register-block {
width: 65%; width: 65%;
min-width: 500px; min-width: 500px;
min-height: 300px; min-height: 300px;
padding: 50px; padding: 50px;
background: white; background: white;
.header-box { .header-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 30px; margin-bottom: 30px;
.title { .title {
font-size: 20px; font-size: 20px;
color: $main-color; color: $main-color;
font-weight: 600; font-weight: 600;
} }
.el-icon { .el-icon {
cursor: pointer; cursor: pointer;
} }
} }
.footer-box { .footer-box {
padding-left: 100px; padding-left: 100px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.el-button { .el-button {
font-size: 16px; font-size: 16px;
padding: 5px 50px; padding: 5px 50px;
} }
& > span { & > span {
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
color: #909399; color: #909399;
} }
} }
} }
} }
} }
</style> </style>

344
src/views/remote-manage/chart/chart-ecg.vue
View File

@ -1,197 +1,181 @@
<template> <template>
<div class="chart-dom-box"> <div class="chart-dom-box">
<div ref="chartDom" style="width: 100%; height: 100%"></div> <div ref="chartDom" style="width: 100%; height: 100%"></div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue'; import {onMounted, ref} from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { dateFormater } from '@/utils/date-util'; import {dateFormater} from '@/utils/date-util';
import {useRemoteWsStore} from "@/stores/remote-ws-store";
const chartDom = ref(); const chartDom = ref();
const props = withDefaults(defineProps<{ names?: string[] }>(), {
interface Props { names: ['CH1', 'CH2']
names?: string[];
chartData: any[];
}
const props = withDefaults(defineProps<Props>(), {
names: () => ['CH1', 'CH2'],
chartData: () => [] as any[],
});
// const emit = defineEmits(['updateData']);
let chart: any;
const names = props.names; // 类型名称
const color = ['#00AAB7', '#C77000'];
let xData = [] as any[]; // x时间轴
let series = [] as any[];
// 更新图表
function updateChart(num: number, time?: string) {
xData.shift();
xData.push(dateFormater('HH:mm:ss', time));
// const values = [] as number[];
series.forEach((item, index) => {
item.data.shift();
// item.data.push(index === 0 ? num - 0.2 : index === 2 ? num + 0.2 : num);
// item.data.push(index === 0 ? -Math.floor(Math.random() * 50 + 40) : Math.floor(Math.random() * 50 + 40));
item.data.push(Math.floor(Math.random() * 160 + -80));
// values.push(item.data[item.data.length - 1]);
});
// emit('updateData', values); // 传值
chart.setOption({
xAxis: {
data: xData,
},
series,
});
}
// 格式化数据
function formatterData() {
xData = [];
series = [];
for (let i = 0; i < 50; i++) {
if (props.chartData[i]) xData.push(dateFormater('HH:mm:ss', props.chartData[i].Time || props.chartData[i].TIME));
else xData.unshift(0);
}
names.forEach((item, index) => {
const obj = {
name: item,
type: 'line',
symbol: 'none',
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(40,94,125,0)',
},
{
offset: 0.3,
color: color[index],
},
{
offset: 0.5,
color: color[index],
},
{
offset: 0.7,
color: color[index],
},
{
offset: 1,
color: 'rgba(40,94,125,0)',
},
]),
width: 1,
},
data: [] as number[],
};
for (let i = 0; i < 50; i++) {
if (props.chartData[i]) {
const num = props.chartData[i].ST;
// obj.data.push(index === 0 ? num - 0.2 : index === 2 ? num + 0.2 : num);
// obj.data.push(index === 0 ? -Math.floor(Math.random() * 50 + 40) : Math.floor(Math.random() * 50 + 40));
obj.data.push(Math.floor(Math.random() * 160 + -80));
} else obj.data.unshift(0);
}
series.push(obj);
});
}
// 渲染图表 父组件调用
function chartSet() {
formatterData();
if (chart) chart.setOption({
xAxis: {
data: xData,
},
series,
});
}
// 图表初始化
function chartInit() {
chart = echarts.init(chartDom.value as HTMLElement);
chart.clear();
const option = {
color: color,
tooltip: {
trigger: 'axis',
formatter: (params: any) => {
let str = params[0].axisValue;
str += `<br>`;
names.forEach((item, index) => {
str += params[index].marker;
str += params[index].seriesName + ' ';
str += `${params[index].value} HZ`;
str += index === 0 ? '<br>' : '';
});
return str;
},
},
grid: {
left: 1,
right: 20,
bottom: 5,
top: 20,
containLabel: true,
},
xAxis: {
show: true,
type: 'category',
boundaryGap: false,
axisLine: { show: false, lineStyle: { color: '#006080' } },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: true, lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
data: xData,
},
yAxis: {
show: true,
type: 'value',
min: function (value: any) {
return value.min - 40
},
max: function (value: any) {
return value.max + 40
},
axisLabel: {
formatter: `{value} HZ`
},
axisLine: { show: false, lineStyle: { color: '#006080' } },
splitLine: { lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
},
series,
};
chart.setOption(option);
chart.resize();
window.addEventListener('resize', () => {
chart.resize();
});
}
onMounted(() => {
chartInit();
}); });
defineExpose({ defineExpose({
updateChart, updateChartData
chartSet
}); });
const emit = defineEmits(["exceptionEvent"]);
let chart: any;
const color = ['#00AAB7', '#C77000'];
const xData = [] as any[]; // x时间轴
const series = [] as any[];
let currentNode: any;
const remoteWsStore = useRemoteWsStore();
onMounted(() => {
chartInit();
});
function updateChartData(data: any) {
if (data) {
if (currentNode && currentNode.Time == data.Time) {
return;
} else {
currentNode = data;
}
xData.shift();
xData.push(dateFormater("HH:mm:ss", data.Time ? data.Time - 8 * 60 * 60 * 1000 : ""));
series.forEach(serie => {
serie.data.shift();
serie.data.push(data[serie] ? data[serie] : 0);
if (data[serie.name + '_except']) {
emit("exceptionEvent", remoteWsStore.exceptionMsg[serie.name + '_except']);
}
})
chart.setOption({
xAxis: {
data: xData,
},
series
});
}
}
// 图表初始化
function chartInit() {
chart = echarts.init(chartDom.value as HTMLElement);
chart.clear();
getXData();
getSeries();
const option = {
color: color,
tooltip: {
trigger: 'axis',
formatter: (params: any) => {
let str = params[0].axisValue;
str += `<br>`;
props.names.forEach((item, index) => {
str += params[index].marker;
str += params[index].seriesName + ' ';
str += `${params[index].value} HZ`;
str += index === 0 ? '<br>' : '';
});
return str;
},
},
grid: {
left: 1,
right: 20,
bottom: 5,
top: 20,
containLabel: true,
},
xAxis: {
show: true,
type: 'category',
boundaryGap: false,
axisLine: {show: false, lineStyle: {color: '#006080'}},
axisTick: {show: false},
axisLabel: {show: false},
splitLine: {show: true, lineStyle: {color: '#D4E8F0', width: 1, type: 'solid'}},
data: xData,
},
yAxis: {
show: true,
type: 'value',
min: function (value: any) {
return value.min - 40
},
max: function (value: any) {
return value.max + 40
},
axisLabel: {
formatter: `{value} HZ`
},
axisLine: {show: false, lineStyle: {color: '#006080'}},
splitLine: {lineStyle: {color: '#D4E8F0', width: 1, type: 'solid'}},
},
series,
};
chart.setOption(option);
chart.resize();
window.addEventListener('resize', () => {
chart.resize();
});
}
function getXData() {
for (let i = 0; i < 50; i++) {
xData.push(0);
}
}
function getSeries() {
props.names.forEach((name, index) => {
const serie = {
name,
type: 'line',
symbol: 'none',
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(40,94,125,0)',
},
{
offset: 0.3,
color: color[index],
},
{
offset: 0.5,
color: color[index],
},
{
offset: 0.7,
color: color[index],
},
{
offset: 1,
color: 'rgba(40,94,125,0)',
},
]),
width: 1,
},
data: [],
};
for (let i = 0; i < 50; i++) {
serie.data.push(0);
}
series.push(serie);
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-dom-box { .chart-dom-box {
position: relative; position: relative;
.chart-rate { .chart-rate {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 30px; left: 30px;
color: #285e7d; color: #285e7d;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
font-weight: 600; font-weight: 600;
} }
} }
</style> </style>

185
src/views/remote-manage/chart/chart-line.vue
View File

@ -5,102 +5,73 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue'; import {onMounted, ref} from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { dateFormater } from '@/utils/date-util'; import {dateFormater} from '@/utils/date-util';
import {useRemoteWsStore} from "@/stores/remote-ws-store";
const chartDom = ref(); const chartDom = ref();
const props = withDefaults(defineProps<{
names: string[]
}>(), {
names: ['BIS', 'HR']
});
defineExpose({
updateChartData
});
const emit = defineEmits(["exceptionEvent"]);
let chart: any;
const xData: any = [];
const series: any = [];
const legendData: any = [];
const colors = ['#00AAB7', '#C77000'];
let currentNode: any;
const remoteWsStore = useRemoteWsStore();
interface Props { onMounted(() => {
names: string[]; chartInit();
chartData: any[];
}
const props = withDefaults(defineProps<Props>(), {
names: () => ['BIS', 'HR'],
chartData: () => [] as any[],
}); });
// const emit = defineEmits(['updateData']); function updateChartData(data: any) {
if (data) {
let chart: any; if (currentNode && currentNode.Time == data.Time) {
const names = props.names; // 类型名称 return;
const color = ['#00AAB7', '#C77000']; } else {
let legendData = [] as any[]; currentNode = data;
let xData = [] as any[]; // x时间轴 }
let series = [] as any[]; xData.shift();
xData.push(dateFormater("HH:mm:ss", data.Time ? data.Time - 8 * 60 * 60 * 1000 : ''));
series.forEach(serie => {
// 更新图表 serie.data.shift();
function updateChart(ary: number[], time?: string) { serie.data.push(data[serie.name]);
xData.shift(); if (data[serie.name + '_except']) {
xData.push(dateFormater('HH:mm:ss', time)); emit("exceptionEvent", remoteWsStore.exceptionMsg[serie.name + '_except']);
// const values: number[] = []; }
series.forEach((item, index) => { })
item.data.shift(); chart.setOption({
item.data.push(ary[index]); xAxis: {
// values.push(item.data[item.data.length - 1]); data: xData,
}); },
// emit('updateData', [values]); // 传值 series,
chart.setOption({ })
xAxis: { }
data: xData,
},
series,
});
} }
// 格式化数据
function formatterData() {
legendData = [];
xData = [];
series = [];
for (let i = 0; i < 10; i++) {
if (props.chartData[i]) xData.push(dateFormater('HH:mm:ss', props.chartData[i].Time || props.chartData[i].TIME));
else xData.unshift(0);
}
names.forEach((item, index) => {
const obj = {
name: item,
type: 'line',
symbol: 'none',
smooth: true,
data: [] as number[],
};
for (let i = 0; i < 10; i++) {
if (props.chartData[i]) obj.data.push(props.chartData[i][item]);
else obj.data.unshift(0);
}
legendData.push({
name: item,
textStyle: { color: color[index] },
});
series.push(obj);
});
}
// 渲染图表 父组件调用
function chartSet() {
formatterData();
if (chart) chart.setOption({
xAxis: {
data: xData,
},
series,
});
}
// 图表初始化
function chartInit() { function chartInit() {
chart = echarts.init(chartDom.value as HTMLElement); chart = echarts.init(chartDom.value as HTMLElement);
chart.clear(); chart.clear();
formatterData(); getSeries();
const option : any = { getXData();
color, getLegendData();
const option: any = {
color: colors,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter: (params: any) => { formatter: (params: any) => {
let str = ''; let str = '';
str += params[0].axisValue; str += params[0].axisValue;
str += '<br>'; str += '<br>';
names.forEach((item, index) => { props.names.forEach((item, index) => {
str += params[index].marker; str += params[index].marker;
str += params[index].seriesName + ' '; str += params[index].seriesName + ' ';
switch (item) { switch (item) {
@ -145,7 +116,7 @@ function chartInit() {
lineHeight: 30, lineHeight: 30,
}, },
formatter: (params: string) => { formatter: (params: string) => {
const index = names.findIndex((item) => item === params); const index = props.names.findIndex((item) => item === params);
let str = params + ' '; let str = params + ' ';
switch (params) { switch (params) {
case 'BIS': case 'BIS':
@ -171,7 +142,7 @@ function chartInit() {
} }
return str; return str;
}, },
data: legendData, data: legendData
}, },
grid: { grid: {
left: 5, left: 5,
@ -184,21 +155,22 @@ function chartInit() {
show: true, show: true,
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: xData, data: [],
axisLine: { lineStyle: { color: '#006080' } } axisLine: {lineStyle: {color: '#006080'}}
}, },
yAxis: { yAxis: {
show: true, show: true,
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: `{value} ${names[0] === 'BIS' ? '次/分' : names[0] === 'SBP' ? 'mmHg' : ''}` formatter: `{value} ${props.names[0] === 'BIS' ? '次/分' : props.names[0] === 'SBP' ? 'mmHg' : ''}`
}, },
axisLine: { show: true, lineStyle: { color: '#006080' } }, axisLine: {show: true, lineStyle: {color: '#006080'}},
splitLine: { lineStyle: { color: '#C0C4CC', width: 1, type: 'dashed' } }, splitLine: {lineStyle: {color: '#C0C4CC', width: 1, type: 'dashed'}},
}, },
series, series,
}; };
if(names[0] !== 'BIS') { if (props.names[0] !== 'BIS'
) {
option.yAxis.max = (value: any) => value.max + 20; option.yAxis.max = (value: any) => value.max + 20;
} }
chart.setOption(option); chart.setOption(option);
@ -208,13 +180,36 @@ function chartInit() {
}); });
} }
onMounted(() => { function getSeries() {
chartInit(); props.names.forEach(name => {
}); const serie = {
defineExpose({ name,
updateChart, type: 'line',
chartSet symbol: 'none',
}); smooth: true,
data: [] as number[],
};
for (let i = 0; i < 10; i++) {
serie.data.push(0);
}
series.push(serie)
});
}
function getXData() {
for (let i = 0; i < 10; i++) {
xData.push(0);
}
}
function getLegendData() {
props.names.forEach((name, index) => {
legendData.push({
name,
textStyle: {color: colors[index]},
});
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -1,51 +1,41 @@
<template> <template>
<div class="message-item-part"> <div class="message-item-part">
<div class="tag-index">{{ index + 1 }}</div> <div class="tag-index">{{ index + 1 }}</div>
<ul ref="listRef"> <ul ref="listRef">
<li v-for="(item, index) in logs" :key="index"> <li v-for="(item, i) in remoteWsStore.remoteTasks[index]?.log || []" :key="i">
<span>{{ dateFormater('HH:mm:ss', item.time) }}</span> <span>{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}</span>
<span>{{ item.title }}</span> <span>{{ item.taskName }}</span>
<span>{{ item.state }}</span> <span>{{ item.state }}</span>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {ref} from 'vue';
import type { RemoteLogItem, RemoteItem } from '@/utils/public-interface' import {useRemoteWsStore} from "@/stores/remote-ws-store";
import { useRemoteStore } from '@/stores/remote-info-store' import {dateFormater} from "@/utils/date-util";
import { dateFormater } from '@/utils/date-util'
interface Props {
index: number
logs: Array<RemoteLogItem>
}
const props = withDefaults(defineProps<Props>(), {
index: () => 0,
logs: () => [] as Array<RemoteLogItem>
})
const remoteWsStore = useRemoteWsStore();
const props = withDefaults(defineProps<{
index: number
}>(),
{
index: () => 0
})
const listRef = ref() const listRef = ref()
const remoteTasks: any = ref([] as Array<RemoteItem>)
defineExpose({ defineExpose({
scrollToBottom, scrollToBottom
}) })
remoteTasks.value = useRemoteStore().remoteTasks
// 监听 useRemoteStore() 值变化
// useRemoteStore().$subscribe((mutation: any, state: any) => {
// console.log(mutation, state)
// })
function scrollToBottom() { function scrollToBottom() {
setTimeout(() => { setTimeout(() => {
listRef.value.scrollTo({ listRef.value.scrollTo({
top: listRef.value.scrollHeight, top: listRef.value.scrollHeight,
behavior: 'smooth' behavior: 'smooth'
}) })
}, 0) }, 0)
} }
</script> </script>

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

@ -1,47 +1,45 @@
<template> <template>
<div class="message-part"> <div class="message-part">
<div class="title"> <div class="title">
<span>消息通知</span> <span>消息通知</span>
</div> </div>
<div ref="listRef" class="content"> <div ref="listRef" class="content">
<el-timeline> <el-timeline>
<el-timeline-item v-for="(item, index) in remoteStore.currentRemote.log || []" :key="index" <el-timeline-item v-for="(item, index) in remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]?.log || []" :key="index"
:timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)" :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
:class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }"> :class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }">
{{ item.title + ' ' + item.state }} {{ item.taskName + ' ' + item.state }}
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
</div> </div>
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {ref} from 'vue'
import type { RemoteLogItem, RemoteItem } from '@/utils/public-interface' import {dateFormater} from '@/utils/date-util'
import { useRemoteStore } from '@/stores/remote-info-store' import {useRemoteWsStore} from "@/stores/remote-ws-store";
import { dateFormater } from '@/utils/date-util'
defineExpose({ defineExpose({
setData, setData,
scrollToBottom scrollToBottom
}) })
const remoteStore = useRemoteStore() const remoteWsStore = useRemoteWsStore()
const listRef = ref() const listRef = ref()
function setData(e: RemoteLogItem, index: number) { function setData(e: any, index: number) {
remoteStore.setRemoteLog(e, index) remoteWsStore.setRemoteLog(e, index)
remoteStore.$patch({currentRemote: remoteStore.remoteTasks[index]})
} }
function scrollToBottom() { function scrollToBottom() {
setTimeout(() => { setTimeout(() => {
listRef.value.scrollTo({ listRef.value.scrollTo({
top: listRef.value.scrollHeight, top: listRef.value.scrollHeight,
behavior: 'smooth' behavior: 'smooth'
}) })
}, 0) }, 0)
} }
</script> </script>

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

@ -1,72 +1,101 @@
<template> <template>
<el-dialog class="header-none" v-model="dialogVisible" :width="700" :show-close="false"> <el-dialog class="header-none" v-model="dialogVisible" :width="700" :show-close="false">
<div class="content-box"> <div class="content-box">
<img src="@/assets/imgs/remote/remote_bck.png"> <img src="@/assets/imgs/remote/remote_bck.png">
<div class="info"> <div class="info">
<h3>连接云服务器</h3> <h3>连接云服务器</h3>
<br> <br>
<p>云服务器连接状态：{{ patientInfo.isRemote ? '已连接' : '未连接' }}</p> <!-- <p>云服务器连接状态：{{ patientInfo.isRemote ? '已连接' : '未连接' }}</p>
<p>输入用户名：{{ patientInfo.serverUser }}</p> <p>输入用户名：{{ patientInfo.serverun }}</p>
<p>密码：*********</p> <p>密码：*********</p>
<br> <br>-->
<p class="input-box"><span>输入病人姓名：</span><el-input v-model="patientInfo.patientName"></el-input></p> <p class="input-box"><span>输入病人姓名：</span>
<p class="input-box"><span>输入病人身份证号：</span><el-input v-model="patientInfo.patientCode"></el-input></p> <el-input v-model="patientInfo.patient"></el-input>
</div> </p>
</div> <p class="input-box"><span>输入病人身份证号：</span>
<div class="btn-box"> <el-input v-model="patientInfo.patientId"></el-input>
<el-button class="f18" type="primary" @click="confirmRemote">确定连接</el-button> </p>
<!-- <el-button class="f18" @click="breakRemote">断开连接</el-button> --> <p class="input-box"><span>请选择手术时间：</span>
<el-button class="f18" style="margin-left: 50px;" @click="dialogVisible = false">返回</el-button> <el-date-picker
</div> v-model="patientInfo.date"
</el-dialog> type="date"
placeholder="请选择日期"
/>
</p>
</div>
</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" style="margin-left: 50px;" @click="dialogVisible = false">返回</el-button>
</div>
</el-dialog>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router' import {useRemoteWsStore} from "@/stores/remote-ws-store";
import { useRemoteStore } from '@/stores/remote-info-store'; import {dateFormater} from "@/utils/date-util";
import type { RemoteItem } from '@/utils/public-interface';
const router = useRouter()
const emit = defineEmits(['confirmRemote', 'errorRemote', 'breakRemote']) const emit = defineEmits(['confirmRemote', 'errorRemote', 'breakRemote'])
const dialogVisible = ref(false) const dialogVisible = ref(false)
const patientInfo = ref({} as RemoteItem) const patientInfo = ref({} as any)
const remoteWsStore = useRemoteWsStore();
defineExpose({ defineExpose({
open, open,
close, close,
})
onMounted(() => {
}) })
function open(e: RemoteItem) { function open(e: number) {
patientInfo.value = JSON.parse(JSON.stringify(e)) patientInfo.value = remoteWsStore.remoteTasks[e]
dialogVisible.value = true dialogVisible.value = true
} }
function close() { function close() {
dialogVisible.value = false dialogVisible.value = false
} }
const confirmRemote = () => { const confirmRemote = () => {
if(patientInfo.value.patientCode) { if (patientInfo.value.patientId && patientInfo.value.patient) {
ElMessage.success('连接成功！') ElMessage.success('连接成功！')
patientInfo.value.isRemote = true patientInfo.value.isRemote = true
patientInfo.value.title = '远程控制' + (patientInfo.value.index + 1) patientInfo.value.taskName = '远程控制' + (patientInfo.value.index + 1)
emit('confirmRemote', patientInfo.value) patientInfo.value.date = dateFormater("yyyy-MM-dd", patientInfo.value.date)
close() unsubscribeLastTask();
}else{ remoteWsStore.$patch({currentTaskIndex: patientInfo.value.index})
ElMessage.error('连接失败！') remoteWsStore.setRemoteLog({
emit('errorRemote', patientInfo.value) time: new Date(),
} taskName: patientInfo.value.taskName,
state: '连接成功',
type: "normal"
}, remoteWsStore.currentTaskIndex)
emit('confirmRemote', patientInfo.value)
close()
} else {
remoteWsStore.setRemoteLog({
time: new Date(),
taskName: patientInfo.value.taskName,
state: '连接失败'
}, patientInfo.value.index)
ElMessage.error('连接失败！')
emit('errorRemote', patientInfo.value)
}
} }
const breakRemote = () => { const breakRemote = () => {
ElMessage.info('连接已断开！') ElMessage.info('连接已断开！')
emit('breakRemote', patientInfo.value) emit('breakRemote', patientInfo.value)
close() close()
}
const unsubscribeLastTask = () => {
const lastTaskIndex = remoteWsStore.currentTaskIndex;
const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex];
if (lastTask) {
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date);
}
} }
</script> </script>
@ -115,6 +144,7 @@ const breakRemote = () => {
} }
} }
} }
.btn-box { .btn-box {
display: flex; display: flex;
justify-content: center; justify-content: center;

202
src/views/remote-manage/part/remote-item-part.vue
View File

@ -1,122 +1,114 @@
<template> <template>
<div class="remote-item-part"> <div class="remote-item-part">
<div class="title"> <div class="title">
<span>{{ remoteTask.title || '远程控制' }}</span> <span>{{ remoteTask.taskName || '远程控制' }}</span>
</div> </div>
<div class="content mini" :class="{ 'is-total': remoteTask.isRemote }"> <div class="content mini" :class="{ 'is-total': remoteTask.isRemote }">
<div class="left-box"> <div class="left-box">
<div class="info-box"> <div class="info-box">
<div class="row-item"> <div class="row-item">
<span class="label">病人名称</span> <span class="label">病人名称</span>
<span class="input-value">{{ patientInfo.name }}</span> <span class="input-value">{{ remoteTask.patient }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
<span class="label">住院号</span> <span class="label">住院号</span>
<span class="input-value">{{ patientInfo.code }}</span> <span class="input-value">{{ remoteTask.patientId }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
<span class="label">手术时间</span> <span class="label">手术时间</span>
<span class="input-value">{{ patientInfo.time && dateFormater('yyyy-MM-dd HH:mm:ss', patientInfo.time) <span class="input-value">{{
}}</span> remoteTask.date
</div> }}</span>
<div class="row-item"> </div>
<span class="label">手术状态</span> <div class="row-item">
<span class="tag-value" :class="{ 'normal': !patientInfo.state }">正常</span> <span class="label">手术状态</span>
<span class="tag-value" :class="{ 'alarm': patientInfo.state }">异常</span> <span class="tag-value" :class="{ 'normal': !patientInfo.state }">正常</span>
</div> <span class="tag-value" :class="{ 'alarm': patientInfo.state }">异常</span>
</div> </div>
<div class="row-item" :class="{ 'alarm': patientInfo.BIS < 40 || patientInfo.BIS > 60 }"> </div>
<span class="label">BIS</span> <div class="row-item" :class="{ 'alarm': patientInfo.BIS_except }">
<span class="value">{{ patientInfo.BIS }}</span> <span class="label">BIS</span>
</div> <span class="value">{{ patientInfo.BIS }}</span>
<div class="row-item" :class="{ 'alarm': patientInfo.SBP < 90 || patientInfo.SBP > 120 }"> </div>
<span class="label">SBP</span> <div class="row-item" :class="{ 'alarm': patientInfo.SBP_except }">
<span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span> <span class="label">SBP</span>
</div> <span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
<div class="row-item"> </div>
<span class="label">SPO2</span> <div class="row-item">
<span class="value">{{ patientInfo.SPO2 }}</span> <span class="label">SPO2</span>
</div> <span class="value">{{ patientInfo.SPO2 }}</span>
<div class="row-item yellow" :class="{ 'alarm': patientInfo.DBP < 60 || patientInfo.DBP > 90 }"> </div>
<span class="label">DBP</span> <div class="row-item yellow" :class="{ 'alarm': patientInfo.DBP_except }">
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span> <span class="label">DBP</span>
</div> <span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
<div class="row-item yellow" :class="{ 'alarm': patientInfo.HR < 50 || patientInfo.HR > 80 }"> </div>
<span class="label">HR</span> <div class="row-item yellow" :class="{ 'alarm': patientInfo.HR_except }">
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span> <span class="label">HR</span>
</div> <span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
<div class="row-item yellow"> </div>
<span class="label">TEMP</span> <div class="row-item yellow">
<span class="value">{{ patientInfo.TEMP }}</span> <span class="label">TEMP</span>
</div> <span class="value">{{ patientInfo.TEMP }}</span>
</div> </div>
<div class="center-box"> </div>
<img src="@/assets/imgs/main_body_intact.png"> <div class="center-box">
</div> <img src="@/assets/imgs/main_body_intact.png">
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue' import {onMounted, onUnmounted, ref} from 'vue'
import type { RemoteItem, PatientInfoItem, RemoteLogItem } from '@/utils/public-interface' import {useRemoteWsStore} from "@/stores/remote-ws-store";
import { useRemoteStore } from '@/stores/remote-info-store'
import { dateFormater } from '@/utils/date-util'
import { setRemoteLog } from '@/static-data/core'
interface Props { const props = withDefaults(defineProps<{ index: number }>(), {
index: number index: () => 0
}
const props = withDefaults(defineProps<Props>(), {
index: () => 0
}) })
const emit = defineEmits(['addLogAfter']) const emit = defineEmits(['addLogAfter'])
const remoteWsStore = useRemoteWsStore();
const remoteStore = useRemoteStore() const remoteTask = ref(remoteWsStore.remoteTasks[props.index]);
const remoteTask = remoteStore.remoteTasks[props.index] const patientInfo = ref({} as any)
let timer = 0
const patientInfo = ref({} as PatientInfoItem)
onMounted(() => { onMounted(() => {
clearInterval(timer) // 连接成功执行查询
// 连接成功执行查询 if (remoteTask.value.isRemote) {
if (remoteTask.isRemote) { initData()
timer = setInterval(() => { }
initData()
}, 2000)
}
}) })
onBeforeUnmount(() => { onUnmounted(() => {
// 页面卸载后清楚定时器 remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date);
clearInterval(timer)
}) })
function initData() { function initData() {
remoteTask.dataAlarm = false subscribeVital();
const obj = { }
name: remoteTask.patientName,
code: '', function subscribeVital() {
time: new Date(), remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, (res: any) => {
state: false, const data = JSON.parse(res.data);
BIS: Number((Math.random() * 100).toFixed(2)), if (data.vitalSignsList && data.vitalSignsList.length > 0) {
SBP: Number((Math.random() * 100).toFixed(2)), Object.assign(patientInfo.value, data.vitalSignsList[0]);
SPO2: Number((Math.random() * 100).toFixed(2)), patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
DBP: Number((Math.random() * 100).toFixed(2)), patientInfo.value.DBP_except || patientInfo.value.HR_except);
HR: Number((Math.random() * 100).toFixed(2)), setLog(patientInfo.value, props.index)
TEMP: Number((Math.random() * 100).toFixed(2)) emit('addLogAfter', props.index)
} }
setRemoteLog(obj, (title: string, size: string) => { })
obj.state = true }
remoteTask.dataAlarm = true
remoteStore.setRemoteLog({ function setLog(data: any, index: number) {
time: new Date(), remoteWsStore.exceptionType.forEach((item: any) => {
title, if (data[item]) {
state: '异常' const msg: any = remoteWsStore.exceptionMsg[item];
}, props.index) remoteWsStore.setRemoteLog({
state: msg,
taskName: remoteTask.value.taskName,
time: new Date(),
type: "exception"
}, index);
}
}) })
Object.assign(patientInfo.value, obj)
emit('addLogAfter', props.index)
} }
</script> </script>

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

@ -1,190 +1,195 @@
<template> <template>
<div class="remote-part"> <div class="remote-part">
<div class="title"> <div class="title">
<span>{{ remoteItem?.title || '远程控制' }}</span> <span>{{ remoteItem?.taskName || '远程控制' }}</span>
<el-button v-if="remoteItem" class="break-btn" @click="breakRemote">断开连接</el-button> <el-button v-if="remoteItem?.taskName" class="break-btn" @click="breakRemote">断开连接</el-button>
</div>
<!-- 小分辨率 -->
<div v-if="mediaMini800" class="content mini" :class="{'is-total': remoteItem?.isRemote}">
<div class="left-box">
<div class="info-box">
<div class="row-item">
<span class="label">病人名称</span>
<span class="input-value">{{ patientInfo.name }}</span>
</div>
<div class="row-item">
<span class="label">住院号</span>
<span class="input-value">{{ patientInfo.code }}</span>
</div>
<div class="row-item">
<span class="label">手术时间</span>
<span class="input-value">{{ patientInfo.time && dateFormater('yyyy-MM-dd HH:mm:ss', patientInfo.time) }}</span>
</div>
<div class="row-item">
<span class="label">手术状态</span>
<span class="tag-value" :class="{'normal': !patientInfo.state}">正常</span>
<span class="tag-value" :class="{'alarm': patientInfo.state}">异常</span>
</div>
</div>
<div class="row-item" :class="{'alarm': patientInfo.BIS < 40 || patientInfo.BIS > 60}">
<span class="label">BIS</span>
<span class="value">{{ patientInfo.BIS }}</span>
</div>
<div class="row-item" :class="{'alarm': patientInfo.SBP < 90 || patientInfo.SBP > 120}">
<span class="label">SBP</span>
<span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item">
<span class="label">SPO2</span>
<span class="value">{{ patientInfo.SPO2 }}</span>
</div>
<div class="row-item yellow" :class="{'alarm': patientInfo.DBP < 60 || patientInfo.DBP > 90}">
<span class="label">DBP</span>
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item yellow" :class="{'alarm': patientInfo.HR < 50 || patientInfo.HR > 80}">
<span class="label">HR</span>
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
</div>
<div class="row-item yellow">
<span class="label">TEMP</span>
<span class="value">{{ patientInfo.TEMP }}</span>
</div>
</div>
<div class="center-box">
<img src="@/assets/imgs/main_body_intact.png">
</div>
</div>
<div v-else class="content" :class="{'is-total': remoteItem?.isRemote}">
<div class="left-box">
<div class="info-box">
<div class="row-item">
<span class="label">病人名称</span>
<span class="input-value">{{ patientInfo.name }}</span>
</div>
<div class="row-item">
<span class="label">住院号</span>
<span class="input-value">{{ patientInfo.code }}</span>
</div>
</div>
<div class="row-item" :class="{'alarm': patientInfo.BIS < 40 || patientInfo.BIS > 60}">
<span class="label">BIS</span>
<span class="value">{{ patientInfo.BIS }}</span>
</div>
<div class="row-item" :class="{'alarm': patientInfo.SBP < 90 || patientInfo.SBP > 120}">
<span class="label">SBP</span>
<span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item">
<span class="label">SPO2</span>
<span class="value">{{ patientInfo.SPO2 }}</span>
</div>
</div>
<div class="center-box">
<img src="@/assets/imgs/main_body_intact.png">
</div>
<div class="right-box">
<div class="info-box">
<div class="row-item">
<span class="label">手术时间</span>
<span class="input-value">{{ patientInfo.time && dateFormater('yyyy-MM-dd HH:mm:ss', patientInfo.time) }}</span>
</div>
<div class="row-item">
<span class="label">手术状态</span>
<span class="tag-value" :class="{'normal': !patientInfo.state}">正常</span>
<span class="tag-value" :class="{'alarm': patientInfo.state}">异常</span>
</div>
</div>
<div class="row-item" :class="{'alarm': patientInfo.DBP < 60 || patientInfo.DBP > 90}">
<span class="label">DBP</span>
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item" :class="{'alarm': patientInfo.HR < 50 || patientInfo.HR > 80}">
<span class="label">HR</span>
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
</div>
<div class="row-item">
<span class="label">TEMP</span>
<span class="value">{{ patientInfo.TEMP }}</span>
</div>
</div>
</div>
</div> </div>
<!-- 小分辨率 -->
<div v-if="mediaMini800" class="content mini" :class="{'is-total': remoteItem?.isRemote}">
<div class="left-box">
<div class="info-box">
<div class="row-item">
<span class="label">病人名称</span>
<span class="input-value">{{ remoteItem.patient }}</span>
</div>
<div class="row-item">
<span class="label">住院号</span>
<span class="input-value">{{ remoteItem.patientId }}</span>
</div>
<div class="row-item">
<span class="label">手术时间</span>
<span class="input-value">{{
remoteItem.date
}}</span>
</div>
<div class="row-item">
<span class="label">手术状态</span>
<span class="tag-value" :class="{'normal': !patientInfo.state}">正常</span>
<span class="tag-value" :class="{'alarm': patientInfo.state}">异常</span>
</div>
</div>
<div class="row-item" :class="{'alarm': patientInfo.BIS_except}">
<span class="label">BIS</span>
<span class="value">{{ patientInfo.BIS }}</span>
</div>
<div class="row-item" :class="{'alarm': patientInfo.SBP_except}">
<span class="label">SBP</span>
<span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item">
<span class="label">SPO2</span>
<span class="value">{{ patientInfo.SPO2 }}</span>
</div>
<div class="row-item yellow" :class="{'alarm': patientInfo.DBP_except}">
<span class="label">DBP</span>
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item yellow" :class="{'alarm': patientInfo.HR_except}">
<span class="label">HR</span>
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
</div>
<div class="row-item yellow">
<span class="label">TEMP</span>
<span class="value">{{ patientInfo.TEMP }}</span>
</div>
</div>
<div class="center-box">
<img src="@/assets/imgs/main_body_intact.png">
</div>
</div>
<div v-else class="content" :class="{'is-total': remoteItem?.isRemote}">
<div class="left-box">
<div class="info-box">
<div class="row-item">
<span class="label">病人名称</span>
<span class="input-value">{{ remoteItem.patient }}</span>
</div>
<div class="row-item">
<span class="label">住院号</span>
<span class="input-value">{{ remoteItem.patientId }}</span>
</div>
</div>
<div class="row-item" :class="{'alarm': patientInfo.BIS_except}">
<span class="label">BIS</span>
<span class="value">{{ patientInfo.BIS }}</span>
</div>
<div class="row-item" :class="{'alarm': patientInfo.SBP_except}">
<span class="label">SBP</span>
<span class="value">{{ patientInfo.SBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item">
<span class="label">SPO2</span>
<span class="value">{{ patientInfo.SPO2 }}</span>
</div>
</div>
<div class="center-box">
<img src="@/assets/imgs/main_body_intact.png">
</div>
<div class="right-box">
<div class="info-box">
<div class="row-item">
<span class="label">手术时间</span>
<span class="input-value">{{
remoteItem.date
}}</span>
</div>
<div class="row-item">
<span class="label">手术状态</span>
<span class="tag-value" :class="{'normal': !patientInfo.state}">正常</span>
<span class="tag-value" :class="{'alarm': patientInfo.state}">异常</span>
</div>
</div>
<div class="row-item" :class="{'alarm': patientInfo.DBP_except}">
<span class="label">DBP</span>
<span class="value">{{ patientInfo.DBP }}<span class="unit">mmHg</span></span>
</div>
<div class="row-item" :class="{'alarm': patientInfo.HR_except}">
<span class="label">HR</span>
<span class="value">{{ patientInfo.HR }}<span class="unit">次/分</span></span>
</div>
<div class="row-item">
<span class="label">TEMP</span>
<span class="value">{{ patientInfo.TEMP }}</span>
</div>
</div>
</div>
</div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue' import {onUnmounted, ref} from 'vue'
import { dateFormater } from '@/utils/date-util' import {useRemoteWsStore} from "@/stores/remote-ws-store";
import { useRemoteStore } from '@/stores/remote-info-store';
import type { RemoteItem, PatientInfoItem } from '@/utils/public-interface'
import { setRemoteLog } from '@/static-data/core'
const emit = defineEmits(['addLogAfter', 'breakRemote']) const emit = defineEmits(['addLogAfter', 'breakRemote'])
const remoteStore = useRemoteStore()
let timer = 0
const mediaMini800 = ref(false) const mediaMini800 = ref(false)
const remoteItem = ref<RemoteItem>({} as RemoteItem) const remoteItem = ref({} as any)
const patientInfo = ref({} as PatientInfoItem) const patientInfo = ref({} as any)
const remoteWsStore = useRemoteWsStore()
initData(remoteStore.currentRemote)
defineExpose({ defineExpose({
initData initData, showData
})
onBeforeUnmount(() => {
// 页面卸载后清楚定时器
clearInterval(timer)
})
window.addEventListener('resize', () => {
mediaMini800.value = Boolean(window.innerWidth < 801)
}); });
function initData(e?: RemoteItem) { window.addEventListener('resize', () => {
const obj = e || {} as RemoteItem mediaMini800.value = Boolean(window.innerWidth < 801)
remoteItem.value = obj });
patientInfo.value.state = obj.dataAlarm
patientInfo.value.name = obj.patientName || '' onUnmounted(() => {
patientInfo.value.code = 'XXXXXX' remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date);
clearInterval(timer) })
if(!patientInfo.value.name) return
timer = setInterval(() => { function showData(i: number) {
getData() const lastTaskIndex = remoteWsStore.currentTaskIndex;
}, 2000) const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex];
if (lastTask) {
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date);
}
remoteWsStore.currentTaskIndex = i
remoteItem.value = remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]
getData()
}
function initData() {
remoteItem.value = remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex]
remoteWsStore.createConnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
getData()
} }
function getData() { function getData() {
remoteItem.value.dataAlarm = false remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date);
const obj = { remoteWsStore.subscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, (res: any) => {
state: false, const data = JSON.parse(res.data);
BIS: Math.ceil(Math.random() * 100), if (data.vitalSignsList && data.vitalSignsList.length > 0) {
SBP: Math.ceil(Math.random() * 100), Object.assign(patientInfo.value, data.vitalSignsList[0]);
SPO2: Math.ceil(Math.random() * 100), patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
DBP: Math.ceil(Math.random() * 100), patientInfo.value.DBP_except || patientInfo.value.HR_except);
HR: Math.ceil(Math.random() * 100), setLog(patientInfo.value)
TEMP: Math.ceil(Math.random() * 100), emit('addLogAfter')
} as PatientInfoItem }
patientInfo.value.time = new Date() })
setRemoteLog(obj, (title: string, size: string) => { }
obj.state = true
remoteItem.value.dataAlarm = true function setLog(data: any) {
remoteStore.setRemoteLog({ remoteWsStore.exceptionType.forEach((item: any) => {
time: new Date(), if (data[item]) {
title, const msg: any = remoteWsStore.exceptionMsg[item];
state: '异常' remoteWsStore.setRemoteLog({
}, remoteItem.value.index) state: msg,
taskName: remoteItem.value.taskName,
time: new Date(),
type: "exception"
}, remoteWsStore.currentTaskIndex);
}
}) })
remoteStore.setRemoteDataAlarm(remoteItem.value.dataAlarm, remoteItem.value.index)
remoteStore.$patch({currentRemote: remoteStore.remoteTasks[remoteItem.value.index]})
Object.assign(patientInfo.value, obj)
emit('addLogAfter')
} }
const breakRemote = () => { const breakRemote = () => {
remoteItem.value.isRemote = false remoteWsStore.disconnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date)
emit('breakRemote', remoteItem.value) remoteWsStore.resetRemoteTask(remoteWsStore.currentTaskIndex)
if (remoteWsStore.getActiveRemoteTask()) {
showData(remoteWsStore.getActiveRemoteTask())
}
emit('breakRemote')
} }
</script> </script>

1443
src/views/remote-manage/remote-control.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -1,11 +1,5 @@
<template> <template>
<div class="remote-manage-page"> <div class="remote-manage-page">
<button @click="getSurgeryData">123</button>
<button @click="disconnectSurgeryData">断开</button>
<button @click="sendMsg">发送消息</button>
<button @click="closeChat">关闭消息</button>
<button @click="addMedicine">给药</button>
<button @click="closeAddMedicineWS">关闭给药</button>
<div class="header-box"> <div class="header-box">
<div class="thumbnail" @click="viewThumbnail"> <div class="thumbnail" @click="viewThumbnail">
<el-icon> <el-icon>
@ -14,9 +8,9 @@
<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.patientName || item.patientCode, 'alarm': item.dataAlarm }" :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
@click="editTask(item, index)" @dblclick="toRemoteControl(item, index)"> @click="editTask(item)" @dblclick="toRemoteControl(item)">
<span>{{ item.title || ('新建任务' + (index + 1)) }}</span> <span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
</div> </div>
</div> </div>
<div class="content-box"> <div class="content-box">
@ -32,65 +26,26 @@
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import {ref} from 'vue' import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router' 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 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 {Session} from "@/utils/storage"; import {useRemoteWsStore} from "@/stores/remote-ws-store";
const router = useRouter() const router = useRouter()
const remoteStore = useRemoteStore()
const remotePartRef = ref() const remotePartRef = ref()
const messagePartRef = ref() const messagePartRef = ref()
const remoteDialogRef = ref() const remoteDialogRef = ref()
const remoteTask = ref([] as Array<RemoteItem>) const remoteTask = ref([] as Array<any>)
const remoteWsStore = useRemoteWsStore();
initRemoteTask() onMounted(() => {
initRemoteTask()
function resetRemoteTaskItem(e: RemoteItem) { })
Object.assign(remoteTask.value[e.index], {
isRemote: false,
dataAlarm: false,
title: '',
serverUser: '',
patientName: '',
patientCode: '',
index: e.index,
})
}
function initRemoteTask() { function initRemoteTask() {
remoteTask.value = remoteStore.remoteTasks remoteTask.value = remoteWsStore.initRemoteTask()
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 = () => { const viewThumbnail = () => {
@ -99,201 +54,41 @@ const viewThumbnail = () => {
}) })
} }
// 打开任务连接弹窗 // 打开任务连接弹窗
const editTask = (item: RemoteItem, index: number) => { const editTask = (item: any) => {
item.index = index
// 如果当前任务是已连接状态则直接渲染content 否则打开弹窗 // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
if (item.isRemote) { if (item.isRemote) {
confirmRemote(item) remotePartRef.value.showData(item.index)
} else { } else {
remoteDialogRef.value.open(item) remoteDialogRef.value.open(item.index)
} }
} }
// 跳转到远程控制 // 跳转到远程控制
const toRemoteControl = (item: RemoteItem, index: number) => { const toRemoteControl = (item: any) => {
// 如果当前任务是已连接状态则跳转，否则打开弹窗 // 如果当前任务是已连接状态则跳转，否则打开弹窗
if (item.isRemote) { if (item.isRemote) {
router.push('/remote-manage/remote-control') router.push('/remote-manage/remote-control')
} else { } else {
editTask(item, index) remoteDialogRef.value.open(item.index)
} }
} }
// 连接成功 // 连接成功
const confirmRemote = (e: RemoteItem) => { const confirmRemote = () => {
messagePartRef.value.setData({ messagePartRef.value.scrollToBottom()
time: new Date(), // 状态设置为可连接
title: e.title, remotePartRef.value.initData()
state: '连接成功'
}, e.index)
remoteTask.value[e.index] = e // 状态设置为可连接
remotePartRef.value.initData(e)
console.log(e);
getSurgeryData();
} }
// 连接失败 // 连接失败
const errorRemote = (e: RemoteItem) => { const errorRemote = () => {
messagePartRef.value.setData({ messagePartRef.value.scrollToBottom()
time: new Date(),
title: e.title,
state: '连接失败'
}, e.index)
} }
// 断开连接 // 断开连接
const breakRemote = (e: RemoteItem) => { const breakRemote = () => {
resetRemoteTaskItem(e) messagePartRef.value.scrollToBottom()
remotePartRef.value.initData()
messagePartRef.value.setData({
time: new Date(),
title: e.title,
state: '断开连接'
}, e.index)
// 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());
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 chatws = new WebSocket("ws://localhost:5173/socket.io/admin/rax/chatRoom?token=" + Session.getToken());
function sendMsg() {
const params = {
patientName: "1111111",
idNum: "123567890",
date: "20230505",
msg: "测试消息"
}
chatws.send(JSON.stringify(params))
}
chatws.onmessage = function (e) {
console.log(e)
}
function closeChat() {
chatws.close()
}
const addMedicineWS = new WebSocket("ws://localhost:5173/socket.io/admin/rax/addMedicine?token=" + Session.getToken())
function addMedicine() {
const params = {
patientName: "1111111",
idNum: "123567890",
date: "20230505",
flag: "2",
medicine: "丙泊酚",
value: "1"
}
addMedicineWS.send(JSON.stringify(params))
}
addMedicineWS.onmessage = function (e) {
console.log(e)
}
function closeAddMedicineWS() {
addMedicineWS.close()
}
/*const surgeryClient = new Client({
brokerURL: 'ws://localhost:5173/socket.io/admin/rax/SurgeryData',
connectHeaders: {
token: Session.get('token')
},
reconnectDelay: 5000,
heartbeatIncoming: 60000,
heartbeatOutgoing: 60000
})
surgeryClient.activate()
surgeryClient.onConnect = (data: any) => {
console.log("connect", data);
}
surgeryClient.onWebSocketError = (error) => {
console.log('Error with websocket', error)
};
surgeryClient.onStompError = (frame) => {
console.log('Broker reported error: ' + frame.headers['message'])
console.log('Additional details: ' + frame.body)
};
function getSurgeryData(username: string, db: string) {
console.log(username, db);
surgeryClient.publish({
destination: "/front/getSurgeryData",
headers: {
token: Session.get('token')
},
body: JSON.stringify({status: "start", db})
});
const account = "admin";
surgeryClient.subscribe('/topic/user/' + account + ":" + db + '/surgeryData', (data: any) => {
console.log(data);
})
}*/
/*function disconnectSurgeryData(username: string, db: string) {
const account = "admin";
surgeryClient.unsubscribe("/topic/user/" + account + ":" + db + "/surgeryData");
}
const chatClient = new Client({
brokerURL: 'ws://localhost:5173/socket.io/admin/rax/chat',
connectHeaders: {
token: Session.get('token')
},
reconnectDelay: 5000,
heartbeatIncoming: 60000,
heartbeatOutgoing: 60000
})
chatClient.activate()
const patientName = '111'
const idNum = '111'
const date = '20230505'
function sendChatMessage() {
const message = {
patientName: patientName,
idNum: idNum,
date: date,
msg: '测试消息'
}
chatClient.publish({
destination: '/front/sendMessage',
headers: {
token: Session.get('token')
},
body: JSON.stringify(message)
})
}*/
/*chatClient.onConnect = () => {
chatClient.subscribe('/topic/user/' + patientName + idNum + date + '/chatroomMessage', (data: any) => {
console.log(data)
})
}*/
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>

82
src/views/remote-manage/remote-thumbnail.vue
View File

@ -1,55 +1,53 @@
<template> <template>
<el-scrollbar style="width: 100%;height: 100%;"> <el-scrollbar style="width: 100%;height: 100%;">
<div class="remote-thumbnail-page"> <div class="remote-thumbnail-page">
<div class="remote-box row1"> <div class="remote-box row1">
<div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)"> <div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)">
<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index" @addLogAfter="addLogAfter"></RemoteItemPart> <RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index"
</div> @addLogAfter="addLogAfter"></RemoteItemPart>
</div> </div>
<div class="remote-box row2"> </div>
<div class="left-box"> <div class="remote-box row2">
<div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)"> <div class="left-box">
<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index" @addLogAfter="addLogAfter"></RemoteItemPart> <div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)">
</div> <RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index"
</div> @addLogAfter="addLogAfter"></RemoteItemPart>
<div class="right-box"> </div>
<div class="message-title">异常信息</div> </div>
<div class="message-item" v-for="item in remoteTask" :key="'message-item' + item"> <div class="right-box">
<MessageItemPart ref="messageItemPartRef" :logs="item.log" :index="item.index"></MessageItemPart> <div class="message-title">异常信息</div>
</div> <div class="message-item" v-for="item in remoteTask" :key="'message-item' + item">
</div> <MessageItemPart ref="messageItemPartRef" :index="item.index"></MessageItemPart>
</div> </div>
</div> </div>
</el-scrollbar> </div>
</div>
</el-scrollbar>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {onMounted, ref} from 'vue';
import { useRoute, useRouter } from 'vue-router' import {useRoute, useRouter} from 'vue-router';
import { useRemoteStore } from '@/stores/remote-info-store' import RemoteItemPart from './part/remote-item-part.vue';
import type { RemoteItem } from '@/utils/public-interface' import MessageItemPart from './part/message-item-part.vue';
import RemoteItemPart from './part/remote-item-part.vue' import {useRemoteWsStore} from "@/stores/remote-ws-store";
import MessageItemPart from './part/message-item-part.vue'
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const messageItemPartRef = ref();
const remoteTask = ref([] as any);
const remoteWsStore = useRemoteWsStore();
const messageItemPartRef = ref() onMounted(() => {
const remoteTask = ref([] as Array<RemoteItem>) console.log("remoteThumbnail", remoteWsStore.remoteTasks)
remoteTask.value = remoteWsStore.remoteTasks;
remoteTask.value = useRemoteStore().getRemoteTasks()
// 路由初始化后执行
router.isReady().then(() => {
console.log(route)
}) })
const openRemote = (params: RemoteItem) => { const openRemote = (params: any) => {
useRemoteStore().setCurrentRemote(params) router.push('/remote-manage/remote-manage')
router.push('/remote-manage/remote-manage')
} }
const addLogAfter = (index: number) => { const addLogAfter = (index: number) => {
messageItemPartRef.value[index].scrollToBottom() messageItemPartRef.value[index].scrollToBottom()
} }
</script> </script>