添加设备增加老人名称和机构名称

src/views/Home/home.vue

@@ -7,7 +7,7 @@
       <!-- 大屏顶部信息栏 -->
       <div class="top-info-bar">
         <div class="system-title-section">
-          <h1 class="system-title">智慧养老监护</h1>
+          <h1 class="system-title">智慧养老监护 - {{ getTenantName() }}</h1>
           <p class="system-subtitle">智能守护 • 安心养老 • 实时监控</p>
         </div>
         <div class="time-display">
@@ -82,14 +82,8 @@
                 }"
                 @click="selectElderly(elderly)"
               >
-                <div class="elderly-avatar-large">
-                  <el-image
-                    v-if="elderly.avatar"
-                    style="width: 32px; height: 32px"
-                    :src="elderly.avatar"
-                    fit="fill"
-                  />
-                  <Icon v-else icon="mdi:account-tie" />
+                <div class="elderly-avatar-large" :class="getGenderClass(elderly.gender)">
+                  <span class="avatar-initial">{{ getNameInitial(elderly.name) }}</span>
                 </div>
                 <div class="elderly-info-large">
                   <h3>{{ elderly.name }}</h3>
@@ -103,6 +97,15 @@
                   <div class="device-count">
                     <span>{{ elderly.deviceNumber || 0 }} 个设备</span>
                   </div>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    class="add-device-btn"
+                    style="padding: 10px !important"
+                    @click.stop="openAddDeviceFromList(elderly)"
+                  >
+                    添加设备
+                  </el-button>
                 </div>
               </div>
             </div>
@@ -434,7 +437,7 @@
 import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
 import fetchHttp from '@/config/axios/fetchHttp'
-import { getAccessToken } from '@/utils/auth'
+import { getAccessToken, getLoginForm } from '@/utils/auth'
 import { formatToDateTime } from '@/utils/dateUtil'
 
 interface WarningHistory {
@@ -712,7 +715,9 @@ const addDeviceForm = reactive({
   elderlyId: null as number | null,
   deviceType: '',
   deviceCode: '',
-  installPosition: ''
+  installPosition: '',
+  elderlyName: '',
+  organizationName: ''
 })
 
 const genderMap = {
@@ -871,6 +876,7 @@ const submitAddElder = async () => {
 const openAddDeviceDialog = (elderly: SelectElderly) => {
   currentElderly.value = elderly
   addDeviceForm.elderlyId = elderly.id
+  addDeviceForm.elderlyName = elderly.name
   addDeviceForm.deviceType = ''
   addDeviceForm.deviceCode = ''
   addDeviceForm.installPosition = ''
@@ -881,12 +887,28 @@ const openAddDeviceDialog = (elderly: SelectElderly) => {
   }
 }
 
+// 从左侧老人列表的卡片“添加设备”按钮触发
+const openAddDeviceFromList = (elderly: Elderly) => {
+  const temp: SelectElderly = {
+    id: elderly.id,
+    name: elderly.name,
+    healthList: [],
+    deviceList: []
+  }
+  openAddDeviceDialog(temp)
+}
+
 // 取消添加设备
 const closeDialog = () => {
   dialogVisible.value = false
   currentElderly.value = null
 }
 
+// 获取机构名称
+const getTenantName = () => {
+  return getLoginForm()?.tenantName || ''
+}
+
 // 新增设备
 const addDevice = async () => {
   if (!deviceFormRef.value) return
@@ -898,7 +920,9 @@ const addDevice = async () => {
       deviceCode: addDeviceForm.deviceCode,
       elderId: Number(addDeviceForm.elderlyId),
       organizationId: Number(organizationId),
-      installPosition: addDeviceForm.installPosition
+      installPosition: addDeviceForm.installPosition,
+      organizationName: getTenantName(),
+      elderlyName: addDeviceForm.elderlyName
     }
     const res = await fetchHttp.post('/api/pc/admin/bindDevice', newDevice, {
       headers: {
@@ -979,6 +1003,21 @@ const getHealthStatusClass = (healthText: string) => {
   return 'normal'
 }
 
+// 头像展示：按性别设置颜色，显示姓名首字
+const getGenderClass = (gender: string | number) => {
+  const maleVals = [1, '1', '男', 'male', 'M', 'm']
+  const femaleVals = [0, '0', '女', 'female', 'F', 'f']
+  if (maleVals.includes(gender as any)) return 'male'
+  if (femaleVals.includes(gender as any)) return 'female'
+  return 'unknown'
+}
+
+const getNameInitial = (name?: string) => {
+  if (!name) return '?'
+  const s = String(name).trim()
+  return s ? s[0] : '?'
+}
+
 // 大屏专用方法
 const selectElderly = (elderly: Elderly) => {
   selectedElderly.value.id = elderly.id
@@ -1145,6 +1184,7 @@ const getAllDevices = async () => {
 
 // 生命周期
 onMounted(() => {
+  getTenantName()
   // 初始化时间
   updateDateTime()
   lastSyncTime.value = new Date().toLocaleTimeString('zh-CN', { hour12: false })
@@ -2030,6 +2070,7 @@ $transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   padding: 15px;
   overflow-y: auto;
   flex: 1;
+  max-height: 500px;
 }
 
 .elderly-grid-large {
@@ -2091,12 +2132,33 @@ $transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 50%;
   align-items: center;
   justify-content: center;
+  color: #fff;
+  user-select: none;
 
-  :deep(svg),
-  :deep(span) {
+  /* 旧的图标尺寸，仅保留给 svg 图标使用 */
+  :deep(svg) {
     width: 32px !important;
     height: 32px !important;
   }
+
+  &.male {
+    background: #409eff; /* 蓝色 */
+  }
+  &.female {
+    background: #ff69b4; /* 粉色 */
+  }
+  &.unknown {
+    background: #909399; /* 灰色 */
+  }
+
+  .avatar-initial {
+    font-size: 22px;
+    font-weight: 700;
+    color: #fff;
+    width: auto !important;
+    height: auto !important;
+    line-height: 1;
+  }
 }
 
 .elderly-info-large {