Compare commits
4 Commits
dc71da002e
...
2e0efc7c8c
| Author | SHA1 | Date | |
|---|---|---|---|
| 2e0efc7c8c | |||
| 6ac978a2ac | |||
| 286f4a1a03 | |||
| bf3ca08d7b |
@@ -7,12 +7,13 @@
|
||||
*/
|
||||
import type { AiotDeviceApi } from '#/api/aiot/device';
|
||||
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import {
|
||||
AutoComplete,
|
||||
Badge,
|
||||
Button,
|
||||
Checkbox,
|
||||
@@ -84,6 +85,26 @@ const editForm = reactive<Partial<AiotDeviceApi.Camera>>({
|
||||
ffmpegCmdKey: '',
|
||||
});
|
||||
|
||||
// 从已有摄像头中提取应用名选项
|
||||
const appOptions = computed(() => {
|
||||
// 统计每个应用名下的摄像头数量
|
||||
const appCounts = new Map<string, number>();
|
||||
cameraList.value.forEach((cam) => {
|
||||
if (cam.app) {
|
||||
appCounts.set(cam.app, (appCounts.get(cam.app) || 0) + 1);
|
||||
}
|
||||
});
|
||||
|
||||
// 转换为选项数组,按摄像头数量降序排序
|
||||
return Array.from(appCounts.entries())
|
||||
.map(([app, count]) => ({
|
||||
label: `${app} (${count}个)`,
|
||||
value: app,
|
||||
count,
|
||||
}))
|
||||
.sort((a, b) => b.count - a.count);
|
||||
});
|
||||
|
||||
// ==================== 数据加载 ====================
|
||||
|
||||
async function loadData() {
|
||||
@@ -163,10 +184,12 @@ function resetForm() {
|
||||
*/
|
||||
function autoFillStreamId() {
|
||||
const app = editForm.app;
|
||||
if (!app || editForm.id) return; // 编辑模式不自动填充
|
||||
if (!app) return;
|
||||
|
||||
// 过滤出同一应用下的摄像头
|
||||
const sameAppCameras = cameraList.value.filter((c) => c.app === app);
|
||||
// 过滤出同一应用下的摄像头(排除当前编辑的摄像头)
|
||||
const sameAppCameras = cameraList.value.filter(
|
||||
(c) => c.app === app && c.id !== editForm.id,
|
||||
);
|
||||
|
||||
// 获取已用的纯数字编号
|
||||
const usedNumbers = sameAppCameras
|
||||
@@ -486,23 +509,24 @@ onMounted(() => {
|
||||
<Input :value="editForm.cameraCode" disabled />
|
||||
</Form.Item>
|
||||
<Form.Item label="应用名" required>
|
||||
<Input
|
||||
<AutoComplete
|
||||
v-model:value="editForm.app"
|
||||
placeholder="场景分类,如:大堂、停车场、入口"
|
||||
:disabled="!!editForm.id"
|
||||
: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>
|
||||
<Input
|
||||
v-model:value="editForm.stream"
|
||||
placeholder="在当前场景下的唯一标识,如:001(系统会自动编号)"
|
||||
:disabled="!!editForm.id"
|
||||
/>
|
||||
<div style="margin-top: 4px; font-size: 12px; color: #999">
|
||||
在当前场景下唯一,系统会根据应用名自动编号
|
||||
在当前场景下唯一,系统会根据应用名自动编号(可手动修改)
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item label="拉流地址" required>
|
||||
|
||||
Reference in New Issue
Block a user