ID1766-结束透析完成

zhangchen

2025-09-16 2a8070b96f4aec8059ea96935b9166aec75b188b

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

@@ -14,7 +14,7 @@
      <div class="col row1-col2">
        <Card
          title="治疗模式"
          :icon="zlmsImg"
          :icon="tslImg"
          background-color="#ffffff"
          class="mini-card row1-col2-row1"
          header-class-name="mihi-header"
@@ -44,7 +44,7 @@
      <div class="col row1-col3">
        <Card
          title="置换总量"
          :icon="zlmsImg"
          :icon="zlztImg"
          background-color="#ffffff"
          class="mini-card row1-col3-row1"
          header-class-name="mihi-header"
@@ -55,7 +55,7 @@
        </Card>
        <Card
          title="透析时长"
          :icon="zlmsImg"
          :icon="cljdImg"
          background-color="#ffffff"
          class="mini-card row1-col3-row2"
          header-class-name="mihi-header"
@@ -68,7 +68,7 @@
      <div class="col row1-col4">
        <Card
          title="透析器"
          :icon="zlmsImg"
          :icon="txqImg"
          background-color="#ffffff"
          class="mini-card row1-col4-row1"
          header-class-name="mihi-header"
@@ -79,7 +79,7 @@
        </Card>
        <Card
          title="抗凝剂"
          :icon="zlmsImg"
          :icon="tslImg"
          background-color="#ffffff"
          class="mini-card row1-col4-row2"
          header-class-name="mihi-header"
@@ -100,6 +100,8 @@
                    item.是否为追加 ? item.追加剂量 : item.维持剂量
                  }}{{ item.单位 }}</span
                >
              </div>
              <div class="list-item-num">
                <span>总量：{{ item.总量 }}{{ item.单位 }}</span>
              </div>
            </div>
@@ -127,7 +129,7 @@
                <template v-if="pageData.最近最大脱水量透析时长"
                  >/
                  <span class="level-dete">{{
                    pageData.最近最大脱水量透析时长
                    formatDuration(pageData.最近最大脱水量透析时长)
                  }}</span>
                </template>
              </div>
@@ -139,7 +141,7 @@
        </Card>
        <Card
          title="处方备注"
          :icon="zlmsImg"
          :icon="maibo2Img"
          background-color="#ffffff"
          class="mini-card row1-col5-row2"
          header-class-name="mihi-header"
@@ -155,7 +157,7 @@
        <div class="row2-col1-row1">
          <Card
            title="处方血流量"
            :icon="zlmsImg"
            :icon="cljdImg"
            background-color="#ffffff"
            class="mini-card row2-col1-row1-col1"
            header-class-name="mihi-header"
@@ -166,7 +168,7 @@
          </Card>
          <Card
            title="处方钠"
            :icon="zlmsImg"
            :icon="cljdImg"
            background-color="#ffffff"
            class="mini-card row2-col1-row1-col2"
            header-class-name="mihi-header"
@@ -179,7 +181,7 @@
        <div class="row2-col1-row2">
          <Card
            title="透析液流量"
            :icon="zlmsImg"
            :icon="cljdImg"
            background-color="#ffffff"
            class="mini-card row2-col1-row2-col1"
            header-class-name="mihi-header"
@@ -190,7 +192,7 @@
          </Card>
          <Card
            title="透析液种类"
            :icon="zlmsImg"
            :icon="cljdImg"
            background-color="#ffffff"
            class="mini-card row2-col1-row2-col2"
            header-class-name="mihi-header"
@@ -203,7 +205,7 @@
        </div>
        <Card
          title="治疗状态"
          :icon="zlmsImg"
          :icon="zlztImg"
          background-color="#ffffff"
          class="mini-card row2-col1-row3"
          header-class-name="mihi-header"
@@ -216,7 +218,7 @@
      <div class="col row2-col2">
        <Card
          title="参考指标"
          :icon="zlmsImg"
          :icon="tizhongImg"
          background-color="#ffffff"
          class="reference-indicators"
          header-class-name="mihi-header"
@@ -249,7 +251,8 @@
              <tr>
                <td>体重增长</td>
                <td class="flex-td">
                  <span class="sub-text">(透前-干体重)</span><span class="text-right">{{ weightGain2 }}kg</span>
                  <span class="sub-text">(透前-干体重)</span
                  ><span class="text-right">{{ weightGain2 }}kg</span>
                </td>
              </tr>
              <!-- <tr>
@@ -292,13 +295,13 @@
        @click="() => onScheduledTasksClick()"
        class="btn"
      />
      <BlockBotttom
      <!-- <BlockBotttom
        :icon="jiaoHaoImg"
        text="叫号"
        backgroundColor="#20C6B6"
        @click="() => onCallBumberClick()"
        class="btn"
      />
      /> -->
      <BlockBotttom
        :icon="kaiShiImg"
        text="开始"
@@ -307,10 +310,14 @@
        class="btn"
      />
    </div>
    <!-- 定时任务 -->
    <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
    <!-- 开始透析组件 -->
    <StartDialysis ref="startDialysisRef" />
  </div>
</template>
<script lang="ts" setup name="SignedIn">
import { computed, onMounted, ref } from "vue";
import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
@@ -330,6 +337,7 @@
import txqImg from "@/img/txq.png";
import tizhongImg from "@/img/tizhong.png";
import yizhuImg from "@/img/yizhu.png";
import maibo2Img from "@/img/maibo2.png";

import {
  getItemName,
@@ -339,7 +347,11 @@
} from "@/store/type/bedsideAuxiliaryScreen.type";
// @ts-ignore
import BlockBotttom from "../components/BlockBotttom.vue";
import { ElMessage } from "element-plus/es";
import { ElMessage } from "element-plus";
const ScheduledTaskDialog = defineAsyncComponent(
  () => import("../components/ScheduledTask.vue")
);
const StartDialysis = defineAsyncComponent(() => import('../components/StartDialysis/index.vue'));

interface Props {
  height: number;
@@ -349,6 +361,8 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

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

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
@@ -406,8 +420,22 @@
  return formattedValue;
});

watch(
  () => pageData.value.四点血压图数据,
  (newVal) => {
    genderBloodPressureRectangularChart(newVal);
  }
);

/** 点击定时任务 */
const onScheduledTasksClick = () => {};
const onScheduledTasksClick = () => {
  if (
    !bedsideAuxiliaryScreenStore.deviceCode ||
    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
  )
    return ElMessage.warning("未初始化或正在进行初始化操作中");
  scheduledTaskDialogRef.value?.openDialog();
};

const onCallBumberClick = () => {
  ElMessage({
@@ -417,20 +445,27 @@
};

const onStartClick = () => {
  ElMessage({
    message: "功能开发中，敬请期待！",
    type: "warning",
  });
  if (
    !bedsideAuxiliaryScreenStore.deviceCode ||
    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
  )
    return ElMessage.warning("未初始化或正在进行初始化操作中");
  if (!bedsideAuxiliaryScreenStore.userInfo?.token)
    return ElMessage.warning("请登录");
  startDialysisRef.value?.openDialog();
};

const genderBloodPressureRectangularChart = (datas: 四点血压图数据[] | null) => {
const genderBloodPressureRectangularChart = (
  datas: 四点血压图数据[] | null
) => {
  if (!bloodPressureRectangularChart.value) return;

  const benchmarkData = { width: 386, height: 280 };

  // 获取容器宽高（90% 缩放）
  const containerWidth = bloodPressureRectangularChart.value.offsetWidth * 0.9;
  const containerHeight = bloodPressureRectangularChart.value.offsetHeight * 0.9;
  const containerHeight =
    bloodPressureRectangularChart.value.offsetHeight * 0.9;

  // 获取设备像素比
  const dpr = window.devicePixelRatio || 1;
@@ -491,10 +526,22 @@

  // ========== 血压数据 ==========
  const measurements = [
    { systolic: datas?.[0]?.血压1_透前收缩压 ?? 0, diastolic: datas?.[0]?.血压1_透前舒张压 ?? 0 },
    { systolic: datas?.[0]?.血压2_前半程最低收缩压 ?? 0, diastolic: datas?.[0]?.血压2_前半程最低舒张压 ?? 0 },
    { systolic: datas?.[0]?.血压3_后半程最低收缩压 ?? 0, diastolic: datas?.[0]?.血压3_后半程最低舒张压 ?? 0 },
    { systolic: datas?.[0]?.血压4_透后收缩压 ?? 0, diastolic: datas?.[0]?.血压4_透后舒张压 ?? 0 },
    {
      systolic: datas?.[0]?.血压1_透前收缩压 ?? 0,
      diastolic: datas?.[0]?.血压1_透前舒张压 ?? 0,
    },
    {
      systolic: datas?.[0]?.血压2_前半程最低收缩压 ?? 0,
      diastolic: datas?.[0]?.血压2_前半程最低舒张压 ?? 0,
    },
    {
      systolic: datas?.[0]?.血压3_后半程最低收缩压 ?? 0,
      diastolic: datas?.[0]?.血压3_后半程最低舒张压 ?? 0,
    },
    {
      systolic: datas?.[0]?.血压4_透后收缩压 ?? 0,
      diastolic: datas?.[0]?.血压4_透后舒张压 ?? 0,
    },
  ];

  const measurementWidth = chartWidth / (measurements.length + 1);
@@ -554,6 +601,9 @@
  const cylinderY = chartHeight;
  const cylinderRadius = 6;
  const cylinderHeight = 计算脱水量刻度 * (datas?.[0]?.超滤总量 || 0);
  const 体重增长_透前减干体重 = weightGain2.value;
  const 透前减干体重减超滤总量差值 =
    Math.round((体重增长_透前减干体重 - (datas?.[0]?.超滤总量 || 0)) * 10) / 10;

  drawCylinder(
    ctx,
@@ -565,13 +615,13 @@
    cylinderHeight,
    datas?.[0]?.超滤总量?.toString() ?? "0 L",
    datas?.[0]?.脱水百分比 ?? 0,
    datas?.[0]?.透后体重减干体重的差值 ?? 0
    datas?.[0]?.透后体重减干体重的差值 ?? 0,
    体重增长_透前减干体重,
    透前减干体重减超滤总量差值
  );

  ctx.restore(); // 恢复
};



const drawCylinder = (
  ctx: CanvasRenderingContext2D,
@@ -583,7 +633,9 @@
  height: number,
  超滤总量: string, // 超滤总量
  脱水百分比: number, // 脱水百分比
  透后体重减干体重的差值: number // 透后体重减干体重的差值
  透后体重减干体重的差值: number, // 透后体重减干体重的差值
  体重增长_透前减干体重: number, // 体重增长_透前减干体重
  透前减干体重减超滤总量差值: number // 透前减干体重减超滤总量差值
) => {
  ctx.beginPath();
  ctx.arc(x, y + height, radius, 0, Math.PI * 2);
@@ -609,21 +661,56 @@
  ctx.fill();
  ctx.stroke();

  const cylinderWidth = radius;
  const textX = x + cylinderWidth + 20; // 文本位置在圆柱体右侧

  const baseFontSize = 16;

  // 添加文本说明
  ctx.font = `${baseFontSize * scale}px Arial`;
  ctx.textAlign = "center";
  ctx.fillStyle = "#409EFF";
  ctx.fillText(超滤总量, x, canvasHeight - height - 5); // 文本位于圆柱上方一点

  if (透后体重减干体重的差值 > 0) {
  // 如果超滤总量 与 体重增长_透前减干体重 相等，则显示 "/超滤总量"
  if (Number(超滤总量) && 体重增长_透前减干体重 === Number(超滤总量)) {
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#07c160";
    ctx.fillText(
      "/" + 超滤总量,
      textX,
      canvasHeight - height + height * 0.3 + 10
    );
  } else {
    // 透析前-干体重
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#409EFF";
    ctx.fillText(体重增长_透前减干体重 + "", textX, canvasHeight - height + 10);
    // 超滤总量
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#07c160";
    ctx.fillText(超滤总量, textX, canvasHeight - height + height * 0.3 + 10);
  }

  if (透前减干体重减超滤总量差值 > 0) {
    ctx.font = `${baseFontSize * scale}px Arial`;
    ctx.textAlign = "center";
    ctx.fillStyle = "#000000";
    ctx.fillText(透后体重减干体重的差值 + "", x, canvasHeight - 5); // 文本位于圆柱上方一点
    ctx.fillText(透前减干体重减超滤总量差值 + "", textX, canvasHeight - 10); // 文本位于圆柱上方一点
  }
};

function formatDuration(input: string): string {
  const match = input.match(/(\d+)小时(\d+)分钟/);
  if (!match) return input; // 如果不符合格式，直接返回原字符串

  const hours = parseInt(match[1], 10);
  const minutes = parseInt(match[2], 10);

  if (minutes > 0) {
    return `${hours}h${minutes}min`;
  }
  return `${hours}h`;
}
onMounted(() => {
  genderBloodPressureRectangularChart(pageData.value.四点血压图数据);
});
@@ -760,7 +847,7 @@
              text-align: left;
              font-style: normal;
              .list-item-name {
                margin-bottom: 2px;
                // margin-bottom: 2px;
              }
            }
          }
@@ -1028,7 +1115,7 @@
        font-size: 3px;
        color: #666;
        margin-right: 1.2px;
         white-space: nowrap;
        white-space: nowrap;
      }
      // .text-right {
      //   position: absolute;