From f8fe2290f6279451beaa96142765343edaee25be Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期二, 22 七月 2025 15:13:50 +0800
Subject: [PATCH] ID1625-已签到页面暂存
---
src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue | 227 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 223 insertions(+), 4 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
index 52d92bd..b42fd0d 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
@@ -1,19 +1,238 @@
<template>
- <div class="unplanned-schedule-container"></div>
+ <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 "./Card.vue";
+import tslImg from "@/img/tsl.png";
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+
interface Props {
- height: number;
+ height: number;
}
const props = defineProps<Props>();
-// @ts-ignore
-import Card from './Card.vue';
+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>
\ No newline at end of file
--
Gitblit v1.8.0