mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-24 04:54:58 +08:00
代码提交，远程管理消息通知待处理
This commit is contained in:
gaofy
parent
d3e1d702ef
commit
cfaca9d1f9
|
|
@ -4,6 +4,7 @@
|
|||
--el-font-size-base: 16px;
|
||||
}
|
||||
$main-color: #006080;
|
||||
$red: #ea3323;
|
||||
$border-color: #EBEEF5;
|
||||
$border1-color: #E4E7ED;
|
||||
$border2-color: #DCDFE6;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import type { RemoteItem } from '@/utils/public-interface'
|
||||
import type { RemoteItem, RemoteLogItem } from '@/utils/public-interface'
|
||||
|
||||
export const useRemoteStore = defineStore('remote', {
|
||||
state: () => {
|
||||
return {
|
||||
remoteTasks: [] as Array<RemoteItem>,
|
||||
currentRemote: {
|
||||
|
||||
} as any
|
||||
currentRemote: {} as RemoteItem
|
||||
}
|
||||
},
|
||||
// 也可以这样定义
|
||||
|
|
@ -19,11 +17,27 @@ export const useRemoteStore = defineStore('remote', {
|
|||
setRemoteTasks(e: Array<RemoteItem>) {
|
||||
this.remoteTasks = e
|
||||
},
|
||||
setRemoteLog(obj: RemoteLogItem, index: number) {
|
||||
if(this.remoteTasks[index]) {
|
||||
const len = this.remoteTasks[index].log.length
|
||||
const maxLen = 20
|
||||
if(len > maxLen) this.remoteTasks[index].log.splice(0, len - maxLen)
|
||||
this.remoteTasks[index].log.push(obj)
|
||||
}
|
||||
},
|
||||
getCurrentRemote() {
|
||||
return this.currentRemote
|
||||
},
|
||||
setCurrentRemote(e: object) {
|
||||
setCurrentRemote(e: RemoteItem) {
|
||||
this.currentRemote = e
|
||||
},
|
||||
setCurrentRemoteLog(obj: RemoteLogItem) {
|
||||
if(this.currentRemote.log) {
|
||||
const len = this.currentRemote.log.length
|
||||
const maxLen = 20
|
||||
if(len > maxLen) this.currentRemote.log.splice(0, len - maxLen)
|
||||
this.currentRemote.log.push(obj)
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -3,16 +3,6 @@ export interface MenuItem {
|
|||
path: string
|
||||
}
|
||||
|
||||
export interface RemoteItem {
|
||||
isRemote: boolean
|
||||
dataAlarm: boolean
|
||||
title: string
|
||||
serverUser: string
|
||||
patientName: string
|
||||
patientCode: string
|
||||
index: number
|
||||
}
|
||||
|
||||
export interface MenuListItem {
|
||||
id: string | number
|
||||
menuName: string
|
||||
|
|
@ -22,3 +12,31 @@ export interface MenuListItem {
|
|||
type: '菜单' | '按钮'
|
||||
children?: Array<MenuListItem>
|
||||
}
|
||||
|
||||
export interface RemoteLogItem {
|
||||
time: Date
|
||||
title: string
|
||||
state: string
|
||||
}
|
||||
export interface RemoteItem {
|
||||
isRemote: boolean // 服务器连接状态
|
||||
dataAlarm: boolean // 是否异常
|
||||
title: string // 连接名称
|
||||
serverUser: string // 服务器用户名
|
||||
patientName: string // 病人姓名
|
||||
patientCode: string // 病人身份证号
|
||||
index: number
|
||||
log: Array<RemoteLogItem>
|
||||
}
|
||||
export interface PatientInfoItem {
|
||||
name: string // 病人名称
|
||||
code: string // 住院号
|
||||
time: Date // 手术时间
|
||||
state: boolean // 手术状态 false 正常 true 异常
|
||||
BIS: number
|
||||
SBP: number
|
||||
SPO2: number
|
||||
DBP: number
|
||||
HR: number
|
||||
TEMP: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="message-item-part">
|
||||
<div class="tag-index">{{ index + 1 }}</div>
|
||||
<ul ref="listRef">
|
||||
<li v-for="(item, index) in logs" :key="index">
|
||||
<span>{{ dateFormater('HH:mm:ss', item.time) }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.state }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import type { RemoteLogItem, RemoteItem } from '@/utils/public-interface'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store'
|
||||
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 listRef = ref()
|
||||
const remoteTasks: any = ref([] as Array<RemoteItem>)
|
||||
|
||||
defineExpose({
|
||||
scrollToBottom,
|
||||
})
|
||||
|
||||
remoteTasks.value = useRemoteStore().remoteTasks
|
||||
// 监听 useRemoteStore() 值变化
|
||||
// useRemoteStore().$subscribe((mutation: any, state: any) => {
|
||||
// console.log(mutation, state)
|
||||
// })
|
||||
|
||||
function scrollToBottom() {
|
||||
listRef.value.scrollTo({
|
||||
top: listRef.value.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
$size: 20px;
|
||||
|
||||
.message-item-part {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 2px 2px $size*0.2 0 rgba(black, .2);
|
||||
.tag-index {
|
||||
position: absolute;
|
||||
width: $size*1.5;
|
||||
height: $size*1.5;
|
||||
top: $size*0.2;
|
||||
right: $size*0.5;
|
||||
font-size: $size*0.7;
|
||||
line-height: $size*1.5;
|
||||
text-align: center;
|
||||
color: white;
|
||||
background-color: $red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
padding: $size*0.2;
|
||||
line-height: 1;
|
||||
font-size: $size*0.6;
|
||||
color: red;
|
||||
|
||||
span~span {
|
||||
margin-left: $size*0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<div class="message-item">
|
||||
|
||||
<ul>
|
||||
<li v-for="(item, index) in activities" :key="num + '-' + index">
|
||||
<span>{{ item.time }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.state }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
|
||||
interface ActivitiesItem {
|
||||
time: Date
|
||||
title: string
|
||||
state: string
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
num: String
|
||||
})
|
||||
|
||||
const activities: any = ref([] as Array<ActivitiesItem>)
|
||||
|
||||
defineExpose({
|
||||
setData,
|
||||
})
|
||||
|
||||
function setData(e: ActivitiesItem) {
|
||||
activities.value.push(e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.message-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
margin-top: 40px;
|
||||
padding: 0 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-timeline-item) {
|
||||
color: $main-color;
|
||||
|
||||
.el-timeline-item__content,
|
||||
.el-timeline-item__timestamp {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
color: red;
|
||||
.el-timeline-item__node {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -1,79 +1,82 @@
|
|||
<template>
|
||||
<div class="message-part">
|
||||
<div class="title">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
|
||||
:class="{ 'alarm': item.state === '连接失败' }">
|
||||
{{ item.title + ' ' + item.state }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="message-part">
|
||||
<div class="title">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item, index) in currentRemote.log || []" :key="index"
|
||||
:timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
|
||||
:class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }">
|
||||
{{ item.title + ' ' + item.state }}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import type { RemoteLogItem, RemoteItem } from '@/utils/public-interface'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
|
||||
interface ActivitiesItem {
|
||||
time: Date
|
||||
title: string
|
||||
state: string
|
||||
}
|
||||
|
||||
const activities: any = ref([] as Array<ActivitiesItem>)
|
||||
|
||||
defineExpose({
|
||||
setData,
|
||||
setData,
|
||||
})
|
||||
|
||||
function setData(e: ActivitiesItem) {
|
||||
activities.value.push(e)
|
||||
const remoteStore = useRemoteStore()
|
||||
const currentRemote = ref({} as RemoteItem)
|
||||
currentRemote.value = useRemoteStore().currentRemote
|
||||
|
||||
function setData(e: RemoteLogItem, index: number) {
|
||||
remoteStore.setRemoteLog(e, index)
|
||||
remoteStore.setCurrentRemoteLog(e)
|
||||
remoteStore.$patch({currentRemote: remoteStore.remoteTasks[index]})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.message-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
margin-top: 40px;
|
||||
padding: 0 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 100px);
|
||||
margin-top: 40px;
|
||||
padding: 0 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
:deep(.el-timeline-item) {
|
||||
color: $main-color;
|
||||
|
||||
:deep(.el-timeline-item) {
|
||||
color: $main-color;
|
||||
.el-timeline-item__content,
|
||||
.el-timeline-item__timestamp {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.el-timeline-item__content,
|
||||
.el-timeline-item__timestamp {
|
||||
color: inherit;
|
||||
}
|
||||
&.alarm {
|
||||
color: red;
|
||||
|
||||
&.alarm {
|
||||
color: red;
|
||||
.el-timeline-item__node {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
.el-timeline-item__node {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,371 @@
|
|||
<template>
|
||||
<div class="remote-item-part">
|
||||
<div class="title">
|
||||
<span>{{ remoteTask.title || '远程控制' }}</span>
|
||||
</div>
|
||||
<div class="content mini" :class="{ 'is-total': remoteTask.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>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
|
||||
import type { RemoteItem, PatientInfoItem, RemoteLogItem } from '@/utils/public-interface'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
import { getDataAlarmState } from '@/static-data/core'
|
||||
|
||||
interface Props {
|
||||
remoteTask: RemoteItem
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
remoteTask: () => ({} as RemoteItem)
|
||||
})
|
||||
|
||||
const emit = defineEmits(['addLogAfter'])
|
||||
|
||||
let timer = 0
|
||||
const patientInfo = ref({} as PatientInfoItem)
|
||||
|
||||
onMounted(() => {
|
||||
clearInterval(timer)
|
||||
// 连接成功执行查询
|
||||
if (props.remoteTask.isRemote) {
|
||||
timer = setInterval(() => {
|
||||
initData()
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
// 页面卸载后清楚定时器
|
||||
console.log('~~~~~~~~~~~~~~~')
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
function initData() {
|
||||
const obj = {
|
||||
name: props.remoteTask.patientName,
|
||||
code: '',
|
||||
time: new Date(),
|
||||
state: false,
|
||||
BIS: Number((Math.random() * 100).toFixed(2)),
|
||||
SBP: Number((Math.random() * 100).toFixed(2)),
|
||||
SPO2: Number((Math.random() * 100).toFixed(2)),
|
||||
DBP: Number((Math.random() * 100).toFixed(2)),
|
||||
HR: Number((Math.random() * 100).toFixed(2)),
|
||||
TEMP: Number((Math.random() * 100).toFixed(2))
|
||||
}
|
||||
const alarms = {
|
||||
BIS: getDataAlarmState(obj.BIS, 'BIS'),
|
||||
SBP: getDataAlarmState(obj.SBP, 'SBP'),
|
||||
SPO2: getDataAlarmState(obj.SPO2, 'SPO2'),
|
||||
DBP: getDataAlarmState(obj.DBP, 'DBP'),
|
||||
HR: getDataAlarmState(obj.HR, 'HR'),
|
||||
TEMP: getDataAlarmState(obj.TEMP, 'TEMP')
|
||||
}
|
||||
|
||||
if (alarms.BIS) addLog('脑电双频指数')
|
||||
if (alarms.SBP) addLog('收缩率')
|
||||
if (alarms.SPO2) addLog('氧饱和度')
|
||||
if (alarms.DBP) addLog('舒张压')
|
||||
if (alarms.HR) addLog('心率')
|
||||
if (alarms.TEMP) addLog('体温')
|
||||
|
||||
patientInfo.value = obj
|
||||
|
||||
function addLog(title: string) {
|
||||
obj.state = true
|
||||
useRemoteStore().setRemoteLog({
|
||||
time: new Date(),
|
||||
title,
|
||||
state: '异常'
|
||||
}, props.remoteTask.index)
|
||||
emit('addLogAfter', props.remoteTask.index)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
$size: 20px;
|
||||
|
||||
.remote-item-part {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
transition: all .6s;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background-color: rgba(black, .1);
|
||||
transition: all .6s;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
font-size: $size*0.7;
|
||||
text-align: center;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - #{$size});
|
||||
padding: $size*0.5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.common-box {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
@extend .common-box;
|
||||
|
||||
.label {
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.center-box {
|
||||
@extend .common-box;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
@extend .common-box;
|
||||
|
||||
.label {
|
||||
background: #f8b300;
|
||||
}
|
||||
}
|
||||
|
||||
.row-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.label {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
color: white;
|
||||
font-size: $size*0.6;
|
||||
line-height: $size;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box,
|
||||
.row-item .value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-total {
|
||||
|
||||
.info-box,
|
||||
.row-item .value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: calc(50% - $size*0.5);
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 50%;
|
||||
height: $size;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
color: $main-color;
|
||||
border-color: $main-color;
|
||||
font-size: $size*0.7;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
|
||||
.unit {
|
||||
font-size: $size*0.6;
|
||||
font-family: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box .value {
|
||||
color: #f8b300;
|
||||
border-color: #f8b300;
|
||||
}
|
||||
|
||||
.row-item.alarm {
|
||||
.label {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: red;
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: 100%;
|
||||
|
||||
.row-item {
|
||||
padding: $size*0.5 0;
|
||||
height: $size;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: $size*3;
|
||||
height: $size;
|
||||
background: transparent;
|
||||
color: $main-color;
|
||||
font-size: $size*0.6;
|
||||
line-height: $size;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
width: 100%;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
font-size: $size*0.6;
|
||||
color: $main-color;
|
||||
border-bottom: 1px solid $border2-color;
|
||||
}
|
||||
|
||||
.tag-value {
|
||||
margin-left: $size*0.5;
|
||||
padding: 0 $size*0.5;
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
font-size: $size*0.7;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
background: $border2-color;
|
||||
border-radius: 8px;
|
||||
|
||||
&.normal {
|
||||
background: $main-color;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mini {
|
||||
padding: $size;
|
||||
|
||||
.left-box {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.is-total {
|
||||
.left-box {
|
||||
.info-box {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.row-item.yellow {
|
||||
.label {
|
||||
background: #f8b300;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #f8b300;
|
||||
border-color: #f8b300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -113,26 +113,14 @@
|
|||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store';
|
||||
import type { RemoteItem } from '@/utils/public-interface'
|
||||
|
||||
interface PatientInfoItem {
|
||||
name: string // 病人名称
|
||||
code: string // 住院号
|
||||
time: Date // 手术时间
|
||||
state: boolean // 手术状态 false 正常 true 异常
|
||||
BIS: number
|
||||
SBP: number
|
||||
SPO2: number
|
||||
DBP: number
|
||||
HR: number
|
||||
TEMP: number
|
||||
}
|
||||
import type { RemoteItem, PatientInfoItem } from '@/utils/public-interface'
|
||||
|
||||
const emit = defineEmits(['breakRemote'])
|
||||
|
||||
let timer = 0
|
||||
const mediaMini800 = ref(false)
|
||||
const remoteItem = ref<RemoteItem>({} as RemoteItem)
|
||||
const patientInfo = ref({} as PatientInfoItem)
|
||||
|
|
@ -143,6 +131,12 @@ defineExpose({
|
|||
initData
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 页面卸载后清楚定时器
|
||||
console.log('~~~~~~~~~~~~~~~')
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
mediaMini800.value = Boolean(window.innerWidth < 801)
|
||||
});
|
||||
|
|
@ -150,16 +144,23 @@ window.addEventListener('resize', () => {
|
|||
function initData(e?: any) {
|
||||
if(e) remoteItem.value = e
|
||||
const obj = e || {}
|
||||
patientInfo.value.state = e.dataAlarm
|
||||
patientInfo.value.state = obj.dataAlarm
|
||||
patientInfo.value.name = obj.patientName || ''
|
||||
patientInfo.value.code = 'XXXXXX'
|
||||
patientInfo.value.time = new Date()
|
||||
patientInfo.value.BIS = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.SBP = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.SPO2 = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.DBP = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.HR = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.TEMP = Math.ceil(Math.random() * 100)
|
||||
clearInterval(timer)
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function getData() {
|
||||
patientInfo.value.time = new Date()
|
||||
patientInfo.value.BIS = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.SBP = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.SPO2 = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.DBP = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.HR = Math.ceil(Math.random() * 100)
|
||||
patientInfo.value.TEMP = Math.ceil(Math.random() * 100)
|
||||
}
|
||||
|
||||
const breakRemote = () => {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { setRemoteTasks, 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'
|
||||
|
|
@ -49,29 +49,38 @@ function resetRemoteTaskItem(e: RemoteItem) {
|
|||
serverUser: '',
|
||||
patientName: '',
|
||||
patientCode: '',
|
||||
index: e.index
|
||||
index: e.index,
|
||||
log: []
|
||||
}
|
||||
}
|
||||
function initRemoteTask() {
|
||||
remoteTask.value = []
|
||||
while (remoteTask.value.length < 10) {
|
||||
const obj = {
|
||||
isRemote: false, // 连接状态
|
||||
dataAlarm: false, // 异常状态
|
||||
title: '',
|
||||
serverUser: '', // 服务器用户名
|
||||
patientName: '', // 病人名称
|
||||
patientCode: '', // 病人身份证
|
||||
index: remoteTask.value.length
|
||||
}
|
||||
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)
|
||||
remoteTask.value = useRemoteStore().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)
|
||||
}
|
||||
useRemoteStore().setRemoteTasks(remoteTask.value)
|
||||
const remoteStore = useRemoteStore().currentRemote
|
||||
if (!remoteStore.index) {
|
||||
useRemoteStore().$patch({currentRemote: remoteTask.value[0]})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -105,10 +114,9 @@ const confirmRemote = (e: RemoteItem) => {
|
|||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接成功'
|
||||
})
|
||||
}, e.index)
|
||||
remoteTask.value[e.index] = e // 状态设置为可连接
|
||||
remotePartRef.value.initData(e)
|
||||
useRemoteStore().setCurrentRemote(e)
|
||||
}
|
||||
// 连接失败
|
||||
const errorRemote = (e: RemoteItem) => {
|
||||
|
|
@ -116,7 +124,7 @@ const errorRemote = (e: RemoteItem) => {
|
|||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '连接失败'
|
||||
})
|
||||
}, e.index)
|
||||
}
|
||||
// 断开连接
|
||||
const breakRemote = (e: RemoteItem) => {
|
||||
|
|
@ -126,7 +134,7 @@ const breakRemote = (e: RemoteItem) => {
|
|||
time: new Date(),
|
||||
title: e.title,
|
||||
state: '断开连接'
|
||||
})
|
||||
}, e.index)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -148,18 +156,18 @@ const breakRemote = (e: RemoteItem) => {
|
|||
.thumbnail {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f8b300;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-top-left-radius: 35px;
|
||||
border-bottom-left-radius: 35px;
|
||||
box-shadow: -3px 3px 5px 0 rgba(black, .2);
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
transition: all .1s;
|
||||
.el-icon {
|
||||
|
|
@ -172,7 +180,7 @@ const breakRemote = (e: RemoteItem) => {
|
|||
white-space: nowrap;
|
||||
}
|
||||
&:hover {
|
||||
width: 100px;
|
||||
width: 160px;
|
||||
transition: all .3s;
|
||||
&>span {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,77 +1,114 @@
|
|||
<template>
|
||||
<div class="remote-thumbnail-page">
|
||||
<div class="remote-box row1">
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef1" @click="openRemote(1)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef2" @click="openRemote(2)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef3" @click="openRemote(3)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef4" @click="openRemote(4)"></RemoteItem>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remote-box row2">
|
||||
<div class="left-box">
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef5" @click="openRemote(5)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef6" @click="openRemote(6)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef7" @click="openRemote(7)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef8" @click="openRemote(8)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef9" @click="openRemote(9)"></RemoteItem>
|
||||
</div>
|
||||
<div class="remote-item">
|
||||
<RemoteItem ref="remoteItemRef10" @click="openRemote(10)"></RemoteItem>
|
||||
<el-scrollbar style="width: 100%;height: 100%;">
|
||||
<div class="remote-thumbnail-page">
|
||||
<div class="remote-box row1">
|
||||
<div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)">
|
||||
<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :remoteTask="item" @addLogAfter="addLogAfter"></RemoteItemPart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="message-item" v-for="item in 10" :key="'message-item' + item">
|
||||
{{ item }}
|
||||
<MessageItem></MessageItem>
|
||||
<div class="remote-box row2">
|
||||
<div class="left-box">
|
||||
<div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)">
|
||||
<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :remoteTask="item" @addLogAfter="addLogAfter"></RemoteItemPart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="message-title">异常信息</div>
|
||||
<div class="message-item" v-for="item in remoteTask" :key="'message-item' + item">
|
||||
<MessageItemPart ref="messageItemPartRef" :logs="item.log" :index="item.index"></MessageItemPart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useRemoteStore } from '@/stores/remote-info-store'
|
||||
import RemoteItem from './part/remote-item.vue'
|
||||
import MessageItem from './part/message-item.vue'
|
||||
import type { RemoteItem } from '@/utils/public-interface'
|
||||
import RemoteItemPart from './part/remote-item-part.vue'
|
||||
import MessageItemPart from './part/message-item-part.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const messageItemPartRef = ref()
|
||||
const remoteTask = ref([] as Array<RemoteItem>)
|
||||
|
||||
remoteTask.value = useRemoteStore().getRemoteTasks()
|
||||
|
||||
// 路由初始化后执行
|
||||
router.isReady().then(() => {
|
||||
console.log(route)
|
||||
console.log(route)
|
||||
})
|
||||
|
||||
|
||||
const openRemote = (num: number) => {
|
||||
console.log(num)
|
||||
const openRemote = (params: RemoteItem) => {
|
||||
useRemoteStore().setCurrentRemote(params)
|
||||
router.push('/remote-manage/remote-manage')
|
||||
}
|
||||
const addLogAfter = (index: number) => {
|
||||
messageItemPartRef.value[index].scrollToBottom()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
$size: 20px;
|
||||
.remote-thumbnail-page {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
height: 1010px;
|
||||
overflow: auto;
|
||||
.remote-box {
|
||||
width: 100%;
|
||||
height: 33.33%;
|
||||
display: flex;
|
||||
.remote-item {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
padding: $size*0.2;
|
||||
}
|
||||
&.row2 {
|
||||
height: 66.67%;
|
||||
.left-box {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.remote-item {
|
||||
width: 33.33%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
.right-box {
|
||||
position: relative;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
padding: $size*0.2;
|
||||
padding-top: $size*0.2 + $size;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.message-title {
|
||||
position: absolute;
|
||||
height: $size;
|
||||
top: $size*0.2;
|
||||
left: $size*0.2;
|
||||
right: $size*0.2;
|
||||
background-color: $red;
|
||||
text-align: center;
|
||||
font-size: $size*0.7;
|
||||
line-height: $size;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
.message-item {
|
||||
width: 50%;
|
||||
height: 20%;
|
||||
padding: $size*0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user