From 4981c1f1ef22523cb2dc027c7c8126dfb924c5af Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期二, 08 七月 2025 20:38:09 +0800
Subject: [PATCH] ID1825-暂存
---
src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue | 103 ++++++++++++++++++++++++-
src/utils/utils.ts | 11 ++
src/store/bedsideAuxiliaryScreen.ts | 31 +++++++
src/views/mobile/bedsideAuxiliaryScreen/index.vue | 48 +++++++++---
src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue | 4
5 files changed, 176 insertions(+), 21 deletions(-)
diff --git a/src/store/bedsideAuxiliaryScreen.ts b/src/store/bedsideAuxiliaryScreen.ts
index 5dbdc80..a1a9e3c 100644
--- a/src/store/bedsideAuxiliaryScreen.ts
+++ b/src/store/bedsideAuxiliaryScreen.ts
@@ -6,7 +6,17 @@
export const useBedsideAuxiliaryScreenStore = defineStore(
"bedsideAuxiliaryScreen",
() => {
- const deviceCode = ref<string>(cache.get("devcieCode") || ""); // 设备编号
+ /** 设备编号 */
+ const deviceCode = ref<string>(cache.get("devcieCode") || "");
+
+ /** 床旁血压计数据 */
+ const bedsideBloodPressureMonitorData = ref({
+ date_time: '',
+ sbp: '',
+ pulseRate: '',
+ dbp: '',
+ zuihouTime: '',
+ });
/**
* 设置设备编号
@@ -45,7 +55,22 @@
source.value.onmessage = (e) => {
console.log("[SSE] 消息:", e.data);
- message.value = e.data;
+ const msg = e.data;
+ let dif = msg.indexOf("event:message");
+ let beng = msg.indexOf("{");
+ let end = msg.length - 1;
+ if (beng !== -1 && end !== -1 && dif !== -1) {
+ const datax = msg.slice(beng, end + 1);
+ const dataBody = JSON.parse(datax);
+
+ // 倒计时提示文本
+ if (dataBody.倒计时?.提示文本) {}
+
+ // 床旁血压计
+ if (dataBody.推送类型 === '床旁血压计') {}
+ // 中央监控大屏信息
+ else if (dataBody.推送类型 === '中央监控大屏信息') {}
+ }
};
};
@@ -67,7 +92,7 @@
message,
isConnected,
connect,
- close
+ close,
};
}
);
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..76dfc1a
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,11 @@
+/**
+ * 计算某个类名元素的可用高度（视口高度 - 元素顶部距离）
+ * @param className 元素类名（不带.）
+ * @returns 可用高度（px），找不到元素则返回 0
+ */
+export function getAvailableHeightByClass(className: string): number {
+ const el = document.querySelector(`.${className}`) as HTMLElement | null
+ if (!el) return 0
+ const rect = el.getBoundingClientRect()
+ return window.innerHeight - rect.top
+}
\ No newline at end of file
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue
index 0eb434e..e224cdf 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue
@@ -10,7 +10,9 @@
<img :src="props.icon" class="card-icon" alt="" srcset="" />
<span class="card-title">{{ props.title }}</span>
</div>
- <div class="card-main"></div>
+ <div class="card-main">
+ <slot />
+ </div>
</div>
</template>
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
index 52d92bd..2875103 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue
@@ -1,19 +1,112 @@
<template>
- <div class="unplanned-schedule-container"></div>
+ <div
+ class="unplanned-schedule-container"
+ :style="{ '--height': props.height + 'px' }"
+ >
+ <div class="row1-container">
+ <Card
+ title="抗凝剂"
+ :icon="tslImg"
+ background-color="#FFEDD2"
+ class="row1-left"
+ >
+ <div class=""></div>
+ </Card>
+ <div class="row1-content">
+ <Card
+ title="透析模式"
+ :icon="tslImg"
+ background-color="#E5EEFF"
+ class="row1-content-card"
+ />
+ <Card
+ title="一次性血液透析体外循环管路"
+ :icon="tslImg"
+ background-color="#D9F0E2"
+ class="row1-content-card"
+ />
+ <Card
+ title="一次性使用透析护理包"
+ :icon="tslImg"
+ background-color="#F9DEDE"
+ class="row1-content-card"
+ />
+ </div>
+ <Card
+ title="一次性使用内瘘穿刺针"
+ :icon="tslImg"
+ background-color="#EFE5FF"
+ class="row1-right"
+ />
+ </div>
+ <div class="row2-container">
+ <Card
+ title="血液透析器"
+ :icon="tslImg"
+ background-color="#D9F0E2"
+ class="row2-card"
+ />
+ <Card
+ title="血液透析滤过器"
+ :icon="tslImg"
+ background-color="#D9F0E2"
+ class="row2-card"
+ />
+ </div>
+ </div>
</template>
<script lang="ts" setup name="UnplannedSchedule">
+// @ts-ignore
+import Card from "./Card.vue";
+import tslImg from "@/img/tsl.png";
+
interface Props {
- height: number;
+ height: number;
}
const props = defineProps<Props>();
-
-// @ts-ignore
-import Card from './Card.vue';
</script>
<style lang="less" scoped>
.unplanned-schedule-container {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ height: var(--height);
+ .row1-container {
+ flex: 1;
+ margin-bottom: 4px;
+ display: flex;
+ width: 100%;
+ gap: 4px;
+ > .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;
+ > .row2-card {
+ flex: 1;
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/index.vue b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
index 54417c7..b555a83 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/index.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
@@ -1,27 +1,51 @@
<template>
- <div class="bedside-auxiliary-screen-container">
- <Header :type="0" device-no="03" />
- <div class="bedside-auxiliary-screen-content"></div>
+ <div class="bedside-auxiliary-screen-container">
+ <Header :type="0" device-no="03" />
+ <div class="bedside-auxiliary-screen-content">
+ <div class="content-position"></div>
+ <UnplannedSchedule v-if="cotentHeight > 0" :height="cotentHeight" />
</div>
+ </div>
</template>
<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { ref, watch, onMounted, defineAsyncComponent } from "vue";
// @ts-ignore
-import Header from './components/Header.vue';
+import Header from "./components/Header.vue";
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import { getAvailableHeightByClass } from '@/utils/utils';
+// 未排班时的组件
+const UnplannedSchedule = defineAsyncComponent(() => import('./components/UnplannedSchedule.vue'));
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+const cotentHeight = ref(0);
+watch(
+ () => bedsideAuxiliaryScreenStore.deviceCode,
+ (newVal: string) => {}
+);
+
+onMounted(() => {
+ if (bedsideAuxiliaryScreenStore.deviceCode) {
+ bedsideAuxiliaryScreenStore.connect(
+ `${import.meta.env.VITE_SSE_BASE_URL}${
+ bedsideAuxiliaryScreenStore.deviceCode
+ }`
+ );
+ }
+ cotentHeight.value = getAvailableHeightByClass('content-position')
+});
</script>
<style lang="less" scoped>
-*{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
.bedside-auxiliary-screen-container {
- .bedside-auxiliary-screen-content {
- padding: 6px 12px 0;
- }
+ .bedside-auxiliary-screen-content {
+ padding: 6px 12px 0;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0