# 长者档案功能实现文档

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

## 实现文件

### 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
```

**返回数据结构**:
```typescript
{
  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. 可以添加预警记录的筛选和搜索功能