From 86d9b0511e4730ca19633b6c3be605e5d61533aa Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 25 七月 2025 14:55:23 +0800
Subject: [PATCH] ID1625-血压计页面修改
---
src/utils/utils.ts | 22 +
src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue | 32 +-
src/views/mobile/bedsideAuxiliaryScreen/pages/Sphygmomanometer.vue | 451 +++++++++++++++++++++++++++++++++++++
src/store/type/bedsideAuxiliaryScreen.type.ts | 31 ++
src/store/type/task.type.ts | 2
src/store/bedsideAuxiliaryScreen.ts | 4
src/views/mobile/bedsideAuxiliaryScreen/index.vue | 98 ++++++--
src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue | 24 +
8 files changed, 609 insertions(+), 55 deletions(-)
diff --git a/src/store/bedsideAuxiliaryScreen.ts b/src/store/bedsideAuxiliaryScreen.ts
index 11ff7fa..b93d6cc 100644
--- a/src/store/bedsideAuxiliaryScreen.ts
+++ b/src/store/bedsideAuxiliaryScreen.ts
@@ -110,7 +110,7 @@
if (retryCount < maxRetryCount) {
const delay = baseRetryDelay * Math.pow(2, retryCount); // 指数退避
retryCount++;
- console.log(`[SSE] 第${retryCount}次重连，延迟${delay}ms`);
+ console.log(`[SSE] 第${retryCount}次重连，延迟${baseRetryDelay}ms`);
ElMessage.warning(
`链接服务失败， 第${retryCount}次重连,请耐心等待重连。。`
);
@@ -148,7 +148,7 @@
clearTask();
}
- deviceData.value = formatDeviceData(dataBody);
+ deviceData.value = formatDeviceData(deviceData.value, dataBody);
}
};
};
diff --git a/src/store/type/bedsideAuxiliaryScreen.type.ts b/src/store/type/bedsideAuxiliaryScreen.type.ts
index a5526ef..846ae1b 100644
--- a/src/store/type/bedsideAuxiliaryScreen.type.ts
+++ b/src/store/type/bedsideAuxiliaryScreen.type.ts
@@ -1,4 +1,4 @@
-import { tryConvertToInt } from "@/utils/utils";
+import { tryConvertToInt, deepClone } from "@/utils/utils";
import cache from "@/utils/cache";
export interface IotInfo {
属性历史列表: any[];
@@ -172,6 +172,13 @@
倒计时: Countdown | null;
推送类型: PushType;
透析状态: DialysisStatus | null;
+ 床旁血压结果?: any;
+}
+
+export interface Sphygmomanometer {
+ sbp: number | null; // 高压
+ dbp: number | null; // 低压
+ pulseRate: number | null; // 心率
}
export interface BedsideAuxiliaryScreen {
@@ -191,7 +198,16 @@
notSignedIn: NotSignedIn;
signedIn: SignedIn;
underTreatment: UnderTreatment;
+ sphygmomanometer: Sphygmomanometer;
}
+
+export const defaultSphygmomanometer = () :Sphygmomanometer => {
+ return {
+ sbp: null,
+ dbp: null,
+ pulseRate: null,
+ }
+}
export enum EPageType {
NOT_INIT = 0, // 未初始化(没有设备编号)
@@ -402,14 +418,17 @@
notSignedIn: defalutNotSignedIn(), // 未签到时需要的数据
signedIn: defaultSignedIn(), // 已签到时需要的数据
underTreatment: defaultUnderTreatment(), // 治疗中需要的数据
+ sphygmomanometer: defaultSphygmomanometer(), // 血压计传过来的数据
};
};
export const formatDeviceData = (
+ data: BedsideAuxiliaryScreen,
seeMsg: SseMsgData
): BedsideAuxiliaryScreen => {
- const result = defaultDeviceData();
+ const result = deepClone(data);
+
// 默认床号（设备号）
result.devicdeNo = seeMsg.IOT信息?.床号;
@@ -417,6 +436,14 @@
if (seeMsg.推送类型 === EPushType.SPHYGMOMANOMETR) {
result.pageType = EPageType.SPHYGMOMANOMETER;
+
+ const sphygmomanometer = defaultSphygmomanometer();
+ sphygmomanometer.sbp = seeMsg?.床旁血压结果?.sbp;
+ sphygmomanometer.pulseRate = seeMsg?.床旁血压结果?.pulseRate;
+ sphygmomanometer.dbp = seeMsg?.床旁血压结果?.dbp;
+
+ result.sphygmomanometer = sphygmomanometer;
+
} else if (seeMsg.推送类型 === EPushType.CENTRAL_MONITORING) {
// 判断是否存在透析状态，如果不存在就是没有排班
if (seeMsg.透析状态 === null || !seeMsg.透析状态) {
diff --git a/src/store/type/task.type.ts b/src/store/type/task.type.ts
index 75b2189..fe6fc3c 100644
--- a/src/store/type/task.type.ts
+++ b/src/store/type/task.type.ts
@@ -9,4 +9,6 @@
taskName: string;
/** 是否过期 */
overdue: boolean;
+ /** 倒计时，如果存在该字段则表明是远程传过来的 */
+ countdown?: number;
}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 4081f1e..deeee91 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -28,4 +28,24 @@
}
return value;
-}
\ No newline at end of file
+}
+/**
+ * 深拷贝
+ * @param obj
+ * @returns
+ */
+export function deepClone<T>(obj: T): T {
+ if (obj === null || typeof obj !== "object") return obj;
+
+ if (Array.isArray(obj)) {
+ return obj.map(item => deepClone(item)) as unknown as T;
+ }
+
+ const result: any = {};
+ for (const key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) {
+ result[key] = deepClone(obj[key]);
+ }
+ }
+ return result;
+}
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
index 6efe7bc..6241118 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
@@ -100,22 +100,22 @@
};
});
-watch(
- () => bedsideAuxiliaryScreenStore.taskData,
- (newData: Task[]) => {
- console.log('定时任务更新了')
- if (
- bedsideAuxiliaryScreenStore.deviceData.deviceCode &&
- newData.length > 0
- ) {
- console.log('newData: ', newData)
- updateCountdown(newData[0].taskDate);
- } else {
- taskCountdown.value = "";
- }
- },
- { deep: true }
-);
+// watch(
+// () => bedsideAuxiliaryScreenStore.taskData,
+// (newData: Task[]) => {
+// console.log('定时任务更新了')
+// if (
+// bedsideAuxiliaryScreenStore.deviceData.deviceCode &&
+// newData.length > 0
+// ) {
+// console.log('newData: ', newData)
+// updateCountdown(newData[0].taskDate);
+// } else {
+// taskCountdown.value = "";
+// }
+// },
+// { deep: true }
+// );
const openSettingDeviceDialog = () => {
settingDeviceDialogRef.value?.openDialog();
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/index.vue b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
index ab6c350..3154799 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/index.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
@@ -1,10 +1,18 @@
<template>
- <div class="bedside-auxiliary-screen-container" :style="{ backgroundColor: backgroundColor }">
+ <div
+ class="bedside-auxiliary-screen-container"
+ :style="{ backgroundColor: backgroundColor }"
+ >
<Header />
<div class="bedside-auxiliary-screen-content">
- <div class="content-position"></div>
- <!-- <UnplannedSchedule v-if="cotentHeight > 0" :height="cotentHeight" /> -->
- <component v-if="cotentHeight > 0" :is="currentComponent" :height="cotentHeight" />
+ <div class="content-position"></div>
+ <transition name="fade" mode="out-in">
+ <component
+ v-if="cotentHeight > 0"
+ :is="currentComponent"
+ :height="cotentHeight"
+ />
+ </transition>
</div>
</div>
</template>
@@ -14,47 +22,78 @@
// @ts-ignore
import Header from "./components/Header.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
-import { EPageType } from '@/store/type/bedsideAuxiliaryScreen.type';
-import { getAvailableHeightByClass } from '@/utils/utils';
-import { useWindowSize } from '@/composables/useWindowSize';
+import { EPageType } from "@/store/type/bedsideAuxiliaryScreen.type";
+import { getAvailableHeightByClass } from "@/utils/utils";
+import { useWindowSize } from "@/composables/useWindowSize";
// 未排班时的组件
-const UnplannedSchedule = defineAsyncComponent(() => import('./pages/UnplannedSchedule.vue'));
+const UnplannedSchedule = defineAsyncComponent(
+ () => import("./pages/UnplannedSchedule.vue")
+);
// 未签到时的组件
-const NotSignedIn = defineAsyncComponent(() => import('./pages/NotSignedIn.vue'));
+const NotSignedIn = defineAsyncComponent(
+ () => import("./pages/NotSignedIn.vue")
+);
// 已签到时的组件
-const SignedIn = defineAsyncComponent(() => import('./pages/SignedIn.vue'));
+const SignedIn = defineAsyncComponent(() => import("./pages/SignedIn.vue"));
// 治疗中的组件
-const UnderTreatment = defineAsyncComponent(() => import('./pages/UnderTreatment.vue'));
+const UnderTreatment = defineAsyncComponent(
+ () => import("./pages/UnderTreatment.vue")
+);
+// 血压计的组件
+const Sphygmomanometer = defineAsyncComponent(
+ () => import("./pages/Sphygmomanometer.vue")
+);
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const cotentHeight = ref(0);
const { width, height } = useWindowSize();
-
const backgroundColor = computed(() => {
- let color = '#DAE5EC';
+ let color = "#DAE5EC";
// 如果是未排班、加载中或未签到页面，背景色为白色
- if ([EPageType.NOT_INIT, EPageType.LOADING, EPageType.UNPLANNED_SCHEDULE].includes(bedsideAuxiliaryScreenStore.deviceData.pageType)) {
- color = '#fff';
+ if (
+ [
+ EPageType.NOT_INIT,
+ EPageType.LOADING,
+ EPageType.UNPLANNED_SCHEDULE,
+ ].includes(bedsideAuxiliaryScreenStore.deviceData.pageType)
+ ) {
+ color = "#fff";
}
return color;
});
const currentComponent = computed(() => {
let name: any = UnplannedSchedule;
- // 未排班
- if ([EPageType.NOT_INIT, EPageType.LOADING, EPageType.UNPLANNED_SCHEDULE].includes(bedsideAuxiliaryScreenStore.deviceData.pageType)) {
+
+ // 血压计
+ if (
+ bedsideAuxiliaryScreenStore.deviceData.pageType ===
+ EPageType.SPHYGMOMANOMETER
+ ) {
+ name = Sphygmomanometer;
+ } else if (
+ [
+ EPageType.NOT_INIT,
+ EPageType.LOADING,
+ EPageType.UNPLANNED_SCHEDULE,
+ ].includes(bedsideAuxiliaryScreenStore.deviceData.pageType)
+ ) {
name = UnplannedSchedule;
}
// 未签到
- else if (bedsideAuxiliaryScreenStore.deviceData.pageType === EPageType.NOT_SIGNED_IN) {
- name = NotSignedIn
- }
+ else if (
+ bedsideAuxiliaryScreenStore.deviceData.pageType === EPageType.NOT_SIGNED_IN
+ ) {
+ name = NotSignedIn;
+ }
// 已签到
- else if (bedsideAuxiliaryScreenStore.deviceData.pageType === EPageType.SIGNED_IN) {
+ else if (
+ bedsideAuxiliaryScreenStore.deviceData.pageType === EPageType.SIGNED_IN
+ ) {
name = SignedIn;
}
- // 透析中
+ // 透析中
else {
name = UnderTreatment;
}
@@ -62,9 +101,8 @@
});
watch([width, height], () => {
- cotentHeight.value = getAvailableHeightByClass('content-position')
+ cotentHeight.value = getAvailableHeightByClass("content-position");
});
-
onMounted(() => {
if (bedsideAuxiliaryScreenStore.deviceCode) {
@@ -74,7 +112,7 @@
}`
);
}
- cotentHeight.value = getAvailableHeightByClass('content-position')
+ cotentHeight.value = getAvailableHeightByClass("content-position");
});
</script>
@@ -90,4 +128,14 @@
padding: 6px 12px 0;
}
}
+</style>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+ opacity: 0;
+}
</style>
\ No newline at end of file
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
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
index b05d642..ee65919 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/pages/UnderTreatment.vue
@@ -491,9 +491,9 @@
const option = {
grid: [
- { top: "10%", height: "25%", left: 30, right: 20 },
- { top: "38%", height: "25%", left: 30, right: 20 },
- { top: "66%", height: "25%", left: 30, right: 20 },
+ { 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 },
],
tooltip: {
trigger: "axis",
@@ -508,6 +508,7 @@
axisLabel: { show: false },
splitLine: { show: false },
gridIndex: 0,
+ show: false,
},
{
type: "category",
@@ -518,6 +519,7 @@
axisLabel: { show: false },
splitLine: { show: false },
gridIndex: 1,
+ show: false,
},
{
type: "category",
@@ -528,6 +530,7 @@
axisLabel: { show: true }, // 最下面一层显示时间轴
splitLine: { show: false },
gridIndex: 2,
+ show: false,
},
],
yAxis: [
@@ -538,8 +541,9 @@
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
- min: "dataMin", // 自动以数据最小值为最小值
- max: "dataMax",
+ min: 0,
+ max: 300,
+ interval: 2,
gridIndex: 0,
},
{
@@ -549,8 +553,9 @@
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
- min: "dataMin", // 自动以数据最小值为最小值
- max: "dataMax",
+ min: 0,
+ max: 300,
+ interval: 2,
gridIndex: 1,
},
{
@@ -560,8 +565,9 @@
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
- min: "dataMin", // 自动以数据最小值为最小值
- max: "dataMax",
+ min: 0,
+ max: 300,
+ interval: 2,
gridIndex: 2,
},
],
--
Gitblit v1.8.0