mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2026-06-12 13:31:47 +08:00
427 lines
14 KiB
Vue
427 lines
14 KiB
Vue
<template>
|
||
<!--缩略图-->
|
||
<div class="remote-item-part">
|
||
<div class="title">
|
||
<span>{{ remoteTask.taskName || '远程查看' }}</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">{{ remoteTask.patient }}</span>
|
||
</div>
|
||
<div class="row-item">
|
||
<span class="label">证件号</span>
|
||
<span class="input-value">{{ remoteTask.patientId }}</span>
|
||
</div>
|
||
<div class="row-item">
|
||
<span class="label">手术时间</span>
|
||
<span class="input-value">{{
|
||
remoteTask.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 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" :class="{ 'alarm': patientInfo.TOF_except }">
|
||
<span class="label">TOF</span>
|
||
<span class="value">{{ patientInfo.TOF }}</span>
|
||
</div>
|
||
<div class="row-item" :class="{ 'alarm': patientInfo.SBP_except }">
|
||
<span class="label">SBP</span>
|
||
<span class="value">{{ patientInfo.SBP }}</span>
|
||
</div>
|
||
<div class="row-item yellow" :class="{ 'alarm': patientInfo.DBP_except }">
|
||
<span class="label">DBP</span>
|
||
<span class="value">{{ patientInfo.DBP }}</span>
|
||
</div>
|
||
<div class="row-item yellow" :class="{ 'alarm': patientInfo.MAP_except }">
|
||
<span class="label">MAP</span>
|
||
<span class="value">{{ patientInfo.MAP }}</span>
|
||
</div>
|
||
<div class="row-item">
|
||
<span class="label">SPO2</span>
|
||
<span class="value">{{ patientInfo.SPO2 }}</span>
|
||
</div>
|
||
<div class="row-item yellow">
|
||
<span class="label">ST</span>
|
||
<span class="value">{{ patientInfo.ST }}</span>
|
||
</div>
|
||
<div class="row-item yellow">
|
||
<span class="label">EtCO2</span>
|
||
<span class="value">{{ patientInfo.EtCO2 }}</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, onUnmounted, ref} from 'vue'
|
||
import {useRemoteWsStore} from "@/stores/remote-ws-store";
|
||
import {ElMessage} from "element-plus";
|
||
|
||
const props = withDefaults(defineProps<{ index: number }>(), {
|
||
index: () => 0
|
||
})
|
||
const emit = defineEmits(['addLogAfter'])
|
||
const remoteWsStore = useRemoteWsStore();
|
||
const remoteTask = ref(remoteWsStore.remoteTasks[props.index]);
|
||
const patientInfo = ref({} as any)
|
||
let currentException: any = {}
|
||
|
||
onMounted(() => {
|
||
// 连接成功执行查询
|
||
if (remoteTask.value.isRemote) {
|
||
initData()
|
||
}
|
||
})
|
||
onUnmounted(() => {
|
||
remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index);
|
||
})
|
||
|
||
function initData() {
|
||
remoteWsStore.createVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index)
|
||
subscribeVital()
|
||
wsClose()
|
||
}
|
||
|
||
function subscribeVital() {
|
||
remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index, (res: any) => {
|
||
// const data = JSON.parse(res.data);
|
||
// if (data.vitalSignsList && data.vitalSignsList.length > 0) {
|
||
// Object.assign(patientInfo.value, data.vitalSignsList[0]);
|
||
// patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
|
||
// patientInfo.value.DBP_except || patientInfo.value.HR_except || patientInfo.value.ST_except
|
||
// ||patientInfo.value.EtCO2_except);
|
||
// setLog(patientInfo.value, props.index)
|
||
// emit('addLogAfter', props.index)
|
||
// }
|
||
if (res && res.data) {
|
||
const data = JSON.parse(res.data);
|
||
// if (data.vitalSignsList && data.vitalSignsList.length > 0) {
|
||
if (data.vitalSignsList) {
|
||
Object.assign(patientInfo.value, data.vitalSignsList);
|
||
patientInfo.value.state = (patientInfo.value.BIS_except || patientInfo.value.SBP_except ||
|
||
patientInfo.value.DBP_except || patientInfo.value.HR_except || patientInfo.value.ST_except
|
||
|| patientInfo.value.EtCO2_except || patientInfo.value.TOF_except);
|
||
// patient.vitalWS.send(JSON.stringify({msgType: "heartbeat"}))
|
||
setLog(patientInfo.value, props.index)
|
||
emit('addLogAfter', props.index)
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
function wsClose() {
|
||
remoteWsStore.vitalOnclose(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index, () => {
|
||
setTimeout(() => {
|
||
ElMessage.info('远程查看' + (props.index + 1) + '， 生命体征数据连接断开，正在尝试重连……')
|
||
initData()
|
||
}, 3000)
|
||
})
|
||
}
|
||
|
||
|
||
// const lastTime = ref([])
|
||
//
|
||
// function setLog(data: any, index: number) {
|
||
// // if (currentException[index]?.Time != data.Time) {
|
||
// if (lastTime[index].value != data.Time)
|
||
// remoteWsStore.exceptionType.forEach((item: any) => {
|
||
// if (data[item]) {
|
||
// const msg: any = remoteWsStore.exceptionMsg[item];
|
||
// remoteWsStore.setRemoteLog({
|
||
// state: msg,
|
||
// taskName: remoteTask.value.taskName,
|
||
// time: data.Time,
|
||
// type: "exception"
|
||
// }, index);
|
||
// }
|
||
// })
|
||
// // currentException[index] = data
|
||
// // }
|
||
// }
|
||
|
||
const lastTimes: any = ref([]); // 使用数组来存储每个任务的lastTime
|
||
|
||
function setLog(data: any, index: number) {
|
||
console.log(lastTimes.value[index], data.Time);
|
||
if (data.Time != lastTimes.value[index]) {
|
||
remoteWsStore.exceptionType.forEach((item: any) => {
|
||
if (data[item]) {
|
||
const msg: any = remoteWsStore.exceptionMsg[item];
|
||
remoteWsStore.setRemoteLog({
|
||
state: msg,
|
||
taskName: remoteTask.value.taskName,
|
||
time: data.Time,
|
||
type: "exception"
|
||
}, index);
|
||
}
|
||
});
|
||
lastTimes.value[index] = data.Time; // 更新该任务的lastTime
|
||
}
|
||
}
|
||
|
||
</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: $main-color;
|
||
border-color: $main-color;
|
||
}
|
||
|
||
.row-item.alarm {
|
||
.label {
|
||
background: red !important;
|
||
}
|
||
|
||
.value {
|
||
color: red !important;
|
||
border-color: red !important;
|
||
}
|
||
}
|
||
|
||
.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.3;
|
||
margin-top: $size*0.1;
|
||
padding: 0 $size*0.5;
|
||
height: $size*0.9;
|
||
line-height: $size;
|
||
font-size: $size*0.5;
|
||
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: $main-color;
|
||
}
|
||
|
||
.value {
|
||
color: $main-color;
|
||
border-color: $main-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}</style>
|