From 2a122106c080eb0a8b0ec82903e785087c6d3b49 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期一, 04 八月 2025 16:40:15 +0800
Subject: [PATCH] ID1918-患者姓名根据配置脱敏

---
 src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue |  287 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 285 insertions(+), 2 deletions(-)

diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
index ad3157a..da82b86 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
@@ -1,11 +1,294 @@
 <template>
-    <div class="">1111111111</div>
+  <div class="bedside-auxiliary-screen-header">
+    <div class="header-left">
+      <!-- 没有设备编号 -->
+      <span v-if="pageType === pageTypeEnum.NOT_INIT" class="info-text"
+        >未绑定设备</span
+      >
+      <template v-else>
+        <!-- 设备号 -->
+        <span class="info-text">{{
+          bedsideAuxiliaryScreenStore.deviceData.devicdeNo
+        }}</span>
+        <!-- 加载中 -->
+        <span v-if="pageType === pageTypeEnum.LOADING" class="info-text"
+          >页面初始化中,请耐心等待!</span
+        >
+        <!-- 未排班 -->
+        <span
+          v-else-if="pageType === pageTypeEnum.UNPLANNED_SCHEDULE"
+          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
+          >
+          <span
+            v-if="
+              pageType === pageTypeEnum.DURING_DIALYSIS &&
+              patientInfo.dialysisAge
+            "
+            class="info-text"
+          >
+            透析龄: {{ patientInfo.dialysisAge?.years }}年{{
+              patientInfo.dialysisAge?.months
+            }}月
+          </span>
+        </template>
+      </template>
+    </div>
+    <div class="header-right">
+      <span
+        v-if="
+          bedsideAuxiliaryScreenStore.taskData &&
+          bedsideAuxiliaryScreenStore.taskData.length > 0
+        "
+        class="countdown"
+      >
+        {{ formattedCountdown }}
+      </span>
+      <img
+        :src="atRegularTimeImg"
+        class="btn-img"
+        alt=""
+        @click="openScheduledTaskDialog"
+      />
+      <img
+        :src="setUpImg"
+        class="btn-img"
+        alt=""
+        @click="openSettingDeviceDialog"
+      />
+      <img :src="userImg" class="btn-img" alt="" @click="openLoginDialog" />
+    </div>
+  </div>
+  <!-- 设置设备编号组件 -->
+  <SettingDeviceDialog ref="settingDeviceDialogRef" />
+  <!-- 定时任务组件 -->
+  <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
+  <!-- 定时任务提醒组件 -->
+  <TaskAlert ref="taskAlertRef" @close="taskAlaetClose" />
 </template>
 
 <script lang="ts" setup name="Header">
+import {
+  ref,
+  computed,
+  defineAsyncComponent,
+  onMounted,
+  onUnmounted,
+  watch,
+} from "vue";
+import dayjs from "dayjs";
+import type { Task } from "@/store/type/task.type";
+const SettingDeviceDialog = defineAsyncComponent(
+  () => import("./SettingDeviceDialog.vue")
+);
+const ScheduledTaskDialog = defineAsyncComponent(
+  () => import("./ScheduledTask.vue")
+);
+const TaskAlert = defineAsyncComponent(() => import("./TaskAlart.vue"));
 
+import atRegularTimeImg from "../../../../img/dingshi.png";
+import setUpImg from "../../../../img/shezhi.png";
+import userImg from "../../../../img/user.png";
+
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import { EPatForm, EPageType } from "@/store/type/bedsideAuxiliaryScreen.type";
+import { ElMessage } from "element-plus";
+import { maskName } from '@/utils/utils';
+
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const pageTypeEnum = ref(EPageType);
+const settingDeviceDialogRef = ref<any>(null);
+const scheduledTaskDialogRef = ref<any>(null);
+const taskAlertRef = ref<any>(null);
+
+const countdown = ref(null); // 定时任务的倒计时
+const isTaskAlartIsOpen = ref(false); // 定时任务的提醒弹框是否显示
+
+const pageType = computed(() => {
+  return bedsideAuxiliaryScreenStore.deviceData.pageType;
+});
+
+
+const patientInfo = computed(() => {
+  return {
+    patientName: bedsideAuxiliaryScreenStore.deviceData.customConfiguration.患者信息是否加密显示 === 1 ? maskName(bedsideAuxiliaryScreenStore.deviceData.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,
+    dialysisAge: bedsideAuxiliaryScreenStore.deviceData.underTreatment
+      .dialysisAge
+      ? convertMonths(
+          bedsideAuxiliaryScreenStore.deviceData.underTreatment.dialysisAge
+        )
+      : null,
+  };
+});
+
+const formattedCountdown = computed(() => {
+  if (countdown.value == null || countdown.value <= 0) return "0s";
+
+  const minutes = Math.floor(countdown.value / 60);
+  const seconds = countdown.value % 60;
+
+  if (minutes > 0) {
+    return `${minutes}m ${seconds}s`;
+  } else {
+    return `${seconds}s`;
+  }
+});
+
+watch(
+  () => bedsideAuxiliaryScreenStore.taskData?.[0]?.countdown,
+  (val) => {
+    if (typeof val === "number") {
+      startCountdown(val);
+    } else {
+      clearTimer();
+    }
+  },
+  { immediate: true }
+);
+
+watch(countdown, (newVal) => {
+  if (newVal <= 0 && !isTaskAlartIsOpen.value) {
+    isTaskAlartIsOpen.value = true;
+    showTaskAlart();
+  }
+});
+
+// 清除定时器函数
+function clearTimer() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+// 启动新的倒计时
+function startCountdown(seconds: number) {
+  clearTimer();
+  countdown.value = seconds;
+
+  timer = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value -= 1;
+    } else {
+      clearTimer();
+    }
+  }, 1000);
+}
+
+const convertMonths = (months: number): { years: number; months: number } => {
+  const years = Math.floor(months / 12);
+  const remainingMonths = months % 12;
+  return { years, months: remainingMonths };
+};
+
+const showTaskAlart = () => {
+  clearTimer();
+  taskAlertRef.value.openDialog(
+    bedsideAuxiliaryScreenStore.taskData?.[0]?.taskName
+  );
+};
+
+const taskAlaetClose = () => {
+  clearTimer();
+  bedsideAuxiliaryScreenStore.clearTask();
+  isTaskAlartIsOpen.value = false;
+};
+
+const openSettingDeviceDialog = () => {
+  settingDeviceDialogRef.value?.openDialog();
+};
+
+const openScheduledTaskDialog = () => {
+  if (
+    !bedsideAuxiliaryScreenStore.deviceCode ||
+    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
+  )
+    return ElMessage.warning("未初始化或正在进行初始化操作中");
+  scheduledTaskDialogRef.value?.openDialog();
+};
+
+const openLoginDialog = () => {
+  ElMessage({
+    message: "功能开发中,敬请期待!",
+    type: "warning",
+  });
+};
+
+onUnmounted(() => {
+  clearTimer();
+});
 </script>
 
-<style>
+<style lang="less" scoped>
+.bedside-auxiliary-screen-header {
+  height: 25px;
+  padding: 0 15px 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #70a3dd;
+  border-radius: 1px 0px 5px 5px;
+  .header-left {
+    display: flex;
+    align-items: center;
+    .info-text {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 9px;
+      color: #ffffff;
+      text-align: left;
+      font-style: normal;
+      &:not(:first-child) {
+        margin-left: 4px;
+      }
+    }
+  }
+  .header-right {
+    display: flex;
+    align-items: center;
+    .btn-img {
+      height: 10px;
+      object-fit: contain;
+      cursor: pointer;
+      &:not(:first-child) {
+        margin-left: 9px;
+      }
+      &:active {
+        opacity: 0.6;
+        transform: scale(0.95);
+      }
 
+      transition: all 0.2s;
+    }
+    .countdown {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 9px;
+      color: #bb3e3e;
+      line-height: 15rpx;
+      text-align: left;
+      font-style: normal;
+    }
+  }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0