warehouse客户端改造任务清单 W0-W7

doc/设计文档/客户端改造方案_任务清单.md

@@ -0,0 +1,218 @@
+# 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 联调）