<template>
|
<div class="signed-in-container" :style="{ '--height': height + 'px' }">
|
<div class="row1">
|
<div class="row1-col1">
|
<el-image
|
:src="pageData.patientPhone"
|
style="width: 100%; height: 100%"
|
>
|
<template #placeholder>
|
<div class="image-slot">加载中<span class="dot">...</span></div>
|
</template>
|
</el-image>
|
</div>
|
<div class="row1-col2">
|
<Card
|
title="异常指标"
|
:icon="xinlvImg"
|
background-color="#ffffff"
|
header-class-name="mihi-header"
|
>
|
<div class="dialysis-mode-content">
|
<span
|
v-for="(item, index) in pageData.abnormalItems"
|
:key="index"
|
class="abnormal-indicator"
|
:style="{ color: formatTestColr(item.结果标记) }"
|
>
|
{{ getItemName(item.项目名称) }}
|
{{ formatTestFlag(item.结果标记) }}
|
</span>
|
</div>
|
</Card>
|
</div>
|
<div class="row1-col3">
|
<div class="row1-col3-row1">
|
<Card
|
title="治疗模式"
|
:icon="zlmsImg"
|
background-color="#ffffff"
|
class="row1-col3-row1-item"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialysis-mode-content">
|
{{ pageData.dialysisPlan }}
|
</div>
|
</Card>
|
<Card
|
title="治疗状态"
|
:icon="zlztImg"
|
background-color="#ffffff"
|
class="row1-col3-row1-item"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box treatment-status">已签到</div>
|
</Card>
|
</div>
|
<Card
|
title="处方脱水量"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="row1-col3-row2"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box prescription-ehydration-olume">
|
{{ pageData.prescriptionDehydrationVolume }} L
|
</div>
|
</Card>
|
</div>
|
<div class="row1-col4">
|
<Card
|
title="透析器(显示规格)"
|
:icon="txqImg"
|
background-color="#ffffff"
|
class="row1-col4-row"
|
header-class-name="mihi-header"
|
>
|
<div class="item-box dialyzer">
|
{{ pageData.dialyzer }}
|
</div>
|
</Card>
|
<Card
|
title="脱水量详情"
|
:icon="cljdImg"
|
background-color="#ffffff"
|
class="row1-col4-row"
|
header-class-name="mihi-header"
|
>
|
<div class="dehydrated-level left-0">
|
<div class="dehydrated-level-item">
|
<span class="item-left"
|
>平均脱水量:{{ pageData.averageDehydrationRate }} L</span
|
>
|
<span class="item-right">(最近9次)</span>
|
</div>
|
<div class="dehydrated-level-item">
|
<span class="item-left"
|
><span
|
>最大脱水量:{{ pageData.maximumDehydrationCapacity }} L</span
|
>
|
<template v-if="pageData.maximumDehydrationDuration"
|
>/
|
<span class="level-dete">{{
|
pageData.maximumDehydrationDuration
|
}}</span>
|
</template>
|
</span>
|
|
<span class="item-right"
|
>({{ pageData.maximumDehydrationCapacityDate }})</span
|
>
|
</div>
|
</div>
|
</Card>
|
</div>
|
</div>
|
<div class="row2">
|
<Card
|
title="干体重"
|
:icon="tizhongImg"
|
background-color="#ffffff"
|
class="row2-item"
|
header-class-name="big-header"
|
>
|
<div class="weight-box">
|
<span class="weight-text">{{ pageData.dryWeight }}</span>
|
<span class="unit-text">kg</span>
|
</div>
|
</Card>
|
<Card
|
title="透前体重"
|
:icon="tizhongImg"
|
background-color="#ffffff"
|
class="row2-item"
|
header-class-name="big-header"
|
>
|
<div class="weight-box">
|
<span class="weight-text">{{ pageData.preDialysisWeight }}</span>
|
<span class="unit-text">kg</span>
|
</div>
|
</Card>
|
<Card
|
title="上次透后体重"
|
:icon="tizhongImg"
|
background-color="#ffffff"
|
class="row2-item"
|
header-class-name="big-header"
|
>
|
<div class="weight-box">
|
<span class="weight-text">{{
|
pageData.weightAfterLastDialysis
|
}}</span>
|
<span class="unit-text">kg</span>
|
</div>
|
</Card>
|
<Card
|
title="体重增长"
|
:icon="tizhongImg"
|
background-color="#ffffff"
|
class="row2-item"
|
header-class-name="big-header"
|
>
|
<div class="weight-box">
|
<span v-if="pageData.weightIncreaseRate > 0" class="weight-text"
|
>+</span
|
>
|
<span class="weight-text">{{ pageData.weightIncrease }}</span>
|
<span class="unit-text">kg</span>
|
</div>
|
</Card>
|
<Card
|
title="增长率"
|
:icon="tizhongImg"
|
background-color="#ffffff"
|
class="row2-item"
|
header-class-name="big-header"
|
>
|
<div class="weight-box">
|
<span class="weight-text">{{ pageData.weightIncreaseRate }}</span>
|
<span class="unit-text">%</span>
|
</div>
|
</Card>
|
</div>
|
<div class="row3">
|
<BlockBotttom
|
:icon="dingShiImg"
|
text="定时任务"
|
backgroundColor="#20C6B6"
|
@click="() => onScheduledTasksClick()"
|
class="btn"
|
/>
|
<BlockBotttom
|
:icon="jiaoHaoImg"
|
text="叫号"
|
backgroundColor="#20C6B6"
|
@click="() => onCallBumberClick()"
|
class="btn"
|
/>
|
<BlockBotttom
|
:icon="kaiShiImg"
|
text="开始"
|
backgroundColor="#409EFF"
|
@click="() => onStartClick()"
|
class="btn"
|
/>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup name="SignedIn">
|
import { computed } from "vue";
|
// @ts-ignore
|
import Card from "../components/Card.vue";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import tslImg from "@/img/tsl.png";
|
import dingShiImg from "@/img/dingshi2.png";
|
import jiaoHaoImg from "@/img/jiaoHao.png";
|
import kaiShiImg from "@/img/kaiShi.png";
|
import xinlvImg from "@/img/xinlv.png";
|
import zlmsImg from "@/img/zlms.png";
|
import zlztImg from "@/img/txzt.png";
|
import cljdImg from "@/img/cljd.png";
|
import txqImg from "@/img/txq.png";
|
import tizhongImg from "@/img/tizhong.png";
|
|
import {
|
getItemName,
|
formatTestColr,
|
formatTestFlag,
|
} from "@/store/type/bedsideAuxiliaryScreen.type";
|
// @ts-ignore
|
import BlockBotttom from "../components/BlockBotttom.vue";
|
import { ElMessage } from "element-plus/es";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const pageData = computed(() => {
|
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
});
|
});
|
|
/** 点击定时任务 */
|
const onScheduledTasksClick = () => {};
|
|
const onCallBumberClick = () => {
|
ElMessage({
|
message: "功能开发中，敬请期待！",
|
type: "warning",
|
});
|
};
|
|
const onStartClick = () => {
|
ElMessage({
|
message: "功能开发中，敬请期待！",
|
type: "warning",
|
});
|
};
|
</script>
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
.signed-in-container {
|
position: relative;
|
height: var(--height);
|
overflow: hidden;
|
.row1 {
|
height: 37.44%;
|
margin-bottom: 4px;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.row1-col1 {
|
flex: 0 0 14.86%;
|
height: 100%;
|
border-radius: 2px;
|
overflow: hidden;
|
}
|
.row1-col2 {
|
flex: 0 0 32.86%;
|
height: 100%;
|
.dialysis-mode-content {
|
height: 100%;
|
.abnormal-indicator {
|
display: inline-block;
|
margin-right: 6px;
|
margin-bottom: 4px;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 5px;
|
line-height: 6px;
|
text-align: left;
|
font-style: normal;
|
}
|
}
|
}
|
.row1-col3 {
|
flex: 0 0 23.71%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-col3-row1 {
|
flex: 1;
|
display: flex;
|
gap: 4px;
|
.row1-col3-row1-item {
|
flex: 1;
|
}
|
}
|
.row1-col3-row2 {
|
flex: 1;
|
}
|
}
|
.row1-col4 {
|
flex: 0 0 25.14%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-col4-row {
|
flex: 1;
|
.dehydrated-level {
|
padding-left: 6px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
&.left-0 {
|
padding-left: 0;
|
}
|
.dehydrated-level-item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.item-left {
|
flex: 1;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4px;
|
color: #333333;
|
line-height: 6px;
|
font-style: normal;
|
.level-dete {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4px;
|
color: #d58e56;
|
text-align: left;
|
font-style: normal;
|
}
|
}
|
.item-right {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 4px;
|
color: #777777;
|
line-height: 6px;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
}
|
}
|
.row2 {
|
height: 21.72%;
|
overflow: hidden;
|
display: flex;
|
gap: 4px;
|
.row2-item {
|
flex: 1;
|
|
.weight-box {
|
display: flex;
|
align-items: flex-end;
|
justify-content: center;
|
gap: 2px;
|
align-items: baseline;
|
.weight-text {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 11px;
|
color: #333333;
|
text-align: center;
|
font-style: normal;
|
}
|
.unit-text {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 7px;
|
color: #333333;
|
text-align: center;
|
font-style: normal;
|
}
|
}
|
}
|
}
|
.row3 {
|
position: absolute;
|
width: 100%;
|
bottom: 2px;
|
height: 13.33%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding-right: 13px;
|
overflow: hidden;
|
background: #ffffff;
|
border-radius: 2px;
|
.btn {
|
margin-left: 9px;
|
}
|
}
|
.item-box {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 8px;
|
color: #70a3dd;
|
text-align: center;
|
font-style: normal;
|
&.dialysis-mode-content {
|
color: #d58e56;
|
}
|
&.treatment-status {
|
color: #70a3dd;
|
}
|
&.prescription-ehydration-olume {
|
color: #8079cb;
|
}
|
}
|
// card header class
|
:deep(.mihi-header) {
|
flex: 0 0 4px;
|
.card-icon {
|
width: 4px;
|
height: 4px;
|
}
|
.card-title {
|
font-size: 4px;
|
}
|
}
|
:deep(.big-header) {
|
flex: 0 0 9px;
|
.card-icon {
|
width: 9px;
|
height: 9px;
|
}
|
.card-title {
|
font-size: 5px;
|
}
|
}
|
}
|
</style>
|
