From 909dfdf6ceff702f65bdc15bd958589c6df4195d Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期六, 26 七月 2025 15:48:48 +0800
Subject: [PATCH] ID1825-定时任务禁止修改
---
src/views/mobile/bedsideAuxiliaryScreen/pages/Sphygmomanometer.vue | 451 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 451 insertions(+), 0 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/Sphygmomanometer.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/Sphygmomanometer.vue
new file mode 100644
index 0000000..271335e
--- /dev/null
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/Sphygmomanometer.vue
@@ -0,0 +1,451 @@
+<template>
+ <div
+ class="sphygmomanometer-container"
+ :style="{ '--height': height + 'px' }"
+ >
+ <div class="row1">
+ <div class="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="row1-col2">
+ <Card
+ title="血压"
+ :icon="txqImg"
+ background-color="#ffffff"
+ class="row1-col2-item"
+ header-class-name="mini-header"
+ >
+ <div class="item-box">
+ <span class="text">{{ pageData.sbp }} / {{ pageData.dbp }}</span>
+ </div>
+ </Card>
+ <Card
+ title="心率"
+ :icon="txqImg"
+ background-color="#ffffff"
+ class="row1-col2-item"
+ header-class-name="mini-header"
+ >
+ <div class="item-box">
+ <span class="text">{{ pageData.pulseRate }}</span>
+ </div>
+ </Card>
+ </div>
+ </div>
+ <div class="row2">
+ <Card
+ title="平均脱水量"
+ :icon="txqImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="item-box">
+ <span
+ class="text"
+ v-if="
+ pageData.averageDehydrationRate ||
+ [0, '0'].includes(pageData.averageDehydrationRate)
+ "
+ >{{ pageData.averageDehydrationRate }} L</span
+ >
+ </div>
+ </Card>
+ <Card
+ title="最大脱水量"
+ :icon="txqImg"
+ background-color="#ffffff"
+ class="row2-item"
+ >
+ <div class="item-box">
+ <div class="text">
+ <span
+ v-if="
+ pageData.maximumDehydrationCapacity ||
+ [0, '0'].includes(pageData.maximumDehydrationCapacity)
+ "
+ >{{ pageData.maximumDehydrationCapacity }}L</span
+ >
+ <span
+ v-if="pageData.maximumDehydrationCapacityDate"
+ style="color: #999"
+ >({{ pageData.maximumDehydrationCapacityDate }})</span
+ >
+ </div>
+ </div>
+ </Card>
+ </div>
+ <div class="row3">
+ <Card
+ title="异常指标"
+ :icon="xinlvImg"
+ background-color="#ffffff"
+ class="row3-col1"
+ 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 class="blood-ressure-and-pulse-echart-card">
+ <div class="blood-pressure-and0pulse-echart">
+ <div
+ ref="bloodPressureAndPulseEchartRef"
+ style="width: 100%; height: 90%"
+ ></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue";
+import * as echarts from "echarts";
+
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import {
+ formatSubstituteMode,
+ formatTestColr,
+ getItemName,
+ formatTestFlag,
+ EMedStatus,
+ MonitoringRecord,
+} from "@/store/type/bedsideAuxiliaryScreen.type";
+// @ts-ignore
+import Card from "../components/Card.vue";
+import txqImg from "@/img/txq.png";
+import xinlvImg from "@/img/xinlv.png";
+import xinLv2Img from "@/img/xinlv2.png";
+
+interface Props {
+ height: number;
+}
+const props = defineProps<Props>();
+
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+
+// 血压脉搏趋势图的
+const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);
+
+const pageData = computed(() => {
+ return Object.assign(
+ bedsideAuxiliaryScreenStore.deviceData.sphygmomanometer,
+ {
+ patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
+ averageDehydrationRate:
+ bedsideAuxiliaryScreenStore.deviceData.underTreatment
+ .averageDehydrationRate, // 平均脱水量
+ maximumDehydrationCapacity:
+ bedsideAuxiliaryScreenStore.deviceData.underTreatment
+ .maximumDehydrationCapacity, // 最大脱水
+ maximumDehydrationCapacityDate:
+ bedsideAuxiliaryScreenStore.deviceData.underTreatment
+ .maximumDehydrationCapacityDate, // 最大脱水量的日期
+ abnormalItems:
+ bedsideAuxiliaryScreenStore.deviceData.underTreatment.abnormalItems, // 异常指标
+ monitoringRecord:
+ bedsideAuxiliaryScreenStore.deviceData.underTreatment.monitoringRecord, // 血压脉搏数据
+ }
+ );
+});
+
+watch(
+ () => pageData.value.monitoringRecord,
+ (newVal) => {
+ generatBloodPressureAndPulseEchart(newVal);
+ },
+ { deep: 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: "15%", height: "28%", left: 40, right: 20, containLabel: true },
+ { top: "35%", height: "28%", left: 40, right: 20, containLabel: true },
+ { top: "67%", height: "28%", left: 40, right: 20, containLabel: true },
+ ],
+ tooltip: {
+ trigger: "axis",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: xAxisData,
+ boundaryGap: false,
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { show: false },
+ splitLine: { show: false },
+ gridIndex: 0,
+ 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 },
+ gridIndex: 0,
+ min: 0,
+ max: 300,
+ interval: 2,
+ },
+ {
+ 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",
+ 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,
+ },
+ }));
+};
+
+onMounted(() => {
+ generatBloodPressureAndPulseEchart(pageData.value.monitoringRecord);
+});
+
+onBeforeUnmount(() => {
+ if (bloodPressureAndPulseEchartRef.value) {
+ const chart = echarts.getInstanceByDom(
+ bloodPressureAndPulseEchartRef.value
+ );
+ if (chart) {
+ chart.dispose();
+ }
+ }
+});
+</script>
+
+<style lang="less" scoped>
+* {
+ box-sizing: border-box;
+}
+
+.sphygmomanometer-container {
+ display: flex;
+ flex-direction: column;
+ height: var(--height);
+ padding-bottom: 2px;
+ gap: 4px;
+ .row1 {
+ height: 45%;
+ display: flex;
+ gap: 4px;
+ .row1-col1 {
+ width: 20%;
+ border-radius: 2px;
+ overflow: hidden;
+ }
+ .row1-col2 {
+ width: 80%;
+ display: flex;
+ gap: 4px;
+ .row1-col2-item {
+ width: 50%;
+ }
+ }
+ }
+ .row2 {
+ height: 25%;
+ display: flex;
+ gap: 4px;
+ .row2-item {
+ width: 50%;
+ }
+ }
+ .row3 {
+ height: 35%;
+ display: flex;
+ gap: 4px;
+ .row3-col1 {
+ width: 20%;
+ .dialysis-mode-content {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ font-size: 6px;
+ font-weight: bold;
+ span {
+ white-space: nowrap;
+ }
+ }
+ }
+ .blood-ressure-and-pulse-echart-card {
+ position: relative;
+ width: 80%;
+ background-color: #ffffff;
+ border-radius: 2px;
+ .blood-pressure-and0pulse-echart {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ width: 98%;
+ height: 96%;
+ }
+ }
+ }
+
+ .item-box {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: bold;
+ font-size: 12px;
+ color: #70a3dd;
+ text-align: center;
+ font-style: normal;
+ &.treatment-status {
+ color: #70a3dd;
+ }
+ &.prescription-ehydration-olume {
+ color: #8079cb;
+ }
+ &.current-lood0emperature {
+ color: #70a3dd;
+ font-size: 9px;
+ }
+ &.venous-pressure {
+ color: #70a3dd;
+ font-size: 9px;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0