From fbb37cbba51cf4fff14cafad214935516434ac92 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 25 七月 2025 01:43:50 +0800
Subject: [PATCH] ID1625-暂存

---
 src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue |  162 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 128 insertions(+), 34 deletions(-)

diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
index 9b08031..6efe7bc 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
@@ -1,74 +1,168 @@
 <template>
   <div class="bedside-auxiliary-screen-header">
     <div class="header-left">
-      <!-- 设备号 -->
-      <span class="info-text">{{ deviceNo }}</span>
-      <!-- 未排班 -->
-      <template v-if="type === 0">
-        <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 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>
+        {{ taskCountdown }}
       </template>
     </div>
     <div class="header-right">
-      <img :src="atRegularTimeImg" class="btn-img" alt="" />
+      <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="" />
+      <img :src="userImg" class="btn-img" alt="" @click="openLoginDialog" />
     </div>
   </div>
   <!-- 设置设备编号组件 -->
   <SettingDeviceDialog ref="settingDeviceDialogRef" />
+  <!-- 定时任务组件 -->
+  <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
 </template>
 
 <script lang="ts" setup name="Header">
-import { ref, computed, defineAsyncComponent } from "vue";
+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")
 );
 import atRegularTimeImg from "../../../../img/dingshi.png";
 import setUpImg from "../../../../img/shezhi.png";
 import userImg from "../../../../img/user.png";
 
-type HearderType = 0 | 1; // 0未排班 1其它
-type FormType = 0 | 1; // 0门诊 1住院
+import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
+import { EPatForm } from "@/store/type/bedsideAuxiliaryScreen.type";
+import { ElMessage } from "element-plus";
 
-interface Props {
-  type: HearderType; // 类型
-  deviceNo: number | string; // 设备号
-  name?: string; // 姓名
-  age?: number | string; // 年龄
-  gender?: string; // 性别
-  formType?: FormType; // 患者来源
-  formNo?: number | string; // 门诊/住院号
-}
-const props = defineProps<Props>();
+const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
+
+let timer: number;
 
 const settingDeviceDialogRef = ref<any>(null);
+const scheduledTaskDialogRef = ref<any>(null);
+const taskCountdown = ref(""); // 定时任务倒计时文本
 
-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,
+  };
+});
+
+watch(
+  () => bedsideAuxiliaryScreenStore.taskData,
+  (newData: Task[]) => {
+    console.log('定时任务更新了')
+    if (
+      bedsideAuxiliaryScreenStore.deviceData.deviceCode &&
+      newData.length > 0
+    ) {
+      console.log('newData: ', newData)
+      updateCountdown(newData[0].taskDate);
+    } else {
+      taskCountdown.value = "";
+    }
+  },
+  { deep: true }
+);
 
 const openSettingDeviceDialog = () => {
   settingDeviceDialogRef.value?.openDialog();
 };
+
+const openScheduledTaskDialog = () => {
+  scheduledTaskDialogRef.value?.openDialog();
+};
+
+const openLoginDialog = () => {
+  ElMessage({
+    message: "功能开发中,敬请期待!",
+    type: "warning",
+  });
+};
+
+const getCountdown = (taskDate: string) => {
+  const now = dayjs();
+  const target = dayjs(taskDate).second(0).millisecond(0);
+
+  const diff = target.diff(now, "second");
+
+  if (diff <= 0) return "";
+
+  const minutes = Math.floor(diff / 60);
+  const seconds = diff % 60;
+
+  return `${minutes}m${seconds}s`;
+};
+
+const updateCountdown = (taskDate: string) => {
+  taskCountdown.value = getCountdown(taskDate);
+  timer = window.setInterval(updateCountdown, 1000);
+};
+
+onMounted(() => {
+  if (
+    bedsideAuxiliaryScreenStore.deviceData.deviceCode &&
+    bedsideAuxiliaryScreenStore.taskData.length > 0
+  ) {
+    getCountdown(bedsideAuxiliaryScreenStore.taskData[0].taskDate);
+  }
+});
+
+onUnmounted(() => {
+  timer && clearInterval(timer);
+});
 </script>
 
 <style lang="less" scoped>

--
Gitblit v1.8.0