ID1625-暂存

zhangchen

2025-07-25 fbb37cbba51cf4fff14cafad214935516434ac92

 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>