修复:状态栏位置调整 + HEAD请求检测截图状态
1. 状态栏位置调整 - 列顺序改为:应用名 -> 流ID -> 状态 -> 拉流地址 -> ROI 2. 状态检测优化 - 使用 HEAD 请求替代 GET,避免下载完整图片 - 使用 fetch API 直接发送 HEAD 请求到 /snap/image - 大幅提升状态检测性能 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -36,10 +36,14 @@ import {
|
||||
pushAllConfig,
|
||||
saveCamera,
|
||||
} from '#/api/aiot/device';
|
||||
import { wvpRequestClient } from '#/api/aiot/request';
|
||||
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();
|
||||
|
||||
// ==================== 列表状态 ====================
|
||||
@@ -54,9 +58,9 @@ const total = ref(0);
|
||||
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: 'app', width: 120 },
|
||||
{ title: '流ID', dataIndex: 'stream', width: 150 },
|
||||
{ title: '拉流地址', dataIndex: 'srcUrl', ellipsis: true },
|
||||
{ title: 'ROI', key: 'roiCount', width: 80, align: 'center' as const },
|
||||
{ title: '操作', key: 'actions', width: 240, fixed: 'right' as const },
|
||||
@@ -138,21 +142,19 @@ function loadRoiCounts() {
|
||||
}
|
||||
}
|
||||
|
||||
function loadCameraStatus() {
|
||||
async function loadCameraStatus() {
|
||||
for (const cam of cameraList.value) {
|
||||
const cameraCode = cam.cameraCode;
|
||||
if (!cameraCode) continue;
|
||||
wvpRequestClient
|
||||
.get('/aiot/device/roi/snap/image', {
|
||||
params: { cameraCode },
|
||||
responseType: 'blob',
|
||||
})
|
||||
.then(() => {
|
||||
cameraStatus.value = { ...cameraStatus.value, [cameraCode]: true };
|
||||
})
|
||||
.catch(() => {
|
||||
cameraStatus.value = { ...cameraStatus.value, [cameraCode]: false };
|
||||
});
|
||||
// 使用 fetch HEAD 请求检测截图是否可用,避免下载完整图片
|
||||
try {
|
||||
const token = await getWvpToken();
|
||||
const url = `${apiURL}/aiot/device/roi/snap/image?cameraCode=${encodeURIComponent(cameraCode)}&access-token=${encodeURIComponent(token)}`;
|
||||
const res = await fetch(url, { method: 'HEAD' });
|
||||
cameraStatus.value = { ...cameraStatus.value, [cameraCode]: res.ok };
|
||||
} catch {
|
||||
cameraStatus.value = { ...cameraStatus.value, [cameraCode]: false };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user