feat(aiot): ROI配置页面改用cameraCode参数和截图调用

- 路由参数:从query读取cameraCode替代cameraId
- 移除app/stream状态变量,统一使用cameraCode
- 截图调用:getSnapUrl(cameraCode)替代getSnapUrl(app, stream)
- loadCameraOptions:使用cameraCode作为选项value和label
- onCameraSelected:直接设置cameraCode,移除app/stream赋值
- 配置推送/导出:使用cameraCode参数
- 页面标题:显示cameraCode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-13 11:34:59 +08:00
parent 4bbc4b16dd
commit ac345a4728

View File

@@ -46,9 +46,7 @@ const router = useRouter();
// ==================== 摄像头选择 ====================
const cameraId = ref('');
const app = ref('');
const stream = ref('');
const cameraCode = ref('');
const showCameraSelector = ref(false);
const cameraOptions = ref<
@@ -74,10 +72,8 @@ const selectedRoi = computed(() => {
onMounted(async () => {
const q = route.query;
if (q.cameraId) {
cameraId.value = String(q.cameraId);
app.value = String(q.app || '');
stream.value = String(q.stream || '');
if (q.cameraCode) {
cameraCode.value = String(q.cameraCode);
await buildSnapUrl();
loadRois();
} else {
@@ -94,8 +90,8 @@ async function loadCameraOptions() {
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})` : ''}`,
value: cam.cameraCode || '',
label: `${cam.cameraCode || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
camera: cam,
}));
} catch {
@@ -108,9 +104,7 @@ async function loadCameraOptions() {
async 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 || '';
cameraCode.value = val;
showCameraSelector.value = false;
await buildSnapUrl();
loadRois();
@@ -124,8 +118,8 @@ function goBack() {
// ==================== 截图 ====================
async function buildSnapUrl() {
if (app.value && stream.value) {
snapUrl.value = await getSnapUrl(app.value, stream.value);
if (cameraCode.value) {
snapUrl.value = await getSnapUrl(cameraCode.value);
}
}
@@ -137,7 +131,7 @@ async function refreshSnap() {
async function loadRois() {
try {
const data = await getRoiByCameraId(cameraId.value);
const data = await getRoiByCameraId(cameraCode.value);
roiList.value = Array.isArray(data) ? data : [];
if (selectedRoiId.value) {
loadRoiDetail();
@@ -168,7 +162,7 @@ function startDraw(mode: string) {
async function onRoiDrawn(data: { coordinates: string; roi_type: string }) {
drawMode.value = null;
const newRoi: Partial<AiotDeviceApi.Roi> = {
cameraId: cameraId.value,
cameraId: cameraCode.value,
name: `ROI-${roiList.value.length + 1}`,
roiType: data.roi_type,
coordinates: data.coordinates,
@@ -251,7 +245,7 @@ function handlePush() {
content: '确定将此摄像头的所有ROI配置推送到边缘端',
async onOk() {
try {
await pushConfig(cameraId.value);
await pushConfig(cameraCode.value);
message.success('推送成功');
} catch (err: any) {
message.error(err?.message || '推送失败请检查AI服务是否启用');
@@ -286,7 +280,7 @@ function handlePush() {
<div class="page-header">
<div class="header-left">
<Button size="small" @click="goBack">返回</Button>
<h3>{{ cameraId }} - ROI配置</h3>
<h3>{{ cameraCode }} - ROI配置</h3>
</div>
<div class="header-right">
<Button