From ecfcfee4d3bb36be356a78a226f4de8ca23ff745 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期一, 15 九月 2025 13:33:25 +0800
Subject: [PATCH] ID1766-暂存
---
src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue | 586 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 359 insertions(+), 227 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
index 23651b7..4d13f31 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/SignedIn.vue
@@ -14,9 +14,9 @@
<div class="col row1-col2">
<Card
title="治疗模式"
- :icon="zlmsImg"
+ :icon="tslImg"
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">
@@ -44,9 +44,9 @@
<div class="col row1-col3">
<Card
title="置换总量"
- :icon="zlmsImg"
+ :icon="zlztImg"
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">
@@ -55,9 +55,9 @@
</Card>
<Card
title="透析时长"
- :icon="zlmsImg"
+ :icon="cljdImg"
background-color="#ffffff"
- class="row1-col3-row2"
+ class="mini-card row1-col3-row2"
header-class-name="mihi-header"
>
<div class="item-box dialysis-duration">
@@ -68,9 +68,9 @@
<div class="col row1-col4">
<Card
title="透析器"
- :icon="zlmsImg"
+ :icon="txqImg"
background-color="#ffffff"
- class="row1-col4-row1"
+ class="mini-card row1-col4-row1"
header-class-name="mihi-header"
>
<div class="item-box dialyzer">
@@ -79,9 +79,9 @@
</Card>
<Card
title="抗凝剂"
- :icon="zlmsImg"
+ :icon="tslImg"
background-color="#ffffff"
- class="row1-col4-row2"
+ class="mini-card row1-col4-row2"
header-class-name="mihi-header"
>
<div class="item-box anticoagulant">
@@ -100,6 +100,8 @@
item.是否为追加 ? item.追加剂量 : item.维持剂量
}}{{ item.单位 }}</span
>
+ </div>
+ <div class="list-item-num">
<span>总量：{{ item.总量 }}{{ item.单位 }}</span>
</div>
</div>
@@ -127,7 +129,7 @@
<template v-if="pageData.最近最大脱水量透析时长"
>/
<span class="level-dete">{{
- pageData.最近最大脱水量透析时长
+ formatDuration(pageData.最近最大脱水量透析时长)
}}</span>
</template>
</div>
@@ -139,9 +141,9 @@
</Card>
<Card
title="处方备注"
- :icon="zlmsImg"
+ :icon="maibo2Img"
background-color="#ffffff"
- class="row1-col5-row2"
+ class="mini-card row1-col5-row2"
header-class-name="mihi-header"
>
<div class="item-box prescription-remarks">
@@ -155,9 +157,9 @@
<div class="row2-col1-row1">
<Card
title="处方血流量"
- :icon="zlmsImg"
+ :icon="cljdImg"
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">
@@ -166,9 +168,9 @@
</Card>
<Card
title="处方钠"
- :icon="zlmsImg"
+ :icon="cljdImg"
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">
@@ -179,9 +181,9 @@
<div class="row2-col1-row2">
<Card
title="透析液流量"
- :icon="zlmsImg"
+ :icon="cljdImg"
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">
@@ -190,9 +192,9 @@
</Card>
<Card
title="透析液种类"
- :icon="zlmsImg"
+ :icon="cljdImg"
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">
@@ -203,9 +205,9 @@
</div>
<Card
title="治疗状态"
- :icon="zlmsImg"
+ :icon="zlztImg"
background-color="#ffffff"
- class="row2-col1-row3"
+ class="mini-card row2-col1-row3"
header-class-name="mihi-header"
>
<div class="item-box treatment-status">
@@ -216,9 +218,9 @@
<div class="col row2-col2">
<Card
title="参考指标"
- :icon="zlmsImg"
+ :icon="tizhongImg"
background-color="#ffffff"
- class="mini-card reference-indicators"
+ class="reference-indicators"
header-class-name="mihi-header"
>
<template #right>
@@ -227,7 +229,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 +239,20 @@
</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>
+ <td class="flex-td">
<span class="sub-text">(透前-干体重)</span
- >{{ pageData.体重增持_透前_干体重 }}kg
+ ><span class="text-right">{{ weightGain2 }}kg</span>
</td>
</tr>
<!-- <tr>
@@ -259,15 +261,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>
@@ -308,10 +310,14 @@
class="btn"
/>
</div>
+ <!-- 定时任务 -->
+ <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
+ <!-- 开始透析组件 -->
+ <StartDialysis ref="startDialysisRef" />
</div>
</template>
<script lang="ts" setup name="SignedIn">
-import { computed, onMounted, ref } from "vue";
+import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
@@ -319,6 +325,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";
@@ -330,6 +337,7 @@
import txqImg from "@/img/txq.png";
import tizhongImg from "@/img/tizhong.png";
import yizhuImg from "@/img/yizhu.png";
+import maibo2Img from "@/img/maibo2.png";
import {
getItemName,
@@ -339,7 +347,11 @@
} from "@/store/type/bedsideAuxiliaryScreen.type";
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
-import { ElMessage } from "element-plus/es";
+import { ElMessage } from "element-plus";
+const ScheduledTaskDialog = defineAsyncComponent(
+ () => import("../components/ScheduledTask.vue")
+);
+const StartDialysis = defineAsyncComponent(() => import('../components/StartDialysis/index.vue'));
interface Props {
height: number;
@@ -349,6 +361,8 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const bloodPressureRectangularChart = ref<HTMLElement | null>(null);
+const scheduledTaskDialogRef = ref<any>(null);
+const startDialysisRef = ref<any>(null);
const pageData = computed(() => {
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
@@ -356,17 +370,72 @@
});
});
+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;
+});
+
+watch(
+ () => pageData.value.四点血压图数据,
+ (newVal) => {
+ genderBloodPressureRectangularChart(newVal);
+ }
+);
+
/** 点击定时任务 */
-const onScheduledTasksClick = () => {};
+const onScheduledTasksClick = () => {
+ if (
+ !bedsideAuxiliaryScreenStore.deviceCode ||
+ !bedsideAuxiliaryScreenStore.deviceData.deviceCode
+ )
+ return ElMessage.warning("未初始化或正在进行初始化操作中");
+ scheduledTaskDialogRef.value?.openDialog();
+};
const onCallBumberClick = () => {
ElMessage({
@@ -376,198 +445,197 @@
};
const onStartClick = () => {
- ElMessage({
- message: "功能开发中，敬请期待！",
- type: "warning",
- });
+ if (
+ !bedsideAuxiliaryScreenStore.deviceCode ||
+ !bedsideAuxiliaryScreenStore.deviceData.deviceCode
+ )
+ return ElMessage.warning("未初始化或正在进行初始化操作中");
+ if (!bedsideAuxiliaryScreenStore.userInfo?.token)
+ return ElMessage.warning("请登录");
+ startDialysisRef.value?.openDialog();
};
-const genderBloodPressureRectangularChart = (datas: any) => {
- if (bloodPressureRectangularChart.value) {
- const benchmarkData = {
- width: 386,
- height: 280,
- };
- // 获取容器实际宽高
- const containerWidth = bloodPressureRectangularChart.value.offsetWidth;
- const containerHeight = bloodPressureRectangularChart.value.offsetHeight;
- // 等比例缩放因子
- const scale = Math.min(
- containerWidth / benchmarkData.width,
- containerHeight / benchmarkData.height
- );
- // 拿到 canvas
- let canvas = bloodPressureRectangularChart.value.querySelector("canvas");
- if (!canvas) {
- canvas = document.createElement("canvas");
- bloodPressureRectangularChart.value.appendChild(canvas);
- }
+const genderBloodPressureRectangularChart = (
+ datas: 四点血压图数据[] | null
+) => {
+ if (!bloodPressureRectangularChart.value) return;
- // 设置 canvas 尺寸
- canvas.width = benchmarkData.width * scale;
- canvas.height = benchmarkData.height * scale;
- canvas.style.width = `${canvas.width}px`;
- canvas.style.height = `${canvas.height}px`;
+ const benchmarkData = { width: 386, height: 280 };
- const ctx = canvas.getContext("2d");
- if (!ctx) return;
+ // 获取容器宽高（90% 缩放）
+ const containerWidth = bloodPressureRectangularChart.value.offsetWidth * 0.9;
+ const containerHeight =
+ bloodPressureRectangularChart.value.offsetHeight * 0.9;
- // 清除画布
- ctx.clearRect(0, 0, canvas.width, canvas.height);
+ // 获取设备像素比
+ const dpr = window.devicePixelRatio || 1;
- // 按缩放因子缩放绘制环境
- ctx.save();
- // ctx.scale(scale, scale);
+ // 等比例缩放因子（保持比例）
+ const scale = Math.min(
+ containerWidth / benchmarkData.width,
+ containerHeight / benchmarkData.height
+ );
- // 设置字体样式
- ctx.font = `12px Arial`;
- ctx.textAlign = "center";
+ // 计算实际画布 CSS 尺寸
+ const cssWidth = benchmarkData.width * scale;
+ const cssHeight = benchmarkData.height * scale;
- // 处理数据
- const measurements = [
- { systolic: 143, diastolic: 74 },
- { systolic: 136, diastolic: 71 },
- { 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;
- // }
-
- const chartHeight = canvas.height;
- const chartWidth = canvas.width;
-
- // 限所在位置 200
- const upperLimitY = chartHeight * 0.5;
- ctx.beginPath();
- ctx.moveTo(0, upperLimitY);
- ctx.lineTo(chartWidth, upperLimitY);
- ctx.strokeStyle = "red";
- ctx.lineWidth = 1;
- ctx.stroke();
-
- // 下限所在位置 140
- const lowerLimitY = chartHeight * (1 - 0.2857);
- console.log("lowerLimitY:", lowerLimitY);
- ctx.beginPath();
- ctx.moveTo(0, lowerLimitY);
- ctx.lineTo(chartWidth, lowerLimitY);
- ctx.strokeStyle = "blue";
- ctx.lineWidth = 1;
- ctx.stroke();
-
- // 绘制收缩压折线图
- const measurementWidth = canvas.width / (measurements.length + 1);
-
- // 收缩压线
- let systolicEnd = { x: null, y: null };
- ctx.beginPath();
- ctx.moveTo(
- measurementWidth,
- chartHeight - measurements[0].systolic * scale
- );
- for (let i = 1; i < measurements.length; i++) {
- const x = (i + 1) * measurementWidth;
- ctx.lineTo(x, chartHeight - measurements[i].systolic * scale);
- if (i === measurements.length - 1) {
- systolicEnd.x = x;
- systolicEnd.y = chartHeight - measurements[i].systolic * scale;
- }
- }
- ctx.strokeStyle = "black";
- ctx.lineWidth = 1;
- ctx.stroke();
-
- // 舒张压线
- let diastolicEnd = { x: null, y: null };
- ctx.beginPath();
- ctx.moveTo(
- measurementWidth,
- chartHeight - measurements[0].diastolic * scale
- );
- for (let i = 1; i < measurements.length; i++) {
- const x = (i + 1) * measurementWidth;
- ctx.lineTo(x, chartHeight - measurements[i].diastolic * scale);
- if (i === measurements.length - 1) {
- diastolicEnd.x = x;
- diastolicEnd.y = chartHeight - measurements[i].diastolic * scale;
- }
- }
-
- // 连接收缩压和舒张压的起始点和结束点
- ctx.moveTo(
- measurementWidth,
- chartHeight - measurements[0].systolic * scale
- );
- ctx.lineTo(
- measurementWidth,
- chartHeight - measurements[0].diastolic * scale
- );
- ctx.moveTo(systolicEnd.x, systolicEnd.y);
- ctx.lineTo(diastolicEnd.x, diastolicEnd.y);
-
- ctx.strokeStyle = "black";
- ctx.lineWidth = 1;
- ctx.stroke();
-
- const baseFontSize = 24;
- ctx.font = `${baseFontSize * scale}px Arial`;
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- ctx.fillStyle = "black";
-
- measurements.forEach((m, i) => {
- const x = (i + 1) * measurementWidth;
- ctx.fillText(
- m.systolic.toString(),
- x,
- chartHeight - m.systolic * scale - 5
- );
- ctx.fillText(
- m.diastolic.toString(),
- x,
- chartHeight - m.diastolic * scale + 10
- );
- });
-
- // 绘制圆柱体
- const 计算脱水量刻度 = 100 / datas.超滤总量;
- 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; // 透后体重减干体重的差值
- drawCylinder(
- ctx,
- cylinderX,
- cylinderY,
- cylinderRadius,
- cylinderHeight,
- 超滤总量,
- 脱水百分比,
- 透后体重减干体重的差值
- );
+ // 获取 canvas
+ let canvas = bloodPressureRectangularChart.value.querySelector("canvas");
+ if (!canvas) {
+ canvas = document.createElement("canvas");
+ bloodPressureRectangularChart.value.appendChild(canvas);
}
+
+ // 物理像素
+ canvas.width = cssWidth * dpr;
+ canvas.height = cssHeight * dpr;
+ canvas.style.width = `${cssWidth}px`;
+ canvas.style.height = `${cssHeight}px`;
+
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ // 先清除画布（按物理像素）
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // 缩放到实际坐标系（dpr & scale）
+ ctx.save();
+ ctx.scale(dpr * scale, dpr * scale);
+
+ // 基准坐标系：benchmarkData.width × benchmarkData.height
+ const chartWidth = benchmarkData.width;
+ const chartHeight = benchmarkData.height;
+
+ // ========== 绘制基线 ==========
+ const upperLimitY = chartHeight * 0.5; // 200
+ ctx.beginPath();
+ ctx.moveTo(0, upperLimitY);
+ ctx.lineTo(chartWidth, upperLimitY);
+ ctx.strokeStyle = "red";
+ ctx.lineWidth = 1;
+ ctx.stroke();
+
+ const lowerLimitY = chartHeight * (1 - 0.2857); // 140
+ ctx.beginPath();
+ ctx.moveTo(0, lowerLimitY);
+ ctx.lineTo(chartWidth, lowerLimitY);
+ ctx.strokeStyle = "blue";
+ ctx.lineWidth = 1;
+ ctx.stroke();
+
+ // ========== 血压数据 ==========
+ const measurements = [
+ {
+ systolic: datas?.[0]?.血压1_透前收缩压 ?? 0,
+ diastolic: datas?.[0]?.血压1_透前舒张压 ?? 0,
+ },
+ {
+ systolic: datas?.[0]?.血压2_前半程最低收缩压 ?? 0,
+ diastolic: datas?.[0]?.血压2_前半程最低舒张压 ?? 0,
+ },
+ {
+ systolic: datas?.[0]?.血压3_后半程最低收缩压 ?? 0,
+ diastolic: datas?.[0]?.血压3_后半程最低舒张压 ?? 0,
+ },
+ {
+ systolic: datas?.[0]?.血压4_透后收缩压 ?? 0,
+ diastolic: datas?.[0]?.血压4_透后舒张压 ?? 0,
+ },
+ ];
+
+ const measurementWidth = chartWidth / (measurements.length + 1);
+
+ // 收缩压线
+ let systolicEnd = { x: 0, y: 0 };
+ ctx.beginPath();
+ ctx.moveTo(measurementWidth, chartHeight - measurements[0].systolic);
+ for (let i = 1; i < measurements.length; i++) {
+ const x = (i + 1) * measurementWidth;
+ ctx.lineTo(x, chartHeight - measurements[i].systolic);
+ if (i === measurements.length - 1) {
+ systolicEnd = { x, y: chartHeight - measurements[i].systolic };
+ }
+ }
+ ctx.strokeStyle = "black";
+ ctx.stroke();
+
+ // 舒张压线
+ let diastolicEnd = { x: 0, y: 0 };
+ ctx.beginPath();
+ ctx.moveTo(measurementWidth, chartHeight - measurements[0].diastolic);
+ for (let i = 1; i < measurements.length; i++) {
+ const x = (i + 1) * measurementWidth;
+ ctx.lineTo(x, chartHeight - measurements[i].diastolic);
+ if (i === measurements.length - 1) {
+ diastolicEnd = { x, y: chartHeight - measurements[i].diastolic };
+ }
+ }
+ ctx.strokeStyle = "black";
+ ctx.stroke();
+
+ // 连接起始 & 结束
+ ctx.beginPath();
+ ctx.moveTo(measurementWidth, chartHeight - measurements[0].systolic);
+ ctx.lineTo(measurementWidth, chartHeight - measurements[0].diastolic);
+ ctx.moveTo(systolicEnd.x, systolicEnd.y);
+ ctx.lineTo(diastolicEnd.x, diastolicEnd.y);
+ ctx.stroke();
+
+ // ========== 文本 ==========
+ const baseFontSize = 24;
+ ctx.font = `${baseFontSize}px Arial`;
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ ctx.fillStyle = "black";
+
+ measurements.forEach((m, i) => {
+ const x = (i + 1) * measurementWidth;
+ ctx.fillText(m.systolic.toString(), x, chartHeight - m.systolic - 5);
+ ctx.fillText(m.diastolic.toString(), x, chartHeight - m.diastolic + 10);
+ });
+
+ // ========== 圆柱体 ==========
+ const 计算脱水量刻度 = 100 / (datas?.[0]?.超滤总量 || 1);
+ const cylinderX = chartWidth * 0.9;
+ const cylinderY = chartHeight;
+ const cylinderRadius = 6;
+ const cylinderHeight = 计算脱水量刻度 * (datas?.[0]?.超滤总量 || 0);
+ const 体重增长_透前减干体重 = weightGain2.value;
+ const 透前减干体重减超滤总量差值 =
+ Math.round((体重增长_透前减干体重 - (datas?.[0]?.超滤总量 || 0)) * 10) / 10;
+
+ drawCylinder(
+ ctx,
+ chartHeight,
+ 1, // 因为已经 scale 过了
+ cylinderX,
+ cylinderY,
+ cylinderRadius,
+ cylinderHeight,
+ datas?.[0]?.超滤总量?.toString() ?? "0 L",
+ datas?.[0]?.脱水百分比 ?? 0,
+ datas?.[0]?.透后体重减干体重的差值 ?? 0,
+ 体重增长_透前减干体重,
+ 透前减干体重减超滤总量差值
+ );
+
+ ctx.restore(); // 恢复
};
const drawCylinder = (
ctx: CanvasRenderingContext2D,
+ canvasHeight: number,
+ scale: number,
x: number,
y: number,
radius: number,
height: number,
超滤总量: string, // 超滤总量
脱水百分比: number, // 脱水百分比
- 透后体重减干体重的差值: number // 透后体重减干体重的差值
+ 透后体重减干体重的差值: number, // 透后体重减干体重的差值
+ 体重增长_透前减干体重: number, // 体重增长_透前减干体重
+ 透前减干体重减超滤总量差值: number // 透前减干体重减超滤总量差值
) => {
ctx.beginPath();
ctx.arc(x, y + height, radius, 0, Math.PI * 2);
@@ -593,21 +661,58 @@
ctx.fill();
ctx.stroke();
- // 添加文本说明
- ctx.font = "16px Arial";
- ctx.textAlign = "center";
- ctx.fillStyle = "#409EFF";
- ctx.fillText(超滤总量, 180, 280 - height - 10); // 文本位于圆柱上方一点
+ const cylinderWidth = radius;
+ const textX = x + cylinderWidth + 20; // 文本位置在圆柱体右侧
- if (透后体重减干体重的差值 > 0) {
- ctx.font = "16px Arial";
+ const baseFontSize = 16;
+
+ // 添加文本说明
+
+ // 如果超滤总量 与 体重增长_透前减干体重 相等，则显示 "/超滤总量"
+ if (Number(超滤总量) && 体重增长_透前减干体重 === Number(超滤总量)) {
+ ctx.font = `${baseFontSize * scale}px Arial`;
+ ctx.textAlign = "center";
+ ctx.fillStyle = "#07c160";
+ ctx.fillText(
+ "/" + 超滤总量,
+ textX,
+ canvasHeight - height + height * 0.3 + 10
+ );
+ } else {
+ // 透析前-干体重
+ ctx.font = `${baseFontSize * scale}px Arial`;
+ ctx.textAlign = "center";
+ ctx.fillStyle = "#409EFF";
+ ctx.fillText(体重增长_透前减干体重 + "", textX, canvasHeight - height + 10);
+ // 超滤总量
+ ctx.font = `${baseFontSize * scale}px Arial`;
+ ctx.textAlign = "center";
+ ctx.fillStyle = "#07c160";
+ ctx.fillText(超滤总量, textX, canvasHeight - height + height * 0.3 + 10);
+ }
+
+ if (透前减干体重减超滤总量差值 > 0) {
+ ctx.font = `${baseFontSize * scale}px Arial`;
ctx.textAlign = "center";
ctx.fillStyle = "#000000";
- ctx.fillText(透后体重减干体重的差值 + "", x, 280); // 文本位于圆柱上方一点
+ ctx.fillText(透前减干体重减超滤总量差值 + "", textX, canvasHeight - 10); // 文本位于圆柱上方一点
}
};
+
+function formatDuration(input: string): string {
+ const match = input.match(/(\d+)小时(\d+)分钟/);
+ if (!match) return input; // 如果不符合格式，直接返回原字符串
+
+ const hours = parseInt(match[1], 10);
+ const minutes = parseInt(match[2], 10);
+
+ if (minutes > 0) {
+ return `${hours}h${minutes}min`;
+ }
+ return `${hours}h`;
+}
onMounted(() => {
- genderBloodPressureRectangularChart({});
+ genderBloodPressureRectangularChart(pageData.value.四点血压图数据);
});
</script>
<style lang="less" scoped>
@@ -724,7 +829,7 @@
.dialyzer {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
- font-size: 11px;
+ font-size: 9px;
color: #333333;
text-align: center;
font-style: normal;
@@ -742,7 +847,7 @@
text-align: left;
font-style: normal;
.list-item-name {
- margin-bottom: 2px;
+ // margin-bottom: 2px;
}
}
}
@@ -943,6 +1048,17 @@
}
.item-box {
height: 100%;
+ overflow-y: auto !important;
+}
+: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">
@@ -980,6 +1096,7 @@
font-style: normal;
}
& td:last-child {
+ position: relative;
width: 64%;
border-right: none;
font-family: PingFangSC, PingFang SC;
@@ -988,11 +1105,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