From 64aaf44b6b2948631ebd0d9840d51e5e31ae5479 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 25 七月 2025 01:44:25 +0800
Subject: [PATCH] Merge branch 'ID1825-床旁副屏改版' into test
---
src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue | 441 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 441 insertions(+), 0 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
new file mode 100644
index 0000000..68e24e7
--- /dev/null
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
@@ -0,0 +1,441 @@
+<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="xinlvImg"
+ background-color="#ffffff"
+ header-class-name="mihi-header"
+ >
+ <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="zlmsImg"
+ background-color="#ffffff"
+ class="row1-col3-row1-item"
+ header-class-name="mihi-header"
+ >
+ <div class="item-box dialysis-mode-content">
+ {{ pageData.dialysisPlan }}
+ </div>
+ </Card>
+ <Card
+ title="治疗状态"
+ :icon="zlztImg"
+ background-color="#ffffff"
+ class="row1-col3-row1-item"
+ header-class-name="mihi-header"
+ >
+ <div class="item-box treatment-status">已签到</div>
+ </Card>
+ </div>
+ <Card
+ title="处方脱水量"
+ :icon="cljdImg"
+ background-color="#ffffff"
+ class="row1-col3-row2"
+ header-class-name="mihi-header"
+ >
+ <div class="item-box prescription-ehydration-olume">
+ {{ pageData.prescriptionDehydrationVolume }} L
+ </div>
+ </Card>
+ </div>
+ <div class="row1-col4">
+ <Card
+ title="透析器(显示规格)"
+ :icon="txqImg"
+ background-color="#ffffff"
+ class="row1-col4-row"
+ header-class-name="mihi-header"
+ >
+ <div class="item-box dialyzer">
+ {{ pageData.dialyzer }}
+ </div>
+ </Card>
+ <Card
+ title="脱水量详情"
+ :icon="cljdImg"
+ background-color="#ffffff"
+ class="row1-col4-row"
+ header-class-name="mihi-header"
+ >
+ <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="tizhongImg"
+ background-color="#ffffff"
+ class="row2-item"
+ header-class-name="big-header"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.dryWeight }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="透前体重"
+ :icon="tizhongImg"
+ background-color="#ffffff"
+ class="row2-item"
+ header-class-name="big-header"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.preDialysisWeight }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="上次透后体重"
+ :icon="tizhongImg"
+ background-color="#ffffff"
+ class="row2-item"
+ header-class-name="big-header"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{
+ pageData.weightAfterLastDialysis
+ }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="体重增长"
+ :icon="tizhongImg"
+ background-color="#ffffff"
+ class="row2-item"
+ header-class-name="big-header"
+ >
+ <div class="weight-box">
+ <span v-if="pageData.weightIncreaseRate > 0" class="weight-text">+</span>
+ <span class="weight-text">{{ pageData.weightIncrease }}</span>
+ <span class="unit-text">kg</span>
+ </div>
+ </Card>
+ <Card
+ title="增长率"
+ :icon="tizhongImg"
+ background-color="#ffffff"
+ class="row2-item"
+ header-class-name="big-header"
+ >
+ <div class="weight-box">
+ <span class="weight-text">{{ pageData.weightIncreaseRate }}</span>
+ <span class="unit-text">%</span>
+ </div>
+ </Card>
+ </div>
+ <div class="row3">
+ <BlockBotttom
+ :icon="dingShiImg"
+ text="定时任务"
+ backgroundColor="#20C6B6"
+ @click="() => onScheduledTasksClick()"
+ class="btn"
+ />
+ <BlockBotttom
+ :icon="jiaoHaoImg"
+ text="叫号"
+ backgroundColor="#20C6B6"
+ @click="() => onCallBumberClick()"
+ class="btn"
+ />
+ <BlockBotttom
+ :icon="kaiShiImg"
+ text="开始"
+ backgroundColor="#409EFF"
+ @click="() => onStartClick()"
+ class="btn"
+ />
+ </div>
+ </div>
+</template>
+<script lang="ts" setup name="SignedIn">
+import { computed } from "vue";
+// @ts-ignore
+import Card from "../components/Card.vue";
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import tslImg from "@/img/tsl.png";
+import dingShiImg from "@/img/dingshi2.png";
+import jiaoHaoImg from "@/img/jiaoHao.png";
+import kaiShiImg from "@/img/kaiShi.png";
+import xinlvImg from "@/img/xinlv.png";
+import zlmsImg from "@/img/zlms.png";
+import zlztImg from '@/img/txzt.png';
+import cljdImg from "@/img/cljd.png";
+import txqImg from "@/img/txq.png";
+import tizhongImg from "@/img/tizhong.png";
+
+import {
+ getItemName,
+ formatTestColr,
+ formatTestFlag,
+} from "@/store/type/bedsideAuxiliaryScreen.type";
+// @ts-ignore
+import BlockBotttom from "../components/BlockBotttom.vue";
+import { ElMessage } from "element-plus/es";
+
+interface Props {
+ height: number;
+}
+const props = defineProps<Props>();
+
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+
+const pageData = computed(() => {
+ return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
+ patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
+ });
+});
+
+/** 点击定时任务 */
+const onScheduledTasksClick = () => {};
+
+const onCallBumberClick = () => {
+ ElMessage({
+ message: "功能开发中，敬请期待！",
+ type: "warning",
+ });
+};
+
+const onStartClick = () => {
+ ElMessage({
+ message: "功能开发中，敬请期待！",
+ type: "warning",
+ });
+};
+</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: 21.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: 13.33%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding-right: 13px;
+ overflow: hidden;
+ background: #ffffff;
+ border-radius: 2px;
+ .btn {
+ margin-left: 9px;
+ }
+ }
+ .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;
+ }
+ }
+ // card header class
+ :deep(.mihi-header) {
+ flex: 0 0 4px;
+ .card-icon {
+ width: 4px;
+ height: 4px;
+ }
+ .card-title {
+ font-size: 4px;
+ }
+ }
+ :deep(.big-header) {
+ flex: 0 0 9px;
+ .card-icon {
+ width: 9px;
+ height: 9px;
+ }
+ .card-title {
+ font-size: 5px;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0