ljwx-health/ljwx-bigscreen/PHASE6_ANALYSIS.md

Phase 6 优化分析 - JS 模块化方案

1. 主要入口函数分析

1.1 initCharts() - 图表初始化 (Line 476-1038, 562行)

功能：初始化所有 ECharts 图表实例

包含的图表：

• healthScore - 健康评分雷达图 (Line 490-614)
• stats - 统计柱状图 (Line 616-797)
• trend - 趋势折线图 (Line 799-945)
• messageStats - 消息统计图表 (Line 978-1027)

依赖：

• echarts 库
• api.health.getScore() - API 客户端
• formatDate() - 工具函数
• GLOBAL_CUSTOMER_ID - 全局配置

调用位置：

• Line 1043: document.addEventListener('DOMContentLoaded') 中调用

---

1.2 refreshData() - 数据刷新 (Line 2788-2893, 106行)

功能：刷新所有数据并更新 UI

主要流程：

1. 调用 loadBaselineTrendChart() - 加载基线趋势图
2. 调用 loadHealthScoreChart() - 加载健康评分图
3. 调用 updateRealtimeStats() - 更新实时统计
4. 并行获取数据：
   • api.data.getTotal() - 总体信息
   • api.statistics.getOverview() - 统计概览
   • api.data.getAlerts() - 告警数据
   • api.data.getMessages() - 消息数据
   • api.data.getDevices() - 设备数据
5. 数据融合后更新 Alert/Device 卡片

依赖：

• API 客户端模块
• Alert Panel 模块（待提取）
• Device Panel 模块（待提取）
• Message Panel 模块（待提取）

调用位置：

• Line 1047: document.addEventListener('DOMContentLoaded') 中延迟调用
• Line 1051: setInterval() 定时调用（每30秒）

---

2. 业务 Panel 模块分析

2.1 Alert Panel - 告警面板

核心函数：

• initAlertChart(data) - Line 3123: 初始化告警图表
  • 范围：3123-3816 (694行)
  • 功能：创建告警图表、处理告警数据、渲染告警列表

相关函数：

• openAlertPanel() - Line 1293: 打开告警弹窗
• closeAlertPanel() - Line 1297: 关闭告警弹窗
• initAlertList(data) - Line 1074: 初始化告警列表
• addAlertClickEvents() - Line 1275: 添加点击事件
• dealAlert(alertId) - Line 1733: 处理告警

DOM 元素：

• #alertChart - 告警图表容器
• #alertList - 告警列表容器
• #alertPanel - 告警弹窗面板

数据来源：

• api.data.getAlerts()
• refreshData() 中的 alerts 数据

---

2.2 Device Panel - 设备面板

核心函数：

• initDeviceChart(data) - Line 3817: 初始化设备图表
  • 范围：3817-4383 (567行)
  • 功能：创建设备图表、渲染设备列表、处理设备状态

相关函数：

• openDevicePanel() - Line 1413: 打开设备弹窗
• closeDevicePanel() - Line 1417: 关闭设备弹窗
• initDeviceList(data) - Line 1126: 初始化设备列表
• addDeviceClickEvents() - Line 1328: 添加点击事件

DOM 元素：

• #deviceChart - 设备图表容器
• #deviceList - 设备列表容器
• #devicePanel - 设备弹窗面板

数据来源：

• api.data.getDevices()
• refreshData() 中的 devices 数据

---

2.3 Message Panel - 消息面板

核心函数：

• initMessageList(data) - Line 1056: 初始化消息列表
  • 范围：1056-1123 (68行)
• loadMessageCard() - Line 6889: 加载消息卡片
  • 范围：6889-6915 (27行)
• updateMessageCard(messages) - Line 6917: 更新消息卡片
  • 范围：6917-6939 (23行)
• updateMessageCardFallback() - Line 6941: 消息卡片降级处理
  • 范围：6941-6952 (12行)

相关函数：

• openMessagePanel() - Line 1401: 打开消息弹窗
• closeMessagePanel() - Line 1405: 关闭消息弹窗
• addMessageClickEvents() - Line 1406: 添加点击事件
• getMessageTypeClass(messageType) - Line 6954: 获取消息类型样式

DOM 元素：

• #messageStatsChart - 消息统计图表（在 initCharts 中初始化）
• #messageList - 消息列表容器
• #messagePanel - 消息弹窗面板
• #messageCard - 消息卡片容器

数据来源：

• api.data.getMessages()
• refreshData() 中的 messages 数据

---

3. 实时统计模块

3.1 updateRealtimeStats() - Line 6326

范围：6326-6709 (384行)

功能：

• 获取实时统计数据
• 更新统计卡片 UI
• 处理健康建议
• 更新地图显示

依赖：

• api.statistics.getOverview()
• updateHealthRecommendations() - 健康建议更新

DOM 元素：

• #totalUsers - 总用户数
• #activeUsers - 活跃用户数
• #totalAlerts - 总告警数
• #criticalAlerts - 严重告警数
• 健康建议相关元素

---

4. document.addEventListener 调用统计

找到 8 处 document.addEventListener 调用：

1. Line 395: DOMContentLoaded - 初始化 customerId
2. Line 1041: DOMContentLoaded - 调用 initCharts() 和 refreshData()
3. Line 1873: click - 全局点击事件处理
4. Line 2998: DOMContentLoaded - WebSocket 连接初始化
5. Line 3796: keydown - ESC 键关闭弹窗
6. Line 4381: keydown - ESC 键处理（重复）
7. Line 6701: DOMContentLoaded - 加载消息卡片
8. Line 7017: DOMContentLoaded - 地图相关初始化

优化建议：合并所有 DOMContentLoaded 事件监听器到一个统一的初始化函数中。

---

5. 模块化方案建议

Phase 6: 统一事件监听和初始化模块

• 文件：app-initializer.js
• 内容：
  • 合并所有 DOMContentLoaded 监听器
  • 统一初始化流程
  • 全局事件绑定（click, keydown）
• 预计减少：~50 行（去重和优化）

Phase 7: Alert Panel 模块

• 文件：alert-panel.js
• 内容：
  • initAlertChart()
  • initAlertList()
  • openAlertPanel(), closeAlertPanel()
  • dealAlert()
  • 所有告警相关函数
• 预计提取：~800 行

Phase 8: Device Panel 模块

• 文件：device-panel.js
• 内容：
  • initDeviceChart()
  • initDeviceList()
  • openDevicePanel(), closeDevicePanel()
  • 所有设备相关函数
• 预计提取：~650 行

Phase 9: Message Panel 模块

• 文件：message-panel.js
• 内容：
  • initMessageList()
  • loadMessageCard(), updateMessageCard()
  • openMessagePanel(), closeMessagePanel()
  • 所有消息相关函数
• 预计提取：~150 行

Phase 10: Charts 初始化模块

• 文件：charts-initializer.js
• 内容：
  • initCharts() 主函数
  • loadBaselineTrendChart()
  • loadHealthScoreChart()
  • 图表配置和初始化逻辑
• 预计提取：~700 行

Phase 11: 实时统计模块

• 文件：realtime-stats.js
• 内容：
  • updateRealtimeStats()
  • updateHealthRecommendations()
  • 统计数据处理逻辑
• 预计提取：~400 行

Phase 12: 数据刷新协调器

• 文件：data-coordinator.js
• 内容：
  • refreshData() 主函数
  • 数据获取和分发逻辑
  • 定时刷新控制
• 预计提取：~150 行

Phase 13: 地图模块（最后）

• 文件：map-controller.js
• 内容：
  • 地图初始化
  • 地图数据更新
  • 地图交互逻辑
• 预计提取：~1400 行

---

6. 总结

当前代码结构：

• main.html: 7,146 行（Phase 5 完成后）
• 已提取模块：
  • utils.js: 78 行
  • api-client.js: 379 行

预计优化成果（Phase 6-13）：

• 提取代码总计：~4,300 行
• main.html 最终目标：~2,800 行
• 新增模块：11 个独立 JS 文件

优化优先级（按依赖关系和复杂度）：

1. ⭐ Phase 6: 事件监听和初始化（基础设施）
2. ⭐⭐ Phase 7: Alert Panel（业务模块）
3. ⭐⭐ Phase 8: Device Panel（业务模块）
4. ⭐ Phase 9: Message Panel（业务模块）
5. ⭐⭐⭐ Phase 10: Charts 初始化（复杂图表逻辑）
6. ⭐⭐ Phase 11: 实时统计（数据处理）
7. ⭐⭐ Phase 12: 数据刷新协调器（核心协调）
8. ⭐⭐⭐⭐⭐ Phase 13: 地图模块（最复杂，最后处理）