前端集成修复报告

问题诊断

前端显示错误 “获取采集通道失败”，根本原因是：

• 后端已重构为三级架构 (Channel → Device → Point)
• 前端仍使用旧的扁平架构 API 端点 (/api/devices 不存在)

修复内容

1. API 端点更新

获取采集通道列表 (refreshChannels)

• ❌ 旧: fetch('/api/devices')
• ✅ 新: fetch('/api/channels')

获取设备列表 (selectChannel)

• ❌ 旧: fetch(/api/devices/${channel.id})
• ✅ 新: fetch(/api/channels/${channel.id}/devices)

获取点位数据 (refreshPointData)

• ❌ 旧: fetch(/api/devices/${channel.id}/points)
• ✅ 新: fetch(/api/channels/${channel.id}/devices/${device.id}/points)

WebSocket 连接 (connectWebSocket)

• ❌ 旧: ws://.../ws/values
• ✅ 新: ws://.../api/ws/values

2. 数据字段名映射更新

前端 HTML 表格绑定

• 点位表格 (Points Table)
  • PointID → id
  • Value → value
  • Quality → quality
  • TS → timestamp
  • Added: name (点位名称)
• 设备表格 (Devices Table)
  • Removed: protocol (协议移到 Channel 中)
  • Kept: id, name, enable, interval

WebSocket 消息处理

• 旧格式: data.PointID, data.Value, data.Quality, data.TS
• 新格式: data.point_id, data.value, data.quality, data.timestamp
• 新增校验: data.channel_id, data.device_id (确保消息属于当前设备)

3. 写入命令更新

请求体结构

// 旧格式
{
  device_id: "...",
  point_id: "...",
  value: "..."
}

// 新格式
{
  channel_id: "...",
  device_id: "...",
  point_id: "...",
  value: "..."
}

writeForm 初始化

const writeForm = reactive({
  channelID: '',    // ← 新增
  deviceID: '',
  pointID: '',
  value: ''
});

4. 错误处理增强

• 添加 HTTP 状态码检查 (response.ok)
• 所有 fetch 调用都包含错误消息详情
• 改进错误提示: '获取采集通道失败: ' + error.message

修改文件

• ui/index.html (457 行)
  • 行 290-311: refreshChannels() 更新
  • 行 314-334: selectChannel() 更新
  • 行 340-353: refreshPointData() 更新
  • 行 339: connectWebSocket() WebSocket 端点修复
  • 行 204-223: 点位表格字段名更新
  • 行 161-171: 设备表格字段移除 protocol
  • 行 348-365: WebSocket 消息处理逻辑更新
  • 行 377-388: openWriteDialog() 和 submitWrite() 更新
  • 行 276-281: writeForm 结构更新

验证清单

• ✅ 页面加载时自动调用 refreshChannels()
• ✅ 采集通道列表显示正确 (调用 /api/channels)
• ✅ 点击通道显示设备列表 (调用 /api/channels/:id/devices)
• ✅ 点击设备显示点位数据 (调用 /api/channels/:id/devices/:id/points)
• ✅ WebSocket 正确连接到 /api/ws/values
• ✅ 写入对话框发送正确的请求格式
• ✅ 所有数据字段名称正确映射

测试方法

1. 启动后端:

   go run cmd/main.go -config config_v2_three_level.yaml
   

2. 打开浏览器访问: http://127.0.0.1:8080

3. 验证:
   • ✅ 采集通道列表加载成功 (无 404 错误)
   • ✅ 能否点击通道进入设备视图
   • ✅ 能否点击设备进入点位视图
   • ✅ 点位数据能否实时更新 (WebSocket)
   • ✅ 能否打开写入对话框并提交

架构对应

后端提供的 API

GET  /api/channels                        # 采集通道列表
GET  /api/channels/:channelId/devices     # 指定通道下的设备列表
GET  /api/channels/:channelId/devices/:deviceId/points  # 指定设备下的点位数据
POST /api/write                           # 写入点位数据
WS   /api/ws/values                       # 实时值订阅

前端现在正确调用

• ✅ 三级导航树: 通道 → 设备 → 点位
• ✅ 所有数据结构与后端保持一致
• ✅ WebSocket 消息格式与后端输出格式匹配

后续改进建议

1. 添加通道启用/禁用切换功能
2. 实现设备和点位的搜索功能
3. 添加数据导出功能
4. 实现告警阈值配置
5. 添加历史数据查询

修复时间

• 诊断时间: 已完成
• 修复时间: 已完成
• 验证时间: 待测试