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