远程链接优化

This commit is contained in:
mouse 2024-01-06 15:45:47 +08:00
parent c44cb6a945
commit 5cb7c4d455
3 changed files with 90 additions and 3 deletions

View File

@ -269,7 +269,11 @@ body {
}
}
.remote-manage-page {
.header-box {
padding: 0 !important;
}
.content-box {
padding: 20px !important;
.message-box {
display: none;
}

View File

@ -4,7 +4,58 @@
<span>{{ remoteItem?.title || '远程控制' }}</span>
<el-button v-if="remoteItem" class="break-btn" @click="breakRemote">断开连接</el-button>
</div>
<div class="content" :class="{'is-total': remoteItem?.isRemote}">
<!-- 小分辨率 -->
<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">
@ -82,6 +133,7 @@ interface PatientInfoItem {
const emit = defineEmits(['breakRemote'])
const mediaMini800 = ref(false)
const remoteItem = ref<RemoteItem>({} as RemoteItem)
const patientInfo = ref({} as PatientInfoItem)
@ -91,6 +143,10 @@ defineExpose({
initData
})
window.addEventListener('resize', () => {
mediaMini800.value = Boolean(window.innerWidth < 801)
});
function initData(e?: any) {
if(e) remoteItem.value = e
const obj = e || {}
@ -151,6 +207,7 @@ const breakRemote = () => {
}
.left-box {
@extend .common-box;
.label {
background: $main-color;
}
@ -267,7 +324,33 @@ const breakRemote = () => {
}
}
}
}
&.mini {
padding: 20px;
.left-box {
width: 240px;
}
.center-box {
width: calc(100% - 250px);
}
&.is-total {
.left-box {
.info-box {
display: block;
flex-shrink: 0;
}
.row-item.yellow {
.label {
background: #f8b300;
}
.value {
color: #f8b300;
border-color: #f8b300;
}
}
}
}
}
}
}

View File

@ -181,7 +181,7 @@ const breakRemote = (e: RemoteItem) => {
.content-box {
width: 100%;
height: calc(100% - 195px);
min-height: 400px;
min-height: 600px;
margin-top: 15px;
background: white;
padding: 20px 50px;