ID1625-治疗中页面暂存

zhangchen

2025-07-24 86850a45ed466f32b3336940c7ed8f4dea700a93

ID1625-治疗中页面暂存

 package-lock.json

@@ -11,6 +11,7 @@
        "@vant/icons": "^3.0.2",
        "@zxing/library": "^0.21.3",
        "axios": "^1.9.0",
        "dayjs": "^1.11.13",
        "echarts": "^5.6.0",
        "element-plus": "^2.9.2",
        "event-source-polyfill": "^1.0.31",
@@ -1412,7 +1413,7 @@
    },
    "node_modules/dayjs": {
      "version": "1.11.13",
      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
      "license": "MIT"
    },
@@ -6127,7 +6128,7 @@
    },
    "dayjs": {
      "version": "1.11.13",
      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
    },
    "de-indent": {

 package.json

@@ -15,6 +15,7 @@
    "@vant/icons": "^3.0.2",
    "@zxing/library": "^0.21.3",
    "axios": "^1.9.0",
    "dayjs": "^1.11.13",
    "echarts": "^5.6.0",
    "element-plus": "^2.9.2",
    "event-source-polyfill": "^1.0.31",

 src/store/type/bedsideAuxiliaryScreen.type.ts

@@ -309,7 +309,9 @@
  maximumDehydrationDuration: string; // 最大脱水量那天的时长
  prescriptionRemarks: string; // 透析处方备注
  abnormalItems: AnomalyIndex[]; // 异常指标列表
  prescriptionDialysisDuration: string; // 透析处方的时长（单位:小时）
  prescriptionDialysisDurationHour: string; // 透析处方的时长（小时部分）
  prescriptionDialysisDurationMin: string; // 透析处方的时长（分钟部分）
  prescriptionDialysisDuration: number | null; // 透析处方的时长（单位：小时）
  dialysisStartTime: number | null; // 透析开始时间(时间戳)
  dialysisEndTime: number | null; // 透析结束时间(时间戳)
  dialysisDuration: number | null; // 已透析时长(单位：分钟)
@@ -328,7 +330,7 @@
  ktvList: KtvItem[]; // 实时ktv计算结果列表
}

interface MonitoringRecord {
export interface MonitoringRecord {
  伸缩压: string; // 血压伸缩压
  舒张压: string; // 血压舒张压
  脉搏: string; // 脉搏
@@ -345,7 +347,8 @@
    maximumDehydrationDuration: "",
    prescriptionRemarks: "",
    abnormalItems: [],
    prescriptionDialysisDuration: "",
    prescriptionDialysisDurationHour: "",
    prescriptionDialysisDurationMin: "",
    dialysisStartTime: null,
    dialysisEndTime: null,
    dialysisDuration: null,
@@ -362,6 +365,7 @@
    bloodVolumeMonitoring: null,
    dialysisFluidFlowRate: null,
    ktvList: [],
    prescriptionDialysisDuration: null, // 透析处方的时长（单位：小时）
  };
};

@@ -475,15 +479,19 @@
        underTreatment.prescriptionRemarks = seeMsg.透析状态?.透析处方备注 ?? "";
        underTreatment.abnormalItems = seeMsg.透析状态?.异常检验指标 ?? [];
        underTreatment.prescriptionDialysisDuration =
          seeMsg.透析状态?.透析处方的时长 ?? null;
        underTreatment.prescriptionDialysisDurationHour =
          seeMsg.透析状态?.透析处方的时长_小时 ?? "";
        underTreatment.prescriptionDialysisDurationMin =
          seeMsg.透析状态?.透析处方的时长_分钟 ?? "";
        underTreatment.dialysisStartTime =
          seeMsg.透析状态?.透析开始时间 ?? null;
        underTreatment.dialysisEndTime = seeMsg.透析状态?.透析结束时间 ?? null;
        underTreatment.dialysisDuration = seeMsg.透析状态?.iot_透析时间 ?? null;
        underTreatment.prescriptionDehydrationVolume =
          seeMsg.透析状态?.处方脱水量 ?? null;
          seeMsg.透析状态?.iot_脱水目标量 ?? null;
        underTreatment.currentDehydrationVolume =
          seeMsg.透析状态?.实时脱水量 ?? null;
          seeMsg.透析状态?.iot_当前脱水量 ?? null;
        underTreatment.currentUltrafiltrationRate =
          seeMsg.透析状态?.iot_脱水速率 ?? null;
        underTreatment.currentBloodTemperature =

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

@@ -105,10 +105,15 @@
          title="血压脉搏趋势图"
          :icon="xinLv2Img"
          background-color="#ffffff"
          class="mini-card left-row2-col3"
          class="mini-card ktv-card left-row2-col3"
          header-class-name="mini-header"
        >
          <div class=""></div>
          <div style="height: 100%">
            <div
              ref="bloodPressureAndPulseEchartRef"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </Card>
      </div>
      <div class="left-row3">
@@ -225,8 +230,22 @@
          class="mini-card right-box-row2-item"
          header-class-name="mini-header"
        >
          <div class="item-box">
            <div class="item-num"></div>
          <div class="progress-box">
            <div class="item-num">
              {{ jgTime4(pageData.dialysisDuration) }}/{{
                pageData.prescriptionDialysisDuration
              }}:{{ pageData.prescriptionDialysisDurationMin }}
            </div>
            <ProgressBar
              :percent="
                (Number(pageData.dialysisDuration) /
                  (Number(pageData.prescriptionDialysisDuration) * 60)) *
                100
              "
              color="#70A3DD"
              backgroundColor="#D6DEF1"
              borderRadius="50%"
            />
          </div>
        </Card>
        <Card
@@ -245,7 +264,7 @@
            <ProgressBar
              :percent="
                (pageData.currentDehydrationVolume /
                  pageData.currentDehydrationVolume) *
                  pageData.prescriptionDehydrationVolume) *
                100
              "
              color="#70CAAE"
@@ -302,6 +321,8 @@
<script lang="ts" setup name="UnderTreatment">
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import dayjs from "dayjs";

// @ts-ignore
import Card from "../components/Card.vue";
// @ts-ignore
@@ -317,8 +338,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";
@@ -341,6 +365,8 @@

// ktv趋势图的
const ktvListEchartRef = ref<HTMLElement | null>(null);
// 血压脉搏趋势图的
const bloodPressureAndPulseEchartRef = ref<HTMLElement | null>(null);

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
@@ -349,7 +375,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 "透析中";
@@ -364,7 +390,7 @@
/** 生成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 +399,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: [
      {
@@ -417,6 +443,166 @@
  chart.setOption(option, true); // 第二个参数为 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: "20%", height: "27%", left: 30, right: 20 }, // 伸缩压
      { top: "45%", height: "27%", left: 30, right: 20 }, // 舒张压
      { top: "67%", height: "27%", left: 30, right: 20 }, // 脉搏
    ],
    tooltip: {
      trigger: "axis",
    },
    xAxis: [
      {
        type: "category",
        data: xAxisData,
        boundaryGap: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        gridIndex: 0,
      },
      {
        type: "category",
        data: xAxisData,
        boundaryGap: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        gridIndex: 1,
      },
      {
        type: "category",
        data: xAxisData,
        boundaryGap: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: true }, // 最下面一层显示时间轴
        splitLine: { show: false },
        gridIndex: 2,
      },
    ],
    yAxis: [
      {
        type: "value",
        show: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 80,
        max: 180,
        interval: 20,
        gridIndex: 0,
      },
      {
        type: "value",
        show: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 40,
        max: 120,
        interval: 20,
        gridIndex: 1,
      },
      {
        type: "value",
        show: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 40,
        max: 140,
        interval: 20,
        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,
    },
  }));
};

/** 定时任务 */
const onScheduledTasksClick = () => {};

@@ -432,12 +618,21 @@
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 +911,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;