From 7d8dd3c5a1f9e2ea06177b6612f7eec62ce2d16e Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期一, 15 九月 2025 16:47:48 +0800
Subject: [PATCH] ID1766-隐藏检测记录/叫号按钮
---
src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue | 951 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 664 insertions(+), 287 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
index b584ed6..31457c2 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
@@ -1,307 +1,349 @@
<template>
- <div class="under-treatment-container" :style="{ '--height': height + 'px' }">
- <div class="left-box">
- <div class="left-row1">
- <div class="left-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="left-row1-col2">
- <Card
- title="治疗模式"
- :icon="zlmsImg"
- background-color="#ffffff"
- class="mini-card left-row1-col2-row1"
- header-class-name="mini-header"
- >
- <div class="item-box dialysis-mode-content">
- <div class="dialysis-mode-content-box">
- <span class="mini-text">{{
- formatSubstituteMode(pageData.substituteMode)
- }}</span>
- <span class="text">{{ pageData.dialysisPlan }}</span>
+ <div>
+ <div
+ class="under-treatment-container"
+ :style="{ '--height': height + 'px' }"
+ >
+ <div class="left-box">
+ <div class="left-row1">
+ <div class="left-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="left-row1-col2">
+ <Card
+ title="治疗模式"
+ :icon="zlmsImg"
+ background-color="#ffffff"
+ class="mini-card left-row1-col2-row1"
+ header-class-name="mini-header"
+ >
+ <div class="item-box dialysis-mode-content">
+ <div class="dialysis-mode-content-box">
+ <span class="mini-text">{{
+ formatSubstituteMode(pageData.substituteMode)
+ }}</span>
+ <span class="text">{{ pageData.dialysisPlan }}</span>
+ </div>
</div>
+ </Card>
+ <Card
+ title="处方备注"
+ :icon="zlmsImg"
+ background-color="#ffffff"
+ class="mini-card left-row1-col2-item-row2"
+ header-class-name="mini-header"
+ >
+ <div class="prescription-remarks">
+ {{ pageData.prescriptionRemarks }}
+ </div>
+ </Card>
+ </div>
+ <div class="left-row1-col3">
+ <Card
+ title="透析器"
+ :icon="txqImg"
+ background-color="#ffffff"
+ class="mini-card left-row1-col3-row1"
+ header-class-name="mini-header"
+ >
+ <div class="item-box prescription-ehydration-olume">
+ <span class="text">{{ pageData.dialyzer }}</span>
+ </div>
+ </Card>
+ <Card
+ title="异常指标"
+ :icon="xinlvImg"
+ background-color="#ffffff"
+ class="mini-card left-row1-col3-row2"
+ header-class-name="mini-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>
+ <div class="left-row2">
+ <Card
+ title="血温监测"
+ :icon="xinLv2Img"
+ background-color="#ffffff"
+ class="mini-card left-row2-col1"
+ header-class-name="mini-header"
+ >
+ <div class="item-box current-lood0emperature">
+ <span class="text">{{ pageData.currentBloodTemperature }}</span>
</div>
</Card>
<Card
- title="处方备注"
- :icon="zlmsImg"
+ title="血压监测"
+ :icon="xinLv2Img"
background-color="#ffffff"
- class="mini-card left-row1-col2-item-row2"
+ class="mini-card left-row2-col2"
header-class-name="mini-header"
>
- <div class="prescription-remarks">
- {{ pageData.prescriptionRemarks }}
+ <div class="item-box venous-pressure">
+ <span class="text"
+ >{{ pageData.venousPressure }}/{{
+ pageData.transmembranePressure
+ }}</span
+ >
+ </div>
+ </Card>
+ <Card
+ title="血压脉搏趋势图"
+ :icon="xinLv2Img"
+ background-color="#ffffff"
+ class="mini-card ktv-card left-row2-col3"
+ header-class-name="mini-header"
+ >
+ <div style="height: 100%">
+ <div
+ ref="bloodPressureAndPulseEchartRef"
+ style="width: 100%; height: 100%"
+ ></div>
</div>
</Card>
</div>
- <div class="left-row1-col3">
+ <div class="left-row3">
<Card
- title="透析器"
+ title="血容量监测"
+ :icon="xinLv2Img"
+ background-color="#ffffff"
+ class="mini-card left-row3-col1"
+ header-class-name="mini-header"
+ >
+ <div class="item-box current-lood0emperature">
+ <span class="text">{{ pageData.bloodVolumeMonitoring }}</span>
+ </div>
+ </Card>
+ <Card
+ title="Kt/V监测"
+ :icon="xinLv2Img"
+ background-color="#ffffff"
+ class="mini-card left-row3-col2"
+ header-class-name="mini-header"
+ >
+ <div class="item-box venous-pressure">
+ <span class="text">{{ pageData.ktv }}</span>
+ </div>
+ </Card>
+ <Card
+ title="Kt/V趋势图"
+ :icon="xinLv2Img"
+ background-color="#ffffff"
+ class="mini-card ktv-card left-row3-col3"
+ header-class-name="mini-header"
+ >
+ <div style="height: 100%">
+ <div
+ ref="ktvListEchartRef"
+ style="width: 100%; height: 100%"
+ ></div>
+ </div>
+ </Card>
+ </div>
+ <div class="left-row4">
+ <Card
+ title="静脉压/跨膜压"
:icon="txqImg"
background-color="#ffffff"
- class="mini-card left-row1-col3-row1"
+ class="mini-card left-row4-col"
header-class-name="mini-header"
>
- <div class="item-box prescription-ehydration-olume">
- <span class="text">{{ pageData.dialyzer }}</span>
+ <div class="item-box current-lood0emperature">
+ <span class="text">{{ pageData.venousPressure2 }}/{{ pageData.transmembranePressure2 }}</span>
</div>
</Card>
<Card
- title="异常指标"
- :icon="xinlvImg"
+ title="血流量/透析液流量"
+ :icon="txqImg"
background-color="#ffffff"
- class="mini-card left-row1-col3-row2"
+ class="mini-card left-row4-col"
header-class-name="mini-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 class="item-box current-lood0emperature">
+ <span class="text">{{ pageData.bloodFlow }}/{{ pageData.dialysisFluidFlowRate }}</span>
</div>
</Card>
</div>
</div>
- <div class="left-row2">
- <Card
- title="血温监测"
- :icon="xinLv2Img"
- background-color="#ffffff"
- class="mini-card left-row2-col1"
- header-class-name="mini-header"
- >
- <div class="item-box current-lood0emperature">
- <span class="text">{{ pageData.currentBloodTemperature }}</span>
- </div>
- </Card>
- <Card
- title="血压监测"
- :icon="xinLv2Img"
- background-color="#ffffff"
- class="mini-card left-row2-col2"
- header-class-name="mini-header"
- >
- <div class="item-box venous-pressure">
- <span class="text"
- >{{ pageData.venousPressure }}/{{
- pageData.transmembranePressure
- }}</span
- >
- </div>
- </Card>
- <Card
- title="血压脉搏趋势图"
- :icon="xinLv2Img"
- background-color="#ffffff"
- class="mini-card left-row2-col3"
- header-class-name="mini-header"
- >
- <div class=""></div>
- </Card>
- </div>
- <div class="left-row3">
- <Card
- title="血容量监测"
- :icon="xinLv2Img"
- background-color="#ffffff"
- class="mini-card left-row3-col1"
- header-class-name="mini-header"
- >
- <div class="item-box current-lood0emperature">
- <span class="text">{{ pageData.bloodVolumeMonitoring }}</span>
- </div>
- </Card>
- <Card
- title="KTV监测"
- :icon="xinLv2Img"
- background-color="#ffffff"
- class="mini-card left-row3-col2"
- header-class-name="mini-header"
- >
- <div class="item-box venous-pressure">
- <span class="text">{{ pageData.ktv }}</span>
- </div>
- </Card>
- <Card
- title="KTV趋势图"
- :icon="xinLv2Img"
- background-color="#ffffff"
- class="mini-card ktv-card left-row3-col3"
- header-class-name="mini-header"
- >
- <div style="height: 100%">
- <div ref="ktvListEchartRef" style="width: 100%; height: 100%"></div>
- </div>
- </Card>
- </div>
- <div class="left-row4">
- <Card
- 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>
- </div>
- </Card>
- <Card
- 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>
- </div>
- </Card>
- </div>
- </div>
- <div class="right-box">
- <div class="right-box-row1">
- <Card
- title="治疗状态"
- :icon="txztImg"
- background-color="#ffffff"
- class="mini-card right-box-row1-col1"
- header-class-name="mini-header"
- >
- <div class="item-box treatment-status">
- <span class="text">{{ treatmentStatusText }}</span>
- </div>
- </Card>
- <Card
- title="脱水量详情"
- :icon="cljdImg"
- background-color="#ffffff"
- class="mini-card right-box-row1-col2"
- header-class-name="mini-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 class="right-box">
+ <div class="right-box-row1">
+ <Card
+ title="治疗状态"
+ :icon="txztImg"
+ background-color="#ffffff"
+ class="mini-card right-box-row1-col1"
+ header-class-name="mini-header"
+ >
+ <div class="item-box treatment-status">
+ <span class="text">{{ treatmentStatusText }}</span>
</div>
- <div class="dehydrated-level-item">
- <div class="item-left">
- <span
- >最大脱水量：{{ pageData.maximumDehydrationCapacity }} L</span
+ </Card>
+ <Card
+ title="脱水量详情"
+ :icon="cljdImg"
+ background-color="#ffffff"
+ class="mini-card right-box-row1-col2"
+ header-class-name="mini-header"
+ >
+ <div class="dehydrated-level">
+ <div class="dehydrated-level-item">
+ <span class="item-left"
+ >平均脱水量：{{ pageData.averageDehydrationRate }} L</span
>
- <template v-if="pageData.maximumDehydrationDuration"
- >/
- <span class="level-dete">{{
- pageData.maximumDehydrationDuration
- }}</span>
- </template>
+ <span class="item-right">(最近9次)</span>
</div>
- <span class="item-right"
- >({{ pageData.maximumDehydrationCapacityDate }})</span
- >
+ <div class="dehydrated-level-item">
+ <div class="item-left">
+ <span
+ >最大脱水量：{{
+ pageData.maximumDehydrationCapacity
+ }}
+ L</span
+ >
+ <template v-if="pageData.maximumDehydrationDuration"
+ >/
+ <span class="level-dete">{{
+ pageData.maximumDehydrationDuration
+ }}</span>
+ </template>
+ </div>
+ <span class="item-right"
+ >({{ pageData.maximumDehydrationCapacityDate }})</span
+ >
+ </div>
</div>
- </div>
- </Card>
- </div>
- <div class="right-box-row2">
- <Card
- title="时间进度"
- :icon="sjjdImg"
- background-color="#ffffff"
- class="mini-card right-box-row2-item"
- header-class-name="mini-header"
- >
- <div class="item-box">
- <div class="item-num"></div>
- </div>
- </Card>
- <Card
- title="超滤进度"
- :icon="cljdImg"
- background-color="#ffffff"
- class="mini-card right-box-row2-item"
- header-class-name="mini-header"
- >
- <div class="progress-box">
- <div class="item-num">
- {{ pageData.currentDehydrationVolume }}/{{
- pageData.currentDehydrationVolume
- }}({{ pageData.currentUltrafiltrationRate }})
+ </Card>
+ </div>
+ <div class="right-box-row2">
+ <Card
+ title="时间进度"
+ :icon="sjjdImg"
+ background-color="#ffffff"
+ class="mini-card right-box-row2-item"
+ header-class-name="mini-header"
+ >
+ <div class="progress-box">
+ <div class="item-num">
+ {{ jgTime4(pageData.dialysisDuration) }}/{{
+ pageData.prescriptionDialysisDurationHour
+ }}:{{ pageData.prescriptionDialysisDurationMin }}
+ </div>
+ <ProgressBar
+ :percent="
+ (Number(pageData.dialysisDuration) /
+ (Number(pageData.prescriptionDialysisDuration) * 60)) *
+ 100
+ "
+ color="#70A3DD"
+ backgroundColor="#D6DEF1"
+ borderRadius="50%"
+ />
</div>
- <ProgressBar
- :percent="
- (pageData.currentDehydrationVolume /
- pageData.currentDehydrationVolume) *
- 100
- "
- color="#70CAAE"
- backgroundColor="#D6DEF1"
- borderRadius="50%"
- />
- </div>
- </Card>
- </div>
- <div class="right-box-row3">
- <Card
- title="临时医嘱"
- :icon="yizhuImg"
- background-color="#ffffff"
- class="mini-card right-box-row2-item"
- header-class-name="mini-header"
- >
- <DoctorAdvice :list="pageData.doctorAdvice" />
- </Card>
- </div>
- <div class="right-box-row4">
- <BlockBotttom
- :icon="dingShiImg"
- text="定时任务"
- backgroundColor="#20C6B6"
- @click="() => onScheduledTasksClick()"
- class="btn"
- />
- <BlockBotttom
- :icon="jiaoHaoImg"
- text="叫号"
- backgroundColor="#20C6B6"
- @click="() => onCallBumberClick()"
- class="btn"
- />
- <BlockBotttom
- :icon="addImg"
- text="添加记录"
- backgroundColor="#409EFF"
- @click="() => onAddRecordClick()"
- class="btn"
- />
- <BlockBotttom
- :icon="kaiShiImg"
- text="j结束透析"
- backgroundColor="#E6A23C"
- @click="() => onEndClick()"
- class="btn"
- />
+ </Card>
+ <Card
+ title="超滤进度"
+ :icon="cljdImg"
+ background-color="#ffffff"
+ class="mini-card right-box-row2-item"
+ header-class-name="mini-header"
+ >
+ <div class="progress-box">
+ <div class="item-num">
+ {{ pageData.currentDehydrationVolume }}/{{
+ pageData.prescriptionDehydrationVolume
+ }}({{ pageData.currentUltrafiltrationRate }})
+ </div>
+ <ProgressBar
+ :percent="
+ (pageData.currentDehydrationVolume /
+ pageData.prescriptionDehydrationVolume) *
+ 100
+ "
+ color="#70CAAE"
+ backgroundColor="#D6DEF1"
+ borderRadius="50%"
+ />
+ </div>
+ </Card>
+ </div>
+ <div class="right-box-row3">
+ <Card
+ title="临时医嘱"
+ :icon="yizhuImg"
+ background-color="#ffffff"
+ class="mini-card right-box-row2-item"
+ header-class-name="mini-header"
+ >
+ <DoctorAdvice :list="pageData.doctorAdvice" />
+ </Card>
+ </div>
+ <div class="right-box-row4">
+ <BlockBotttom
+ :icon="dingShiImg"
+ text="定时任务"
+ backgroundColor="#20C6B6"
+ @click="() => onScheduledTasksClick()"
+ class="btn"
+ />
+ <!-- <BlockBotttom
+ :icon="jiaoHaoImg"
+ text="叫号"
+ backgroundColor="#20C6B6"
+ @click="() => onCallBumberClick()"
+ class="btn"
+ /> -->
+ <!-- <BlockBotttom
+ :icon="addImg"
+ text="添加记录"
+ backgroundColor="#409EFF"
+ @click="() => onAddRecordClick()"
+ class="btn"
+ /> -->
+ <BlockBotttom
+ v-if="!whetherDialysisHasBeenEnded"
+ :icon="kaiShiImg"
+ text="结束透析"
+ backgroundColor="#E6A23C"
+ @click="() => onEndClick()"
+ class="btn"
+ />
+ </div>
</div>
</div>
+ <!-- 定时任务 -->
+ <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
</div>
</template>
<script lang="ts" setup name="UnderTreatment">
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import {
+ computed,
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ watch,
+ defineAsyncComponent,
+} from "vue";
import * as echarts from "echarts";
+import dayjs from "dayjs";
+
// @ts-ignore
import Card from "../components/Card.vue";
// @ts-ignore
@@ -309,6 +351,9 @@
import DoctorAdvice from "../components/DoctorAdvice/index.vue";
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
+const ScheduledTaskDialog = defineAsyncComponent(
+ () => import("../components/ScheduledTask.vue")
+);
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import {
formatSubstituteMode,
@@ -317,8 +362,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";
@@ -331,6 +379,7 @@
import cljdImg from "@/img/cljd.png";
import sjjdImg from "@/img/sjjd.png";
import yizhuImg from "@/img/yizhu.png";
+import { ElMessage } from "element-plus";
interface Props {
height: number;
@@ -339,8 +388,12 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+const scheduledTaskDialogRef = ref<any>(null);
+
// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);
+// 血压脉搏趋势图的
+const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);
const pageData = computed(() => {
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
@@ -349,7 +402,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 "透析中";
@@ -359,12 +412,41 @@
return "未知状态";
});
-// const;
+/** 是否已结束透析 */
+const whetherDialysisHasBeenEnded = computed(() => {
+ return (
+ +bedsideAuxiliaryScreenStore.deviceData.treatmentStatus >= EMedStatus.END
+ );
+});
+
+watch(
+ () => pageData.value.ktvList,
+ (newVal) => {
+ generateKtvListEchart(newVal);
+ },
+ { deep: true }
+);
+
+watch(
+ () => pageData.value.monitoringRecord,
+ (newVal) => {
+ generatBloodPressureAndPulseEchart(newVal);
+ },
+ { deep: true }
+);
+
+watch(
+ () => props.height,
+ () => {
+ generateKtvListEchart(pageData.value.ktvList);
+ generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
+ }
+);
/** 生成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 +455,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: [
{
@@ -405,7 +487,7 @@
color: "#70CAAE",
},
itemStyle: {
- color: "#70CAAE",
+ color: (params: any) => getColor(params.value),
},
},
],
@@ -417,27 +499,315 @@
chart.setOption(option, true); // 第二个参数为 true 表示全量更新
};
+const getColor = (val: number) => {
+ if (val < 1.2) return "#FE0201"; // 红色
+ if (val <= 1.6) return "#70CAAE"; // 绿色
+ 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[]
+) => {
+ 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: 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(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 = {
+ backgroundColor: "#ffffff",
+ tooltip: {
+ trigger: "axis",
+ },
+ 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,
+ },
+ },
+ series: [
+ {
+ name: "伸缩压",
+ type: "line",
+ symbol: "triangle",
+ symbolSize: 6,
+ 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: "舒张压",
+ type: "line",
+ symbol: "triangle",
+ symbolSize: 6,
+ 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: "脉搏",
+ type: "line",
+ symbolSize: 6,
+ data: pulseDatas,
+ lineStyle: {
+ color: "#D940FF",
+ width: 2, // 设置线条宽度为5
+ },
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: "#D940FF",
+ color: "#D940FF",
+ },
+ markPoint: {
+ data: markPointPulseDatas,
+ },
+ },
+ ],
+ };
+
+ 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 = () => {};
+const onScheduledTasksClick = () => {
+ if (
+ !bedsideAuxiliaryScreenStore.deviceCode ||
+ !bedsideAuxiliaryScreenStore.deviceData.deviceCode
+ )
+ return ElMessage.warning("未初始化或正在进行初始化操作中");
+ scheduledTaskDialogRef.value?.openDialog();
+};
/** 叫号 */
-const onCallBumberClick = () => {};
+const onCallBumberClick = () => {
+ ElMessage({
+ message: "功能开发中，敬请期待！",
+ type: "warning",
+ });
+};
/** 添加记录 */
-const onAddRecordClick = () => {};
+const onAddRecordClick = () => {
+ ElMessage({
+ message: "功能开发中，敬请期待！",
+ type: "warning",
+ });
+};
/** 结束透析 */
-const onEndClick = () => {};
+const onEndClick = () => {
+ ElMessage({
+ message: "功能开发中，敬请期待！",
+ type: "warning",
+ });
+};
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 +1086,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