<template>
|
<div class="not-signed-in-container" :style="{ '--height': height + 'px' }">
|
<div class="row1-container">
|
<div class="row1-left">
|
<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-center">
|
<div class="row1-center-row1">
|
<Card
|
title="透析模式"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row1-center-row1-item"
|
>
|
<div class="dialysis-mode-content">
|
<span>{{ pageData.dialysisMode }}</span>
|
</div>
|
</Card>
|
<Card
|
title="治疗模式"
|
:icon="tslImg"
|
background-color="#F1EEFA"
|
class="row1-center-row1-item"
|
>
|
<div class="dialysis-mode-content item-2">
|
<span>未签到</span>
|
</div>
|
</Card>
|
</div>
|
<Card
|
title="一次性使用管路"
|
:icon="tslImg"
|
background-color="#D9F0E2"
|
class="row1-center-row2"
|
>
|
<div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.pipingList"
|
:key="index"
|
class="list-item"
|
style="color: #3ab859"
|
>
|
<div class="list-item-left">
|
{{ item.name }}
|
</div>
|
<div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div>
|
</Card>
|
</div>
|
<div class="row1-right">
|
<Card
|
title="透析器"
|
:icon="tslImg"
|
background-color="#F9DEDE"
|
class="row1-right-item"
|
>
|
<div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.dialyzerList"
|
:key="index"
|
class="list-item"
|
>
|
<div class="list-item-left">
|
{{ item.name }}
|
</div>
|
<div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="透析液"
|
:icon="tslImg"
|
background-color="#EFE5FF"
|
class="row1-right-item"
|
>
|
<div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.dialysateList"
|
:key="index"
|
class="list-item"
|
>
|
<div class="list-item-left">
|
{{ item.name }}
|
</div>
|
<div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div>
|
</Card>
|
</div>
|
</div>
|
<div class="row2-container">
|
<Card
|
title="抗凝剂"
|
:icon="tslImg"
|
background-color="#FFEDD2"
|
class="row-item"
|
>
|
<!-- <div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.pipingList"
|
:key="index"
|
class="list-item"
|
style="color: #3ab859"
|
>
|
<div class="list-item-left">
|
{{ item.name }}
|
</div>
|
<div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div> -->
|
</Card>
|
<Card
|
title="一次性使用透析护理包"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row-item"
|
>
|
<div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.carePackage"
|
:key="index"
|
class="list-item"
|
style="color: #1D77BD"
|
>
|
<div class="list-item-left">
|
{{ item.name }}
|
</div>
|
<div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div>
|
</Card>
|
</div>
|
<div class="row3-container">
|
<Card
|
title="穿刺针"
|
:icon="tslImg"
|
background-color="#FFEDD2"
|
class="row-item"
|
>
|
<div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.punctureNeedle"
|
:key="index"
|
class="list-item"
|
style="color: #A78718"
|
>
|
<div class="list-item-left">
|
{{ item.name }}
|
</div>
|
<div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="血管通路"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row-item"
|
>
|
<div class="list-box-1">
|
<div
|
v-for="(item, index) in pageData.vascularAccess"
|
:key="index"
|
class="list-item"
|
style="color: #1D77BD"
|
>
|
<div class="list-item-left">{{ item.位置 }} {{ item.类型 }}</div>
|
</div>
|
</div>
|
</Card>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="NotSignedIn">
|
import { computed } from "vue";
|
// @ts-ignore
|
import Card from "./Card.vue";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import tslImg from "@/img/tsl.png";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const pageData = computed(() => {
|
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.notSignedIn, {
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
});
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
.not-signed-in-container {
|
display: flex;
|
flex-direction: column;
|
height: var(--height);
|
gap: 4px; // 行间间距
|
overflow: hidden;
|
padding-bottom: 2px;
|
|
.row1-container {
|
display: flex;
|
flex: 59.3; // 59.3%
|
min-height: 0;
|
gap: 4px; // 行间间距
|
|
.row1-left {
|
width: 75px;
|
border-radius: 2px;
|
overflow: hidden;
|
}
|
.row1-center,
|
.row1-right {
|
flex: 1;
|
}
|
.row1-center {
|
display: flex;
|
flex-direction: column;
|
gap: 4px; // 行间间距
|
|
.row1-center-row1 {
|
flex: 1;
|
display: flex;
|
gap: 4px; // 行间间距
|
.row1-center-row1-item {
|
flex: 1;
|
.dialysis-mode-content {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 11px;
|
color: #3a75b8;
|
text-align: center;
|
font-style: normal;
|
&.item-2 {
|
color: #333;
|
}
|
}
|
}
|
}
|
.row1-center-row2 {
|
flex: 1;
|
}
|
}
|
.row1-right {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-right-item {
|
flex: 1;
|
}
|
}
|
}
|
|
.row2-container,
|
.row3-container {
|
flex: 20.35;
|
min-height: 0;
|
display: flex;
|
gap: 4px;
|
.row-item {
|
flex: 1;
|
}
|
}
|
.list-box-1 {
|
.list-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 5px;
|
color: #a78718;
|
line-height: 6px;
|
text-align: left;
|
font-style: normal;
|
.list-item-left {
|
flex: 1;
|
}
|
.list-item-right {
|
}
|
}
|
}
|
}
|
</style>
|
