🌿 康养老人体征管理平台

一个基于 Vue3 + Tailwind CSS 的养老院老人体征状态综合管理平台，采用温柔疗愈的康养风格设计。

✨ 项目特点

🎨 设计理念：康养风格

• 温柔疗愈配色：草木青 #80C4A8、生命绿 #6EC28C、舒缓蓝 #7AB6E9
• 圆角卡片布局：柔和阴影、大量留白、低对比度
• 情感化表达：使用 Emoji 头像、心情状态、暖色告警
• 非工业化设计：弱化科技蓝/黑色、减少锐角和金属线框

📊 核心功能

1. 实时体征监控

• ❤️ 心率监测
• 🫁 血氧饱和度
• 🌡️ 体温监测
• 🩸 血压监测
• 😴 睡眠质量分析
• 🚶 活动量统计

2. AI 健康分析

• 🤖 AI 实时分析老人健康状态
• 📈 7日/30日健康趋势预测
• 🔍 异常模式识别
• 💡 智能健康建议
• 📊 可信度评分显示

3. 智能告警系统

• 🚨 危险告警（红色、脉冲动画）
• ⚠️ 预警提示（橙色、柔和闪烁）
• ℹ️ 一般提醒（蓝色）
• 📍 定位到具体房间
• 🔔 实时浮层通知

4. 楼层地图可视化

• 🏢 5层楼房间分布
• 🎨 房间状态色彩编码
• 👤 每个房间的老人信息
• 📊 健康评分可视化
• 🔍 点击查看详情

5. 个人健康档案

• 📋 完整的个人信息
• 💓 实时体征数据
• 📈 历史趋势图表
• 😴 睡眠质量详情
• 📱 设备状态监控

6. 设备管理

• 📱 智能手表
• 📡 红外监测
• 💓 心电监护
• 🔋 电量监控
• 📶 在线状态

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产版本

npm run preview

📁 项目结构

elderly-care-dashboard/
├── src/
│   ├── components/          # 组件目录
│   │   ├── HeaderBar.vue           # 顶部信息栏
│   │   ├── StatCard.vue            # 统计卡片
│   │   ├── RiskElderlyList.vue     # 风险老人列表
│   │   ├── FloorMap.vue            # 楼层地图
│   │   ├── AIInsights.vue          # AI健康洞察
│   │   ├── VitalSignsOverview.vue  # 体征数据概览
│   │   ├── VitalCard.vue           # 体征卡片
│   │   └── AlertNotifications.vue  # 告警通知
│   ├── views/               # 页面目录
│   │   ├── Dashboard.vue           # 主控制台
│   │   └── ElderlyDetail.vue       # 老人详情页
│   ├── mock/                # Mock数据
│   │   └── data.js                 # 模拟数据
│   ├── router/              # 路由配置
│   │   └── index.js
│   ├── App.vue              # 根组件
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── tailwind.config.js       # Tailwind配置
├── vite.config.js           # Vite配置
└── package.json             # 项目配置

🎨 设计系统

配色方案

名称	颜色值	用途
康养主色	#80C4A8	主色调、按钮、重点数据
生命绿	#6EC28C	正常体征、健康指数
舒缓蓝	#7AB6E9	数据详情、分区背景
暖橙	#FFA45B	轻度告警
健康红	#FF6B6B	紧急告警
象牙白	#FBFBF5	背景
柔灰	#404040	文本

UI组件特点

• 圆角卡片：1-2rem 圆角
• 柔和阴影：0 2px 12px rgba(0,0,0,0.06)
• 温柔过渡：0.3s cubic-bezier(0.4, 0, 0.2, 1)
• 呼吸动画：3s pulse-slow
• 悬浮效果：轻微上浮 + 阴影增强

📊 数据说明

Mock 数据包含

• 6位老人的完整信息
• 实时体征数据生成
• 7天历史数据
• 5条活跃告警
• 4条AI健康洞察
• 5层楼的房间分布
• 设备状态信息

数据更新频率

• 实时体征：每30秒更新
• 时间显示：每1秒更新
• AI分析：模拟实时生成
• 告警：即时推送

🔧 技术栈

• 框架：Vue 3.4 (Composition API)
• 构建工具：Vite 5.1
• CSS 框架：Tailwind CSS 3.4
• 图表库：ECharts 5.5
• 路由：Vue Router 4.3
• 日期处理：Day.js 1.11

🎯 核心亮点

1. 温度感设计

• 使用柔和色彩和圆角设计
• Emoji表情传达情感
• 自然渐变背景
• 温柔的动画效果

2. AI智能分析

• 实时健康评分计算
• 趋势预测和异常检测
• 可信度评分展示
• 智能建议方案

3. 多维度监控

• 实时体征数据
• 历史趋势分析
• 楼层地图分布
• 设备状态监控

4. 响应式设计

• 适配桌面和平板
• 网格布局自适应
• 移动端友好

5. 用户体验

• 流畅的页面切换
• 优雅的动画效果
• 直观的数据可视化
• 清晰的信息层级

🌟 差异化特点

相比传统工业风格的健康监控大屏：

特性	传统大屏	本项目
风格	科技感、蓝黑、冷色	温柔疗愈、自然、暖色
体验	效率与监管	关怀与情感
元素	设备→数据状态	人→情感→健康改善
呈现	高密度图表	分层信息、易认知

📝 未来扩展

• WebSocket 实时数据推送
• 后台管理系统集成
• 家属端小程序
• 医疗报告生成
• 视频监控集成
• 语音播报告警
• 数据导出功能
• 多语言支持

📄 License

MIT License

👥 联系方式

如有问题或建议，欢迎反馈！

---

用心呵护每一位老人的健康 🌿