fix(aiot): 截图持久化适配 + 告警 API 切换到 WVP + 图片代理

截图 / ROI:
- getSnapUrl: 非 force 模式直接返回 /snap/image 代理 URL(从 DB 读持久化截图,
  不触发 Edge),force 模式先请求 Edge 截图再返回代理 URL
- RoiCanvas: 添加 ResizeObserver 确保容器尺寸变化时重新初始化 canvas,
  onImageError 兜底初始化 canvas(截图失败仍可绘制/查看 ROI),
  snapUrl watcher 触发 canvas 重初始化

告警:
- alarm/index.ts: requestClient → wvpRequestClient,路径从
  /aiot/alarm/alert/* 切换到 /aiot/device/alert/*(走 WVP 后端)
- Alert 类型新增 imagePath、receivedAt、extraData 字段
- alarm list: 缩略图和详情图片通过 WVP /alert/image 代理端点显示,
  避免 COS presigned URL 过期问题
- device/index.ts: 新增 getAlertImageUrl() 构造告警图片代理 URL

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-04 09:21:48 +08:00
parent 71fd2a8576
commit 0d56b2f221
4 changed files with 91 additions and 34 deletions

View File

@@ -188,16 +188,28 @@ export function deleteRoi(roiId: string) {
/**
* 获取摄像头截图 URL
* 截图接口需要认证,通过 query param 传递 access-token
*
* 非 force 模式:直接返回 /snap/image 代理 URL从 DB 读取持久化截图,不触发 Edge
* force 模式:先触发 Edge 截新图(更新 DB再返回代理 URL
*/
export async function getSnapUrl(cameraCode: string, force = false): Promise<string> {
const token = await getWvpToken();
if (force) {
// force 时先触发一次截图请求(确保 Edge 截新图并更新 DB
try {
await wvpRequestClient.get('/aiot/device/roi/snap', {
params: { cameraCode, force: true },
});
} catch {
/* 截图请求可能超时,但 DB 会被更新 */
}
}
// 返回代理 URLWVP 从 DB 读 cos_key → 生成 presigned URL → 下载返回)
return (
`${apiURL}/aiot/device/roi/snap` +
`${apiURL}/aiot/device/roi/snap/image` +
`?cameraCode=${encodeURIComponent(cameraCode)}` +
`&force=${force}` +
`&access-token=${encodeURIComponent(token)}` +
`&t=${Date.now()}`
(force ? `&t=${Date.now()}` : '')
);
}
@@ -256,3 +268,19 @@ export function exportConfig(cameraId: string) {
{ params: { cameraId } },
);
}
// ==================== 告警图片代理 ====================
/**
* 构造告警图片代理 URL通过 WVP 下载 COS 图片后返回字节流)
* @param imagePath COS 对象路径或完整 URL
*/
export async function getAlertImageUrl(imagePath: string): Promise<string> {
if (!imagePath) return '';
const token = await getWvpToken();
return (
`${apiURL}/aiot/device/alert/image` +
`?imagePath=${encodeURIComponent(imagePath)}` +
`&access-token=${encodeURIComponent(token)}`
);
}