ID1625-血压计页面修改

zhangchen

2025-07-25 86d9b0511e4730ca19633b6c3be605e5d61533aa

ID1625-血压计页面修改

 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);
        }
      };
    };

 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,6 +198,15 @@
  notSignedIn: NotSignedIn;
  signedIn: SignedIn;
  underTreatment: UnderTreatment;
  sphygmomanometer: Sphygmomanometer;
}

export const defaultSphygmomanometer = () :Sphygmomanometer => {
  return {
    sbp: null,
    dbp: null,
    pulseRate: null,
  }
}

export enum EPageType {
@@ -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.透析状态) {

 src/store/type/task.type.ts

@@ -9,4 +9,6 @@
  taskName: string;
  /** 是否过期 */
  overdue: boolean;
  /** 倒计时，如果存在该字段则表明是远程传过来的 */
  countdown?: number;
}

 src/utils/utils.ts

@@ -29,3 +29,23 @@

  return value;
}
/**
 * 深拷贝
 * @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;
}

 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();

 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" />
      <transition name="fade" mode="out-in">
        <component
          v-if="cotentHeight > 0"
          :is="currentComponent"
          :height="cotentHeight"
        />
      </transition>
    </div>
  </div>
</template>
@@ -14,44 +22,75 @@
// @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;
  }
  // 透析中 
@@ -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>

@@ -91,3 +129,13 @@
  }
}
</style>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

 src/views/mobile/bedsideAuxiliaryScreen/pages/Sphygmomanometer.vue

New file
@@ -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>

 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,
      },
    ],