ID1956-暂存

zhangchen

2025-08-23 d39007338382027ab13dd88df90a0f69f9a085d2

ID1956-暂存

 src/store/type/bedsideAuxiliaryScreen.type.ts

@@ -124,6 +124,12 @@
  透析龄: number | null;
  iot_血液流速: number | null;
  透析液流量: number | null;
  血流量: string;
  处方钠: number | null;
  葡萄糖: string;
  钙: number | null;
  上次透析血压列表: any[];
  上次透析超滤总量: number | null;
}

export interface VascularAccess {
@@ -304,36 +310,68 @@
};

export interface SignedIn {
  abnormalItems: AnomalyIndex[];
  dialysisPlan: string; // 透析方案
  prescriptionDehydrationVolume: number | null; // 透析处方脱水量
  dialyzer: string; // 透析器
  averageDehydrationRate: string; // 最近平均脱水量
  maximumDehydrationCapacity: string; // 最近最大脱水量
  maximumDehydrationCapacityDate: string; // 最近最大脱水量日期
  dryWeight: number | null; // 干体重
  preDialysisWeight: number | null; // 透前称重
  weightAfterLastDialysis: number | null; // 上次透后称重
  weightIncrease: number | null; // 体重增加
  weightIncreaseRate: number | null; // 体重增长率
  maximumDehydrationDuration: string;
  治疗模式: string;
  置换方式: string;
  处方脱水量: number | null;
  置换总量: number | null;
  透析器: string;
  抗凝剂: Anticoagulant[];
  最近平均脱水量: string;
  最近最大脱水量: string;
  最近最大脱水量透析时长: string;
  最近最大脱水量透析日期: string;
  处方备注: string;
  处方血流量: string;
  透析液流量: number | null;
  处方钠: number | null;
  葡萄糖: string;
  钙: number | null;
  干体重: number | null;
  脱水量: number | null;
  透前体重: number | null;
  上次透后体重: number | null;
  上次透析单所属日期: string;
  透析时长: string;
  透析时长2: string; // 透析时长2,
  上次透析血压列表: number[];
  上次透析超滤量: number | null;
  临时医嘱列表: any[];
  本次透析单所属日期: string; // 本次透析单所属日期
  体重增长_透前_上次透后: number | null; // 体重增长(透前-上次透后)
  体重增持_透前_干体重: number | null; // 体重增长(透前-干体重)
}

export const defaultSignedIn = (): SignedIn => {
  return {
    abnormalItems: [], // 异常指标列表
    dialysisPlan: "", // 透析方案
    prescriptionDehydrationVolume: null, // 透析处方脱水量
    dialyzer: "", // 透析器
    averageDehydrationRate: "", // 最近平均脱水量
    maximumDehydrationCapacity: "", // 最近最大脱水量
    maximumDehydrationCapacityDate: "", // 最近最大脱水量日期
    dryWeight: null, // 干体重
    preDialysisWeight: null, // 透前称重
    weightAfterLastDialysis: null, // 上次透后称重
    weightIncrease: null, // 体重增加
    weightIncreaseRate: null, // 体重增长率
    maximumDehydrationDuration: '',
    治疗模式: '',
    置换方式: '',
    处方脱水量: null,
    置换总量: null,
    透析时长: '',
    透析时长2: '',
    透析器: '',
    抗凝剂: [],
    最近平均脱水量: '',
    最近最大脱水量: '',
    最近最大脱水量透析时长: '',
    最近最大脱水量透析日期: '',
    处方备注: '',
    处方血流量: '',
    透析液流量: null,
    处方钠: null,
    葡萄糖: '',
    钙: null,
    干体重: null,
    脱水量: null,
    透前体重: null,
    上次透后体重: null,
    上次透析单所属日期: '',
    上次透析血压列表: [],
    上次透析超滤量: null,
    临时医嘱列表: [],
    本次透析单所属日期: "",
    体重增长_透前_上次透后: null, // 体重增长(透前-上次透后)
    体重增持_透前_干体重: null, // 体重增长(透前-干体重)
  };
};

@@ -512,24 +550,39 @@
      else if (treatmentStatus === EMedStatus.SIGNED_IN) {
        result.pageType = EPageType.SIGNED_IN;
        const signedIn = defaultSignedIn();
        signedIn.abnormalItems = seeMsg.透析状态?.异常检验指标 ?? [];
        signedIn.dialysisPlan = seeMsg.透析状态?.透析方案 ?? "";
        signedIn.prescriptionDehydrationVolume =
          seeMsg.透析状态?.处方脱水量 ?? null;
        signedIn.dialyzer = seeMsg.透析状态?.透析器 ?? "";
        signedIn.averageDehydrationRate = seeMsg.透析状态?.最近平均脱水量 ?? "";
        signedIn.maximumDehydrationCapacity =
          seeMsg.透析状态?.最近最大脱水量 ?? "";
        signedIn.maximumDehydrationCapacityDate =
          seeMsg.透析状态?.最近最大脱水量日期 ?? "";
        signedIn.dryWeight = seeMsg.透析状态?.干体重 ?? null;
        signedIn.preDialysisWeight = seeMsg.透析状态?.透前称重 ?? null;
        signedIn.weightAfterLastDialysis =
          seeMsg.透析状态?.上次透后称重 ?? null;
        signedIn.weightIncrease = seeMsg.透析状态?.体重增加 ?? null;
        signedIn.weightIncreaseRate = seeMsg.透析状态?.体重增长率 ?? null;
        signedIn.maximumDehydrationDuration =
          seeMsg.透析状态?.最近最大脱水量透析时长 ?? "";

        signedIn.置换方式 = seeMsg.透析状态?.置换方式 ?? "";
        signedIn.治疗模式 = seeMsg.透析状态?.透析方案 ?? "";
        signedIn.处方脱水量 = seeMsg.透析状态?.处方脱水量 ?? null;
        signedIn.置换总量 = null;
        signedIn.透析器 = seeMsg.透析状态?.透析器 ?? "";
        signedIn.抗凝剂 = seeMsg.透析状态?.抗凝剂列表 ?? [];
        signedIn.最近平均脱水量 = seeMsg.透析状态?.最近平均脱水量 ?? "";
        signedIn.最近最大脱水量 = seeMsg.透析状态?.最近最大脱水量 ?? "";
        signedIn.最近最大脱水量透析时长 = seeMsg.透析状态?.最近最大脱水量透析时长 ?? "";
        signedIn.最近最大脱水量透析日期 = seeMsg.透析状态?.最近最大脱水量日期 ?? "";
        signedIn.处方备注 = seeMsg.透析状态?.透析处方备注 ?? "";
        signedIn.处方血流量 = seeMsg.透析状态?.血流量 ?? "";
        signedIn.透析液流量 = seeMsg.透析状态?.透析液流量 ?? null;
        signedIn.处方钠 = seeMsg.透析状态?.处方钠 ?? null;
        signedIn.葡萄糖 = seeMsg.透析状态?.葡萄糖 ?? "";
        signedIn.钙 = seeMsg.透析状态?.钙 ?? null;
        signedIn.干体重 = seeMsg.透析状态?.干体重 ?? null;
        signedIn.脱水量 = seeMsg.透析状态?.处方脱水量 ?? null;
        signedIn.透前体重 = seeMsg.透析状态?.透前称重 ?? null;
        signedIn.上次透后体重 = seeMsg.透析状态?.上次透后称重 ?? null;
        signedIn.上次透析单所属日期 = "";
        signedIn.透析时长 = seeMsg.透析状态?.透析处方的时长_小时 + ':' + seeMsg.透析状态?.透析处方的时长_分钟;
        signedIn.透析时长2 = seeMsg.透析状态?.透析处方的时长_小时 + ' h ';
        if (seeMsg.透析状态?.透析处方的时长_分钟 && !['00', '0'].includes(seeMsg.透析状态?.透析处方的时长_分钟)) {
          signedIn.透析时长2 += seeMsg.透析状态?.透析处方的时长_分钟 + ' min';
        }
        signedIn.上次透析血压列表 = seeMsg.透析状态?.上次透析血压列表 ?? [];
        signedIn.上次透析超滤量 = seeMsg.透析状态?.上次透析超滤总量 ?? null;
        signedIn.临时医嘱列表 = seeMsg.透析状态?.透析单医嘱列表 ?? [];
        signedIn.本次透析单所属日期 = "";
        signedIn.体重增长_透前_上次透后 = signedIn.透前体重 - signedIn.上次透后体重;
        signedIn.体重增持_透前_干体重 = signedIn.透前体重 - signedIn.干体重;

        result.signedIn = signedIn;
      }
@@ -655,6 +708,12 @@
    result = "前";
  } else if (mode === "后置换") {
    result = "后";
  } else if (mode === "中置换") {
    result = "中";
  } else if (mode === "混合置换") {
    result = "混合";
  } else if (mode === "/") {
    result = "";
  }
  return result;
};

 src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue

@@ -8,6 +8,9 @@
    <div class="card-header" :class="props.headerClassName">
      <img :src="props.icon" class="card-icon" alt="" srcset="" />
      <span class="card-title">{{ props.title }}</span>
      <span class="card-right-text" v-if="$slots.right">
        <slot name="right" />
      </span>
    </div>
    <div class="card-main">
      <slot />
@@ -42,6 +45,7 @@
  height: 100%;

  .card-header {
    position: relative;
    flex: 0 0 6px;
    display: flex;
    align-items: center;
@@ -65,6 +69,19 @@
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-right-text {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 4px;
      color: #333333;
      line-height: 5px;
      text-align: right;
      font-style: normal;
    }
  }

  .card-main {

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

@@ -1,7 +1,7 @@
<template>
  <div class="signed-in-container" :style="{ '--height': height + 'px' }">
    <div class="row1">
      <div class="row1-col1">
      <div class="col row1-col1">
        <el-image
          :src="pageData.patientPhone"
          style="width: 100%; height: 100%"
@@ -11,174 +11,279 @@
          </template>
        </el-image>
      </div>
      <div class="row1-col2">
      <div class="col row1-col2">
        <Card
          title="异常指标"
          :icon="xinlvImg"
          title="治疗模式"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row1-col2-row1"
          header-class-name="mihi-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 dialysis-mode-content">
            <span class="text-1">{{
              formatSubstituteMode(pageData.置换方式)
            }}</span>
            <span class="text-2">{{ pageData.治疗模式 }}</span>
          </div>
        </Card>
      </div>
      <div class="row1-col3">
        <div class="row1-col3-row1">
          <Card
            title="治疗模式"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="row1-col3-row1-item"
            header-class-name="mihi-header"
          >
            <div class="item-box dialysis-mode-content">
              {{ pageData.dialysisPlan }}
            </div>
          </Card>
          <Card
            title="治疗状态"
            :icon="zlztImg"
            background-color="#ffffff"
            class="row1-col3-row1-item"
            header-class-name="mihi-header"
          >
            <div class="item-box treatment-status">已签到</div>
          </Card>
        </div>
        <Card
          title="处方脱水量"
          :icon="cljdImg"
          background-color="#ffffff"
          class="row1-col3-row2"
          class="row1-col2-row2"
          header-class-name="mihi-header"
        >
          <div class="item-box prescription-ehydration-olume">
            {{ pageData.prescriptionDehydrationVolume }} L
            <span
              >{{ pageData.处方脱水量 }}
              <template v-if="pageData.处方脱水量">L</template></span
            >
          </div>
        </Card>
      </div>
      <div class="row1-col4">
      <div class="col row1-col3">
        <Card
          title="透析器(显示规格)"
          :icon="txqImg"
          title="置换总量"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row1-col4-row"
          class="row1-col3-row1"
          header-class-name="mihi-header"
        >
          <div class="item-box total-amount-replacement">
            <span>{{ pageData.置换总量 }}</span>
          </div>
        </Card>
        <Card
          title="透析时长"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row1-col3-row2"
          header-class-name="mihi-header"
        >
          <div class="item-box dialysis-duration">
            <span>{{ pageData.透析时长2 }}</span>
          </div>
        </Card>
      </div>
      <div class="col row1-col4">
        <Card
          title="透析器"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row1-col4-row1"
          header-class-name="mihi-header"
        >
          <div class="item-box dialyzer">
            {{ pageData.dialyzer }}
            <span>{{ pageData.透析器 }}</span>
          </div>
        </Card>
        <Card
          title="抗凝剂"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row1-col4-row2"
          header-class-name="mihi-header"
        >
          <div class="item-box anticoagulant">
            <div
              v-for="(item, index) in pageData.抗凝剂"
              :key="index"
              class="list-item"
            >
              <div class="list-item-name">
                {{ item.name }}
              </div>
              <div class="list-item-num">
                <span>首剂：{{ item.首剂 }}{{ item.单位 }}</span>
                <span
                  >追加/维持：{{
                    item.是否为追加 ? item.追加剂量 : item.维持剂量
                  }}{{ item.单位 }}</span
                >
                <span>总量：{{ item.总量 }}{{ item.单位 }}</span>
              </div>
            </div>
          </div>
        </Card>
      </div>
      <div class="col row1-col5">
        <Card
          title="脱水量详情"
          :icon="cljdImg"
          background-color="#ffffff"
          class="row1-col4-row"
          header-class-name="mihi-header"
          class="mini-card row1-col5-row1"
          header-class-name="mini-header"
        >
          <div class="dehydrated-level left-0">
          <div class="dehydrated-level">
            <div class="dehydrated-level-item">
              <span class="item-left"
                >平均脱水量:{{ pageData.averageDehydrationRate }} L</span
                >平均脱水量：{{ pageData.最近平均脱水量 }} L</span
              >
              <span class="item-right">(最近9次)</span>
            </div>
            <div class="dehydrated-level-item">
              <span class="item-left"
                ><span
                  >最大脱水量:{{ pageData.maximumDehydrationCapacity }} L</span
                >
                <template v-if="pageData.maximumDehydrationDuration"
              <div class="item-left">
                <span>最大脱水量：{{ pageData.最近最大脱水量 }} L</span>
                <template v-if="pageData.最近最大脱水量透析时长"
                  >/
                  <span class="level-dete">{{
                    pageData.maximumDehydrationDuration
                    pageData.最近最大脱水量透析时长
                  }}</span>
                </template>
              </span>

              </div>
              <span class="item-right"
                >({{ pageData.maximumDehydrationCapacityDate }})</span
                >({{ pageData.最近最大脱水量透析日期 }})</span
              >
            </div>
          </div>
        </Card>
        <Card
          title="处方备注"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row1-col5-row2"
          header-class-name="mihi-header"
        >
          <div class="item-box prescription-remarks">
            <span>{{ pageData.处方备注 }}</span>
          </div>
        </Card>
      </div>
    </div>
    <div class="row2">
      <Card
        title="干体重"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.dryWeight }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="透前体重"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.preDialysisWeight }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="上次透后体重"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{
            pageData.weightAfterLastDialysis
          }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="体重增长"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span v-if="pageData.weightIncreaseRate > 0" class="weight-text"
            >+</span
      <div class="col row2-col1">
        <div class="row2-col1-row1">
          <Card
            title="处方血流量"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="row2-col1-row1-col1"
            header-class-name="mihi-header"
          >
          <span class="weight-text">{{ pageData.weightIncrease }}</span>
          <span class="unit-text">kg</span>
            <div class="item-box blood-flow">
              <span>{{ pageData.处方血流量 }}</span>
            </div>
          </Card>
          <Card
            title="处方钠"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="row2-col1-row1-col2"
            header-class-name="mihi-header"
          >
            <div class="item-box prescription-sodium">
              <span>{{ pageData.处方钠 }}</span>
            </div>
          </Card>
        </div>
      </Card>
      <Card
        title="增长率"
        :icon="tizhongImg"
        background-color="#ffffff"
        class="row2-item"
        header-class-name="big-header"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.weightIncreaseRate }}</span>
          <span class="unit-text">%</span>
        <div class="row2-col1-row2">
          <Card
            title="透析液流量"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="row2-col1-row2-col1"
            header-class-name="mihi-header"
          >
            <div class="item-box dialysis-fluid-flow-rate">
              <span>{{ pageData.透析液流量 }}</span>
            </div>
          </Card>
          <Card
            title="透析液种类"
            :icon="zlmsImg"
            background-color="#ffffff"
            class="row2-col1-row2-col2"
            header-class-name="mihi-header"
          >
            <div class="item-box types-dialysis-fluid">
              <div>葡萄糖:{{ pageData.葡萄糖 }}</div>
              <div>钙:{{ pageData.钙 }}</div>
            </div>
          </Card>
        </div>
      </Card>
        <Card
          title="治疗状态"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="row2-col1-row3"
          header-class-name="mihi-header"
        >
          <div class="item-box treatment-status">
            <span>已签到</span>
          </div>
        </Card>
      </div>
      <div class="col row2-col2">
        <Card
          title="参考指标"
          :icon="zlmsImg"
          background-color="#ffffff"
          class="mini-card reference-indicators"
          header-class-name="mihi-header"
        >
          <template #right>
            {{ nowDateText }}
          </template>
          <table class="item-box reference-indicators-content">
            <tbody>
              <tr>
                <td>血压<br />超滤量<br />{{ pageData.上次透析单所属日期 }}</td>
                <td
                  ref="bloodPressureRectangularChart"
                  style="overflow: hidden"
                >
                  <canvas width="1px" height="1px" />
                </td>
              </tr>
              <tr>
                <td>干体重</td>
                <td>{{ pageData.干体重 }}kg</td>
              </tr>
              <tr>
                <td>体重增长</td>
                <td>
                  <span class="sub-text">(透前-上次透后)</span
                  >{{ pageData.体重增长_透前_上次透后 }}kg
                </td>
              </tr>
              <tr>
                <td>体重增长</td>
                <td>
                  <span class="sub-text">(透前-干体重)</span
                  >{{ pageData.体重增持_透前_干体重 }}kg
                </td>
              </tr>
              <!-- <tr>
                <td>脱水量</td>
                <td>{{ pageData.脱水量 }}%</td>
              </tr> -->
              <tr>
                <td>透前体重</td>
                <td>{{ pageData.透前体重 }}kg</td>
              </tr>
              <tr>
                <td>上次透后体重</td>
                <td>{{ pageData.上次透后体重 }}kg</td>
              </tr>
              <tr>
                <td>透析时间</td>
                <td>{{ pageData.上次透析单所属日期 }}</td>
              </tr>
            </tbody>
          </table>
        </Card>
      </div>
      <div class="col row2-col3">
        <Card
          title="临时医嘱"
          :icon="yizhuImg"
          background-color="#ffffff"
          class="mini-card"
          header-class-name="mini-header"
        >
          <DoctorAdvice :list="pageData.临时医嘱列表" />
        </Card>
      </div>
    </div>
    <div class="row3">
      <BlockBotttom
@@ -206,9 +311,13 @@
  </div>
</template>
<script lang="ts" setup name="SignedIn">
import { computed } from "vue";
import { computed, onMounted, ref } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
// @ts-ignore
import Card from "../components/Card.vue";
import DoctorAdvice from "../components/DoctorAdvice/index.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import tslImg from "@/img/tsl.png";
import dingShiImg from "@/img/dingshi2.png";
@@ -220,11 +329,13 @@
import cljdImg from "@/img/cljd.png";
import txqImg from "@/img/txq.png";
import tizhongImg from "@/img/tizhong.png";
import yizhuImg from "@/img/yizhu.png";

import {
  getItemName,
  formatTestColr,
  formatTestFlag,
  formatSubstituteMode,
} from "@/store/type/bedsideAuxiliaryScreen.type";
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
@@ -237,10 +348,21 @@

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const bloodPressureRectangularChart = ref<HTMLElement | null>(null);

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
    patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
  });
});

const nowDateText = computed(() => {
  if (pageData.value.本次透析单所属日期) {
    let result = dayjs(pageData.value.本次透析单所属日期).format("YYYY-MM-DD");
    result += `(${dayjs(pageData.value.本次透析单所属日期).format("ddd")})`;
    return result;
  }
  return "";
});

/** 点击定时任务 */
@@ -259,6 +381,234 @@
    type: "warning",
  });
};
const genderBloodPressureRectangularChart = (datas: any) => {
  if (bloodPressureRectangularChart.value) {
    const benchmarkData = {
      width: 386,
      height: 280,
    };
    // 获取容器实际宽高
    const containerWidth = bloodPressureRectangularChart.value.offsetWidth;
    const containerHeight = bloodPressureRectangularChart.value.offsetHeight;
    // 等比例缩放因子
    const scale = Math.min(
      containerWidth / benchmarkData.width,
      containerHeight / benchmarkData.height
    );

    // 拿到 canvas
    let canvas = bloodPressureRectangularChart.value.querySelector("canvas");
    if (!canvas) {
      canvas = document.createElement("canvas");
      bloodPressureRectangularChart.value.appendChild(canvas);
    }

    // 设置 canvas 尺寸
    canvas.width = benchmarkData.width * scale;
    canvas.height = benchmarkData.height * scale;
    canvas.style.width = `${canvas.width}px`;
    canvas.style.height = `${canvas.height}px`;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 按缩放因子缩放绘制环境
    ctx.save();
    // ctx.scale(scale, scale);

    // 设置字体样式
    ctx.font = `12px Arial`;
    ctx.textAlign = "center";

    // 处理数据
    const measurements = [
      { systolic: 143, diastolic: 74 },
      { systolic: 136, diastolic: 71 },
      { systolic: 139, diastolic: 73 },
      { systolic: 139, diastolic: 73 },
    ];
    // if (datas && datas.血压1_透前收缩压) {
    //   measurements[0].systolic = datas?.血压1_透前收缩压 ?? null;
    //   measurements[0].diastolic = datas?.血压1_透前舒张压 ?? null;
    //   measurements[1].systolic = datas?.血压2_前半程最低收缩压 ?? null;
    //   measurements[1].diastolic = datas?.血压2_前半程最低舒张压 ?? null;
    //   measurements[2].systolic = datas?.血压3_后半程最低收缩压 ?? null;
    //   measurements[2].diastolic = datas?.血压3_后半程最低舒张压 ?? null;
    //   measurements[3].systolic = datas?.血压4_透后收缩压 ?? null;
    //   measurements[3].diastolic = datas?.血压4_透后舒张压 ?? null;
    // }

    const chartHeight = canvas.height;
    const chartWidth = canvas.width;

    // 限所在位置 200
    const upperLimitY = chartHeight * 0.5;
    ctx.beginPath();
    ctx.moveTo(0, upperLimitY);
    ctx.lineTo(chartWidth, upperLimitY);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 1;
    ctx.stroke();

    // 下限所在位置 140
    const lowerLimitY = chartHeight * (1 - 0.2857);
    console.log("lowerLimitY:", lowerLimitY);
    ctx.beginPath();
    ctx.moveTo(0, lowerLimitY);
    ctx.lineTo(chartWidth, lowerLimitY);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 1;
    ctx.stroke();

    // 绘制收缩压折线图
    const measurementWidth = canvas.width / (measurements.length + 1);

    // 收缩压线
    let systolicEnd = { x: null, y: null };
    ctx.beginPath();
    ctx.moveTo(
      measurementWidth,
      chartHeight - measurements[0].systolic * scale
    );
    for (let i = 1; i < measurements.length; i++) {
      const x = (i + 1) * measurementWidth;
      ctx.lineTo(x, chartHeight - measurements[i].systolic * scale);
      if (i === measurements.length - 1) {
        systolicEnd.x = x;
        systolicEnd.y = chartHeight - measurements[i].systolic * scale;
      }
    }
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.stroke();

    // 舒张压线
    let diastolicEnd = { x: null, y: null };
    ctx.beginPath();
    ctx.moveTo(
      measurementWidth,
      chartHeight - measurements[0].diastolic * scale
    );
    for (let i = 1; i < measurements.length; i++) {
      const x = (i + 1) * measurementWidth;
      ctx.lineTo(x, chartHeight - measurements[i].diastolic * scale);
      if (i === measurements.length - 1) {
        diastolicEnd.x = x;
        diastolicEnd.y = chartHeight - measurements[i].diastolic * scale;
      }
    }

    // 连接收缩压和舒张压的起始点和结束点
    ctx.moveTo(
      measurementWidth,
      chartHeight - measurements[0].systolic * scale
    );
    ctx.lineTo(
      measurementWidth,
      chartHeight - measurements[0].diastolic * scale
    );
    ctx.moveTo(systolicEnd.x, systolicEnd.y);
    ctx.lineTo(diastolicEnd.x, diastolicEnd.y);

    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    ctx.stroke();

    const baseFontSize = 24;
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "black";

    measurements.forEach((m, i) => {
      const x = (i + 1) * measurementWidth;
      ctx.fillText(
        m.systolic.toString(),
        x,
        chartHeight - m.systolic * scale - 5
      );
      ctx.fillText(
        m.diastolic.toString(),
        x,
        chartHeight - m.diastolic * scale + 10
      );
    });

    // 绘制圆柱体
    const 计算脱水量刻度 = 100 / datas.超滤总量;
    const cylinderX = canvas.width * 0.9; // 圆柱体中心X坐标
    const cylinderY = canvas.height; // 圆柱体中心Y坐标
    const cylinderRadius = 6 * scale; // 圆柱体半径
    const cylinderHeight = 计算脱水量刻度 * datas.超滤总量 || 20; // 圆柱体高度
    const 超滤总量 = datas.超滤总量 || "0 L"; // 超滤总量
    const 脱水百分比 = datas.脱水百分比 || 0; // 脱水百分比
    const 透后体重减干体重的差值 = datas.透后体重减干体重的差值 || 0; // 透后体重减干体重的差值
    drawCylinder(
      ctx,
      cylinderX,
      cylinderY,
      cylinderRadius,
      cylinderHeight,
      超滤总量,
      脱水百分比,
      透后体重减干体重的差值
    );
  }
};

const drawCylinder = (
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  radius: number,
  height: number,
  超滤总量: string, // 超滤总量
  脱水百分比: number, // 脱水百分比
  透后体重减干体重的差值: number // 透后体重减干体重的差值
) => {
  ctx.beginPath();
  ctx.arc(x, y + height, radius, 0, Math.PI * 2);
  ctx.fillStyle = "#409EFF"; // 填充蓝色
  ctx.strokeStyle = "#409EFF";
  if (脱水百分比 > 3) {
    ctx.fillStyle = "#E6A23C"; // 填充黄色
    ctx.strokeStyle = "#E6A23C";
  } else if (脱水百分比 > 5) {
    ctx.fillStyle = "#F56C6C"; // 填充红色
    ctx.strokeStyle = "#F56C6C";
  }
  ctx.fill();
  ctx.stroke();

  // 绘制侧面矩形
  ctx.beginPath();
  ctx.moveTo(x - radius, y - height);
  ctx.lineTo(x - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.lineTo(x + radius, y - height);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  // 添加文本说明
  ctx.font = "16px Arial";
  ctx.textAlign = "center";
  ctx.fillStyle = "#409EFF";
  ctx.fillText(超滤总量, 180, 280 - height - 10); // 文本位于圆柱上方一点

  if (透后体重减干体重的差值 > 0) {
    ctx.font = "16px Arial";
    ctx.textAlign = "center";
    ctx.fillStyle = "#000000";
    ctx.fillText(透后体重减干体重的差值 + "", x, 280); // 文本位于圆柱上方一点
  }
};
onMounted(() => {
  genderBloodPressureRectangularChart({});
});
</script>
<style lang="less" scoped>
* {
@@ -269,176 +619,317 @@
  height: var(--height);
  overflow: hidden;
  .row1 {
    height: 37.44%;
    margin-bottom: 4px;
    height: 38.38%;
    overflow: hidden;
    margin-bottom: 1.07%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .row1-col1 {
      flex: 0 0 14.86%;
    .col {
      height: 100%;
      border-radius: 2px;
      overflow: hidden;
    }
    .row1-col2 {
      flex: 0 0 32.86%;
      height: 100%;
      .dialysis-mode-content {
        height: 100%;
        .abnormal-indicator {
          display: inline-block;
          margin-right: 6px;
          margin-bottom: 4px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 5px;
          line-height: 6px;
          text-align: left;
          font-style: normal;
        }
      &.row1-col1 {
        flex: 0 0 14.86%;
      }
    }
    .row1-col3 {
      flex: 0 0 23.71%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .row1-col3-row1 {
        flex: 1;
      &.row1-col2 {
        flex: 0 0 14.57%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        .row1-col3-row1-item {
          flex: 1;
        }
      }
      .row1-col3-row2 {
        flex: 1;
      }
    }
    .row1-col4 {
      flex: 0 0 25.14%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .row1-col4-row {
        flex: 1;
        .dehydrated-level {
          padding-left: 6px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          &.left-0 {
            padding-left: 0;
          }
          .dehydrated-level-item {
            width: 100%;
        .row1-col2-row1 {
          flex: 0 0 40%;
          .dialysis-mode-content {
            display: flex;
            align-items: center;
            .item-left {
              flex: 1;
            justify-content: center;
            .text-1 {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 4px;
              font-size: 6px;
              color: #c9a589;
              line-height: 8px;
              text-align: center;
              font-style: normal;
            }
            .text-2 {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 9px;
              color: #d58e56;
              line-height: 12px;
              text-align: center;
              font-style: normal;
            }
          }
        }
        .row1-col2-row2 {
          flex: 0 0 60%;
          .prescription-ehydration-olume {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 11px;
            color: #e87d00;
            text-align: center;
            font-style: normal;
          }
        }
      }
      &.row1-col3 {
        flex: 0 0 14.57%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        .row1-col3-row1 {
          flex: 0 0 40%;
          .total-amount-replacement {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 9px;
            color: #d58e56;
            line-height: 13px;
            text-align: center;
            font-style: normal;
          }
        }
        .row1-col3-row2 {
          flex: 0 0 60%;
          .dialysis-duration {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 8px;
            color: #333333;
            line-height: 11px;
            text-align: center;
            font-style: normal;
          }
        }
      }
      &.row1-col4 {
        flex: 0 0 25.71%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        .row1-col4-row1 {
          flex: 0 0 40%;
          .dialyzer {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 11px;
            color: #333333;
            text-align: center;
            font-style: normal;
          }
        }
        .row1-col4-row2 {
          flex: 0 0 60%;
          .anticoagulant {
            .list-item {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 4.5px;
              color: #333333;
              line-height: 6px;
              text-align: left;
              font-style: normal;
              .level-dete {
              .list-item-name {
                margin-bottom: 2px;
              }
            }
          }
        }
      }
      &.row1-col5 {
        flex: 0 0 25.71%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        .row1-col5-row1 {
          flex: 0 0 40%;
          .dehydrated-level {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            .dehydrated-level-item {
              width: 100%;
              display: flex;
              align-items: center;
              .item-left {
                flex: 1;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 4px;
                color: #d58e56;
                text-align: left;
                color: #333333;
                line-height: 6px;
                font-style: normal;
                .level-dete {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  font-size: 4px;
                  color: #d58e56;
                  text-align: left;
                  font-style: normal;
                }
              }
              .item-right {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 4px;
                color: #777777;
                line-height: 6px;
                font-style: normal;
              }
            }
            .item-right {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 4px;
              color: #777777;
              line-height: 6px;
              font-style: normal;
            }
          }
        }
        .row1-col5-row2 {
          flex: 0 0 60%;
          .prescription-remarks {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 4px;
            color: #9a1717;
            line-height: 6px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }
  .row2 {
    height: 21.72%;
    height: 44.56%;
    overflow: hidden;
    margin-bottom: 1.07%;
    display: flex;
    gap: 4px;
    .row2-item {
      flex: 1;

      .weight-box {
    justify-content: space-between;
    .col {
      height: 100%;
      border-radius: 2px;
      overflow: hidden;
      &.row2-col1 {
        flex: 0 0 38%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
        align-items: baseline;
        .weight-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 11px;
          color: #333333;
          text-align: center;
          font-style: normal;
        flex-direction: column;
        justify-content: space-between;
        .row2-col1-row1 {
          height: 34%;
          display: flex;
          gap: 4px;
          .row2-col1-row1-col1 {
            flex: 1;
            height: 100%;
            .blood-flow {
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 9px;
              color: #333333;
              line-height: 12px;
              text-align: center;
              font-style: normal;
            }
          }
          .row2-col1-row1-col2 {
            flex: 1;
            height: 100%;
            .prescription-sodium {
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 9px;
              color: #333333;
              line-height: 12px;
              text-align: center;
              font-style: normal;
            }
          }
        }
        .unit-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 7px;
          color: #333333;
          text-align: center;
          font-style: normal;
        .row2-col1-row2 {
          height: 34%;
          display: flex;
          gap: 4px;
          .row2-col1-row2-col1 {
            flex: 1;
            height: 100%;
            .dialysis-fluid-flow-rate {
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 9px;
              color: #333333;
              line-height: 12px;
              text-align: center;
              font-style: normal;
            }
          }
          .row2-col1-row2-col2 {
            flex: 1;
            height: 100%;
            .types-dialysis-fluid {
              display: flex;
              flex-direction: column;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 4.2px;
              color: #333333;
              font-style: normal;
            }
          }
        }
        .row2-col1-row3 {
          height: 22.3%;
          flex-direction: row;
          .treatment-status {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 9px;
            color: #70a3dd;
            text-align: center;
            font-style: normal;
          }
        }
      }
      &.row2-col2 {
        flex: 0 0 18.2%;
      }
      &.row2-col3 {
        flex: 0 0 41.4%;
      }
    }
  }
  .row3 {
    position: absolute;
    width: 100%;
    bottom: 2px;
    height: 13.33%;
    height: 11.92%;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 13px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 2px;
    .btn {
      margin-left: 9px;
    }
  }
  .item-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 8px;
    color: #70a3dd;
    text-align: center;
    font-style: normal;
    &.dialysis-mode-content {
      color: #d58e56;
    }
    &.treatment-status {
      color: #70a3dd;
    }
    &.prescription-ehydration-olume {
      color: #8079cb;
    }
  }
  // card header class
  :deep(.mihi-header) {
    flex: 0 0 4px;
    .card-icon {
@@ -449,14 +940,62 @@
      font-size: 4px;
    }
  }
  :deep(.big-header) {
    flex: 0 0 9px;
    .card-icon {
      width: 9px;
      height: 9px;
}
.item-box {
  height: 100%;
}
</style>
// <style lang="less">
// .reference-indicators {
//   padding: 0 !important;
//   .card-header {
//     padding: 3px 4px;
//   }
// }
//
</style>
<style lang="less">
.reference-indicators {
  padding: 0 !important;
  .card-header {
    padding: 3px 4px;
    margin-bottom: 0 !important;
  }
  .reference-indicators-content {
    width: 100%;
    border-collapse: collapse;
    td {
      border: 1px solid #dfdfdf; /* 黑色边框 */
      border-left: none;
      text-align: center;
      vertical-align: middle;
    }
    .card-title {
      font-size: 5px;
    & td:first-child {
      width: 36%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 3px;
      color: #333333;
      text-align: center;
      font-style: normal;
    }
    & td:last-child {
      width: 64%;
      border-right: none;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 3.6px;
      color: #333333;
      text-align: center;
      font-style: normal;
      .sub-text {
        font-size: 3.2px;
        color: #666;
        margin-right: 1.2px;
      }
    }
    & tr:not(:first-child) td {
      height: 6px;
    }
  }
}