🏥 健康监测大屏系统

一个基于 FastAPI + Vue3 + PostgreSQL 构建的现代化健康监测大屏系统。

✨ 特性

后端特性

• ⚡ 高性能: 基于FastAPI异步框架，支持1000+ QPS
• 🔐 安全: JWT认证 + RBAC权限控制
• 📊 实时推送: WebSocket实时数据推送（4个端点）
• 🏢 多租户: 完整的多租户数据隔离
• 📝 自动文档: Swagger UI / ReDoc自动API文档
• 🗄️ 数据库: PostgreSQL + SQLAlchemy 2.0异步ORM
• 📦 50+API: 完整的REST API（46个） + WebSocket（4个）

前端特性

• 🎨 现代化UI: Vue 3 + Composition API + TypeScript
• 📱 响应式: 适配桌面和移动端
• 🔄 实时更新: WebSocket自动重连 + 心跳保活
• 📈 数据可视化: Chart.js图表组件
• 🎯 组件化: 5个完整的业务组件
• 🚀 Vite构建: 快速的开发和构建体验

🚀 快速开始

前提条件

• Python 3.10+
• Node.js 18+
• PostgreSQL 13+

一键启动（推荐）⭐

# 1. 创建数据库
sudo -u postgres psql
CREATE DATABASE ljwx_bigscreen;
CREATE USER ljwx_user WITH PASSWORD 'Ljwx2024!@#';
GRANT ALL PRIVILEGES ON DATABASE ljwx_bigscreen TO ljwx_user;
\q

# 2. 一键启动
cd bigscreen
./start_app.sh

# 3. 停止服务
./stop_app.sh

✅ 启动完成！访问：

• 🌐 前端: http://localhost:5173
• 📚 API文档: http://localhost:8000/docs
• 📊 健康检查: http://localhost:8000/health

默认账户:

• 管理员: admin / admin123
• 测试用户: testuser / test123

配置端口和环境变量

所有配置统一在根目录 .env 文件中管理 ⚙️

编辑 .env 文件来自定义配置：

# 后端配置
BACKEND_PORT=8000
BACKEND_HOST=0.0.0.0

# 前端配置
FRONTEND_PORT=5173

# 数据库配置
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_DB=ljwx_bigscreen
POSTGRES_USER=ljwx_user
POSTGRES_PASSWORD=Ljwx2024!@#

# API配置
VITE_API_BASE_URL=http://localhost:8000
VITE_WS_BASE_URL=ws://localhost:8000

# 更多配置请参考 .env.example

注意：

• ⚠️ backend/.env 和 frontend/.env 由启动脚本自动生成，请勿手动编辑
• ✅ 所有配置修改请在根目录 .env 文件中进行
• 🔒 .env 文件包含敏感信息，已被 .gitignore 忽略

📁 项目结构

bigscreen/
├── backend/                 # 后端代码
│   ├── app/
│   │   ├── api/            # API路由
│   │   │   └── v1/
│   │   │       ├── endpoints/   # API端点 (50个)
│   │   │       │   ├── device.py      # 设备管理 (11个)
│   │   │       │   ├── health_data.py # 健康数据 (13个)
│   │   │       │   ├── alert.py       # 告警管理 (13个)
│   │   │       │   ├── message.py     # 消息推送 (9个)
│   │   │       │   └── websocket.py   # WebSocket (4个)
│   │   ├── models/         # SQLAlchemy模型 (27+个)
│   │   ├── schemas/        # Pydantic Schema (60+个)
│   │   ├── core/           # 核心功能 (认证/日志)
│   │   └── db/             # 数据库配置
│   ├── init_database.py    # 数据库初始化
│   ├── test_api.py         # API测试脚本
│   └── requirements.txt    # Python依赖
│
├── frontend/               # 前端代码
│   ├── src/
│   │   ├── api/           # API客户端 (51个函数)
│   │   ├── components/    # Vue组件 (5个)
│   │   ├── utils/         # 工具类 (WebSocket)
│   │   └── stores/        # 状态管理
│   └── package.json       # Node依赖
│
├── docs/                  # 文档
│   ├── API_DOCUMENTATION.md      # API文档
│   ├── DEPLOYMENT_GUIDE.md       # 部署指南
│   ├── QUICK_START.md            # 快速启动
│   └── MIGRATION_PROGRESS.md     # 迁移进度
│
├── start_app.sh           # 启动脚本
├── stop_app.sh            # 停止脚本
└── README.md              # 本文件

🔌 API端点

REST API (46个)

认证 (3个)

• POST /api/v1/auth/login - 登录
• POST /api/v1/auth/refresh - 刷新Token
• POST /api/v1/auth/register - 注册

设备管理 (11个)

• GET/POST/PUT/DELETE /api/v1/devices - 设备CRUD
• POST /api/v1/devices/bind/request - 创建绑定请求
• PUT /api/v1/devices/bind/request/{id}/approve - 批准绑定
• 更多...

健康数据 (13个)

• POST /api/v1/health/data - 上报健康数据
• POST /api/v1/health/data/batch - 批量上报
• GET /api/v1/health/data - 查询数据
• GET /api/v1/health/org/realtime-stats - 实时统计
• 更多...

告警管理 (13个)

• GET/POST/PUT/DELETE /api/v1/alerts - 告警CRUD
• PUT /api/v1/alerts/{id}/acknowledge - 确认告警
• PUT /api/v1/alerts/{id}/handle - 处理告警
• 更多...

消息推送 (9个)

• POST /api/v1/messages/send - 发送消息
• POST /api/v1/messages/broadcast - 广播消息
• GET /api/v1/messages/statistics - 消息统计
• 更多...

WebSocket (4个)

• WS /ws/health-data?token={token} - 健康数据实时推送
• WS /ws/alerts?token={token} - 告警实时通知
• WS /ws/dashboard?token={token} - 大屏数据推送
• WS /ws/messages?token={token} - 消息实时推送

🎨 前端组件

5个完整组件

1. RealTimeHealthStats.vue - 实时健康统计面板

   • 6个统计卡片
   • WebSocket实时更新
   • 渐变UI设计

2. AlertListPanel.vue - 告警列表和处理

   • 实时告警推送
   • 告警处理流程
   • 过滤和分页

3. DeviceManagement.vue - 设备管理

   • 设备CRUD
   • 绑定/解绑管理
   • 状态监控

4. HealthDataCharts.vue - 健康数据图表

   • 4个趋势图表
   • Chart.js集成
   • 多时间范围

5. MessageCenter.vue - 消息中心

   • 消息收发
   • 实时推送
   • 已读/未读管理

📚 文档

• API文档 - 完整的API接口说明
• 快速启动 - 5分钟快速启动指南
• 部署指南 - 生产环境部署
• 迁移进度 - 项目迁移进度

🧪 测试

运行测试

# 后端测试
cd backend
source venv/bin/activate
python test_api.py

# 初始化数据库
python init_database.py

# 重置数据库
python init_database.py --reset

API测试

访问 http://localhost:8000/docs 使用Swagger UI测试所有API。

🔧 开发

后端开发

cd backend
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

# 启动开发服务器（热重载）
uvicorn app.main:app --reload

# 查看日志
tail -f logs/app.log

前端开发

cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建
npm run preview

🐳 Docker部署

# 使用Docker Compose
docker-compose up -d

# 查看日志
docker-compose logs -f

# 停止服务
docker-compose down

# 初始化数据库
docker-compose exec backend python init_database.py

📊 性能

• 后端QPS: 1000+ (使用Gunicorn + 4 workers)
• 数据库连接池: 10-30连接
• WebSocket并发: 支持1000+并发连接
• 前端首屏加载: < 2s
• API响应时间: 平均 < 100ms

🛡️ 安全

• ✅ JWT认证 + 刷新Token
• ✅ RBAC权限控制
• ✅ SQL注入防护 (ORM)
• ✅ XSS防护
• ✅ CORS配置
• ✅ 密码加密 (bcrypt)
• ✅ 多租户数据隔离

🤝 贡献

欢迎贡献！请遵循以下步骤：

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 鸣谢

• FastAPI - 现代化的Python Web框架
• Vue.js - 渐进式JavaScript框架
• PostgreSQL - 世界上最先进的开源数据库
• Chart.js - 简单灵活的图表库

📞 联系方式

• 项目地址: https://github.com/your-username/bigscreen
• 问题反馈: https://github.com/your-username/bigscreen/issues
• 邮箱: [email protected]

---

⭐ 如果这个项目对你有帮助，请给一个星标！