From b3e78764e84144a9d64a9d28f293dc4a75e22134 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期二, 16 九月 2025 16:44:13 +0800
Subject: [PATCH] ID1766-优化患者头像显示
---
src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue | 54 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 49 insertions(+), 5 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
index 51b2f31..9a49eca 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue
+++ b/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); // 定时任务的提醒弹框是否显示
@@ -139,6 +144,7 @@
bedsideAuxiliaryScreenStore.deviceData.underTreatment.dialysisAge
)
: null,
+ birthDate: bedsideAuxiliaryScreenStore.deviceData.患者出生日期,
};
});
@@ -157,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(
@@ -233,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();
@@ -275,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;
}
--
Gitblit v1.8.0