From e0fc2bc0a14ea48ed84eb7d134f8c71109e35907 Mon Sep 17 00:00:00 2001 From: BrunoGao Date: Tue, 26 Aug 2025 16:20:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AA=E4=BA=BA=E5=A4=A7=E5=B1=8FUI?= =?UTF-8?q?=E7=8E=B0=E4=BB=A3=E5=8C=96=E6=94=B9=E9=80=A0=20v1.3.5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重大功能升级： - 全面重构个人健康大屏界面，提供现代化、专业且科技感的用户体验 - 完整替换传统布局，采用响应式CSS Grid网格系统 核心UI改进： - 现代化网格布局：3栏自适应网格，左右侧栏350px，中央区域自适应 - 高科技视觉设计：深蓝渐变背景 + 动态粒子动画效果 - 扫描线动画：卡片顶部动态扫描线，营造未来科技感 - 磨砂玻璃效果：backdrop-filter模糊背景，半透明卡片设计 高级交互组件： - 高级仪表盘：ECharts圆环仪表盘 + 中央数值显示 - 智能状态指示器：健康状态实时监控（正常/警告/危险） - 流畅动画系统：脉冲、呼吸灯、悬停等多种专业动画 - 响应式卡片：悬停上浮效果 + 发光边框动画 技术架构优化： - 统一图表实例管理：chartInstances对象集中管理ECharts实例 - WebSocket实时推送：支持health_data_update事件实时更新 - 性能优化：窗口resize时自动调整图表尺寸 - 错误处理：全局错误捕获和日志记录 响应式设计： - 1440px以下：侧栏320px自适应 - 1024px以下：改为单栏垂直布局 - 完善的移动端适配支持 文档更新： - 更新README.md记录UI现代化改造详情 - 增加技术特性和性能优化说明 - 保留原始模板为personal_backup.html备份 用户体验提升： - 专业级健康监控界面 - 实时数据可视化展示 - 直观的健康状态指示 - 流畅的交互动画效果 --- ljwx-bigscreen/README.md | 11 +- ljwx-bigscreen/bigscreen/README.md | 22 +- .../bigScreen/templates/personal.html | 4382 +++++------------ .../bigScreen/templates/personal_backup.html | 3410 +++++++++++++ 4 files changed, 4570 insertions(+), 3255 deletions(-) create mode 100644 ljwx-bigscreen/bigscreen/bigScreen/templates/personal_backup.html diff --git a/ljwx-bigscreen/README.md b/ljwx-bigscreen/README.md index 33a78f6..71d7bb5 100644 --- a/ljwx-bigscreen/README.md +++ b/ljwx-bigscreen/README.md @@ -89,11 +89,14 @@ ljwx-bigscreen/ ## 🆕 最新更新 v1.3.5 -### UI交互优化与事件处理修复 +### 个人大屏UI现代化改造 -- **修复面板点击冲突**：解决实时统计面板错误触发人员筛选面板的问题 -- **事件处理优化**：完善全局点击事件监听器的条件判断逻辑 -- **界面响应优化**：提升面板交互的精确性和稳定性 +- **现代化网格布局**：采用CSS Grid响应式布局，替代传统左右分栏 +- **高科技视觉设计**：渐变背景、动画粒子、扫描线效果营造科技感 +- **高级仪表盘组件**：环形进度条配合数值显示，支持状态色彩变化 +- **智能状态指示器**：实时健康状态监控，支持正常/警告/危险三级显示 +- **流畅动画系统**：呼吸灯、脉冲、扫描等多种专业动画效果 +- **现代化卡片设计**：磨砂玻璃效果、悬停动画、立体阴影 ## 📚 详细文档 diff --git a/ljwx-bigscreen/bigscreen/README.md b/ljwx-bigscreen/bigscreen/README.md index 6d35a1f..924dd2f 100644 --- a/ljwx-bigscreen/bigscreen/README.md +++ b/ljwx-bigscreen/bigscreen/README.md @@ -22,15 +22,25 @@ LJWX BigScreen 是一个专为工业环境设计的实时健康监控大屏系 ## 🆕 最新更新 v1.3.5 -### 🎯 UI交互优化与事件处理修复 +### 🎯 个人大屏UI现代化改造 -**核心功能**：修复大屏界面交互问题，优化用户操作体验 +**核心功能**：全面重构个人健康大屏界面，提供现代化、专业且具有科技感的用户体验 **主要改进**： -- **修复面板点击冲突**：解决实时统计面板错误触发人员筛选面板的问题 -- **事件处理优化**：完善全局点击事件监听器的条件判断逻辑 -- **界面响应优化**：提升面板交互的精确性和稳定性 -- **调试体验改善**：减少误触发，提高用户操作准确性 +- **现代化网格布局**：采用CSS Grid响应式布局，替代传统左右分栏 +- **高科技视觉设计**：渐变背景、动画粒子、扫描线效果营造科技感 +- **高级仪表盘组件**：环形进度条配合数值显示，支持状态色彩变化 +- **智能状态指示器**：实时健康状态监控，支持正常/警告/危险三级显示 +- **流畅动画系统**：呼吸灯、脉冲、扫描等多种专业动画效果 +- **现代化卡片设计**：磨砂玻璃效果、悬停动画、立体阴影 +- **响应式适配**：完善的响应式设计，支持多种屏幕尺寸 + +**技术特性**： +- **CSS Grid布局**：3栏网格系统，左右侧栏350px，中央自适应 +- **动态背景粒子**：CSS动画实现的星空粒子效果 +- **ECharts集成**：现代化仪表盘和趋势图表 +- **WebSocket支持**：实时数据推送更新 +- **性能优化**：统一的图表实例管理和内存优化 **技术修复细节**： ```javascript diff --git a/ljwx-bigscreen/bigscreen/bigScreen/templates/personal.html b/ljwx-bigscreen/bigscreen/bigScreen/templates/personal.html index 775f206..e3a26c8 100644 --- a/ljwx-bigscreen/bigscreen/bigScreen/templates/personal.html +++ b/ljwx-bigscreen/bigscreen/bigScreen/templates/personal.html @@ -1,3410 +1,1302 @@ - - - + + - - 智能穿戴管理演示大屏 - - - + + 智能穿戴个人健康大屏 v1.3.5 + + - - - - -
-
- -
-
-
📊 实时统计
-
-
- -
-
-
📊
-
0
-
健康数据
-
- -
-
⚠️
-
0
-
待处理告警
-
- -
-
📱
-
1
-
设备状态
-
- -
-
💬
-
0
-
未读消息
+
+
+ +
+
+ +
+
智能健康监控
+
个人健康大屏 v1.3.5
- -
-
+
+
-
健康状态
+ 设备在线
-
95
+
-
- - - -
-
实时体征数据
- -
-
-
💓 实时心率
-
-
- -
82
-
-
- -
-
-
-
🩸 实时血氧
-
-
- -
98%
-
-
- -
-
-
- -
-
-
💉 实时血压
-
-
- -
120/80
-
-
- -
-
-
-
🌡️ 实时体温
-
-
- -
36.8°C
-
-
- -
-
-
-
- - - -
-
告警信息 点击查看 ▶
-
- - - - - - - - - - - - -
告警类型告警级别告警时间操作
-
-
- -
+
-
-
{{ BIGSCREEN_TITLE }}
- -
-
- - + +
- - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/ljwx-bigscreen/bigscreen/bigScreen/templates/personal_backup.html b/ljwx-bigscreen/bigscreen/bigScreen/templates/personal_backup.html new file mode 100644 index 0000000..775f206 --- /dev/null +++ b/ljwx-bigscreen/bigscreen/bigScreen/templates/personal_backup.html @@ -0,0 +1,3410 @@ + + + + + + + 智能穿戴管理演示大屏 + + + + + + + + + + + + + +
+
+ +
+
+
📊 实时统计
+
+
+ +
+
+
📊
+
0
+
健康数据
+
+ +
+
⚠️
+
0
+
待处理告警
+
+ +
+
📱
+
1
+
设备状态
+
+ +
+
💬
+
0
+
未读消息
+
+
+ +
+
+
+
健康状态
+
+
95
+
+
+ + + +
+
实时体征数据
+ +
+
+
💓 实时心率
+
+
+ +
82
+
+
+ +
+
+
+
🩸 实时血氧
+
+
+ +
98%
+
+
+ +
+
+
+ +
+
+
💉 实时血压
+
+
+ +
120/80
+
+
+ +
+
+
+
🌡️ 实时体温
+
+
+ +
36.8°C
+
+
+ +
+
+
+
+ + + +
+
告警信息 点击查看 ▶
+
+ + + + + + + + + + + + +
告警类型告警级别告警时间操作
+
+
+ +
+ +
+
{{ BIGSCREEN_TITLE }}
+ +
+
+ + + +
+
+ +
+
+ +
+ + +
+ +
+ +
+ +
+ +
+
设备状态 点击查看 ▶
+ +
+
+ +
+
+
👤 佩戴
+
未知
+
+ +
+
+
🔋 充电
+
未知
+
+ +
+
+
📡 在线
+
未知
+
+ +
+
+
⚠️ 告警
+
无告警
+
+
+
+ + +
+
历史趋势
+
+
+
+ + + +
+
+
💬 消息通知
+
0
+
+
+
+ +
+
+
点击查看详情 ▶
+
+ + + +
+
健康画像 点击分析 ▶
+ + +
+
+
96.6
+
总评分
+
+
+
优秀
+
健康状态
+
+
+ + +
+
+ + + + + +
+ +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file