fix(aiot): ROI配置页面显示应用名而不是camera_code

问题:ROI配置页面显示camera_code(技术标识符),用户体验差
修复:
- 摄像头选择器显示应用名
- 页面标题显示应用名(如:测试区域A - ROI配置)
- camera_code仅作为后台标识符使用,不暴露给用户

影响页面:/aiot/device/roi
This commit is contained in:
2026-02-13 15:52:58 +08:00
parent bf93a1afec
commit 792424717a

View File

@@ -47,6 +47,7 @@ const router = useRouter();
// ==================== 摄像头选择 ====================
const cameraCode = ref('');
const currentCamera = ref<AiotDeviceApi.Camera | null>(null);
const showCameraSelector = ref(false);
const cameraOptions = ref<
@@ -74,6 +75,8 @@ onMounted(async () => {
const q = route.query;
if (q.cameraCode) {
cameraCode.value = String(q.cameraCode);
// 加载摄像头信息以获取应用名
await loadCurrentCamera();
await buildSnapUrl();
loadRois();
} else {
@@ -84,6 +87,19 @@ onMounted(async () => {
// ==================== 摄像头加载与选择 ====================
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 {
@@ -91,7 +107,7 @@ async function loadCameraOptions() {
const list = res.list || [];
cameraOptions.value = list.map((cam: AiotDeviceApi.Camera) => ({
value: cam.cameraCode || '',
label: `${cam.cameraCode || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
label: `${cam.app || cam.stream}${cam.srcUrl ? ` (${cam.srcUrl})` : ''}`,
camera: cam,
}));
} catch {
@@ -105,6 +121,7 @@ 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();
@@ -280,7 +297,7 @@ function handlePush() {
<div class="page-header">
<div class="header-left">
<Button size="small" @click="goBack">返回</Button>
<h3>{{ cameraCode }} - ROI配置</h3>
<h3>{{ currentCamera?.app || cameraCode }} - ROI配置</h3>
</div>
<div class="header-right">
<Button