1. 项目概述
这个Vue养老院医疗护理系统是我去年为某连锁养老机构开发的一套数字化管理平台。当时客户的需求很明确：需要一套能同时满足医护人员、护工和家属三方需求的现代化管理系统，既要操作简单又要功能全面。
经过三个月的开发和迭代，最终上线的系统整合了老年人健康档案管理、日常护理记录、理疗预约、用药提醒等核心功能模块。特别值得一提的是，我们针对养老院场景做了大量优化，比如护工端采用大字体设计、支持语音输入，医护人员端则强化了数据统计和异常预警功能。
2. 系统架构设计
2.1 技术栈选型
前端采用Vue 3 + TypeScript的组合，主要基于以下考虑：
- 养老院工作人员电脑配置普遍不高，Vue的轻量级特性更合适
- TypeScript的强类型特性在医疗数据管理上能减少错误
- 需要兼容IE11等老旧浏览器（很多养老院还在用Windows 7）
后端选择了NestJS + MySQL的组合：
- NestJS的模块化架构便于后期功能扩展
- MySQL关系型数据库更适合结构化医疗数据存储
- 特别开发了数据同步机制，支持养老院断网时的本地存储
2.2 核心功能模块
系统主要包含6大功能模块：
- 长者档案管理：完整健康档案、过敏史、既往病史等
- 日常护理记录：大小便、饮食、睡眠等日常记录
- 理疗预约系统：支持多人预约和冲突检测
- 用药管理系统：包含配药、发药、用药提醒全流程
- 紧急呼叫响应：集成床头呼叫系统，实时定位
- 家属端小程序：让家属随时查看老人状况
3. 关键实现细节
3.1 响应式设计优化
考虑到养老院工作人员的使用习惯，我们做了特殊优化：
- 所有按钮尺寸放大150%，最小点击区域50×50px
- 关键操作提供语音引导（如"请扫描药品条形码"）
- 颜色对比度严格遵循WCAG 2.1 AA标准
- 开发了"简易模式"，隐藏非必要功能
vue复制<template>
<button
class="elderly-btn"
:style="{
fontSize: isSimpleMode ? '20px' : '16px',
padding: isSimpleMode ? '15px 30px' : '10px 20px'
}"
@click="handleClick"
>
<span v-if="!isSimpleMode">{{ label }}</span>
<icon v-if="icon" :name="icon" />
</button>
</template>
3.2 实时数据同步机制
养老院经常存在网络不稳定的情况，我们设计了三级数据同步策略：
- 优先使用WebSocket实时同步
- 网络中断时转为IndexedDB本地存储
- 定时（每15分钟）尝试重新连接
typescript复制class DataSync {
private ws: WebSocket | null = null;
private db: IDBPDatabase | null = null;
async init() {
try {
this.ws = await this.connectWebSocket();
} catch (e) {
this.db = await this.openIndexedDB();
this.startRetryTimer();
}
}
private startRetryTimer() {
setInterval(async () => {
if (!navigator.onLine) return;
try {
this.ws = await this.connectWebSocket();
await this.syncLocalData();
} catch (e) {
console.warn('Retry failed', e);
}
}, 15 * 60 * 1000);
}
}
4. 医疗数据安全处理
4.1 敏感信息加密
所有医疗数据在传输和存储时都进行了加密处理：
- 传输层：TLS 1.3 + 双向证书认证
- 存储加密：AES-256加密敏感字段
- 日志脱敏：自动识别并掩码身份证号、病历号等
特别注意：养老院系统必须保留完整的操作日志，所有医疗数据修改都需要双重确认
4.2 权限分级管理
设计了5级权限体系：
- 家属：仅能查看基础信息
- 护工：可录入日常护理记录
- 护士：可查看完整健康档案
- 医生：可修改用药和诊疗方案
- 管理员：系统配置权限
权限控制采用RBAC模型，关键代码：
typescript复制@Post('/api/medical-record')
@Roles('doctor', 'nurse')
async updateMedicalRecord(@Body() dto: UpdateRecordDto) {
if (dto.diagnosis && !this.ctx.user.roles.includes('doctor')) {
throw new ForbiddenException('只有医生可以修改诊断信息');
}
// ...
}
5. 特色功能实现
5.1 智能用药提醒
系统会根据医嘱自动生成用药计划，并支持：
- 扫码核对药品（防止发错药）
- 用药时间窗设置（提前15分钟提醒）
- 多种提醒方式：电脑弹窗、护工手环震动、家属微信通知
mermaid复制graph TD
A[医嘱录入] --> B(生成用药计划)
B --> C{下次用药时间}
C -->|到达时间| D[触发提醒]
D --> E[护工确认]
E --> F{已服用?}
F -->|是| G[记录执行]
F -->|否| H[标记异常]
5.2 跌倒检测算法
通过养老院安装的智能设备，系统可以检测老人跌倒情况：
- 加速度传感器检测突然运动变化
- 视频分析确认是否倒地
- 若10秒无自主活动，自动触发警报
算法核心逻辑：
python复制def detect_fall(accel_data, video_frame):
# 分析加速度变化
accel_change = np.linalg.norm(accel_data[-10:] - accel_data[-20:-10])
if accel_change > FALL_THRESHOLD:
# 分析视频帧
posture = analyze_posture(video_frame)
if posture == 'lying':
if not detect_movement(video_frame, duration=10):
trigger_alarm()
6. 部署与运维实践
6.1 私有化部署方案
考虑到医疗数据敏感性，我们提供三种部署方式：
- 云端SaaS版：适合小型养老院
- 混合云部署：核心数据本地存储
- 全本地化部署：完全隔离网络
部署架构示例：
code复制前端Nginx → 后端集群 → MySQL主从 → Redis缓存
↑
NAS存储（医疗影像）
6.2 性能优化技巧
在实际运行中总结的优化经验：
- 使用Web Worker处理大量护理记录导出
- 对健康趋势图采用采样显示（原始数据存后端）
- 启用Gzip压缩后，首屏加载时间从4.2s降至1.8s
- 采用懒加载策略，按需加载理疗视频资源
关键配置示例：
nginx复制server {
gzip on;
gzip_types text/plain application/json;
location /static/ {
expires 1y;
add_header Cache-Control "public";
}
}
7. 常见问题排查
7.1 数据同步失败
典型症状：护工端看不到最新医嘱
排查步骤：
- 检查浏览器控制台有无WebSocket错误
- 查看localStorage中的syncStatus字段
- 尝试手动触发同步（点击右上角同步按钮）
- 检查网络连接状态
7.2 打印格式错乱
解决方案：
- 使用系统专用打印模板
- Chrome浏览器需关闭"节省纸张"选项
- 检查打印预览中的缩放比例是否为100%
- 复杂报表建议导出PDF再打印
8. 项目反思与改进
开发过程中最大的教训是对硬件兼容性预估不足。有些养老院的扫描枪是10年前的老型号，最初无法识别我们的二维码。后来增加了以下兼容措施：
- 支持Code 128和QR Code两种格式
- 开发了"扫码失败"时的手动输入兜底方案
- 提供USB驱动自动安装工具
另一个重要改进点是增加了"护理记录模板"功能。原本护工需要逐项填写，现在可以：
- 常用组合一键套用（如"早餐+吃药+晨间护理"）
- 支持语音转文字输入
- 异常指标自动标红提醒