Files

T

brunoandClaude cc8259e423 初始化康养老人体征管理平台项目

✨ 功能特性：
- 🎨 温柔疗愈的康养风格设计
- 📊 实时体征监控（心率、血氧、体温、血压）
- 🤖 AI健康分析和智能建议
- 🚨 智能告警系统
- 🏢 楼层地图可视化
- 📈 7日健康趋势图表
- 😴 睡眠质量分析
- 📱 设备状态监控

🛠️ 技术栈：
- Vue 3.4 + Vite 5.1
- Tailwind CSS 3.4
- ECharts 5.5
- Vue Router 4.3

🌿 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

2025-12-01 23:53:44 +08:00

5.9 KiB

Raw Permalink Blame History

📖 使用指南

🎯 主要功能使用说明

1️⃣ 主控制台页面

访问 http://localhost:5173 即可进入主控制台。

顶部信息栏

📊 实时统计：在院老人总数、健康正常人数、需要关注人数、紧急处理人数
🌤️ 天气信息：当前温度、天气状况、空气质量
⏰ 实时时间：当前时间和日期
🔔 告警提示：显示活跃告警数量

左侧：重点关注老人列表

🎨 颜色标识：
- 🟢 绿色边框 = 健康正常
- 🟠 橙色边框 = 需要关注
- 🔴 红色边框 = 紧急处理（带脉冲动画）
📊 健康评分：0-100分，颜色区分
❤️ 实时体征：心率、血氧、体温、睡眠
⚠️ 告警信息：显示该老人的活跃告警
🖱️ 点击查看：点击卡片进入详情页

中间：楼层地图

🏢 楼层切换：点击楼层标签切换
🎨 房间状态：
- 绿色边框 = 健康正常
- 橙色边框 = 需要关注
- 红色边框 = 紧急处理
- 虚线边框 = 空房间
👤 老人信息：显示头像、姓名、年龄
📊 健康评分条：直观显示健康状况
🔍 点击详情：点击房间卡片查看更多信息

右侧：AI健康洞察

🤖 AI分析：实时分析整体健康状况
🎯 优先级排序：
- 🔴 高优先级（紧急）
- 🟠 中优先级（重要）
- 🔵 低优先级（信息）
📈 可信度：显示AI分析的可信度百分比
💡 建议方案：点击展开查看AI建议
📊 7日趋势图：平均健康评分走势

底部：体征数据概览

📊 平均数据：全院老人平均心率、血氧、体温、睡眠
📱 设备状态：
- 在线设备数/总设备数
- 设备在线率
- 电量统计（充足/需充电/不足）

右下角：告警通知

🚨 实时告警：最多显示3条
🎨 颜色区分：
- 红色 = 危险告警（带弹跳动画）
- 橙色 = 预警提示
- 蓝色 = 一般提醒
🔔 操作按钮：
- "立即处理" - 标记告警为处理中
- "忽略" - 关闭告警提示
📍 位置信息：显示房间号和时间

2️⃣ 老人详情页

点击任意老人卡片或房间卡片进入详情页。

个人信息卡片

🎨 健康评分圆环：动态显示健康评分
👤 基本信息：姓名、年龄、性别、房间号
📅 入院信息：入院时间
👨‍👩‍👧 联系人信息：家属姓名和电话
🏥 医疗信息：既往病史、过敏史

实时体征监测

❤️ 心率：正常范围 60-100 bpm
🫁 血氧：正常范围 ≥95%
🌡️ 体温：正常范围 36.0-37.3°C
🩸 血压：正常范围 <140/90 mmHg
🎨 颜色提示：绿色=正常，红色=异常
⏰ 更新时间：显示最后更新时间

7日体征趋势

📈 多指标对比：心率、血氧、收缩压
🎨 曲线图表：ECharts 可交互图表
🔍 悬浮提示：鼠标悬停查看具体数值

睡眠质量分析

😴 总睡眠时长：单位小时
🌙 深度睡眠：单位小时
📊 睡眠评分：0-100分

监测设备状态

📱 设备列表：智能手表、红外监测、心电监护等
🟢 在线状态：绿色点=在线，灰色点=离线
🔋 电量显示：
- 绿色 = 充足 (≥60%)
- 橙色 = 需充电 (30-60%)
- 红色 = 不足 (<30%)

🎮 交互操作

键盘快捷键

ESC - 关闭弹窗
← - 返回上一页

鼠标操作

点击：查看详情、切换楼层、展开建议
悬停：显示提示信息、高亮效果
滚动：浏览长列表内容

📱 响应式适配

桌面端 (>1024px)

3栏布局：左侧列表 + 中间地图 + 右侧洞察
完整功能展示

平板端 (768px - 1024px)

自适应网格布局
部分组件垂直排列

移动端 (<768px)

单栏布局
触摸友好的大按钮
优化滚动体验

🔄 数据更新

自动更新

实时体征：每30秒自动刷新
时间显示：每1秒更新
告警推送：实时显示（模拟）

手动刷新

刷新浏览器页面即可重新加载数据

🎨 自定义配置

修改配色

编辑 tailwind.config.js 中的颜色配置：

colors: {
  'healing-primary': '#80C4A8',
  'healing-green': '#6EC28C',
  // ... 其他颜色
}

修改 Mock 数据

编辑 src/mock/data.js 文件：

elderlyList - 老人列表
alerts - 告警数据
aiInsights - AI洞察
floorMap - 楼层配置

调整更新频率

编辑 src/views/Dashboard.vue：

// 修改这个数值（单位：毫秒）
updateInterval = setInterval(updateVitalSigns, 30000)

🐛 常见问题

Q: 图表不显示？

A: 确保 ECharts 库已正确加载，检查浏览器控制台是否有错误。

Q: 告警通知不出现？

A: 检查 src/mock/data.js 中的 alerts 数组是否有 status: 'active' 的数据。

Q: 页面样式错乱？

A: 确保 Tailwind CSS 已正确配置，运行 npm install 重新安装依赖。

Q: 路由跳转失败？

A: 检查 Vue Router 配置，确保路由路径正确。

💡 使用技巧

1. 快速定位紧急老人

主页左侧列表已按风险等级自动排序，危险状态的老人会显示在最上方。

2. 查看历史趋势

进入老人详情页，滚动到"7日体征趋势"图表，可以直观看到健康变化。

3. 监控设备电量

底部的设备状态面板会统计所有设备的电量情况，及时提醒充电。

4. 关注AI建议

右侧AI洞察面板会给出专业的健康建议，点击展开查看详细方案。

📞 技术支持

如遇到问题，请查看：

浏览器控制台错误信息
README.md 中的技术文档
项目源代码注释

祝您使用愉快！ 🌿

5.9 KiB Raw Permalink Blame History Unescape Escape