g82tt/SecMPS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1aac011227193592ea24cb4e9e65ff1aa8d99f3c
SecMPS/doc/设计文档/客户端改造方案_任务清单.md

7.6 KiB
Raw Blame History

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

Reference in New Issue View Git Blame Copy Permalink