702 lines
17 KiB
Vue
702 lines
17 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* ROI 区域配置页面
|
||
*
|
||
* 功能：摄像头截图展示、ROI 区域绘制（全图/自定义多边形）、ROI 属性编辑、
|
||
* 算法绑定管理、配置推送到边缘端
|
||
* 后端：WVP 视频平台 AiRoi / AiConfig API
|
||
*/
|
||
import type { AiotDeviceApi } from '#/api/aiot/device';
|
||
|
||
import { computed, onMounted, ref } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
|
||
import { Page } from '@vben/common-ui';
|
||
|
||
import {
|
||
Button,
|
||
Divider,
|
||
Form,
|
||
Input,
|
||
InputNumber,
|
||
message,
|
||
Modal,
|
||
Select,
|
||
Switch,
|
||
Tag,
|
||
} from 'ant-design-vue';
|
||
|
||
import {
|
||
deleteRoi,
|
||
getCameraList,
|
||
getRoiByCameraId,
|
||
getRoiDetail,
|
||
getSnapUrl,
|
||
pushConfig,
|
||
saveRoi,
|
||
} from '#/api/aiot/device';
|
||
import { wvpRequestClient } from '#/api/aiot/request';
|
||
|
||
import RoiAlgorithmBind from './components/RoiAlgorithmBind.vue';
|
||
import RoiCanvas from './components/RoiCanvas.vue';
|
||
|
||
defineOptions({ name: 'AiotDeviceRoi' });
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
// ==================== 摄像头选择 ====================
|
||
|
||
const cameraCode = ref('');
|
||
const currentCamera = ref<AiotDeviceApi.Camera | null>(null);
|
||
|
||
const showCameraSelector = ref(false);
|
||
const cameraOptions = ref<
|
||
{ camera: AiotDeviceApi.Camera; label: string; value: string }[]
|
||
>([]);
|
||
const selectedCamera = ref<string | undefined>(undefined);
|
||
const cameraLoading = ref(false);
|
||
|
||
// ==================== ROI 状态 ====================
|
||
|
||
const drawMode = ref<null | string>(null);
|
||
const roiList = ref<AiotDeviceApi.Roi[]>([]);
|
||
const selectedRoiId = ref<null | string>(null);
|
||
const selectedRoiBindings = ref<AiotDeviceApi.RoiAlgoBinding[]>([]);
|
||
const snapUrl = ref('');
|
||
const snapOk = ref(false);
|
||
const panelVisible = ref(false);
|
||
const roiCanvasRef = ref<InstanceType<typeof RoiCanvas> | null>(null);
|
||
|
||
const selectedRoi = computed(() => {
|
||
if (!selectedRoiId.value) return null;
|
||
return roiList.value.find((r) => r.roiId === selectedRoiId.value) || null;
|
||
});
|
||
|
||
const isDrawing = computed(() => drawMode.value === 'polygon');
|
||
|
||
const polygonPointCount = computed(() => {
|
||
return roiCanvasRef.value?.polygonPoints?.length ?? 0;
|
||
});
|
||
|
||
// ==================== 初始化 ====================
|
||
|
||
onMounted(async () => {
|
||
const q = route.query;
|
||
if (q.cameraCode) {
|
||
cameraCode.value = String(q.cameraCode);
|
||
await loadCurrentCamera();
|
||
await buildSnapUrl();
|
||
loadRois();
|
||
} else {
|
||
showCameraSelector.value = true;
|
||
loadCameraOptions();
|
||
}
|
||
});
|
||
|
||
// ==================== 摄像头加载与选择 ====================
|
||
|
||
async function loadCurrentCamera() {
|
||
try {
|
||
const res = await getCameraList({ page: 1, count: 200 });
|
||
const list = res.list || [];
|
||
const camera = list.find((c: AiotDeviceApi.Camera) => c.cameraCode === cameraCode.value);
|
||
if (camera) {
|
||
currentCamera.value = camera;
|
||
}
|
||
} catch {
|
||
console.error('加载摄像头信息失败');
|
||
}
|
||
}
|
||
|
||
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.cameraCode || '',
|
||
label: `${cam.cameraName || cam.app || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
|
||
camera: cam,
|
||
}));
|
||
} catch {
|
||
message.error('加载摄像头列表失败');
|
||
} finally {
|
||
cameraLoading.value = false;
|
||
}
|
||
}
|
||
|
||
async function onCameraSelected(val: string) {
|
||
const opt = cameraOptions.value.find((o) => o.value === val);
|
||
if (opt) {
|
||
cameraCode.value = val;
|
||
currentCamera.value = opt.camera;
|
||
showCameraSelector.value = false;
|
||
await buildSnapUrl();
|
||
loadRois();
|
||
}
|
||
}
|
||
|
||
function goBack() {
|
||
router.push('/aiot/device/camera');
|
||
}
|
||
|
||
// ==================== ROI 类型标签 ====================
|
||
|
||
function getRoiTagColor(roi: AiotDeviceApi.Roi) {
|
||
if (roi.roiType === 'fullscreen') return 'orange';
|
||
if (roi.roiType === 'rectangle') return 'blue';
|
||
return 'green';
|
||
}
|
||
|
||
function getRoiTagLabel(roi: AiotDeviceApi.Roi) {
|
||
if (roi.roiType === 'fullscreen') return '全图';
|
||
if (roi.roiType === 'rectangle') return '矩形';
|
||
return '自定义';
|
||
}
|
||
|
||
// ==================== 截图 ====================
|
||
|
||
async function buildSnapUrl(force = false) {
|
||
if (cameraCode.value) {
|
||
snapUrl.value = await getSnapUrl(cameraCode.value, force);
|
||
}
|
||
}
|
||
|
||
async function refreshSnap() {
|
||
await buildSnapUrl(true);
|
||
}
|
||
|
||
function onSnapStatus(ok: boolean) {
|
||
snapOk.value = ok;
|
||
}
|
||
|
||
// ==================== ROI 数据加载 ====================
|
||
|
||
async function loadRois() {
|
||
try {
|
||
const data = await getRoiByCameraId(cameraCode.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 addFullscreen() {
|
||
const hasFullscreen = roiList.value.some((r) => r.roiType === 'fullscreen');
|
||
if (hasFullscreen) {
|
||
message.warning('已存在全图选区');
|
||
return;
|
||
}
|
||
Modal.confirm({
|
||
title: '新建全图选区',
|
||
content: '将创建覆盖整张图片的选区',
|
||
async onOk() {
|
||
const newRoi: Partial<AiotDeviceApi.Roi> = {
|
||
cameraId: cameraCode.value,
|
||
name: `全图-${roiList.value.length + 1}`,
|
||
roiType: 'fullscreen',
|
||
coordinates: JSON.stringify({ x: 0, y: 0, w: 1, h: 1 }),
|
||
color: '#FF0000',
|
||
priority: 0,
|
||
enabled: 1,
|
||
description: '',
|
||
deviceId: '',
|
||
};
|
||
try {
|
||
await saveRoi(newRoi);
|
||
message.success('全图选区已创建');
|
||
loadRois();
|
||
} catch {
|
||
message.error('保存失败');
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
// ==================== 自定义选区（多边形绘制） ====================
|
||
|
||
function startDraw(mode: string) {
|
||
drawMode.value = mode;
|
||
}
|
||
|
||
function finishDraw() {
|
||
roiCanvasRef.value?.finishPolygon();
|
||
}
|
||
|
||
function undoPoint() {
|
||
if (roiCanvasRef.value && roiCanvasRef.value.polygonPoints.length > 0) {
|
||
roiCanvasRef.value.polygonPoints.pop();
|
||
roiCanvasRef.value.redraw();
|
||
if (roiCanvasRef.value.polygonPoints.length > 0) {
|
||
roiCanvasRef.value.drawPolygonInProgress();
|
||
}
|
||
}
|
||
}
|
||
|
||
function cancelDraw() {
|
||
drawMode.value = null;
|
||
}
|
||
|
||
function onDrawCancelled() {
|
||
drawMode.value = null;
|
||
}
|
||
|
||
async function onRoiDrawn(data: { coordinates: string; roi_type: string }) {
|
||
drawMode.value = null;
|
||
const roiName = `ROI-${roiList.value.length + 1}`;
|
||
const newRoi: Partial<AiotDeviceApi.Roi> = {
|
||
cameraId: cameraCode.value,
|
||
name: roiName,
|
||
roiType: data.roi_type,
|
||
coordinates: data.coordinates,
|
||
color: '#FF0000',
|
||
priority: 0,
|
||
enabled: 1,
|
||
description: '',
|
||
deviceId: '',
|
||
};
|
||
try {
|
||
await saveRoi(newRoi);
|
||
message.success('选区已保存');
|
||
loadRois();
|
||
} catch {
|
||
message.error('保存失败');
|
||
}
|
||
}
|
||
|
||
// ==================== ROI 选择与面板 ====================
|
||
|
||
function onRoiSelected(roiId: null | string) {
|
||
selectedRoiId.value = roiId;
|
||
if (roiId) {
|
||
panelVisible.value = true;
|
||
loadRoiDetail();
|
||
}
|
||
}
|
||
|
||
function selectRoi(roi: AiotDeviceApi.Roi) {
|
||
selectedRoiId.value = roi.roiId || null;
|
||
loadRoiDetail();
|
||
}
|
||
|
||
function closePanel() {
|
||
panelVisible.value = false;
|
||
selectedRoiId.value = null;
|
||
selectedRoiBindings.value = [];
|
||
}
|
||
|
||
// ==================== ROI 编辑 ====================
|
||
|
||
async function updateRoiData(roi: AiotDeviceApi.Roi) {
|
||
try {
|
||
await saveRoi(roi);
|
||
loadRois();
|
||
} catch {
|
||
message.error('更新失败');
|
||
}
|
||
}
|
||
|
||
// ==================== ROI 删除 ====================
|
||
|
||
function onRoiDeleted(roiId: string) {
|
||
Modal.confirm({
|
||
title: '提示',
|
||
content: '确定删除该ROI？关联的算法绑定也将删除。',
|
||
async onOk() {
|
||
doDeleteRoi(roiId);
|
||
},
|
||
});
|
||
}
|
||
|
||
function handleDeleteRoi(roi: AiotDeviceApi.Roi) {
|
||
Modal.confirm({
|
||
title: '提示',
|
||
content: '确定删除该ROI？关联的算法绑定也将删除。',
|
||
async onOk() {
|
||
doDeleteRoi(roi.roiId!);
|
||
},
|
||
});
|
||
}
|
||
|
||
async function doDeleteRoi(roiId: string) {
|
||
try {
|
||
await deleteRoi(roiId);
|
||
message.success('已删除');
|
||
if (selectedRoiId.value === roiId) {
|
||
selectedRoiId.value = null;
|
||
selectedRoiBindings.value = [];
|
||
}
|
||
await loadRois();
|
||
if (roiList.value.length === 0) {
|
||
panelVisible.value = false;
|
||
}
|
||
} catch {
|
||
message.error('删除失败');
|
||
}
|
||
}
|
||
|
||
// ==================== 配置推送 ====================
|
||
|
||
function handlePush() {
|
||
Modal.confirm({
|
||
title: '推送配置',
|
||
content: '确定将此摄像头的所有ROI配置推送到边缘端？',
|
||
async onOk() {
|
||
try {
|
||
await pushConfig(cameraCode.value);
|
||
message.success('推送成功');
|
||
} catch (err: any) {
|
||
message.error(err?.message || '推送失败，请检查AI服务是否启用');
|
||
}
|
||
},
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<Page auto-content-height>
|
||
<!-- 摄像头选择器（无 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>
|
||
|
||
<!-- ROI 配置主界面 -->
|
||
<div v-else class="roi-config-page">
|
||
<!-- 顶部操作栏 -->
|
||
<div class="page-header">
|
||
<div class="header-left">
|
||
<Button size="small" @click="goBack">返回</Button>
|
||
<h3>{{ currentCamera?.cameraName || currentCamera?.app || cameraCode }} - ROI配置</h3>
|
||
</div>
|
||
<div class="header-right">
|
||
<!-- 默认工具栏 -->
|
||
<template v-if="!isDrawing">
|
||
<Button size="small" type="primary" @click="addFullscreen">
|
||
全图
|
||
</Button>
|
||
<Button size="small" type="primary" @click="startDraw('polygon')">
|
||
自定义选区
|
||
</Button>
|
||
<Button size="small" @click="refreshSnap">刷新截图</Button>
|
||
<Button size="small" type="default" @click="handlePush">
|
||
推送到边缘端
|
||
</Button>
|
||
</template>
|
||
<!-- 绘制中工具栏 -->
|
||
<template v-else>
|
||
<Button size="small" type="primary" :disabled="polygonPointCount < 3" @click="finishDraw">
|
||
完成选区
|
||
</Button>
|
||
<Button size="small" :disabled="polygonPointCount === 0" @click="undoPoint">
|
||
撤销上一点
|
||
</Button>
|
||
<Button size="small" danger @click="cancelDraw">
|
||
取消绘制
|
||
</Button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主内容区：左侧画布 + 右侧面板 -->
|
||
<div class="main-content">
|
||
<!-- 画布区域 -->
|
||
<div :class="['canvas-panel', { 'panel-open': panelVisible }]">
|
||
<RoiCanvas
|
||
ref="roiCanvasRef"
|
||
:rois="roiList"
|
||
:draw-mode="drawMode"
|
||
:selected-roi-id="selectedRoiId"
|
||
:snap-url="snapUrl"
|
||
@roi-drawn="onRoiDrawn"
|
||
@roi-selected="onRoiSelected"
|
||
@roi-deleted="onRoiDeleted"
|
||
@draw-cancelled="onDrawCancelled"
|
||
@snap-status="onSnapStatus"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 右侧面板 -->
|
||
<transition name="slide-panel">
|
||
<div v-if="panelVisible" class="side-panel">
|
||
<div class="panel-close">
|
||
<Button size="small" shape="circle" @click="closePanel">
|
||
✕
|
||
</Button>
|
||
</div>
|
||
|
||
<!-- ROI 列表 -->
|
||
<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="getRoiTagColor(roi)"
|
||
style="margin-right: 0"
|
||
>
|
||
{{ getRoiTagLabel(roi) }}
|
||
</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 属性编辑 -->
|
||
<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"
|
||
:max="100"
|
||
@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"
|
||
:snap-ok="snapOk"
|
||
@changed="loadRoiDetail"
|
||
/>
|
||
</div>
|
||
<div v-else class="empty-tip" style="margin-top: 20px">
|
||
点击左侧ROI区域或列表项查看详情
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</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;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.main-content {
|
||
display: flex;
|
||
flex: 1;
|
||
gap: 0;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.canvas-panel {
|
||
flex: 1;
|
||
background: #000;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
transition: flex 0.3s ease;
|
||
}
|
||
|
||
.canvas-panel.panel-open {
|
||
flex: 6;
|
||
}
|
||
|
||
.side-panel {
|
||
flex: 4;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
border: 1px solid #f0f0f0;
|
||
border-radius: 0 4px 4px 0;
|
||
padding: 12px;
|
||
margin-left: 1px;
|
||
}
|
||
|
||
.panel-close {
|
||
text-align: right;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 面板滑入动画 */
|
||
.slide-panel-enter-active,
|
||
.slide-panel-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.slide-panel-enter-from,
|
||
.slide-panel-leave-to {
|
||
flex: 0 !important;
|
||
padding: 0 !important;
|
||
overflow: hidden;
|
||
opacity: 0;
|
||
}
|
||
|
||
.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>
|