feat: UI交互优化与文档更新 v1.3.5
主要功能： - 修复实时统计面板错误触发人员筛选面板的交互问题 - 优化全局点击事件监听器的条件判断逻辑 - 完善面板交互的精确性和稳定性 技术修复： - 修正全局点击事件中的CSS类检查条件 - 从错误的'collapsed'检查改为正确的'expanded'检查 - 确保只有筛选面板展开时点击外部才会关闭 - 消除不同面板间的点击事件冲突 文档更新： - 新增根目录README.md文件提供快速入门指南 - 更新详细README添加UI交互优化章节 - 增加面板交互调试指南和最佳实践 - 版本号升级至v1.3.5，更新日期至2025年8月26日 用户体验改进： - 实时统计面板点击不再意外触发其他功能 - 减少误操作，提高界面交互准确性 - 优化大屏系统的整体用户操作体验
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
# LJWX BigScreen 健康监控大屏系统
|
||||
|
||||
[](https://python.org/)
|
||||
[](https://flask.palletsprojects.com/)
|
||||
[](https://docker.com/)
|
||||
[](https://github.com/your-org/ljwx-bigscreen)
|
||||
[](LICENSE)
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
LJWX BigScreen 是一个专为工业环境设计的实时健康监控大屏系统，支持多设备健康数据聚合、可视化展示和智能告警。
|
||||
|
||||
### 启动应用
|
||||
|
||||
```bash
|
||||
# 进入主目录
|
||||
cd bigscreen
|
||||
|
||||
# 标准启动
|
||||
python run.py
|
||||
|
||||
# 或使用优化启动脚本
|
||||
python bigScreen/run_bigscreen.py
|
||||
|
||||
# 启动所有服务（包括Celery）
|
||||
./start_all.sh
|
||||
```
|
||||
|
||||
### Docker部署
|
||||
|
||||
```bash
|
||||
# 生成Docker Compose配置
|
||||
cd bigscreen
|
||||
./generate-docker-compose.sh
|
||||
|
||||
# 启动服务
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
## 📊 核心功能
|
||||
|
||||
- **🔥 CPU自适应批处理系统**：动态调整批处理规模，支持高并发数据处理
|
||||
- **⚡ 三接口智能上传**：health_data、device_info、common_event独立处理
|
||||
- **🛡️ 断点续传机制**：网络异常时数据自动缓存，确保零丢失
|
||||
- **📊 实时监控大屏**：ECharts.js驱动的专业数据可视化
|
||||
- **🚨 智能告警系统**：微信推送 + WebSocket实时通知
|
||||
- **🐳 多架构Docker支持**：AMD64/ARM64一键部署
|
||||
|
||||
## 🔗 访问地址
|
||||
|
||||
- **主大屏**：http://localhost:5001/main?customerId=1
|
||||
- **系统监控**：http://localhost:5001/system_monitor
|
||||
- **性能测试**：http://localhost:5001/performance_test_report
|
||||
- **健康检查**：http://localhost:5001/api/health_check
|
||||
|
||||
## 📋 目录结构
|
||||
|
||||
```
|
||||
ljwx-bigscreen/
|
||||
├── bigscreen/ # 主应用目录
|
||||
│ ├── bigScreen/ # Flask应用核心
|
||||
│ │ ├── bigScreen.py # 主应用文件
|
||||
│ │ ├── templates/ # HTML模板
|
||||
│ │ ├── static/ # 静态资源
|
||||
│ │ └── *_processor.py # 批处理器
|
||||
│ ├── run.py # 应用入口
|
||||
│ ├── config.py # 配置文件
|
||||
│ ├── requirements.txt # Python依赖
|
||||
│ └── README.md # 详细文档
|
||||
├── scripts/ # 部署脚本
|
||||
├── k8s/ # Kubernetes配置
|
||||
├── tests/ # 测试框架
|
||||
└── docs/ # 项目文档
|
||||
```
|
||||
|
||||
## 🔧 环境要求
|
||||
|
||||
- Python 3.8+
|
||||
- MySQL 5.7+
|
||||
- Redis 6.0+
|
||||
- Docker 20.10+ (可选)
|
||||
|
||||
## 📈 性能指标
|
||||
|
||||
- **支持设备数**：2000+台
|
||||
- **数据处理能力**：1400+ QPS
|
||||
- **响应时间**：<3秒
|
||||
- **系统稳定性**：99.9%+
|
||||
|
||||
## 🆕 最新更新 v1.3.5
|
||||
|
||||
### UI交互优化与事件处理修复
|
||||
|
||||
- **修复面板点击冲突**：解决实时统计面板错误触发人员筛选面板的问题
|
||||
- **事件处理优化**：完善全局点击事件监听器的条件判断逻辑
|
||||
- **界面响应优化**：提升面板交互的精确性和稳定性
|
||||
|
||||
## 📚 详细文档
|
||||
|
||||
完整的技术文档、API接口说明、部署指南等请查看：
|
||||
|
||||
**👉 [详细文档](bigscreen/README.md)**
|
||||
|
||||
## 🤝 技术支持
|
||||
|
||||
- **项目主页**：[GitHub Repository](https://github.com/your-org/ljwx-bigscreen)
|
||||
- **问题反馈**：[Issues](https://github.com/your-org/ljwx-bigscreen/issues)
|
||||
- **在线演示**：http://localhost:5001/main?customerId=1
|
||||
|
||||
## 🔗 相关项目
|
||||
|
||||
- [ljwx-watch](../ljwx-watch) - 智能手表系统
|
||||
- [ljwx-phone](../ljwx-phone) - 手机客户端
|
||||
- [ljwx-admin](../ljwx-admin) - 管理后台
|
||||
- [ljwx-boot](../ljwx-boot) - Spring Boot后端服务
|
||||
|
||||
---
|
||||
|
||||
*最后更新：2025年8月26日*
|
||||
@@ -1,9 +1,9 @@
|
||||
# LJWX BigScreen 健康监控大屏系统 v1.3.4
|
||||
# LJWX BigScreen 健康监控大屏系统 v1.3.5
|
||||
|
||||
[](https://python.org/)
|
||||
[](https://flask.palletsprojects.com/)
|
||||
[](https://docker.com/)
|
||||
[](https://github.com/your-org/ljwx-bigscreen)
|
||||
[](https://github.com/your-org/ljwx-bigscreen)
|
||||
[](LICENSE)
|
||||
|
||||
## 📋 项目概述
|
||||
@@ -20,16 +20,44 @@ LJWX BigScreen 是一个专为工业环境设计的实时健康监控大屏系
|
||||
- **🐳 多架构Docker支持**：AMD64/ARM64一键部署
|
||||
- **📈 性能监控面板**：实时系统状态和性能指标
|
||||
|
||||
## 🆕 最新更新 v1.3.4
|
||||
## 🆕 最新更新 v1.3.5
|
||||
|
||||
### 🎯 健康数据源区分系统
|
||||
### 🎯 UI交互优化与事件处理修复
|
||||
|
||||
**核心功能**：智能区分不同来源的健康数据，确保前端显示数据的准确性
|
||||
**核心功能**：修复大屏界面交互问题，优化用户操作体验
|
||||
|
||||
**主要改进**：
|
||||
- **数据源标识**：为通过 `upload_common_event` 上传的健康数据添加 `upload_method: "common_event"` 标识
|
||||
- **前端过滤**：管理端健康数据查看时自动过滤事件相关数据，仅显示正常健康监测数据
|
||||
- **增强调试**：添加详细的健康数据解析调试输出，支持多种数据结构格式
|
||||
- **修复面板点击冲突**：解决实时统计面板错误触发人员筛选面板的问题
|
||||
- **事件处理优化**：完善全局点击事件监听器的条件判断逻辑
|
||||
- **界面响应优化**：提升面板交互的精确性和稳定性
|
||||
- **调试体验改善**：减少误触发，提高用户操作准确性
|
||||
|
||||
**技术修复细节**：
|
||||
```javascript
|
||||
// 修复前：错误的条件判断
|
||||
if (!filterPanel.contains(event.target) &&
|
||||
!filterToggle.contains(event.target) &&
|
||||
!filterPanel.classList.contains('collapsed')) { // ❌ 错误逻辑
|
||||
toggleFilter();
|
||||
}
|
||||
|
||||
// 修复后：正确的条件判断
|
||||
if (!filterPanel.contains(event.target) &&
|
||||
!filterToggle.contains(event.target) &&
|
||||
filterPanel.classList.contains('expanded')) { // ✅ 正确逻辑
|
||||
toggleFilter();
|
||||
}
|
||||
```
|
||||
|
||||
**问题解决**：
|
||||
- **根因分析**：全局点击事件监听器使用了错误的CSS类检查条件
|
||||
- **影响范围**：点击任意面板都会意外触发人员筛选功能
|
||||
- **修复效果**：现在只有在筛选面板展开时，点击外部才会关闭筛选面板
|
||||
- **用户体验**：实时统计面板等其他面板点击不再产生副作用
|
||||
|
||||
### 🎯 v1.3.4 健康数据源区分系统回顾
|
||||
|
||||
**核心功能**：智能区分不同来源的健康数据，确保前端显示数据的准确性
|
||||
|
||||
**技术实现**：
|
||||
```python
|
||||
@@ -348,6 +376,32 @@ python analyze_db_performance.py
|
||||
2. **导入错误**：使用 `run_bigscreen.py` 确保正确的Python路径
|
||||
3. **JavaScript错误**：查看 `fix_js_errors.html` 全局错误处理
|
||||
4. **Redis连接**：检查Redis密码配置和认证设置
|
||||
5. **UI交互问题**：检查全局点击事件监听器的条件判断逻辑
|
||||
|
||||
### UI调试指南
|
||||
|
||||
**面板点击事件调试**：
|
||||
```javascript
|
||||
// 检查筛选面板状态
|
||||
const filterPanel = document.querySelector('.filter-panel');
|
||||
console.log('筛选面板状态:', {
|
||||
isExpanded: filterPanel.classList.contains('expanded'),
|
||||
isCollapsed: filterPanel.classList.contains('collapsed'),
|
||||
classList: filterPanel.classList.toString()
|
||||
});
|
||||
|
||||
// 调试点击事件
|
||||
document.addEventListener('click', function(event) {
|
||||
console.log('点击目标:', event.target);
|
||||
console.log('是否在筛选面板内:', filterPanel.contains(event.target));
|
||||
});
|
||||
```
|
||||
|
||||
**面板交互最佳实践**：
|
||||
- 确保面板点击事件不会互相冲突
|
||||
- 使用正确的CSS类名进行状态检查
|
||||
- 添加事件停止冒泡防止意外触发
|
||||
- 测试不同面板的点击响应
|
||||
|
||||
## 🧪 测试系统
|
||||
|
||||
@@ -504,5 +558,5 @@ EVENT_MAX_WORKERS = cpu_cores * 1
|
||||
|
||||
---
|
||||
|
||||
*最后更新：2025年8月25日*
|
||||
*当前版本：v1.3.4 - 健康数据源智能区分系统*
|
||||
*最后更新：2025年8月26日*
|
||||
*当前版本：v1.3.5 - UI交互优化与事件处理修复*
|
||||
@@ -3441,7 +3441,7 @@ document.addEventListener('click', function(event) {
|
||||
// 如果点击的不是筛选面板内的元素且面板是展开的
|
||||
if (!filterPanel.contains(event.target) &&
|
||||
!filterToggle.contains(event.target) &&
|
||||
!filterPanel.classList.contains('collapsed')) {
|
||||
filterPanel.classList.contains('expanded')) {
|
||||
toggleFilter();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user