From 150b02fb27bf7bbcf3cb3653be484f8fab5b3999 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期六, 19 七月 2025 16:55:31 +0800
Subject: [PATCH] ID1825-未排班页面初步完成
---
src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue | 146 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 136 insertions(+), 10 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
index 2875103..b42fd0d 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
@@ -1,7 +1,7 @@
<template>
<div
class="unplanned-schedule-container"
- :style="{ '--height': props.height + 'px' }"
+ :style="{ '--height': height + 'px' }"
>
<div class="row1-container">
<Card
@@ -10,7 +10,15 @@
background-color="#FFEDD2"
class="row1-left"
>
- <div class=""></div>
+ <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
@@ -18,13 +26,33 @@
: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"
@@ -37,49 +65,91 @@
: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="#D9F0E2"
+ 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="#D9F0E2"
+ 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 "./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;
@@ -104,9 +174,65 @@
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>
\ No newline at end of file
--
Gitblit v1.8.0