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>
This commit is contained in:
@@ -1,99 +1,522 @@
|
||||
<script setup lang="ts">
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { AiotDeviceApi } from '#/api/aiot/device';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { message, Modal, Tag } from 'ant-design-vue';
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
message,
|
||||
Modal,
|
||||
Select,
|
||||
Switch,
|
||||
Tag,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { deleteRoi, getRoiPage } from '#/api/aiot/device';
|
||||
import {
|
||||
deleteRoi,
|
||||
getCameraList,
|
||||
getRoiByCameraId,
|
||||
getRoiDetail,
|
||||
getSnapUrl,
|
||||
pushConfig,
|
||||
saveRoi,
|
||||
} from '#/api/aiot/device';
|
||||
|
||||
import { useRoiGridColumns } from './data';
|
||||
import RoiAlgorithmBind from './components/RoiAlgorithmBind.vue';
|
||||
import RoiCanvas from './components/RoiCanvas.vue';
|
||||
|
||||
defineOptions({ name: 'AiotDeviceRoi' });
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// Route params
|
||||
const cameraId = ref('');
|
||||
const app = ref('');
|
||||
const stream = ref('');
|
||||
|
||||
// Camera selector (when no cameraId in route)
|
||||
const showCameraSelector = ref(false);
|
||||
const cameraOptions = ref<
|
||||
{ value: string; label: string; camera: AiotDeviceApi.Camera }[]
|
||||
>([]);
|
||||
const selectedCamera = ref<string | undefined>(undefined);
|
||||
const cameraLoading = ref(false);
|
||||
|
||||
// ROI state
|
||||
const drawMode = ref<string | null>(null);
|
||||
const roiList = ref<AiotDeviceApi.Roi[]>([]);
|
||||
const selectedRoiId = ref<string | null>(null);
|
||||
const selectedRoiBindings = ref<AiotDeviceApi.RoiAlgoBinding[]>([]);
|
||||
const snapUrl = ref('');
|
||||
|
||||
const selectedRoi = computed(() => {
|
||||
if (!selectedRoiId.value) return null;
|
||||
return roiList.value.find((r) => r.roiId === selectedRoiId.value) || null;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const q = route.query;
|
||||
if (q.cameraId) {
|
||||
cameraId.value = String(q.cameraId);
|
||||
app.value = String(q.app || '');
|
||||
stream.value = String(q.stream || '');
|
||||
buildSnapUrl();
|
||||
loadRois();
|
||||
} else {
|
||||
showCameraSelector.value = true;
|
||||
loadCameraOptions();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadCameraOptions() {
|
||||
cameraLoading.value = true;
|
||||
try {
|
||||
const res = await getCameraList({ page: 1, count: 200 });
|
||||
const list = res.list || [];
|
||||
cameraOptions.value = list.map((cam: AiotDeviceApi.Camera) => ({
|
||||
value: `${cam.app}/${cam.stream}`,
|
||||
label: `${cam.app}/${cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
|
||||
camera: cam,
|
||||
}));
|
||||
} catch {
|
||||
message.error('加载摄像头列表失败');
|
||||
} finally {
|
||||
cameraLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除 ROI */
|
||||
async function handleDelete(row: AiotDeviceApi.Roi) {
|
||||
function onCameraSelected(val: string) {
|
||||
const opt = cameraOptions.value.find((o) => o.value === val);
|
||||
if (opt) {
|
||||
cameraId.value = val;
|
||||
app.value = opt.camera.app || '';
|
||||
stream.value = opt.camera.stream || '';
|
||||
showCameraSelector.value = false;
|
||||
buildSnapUrl();
|
||||
loadRois();
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push('/aiot/device/camera');
|
||||
}
|
||||
|
||||
function buildSnapUrl() {
|
||||
if (app.value && stream.value) {
|
||||
snapUrl.value = getSnapUrl(app.value, stream.value);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshSnap() {
|
||||
buildSnapUrl();
|
||||
}
|
||||
|
||||
async function loadRois() {
|
||||
try {
|
||||
const data = await getRoiByCameraId(cameraId.value);
|
||||
roiList.value = Array.isArray(data) ? data : [];
|
||||
if (selectedRoiId.value) {
|
||||
loadRoiDetail();
|
||||
}
|
||||
} catch {
|
||||
message.error('加载ROI失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRoiDetail() {
|
||||
if (!selectedRoi.value?.id) return;
|
||||
try {
|
||||
const data = await getRoiDetail(selectedRoi.value.id);
|
||||
if (data) {
|
||||
selectedRoiBindings.value = data.algorithms || [];
|
||||
}
|
||||
} catch {
|
||||
/* empty */
|
||||
}
|
||||
}
|
||||
|
||||
function startDraw(mode: string) {
|
||||
drawMode.value = mode;
|
||||
}
|
||||
|
||||
async function onRoiDrawn(data: { roi_type: string; coordinates: string }) {
|
||||
drawMode.value = null;
|
||||
const newRoi: Partial<AiotDeviceApi.Roi> = {
|
||||
cameraId: cameraId.value,
|
||||
name: `ROI-${roiList.value.length + 1}`,
|
||||
roiType: data.roi_type,
|
||||
coordinates: data.coordinates,
|
||||
color: '#FF0000',
|
||||
priority: 0,
|
||||
enabled: 1,
|
||||
description: '',
|
||||
};
|
||||
try {
|
||||
await saveRoi(newRoi);
|
||||
message.success('ROI已保存');
|
||||
loadRois();
|
||||
} catch {
|
||||
message.error('保存失败');
|
||||
}
|
||||
}
|
||||
|
||||
function onRoiSelected(roiId: string | null) {
|
||||
selectedRoiId.value = roiId;
|
||||
if (roiId) {
|
||||
loadRoiDetail();
|
||||
} else {
|
||||
selectedRoiBindings.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
function selectRoi(roi: AiotDeviceApi.Roi) {
|
||||
selectedRoiId.value = roi.roiId || null;
|
||||
loadRoiDetail();
|
||||
}
|
||||
|
||||
function onRoiDeleted(roiId: string) {
|
||||
doDeleteRoi(roiId);
|
||||
}
|
||||
|
||||
function handleDeleteRoi(roi: AiotDeviceApi.Roi) {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
content: `确定要删除 ROI "${row.name}" 吗？`,
|
||||
title: '提示',
|
||||
content: '确定删除该ROI？关联的算法绑定也将删除。',
|
||||
async onOk() {
|
||||
const hideLoading = message.loading({
|
||||
content: '正在删除...',
|
||||
duration: 0,
|
||||
});
|
||||
try {
|
||||
await deleteRoi(row.id as number);
|
||||
message.success('删除成功');
|
||||
handleRefresh();
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
throw error;
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
doDeleteRoi(roi.roiId!);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: useRoiGridColumns(),
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
return await getRoiPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
});
|
||||
},
|
||||
},
|
||||
async function doDeleteRoi(roiId: string) {
|
||||
try {
|
||||
await deleteRoi(roiId);
|
||||
message.success('已删除');
|
||||
if (selectedRoiId.value === roiId) {
|
||||
selectedRoiId.value = null;
|
||||
selectedRoiBindings.value = [];
|
||||
}
|
||||
loadRois();
|
||||
} catch {
|
||||
message.error('删除失败');
|
||||
}
|
||||
}
|
||||
|
||||
async function updateRoiData(roi: AiotDeviceApi.Roi) {
|
||||
try {
|
||||
await saveRoi(roi);
|
||||
loadRois();
|
||||
} catch {
|
||||
message.error('更新失败');
|
||||
}
|
||||
}
|
||||
|
||||
function handlePush() {
|
||||
Modal.confirm({
|
||||
title: '推送配置',
|
||||
content: '确定将此摄像头的所有ROI配置推送到边缘端？',
|
||||
async onOk() {
|
||||
try {
|
||||
await pushConfig(cameraId.value);
|
||||
message.success('推送成功');
|
||||
} catch (err: any) {
|
||||
message.error(err?.message || '推送失败，请检查AI服务是否启用');
|
||||
}
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
},
|
||||
} as VxeTableGridOptions<AiotDeviceApi.Roi>,
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid table-title="ROI 区域配置">
|
||||
<!-- 启用状态列 -->
|
||||
<template #enabled="{ row }">
|
||||
<Tag :color="row.enabled ? 'success' : 'default'">
|
||||
{{ row.enabled ? '启用' : '禁用' }}
|
||||
</Tag>
|
||||
</template>
|
||||
<!-- Camera selector when no cameraId -->
|
||||
<div v-if="showCameraSelector" style="padding: 60px; text-align: center">
|
||||
<h3 style="margin-bottom: 20px">请选择要配置ROI的摄像头</h3>
|
||||
<Select
|
||||
v-model:value="selectedCamera"
|
||||
placeholder="选择摄像头"
|
||||
style="width: 500px; max-width: 100%"
|
||||
show-search
|
||||
:loading="cameraLoading"
|
||||
:options="cameraOptions"
|
||||
@change="(val: any) => onCameraSelected(String(val))"
|
||||
/>
|
||||
<div style="margin-top: 16px; color: #999; font-size: 13px">
|
||||
或从「摄像头管理」页面点击「ROI配置」进入
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '删除',
|
||||
type: 'link',
|
||||
danger: true,
|
||||
icon: ACTION_ICON.DELETE,
|
||||
onClick: handleDelete.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
<!-- ROI Config Page -->
|
||||
<div v-else class="roi-config-page">
|
||||
<!-- Header -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<Button size="small" @click="goBack">返回</Button>
|
||||
<h3>{{ cameraId }} - ROI配置</h3>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="drawMode === 'rectangle'"
|
||||
@click="startDraw('rectangle')"
|
||||
>
|
||||
画矩形
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="drawMode === 'polygon'"
|
||||
@click="startDraw('polygon')"
|
||||
>
|
||||
画多边形
|
||||
</Button>
|
||||
<Button size="small" @click="drawMode = null" :disabled="!drawMode">
|
||||
取消绘制
|
||||
</Button>
|
||||
<Button size="small" @click="refreshSnap">刷新截图</Button>
|
||||
<Button size="small" type="default" @click="handlePush">
|
||||
推送到边缘端
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Canvas Panel -->
|
||||
<div class="canvas-panel">
|
||||
<RoiCanvas
|
||||
:rois="roiList"
|
||||
:draw-mode="drawMode"
|
||||
:selected-roi-id="selectedRoiId"
|
||||
:snap-url="snapUrl"
|
||||
@roi-drawn="onRoiDrawn"
|
||||
@roi-selected="onRoiSelected"
|
||||
@roi-deleted="onRoiDeleted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Side Panel -->
|
||||
<div class="side-panel">
|
||||
<!-- ROI List -->
|
||||
<div class="section-header">
|
||||
<span>ROI列表 ({{ roiList.length }})</span>
|
||||
</div>
|
||||
<div v-if="roiList.length === 0" class="empty-tip">
|
||||
暂无ROI，请在左侧画面上绘制
|
||||
</div>
|
||||
<div
|
||||
v-for="roi in roiList"
|
||||
:key="roi.roiId"
|
||||
:class="['roi-item', { active: selectedRoiId === roi.roiId }]"
|
||||
@click="selectRoi(roi)"
|
||||
>
|
||||
<div class="roi-item-header">
|
||||
<span
|
||||
class="roi-color"
|
||||
:style="{ background: roi.color || '#FF0000' }"
|
||||
/>
|
||||
<span class="roi-name">{{ roi.name || '未命名' }}</span>
|
||||
<Tag
|
||||
:color="roi.roiType === 'rectangle' ? 'blue' : 'green'"
|
||||
style="margin-right: 0"
|
||||
>
|
||||
{{ roi.roiType === 'rectangle' ? '矩形' : '多边形' }}
|
||||
</Tag>
|
||||
<Switch
|
||||
:checked="roi.enabled === 1"
|
||||
size="small"
|
||||
style="margin-left: auto"
|
||||
@change="
|
||||
(val: string | number | boolean) => {
|
||||
roi.enabled = val ? 1 : 0;
|
||||
updateRoiData(roi);
|
||||
}
|
||||
"
|
||||
@click.stop
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
danger
|
||||
style="margin-left: 4px"
|
||||
@click.stop="handleDeleteRoi(roi)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<!-- ROI Detail -->
|
||||
<div v-if="selectedRoi" class="roi-detail-section">
|
||||
<h4>ROI属性</h4>
|
||||
<Form
|
||||
layout="horizontal"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
size="small"
|
||||
>
|
||||
<Form.Item label="名称">
|
||||
<Input
|
||||
v-model:value="selectedRoi.name"
|
||||
@blur="updateRoiData(selectedRoi!)"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="颜色">
|
||||
<Input
|
||||
v-model:value="selectedRoi.color"
|
||||
type="color"
|
||||
style="width: 60px; padding: 2px"
|
||||
@change="updateRoiData(selectedRoi!)"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="优先级">
|
||||
<InputNumber
|
||||
v-model:value="selectedRoi.priority"
|
||||
:min="0"
|
||||
@change="updateRoiData(selectedRoi!)"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="描述">
|
||||
<Input.TextArea
|
||||
v-model:value="selectedRoi.description"
|
||||
:rows="2"
|
||||
@blur="updateRoiData(selectedRoi!)"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<Divider />
|
||||
|
||||
<RoiAlgorithmBind
|
||||
:roi-id="selectedRoi.roiId || ''"
|
||||
:bindings="selectedRoiBindings"
|
||||
@changed="loadRoiDetail"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="empty-tip" style="margin-top: 20px">
|
||||
点击左侧ROI区域或列表项查看详情
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.roi-config-page {
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-left h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas-panel {
|
||||
flex: 6;
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
flex: 4;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
color: #999;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.roi-item {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.roi-item:hover {
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.roi-item.active {
|
||||
border-color: #1677ff;
|
||||
background: #e6f4ff;
|
||||
}
|
||||
|
||||
.roi-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.roi-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.roi-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.roi-detail-section h4 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user