功能:摄像头配置页面适配 cameraName
- 表格列:app+stream 改为摄像头名称 - 编辑弹窗:去掉应用名+流ID,改为摄像头名称(必填) - app/stream 由后端自动处理,前端不再暴露 - Camera 类型新增 cameraName 字段
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user