219 lines
7.6 KiB
Markdown
219 lines
7.6 KiB
Markdown
# warehouse 客户端改造 — 任务清单
|
||
|
||
> **基准文档**: 客户端改造方案 v1.0
|
||
> **分支**: gateway-dev
|
||
> **原则**: 改动仅在 warehouse/ 目录下，不影响 VolPro 管理端
|
||
|
||
---
|
||
|
||
## Phase W0: 基础设施（预计 0.5h）
|
||
|
||
### W0.1 网关 API 封装
|
||
- [ ] 创建 `warehouse/src/api/gateway.ts`
|
||
- 实现 `gwGet(url)` — GET 请求网关
|
||
- 实现 `gwPost(url, body)` — POST 请求网关
|
||
- 网关基址常量 `GW_BASE = 'http://localhost:5100'`
|
||
|
||
### W0.2 设备数据模型
|
||
- [ ] 在 `warehouse/src/api/gateway.ts` 中定义 TypeScript 接口：
|
||
- `Camera { id, name, location, status, adapterCode, streamUrl, hasPtz }`
|
||
- `StandardDevice { deviceId, adapterCode, sourceId, deviceName, deviceCategory, deviceGroup, isOnline, ... }`
|
||
- `StreamUrls { wsFlv, httpFlv, hls, ... }`
|
||
|
||
### W0.3 网关 CORS 确认
|
||
- [ ] 确认网关 `Program.cs` 中已启用 CORS（`AllowAnyOrigin` 或 `AllowCredentials`）
|
||
- [ ] 如未启用，在网关 `Program.cs` 中加 `builder.Services.AddCors()` + `app.UseCors()`
|
||
|
||
### W0.4 构建验证
|
||
- [ ] `npm run dev` 启动 warehouse，确认无编译错误
|
||
|
||
> **W0 提交点**: `PhaseW0_infra — gateway.ts + 数据模型 + CORS 就绪`
|
||
|
||
---
|
||
|
||
## Phase W1: 实时视频页改造（预计 2h）
|
||
|
||
### W1.1 获取真实摄像机列表
|
||
- [ ] 编辑 `warehouse/src/view/video/Live.vue`
|
||
- [ ] `onMounted` 中调用 `gwGet('/api/gateway/devices?adapter=Owl:main&page=1&size=100')`
|
||
- [ ] 将 `StandardDevice[]` 映射到 `Camera[]`
|
||
- [ ] 替换硬编码的 5 台 Mock 摄像机
|
||
- [ ] 保留在线/离线统计计算逻辑
|
||
|
||
### W1.2 视频流播放
|
||
- [ ] 选中摄像机时调用 `gwGet('/api/gateway/streams/{adapterCode}/{sourceId}/live')`
|
||
- [ ] 获取 WS-FLV 地址后赋值给 `<video>` 标签的 `src`
|
||
- [ ] 替换当前占位 `<div class="video-placeholder">`
|
||
|
||
### W1.3 云台控制面板
|
||
- [ ] 在视频画面旁边增加云台方向键区域（↑↓←→ + ZOOM + 停止）
|
||
- [ ] 调用 `gwPost('/api/gateway/streams/{adapter}/{id}/ptz', { direction, action, speed })`
|
||
- [ ] mouseup/mouseleave 时发送 stop
|
||
|
||
### W1.4 构建验证
|
||
- [ ] 页面加载 → 显示真实 Owl 摄像机列表
|
||
- [ ] 点击摄像机 → 播放实时视频流
|
||
- [ ] 方向键 → Owl PTZ 响应
|
||
|
||
> **W1 提交点**: `PhaseW1_video_live — 真实摄像机列表 + WS-FLV播放 + 云台控制`
|
||
|
||
---
|
||
|
||
## Phase W2: 视频墙 + 录像回放（预计 2h）
|
||
|
||
### W2.1 视频墙改造
|
||
- [ ] 编辑 `warehouse/src/view/video/VideoWall.vue`
|
||
- [ ] 页面加载时获取所有 Owl 摄像机列表
|
||
- [ ] 同时为前 N 路摄像机获取流地址
|
||
- [ ] 多路 `<video>` 标签并行播放（注意浏览器并发限制，建议 4 路）
|
||
|
||
### W2.2 录像回放改造
|
||
- [ ] 编辑 `warehouse/src/view/video/History.vue`
|
||
- [ ] 增加时间选择控件（开始时间 + 结束时间）
|
||
- [ ] 调用 `gwGet('/api/gateway/streams/{adapter}/{id}/playback?start=&end=')`
|
||
- [ ] 返回的 HLS 地址赋值给播放器
|
||
|
||
### W2.3 构建验证
|
||
- [ ] 视频墙同时显示 4 路画面
|
||
- [ ] 回放页时间轴选择 → HLS 播放
|
||
|
||
> **W2 提交点**: `PhaseW2_video_wall — 多路视频墙 + HLS回放`
|
||
|
||
---
|
||
|
||
## Phase W3: IoT 实时数据改造（预计 2h）
|
||
|
||
### W3.1 IoT 设备列表
|
||
- [ ] 编辑 `warehouse/src/view/environment/EnvVarManagement.vue`
|
||
- [ ] 调用 `gwGet('/api/gateway/tree?adapter=MC4:31ku')` 获取对象树
|
||
- [ ] 递归遍历，筛选 `DeviceGroup=IoT设备` 的叶子节点
|
||
- [ ] 渲染为设备列表/表格
|
||
|
||
### W3.2 实时值轮询
|
||
- [ ] 对每个 IoT 设备调用 `gwGet('/api/gateway/realtime/{adapter}/{deviceId}')`
|
||
- [ ] 每 5s 轮询一次（`setInterval`）
|
||
- [ ] 数据绑定到 ECharts 曲线图
|
||
- [ ] 数值异常时高亮显示
|
||
|
||
### W3.3 构建验证
|
||
- [ ] 环境页面显示 MC4.0 IoT 设备列表
|
||
- [ ] 选中设备 → 曲线图实时更新温度/湿度值
|
||
|
||
> **W3 提交点**: `PhaseW3_iot — IoT设备列表 + 5s轮询 + ECharts实时曲线`
|
||
|
||
---
|
||
|
||
## Phase W4: 设备详情页改造（预计 2h）
|
||
|
||
### W4.1 设备类型识别
|
||
- [ ] 编辑 `warehouse/src/view/DeviceInfo.vue`
|
||
- [ ] 从 props 或全局状态获取当前选中设备（`StandardDevice`）
|
||
- [ ] 根据 `DeviceCategory` + `DeviceGroup` 决定显示哪些选项卡
|
||
|
||
### W4.2 实时画面 Tab（视频设备）
|
||
- [ ] 视频设备：调 B6a 获取流地址 → `<video>` 播放
|
||
- [ ] 替代当前 `randomVideoImage` 占位图
|
||
|
||
### W4.3 实时曲线 Tab（IoT 设备）
|
||
- [ ] IoT 设备：调 B4 获取实时值 → ECharts 曲线
|
||
- [ ] 替代当前 Mock 数据生成的图表
|
||
|
||
### W4.4 设备控制 Tab
|
||
- [ ] 调 B5 发送控制指令
|
||
- [ ] 替代当前 Mock `handleTurnOn/handleTurnOff`
|
||
|
||
### W4.5 构建验证
|
||
- [ ] 地图点击设备 → 弹窗显示正确选项卡
|
||
- [ ] 视频设备显示真实画面
|
||
- [ ] IoT 设备显示实时曲线
|
||
|
||
> **W4 提交点**: `PhaseW4_device_info — 设备详情全选项卡对接真实数据`
|
||
|
||
---
|
||
|
||
## Phase W5: 报警页面对接（预计 2h）
|
||
|
||
### W5.1 告警列表
|
||
- [ ] 编辑 `warehouse/src/view/emergency-alarm/EmergencyAlarmRecord.vue`
|
||
- [ ] 编辑 `warehouse/src/view/intrusion-alarm/AlarmRecord.vue`
|
||
- [ ] 页面加载时调用 `gwGet('/api/gateway/alarms/{adapter}?from=&to=&page=&size=')`
|
||
- [ ] 渲染告警表格（时间/等级/描述/状态）
|
||
|
||
### W5.2 告警确认 + 结束
|
||
- [ ] 增加"确认"和"结束"按钮
|
||
- [ ] 调 `gwPost('/api/gateway/alarms/{adapter}/{alarmId}/confirm')`
|
||
- [ ] 调 `gwPost('/api/gateway/alarms/{adapter}/{alarmId}/end')`
|
||
|
||
### W5.3 告警颜色映射
|
||
- [ ] 提示=蓝色、普通=黄色、重要=橙色、紧急=红色
|
||
|
||
### W5.4 告警联动地图
|
||
- [ ] 点击告警报文 → 地图定位到对应设备位置（通过 base_device.Location/Lat/Lng）
|
||
|
||
### W5.5 构建验证
|
||
- [ ] 告警列表显示 MC4.0/Owl 真实告警
|
||
- [ ] 确认/结束按钮可用
|
||
- [ ] 点击告警 → 地图跳转
|
||
|
||
> **W5 提交点**: `PhaseW5_alarm — 真实告警列表 + 确认/结束 + 地图联动`
|
||
|
||
---
|
||
|
||
## Phase W6: 3D 地图设备标记（预计 3h）
|
||
|
||
### W6.1 设备标记数据
|
||
- [ ] 编辑 `warehouse/src/view/DataView.vue`
|
||
- [ ] 初始化时调 VolPro API 获取 `base_device WHERE Enable=启用`
|
||
- [ ] 遍历设备，提取 `MapModelId`、`MapModelScale`、`MapModelRotation`
|
||
|
||
### W6.2 VgoMap 加载设备模型
|
||
- [ ] 调用 `window.$map.addModel({ modelId, position, scale, rotation })`（API 需验证）
|
||
- [ ] 无 MapModelId 的设备用默认图标标记
|
||
- [ ] 在线设备绿色、离线设备灰色
|
||
|
||
### W6.3 点击标记 → 设备详情
|
||
- [ ] 监听 VgoMap 的 `click` 事件
|
||
- [ ] 命中设备标记时弹出 DeviceInfo.vue
|
||
|
||
### W6.4 告警设备闪烁
|
||
- [ ] 收到告警推送时，对应设备标记红色闪烁 10s
|
||
- [ ] 确认/结束告警后恢复
|
||
|
||
### W6.5 构建验证
|
||
- [ ] 3D 地图中显示设备模型或标记
|
||
- [ ] 点击标记弹出设备详情
|
||
- [ ] 告警设备红色闪烁
|
||
|
||
> **W6 提交点**: `PhaseW6_map — 3D地图设备标记 + 点击弹窗 + 告警闪烁`
|
||
|
||
---
|
||
|
||
## Phase W7: 联调 + 异常处理（预计 3h）
|
||
|
||
### W7.1 异常兜底
|
||
- [ ] 网关不可达时显示"网关连接失败"提示
|
||
- [ ] 取流失败时显示"无法获取流地址"
|
||
- [ ] 网络超时 10s 后自动重试一次
|
||
|
||
### W7.2 限流保护
|
||
- [ ] IoT 轮询间隔 ≥ 5s
|
||
- [ ] 视频墙并发取流 ≤ 4 路
|
||
- [ ] 告警列表分页 ≤ 100 条/页
|
||
|
||
### W7.3 全链路联调
|
||
- [ ] 网关启动 → 管理端添加设备 → warehouse 大屏可见
|
||
- [ ] 视频实时播放 + 云台控制
|
||
- [ ] IoT 曲线实时更新
|
||
- [ ] 告警触发 → 大屏弹窗 + 地图闪烁
|
||
|
||
### W7.4 性能验证
|
||
- [ ] 大屏帧率 ≥ 30fps
|
||
- [ ] 视频延迟 ≤ 2s
|
||
- [ ] 页面首次加载 ≤ 5s
|
||
|
||
> **W7 提交点**: `PhaseW7_integration — 全链路联调通过 + 异常处理 + 限流保护`
|
||
|
||
---
|
||
|
||
> **总周期**: W0-W7 预计 16 小时（含 3h 联调）
|