kyj-yanglao-smarthome-web/src/views/Home/ELDER_PROFILE_FEATURE.md

长者档案功能实现文档

功能概述

在长者位置按钮左边添加了一个"长者档案"按钮，点击后弹窗展示长者的详细档案信息，包括基本信息、联系方式和预警历史。

实现文件

1. 新增组件：ElderProfileDialog.vue

路径: src/views/Home/components/ElderProfileDialog.vue

功能:

• 展示长者档案的弹窗组件
• 包含长者的基本信息（名称、年龄、性别）
• 展示联系方式（长者电话、家属电话、地址）
• 显示预警历史记录（预警类型、预警信息、发生时间）
• 头像使用长者名字的第一个字符显示

主要特性:

• 自动调用 /api/pc/admin/getElderDetail 接口获取数据
• 当接口暂无数据或出错时，自动使用假数据（用于测试）
• 支持预警历史的滚动显示
• 美观的卡片式布局，与整体设计风格一致

2. 修改组件：ElderlyCard.vue

路径: src/views/Home/components/ElderlyCard.vue

修改内容:

• 在"添加设备"按钮左边添加"长者档案"按钮
• 新增 viewProfile 事件，点击档案按钮时触发
• 按钮采用 type="info" 样式，与"添加设备"按钮形成对比

3. 修改组件：ElderlyList.vue

路径: src/views/Home/components/ElderlyList.vue

修改内容:

• 添加 viewProfile 事件的 emit 定义
• 在 ElderlyCard 组件上监听 @view-profile 事件
• 将事件向上传递给父组件

4. 修改主文件：home-refactored.vue

路径: src/views/Home/home-refactored.vue

修改内容:

• 导入 ElderProfileDialog 组件
• 添加 elderProfileDialogVisible 和 currentProfileElderId 响应式变量
• 在 ElderlyList 组件上监听 @view-profile 事件
• 实现 openElderProfileDialog 方法，打开档案弹窗
• 在模板中添加 ElderProfileDialog 组件

API 接口

获取长者档案详情

接口: GET /api/pc/admin/getElderDetail

参数:

elderId: number - 长者ID

返回数据结构:

{
  id: number                    // 长者ID
  name: string                  // 长者名称
  avatar?: string              // 头像URL（可选）
  age: number                   // 年龄
  gender: string               // 性别（男/女）
  relativePhone?: string        // 家属电话
  elderPhone?: string           // 长者电话
  address?: string              // 长者地址
  warningData?: [               // 预警历史数组
    {
      eventType: string         // 预警类型（汉字）
      message: string           // 预警信息
      happensAt: string         // 发生时间（ISO格式）
    }
  ]
}

假数据生成

当接口暂无数据或出错时，组件会自动生成假数据用于测试。假数据包括：

长者信息:

• 名字：王奶奶、李爷爷、张奶奶、刘爷爷、陈奶奶、杨爷爷
• 年龄：65-84岁
• 性别：男/女
• 电话：随机生成的11位手机号
• 地址：北京、上海、广州、深圳、杭州的地址

预警记录:

• 预警类型：跌倒预警、心率异常、血压偏高、离床预警、体温异常
• 预警信息：对应的预警描述
• 发生时间：过去7天内的随机时间

使用流程

1. 用户在老人列表中看到每个长者卡片
2. 点击长者卡片右侧的"长者档案"按钮
3. 弹窗打开，显示该长者的详细信息
4. 组件自动调用接口获取数据
5. 如果接口有数据，显示真实数据；否则显示假数据
6. 用户可以查看长者的基本信息、联系方式和预警历史
7. 点击关闭按钮或点击外部区域关闭弹窗

样式特点

• 采用渐变色背景，与整体大屏设计风格一致
• 头像使用圆形设计，颜色为蓝紫渐变
• 预警记录使用警告色（橙色）突出显示
• 支持预警记录的滚动显示
• 响应式布局，适配不同屏幕尺寸

后续改进

1. 当接口正式上线后，移除假数据生成逻辑
2. 可以添加编辑功能，允许修改长者信息
3. 可以添加更多的统计信息，如最近一周的预警数量
4. 可以添加导出功能，导出长者档案为PDF
5. 可以添加预警记录的筛选和搜索功能