From 3b2e941a83ad49d3167df864a5a06a81ef944470 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期三, 24 九月 2025 23:55:45 +0800
Subject: [PATCH] Merge branch 'ID2130-未签到页面优化' into test
---
src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue | 367 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 246 insertions(+), 121 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
index b9aba17..382aa15 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
@@ -133,7 +133,7 @@
</div>
</Card>
<Card
- title="KTV监测"
+ title="Kt/V监测"
:icon="xinLv2Img"
background-color="#ffffff"
class="mini-card left-row3-col2"
@@ -144,7 +144,7 @@
</div>
</Card>
<Card
- title="KTV趋势图"
+ title="Kt/V趋势图"
:icon="xinLv2Img"
background-color="#ffffff"
class="mini-card ktv-card left-row3-col3"
@@ -160,25 +160,25 @@
</div>
<div class="left-row4">
<Card
- title="血流量"
+ title="静脉压/跨膜压"
:icon="txqImg"
background-color="#ffffff"
class="mini-card left-row4-col"
header-class-name="mini-header"
>
<div class="item-box current-lood0emperature">
- <span class="text">{{ pageData.bloodFlow }}</span>
+ <span class="text">{{ pageData.venousPressure2 }}/{{ pageData.transmembranePressure2 }}</span>
</div>
</Card>
<Card
- title="透析液流量"
+ title="血流量/透析液流量"
:icon="txqImg"
background-color="#ffffff"
class="mini-card left-row4-col"
header-class-name="mini-header"
>
<div class="item-box current-lood0emperature">
- <span class="text">{{ pageData.dialysisFluidFlowRate }}</span>
+ <span class="text">{{ pageData.bloodFlow }}/{{ pageData.dialysisFluidFlowRate }}</span>
</div>
</Card>
</div>
@@ -208,7 +208,7 @@
<span class="item-left"
>平均脱水量：{{ pageData.averageDehydrationRate }} L</span
>
- <span class="item-right">(最近3周9次)</span>
+ <span class="item-right">(最近9次)</span>
</div>
<div class="dehydrated-level-item">
<div class="item-left">
@@ -241,7 +241,7 @@
header-class-name="mini-header"
>
<div class="progress-box">
- <div class="item-num">
+ <div class="item-num item-num-2">
{{ jgTime4(pageData.dialysisDuration) }}/{{
pageData.prescriptionDialysisDurationHour
}}:{{ pageData.prescriptionDialysisDurationMin }}
@@ -256,6 +256,7 @@
backgroundColor="#D6DEF1"
borderRadius="50%"
/>
+ <div class="cftsl-text">当前时间:<span class="">{{ time }}</span></div>
</div>
</Card>
<Card
@@ -266,9 +267,9 @@
header-class-name="mini-header"
>
<div class="progress-box">
- <div class="item-num">
+ <div class="item-num item-num-2">
{{ pageData.currentDehydrationVolume }}/{{
- pageData.currentDehydrationVolume
+ pageData.prescriptionDehydrationVolume
}}({{ pageData.currentUltrafiltrationRate }})
</div>
<ProgressBar
@@ -281,6 +282,7 @@
backgroundColor="#D6DEF1"
borderRadius="50%"
/>
+ <div class="cftsl-text">处方脱水量：<span class="cftsl-num">{{ pageData.处方脱水量 }}L</span></div>
</div>
</Card>
</div>
@@ -303,20 +305,20 @@
@click="() => onScheduledTasksClick()"
class="btn"
/>
- <BlockBotttom
+ <!-- <BlockBotttom
:icon="jiaoHaoImg"
text="叫号"
backgroundColor="#20C6B6"
@click="() => onCallBumberClick()"
class="btn"
- />
- <BlockBotttom
+ /> -->
+ <!-- <BlockBotttom
:icon="addImg"
text="添加记录"
backgroundColor="#409EFF"
@click="() => onAddRecordClick()"
class="btn"
- />
+ /> -->
<BlockBotttom
v-if="!whetherDialysisHasBeenEnded"
:icon="kaiShiImg"
@@ -330,6 +332,8 @@
</div>
<!-- 定时任务 -->
<ScheduledTaskDialog ref="scheduledTaskDialogRef" />
+ <!-- 结束透析组件 -->
+ <EndDialysis ref="endDialysisRef" />
</div>
</template>
<script lang="ts" setup name="UnderTreatment">
@@ -354,6 +358,7 @@
const ScheduledTaskDialog = defineAsyncComponent(
() => import("../components/ScheduledTask.vue")
);
+const EndDialysis = defineAsyncComponent(() => import("../components/EndDialysis/index.vue"));
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import {
formatSubstituteMode,
@@ -389,11 +394,15 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const scheduledTaskDialogRef = ref<any>(null);
+const endDialysisRef = ref<any>(null);
// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);
// 血压脉搏趋势图的
const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);
+
+const time = ref(dayjs().format("HH:mm"))
+let timer: number | undefined
const pageData = computed(() => {
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
@@ -418,6 +427,8 @@
+bedsideAuxiliaryScreenStore.deviceData.treatmentStatus >= EMedStatus.END
);
});
+
+
watch(
() => pageData.value.ktvList,
@@ -505,6 +516,26 @@
return "#FE6500"; // 橙色
};
+const formatMarkPoint = (
+ name: string,
+ value: number,
+ yAxis: number,
+ xAxis: number,
+ symbolSize: number,
+ symbolOffset: number[],
+ color: string
+) => {
+ return {
+ name,
+ value,
+ yAxis,
+ xAxis,
+ symbolSize,
+ symbolOffset,
+ label: { fontSize: 8, color },
+ };
+};
+
/** 生成血压脉搏趋势图 */
const generatBloodPressureAndPulseEchart = (
bloodPressureAndPulses: MonitoringRecord[]
@@ -519,136 +550,204 @@
const telescopicPressureDatas: number[] = []; // 伸缩压
const diastolicPressureDatas: number[] = []; // 舒张压
const pulseDatas: number[] = []; // 脉搏
- const xAxisData: string[] = []; // 横坐标
+ const xAxisData: number[] = []; // 横坐标
+
+ const markPointTelescopicPressureDatas: any[] = []; // 伸缩压的markPoint
+ const markPointDiastolicPressureDatas: any[] = []; // 舒张压的markPoint
+ const markPointPulseDatas: any[] = []; // 脉搏的markPoint
bloodPressureAndPulses.forEach((item, index) => {
telescopicPressureDatas.push(+item.伸缩压);
diastolicPressureDatas.push(+item.舒张压);
pulseDatas.push(+item.脉搏);
- xAxisData.push(String(index + 1));
+ xAxisData.push(index);
+ if (index === 0) {
+ markPointTelescopicPressureDatas.push(
+ formatMarkPoint(
+ "伸缩压",
+ +item.伸缩压,
+ +item.伸缩压,
+ 0,
+ 0,
+ [0, 10],
+ "red"
+ )
+ );
+ markPointDiastolicPressureDatas.push(
+ formatMarkPoint(
+ "舒张压",
+ +item.舒张压,
+ +item.舒张压,
+ 0,
+ 0,
+ [15, 5],
+ "#409EFF"
+ )
+ );
+ markPointPulseDatas.push(
+ formatMarkPoint(
+ "脉搏",
+ +item.脉搏,
+ +item.脉搏,
+ 0,
+ 0,
+ [10, -15],
+ "#D940FF"
+ )
+ );
+ } else if (
+ bloodPressureAndPulses.length > 1 &&
+ index === bloodPressureAndPulses.length - 1
+ ) {
+ markPointTelescopicPressureDatas.push(
+ formatMarkPoint(
+ "伸缩压",
+ +item.伸缩压,
+ +item.伸缩压,
+ index,
+ 0,
+ [-15, -20],
+ "red"
+ )
+ );
+ markPointDiastolicPressureDatas.push(
+ formatMarkPoint(
+ "舒张压",
+ +item.舒张压,
+ +item.舒张压,
+ index,
+ 0,
+ [-15, 0],
+ "#409EFF"
+ )
+ );
+ markPointPulseDatas.push(
+ formatMarkPoint(
+ "脉搏",
+ +item.脉搏,
+ +item.脉搏,
+ index,
+ 0,
+ [0, 0],
+ "#D940FF"
+ )
+ );
+ }
});
+ if (bloodPressureAndPulses.length === 1) {
+ xAxisData.push(1);
+ }
+
const option = {
- grid: [
- { top: "5%", height: "28%", left: 40, right: 20, containLabel: true },
- { top: "35%", height: "28%", left: 40, right: 20, containLabel: true },
- { top: "65%", height: "28%", left: 40, right: 20, containLabel: true },
- ],
+ backgroundColor: "#ffffff",
tooltip: {
trigger: "axis",
},
- xAxis: [
- {
- type: "category",
- data: xAxisData,
- boundaryGap: false,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- gridIndex: 0,
+ toolbox: {
+ show: false,
+ },
+ grid: {
+ left: 20,
+ top: 0,
+ bottom: 0,
+ },
+ xAxis: {
+ type: "category",
+ // 标记做右往左排列
+ boundaryGap: false,
+ data: xAxisData,
+ axisTick: {
+ show: true, // 显示 X 轴刻度
+ },
+ },
+ yAxis: {
+ show: false,
+ name: "",
+ type: "value",
+ min: 40,
+ max: 220,
+ interval: 10, // 指定刻度间隔,
+ splitLine: {
show: false,
},
- {
- type: "category",
- data: xAxisData,
- boundaryGap: false,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- gridIndex: 1,
- show: false,
- },
- {
- type: "category",
- data: xAxisData,
- boundaryGap: false,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: true }, // 最下面一层显示时间轴
- splitLine: { show: false },
- gridIndex: 2,
- show: false,
- },
- ],
- yAxis: [
- {
- type: "value",
- show: false,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- min: 0,
- max: 300,
- interval: 2,
- gridIndex: 0,
- },
- {
- type: "value",
- show: false,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- min: 0,
- max: 300,
- interval: 2,
- gridIndex: 1,
- },
- {
- type: "value",
- show: false,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- min: 0,
- max: 300,
- interval: 2,
- gridIndex: 2,
- },
- ],
+ },
series: [
{
name: "伸缩压",
- xAxisIndex: 0,
- yAxisIndex: 0,
- data: wrapData(telescopicPressureDatas),
type: "line",
- smooth: false,
- symbol: "circle",
+ symbol: "triangle",
symbolSize: 6,
- lineStyle: { width: 2, color: "#FE0201" },
- itemStyle: { color: "#FE0201" },
- label: { color: "#FE0201" },
+ symbolRotate: 180,
+ data: telescopicPressureDatas,
+ lineStyle: {
+ width: 2, // 设置线条宽度为5
+ color: "red",
+ },
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: "red",
+ color: "red",
+ },
+ markPoint: {
+ data: markPointTelescopicPressureDatas,
+ },
+ markLine: {
+ symbol: "none",
+ lineStyle: { color: "#409EFF", width: 2 },
+ data: [
+ { name: "y90", yAxis: 90, label: { show: false }, symbol: "none" },
+ ],
+ },
},
{
name: "舒张压",
- xAxisIndex: 1,
- yAxisIndex: 1,
- data: wrapData(diastolicPressureDatas),
type: "line",
- smooth: false,
- symbol: "circle",
+ symbol: "triangle",
symbolSize: 6,
- lineStyle: { width: 2, color: "#70A3DD" },
- itemStyle: { color: "#70A3DD" },
- label: { color: "#70A3DD" },
+ data: diastolicPressureDatas,
+ lineStyle: {
+ color: "#409EFF",
+ width: 2, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: "#409EFF",
+ color: "#409EFF",
+ },
+ markPoint: {
+ data: markPointDiastolicPressureDatas,
+ },
+ markLine: {
+ symbol: "none",
+ lineStyle: { color: "#F56C6C", width: 2 },
+ data: [
+ {
+ name: "y140",
+ yAxis: 140,
+ label: { show: false },
+ symbol: "none",
+ },
+ ],
+ },
},
{
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" },
+ data: pulseDatas,
+ lineStyle: {
+ color: "#D940FF",
+ width: 2, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: "#D940FF",
+ color: "#D940FF",
+ },
+ markPoint: {
+ data: markPointPulseDatas,
+ },
},
],
};
@@ -696,19 +795,31 @@
/** 结束透析 */
const onEndClick = () => {
- ElMessage({
- message: "功能开发中，敬请期待！",
- type: "warning",
- });
+ if (
+ !bedsideAuxiliaryScreenStore.deviceCode ||
+ !bedsideAuxiliaryScreenStore.deviceData.deviceCode
+ )
+ return ElMessage.warning("未初始化或正在进行初始化操作中");
+ if (!bedsideAuxiliaryScreenStore.userInfo?.token)
+ return ElMessage.warning("请登录");
+ endDialysisRef.value?.openDialog();
};
onMounted(() => {
// 生成ktv趋势图
generateKtvListEchart(pageData.value.ktvList);
generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
+ // 初始化
+ time.value = dayjs().format("HH:mm")
+
+ // 每分钟刷新一次
+ timer = window.setInterval(() => {
+ time.value = dayjs().format("HH:mm")
+ }, 1000 * 1)
});
onBeforeUnmount(() => {
+ if (timer) clearInterval(timer)
// 销毁图表实例
if (ktvListEchartRef.value) {
const chart = echarts.getInstanceByDom(ktvListEchartRef.value);
@@ -891,7 +1002,7 @@
}
}
- .progress-box {
+.progress-box {
display: flex;
align-items: center;
flex-direction: column;
@@ -903,6 +1014,20 @@
color: #333333;
text-align: left;
font-style: normal;
+ &.item-num-2 {
+ margin-bottom: 2px;
+ }
+ }
+ .cftsl-text {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 600;
+ font-size: 5px;
+ color: #333333;
+ text-align: left;
+ font-style: normal;
+ .cftsl-num {
+ color: #a91a1a;
+ }
}
}
--
Gitblit v1.8.0