# 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 联调）