From 1c3ee7693bbae5077c46fb643ca7f7132ff6d1e3 Mon Sep 17 00:00:00 2001 From: BrunoGao Date: Tue, 26 Aug 2025 16:00:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20UI=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=B8=8E=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0=20v1.3.5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 主要功能： - 修复实时统计面板错误触发人员筛选面板的交互问题 - 优化全局点击事件监听器的条件判断逻辑 - 完善面板交互的精确性和稳定性 技术修复： - 修正全局点击事件中的CSS类检查条件 - 从错误的'collapsed'检查改为正确的'expanded'检查 - 确保只有筛选面板展开时点击外部才会关闭 - 消除不同面板间的点击事件冲突 文档更新： - 新增根目录README.md文件提供快速入门指南 - 更新详细README添加UI交互优化章节 - 增加面板交互调试指南和最佳实践 - 版本号升级至v1.3.5，更新日期至2025年8月26日 用户体验改进： - 实时统计面板点击不再意外触发其他功能 - 减少误操作，提高界面交互准确性 - 优化大屏系统的整体用户操作体验 --- ljwx-bigscreen/README.md | 119 ++++++++++++++++++ ljwx-bigscreen/bigscreen/README.md | 74 +++++++++-- .../bigScreen/templates/bigscreen_main.html | 2 +- 3 files changed, 184 insertions(+), 11 deletions(-) create mode 100644 ljwx-bigscreen/README.md diff --git a/ljwx-bigscreen/README.md b/ljwx-bigscreen/README.md new file mode 100644 index 0000000..33a78f6 --- /dev/null +++ b/ljwx-bigscreen/README.md @@ -0,0 +1,119 @@ +# LJWX BigScreen 健康监控大屏系统 + +[![Python](https://img.shields.io/badge/Python-3.8+-blue.svg)](https://python.org/) +[![Flask](https://img.shields.io/badge/Flask-2.0+-green.svg)](https://flask.palletsprojects.com/) +[![Docker](https://img.shields.io/badge/Docker-支持多架构-blue.svg)](https://docker.com/) +[![版本](https://img.shields.io/badge/version-1.3.5-green.svg)](https://github.com/your-org/ljwx-bigscreen) +[![许可证](https://img.shields.io/badge/license-MIT-blue.svg)](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日* \ No newline at end of file diff --git a/ljwx-bigscreen/bigscreen/README.md b/ljwx-bigscreen/bigscreen/README.md index ccb3f30..6d35a1f 100644 --- a/ljwx-bigscreen/bigscreen/README.md +++ b/ljwx-bigscreen/bigscreen/README.md @@ -1,9 +1,9 @@ -# LJWX BigScreen 健康监控大屏系统 v1.3.4 +# LJWX BigScreen 健康监控大屏系统 v1.3.5 [![Python](https://img.shields.io/badge/Python-3.8+-blue.svg)](https://python.org/) [![Flask](https://img.shields.io/badge/Flask-2.0+-green.svg)](https://flask.palletsprojects.com/) [![Docker](https://img.shields.io/badge/Docker-支持多架构-blue.svg)](https://docker.com/) -[![版本](https://img.shields.io/badge/version-1.3.4-green.svg)](https://github.com/your-org/ljwx-bigscreen) +[![版本](https://img.shields.io/badge/version-1.3.5-green.svg)](https://github.com/your-org/ljwx-bigscreen) [![许可证](https://img.shields.io/badge/license-MIT-blue.svg)](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 - 健康数据源智能区分系统* \ No newline at end of file +*最后更新：2025年8月26日* +*当前版本：v1.3.5 - UI交互优化与事件处理修复* \ No newline at end of file diff --git a/ljwx-bigscreen/bigscreen/bigScreen/templates/bigscreen_main.html b/ljwx-bigscreen/bigscreen/bigScreen/templates/bigscreen_main.html index 61351cc..78f88af 100644 --- a/ljwx-bigscreen/bigscreen/bigScreen/templates/bigscreen_main.html +++ b/ljwx-bigscreen/bigscreen/bigScreen/templates/bigscreen_main.html @@ -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(); } });