<template>
|
<div
|
class="unplanned-schedule-container"
|
:style="{ '--height': height + 'px' }"
|
>
|
<div class="row1-container">
|
<Card
|
title="抗凝剂"
|
:icon="tslImg"
|
background-color="#FFEDD2"
|
class="row1-left"
|
>
|
<div class="list-1">
|
<div
|
v-for="(item, index) in consumablesCollection.抗凝剂"
|
:key="index"
|
class="list-1-item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</Card>
|
<div class="row1-content">
|
<Card
|
title="透析模式"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row1-content-card"
|
>
|
<div class="list-2">
|
<div
|
v-for="(item, index) in consumablesCollection.透析模式"
|
:key="index"
|
class="list-2-item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="一次性血液透析体外循环管路"
|
:icon="tslImg"
|
background-color="#D9F0E2"
|
class="row1-content-card"
|
>
|
<div class="list-3">
|
<div
|
v-for="(item, index) in consumablesCollection.管路"
|
:key="index"
|
class="list-3-item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="一次性使用透析护理包"
|
:icon="tslImg"
|
background-color="#F9DEDE"
|
class="row1-content-card"
|
/>
|
</div>
|
<Card
|
title="一次性使用内瘘穿刺针"
|
:icon="tslImg"
|
background-color="#EFE5FF"
|
class="row1-right"
|
>
|
<div class="list-1">
|
<div
|
v-for="(item, index) in consumablesCollection.穿刺针"
|
:key="index"
|
class="list-1-item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</Card>
|
</div>
|
<div class="row2-container">
|
<Card
|
title="血液透析器"
|
:icon="tslImg"
|
background-color="#F6F5FA"
|
class="row2-card"
|
>
|
<div class="list-4">
|
<div
|
v-for="(item, index) in consumablesCollection.透析器"
|
:key="index"
|
class="list-4-item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</Card>
|
<Card
|
title="血液透析滤过器"
|
:icon="tslImg"
|
background-color="#F6F5FA"
|
class="row2-card"
|
>
|
<div class="list-4">
|
<div
|
v-for="(item, index) in consumablesCollection.滤过器"
|
:key="index"
|
class="list-4-item"
|
>
|
{{ item }}
|
</div>
|
</div>
|
</Card>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="UnplannedSchedule">
|
import { computed } from "vue";
|
// @ts-ignore
|
import Card from "../components/Card.vue";
|
import tslImg from "@/img/tsl.png";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const consumablesCollection = computed(() => {
|
return bedsideAuxiliaryScreenStore.deviceData.consumablesCollection;
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
.unplanned-schedule-container {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
height: var(--height);
|
overflow: hidden;
|
.row1-container {
|
flex: 1;
|
margin-bottom: 4px;
|
display: flex;
|
width: 100%;
|
gap: 4px;
|
min-height: 0;
|
> .row1-left,
|
.row1-right {
|
width: 103px;
|
flex-shrink: 0;
|
}
|
|
.row1-content {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
|
// 卡片高度平均分（3个）
|
> .row1-content-card {
|
flex: 1;
|
}
|
}
|
}
|
.row2-container {
|
flex: 1;
|
margin-bottom: 4px;
|
display: flex;
|
width: 100%;
|
gap: 4px;
|
min-height: 0;
|
> .row2-card {
|
flex: 1;
|
}
|
}
|
.list-1 {
|
.list-1-item {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 4px;
|
color: #a78718;
|
text-align: left;
|
font-style: normal;
|
&:not(:first-child) {
|
margin-top: 2px;
|
}
|
}
|
}
|
.list-2 {
|
.list-2-item {
|
display: inline-block;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 5px;
|
color: #3a75b8;
|
text-align: left;
|
font-style: normal;
|
&:not(:first-child) {
|
margin-left: 5px;
|
}
|
}
|
}
|
.list-3 {
|
.list-3-item {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 4px;
|
color: #3ab859;
|
text-align: left;
|
font-style: normal;
|
&:not(:first-child) {
|
margin-top: 2px;
|
}
|
}
|
}
|
.list-4 {
|
.list-4-item {
|
display: inline-block;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 4px;
|
color: #333333;
|
text-align: left;
|
font-style: normal;
|
margin-bottom: 4px;
|
&:not(:first-child) {
|
margin-right: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
