修复:状态栏位置 + 导入顺序 + 移除多余token

1. 状态栏位置修正
   - 正确位置:应用名 -> 流ID -> 拉流地址 -> 状态 -> ROI
   - 之前错误地放在了流ID和拉流地址之间

2. 修复导入顺序
   - useAppConfig应在script setup顶部导入
   - 避免apiURL未正确初始化的问题

3. 状态检测优化
   - /snap/image已免认证,移除access-token参数
   - 简化HEAD请求逻辑

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 16:50:24 +08:00
parent 0e73aa2b8d
commit 0aa45be41f

View File

@@ -10,6 +10,7 @@ import type { AiotDeviceApi } from '#/api/aiot/device';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useAppConfig } from '@vben/hooks';
import { Page } from '@vben/common-ui';
import {
@@ -36,12 +37,9 @@ import {
pushAllConfig,
saveCamera,
} from '#/api/aiot/device';
import { wvpRequestClient, getWvpToken } from '#/api/aiot/request';
defineOptions({ name: 'AiotDeviceCamera' });
import { useAppConfig } from '@vben/hooks';
const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
const router = useRouter();
@@ -60,8 +58,8 @@ const searchQuery = ref('');
const columns = [
{ title: '应用名', dataIndex: 'app', width: 100 },
{ title: '流ID', dataIndex: 'stream', width: 100 },
{ title: '状态', key: 'status', width: 60, align: 'center' as const },
{ title: '拉流地址', dataIndex: 'srcUrl', ellipsis: true },
{ title: '状态', key: 'status', width: 60, align: 'center' as const },
{ title: 'ROI', key: 'roiCount', width: 80, align: 'center' as const },
{ title: '操作', key: 'actions', width: 240, fixed: 'right' as const },
];
@@ -146,10 +144,9 @@ async function loadCameraStatus() {
for (const cam of cameraList.value) {
const cameraCode = cam.cameraCode;
if (!cameraCode) continue;
// 使用 fetch HEAD 请求检测截图是否可用,避免下载完整图片
// 使用 fetch HEAD 请求检测截图是否可用/snap/image 已免认证)
try {
const token = await getWvpToken();
const url = `${apiURL}/aiot/device/roi/snap/image?cameraCode=${encodeURIComponent(cameraCode)}&access-token=${encodeURIComponent(token)}`;
const url = `${apiURL}/aiot/device/roi/snap/image?cameraCode=${encodeURIComponent(cameraCode)}`;
const res = await fetch(url, { method: 'HEAD' });
cameraStatus.value = { ...cameraStatus.value, [cameraCode]: res.ok };
} catch {