ID1766-优化患者头像显示

zhangchen

2025-09-16 b3e78764e84144a9d64a9d28f293dc4a75e22134

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

@@ -65,7 +65,8 @@
        alt=""
        @click="openSettingDeviceDialog"
      />
      <img :src="userImg" class="btn-img" alt="" @click="openLoginDialog" />
      <img v-if="userInfo?.code" :src="userInfo?.userAvatar" class="btn-img user-avatar" alt="" @click="openLoginDialog" />
      <img v-else :src="userImg" class="btn-img" alt="" @click="openLoginDialog" />
    </div>
  </div>
  <!-- 设置设备编号组件 -->
@@ -74,6 +75,8 @@
  <ScheduledTaskDialog ref="scheduledTaskDialogRef" />
  <!-- 定时任务提醒组件 -->
  <TaskAlert ref="taskAlertRef" @close="taskAlaetClose" />
  <!-- 用户登录组件 -->
  <LoginDialog ref="loginDialogRef" />
</template>

<script lang="ts" setup name="Header">
@@ -94,6 +97,7 @@
  () => import("./ScheduledTask.vue")
);
const TaskAlert = defineAsyncComponent(() => import("./TaskAlart.vue"));
const LoginDialog = defineAsyncComponent(() => import('./Login/index.vue'));

import atRegularTimeImg from "../../../../img/dingshi.png";
import setUpImg from "../../../../img/shezhi.png";
@@ -112,6 +116,7 @@
const settingDeviceDialogRef = ref<any>(null);
const scheduledTaskDialogRef = ref<any>(null);
const taskAlertRef = ref<any>(null);
const loginDialogRef = ref<any>(null);

const countdown = ref(null); // 定时任务的倒计时
const isTaskAlartIsOpen = ref(false); // 定时任务的提醒弹框是否显示
@@ -158,6 +163,14 @@
  } else {
    return `${seconds}s`;
  }
});


const userInfo = computed(() => {
  if (!bedsideAuxiliaryScreenStore.userInfo) return null
  return Object.assign({}, bedsideAuxiliaryScreenStore.userInfo, {
    userAvatar: bedsideAuxiliaryScreenStore.userInfo?.userAvatar ? bedsideAuxiliaryScreenStore.userInfo?.userAvatar : generateCircularAvatar(bedsideAuxiliaryScreenStore.userInfo?.userName)
  });
});

watch(
@@ -234,11 +247,36 @@
};

const openLoginDialog = () => {
  ElMessage({
    message: "功能开发中，敬请期待！",
    type: "warning",
  });
  if (
    !bedsideAuxiliaryScreenStore.deviceCode ||
    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
  )
    return ElMessage.warning("未初始化或正在进行初始化操作中");
    loginDialogRef.value.openDialog();
};

function generateCircularAvatar(name: string, size = 100): string {
  console.log('name: ', name)
  const canvas = document.createElement('canvas');
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d')!;
  
  // 绘制圆形背景
  ctx.fillStyle = '#dae5ec';
  ctx.beginPath();
  ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
  ctx.fill();
  
  // 绘制文字（第一个字）
  ctx.fillStyle = '#70a3dd'; // 字体颜色
  ctx.font = `${size * 0.5}px sans-serif`; // 字体大小为头像大小的一半
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(name.charAt(0), size / 2, size / 2);
  
  return canvas.toDataURL('image/png'); // 返回 Base64 图片
}

onUnmounted(() => {
  clearTimer();
@@ -276,6 +314,11 @@
      height: 10px;
      object-fit: contain;
      cursor: pointer;
      &.user-avatar {
        width: 10px;
        border-radius: 50%;
        overflow: hidden;
      }
      &:not(:first-child) {
        margin-left: 9px;
      }