From 86850a45ed466f32b3336940c7ed8f4dea700a93 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期四, 24 七月 2025 16:02:09 +0800
Subject: [PATCH] ID1625-治疗中页面暂存
---
package-lock.json | 5
src/store/type/bedsideAuxiliaryScreen.type.ts | 18 ++-
package.json | 1
src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue | 240 ++++++++++++++++++++++++++++++++++++++++++++---
4 files changed, 238 insertions(+), 26 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5383b81..da5de25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@vant/icons": "^3.0.2",
"@zxing/library": "^0.21.3",
"axios": "^1.9.0",
+ "dayjs": "^1.11.13",
"echarts": "^5.6.0",
"element-plus": "^2.9.2",
"event-source-polyfill": "^1.0.31",
@@ -1412,7 +1413,7 @@
},
"node_modules/dayjs": {
"version": "1.11.13",
- "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
"license": "MIT"
},
@@ -6127,7 +6128,7 @@
},
"dayjs": {
"version": "1.11.13",
- "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
},
"de-indent": {
diff --git a/package.json b/package.json
index 9eab2a0..a432161 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"@vant/icons": "^3.0.2",
"@zxing/library": "^0.21.3",
"axios": "^1.9.0",
+ "dayjs": "^1.11.13",
"echarts": "^5.6.0",
"element-plus": "^2.9.2",
"event-source-polyfill": "^1.0.31",
diff --git a/src/store/type/bedsideAuxiliaryScreen.type.ts b/src/store/type/bedsideAuxiliaryScreen.type.ts
index 13631fa..14fabbc 100644
--- a/src/store/type/bedsideAuxiliaryScreen.type.ts
+++ b/src/store/type/bedsideAuxiliaryScreen.type.ts
@@ -309,7 +309,9 @@
maximumDehydrationDuration: string; // 最大脱水量那天的时长
prescriptionRemarks: string; // 透析处方备注
abnormalItems: AnomalyIndex[]; // 异常指标列表
- prescriptionDialysisDuration: string; // 透析处方的时长（单位:小时）
+ prescriptionDialysisDurationHour: string; // 透析处方的时长（小时部分）
+ prescriptionDialysisDurationMin: string; // 透析处方的时长（分钟部分）
+ prescriptionDialysisDuration: number | null; // 透析处方的时长（单位：小时）
dialysisStartTime: number | null; // 透析开始时间(时间戳)
dialysisEndTime: number | null; // 透析结束时间(时间戳)
dialysisDuration: number | null; // 已透析时长(单位：分钟)
@@ -328,7 +330,7 @@
ktvList: KtvItem[]; // 实时ktv计算结果列表
}
-interface MonitoringRecord {
+export interface MonitoringRecord {
伸缩压: string; // 血压伸缩压
舒张压: string; // 血压舒张压
脉搏: string; // 脉搏
@@ -345,7 +347,8 @@
maximumDehydrationDuration: "",
prescriptionRemarks: "",
abnormalItems: [],
- prescriptionDialysisDuration: "",
+ prescriptionDialysisDurationHour: "",
+ prescriptionDialysisDurationMin: "",
dialysisStartTime: null,
dialysisEndTime: null,
dialysisDuration: null,
@@ -362,6 +365,7 @@
bloodVolumeMonitoring: null,
dialysisFluidFlowRate: null,
ktvList: [],
+ prescriptionDialysisDuration: null, // 透析处方的时长（单位：小时）
};
};
@@ -475,15 +479,19 @@
underTreatment.prescriptionRemarks = seeMsg.透析状态?.透析处方备注 ?? "";
underTreatment.abnormalItems = seeMsg.透析状态?.异常检验指标 ?? [];
underTreatment.prescriptionDialysisDuration =
+ seeMsg.透析状态?.透析处方的时长 ?? null;
+ underTreatment.prescriptionDialysisDurationHour =
seeMsg.透析状态?.透析处方的时长_小时 ?? "";
+ underTreatment.prescriptionDialysisDurationMin =
+ seeMsg.透析状态?.透析处方的时长_分钟 ?? "";
underTreatment.dialysisStartTime =
seeMsg.透析状态?.透析开始时间 ?? null;
underTreatment.dialysisEndTime = seeMsg.透析状态?.透析结束时间 ?? null;
underTreatment.dialysisDuration = seeMsg.透析状态?.iot_透析时间 ?? null;
underTreatment.prescriptionDehydrationVolume =
- seeMsg.透析状态?.处方脱水量 ?? null;
+ seeMsg.透析状态?.iot_脱水目标量 ?? null;
underTreatment.currentDehydrationVolume =
- seeMsg.透析状态?.实时脱水量 ?? null;
+ seeMsg.透析状态?.iot_当前脱水量 ?? null;
underTreatment.currentUltrafiltrationRate =
seeMsg.透析状态?.iot_脱水速率 ?? null;
underTreatment.currentBloodTemperature =
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
index b584ed6..57cde83 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
@@ -105,10 +105,15 @@
title="血压脉搏趋势图"
:icon="xinLv2Img"
background-color="#ffffff"
- class="mini-card left-row2-col3"
+ class="mini-card ktv-card left-row2-col3"
header-class-name="mini-header"
>
- <div class=""></div>
+ <div style="height: 100%">
+ <div
+ ref="bloodPressureAndPulseEchartRef"
+ style="width: 100%; height: 100%"
+ ></div>
+ </div>
</Card>
</div>
<div class="left-row3">
@@ -225,8 +230,22 @@
class="mini-card right-box-row2-item"
header-class-name="mini-header"
>
- <div class="item-box">
- <div class="item-num"></div>
+ <div class="progress-box">
+ <div class="item-num">
+ {{ jgTime4(pageData.dialysisDuration) }}/{{
+ pageData.prescriptionDialysisDuration
+ }}:{{ pageData.prescriptionDialysisDurationMin }}
+ </div>
+ <ProgressBar
+ :percent="
+ (Number(pageData.dialysisDuration) /
+ (Number(pageData.prescriptionDialysisDuration) * 60)) *
+ 100
+ "
+ color="#70A3DD"
+ backgroundColor="#D6DEF1"
+ borderRadius="50%"
+ />
</div>
</Card>
<Card
@@ -245,7 +264,7 @@
<ProgressBar
:percent="
(pageData.currentDehydrationVolume /
- pageData.currentDehydrationVolume) *
+ pageData.prescriptionDehydrationVolume) *
100
"
color="#70CAAE"
@@ -302,6 +321,8 @@
<script lang="ts" setup name="UnderTreatment">
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
+import dayjs from "dayjs";
+
// @ts-ignore
import Card from "../components/Card.vue";
// @ts-ignore
@@ -317,8 +338,11 @@
formatTestFlag,
EMedStatus,
} from "@/store/type/bedsideAuxiliaryScreen.type";
-import type { KtvItem } from "@/store/type/bedsideAuxiliaryScreen.type";
-import { formatDate } from "@/utils/formatTime";
+import type {
+ KtvItem,
+ MonitoringRecord,
+} from "@/store/type/bedsideAuxiliaryScreen.type";
+import { formatDate, jgTime4, jgTime5 } from "@/utils/formatTime";
import zlmsImg from "@/img/zlms.png";
import dingShiImg from "@/img/dingshi2.png";
import jiaoHaoImg from "@/img/jiaoHao.png";
@@ -341,6 +365,8 @@
// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);
+// 血压脉搏趋势图的
+const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);
const pageData = computed(() => {
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
@@ -349,7 +375,7 @@
});
const treatmentStatusText = computed(() => {
- const status = bedsideAuxiliaryScreenStore.deviceData.treatmentStatus;
+ const status = +bedsideAuxiliaryScreenStore.deviceData.treatmentStatus;
if (status === EMedStatus.NOT_CHECKED_IN) return "未签到";
if (status === EMedStatus.SIGNED_IN) return "已签到";
if (status === EMedStatus.DURING_DIALYSIS) return "透析中";
@@ -364,7 +390,7 @@
/** 生成ktv趋势图 */
const generateKtvListEchart = (ktvList: KtvItem[]) => {
if (!ktvListEchartRef.value) return;
- if (!ktvList || ktvList.length === 0) return;
+ // if (!ktvList || ktvList.length === 0) return;
// 检查是否已经有实例
let chart = echarts.getInstanceByDom(ktvListEchartRef.value);
@@ -373,25 +399,25 @@
}
const option = {
+ grid: {
+ top: 6,
+ bottom: 20,
+ right: 20,
+ },
xAxis: {
type: "category",
- data: ktvList.map((item) => formatDate(new Date(item.时间), "HH:mm")),
+ data: ktvList.map((item) => dayjs(item.时间).format("HH:mm")),
axisLine: { show: true },
axisTick: { show: true },
- // axisLabel: {
- // margin: 5, // 控制文字与轴的距离，尽量小
- // fontSize: 12,
- // },
+ splitLine: { show: false },
},
yAxis: {
type: "value",
axisLine: { show: true },
axisTick: { show: true },
- // axisLabel: {
- // margin: 5,
- // fontSize: 12,
- // },
- splitLine: { show: true },
+ splitLine: { show: false },
+
+ splitNumber: 4,
},
series: [
{
@@ -417,6 +443,166 @@
chart.setOption(option, true); // 第二个参数为 true 表示全量更新
};
+/** 生成血压脉搏趋势图 */
+const generatBloodPressureAndPulseEchart = (
+ bloodPressureAndPulses: MonitoringRecord[]
+) => {
+ if (!bloodPressureAndPulseEchartRef.value) return;
+
+ let chart = echarts.getInstanceByDom(bloodPressureAndPulseEchartRef.value);
+ if (!chart) {
+ chart = echarts.init(bloodPressureAndPulseEchartRef.value);
+ }
+
+ const telescopicPressureDatas: number[] = []; // 伸缩压
+ const diastolicPressureDatas: number[] = []; // 舒张压
+ const pulseDatas: number[] = []; // 脉搏
+ const xAxisData: string[] = []; // 横坐标
+
+ bloodPressureAndPulses.forEach((item, index) => {
+ telescopicPressureDatas.push(+item.伸缩压);
+ diastolicPressureDatas.push(+item.舒张压);
+ pulseDatas.push(+item.脉搏);
+ xAxisData.push(String(index + 1));
+ });
+
+ const option = {
+ grid: [
+ { top: "20%", height: "27%", left: 30, right: 20 }, // 伸缩压
+ { top: "45%", height: "27%", left: 30, right: 20 }, // 舒张压
+ { top: "67%", height: "27%", left: 30, right: 20 }, // 脉搏
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ gridIndex: 0,
+ },
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ gridIndex: 1,
+ },
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: true }, // 最下面一层显示时间轴
+ splitLine: { show: false },
+ gridIndex: 2,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ show: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ min: 80,
+ max: 180,
+ interval: 20,
+ gridIndex: 0,
+ },
+ {
+ type: "value",
+ show: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ min: 40,
+ max: 120,
+ interval: 20,
+ gridIndex: 1,
+ },
+ {
+ type: "value",
+ show: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ min: 40,
+ max: 140,
+ interval: 20,
+ gridIndex: 2,
+ },
+ ],
+ series: [
+ {
+ name: "伸缩压",
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ data: wrapData(telescopicPressureDatas),
+ type: "line",
+ smooth: false,
+ symbol: "circle",
+ symbolSize: 6,
+ lineStyle: { width: 2, color: "#FE0201" },
+ itemStyle: { color: "#FE0201" },
+ label: { color: "#FE0201" },
+ },
+ {
+ name: "舒张压",
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ data: wrapData(diastolicPressureDatas),
+ type: "line",
+ smooth: false,
+ symbol: "circle",
+ symbolSize: 6,
+ lineStyle: { width: 2, color: "#70A3DD" },
+ itemStyle: { color: "#70A3DD" },
+ label: { color: "#70A3DD" },
+ },
+ {
+ name: "脉搏",
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ data: wrapData(pulseDatas),
+ type: "line",
+ smooth: false,
+ symbol: "circle",
+ symbolSize: 6,
+ lineStyle: { width: 2, color: "#8079CB" },
+ itemStyle: { color: "#8079CB" },
+ label: { color: "#8079CB" },
+ },
+ ],
+ };
+
+ chart.setOption(option);
+};
+
+// 给首尾点加上 label
+const wrapData = (arr: number[]) => {
+ return arr.map((v, i) => ({
+ value: v,
+ label: {
+ show: i === 0 || i === arr.length - 1,
+ position: "top",
+ fontSize: 12,
+ },
+ }));
+};
+
/** 定时任务 */
const onScheduledTasksClick = () => {};
@@ -432,12 +618,21 @@
onMounted(() => {
// 生成ktv趋势图
generateKtvListEchart(pageData.value.ktvList);
+ generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
});
onBeforeUnmount(() => {
// 销毁图表实例
if (ktvListEchartRef.value) {
const chart = echarts.getInstanceByDom(ktvListEchartRef.value);
+ if (chart) {
+ chart.dispose();
+ }
+ }
+ if (bloodPressureAndPulseEchartRef.value) {
+ const chart = echarts.getInstanceByDom(
+ bloodPressureAndPulseEchartRef.value
+ );
if (chart) {
chart.dispose();
}
@@ -716,9 +911,16 @@
padding: 2px;
}
.ktv-card {
+ overflow: visible;
.card-header {
margin-bottom: 0px;
}
+ ::v-deep(.card-main) {
+ overflow: visible !important;
+ div {
+ overflow: visible;
+ }
+ }
}
:deep(.mini-header) {
flex: 0 0 4px;
--
Gitblit v1.8.0