feat(aiot-device): 重写 ROI 配置页面，迁移 WVP 画布式交互

从 WVP 的 roiConfig 整套组件迁移至 Vue3 + Ant Design： ROI 配置主页面 (roi/index.vue)： - 无参数时显示摄像头选择器，有参数时直接进入配置 - 左侧画布面板 + 右侧 ROI 列表/属性/算法侧边栏 - 画矩形（拖拽）、画多边形（点击+双击完成） - ROI 属性编辑：名称、颜色、优先级、描述 - 推送配置到边缘端 RoiCanvas 组件 (roi/components/RoiCanvas.vue)： - Canvas 叠加在摄像头截图上，归一化坐标 (0-1) - 矩形拖拽绘制、多边形逐点绘制 - ROI 选中高亮、点击选择、右键删除 - 窗口 resize 自适应 RoiAlgorithmBind 组件 (roi/components/RoiAlgorithmBind.vue)： - 算法列表加载、绑定/解绑操作 - 启用/禁用开关、参数配置入口 AlgorithmParamEditor 组件 (roi/components/AlgorithmParamEditor.vue)： - 根据 JSON Schema 动态生成表单 - 支持 int（数字输入）、list（标签列表）、string（文本输入） - 参数保存到后端删除旧的 data.ts（VxeGrid 列定义，已不再使用） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-08 23:24:48 +08:00
parent b72839622e
commit e2bde76f20
5 changed files with 1243 additions and 112 deletions
--- a/apps/web-antd/src/views/aiot/device/roi/components/RoiCanvas.vue
+++ b/apps/web-antd/src/views/aiot/device/roi/components/RoiCanvas.vue
@@ -0,0 +1,354 @@
+<script setup lang="ts">
+import type { AiotDeviceApi } from '#/api/aiot/device';
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+interface Props {
+  rois: AiotDeviceApi.Roi[];
+  drawMode: string | null;
+  selectedRoiId: string | null;
+  snapUrl: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rois: () => [],
+  drawMode: null,
+  selectedRoiId: null,
+  snapUrl: '',
+});
+
+const emit = defineEmits<{
+  'roi-drawn': [data: { roi_type: string; coordinates: string }];
+  'roi-selected': [roiId: string | null];
+  'roi-deleted': [roiId: string];
+}>();
+
+const wrapper = ref<HTMLDivElement>();
+const canvas = ref<HTMLCanvasElement>();
+
+let ctx: CanvasRenderingContext2D | null = null;
+let canvasWidth = 0;
+let canvasHeight = 0;
+
+const isDrawing = ref(false);
+let startPoint: { x: number; y: number } | null = null;
+let currentPoint: { x: number; y: number } | null = null;
+const polygonPoints = ref<{ x: number; y: number }[]>([]);
+const loading = ref(true);
+const errorMsg = ref('');
+
+watch(() => props.rois, () => redraw(), { deep: true });
+watch(() => props.selectedRoiId, () => redraw());
+watch(() => props.drawMode, () => {
+  polygonPoints.value = [];
+  isDrawing.value = false;
+  redraw();
+});
+watch(() => props.snapUrl, () => {
+  loading.value = true;
+  errorMsg.value = '';
+});
+
+onMounted(() => {
+  nextTick(() => {
+    initCanvas();
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
+function onImageLoad() {
+  loading.value = false;
+  nextTick(() => initCanvas());
+}
+
+function onImageError() {
+  loading.value = false;
+  errorMsg.value = '截图加载失败，请确认摄像头正在拉流';
+}
+
+function initCanvas() {
+  if (!canvas.value || !wrapper.value) return;
+  canvasWidth = wrapper.value.clientWidth;
+  canvasHeight = wrapper.value.clientHeight;
+  canvas.value.width = canvasWidth;
+  canvas.value.height = canvasHeight;
+  ctx = canvas.value.getContext('2d');
+  redraw();
+}
+
+function handleResize() {
+  initCanvas();
+}
+
+function getCanvasPoint(e: MouseEvent) {
+  const rect = canvas.value!.getBoundingClientRect();
+  return {
+    x: (e.clientX - rect.left) / canvasWidth,
+    y: (e.clientY - rect.top) / canvasHeight,
+  };
+}
+
+function onMouseDown(e: MouseEvent) {
+  if (e.button !== 0) return;
+  const pt = getCanvasPoint(e);
+
+  if (props.drawMode === 'rectangle') {
+    isDrawing.value = true;
+    startPoint = pt;
+    currentPoint = pt;
+  } else if (props.drawMode === 'polygon') {
+    polygonPoints.value.push(pt);
+    redraw();
+    drawPolygonInProgress();
+  } else {
+    const clickedRoi = findRoiAtPoint(pt);
+    emit('roi-selected', clickedRoi?.roiId ?? null);
+  }
+}
+
+function onMouseMove(e: MouseEvent) {
+  if (!isDrawing.value || props.drawMode !== 'rectangle') return;
+  currentPoint = getCanvasPoint(e);
+  redraw();
+  drawRectInProgress();
+}
+
+function onMouseUp(e: MouseEvent) {
+  if (!isDrawing.value || props.drawMode !== 'rectangle') return;
+  isDrawing.value = false;
+  const endPoint = getCanvasPoint(e);
+  const x = Math.min(startPoint!.x, endPoint.x);
+  const y = Math.min(startPoint!.y, endPoint.y);
+  const w = Math.abs(endPoint.x - startPoint!.x);
+  const h = Math.abs(endPoint.y - startPoint!.y);
+  if (w > 0.01 && h > 0.01) {
+    emit('roi-drawn', {
+      roi_type: 'rectangle',
+      coordinates: JSON.stringify({ x, y, w, h }),
+    });
+  }
+  startPoint = null;
+  currentPoint = null;
+  redraw();
+}
+
+function onDoubleClick() {
+  if (props.drawMode === 'polygon' && polygonPoints.value.length >= 3) {
+    emit('roi-drawn', {
+      roi_type: 'polygon',
+      coordinates: JSON.stringify(
+        polygonPoints.value.map((p) => ({ x: p.x, y: p.y })),
+      ),
+    });
+    polygonPoints.value = [];
+    redraw();
+  }
+}
+
+function onContextMenu(e: MouseEvent) {
+  e.preventDefault();
+  const pt = getCanvasPoint(e);
+  const roi = findRoiAtPoint(pt);
+  if (roi?.roiId) {
+    emit('roi-deleted', roi.roiId);
+  }
+}
+
+function findRoiAtPoint(pt: { x: number; y: number }) {
+  for (let i = props.rois.length - 1; i >= 0; i--) {
+    const roi = props.rois[i]!;
+    try {
+      const coords =
+        typeof roi.coordinates === 'string'
+          ? JSON.parse(roi.coordinates)
+          : roi.coordinates;
+      if (roi.roiType === 'rectangle') {
+        if (
+          pt.x >= coords.x &&
+          pt.x <= coords.x + coords.w &&
+          pt.y >= coords.y &&
+          pt.y <= coords.y + coords.h
+        ) {
+          return roi;
+        }
+      } else if (roi.roiType === 'polygon') {
+        if (isPointInPolygon(pt, coords)) return roi;
+      }
+    } catch {
+      /* skip */
+    }
+  }
+  return null;
+}
+
+function isPointInPolygon(
+  pt: { x: number; y: number },
+  polygon: { x: number; y: number }[],
+) {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i]!.x;
+    const yi = polygon[i]!.y;
+    const xj = polygon[j]!.x;
+    const yj = polygon[j]!.y;
+    const intersect =
+      yi > pt.y !== yj > pt.y &&
+      pt.x < ((xj - xi) * (pt.y - yi)) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+
+function redraw() {
+  if (!ctx) return;
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+  props.rois.forEach((roi) => {
+    try {
+      const coords =
+        typeof roi.coordinates === 'string'
+          ? JSON.parse(roi.coordinates)
+          : roi.coordinates;
+      const color = roi.color || '#FF0000';
+      const isSelected = roi.roiId === props.selectedRoiId;
+
+      ctx!.strokeStyle = color;
+      ctx!.lineWidth = isSelected ? 3 : 2;
+      ctx!.fillStyle = `${color}33`;
+
+      if (roi.roiType === 'rectangle') {
+        const rx = coords.x * canvasWidth;
+        const ry = coords.y * canvasHeight;
+        const rw = coords.w * canvasWidth;
+        const rh = coords.h * canvasHeight;
+        ctx!.fillRect(rx, ry, rw, rh);
+        ctx!.strokeRect(rx, ry, rw, rh);
+        if (roi.name) {
+          ctx!.fillStyle = color;
+          ctx!.font = '12px Arial';
+          ctx!.fillText(roi.name, rx + 4, ry + 14);
+        }
+      } else if (roi.roiType === 'polygon') {
+        ctx!.beginPath();
+        coords.forEach((p: { x: number; y: number }, idx: number) => {
+          const px = p.x * canvasWidth;
+          const py = p.y * canvasHeight;
+          if (idx === 0) ctx!.moveTo(px, py);
+          else ctx!.lineTo(px, py);
+        });
+        ctx!.closePath();
+        ctx!.fill();
+        ctx!.stroke();
+        if (roi.name && coords.length > 0) {
+          ctx!.fillStyle = color;
+          ctx!.font = '12px Arial';
+          ctx!.fillText(
+            roi.name,
+            coords[0].x * canvasWidth + 4,
+            coords[0].y * canvasHeight + 14,
+          );
+        }
+      }
+    } catch {
+      /* skip */
+    }
+  });
+}
+
+function drawRectInProgress() {
+  if (!startPoint || !currentPoint || !ctx) return;
+  const x = Math.min(startPoint.x, currentPoint.x) * canvasWidth;
+  const y = Math.min(startPoint.y, currentPoint.y) * canvasHeight;
+  const w = Math.abs(currentPoint.x - startPoint.x) * canvasWidth;
+  const h = Math.abs(currentPoint.y - startPoint.y) * canvasHeight;
+  ctx.strokeStyle = '#00FF00';
+  ctx.lineWidth = 2;
+  ctx.setLineDash([5, 5]);
+  ctx.strokeRect(x, y, w, h);
+  ctx.setLineDash([]);
+}
+
+function drawPolygonInProgress() {
+  if (polygonPoints.value.length < 1 || !ctx) return;
+  ctx.strokeStyle = '#00FF00';
+  ctx.lineWidth = 2;
+  ctx.setLineDash([5, 5]);
+  ctx.beginPath();
+  polygonPoints.value.forEach((p, idx) => {
+    const px = p.x * canvasWidth;
+    const py = p.y * canvasHeight;
+    if (idx === 0) ctx!.moveTo(px, py);
+    else ctx!.lineTo(px, py);
+    ctx!.fillStyle = '#00FF00';
+    ctx!.fillRect(px - 3, py - 3, 6, 6);
+  });
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+</script>
+
+<template>
+  <div ref="wrapper" class="roi-canvas-wrapper">
+    <img
+      v-if="snapUrl"
+      :src="snapUrl"
+      class="bg-image"
+      @load="onImageLoad"
+      @error="onImageError"
+    />
+    <div v-else class="video-placeholder">
+      <span v-if="loading">正在截取画面...</span>
+      <span v-else>{{ errorMsg || '暂无画面' }}</span>
+    </div>
+    <canvas
+      ref="canvas"
+      class="roi-overlay"
+      @mousedown="onMouseDown"
+      @mousemove="onMouseMove"
+      @mouseup="onMouseUp"
+      @dblclick="onDoubleClick"
+      @contextmenu="onContextMenu"
+    />
+  </div>
+</template>
+
+<style scoped>
+.roi-canvas-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  background: #000;
+}
+
+.bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  font-size: 18px;
+  background: #1a1a2e;
+}
+
+.roi-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+}
+</style>