EdgeX 文档

前端集成修复报告

问题诊断

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

  • 后端已重构为三级架构 (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. 添加历史数据查询

修复时间

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