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/SignedIn.vue | 344 ++++++++++++++++++++++++++++++++++
src/store/type/bedsideAuxiliaryScreen.type.ts | 142 ++++++++++---
src/views/mobile/bedsideAuxiliaryScreen/index.vue | 18 +
src/views/mobile/bedsideAuxiliaryScreen/components/UnderTreatment.vue | 83 ++++++-
4 files changed, 536 insertions(+), 51 deletions(-)
diff --git a/src/store/type/bedsideAuxiliaryScreen.type.ts b/src/store/type/bedsideAuxiliaryScreen.type.ts
index 01f3425..e6c18f8 100644
--- a/src/store/type/bedsideAuxiliaryScreen.type.ts
+++ b/src/store/type/bedsideAuxiliaryScreen.type.ts
@@ -129,14 +129,14 @@
}
export interface Anticoagulant {
- name: string;
- 单位: string;
- 数量: number | null;
- 总量: number | null;
- 是否为追加: number | null;
- 维持剂量: number | null;
- 追加剂量: number | null;
- 首剂: number | null;
+ name: string;
+ 单位: string;
+ 数量: number | null;
+ 总量: number | null;
+ 是否为追加: number | null;
+ 维持剂量: number | null;
+ 追加剂量: number | null;
+ 首剂: number | null;
}
export interface AnomalyIndex {
@@ -169,6 +169,7 @@
consumablesCollection: ConsumablesCollection;
pageType: PageType;
notSignedIn: NotSignedIn;
+ signedIn: SignedIn;
underTreatment: UnderTreatment;
}
@@ -259,11 +260,33 @@
export interface SignedIn {
abnormalItems: AnomalyIndex[];
+ dialysisPlan: string; // 透析方案
+ prescriptionDehydrationVolume: number | null; // 透析处方脱水量
+ dialyzer: string; // 透析器
+ averageDehydrationRate: string; // 最近平均脱水量
+ maximumDehydrationCapacity: string; // 最近最大脱水量
+ maximumDehydrationCapacityDate: string; // 最近最大脱水量日期
+ dryWeight: number | null; // 干体重
+ preDialysisWeight: number | null; // 透前称重
+ weightAfterLastDialysis: number | null; // 上次透后称重
+ weightIncrease: number | null; // 体重增加
+ weightIncreaseRate: number | null; // 体重增长率
}
export const defaultSignedIn = (): SignedIn => {
return {
abnormalItems: [], // 异常指标列表
+ dialysisPlan: "", // 透析方案
+ prescriptionDehydrationVolume: null, // 透析处方脱水量
+ dialyzer: "", // 透析器
+ averageDehydrationRate: "", // 最近平均脱水量
+ maximumDehydrationCapacity: "", // 最近最大脱水量
+ maximumDehydrationCapacityDate: "", // 最近最大脱水量日期
+ dryWeight: null, // 干体重
+ preDialysisWeight: null, // 透前称重
+ weightAfterLastDialysis: null, // 上次透后称重
+ weightIncrease: null, // 体重增加
+ weightIncreaseRate: null, // 体重增长率
};
};
@@ -352,6 +375,7 @@
treatmentStatus: EMedStatus.NOT_CHECKED_IN, // 透析状态
consumablesCollection: defaultconsumablesCollection(), // 未排班时需要的数据
notSignedIn: defalutNotSignedIn(), // 未签到时需要的数据
+ signedIn: defaultSignedIn(), // 已签到时需要的数据
underTreatment: defaultUnderTreatment(), // 治疗中需要的数据
};
};
@@ -388,22 +412,6 @@
result.patForm = seeMsg.透析状态?.患者来源;
result.patFormNumber = seeMsg.透析状态?.患者门诊住院号;
- // switch(treatmentStatus) {
- // case EMedStatus.NOT_CHECKED_IN:
- // result.pageType = EPageType.NOT_SIGNED_IN;
- // const notSignedIn = {
- // dialysisMode: seeMsg.透析状态?.透析方案,
- // dialyzerList: seeMsg.透析状态?.透析器列表,
- // pipingList: seeMsg.透析状态?.管路列表,
- // dialysateList: seeMsg.透析状态?.透析液列表,
- // carePackage: seeMsg.透析状态?.护理包列表,
- // punctureNeedle: seeMsg.透析状态?.穿刺针列表,
- // vascularAccess: seeMsg.透析状态?.血管通路列表,
- // anticoagulant: [],
- // }
- // result.notSignedIn = notSignedIn;
- // break
- // }
// 未签到页面需要显示的
if (treatmentStatus === EMedStatus.NOT_CHECKED_IN) {
result.pageType = EPageType.NOT_SIGNED_IN;
@@ -420,7 +428,27 @@
result.notSignedIn = notSignedIn;
}
// 已签到未开始透析需要显示的
- else if (treatmentStatus === EMedStatus.SIGNED_IN) {}
+ else if (treatmentStatus === EMedStatus.SIGNED_IN) {
+ result.pageType = EPageType.SIGNED_IN;
+ const signedIn = defaultSignedIn();
+ signedIn.abnormalItems = seeMsg.透析状态?.异常检验指标 || [];
+ signedIn.dialysisPlan = seeMsg.透析状态?.透析方案 || "";
+ signedIn.prescriptionDehydrationVolume =
+ seeMsg.透析状态?.处方脱水量 || null;
+ signedIn.dialyzer = seeMsg.透析状态?.透析器 || "";
+ signedIn.averageDehydrationRate = seeMsg.透析状态?.最近平均脱水量 || "";
+ signedIn.maximumDehydrationCapacity =
+ seeMsg.透析状态?.最近最大脱水量 || "";
+ signedIn.maximumDehydrationCapacityDate =
+ seeMsg.透析状态?.最近最大脱水量日期 || "";
+ signedIn.dryWeight = seeMsg.透析状态?.干体重 || null;
+ signedIn.preDialysisWeight = seeMsg.透析状态?.透前称重 || null;
+ signedIn.weightAfterLastDialysis = seeMsg.透析状态?.上次透后称重 || null;
+ signedIn.weightIncrease = seeMsg.透析状态?.体重增加 || null;
+ signedIn.weightIncreaseRate = seeMsg.透析状态?.体重增长率 || null;
+
+ result.signedIn = signedIn;
+ }
// 剩下的全使用治疗中的页面
else {
result.pageType = EPageType.DURING_DIALYSIS;
@@ -434,18 +462,15 @@
seeMsg.透析状态?.最近最大脱水量 || "";
underTreatment.maximumDehydrationCapacityDate =
seeMsg.透析状态?.最近最大脱水量日期 || "";
- underTreatment.maximumDehydrationDuration = ""
- underTreatment.prescriptionRemarks =
- seeMsg.透析状态?.处方备注 || "";
+ underTreatment.maximumDehydrationDuration = "";
+ underTreatment.prescriptionRemarks = seeMsg.透析状态?.处方备注 || "";
underTreatment.abnormalItems = seeMsg.透析状态?.异常检验指标 || [];
underTreatment.prescriptionDialysisDuration =
seeMsg.透析状态?.透析处方的时长_小时 || "";
underTreatment.dialysisStartTime =
seeMsg.透析状态?.透析开始时间 || null;
- underTreatment.dialysisEndTime =
- seeMsg.透析状态?.透析结束时间 || null;
- underTreatment.dialysisDuration =
- seeMsg.透析状态?.iot_透析时间 || null;
+ underTreatment.dialysisEndTime = seeMsg.透析状态?.透析结束时间 || null;
+ underTreatment.dialysisDuration = seeMsg.透析状态?.iot_透析时间 || null;
underTreatment.prescriptionDehydrationVolume =
seeMsg.透析状态?.处方脱水量 || null;
underTreatment.currentDehydrationVolume =
@@ -458,10 +483,9 @@
underTreatment.transmembranePressure =
seeMsg.透析状态?.iot_跨膜压 || null;
underTreatment.ktv = seeMsg.透析状态?.实时ktv || "";
- underTreatment.monitoringRecord = seeMsg.透析状态
- ?.监测记录列表 || [];
+ underTreatment.monitoringRecord = seeMsg.透析状态?.监测记录列表 || [];
underTreatment.doctorAdvice = seeMsg.透析状态?.透析单医嘱列表 || [];
- underTreatment.bloodFlow = "";
+ underTreatment.bloodFlow = "";
underTreatment.dialysisFluidFlowRate = "";
underTreatment.bloodVolumeMonitoring = "";
underTreatment.ktvList = seeMsg.透析状态?.实时ktv计算结果列表 || [];
@@ -470,3 +494,51 @@
}
return result;
};
+
+export const getItemName = (name: string) => {
+ if (name) {
+ if (name === "血红蛋白") {
+ return "HGB ";
+ } else if (name === "铁蛋白") {
+ return "FER ";
+ } else if (name === "白蛋白") {
+ return "ALB ";
+ } else if (name === "钙") {
+ return "Ca ";
+ } else if (name === "钾") {
+ return "K ";
+ } else if (name === "无机磷") {
+ return "P ";
+ } else if (name === "甲状旁腺激素") {
+ return "PTH ";
+ } else {
+ return name;
+ }
+ } else {
+ return "";
+ }
+};
+
+export const formatTestColr = (reg: string) => {
+ const heightFlag = ["↑", "g"];
+ const lowFlag = ["d", "↓"];
+ let color = "#333";
+ if (heightFlag.includes(reg)) {
+ color = "#CA7070";
+ } else if (lowFlag.includes(reg)) {
+ color = "#409eff";
+ }
+ return color;
+};
+
+export const formatTestFlag = (reg: string) => {
+ const heightFlag = ["↑", "g"];
+ const lowFlag = ["d", "↓"];
+ if (heightFlag.includes(reg)) {
+ return "↑";
+ } else if (lowFlag.includes(reg)) {
+ return "↓";
+ } else {
+ return "";
+ }
+};
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/SignedIn.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/SignedIn.vue
new file mode 100644
index 0000000..513bb39
--- /dev/null
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/SignedIn.vue
@@ -0,0 +1,344 @@
+<template>
+ <div class="signed-in-container" :style="{ '--height': height + 'px' }">
+ <div class="row1">
+ <div class="row1-col1">
+ <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-col2">
+ <Card title="异常指标" :icon="tslImg" background-color="#ffffff">
+ <div class="dialysis-mode-content">
+ <span
+ v-for="(item, index) in pageData.abnormalItems"
+ :key="index"
+ class="abnormal-indicator"
+ :style="{ color: formatTestColr(item.结果标记) }"
+ >
+ {{ getItemName(item.项目名称) }}
+ {{ formatTestFlag(item.结果标记) }}
+ </span>
+ </div>
+ </Card>
+ </div>
+ <div class="row1-col3">
+ <div class="row1-col3-row1">
+ <Card
+ title="治疗模式"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row1-col3-row1-item"
+ >
+ <div class="item-box dialysis-mode-content">
+ {{ pageData.dialysisPlan }}
+ </div>
+ </Card>
+ <Card
+ title="治疗状态"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row1-col3-row1-item"
+ >
+ <div class="item-box treatment-status">已签到</div>
+ </Card>
+ </div>
+ <Card
+ title="处方脱水量"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row1-col3-row2"
+ >
+ <div class="item-box prescription-ehydration-olume">
+ {{ pageData.prescriptionDehydrationVolume }} L
+ </div>
+ </Card>
+ </div>
+ <div class="row1-col4">
+ <Card
+ title="透析器(显示规格)"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row1-col4-row"
+ >
+ <div class="item-box dialyzer">
+ {{ pageData.dialyzer }}
+ </div>
+ </Card>
+ <Card
+ title="脱水量详情"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row1-col4-row"
+ >
+ <div class="dehydrated-level">
+ <div class="dehydrated-level-item">
+ <span class="item-left"
+ >平均脱水量：{{ pageData.averageDehydrationRate }} L</span
+ >
+ <span class="item-right">(最近3周9次)</span>
+ </div>
+ <div class="dehydrated-level-item">
+ <span class="item-left"
+ >最大脱水量：{{ pageData.maximumDehydrationCapacity }} L</span
+ >
+ <span class="item-right"
+ >({{ pageData.maximumDehydrationCapacityDate }})</span
+ >
+ </div>
+ </div>
+ </Card>
+ </div>
+ </div>
+ <div class="row2">
+ <Card
+ title="干体重"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.dryWeight }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="透前体重"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.preDialysisWeight }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="上次透后体重"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{
+ pageData.weightAfterLastDialysis
+ }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="体重增长"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.weightIncrease }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="增长率"
+ :icon="tslImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.weightIncreaseRate }}</span>
+ <span class="unit-text">%</span>
+ </div>
+ </Card>
+ </div>
+ <div class="row3"></div>
+ </div>
+</template>
+<script lang="ts" setup name="SignedIn">
+import { computed } from "vue";
+// @ts-ignore
+import Card from "./Card.vue";
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import tslImg from "@/img/tsl.png";
+import {
+ getItemName,
+ formatTestColr,
+ formatTestFlag,
+} from "@/store/type/bedsideAuxiliaryScreen.type";
+
+interface Props {
+ height: number;
+}
+const props = defineProps<Props>();
+
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+
+const pageData = computed(() => {
+ return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
+ patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
+ });
+});
+</script>
+<style lang="less" scoped>
+* {
+ box-sizing: border-box;
+}
+.signed-in-container {
+ position: relative;
+ height: var(--height);
+ overflow: hidden;
+ .row1 {
+ height: 37.44%;
+ margin-bottom: 4px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .row1-col1 {
+ flex: 0 0 14.86%;
+ height: 100%;
+ border-radius: 2px;
+ overflow: hidden;
+ }
+ .row1-col2 {
+ flex: 0 0 32.86%;
+ height: 100%;
+ .dialysis-mode-content {
+ height: 100%;
+ .abnormal-indicator {
+ display: inline-block;
+ margin-right: 6px;
+ margin-bottom: 4px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 5px;
+ line-height: 6px;
+ text-align: left;
+ font-style: normal;
+ }
+ }
+ }
+ .row1-col3 {
+ flex: 0 0 23.71%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ .row1-col3-row1 {
+ flex: 1;
+ display: flex;
+ gap: 4px;
+ .row1-col3-row1-item {
+ flex: 1;
+ }
+ }
+ .row1-col3-row2 {
+ flex: 1;
+ }
+ }
+ .row1-col4 {
+ flex: 0 0 25.14%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ .row1-col4-row {
+ flex: 1;
+ .dehydrated-level {
+ padding-left: 6px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ .dehydrated-level-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ .item-left {
+ flex: 1;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 4px;
+ color: #333333;
+ line-height: 6px;
+ font-style: normal;
+ }
+ .item-right {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 4px;
+ color: #777777;
+ line-height: 6px;
+ font-style: normal;
+ }
+ }
+ }
+ }
+ }
+ }
+ .row2 {
+ height: 18.72%;
+ overflow: hidden;
+ display: flex;
+ gap: 4px;
+ .row2-item {
+ flex: 1;
+
+ .weight-box {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ gap: 2px;
+ align-items: baseline;
+ .weight-text {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 11px;
+ color: #333333;
+ text-align: center;
+ font-style: normal;
+ }
+ .unit-text {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 7px;
+ color: #333333;
+ text-align: center;
+ font-style: normal;
+ }
+ }
+ }
+ }
+ .row3 {
+ position: absolute;
+ width: 100%;
+ bottom: 2px;
+ height: 11.33%;
+ overflow: hidden;
+ background-color: blue;
+ }
+ .item-box {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 8px;
+ color: #70a3dd;
+ text-align: center;
+ font-style: normal;
+ &.dialysis-mode-content {
+ color: #d58e56;
+ }
+ &.treatment-status {
+ color: #70a3dd;
+ }
+ &.prescription-ehydration-olume {
+ color: #8079cb;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/UnderTreatment.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/UnderTreatment.vue
index e1062a9..de0716a 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/UnderTreatment.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/UnderTreatment.vue
@@ -1,19 +1,25 @@
<template>
<div class="under-treatment-container" :style="{ '--height': height + 'px' }">
- <div class="row-1">
- <div class="row-1-col-1">
- <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 class="left-box">
+ <div class="left-row1">
+ <div class="left-row1-col1">
+ <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="left-row1-col2"></div>
+ <div class="left-row1-col3"></div>
</div>
+ <div class="left-row2"></div>
+ <div class="left-row3"></div>
+ <div class="left-row4"></div>
</div>
- <div class="row-2"></div>
- <div class="row-3"></div>
+ <div class="right-box"></div>
</div>
</template>
<script lang="ts" setup name="UnderTreatment">
@@ -37,11 +43,60 @@
</script>
<style lang="less" scoped>
+* {
+ box-sizing: border-box;
+}
+
.under-treatment-container {
display: flex;
- align-items: center;
- flex-direction: column;
+ align-items: flex-start;
height: var(--height);
+ gap: 4px;
+ padding-bottom: 2px;
overflow: hidden;
+ .left-box {
+ flex: 0 0 58.25%;
+ height: calc(100% - 12px);
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 4px;
+ div {
+ width: 100%;
+ }
+ .left-row1 {
+ flex: 0 0 41.99%;
+ // width: calc(100% - 8px);
+ gap: 4px;
+ display: flex;
+ background: blue;
+ .left-row1-col1 {
+ flex: 0 0 26.94%;
+ }
+ .left-row1-col2 {
+ flex: 0 0 26.42%;
+ }
+ .left-row1-col3 {
+ flex: 0 0 46.63%;
+ }
+ }
+ .left-row2 {
+ flex: 0 0 22.65%;
+ background: yellow;
+ }
+ .left-row3 {
+ flex: 0 0 22.65%;
+ background: orange;
+ }
+ .left-row4 {
+ flex: 0 0 12.71%;
+ background: purple;
+ }
+ }
+ .right-box {
+ flex: 0 0 41.75%;
+ height: 100%;
+ background: green;
+ }
}
</style>
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/index.vue b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
index cc09d14..876f4b5 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/index.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="bedside-auxiliary-screen-container">
+ <div class="bedside-auxiliary-screen-container" :style="{ backgroundColor: backgroundColor }">
<Header />
<div class="bedside-auxiliary-screen-content">
<div class="content-position"></div>
@@ -20,11 +20,21 @@
const UnplannedSchedule = defineAsyncComponent(() => import('./components/UnplannedSchedule.vue'));
// 未签到时的组件
const NotSignedIn = defineAsyncComponent(() => import('./components/NotSignedIn.vue'));
+// 已签到时的组件
+const SignedIn = defineAsyncComponent(() => import('./components/SignedIn.vue'));
// 治疗中的组件
const UnderTreatment = defineAsyncComponent(() => import('./components/UnderTreatment.vue'));
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const cotentHeight = ref(0);
+const backgroundColor = computed(() => {
+ let color = '#DAE5EC';
+ // 如果是未排班、加载中或未签到页面，背景色为白色
+ if ([EPageType.NOT_INIT, EPageType.LOADING, EPageType.UNPLANNED_SCHEDULE].includes(bedsideAuxiliaryScreenStore.deviceData.pageType)) {
+ color = '#fff';
+ }
+ return color;
+});
const currentComponent = computed(() => {
let name: any = UnplannedSchedule;
@@ -38,7 +48,10 @@
}
// 已签到
else if (bedsideAuxiliaryScreenStore.deviceData.pageType === EPageType.SIGNED_IN) {
- } else {
+ name = SignedIn;
+ }
+ // 透析中
+ else {
name = UnderTreatment;
}
return name;
@@ -68,6 +81,7 @@
box-sizing: border-box;
}
.bedside-auxiliary-screen-container {
+ background-color: #409eff;
.bedside-auxiliary-screen-content {
padding: 6px 12px 0;
}
--
Gitblit v1.8.0