功能:摄像头配置页面适配 cameraName

- 表格列:app+stream 改为摄像头名称
- 编辑弹窗:去掉应用名+流ID,改为摄像头名称(必填)
- app/stream 由后端自动处理,前端不再暴露
- Camera 类型新增 cameraName 字段
This commit is contained in:
2026-03-19 11:42:17 +08:00
parent 617cdc8c15
commit 8bce09a17a
2 changed files with 20 additions and 29 deletions

View File

@@ -30,6 +30,7 @@ export namespace AiotDeviceApi {
app?: string;
stream?: string;
cameraCode?: string; // 摄像头唯一编码
cameraName?: string; // 摄像头名称(用户自定义)
srcUrl?: string;
timeout?: number;
rtspType?: string; // '0'=TCP, '1'=UDP, '2'=Multicast

View File

@@ -56,8 +56,7 @@ const total = ref(0);
const searchQuery = ref('');
const columns = [
{ title: '应用名', dataIndex: 'app', width: 100 },
{ title: '流ID', dataIndex: 'stream', width: 100 },
{ title: '摄像头名称', dataIndex: 'cameraName', width: 150 },
{ title: '拉流地址', dataIndex: 'srcUrl', ellipsis: true },
{ title: '状态', key: 'status', width: 60, align: 'center' as const },
{ title: 'ROI', key: 'roiCount', width: 80, align: 'center' as const },
@@ -73,7 +72,8 @@ const mediaServerOptions = ref<{ label: string; value: string }[]>([]);
const editForm = reactive<Partial<AiotDeviceApi.Camera>>({
id: undefined,
type: 'default',
app: 'live',
cameraName: '',
app: '',
stream: '',
srcUrl: '',
timeout: 15,
@@ -177,7 +177,8 @@ function resetForm() {
Object.assign(editForm, {
id: undefined,
type: 'default',
app: 'live',
cameraName: '',
app: '',
stream: '',
srcUrl: '',
timeout: 15,
@@ -238,6 +239,7 @@ function handleEdit(row: AiotDeviceApi.Camera) {
Object.assign(editForm, {
id: row.id,
type: row.type || 'default',
cameraName: row.cameraName || '',
app: row.app || '',
stream: row.stream || '',
cameraCode: row.cameraCode || '',
@@ -257,18 +259,21 @@ function handleEdit(row: AiotDeviceApi.Camera) {
}
async function handleSave() {
if (!editForm.app?.trim()) {
message.warning('请输入应用名');
return;
}
if (!editForm.stream?.trim()) {
message.warning('请输入流ID');
if (!editForm.cameraName?.trim()) {
message.warning('请输入摄像头名称');
return;
}
if (!editForm.srcUrl?.trim()) {
message.warning('请输入拉流地址');
return;
}
// app/stream 由后端处理,前端如果没填则用 cameraName 作为 app
if (!editForm.app?.trim()) {
editForm.app = editForm.cameraName!.trim();
}
if (!editForm.stream?.trim()) {
editForm.stream = '001';
}
saving.value = true;
try {
await saveCamera({ ...editForm });
@@ -299,7 +304,7 @@ async function handleSave() {
function handleDelete(row: AiotDeviceApi.Camera) {
Modal.confirm({
title: '删除确认',
content: `确定删除摄像头 ${row.cameraCode || row.stream} `,
content: `确定删除摄像头 ${row.cameraName || row.cameraCode || row.stream} `,
okType: 'danger',
async onOk() {
try {
@@ -480,26 +485,11 @@ onMounted(() => {
<Form.Item v-if="editForm.id" label="摄像头编码">
<Input :value="editForm.cameraCode" disabled />
</Form.Item>
<Form.Item label="应用名" required>
<AutoComplete
v-model:value="editForm.app"
:options="appOptions"
placeholder="选择已有场景或输入新场景名"
allow-clear
@change="autoFillStreamId"
/>
<div style="margin-top: 4px; font-size: 12px; color: #999">
场景名称同一场景下可有多个摄像头可选择已有或输入新名称
</div>
</Form.Item>
<Form.Item label="流ID" required>
<Form.Item label="摄像头名称" required>
<Input
v-model:value="editForm.stream"
placeholder="在当前场景下的唯一标识001系统会自动编号"
v-model:value="editForm.cameraName"
placeholder="请输入摄像头名称,如:大堂吧台、室外停车场"
/>
<div style="margin-top: 4px; font-size: 12px; color: #999">
在当前场景下唯一系统会根据应用名自动编号可手动修改
</div>
</Form.Item>
<Form.Item label="拉流地址" required>
<Input