ID1825-副屏切换逻辑修改

zhangchen

2025-07-18 0b4f9fc1768f0696c5046e139fb7b0c6b786a936

ID1825-副屏切换逻辑修改

 src/store/type/bedsideAuxiliaryScreen.type.ts

@@ -1,3 +1,5 @@
import { tryConvertToInt } from "@/utils/utils";
import cache from '@/utils/cache';
export interface IotInfo {
  属性历史列表: any[];
  床号: string;
@@ -139,7 +141,7 @@
  使用耗材字典: ConsumablesCollection | null; // 当透析状态为治疗中时该字段为null
  倒计时: "";
  推送类型: PushType;
  透析状态: "";
  透析状态: DialysisStatus | null;
}

export interface BedsideAuxiliaryScreen {
@@ -178,12 +180,18 @@
  | EPageType.SPHYGMOMANOMETER;

export enum EMedStatus {
  NOT_CHECKED_IN = 0, // 未签到
  SIGNED_IN = 1, // 已签到
  DURING_DIALYSIS = 2, // 透析中
  END = 2.5, // 已结束
  CHECKED = 3, // 已检查
  ARCHIVED = 4, // 已归档
  /** 未签到 */
  NOT_CHECKED_IN = 0,
  /** 已签到 */
  SIGNED_IN = 1,
  /** 透析中 */
  DURING_DIALYSIS = 2,
  /** 已结束 */
  END = 2.5,
  /** 已检查 */
  CHECKED = 3,
  /** 已归档 */
  ARCHIVED = 4,
}

export type MedStatus =
@@ -211,7 +219,7 @@
    unit: string;
    firstAndAddition: string;
    total: string;
  };
  }[];
  carePackage: any[];
  punctureNeedle: PunctureNeedle[];
  vascularAccess: VascularAccess[];
@@ -235,12 +243,7 @@
    dialyzerList: [], // 透析器列表
    pipingList: [], // 一次性使用管路列表
    dialysateList: [], // 透析液列表
    anticoagulant: {
      name: "", // 抗凝剂名称
      unit: "", // 抗凝剂单位
      firstAndAddition: "", // 维持/追加剂量
      total: "", // 总量
    }, // 抗凝剂信息
    anticoagulant: [], // 抗凝剂列表
    carePackage: [], // 一次性使用透析护理包列表
    punctureNeedle: [], // 穿刺针列表
    vascularAccess: [], // 血管通路列表
@@ -248,6 +251,7 @@
};

export const defaultDeviceData = (): BedsideAuxiliaryScreen => {
  const pageType = cache.get('devcieCode') ? EPageType.LOADING : EPatForm.OUTPATIENT_SERVICE;
  return {
    devicdeNo: "", // 设备号
    recordCode: "", // 透析单code
@@ -258,7 +262,8 @@
    gender: "", // 性别
    patForm: EPatForm.OUTPATIENT_SERVICE, // 患者来源
    patFormNumber: "", // 住院门诊号
    pageType: EPageType.NOT_INIT, // 当前要展示的页面
    // @ts-ignore
    pageType, // 当前要展示的页面
    treatmentStatus: EMedStatus.NOT_CHECKED_IN, // 透析状态
    consumablesCollection: defaultconsumablesCollection(), // 未排班时需要的数据
    notSignedIn: defalutNotSignedIn(), // 未签到时需要的数据
@@ -279,9 +284,40 @@
    // 判断是否存在透析状态，如果不存在就是没有排班
    if (seeMsg.透析状态 === null || !seeMsg.透析状态) {
      result.pageType = EPageType.UNPLANNED_SCHEDULE;
      result.consumablesCollection = seeMsg?.使用耗材字典 || defaultconsumablesCollection()
      result.consumablesCollection =
        seeMsg?.使用耗材字典 || defaultconsumablesCollection();
    } else {

      const treatmentStatus = tryConvertToInt(seeMsg.透析状态?.透析状态) as  MedStatus;

      // 这里就是有排班的
      result.treatmentStatus = treatmentStatus;
      result.recordCode = seeMsg.透析状态?.透析单编号;
      result.patientCode = seeMsg.透析状态?.患者编号;
      result.patientName = seeMsg.透析状态?.患者姓名;
      result.patientPhone = seeMsg.透析状态?.患者头像;
      result.age = seeMsg.透析状态?.年龄 + '';
      result.gender = seeMsg.透析状态?.性别 + '';
      result.patForm = seeMsg.透析状态?.患者来源;
      result.patFormNumber = seeMsg.透析状态?.患者门诊住院号;

      switch(treatmentStatus) {
        case EMedStatus.NOT_CHECKED_IN:
          result.pageType = EPageType.NOT_SIGNED_IN;
          const notSignedIn = {
            dialysisMode: seeMsg.透析状态?.透析方案,
            dialyzerList: seeMsg.透析状态?.透析器列表,
            pipingList: seeMsg.透析状态?.管路列表,
            dialysateList: seeMsg.透析状态?.透析液列表,
            carePackage: seeMsg.透析状态?.护理包列表,
            punctureNeedle: seeMsg.透析状态?.穿刺针列表,
            vascularAccess: seeMsg.透析状态?.血管通路列表,
            anticoagulant: [],
          }
          result.notSignedIn = notSignedIn;
          break
      }

    }
  }
  return result;

 src/utils/utils.ts

@@ -8,4 +8,24 @@
  if (!el) return 0
  const rect = el.getBoundingClientRect()
  return window.innerHeight - rect.top
}

/**
 * 将字符串转为数字
 * @param value 
 * @returns 
 */
export function tryConvertToInt(value: string): string | number {
  const num = Number(value);
  // 判断是否是有效数字且是整数（小数部分为 0）
  if (!isNaN(num) && Number.isInteger(num)) {
    return num;
  }

  // 判断是否是有效数字且小数部分为 0（例如 "1.0"）
  if (!isNaN(num) && Number(value).toString().endsWith('.0')) {
    return parseInt(value, 10);
  }

  return value;
}

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

@@ -1,20 +1,28 @@
<template>
  <div class="bedside-auxiliary-screen-header">
    <div class="header-left">
      <!-- 设备号 -->
      <span class="info-text">{{ bedsideAuxiliaryScreenStore.deviceData.devicdeNo }}</span>
      <!-- 未排班 -->
      <template v-if="!bedsideAuxiliaryScreenStore.deviceData.patientName">
        <span class="info-text">当前尚未排班</span>
      </template>
      <!-- 有排班 -->
      <!-- 没有设备编号 -->
      <span v-if="pageType === 0" class="info-text">未绑定设备</span>
      <template v-else>
        <!-- <span class="info-text">{{ name }}</span>
        <span class="info-text">{{ age }}岁</span>
        <span class="info-text">{{ gender }}</span>
        <span v-if="formTypeNoText" class="info-text">{{
          formTypeNoText
        }}</span> -->
        <!-- 设备号 -->
        <span class="info-text">{{
          bedsideAuxiliaryScreenStore.deviceData.devicdeNo
        }}</span>
        <!-- 加载中 -->
        <span v-if="pageType === 1" class="info-text"
          >页面初始化中，请耐心等待！</span
        >
        <!-- 未排班 -->
        <span v-else-if="pageType === 2" class="info-text">当前尚未排班</span>
        <!-- 有排班 -->
        <template v-else>
          <span class="info-text">{{ patientInfo.patientName }}</span>
          <span class="info-text">{{ patientInfo.age }}岁</span>
          <span class="info-text">{{ patientInfo.gender }}</span>
          <span v-if="patientInfo.patFormNumber" class="info-text">
            {{ patientInfo.patForm }}：{{ patientInfo.patFormNumber }}</span
          >
        </template>
      </template>
    </div>
    <div class="header-right">
@@ -42,19 +50,30 @@
import userImg from "../../../../img/user.png";

import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import { EPatForm } from "@/store/type/bedsideAuxiliaryScreen.type";

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const settingDeviceDialogRef = ref<any>(null);

// const formTypeNoText = computed(() => {
//   if (props.formNo) {
//     let result = props?.formType === 1 ? "住院号" : "门诊号";
//     result += props.formNo;
//     return result;
//   }
//   return "";
// });
const pageType = computed(() => {
  return bedsideAuxiliaryScreenStore.deviceData.pageType;
});

const patientInfo = computed(() => {
  return {
    patientName: bedsideAuxiliaryScreenStore.deviceData.patientName,
    patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
    age: bedsideAuxiliaryScreenStore.deviceData.age,
    gender: bedsideAuxiliaryScreenStore.deviceData.gender,
    patForm:
      bedsideAuxiliaryScreenStore.deviceData.patForm ===
      EPatForm.OUTPATIENT_SERVICE
        ? "门诊号"
        : "住院号",
    patFormNumber: bedsideAuxiliaryScreenStore.deviceData.patFormNumber,
  };
});

const openSettingDeviceDialog = () => {
  settingDeviceDialogRef.value?.openDialog();

 src/views/mobile/bedsideAuxiliaryScreen/index.vue

@@ -3,23 +3,39 @@
    <Header :type="0" device-no="03" />
    <div class="bedside-auxiliary-screen-content">
        <div class="content-position"></div>
        <UnplannedSchedule v-if="cotentHeight > 0" :height="cotentHeight"  />
        <!-- <UnplannedSchedule v-if="cotentHeight > 0" :height="cotentHeight"  /> -->
        <component v-if="cotentHeight > 0" :is="currentComponent" :height="cotentHeight" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, defineAsyncComponent } from "vue";
import { ref, watch, computed, onMounted, defineAsyncComponent } from "vue";
// @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';
// 未排班时的组件
const UnplannedSchedule = defineAsyncComponent(() => import('./components/UnplannedSchedule.vue'));
// 未签到时的组件
const NotSignedIn = defineAsyncComponent(() => import('./components/NotSignedIn.vue'));

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const cotentHeight = ref(0);

const currentComponent = computed(() => {
  let name: any = UnplannedSchedule;
  // 未签到
  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
  }
  return name;
});

watch(
  () => bedsideAuxiliaryScreenStore.deviceCode,
  (newVal: string) => {}