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