长者档案功能 - 快速开始指南

📋 功能概述

在长者卡片上添加了"长者档案"按钮，点击可以查看长者的详细信息，包括：

基本信息（名字、年龄、性别）
联系方式（电话、地址）
预警历史记录

🚀 快速开始

1. 查看长者档案

1. 打开大屏页面
2. 在左侧老人列表中找到要查看的长者
3. 点击长者卡片右侧的"长者档案"按钮
4. 弹窗打开，显示长者的详细信息

2. 弹窗内容

弹窗分为三个主要区域：

基本信息区

┌─────────────────────────────────┐
│  [头像]  姓名：王奶奶            │
│          年龄：72岁             │
│          性别：女               │
└─────────────────────────────────┘

联系方式区

┌─────────────────────────────────┐
│ 联系方式                         │
│ 长者电话：13800138000           │
│ 家属电话：13900139000           │
│ 地址：北京市朝阳区建国路1号     │
└─────────────────────────────────┘

预警历史区

┌─────────────────────────────────┐
│ 预警历史 (3)                     │
│ ┌─────────────────────────────┐ │
│ │ [跌倒预警]    2024-01-15    │ │
│ │ 检测到长者跌倒，请立即查看   │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ [心率异常]    2024-01-14    │ │
│ │ 心率过高，建议就医检查       │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

📁 文件结构

src/views/Home/
├── components/
│   ├── ElderProfileDialog.vue      ← 新增：长者档案弹窗组件
│   ├── ElderlyCard.vue             ← 修改：添加档案按钮
│   └── ElderlyList.vue             ← 修改：传递事件
├── home-refactored.vue             ← 修改：集成档案组件
├── ELDER_PROFILE_FEATURE.md        ← 功能文档
├── TEST_GUIDE.md                   ← 测试指南
└── QUICK_START.md                  ← 本文件

🔧 技术细节

组件通信流程

ElderlyCard (点击档案按钮)
    ↓ emit('viewProfile')
ElderlyList
    ↓ emit('viewProfile')
home-refactored.vue (打开弹窗)
    ↓ 传递 elderId
ElderProfileDialog (显示档案)

数据流

点击档案按钮
    ↓
openElderProfileDialog(elderly)
    ↓
currentProfileElderId = elderly.id
elderProfileDialogVisible = true
    ↓
ElderProfileDialog 监听到 elderId 变化
    ↓
调用 fetchElderDetail(elderId)
    ↓
GET /api/pc/admin/getElderDetail?elderId=xxx
    ↓
显示数据或假数据

🎨 样式特点

头部: 蓝紫渐变色背景
头像: 圆形设计，显示名字首字
预警: 橙色警告色突出显示
滚动: 预警列表支持滚动显示

🧪 测试假数据

当接口暂无数据时，会自动生成假数据：

// 假数据示例
{
  name: "王奶奶",
  age: 72,
  gender: "女",
  elderPhone: "13800138000",
  relativePhone: "13900139000",
  address: "北京市朝阳区建国路1号",
  warningData: [
    {
      eventType: "跌倒预警",
      message: "检测到长者跌倒，请立即查看",
      happensAt: "2024-01-15T10:30:00Z"
    }
  ]
}

📞 API 接口

获取长者档案

请求:

GET /api/pc/admin/getElderDetail?elderId=1

响应:

{
  "id": 1,
  "name": "王奶奶",
  "age": 72,
  "gender": "女",
  "elderPhone": "13800138000",
  "relativePhone": "13900139000",
  "address": "北京市朝阳区建国路1号",
  "warningData": [
    {
      "eventType": "跌倒预警",
      "message": "检测到长者跌倒，请立即查看",
      "happensAt": "2024-01-15T10:30:00Z"
    }
  ]
}

⚙️ 配置说明

ElderProfileDialog Props

属性	类型	说明
modelValue	boolean	弹窗是否显示
elderId	number	长者ID

ElderProfileDialog Events

事件	说明
update:modelValue	弹窗显示/隐藏状态变化

🔄 后续改进计划

接口正式上线后移除假数据
添加编辑功能
添加导出PDF功能
添加预警记录筛选
支持真实头像上传
添加更多统计信息

❓ 常见问题

Q: 为什么显示的是假数据？

A: 因为接口 /api/pc/admin/getElderDetail 还没有真实数据，所以组件会自动生成假数据用于测试。

Q: 如何关闭弹窗？

A: 点击弹窗右上角的关闭按钮即可。

Q: 预警记录太多怎么办？

A: 预警列表支持滚动，可以向下滚动查看更多记录。

Q: 如何修改假数据？

A: 编辑 ElderProfileDialog.vue 中的 generateMockData 函数。

📞 技术支持

如有问题，请查看：

ELDER_PROFILE_FEATURE.md - 详细功能文档
TEST_GUIDE.md - 测试指南
代码注释

📝 更新日志

v1.0.0 (2024-01-15)

✅ 新增长者档案弹窗组件
✅ 添加档案按钮到长者卡片
✅ 实现数据加载和显示
✅ 添加假数据生成逻辑
✅ 完成样式设计

QUICK_START.md 5.8 KB Histórico Raw