ID1625-已签到页面暂存

zhangchen

2025-07-22 f8fe2290f6279451beaa96142765343edaee25be

ID1625-已签到页面暂存

 src/store/type/bedsideAuxiliaryScreen.type.ts

@@ -169,6 +169,7 @@
  consumablesCollection: ConsumablesCollection;
  pageType: PageType;
  notSignedIn: NotSignedIn;
  signedIn: SignedIn;
  underTreatment: UnderTreatment;
}

@@ -259,11 +260,33 @@

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; // 体重增长率
}

export const defaultSignedIn = (): SignedIn => {
  return {
    abnormalItems: [], // 异常指标列表
    dialysisPlan: "", // 透析方案
    prescriptionDehydrationVolume: null, // 透析处方脱水量
    dialyzer: "", // 透析器
    averageDehydrationRate: "", // 最近平均脱水量
    maximumDehydrationCapacity: "", // 最近最大脱水量
    maximumDehydrationCapacityDate: "", // 最近最大脱水量日期
    dryWeight: null, // 干体重
    preDialysisWeight: null, // 透前称重
    weightAfterLastDialysis: null, // 上次透后称重
    weightIncrease: null, // 体重增加  
    weightIncreaseRate: null, // 体重增长率
  };
};

@@ -352,6 +375,7 @@
    treatmentStatus: EMedStatus.NOT_CHECKED_IN, // 透析状态
    consumablesCollection: defaultconsumablesCollection(), // 未排班时需要的数据
    notSignedIn: defalutNotSignedIn(), // 未签到时需要的数据
    signedIn: defaultSignedIn(), // 已签到时需要的数据
    underTreatment: defaultUnderTreatment(), // 治疗中需要的数据
  };
};
@@ -388,22 +412,6 @@
      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
      // }
      // 未签到页面需要显示的
      if (treatmentStatus === EMedStatus.NOT_CHECKED_IN) {
        result.pageType = EPageType.NOT_SIGNED_IN;
@@ -420,7 +428,27 @@
        result.notSignedIn = notSignedIn;
      }
      // 已签到未开始透析需要显示的
      else if (treatmentStatus === EMedStatus.SIGNED_IN) {}
      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;

        result.signedIn = signedIn;
      }
      // 剩下的全使用治疗中的页面
      else {
        result.pageType = EPageType.DURING_DIALYSIS;
@@ -434,18 +462,15 @@
          seeMsg.透析状态?.最近最大脱水量 || "";
        underTreatment.maximumDehydrationCapacityDate =
          seeMsg.透析状态?.最近最大脱水量日期 || "";
        underTreatment.maximumDehydrationDuration = ""
        underTreatment.prescriptionRemarks =
          seeMsg.透析状态?.处方备注 || "";
        underTreatment.maximumDehydrationDuration = "";
        underTreatment.prescriptionRemarks = seeMsg.透析状态?.处方备注 || "";
        underTreatment.abnormalItems = seeMsg.透析状态?.异常检验指标 || [];
        underTreatment.prescriptionDialysisDuration =
          seeMsg.透析状态?.透析处方的时长_小时 || "";
        underTreatment.dialysisStartTime =
          seeMsg.透析状态?.透析开始时间 || null;
        underTreatment.dialysisEndTime =
          seeMsg.透析状态?.透析结束时间 || null;
        underTreatment.dialysisDuration =
          seeMsg.透析状态?.iot_透析时间 || null;
        underTreatment.dialysisEndTime = seeMsg.透析状态?.透析结束时间 || null;
        underTreatment.dialysisDuration = seeMsg.透析状态?.iot_透析时间 || null;
        underTreatment.prescriptionDehydrationVolume =
          seeMsg.透析状态?.处方脱水量 || null;
        underTreatment.currentDehydrationVolume =
@@ -458,8 +483,7 @@
        underTreatment.transmembranePressure =
          seeMsg.透析状态?.iot_跨膜压 || null;
        underTreatment.ktv = seeMsg.透析状态?.实时ktv || "";
        underTreatment.monitoringRecord = seeMsg.透析状态
          ?.监测记录列表 || [];
        underTreatment.monitoringRecord = seeMsg.透析状态?.监测记录列表 || [];
        underTreatment.doctorAdvice = seeMsg.透析状态?.透析单医嘱列表 || [];
        underTreatment.bloodFlow = ""; 
        underTreatment.dialysisFluidFlowRate = "";
@@ -470,3 +494,51 @@
  }
  return result;
};

export const getItemName = (name: string) => {
  if (name) {
    if (name === "血红蛋白") {
      return "HGB ";
    } else if (name === "铁蛋白") {
      return "FER ";
    } else if (name === "白蛋白") {
      return "ALB ";
    } else if (name === "钙") {
      return "Ca ";
    } else if (name === "钾") {
      return "K ";
    } else if (name === "无机磷") {
      return "P ";
    } else if (name === "甲状旁腺激素") {
      return "PTH ";
    } else {
      return name;
    }
  } else {
    return "";
  }
};

export const formatTestColr = (reg: string) => {
  const heightFlag = ["↑", "g"];
  const lowFlag = ["d", "↓"];
  let color = "#333";
  if (heightFlag.includes(reg)) {
    color = "#CA7070";
  } else if (lowFlag.includes(reg)) {
    color = "#409eff";
  }
  return color;
};

export const formatTestFlag = (reg: string) => {
  const heightFlag = ["↑", "g"];
  const lowFlag = ["d", "↓"];
  if (heightFlag.includes(reg)) {
    return "↑";
  } else if (lowFlag.includes(reg)) {
    return "↓";
  } else {
    return "";
  }
};

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

New file
@@ -0,0 +1,344 @@
<template>
  <div class="signed-in-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="tslImg" background-color="#ffffff">
          <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>
      <div class="row1-col3">
        <div class="row1-col3-row1">
          <Card
            title="治疗模式"
            :icon="tslImg"
            background-color="#ffffff"
            class="row1-col3-row1-item"
          >
            <div class="item-box dialysis-mode-content">
              {{ pageData.dialysisPlan }}
            </div>
          </Card>
          <Card
            title="治疗状态"
            :icon="tslImg"
            background-color="#ffffff"
            class="row1-col3-row1-item"
          >
            <div class="item-box treatment-status">已签到</div>
          </Card>
        </div>
        <Card
          title="处方脱水量"
          :icon="tslImg"
          background-color="#ffffff"
          class="row1-col3-row2"
        >
          <div class="item-box prescription-ehydration-olume">
            {{ pageData.prescriptionDehydrationVolume }} L
          </div>
        </Card>
      </div>
      <div class="row1-col4">
        <Card
          title="透析器(显示规格)"
          :icon="tslImg"
          background-color="#ffffff"
          class="row1-col4-row"
        >
          <div class="item-box dialyzer">
            {{ pageData.dialyzer }}
          </div>
        </Card>
        <Card
          title="脱水量详情"
          :icon="tslImg"
          background-color="#ffffff"
          class="row1-col4-row"
        >
          <div class="dehydrated-level">
            <div class="dehydrated-level-item">
              <span class="item-left"
                >平均脱水量：{{ pageData.averageDehydrationRate }} L</span
              >
              <span class="item-right">(最近3周9次)</span>
            </div>
            <div class="dehydrated-level-item">
              <span class="item-left"
                >最大脱水量：{{ pageData.maximumDehydrationCapacity }} L</span
              >
              <span class="item-right"
                >({{ pageData.maximumDehydrationCapacityDate }})</span
              >
            </div>
          </div>
        </Card>
      </div>
    </div>
    <div class="row2">
      <Card
        title="干体重"
        :icon="tslImg"
        background-color="#ffffff"
        class="row2-item"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.dryWeight }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="透前体重"
        :icon="tslImg"
        background-color="#ffffff"
        class="row2-item"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.preDialysisWeight }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="上次透后体重"
        :icon="tslImg"
        background-color="#ffffff"
        class="row2-item"
      >
        <div class="weight-box">
          <span class="weight-text">{{
            pageData.weightAfterLastDialysis
          }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="体重增长"
        :icon="tslImg"
        background-color="#ffffff"
        class="row2-item"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.weightIncrease }}</span>
          <span class="unit-text">kg</span>
        </div>
      </Card>
      <Card
        title="增长率"
        :icon="tslImg"
        background-color="#ffffff"
        class="row2-item"
      >
        <div class="weight-box">
          <span class="weight-text">{{ pageData.weightIncreaseRate }}</span>
          <span class="unit-text">%</span>
        </div>
      </Card>
    </div>
    <div class="row3"></div>
  </div>
</template>
<script lang="ts" setup name="SignedIn">
import { computed } from "vue";
// @ts-ignore
import Card from "./Card.vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
import tslImg from "@/img/tsl.png";
import {
  getItemName,
  formatTestColr,
  formatTestFlag,
} from "@/store/type/bedsideAuxiliaryScreen.type";

interface Props {
  height: number;
}
const props = defineProps<Props>();

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();

const pageData = computed(() => {
  return Object.assign(bedsideAuxiliaryScreenStore.deviceData.signedIn, {
    patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
  });
});
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.signed-in-container {
  position: relative;
  height: var(--height);
  overflow: hidden;
  .row1 {
    height: 37.44%;
    margin-bottom: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .row1-col1 {
      flex: 0 0 14.86%;
      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-col3 {
      flex: 0 0 23.71%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .row1-col3-row1 {
        flex: 1;
        display: flex;
        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;
          .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: #333333;
              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;
            }
          }
        }
      }
    }
  }
  .row2 {
    height: 18.72%;
    overflow: hidden;
    display: flex;
    gap: 4px;
    .row2-item {
      flex: 1;

      .weight-box {
        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;
        }
        .unit-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 7px;
          color: #333333;
          text-align: center;
          font-style: normal;
        }
      }
    }
  }
  .row3 {
    position: absolute;
    width: 100%;
    bottom: 2px;
    height: 11.33%;
    overflow: hidden;
    background-color: blue;
  }
  .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;
    }
  }
}
</style>

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

@@ -1,7 +1,8 @@
<template>
  <div class="under-treatment-container" :style="{ '--height': height + 'px' }">
    <div class="row-1">
      <div class="row-1-col-1">
    <div class="left-box">
      <div class="left-row1">
        <div class="left-row1-col1">
        <el-image
          :src="pageData.patientPhone"
          style="width: 100%; height: 100%"
@@ -11,9 +12,14 @@
          </template>
        </el-image>
      </div>
        <div class="left-row1-col2"></div>
        <div class="left-row1-col3"></div>
    </div>
    <div class="row-2"></div>
    <div class="row-3"></div>
      <div class="left-row2"></div>
      <div class="left-row3"></div>
      <div class="left-row4"></div>
    </div>
    <div class="right-box"></div>
  </div>
</template>
<script lang="ts" setup name="UnderTreatment">
@@ -37,11 +43,60 @@
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}

.under-treatment-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  height: var(--height);
  gap: 4px;
  padding-bottom: 2px;
  overflow: hidden;
  .left-box {
    flex: 0 0 58.25%;
    height: calc(100% - 12px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    div {
      width: 100%;
    }
    .left-row1 {
      flex: 0 0 41.99%;
      // width: calc(100% - 8px);
      gap: 4px;
      display: flex;
      background: blue;
      .left-row1-col1 {
        flex: 0 0 26.94%;
      }
      .left-row1-col2 {
        flex: 0 0 26.42%;
      }
      .left-row1-col3 {
        flex: 0 0 46.63%;
      }
    }
    .left-row2 {
      flex: 0 0 22.65%;
      background: yellow;
    }
    .left-row3 {
      flex: 0 0 22.65%;
      background: orange;
    }
    .left-row4 {
      flex: 0 0 12.71%;
      background: purple;
    }
  }
  .right-box {
    flex: 0 0 41.75%;
    height: 100%;
    background: green;
  }
}
</style>

 src/views/mobile/bedsideAuxiliaryScreen/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="bedside-auxiliary-screen-container">
  <div class="bedside-auxiliary-screen-container" :style="{ backgroundColor: backgroundColor }">
    <Header />
    <div class="bedside-auxiliary-screen-content">
        <div class="content-position"></div>
@@ -20,11 +20,21 @@
const UnplannedSchedule = defineAsyncComponent(() => import('./components/UnplannedSchedule.vue'));
// 未签到时的组件
const NotSignedIn = defineAsyncComponent(() => import('./components/NotSignedIn.vue'));
// 已签到时的组件
const SignedIn = defineAsyncComponent(() => import('./components/SignedIn.vue'));
// 治疗中的组件
const UnderTreatment = defineAsyncComponent(() => import('./components/UnderTreatment.vue'));

const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const cotentHeight = ref(0);
const backgroundColor = computed(() => {
  let color = '#DAE5EC';
  // 如果是未排班、加载中或未签到页面，背景色为白色
  if ([EPageType.NOT_INIT, EPageType.LOADING, EPageType.UNPLANNED_SCHEDULE].includes(bedsideAuxiliaryScreenStore.deviceData.pageType)) {
    color = '#fff';
  }
  return color;
});

const currentComponent = computed(() => {
  let name: any = UnplannedSchedule;
@@ -38,7 +48,10 @@
  } 
  // 已签到
  else if (bedsideAuxiliaryScreenStore.deviceData.pageType === EPageType.SIGNED_IN) {
  } else {
    name = SignedIn;
  }
  // 透析中 
  else {
    name = UnderTreatment;
  }
  return name;
@@ -68,6 +81,7 @@
  box-sizing: border-box;
}
.bedside-auxiliary-screen-container {
  background-color: #409eff;
  .bedside-auxiliary-screen-content {
    padding: 6px 12px 0;
  }