From 196d70335a24336c982d3ef3527dc08575adc619 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期三, 27 八月 2025 14:35:31 +0800
Subject: [PATCH] ID1956-暂存
---
src/store/type/bedsideAuxiliaryScreen.type.ts | 31 +++++++
src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue | 180 +++++++++++++++++++++++++++++++-------------
2 files changed, 158 insertions(+), 53 deletions(-)
diff --git a/src/store/type/bedsideAuxiliaryScreen.type.ts b/src/store/type/bedsideAuxiliaryScreen.type.ts
index 253b689..b6b8971 100644
--- a/src/store/type/bedsideAuxiliaryScreen.type.ts
+++ b/src/store/type/bedsideAuxiliaryScreen.type.ts
@@ -1,5 +1,6 @@
import { tryConvertToInt, deepClone } from "@/utils/utils";
import { Local } from "@/utils/storage";
+import dayjs from "dayjs";
export interface IotInfo {
属性历史列表: any[];
床号: string;
@@ -130,6 +131,29 @@
钙: number | null;
上次透析血压列表: any[];
上次透析超滤总量: number | null;
+ 四点血压图数据: 四点血压图数据[] | null;
+}
+
+export interface 四点血压图数据 {
+ 干体重: number | null;
+ 透析日期周几: number | null;
+ 透前体重: number | null;
+ 置换总量: number | null;
+ 脱水百分比: number | null;
+ 血压2_前半程最低舒张压: number | null;
+ 血压4_透后舒张压: number | null;
+ 血压4_透后收缩压: number | null;
+ 超滤总量: number | null;
+ 透析时间: string | null; // 格式为 HH:mm
+ 血压1_透前收缩压: number | null;
+ 实际超滤量: number | null;
+ 血压3_后半程最低收缩压: number | null;
+ 透析日期: number | null; // 时间戳（毫秒）
+ 血压3_后半程最低舒张压: number | null;
+ 透后体重: number | null;
+ 血压2_前半程最低收缩压: number | null;
+ 透后体重减干体重的差值: number | null;
+ 血压1_透前舒张压: number | null;
}
export interface VascularAccess {
@@ -343,6 +367,7 @@
本次透析单所属日期: string; // 本次透析单所属日期
体重增长_透前_上次透后: number | null; // 体重增长(透前-上次透后)
体重增持_透前_干体重: number | null; // 体重增长(透前-干体重)
+ 四点血压图数据: 四点血压图数据[];
}
export const defaultSignedIn = (): SignedIn => {
@@ -376,6 +401,7 @@
本次透析单所属日期: "",
体重增长_透前_上次透后: null, // 体重增长(透前-上次透后)
体重增持_透前_干体重: null, // 体重增长(透前-干体重)
+ 四点血压图数据: [],
};
};
@@ -593,7 +619,12 @@
signedIn.本次透析单所属日期 = "";
signedIn.体重增长_透前_上次透后 = signedIn.透前体重 - signedIn.上次透后体重;
signedIn.体重增持_透前_干体重 = signedIn.透前体重 - signedIn.干体重;
+ signedIn.四点血压图数据 = seeMsg.透析状态?.四点血压图数据 ?? [];
+ if (signedIn.四点血压图数据 && signedIn.四点血压图数据.length > 0) {
+ signedIn.上次透析单所属日期 = dayjs(signedIn.四点血压图数据[0].透析日期).format("YYYY-MM-DD");
+ // signedIn.本次透析单所属日期 = dayjs(signedIn.四点血压图数据[0].透析日期).format("YYYY-MM-DD");
+ }
result.signedIn = signedIn;
}
// 剩下的全使用治疗中的页面
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
index 23651b7..ef7bb57 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
@@ -16,7 +16,7 @@
title="治疗模式"
:icon="zlmsImg"
background-color="#ffffff"
- class="row1-col2-row1"
+ class="mini-card row1-col2-row1"
header-class-name="mihi-header"
>
<div class="item-box dialysis-mode-content">
@@ -30,7 +30,7 @@
title="处方脱水量"
:icon="cljdImg"
background-color="#ffffff"
- class="row1-col2-row2"
+ class="mini-card row1-col2-row2"
header-class-name="mihi-header"
>
<div class="item-box prescription-ehydration-olume">
@@ -46,7 +46,7 @@
title="置换总量"
:icon="zlmsImg"
background-color="#ffffff"
- class="row1-col3-row1"
+ class="mini-card row1-col3-row1"
header-class-name="mihi-header"
>
<div class="item-box total-amount-replacement">
@@ -57,7 +57,7 @@
title="透析时长"
:icon="zlmsImg"
background-color="#ffffff"
- class="row1-col3-row2"
+ class="mini-card row1-col3-row2"
header-class-name="mihi-header"
>
<div class="item-box dialysis-duration">
@@ -70,7 +70,7 @@
title="透析器"
:icon="zlmsImg"
background-color="#ffffff"
- class="row1-col4-row1"
+ class="mini-card row1-col4-row1"
header-class-name="mihi-header"
>
<div class="item-box dialyzer">
@@ -81,7 +81,7 @@
title="抗凝剂"
:icon="zlmsImg"
background-color="#ffffff"
- class="row1-col4-row2"
+ class="mini-card row1-col4-row2"
header-class-name="mihi-header"
>
<div class="item-box anticoagulant">
@@ -141,7 +141,7 @@
title="处方备注"
:icon="zlmsImg"
background-color="#ffffff"
- class="row1-col5-row2"
+ class="mini-card row1-col5-row2"
header-class-name="mihi-header"
>
<div class="item-box prescription-remarks">
@@ -157,7 +157,7 @@
title="处方血流量"
:icon="zlmsImg"
background-color="#ffffff"
- class="row2-col1-row1-col1"
+ class="mini-card row2-col1-row1-col1"
header-class-name="mihi-header"
>
<div class="item-box blood-flow">
@@ -168,7 +168,7 @@
title="处方钠"
:icon="zlmsImg"
background-color="#ffffff"
- class="row2-col1-row1-col2"
+ class="mini-card row2-col1-row1-col2"
header-class-name="mihi-header"
>
<div class="item-box prescription-sodium">
@@ -181,7 +181,7 @@
title="透析液流量"
:icon="zlmsImg"
background-color="#ffffff"
- class="row2-col1-row2-col1"
+ class="mini-card row2-col1-row2-col1"
header-class-name="mihi-header"
>
<div class="item-box dialysis-fluid-flow-rate">
@@ -192,7 +192,7 @@
title="透析液种类"
:icon="zlmsImg"
background-color="#ffffff"
- class="row2-col1-row2-col2"
+ class="mini-card row2-col1-row2-col2"
header-class-name="mihi-header"
>
<div class="item-box types-dialysis-fluid">
@@ -205,7 +205,7 @@
title="治疗状态"
:icon="zlmsImg"
background-color="#ffffff"
- class="row2-col1-row3"
+ class="mini-card row2-col1-row3"
header-class-name="mihi-header"
>
<div class="item-box treatment-status">
@@ -218,7 +218,7 @@
title="参考指标"
:icon="zlmsImg"
background-color="#ffffff"
- class="mini-card reference-indicators"
+ class="reference-indicators"
header-class-name="mihi-header"
>
<template #right>
@@ -227,7 +227,7 @@
<table class="item-box reference-indicators-content">
<tbody>
<tr>
- <td>血压<br />超滤量<br />{{ pageData.上次透析单所属日期 }}</td>
+ <td>血压<br />超滤量<br /></td>
<td
ref="bloodPressureRectangularChart"
style="overflow: hidden"
@@ -237,20 +237,19 @@
</tr>
<tr>
<td>干体重</td>
- <td>{{ pageData.干体重 }}kg</td>
+ <td>{{ fourPointBloodPressureMap.干体重 }}kg</td>
</tr>
<tr>
<td>体重增长</td>
- <td>
+ <td class="flex-td">
<span class="sub-text">(透前-上次透后)</span
- >{{ pageData.体重增长_透前_上次透后 }}kg
+ ><span class="right-text">{{ weightGain1 }}kg</span>
</td>
</tr>
<tr>
<td>体重增长</td>
- <td>
- <span class="sub-text">(透前-干体重)</span
- >{{ pageData.体重增持_透前_干体重 }}kg
+ <td class="flex-td">
+ <span class="sub-text">(透前-干体重)</span><span class="text-right">{{ weightGain2 }}kg</span>
</td>
</tr>
<!-- <tr>
@@ -259,15 +258,15 @@
</tr> -->
<tr>
<td>透前体重</td>
- <td>{{ pageData.透前体重 }}kg</td>
+ <td>{{ fourPointBloodPressureMap?.透前体重 }}kg</td>
</tr>
<tr>
- <td>上次透后体重</td>
- <td>{{ pageData.上次透后体重 }}kg</td>
+ <td>透后体重</td>
+ <td>{{ fourPointBloodPressureMap?.透后体重 }}kg</td>
</tr>
<tr>
<td>透析时间</td>
- <td>{{ pageData.上次透析单所属日期 }}</td>
+ <td>{{ fourPointBloodPressureMap?.透析时间 }}</td>
</tr>
</tbody>
</table>
@@ -319,6 +318,7 @@
import Card from "../components/Card.vue";
import DoctorAdvice from "../components/DoctorAdvice/index.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import type { 四点血压图数据 } from "@/store/type/bedsideAuxiliaryScreen.type";
import tslImg from "@/img/tsl.png";
import dingShiImg from "@/img/dingshi2.png";
import jiaoHaoImg from "@/img/jiaoHao.png";
@@ -356,13 +356,54 @@
});
});
+const fourPointBloodPressureMap = computed(() => {
+ let result = {};
+ if (
+ pageData.value.四点血压图数据 &&
+ pageData.value.四点血压图数据.length > 0
+ ) {
+ result = pageData.value.四点血压图数据[0];
+ }
+ return result;
+});
+
const nowDateText = computed(() => {
- if (pageData.value.本次透析单所属日期) {
- let result = dayjs(pageData.value.本次透析单所属日期).format("YYYY-MM-DD");
- result += `(${dayjs(pageData.value.本次透析单所属日期).format("ddd")})`;
+ if (fourPointBloodPressureMap.value?.透析日期) {
+ let result = dayjs(fourPointBloodPressureMap.value?.透析日期).format(
+ "YYYY-MM-DD"
+ );
+ result += `(${dayjs(fourPointBloodPressureMap.value?.透析日期).format(
+ "ddd"
+ )})`;
return result;
}
return "";
+});
+
+const weightGain1 = computed(() => {
+ if (
+ pageData.value.四点血压图数据 &&
+ pageData.value.四点血压图数据.length > 1
+ ) {
+ const value =
+ pageData.value.四点血压图数据[0].透前体重 -
+ pageData.value.四点血压图数据[1].透后体重;
+ const formattedValue = Number.isInteger(value)
+ ? value
+ : Number(value.toFixed(1));
+ return formattedValue;
+ }
+ return "";
+});
+
+const weightGain2 = computed(() => {
+ const value =
+ fourPointBloodPressureMap.value.透前体重 -
+ fourPointBloodPressureMap.value.干体重;
+ const formattedValue = Number.isInteger(value)
+ ? value
+ : Number(value.toFixed(1));
+ return formattedValue;
});
/** 点击定时任务 */
@@ -381,15 +422,17 @@
type: "warning",
});
};
-const genderBloodPressureRectangularChart = (datas: any) => {
+const genderBloodPressureRectangularChart = (
+ datas: 四点血压图数据[] | null
+) => {
if (bloodPressureRectangularChart.value) {
const benchmarkData = {
width: 386,
height: 280,
};
// 获取容器实际宽高
- const containerWidth = bloodPressureRectangularChart.value.offsetWidth;
- const containerHeight = bloodPressureRectangularChart.value.offsetHeight;
+ const containerWidth = bloodPressureRectangularChart.value.offsetWidth * 0.9;
+ const containerHeight = bloodPressureRectangularChart.value.offsetHeight * 0.9;
// 等比例缩放因子
const scale = Math.min(
containerWidth / benchmarkData.width,
@@ -404,8 +447,8 @@
}
// 设置 canvas 尺寸
- canvas.width = benchmarkData.width * scale;
- canvas.height = benchmarkData.height * scale;
+ canvas.width = containerWidth;
+ canvas.height = containerHeight;
canvas.style.width = `${canvas.width}px`;
canvas.style.height = `${canvas.height}px`;
@@ -430,16 +473,15 @@
{ systolic: 139, diastolic: 73 },
{ systolic: 139, diastolic: 73 },
];
- // if (datas && datas.血压1_透前收缩压) {
- // measurements[0].systolic = datas?.血压1_透前收缩压 ?? null;
- // measurements[0].diastolic = datas?.血压1_透前舒张压 ?? null;
- // measurements[1].systolic = datas?.血压2_前半程最低收缩压 ?? null;
- // measurements[1].diastolic = datas?.血压2_前半程最低舒张压 ?? null;
- // measurements[2].systolic = datas?.血压3_后半程最低收缩压 ?? null;
- // measurements[2].diastolic = datas?.血压3_后半程最低舒张压 ?? null;
- // measurements[3].systolic = datas?.血压4_透后收缩压 ?? null;
- // measurements[3].diastolic = datas?.血压4_透后舒张压 ?? null;
- // }
+
+ measurements[0].systolic = datas[0]?.血压1_透前收缩压 ?? null;
+ measurements[0].diastolic = datas[0]?.血压1_透前舒张压 ?? null;
+ measurements[1].systolic = datas[0]?.血压2_前半程最低收缩压 ?? null;
+ measurements[1].diastolic = datas[0]?.血压2_前半程最低舒张压 ?? null;
+ measurements[2].systolic = datas[0]?.血压3_后半程最低收缩压 ?? null;
+ measurements[2].diastolic = datas[0]?.血压3_后半程最低舒张压 ?? null;
+ measurements[3].systolic = datas[0]?.血压4_透后收缩压 ?? null;
+ measurements[3].diastolic = datas[0]?.血压4_透后舒张压 ?? null;
const chartHeight = canvas.height;
const chartWidth = canvas.width;
@@ -538,16 +580,18 @@
});
// 绘制圆柱体
- const 计算脱水量刻度 = 100 / datas.超滤总量;
+ const 计算脱水量刻度 = 100 / datas[0]?.超滤总量;
const cylinderX = canvas.width * 0.9; // 圆柱体中心X坐标
const cylinderY = canvas.height; // 圆柱体中心Y坐标
const cylinderRadius = 6 * scale; // 圆柱体半径
- const cylinderHeight = 计算脱水量刻度 * datas.超滤总量 || 20; // 圆柱体高度
- const 超滤总量 = datas.超滤总量 || "0 L"; // 超滤总量
- const 脱水百分比 = datas.脱水百分比 || 0; // 脱水百分比
- const 透后体重减干体重的差值 = datas.透后体重减干体重的差值 || 0; // 透后体重减干体重的差值
+ const cylinderHeight = 计算脱水量刻度 * datas[0]?.超滤总量 * scale || 0; // 圆柱体高度
+ const 超滤总量 = datas[0]?.超滤总量 + "" || "0 L"; // 超滤总量
+ const 脱水百分比 = datas[0]?.脱水百分比 || 0; // 脱水百分比
+ const 透后体重减干体重的差值 = datas[0]?.透后体重减干体重的差值 || 0; // 透后体重减干体重的差值
drawCylinder(
ctx,
+ canvas.height,
+ scale,
cylinderX,
cylinderY,
cylinderRadius,
@@ -561,6 +605,8 @@
const drawCylinder = (
ctx: CanvasRenderingContext2D,
+ canvasHeight: number,
+ scale: number,
x: number,
y: number,
radius: number,
@@ -593,21 +639,23 @@
ctx.fill();
ctx.stroke();
+ const baseFontSize = 16;
+
// 添加文本说明
- ctx.font = "16px Arial";
+ ctx.font = `${baseFontSize * scale}px Arial`;
ctx.textAlign = "center";
ctx.fillStyle = "#409EFF";
- ctx.fillText(超滤总量, 180, 280 - height - 10); // 文本位于圆柱上方一点
+ ctx.fillText(超滤总量, x, canvasHeight - height - 5); // 文本位于圆柱上方一点
if (透后体重减干体重的差值 > 0) {
- ctx.font = "16px Arial";
+ ctx.font = `${baseFontSize * scale}px Arial`;
ctx.textAlign = "center";
ctx.fillStyle = "#000000";
- ctx.fillText(透后体重减干体重的差值 + "", x, 280); // 文本位于圆柱上方一点
+ ctx.fillText(透后体重减干体重的差值 + "", x, canvasHeight - 5); // 文本位于圆柱上方一点
}
};
onMounted(() => {
- genderBloodPressureRectangularChart({});
+ genderBloodPressureRectangularChart(pageData.value.四点血压图数据);
});
</script>
<style lang="less" scoped>
@@ -944,6 +992,16 @@
.item-box {
height: 100%;
}
+:deep(.mini-header) {
+ flex: 0 0 4px !important;
+ .card-icon {
+ width: 4px !important;
+ height: 4px !important;
+ }
+ .card-title {
+ font-size: 4px !important;
+ }
+}
</style>
// <style lang="less">
// .reference-indicators {
@@ -980,6 +1038,7 @@
font-style: normal;
}
& td:last-child {
+ position: relative;
width: 64%;
border-right: none;
font-family: PingFangSC, PingFang SC;
@@ -988,11 +1047,26 @@
color: #333333;
text-align: center;
font-style: normal;
+ &.flex-td {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ width: 100%;
+ }
.sub-text {
- font-size: 3.2px;
+ font-size: 3px;
color: #666;
margin-right: 1.2px;
+ white-space: nowrap;
}
+ // .text-right {
+ // position: absolute;
+ // right: 0;
+ // top: 50%;
+ // transform: translateY(-50%);
+ // font-size: 3px;
+ // color: #666;
+ // }
}
& tr:not(:first-child) td {
height: 6px;
--
Gitblit v1.8.0