ID1825-未排班组件完成

zhangchen

2025-07-18 c5516e3919ffa2406e7237c834779615955162bf

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

@@ -1,11 +1,107 @@
<template>
    <div class="">1111111111</div>
  <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>
      <!-- 有排班 -->
      <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> -->
      </template>
    </div>
    <div class="header-right">
      <img :src="atRegularTimeImg" class="btn-img" alt="" />
      <img
        :src="setUpImg"
        class="btn-img"
        alt=""
        @click="openSettingDeviceDialog"
      />
      <img :src="userImg" class="btn-img" alt="" />
    </div>
  </div>
  <!-- 设置设备编号组件 -->
  <SettingDeviceDialog ref="settingDeviceDialogRef" />
</template>

<script lang="ts" setup name="Header">
import { ref, computed, defineAsyncComponent } from "vue";
const SettingDeviceDialog = defineAsyncComponent(
  () => import("./SettingDeviceDialog.vue")
);
import atRegularTimeImg from "../../../../img/dingshi.png";
import setUpImg from "../../../../img/shezhi.png";
import userImg from "../../../../img/user.png";

import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";

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 openSettingDeviceDialog = () => {
  settingDeviceDialogRef.value?.openDialog();
};
</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: 11px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      &:not(:first-child) {
        margin-left: 6px;
      }
    }
  }
  .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;
    }
  }
}
</style>