XW-AIOT/iot-device-management-frontend
4
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

改造: 全局参数配置页面支持按设备管理

Browse Source
This commit is contained in:
16337
2026-04-10 11:26:01 +08:00
parent 6eea4e81cd
commit 03d381567b
2 changed files with 216 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web-antd/src/api/aiot/device/index.ts
View File

@@ -231,10 +231,12 @@ export async function getSnapUrl(cameraCode: string, force = false): Promise<str
// ==================== 算法管理 ====================
/** 算法列表 */
export function getAlgorithmList() {
/** 算法列表（可选带设备参数） */
export function getAlgorithmList(deviceId?: string) {
const params = deviceId ? { deviceId } : {};
return wvpRequestClient.get<AiotDeviceApi.Algorithm[]>(
'/aiot/device/algorithm/list',
{ params },
);
}
@@ -246,6 +248,16 @@ export function saveAlgoGlobalParams(algoCode: string, globalParams: string) {
);
}
/** 获取设备级算法参数 */
export function getDeviceAlgoParams(deviceId: string) {
return wvpRequestClient.get(`/aiot/device/algorithm/device-params/${deviceId}`);
}
/** 保存设备级算法参数 */
export function saveDeviceAlgoParams(deviceId: string, algoCode: string, params: string) {
return wvpRequestClient.post(`/aiot/device/algorithm/device-params/${deviceId}/${algoCode}`, { params });
}
// ==================== 算法绑定 ====================
/** 绑定算法到 ROI */

216
apps/web-antd/src/views/aiot/device/algorithm/index.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import type { AiotDeviceApi } from '#/api/aiot/device';
import type { AiotEdgeApi } from '#/api/aiot/edge';
import { computed, onMounted, ref } from 'vue';
import { computed, onMounted, ref, watch } from 'vue';
import {
Button,
@@ -9,11 +10,18 @@ import {
Form,
InputNumber,
message,
Select,
Spin,
Tabs,
Tag,
} from 'ant-design-vue';
import { getAlgorithmList, saveAlgoGlobalParams } from '#/api/aiot/device';
import {
getAlgorithmList,
saveAlgoGlobalParams,
saveDeviceAlgoParams,
} from '#/api/aiot/device';
import { getDeviceList } from '#/api/aiot/edge';
// 参数名中英文映射（与 AlgorithmParamEditor 保持一致）
const paramNameMap: Record<string, string> = {
@@ -57,11 +65,21 @@ const activeTab = ref<string>('');
const loading = ref(false);
const saving = ref(false);
// 边缘设备
const edgeDevices = ref<AiotEdgeApi.Device[]>([]);
const selectedDeviceId = ref<string>('');
const deviceLoading = ref(false);
// 全局默认参数缓存（用于对比设备参数是否与全局一致）
const globalParamsCache = ref<Record<string, Record<string, any>>>({});
// 每个算法的表单数据: { algoCode: { paramKey: value } }
const formDataMap = ref<Record<string, Record<string, any>>>({});
// 记录用户修改过的字段
const dirtyFieldsMap = ref<Record<string, Set<string>>>({});
const isDeviceMode = computed(() => !!selectedDeviceId.value);
const currentAlgo = computed(() => {
return algorithms.value.find((a) => a.algoCode === activeTab.value);
});
@@ -80,6 +98,11 @@ const currentFormData = computed(() => {
return formDataMap.value[activeTab.value] || {};
});
// 当前算法的全局默认值（非 schema default，而是保存的 globalParams）
const currentGlobalParams = computed(() => {
return globalParamsCache.value[activeTab.value] || {};
});
function getParamLabel(key: string): string {
return paramNameMap[key] || key;
}
@@ -88,17 +111,79 @@ function getParamDesc(key: string): string | undefined {
return paramDescMap[key];
}
/** 判断设备参数值是否与全局默认一致 */
function isSameAsGlobal(key: string): boolean {
if (!isDeviceMode.value) return false;
const form = currentFormData.value;
const globalVal = currentGlobalParams.value[key];
const schemaDefault = getSchemaDefault(key);
// 全局值：优先 globalParams，回退 schema default
const effectiveGlobal = globalVal !== undefined ? globalVal : schemaDefault;
return form[key] === effectiveGlobal;
}
onMounted(async () => {
await Promise.all([loadEdgeDevices(), loadAlgorithms()]);
});
// 切换设备时重新加载算法参数
watch(selectedDeviceId, async () => {
await loadAlgorithms();
});
async function loadEdgeDevices() {
deviceLoading.value = true;
try {
const list = await getDeviceList();
edgeDevices.value = Array.isArray(list) ? list : [];
} catch {
edgeDevices.value = [];
} finally {
deviceLoading.value = false;
}
}
async function loadAlgorithms() {
loading.value = true;
try {
const data = await getAlgorithmList();
const deviceId = selectedDeviceId.value || undefined;
const data = await getAlgorithmList(deviceId);
algorithms.value = Array.isArray(data) ? data : [];
// 如果是设备模式且全局缓存为空，先加载一次全局参数
if (isDeviceMode.value && Object.keys(globalParamsCache.value).length === 0) {
try {
const globalData = await getAlgorithmList();
const globalAlgos = Array.isArray(globalData) ? globalData : [];
for (const algo of globalAlgos) {
const code = algo.algoCode || '';
try {
globalParamsCache.value[code] = JSON.parse(algo.globalParams || '{}');
} catch {
globalParamsCache.value[code] = {};
}
}
} catch { /* ignore */ }
}
// 非设备模式时更新全局缓存
if (!isDeviceMode.value) {
for (const algo of algorithms.value) {
const code = algo.algoCode || '';
try {
globalParamsCache.value[code] = JSON.parse(algo.globalParams || '{}');
} catch {
globalParamsCache.value[code] = {};
}
}
}
if (algorithms.value.length > 0) {
activeTab.value = algorithms.value[0]!.algoCode || '';
// 保持当前 tab 选中，如果当前 tab 不在列表中则切到第一个
const codes = algorithms.value.map((a) => a.algoCode);
if (!codes.includes(activeTab.value)) {
activeTab.value = algorithms.value[0]!.algoCode || '';
}
// 初始化所有算法的表单数据
for (const algo of algorithms.value) {
initFormData(algo);
@@ -174,8 +259,20 @@ async function handleSave() {
}
}
await saveAlgoGlobalParams(algo.algoCode, JSON.stringify(toSave));
message.success('全局参数保存成功');
if (isDeviceMode.value) {
// 设备级保存
await saveDeviceAlgoParams(selectedDeviceId.value, algo.algoCode, JSON.stringify(toSave));
const device = edgeDevices.value.find((d) => d.deviceId === selectedDeviceId.value);
const deviceLabel = device?.deviceName || device?.deviceId || selectedDeviceId.value;
message.success(`参数已保存并推送到 ${deviceLabel}`);
} else {
// 全局保存
await saveAlgoGlobalParams(algo.algoCode, JSON.stringify(toSave));
message.success('参数已保存并推送到所有设备');
// 更新全局缓存
globalParamsCache.value[algo.algoCode] = { ...toSave };
}
// 更新本地算法数据
algo.globalParams = JSON.stringify(toSave);
dirtyFieldsMap.value[algo.algoCode] = new Set();
@@ -205,17 +302,55 @@ function isSkippedField(key: string, schema: any): boolean {
// working_hours 和 list 类型在全局配置中跳过（场景差异大，不适合全局设置）
return key === 'working_hours' || schema.type === 'list';
}
// 设备选择器选项
const deviceOptions = computed(() => {
const options = [
{ value: '', label: '全局默认' },
];
for (const d of edgeDevices.value) {
options.push({
value: d.deviceId || '',
label: d.deviceName || d.deviceId || '未知设备',
});
}
return options;
});
const saveButtonText = computed(() => {
if (isDeviceMode.value) {
const device = edgeDevices.value.find((d) => d.deviceId === selectedDeviceId.value);
return `保存到 ${device?.deviceName || device?.deviceId || '设备'}`;
}
return '保存全局参数';
});
</script>
<template>
<div class="algo-global-config">
<Card title="算法全局参数配置">
<Card title="算法参数配置">
<template #extra>
<span class="card-tip">
配置各算法的全局默认参数，ROI 绑定时将以此为默认值
</span>
<div class="card-extra">
<span class="device-label">边缘设备：</span>
<Select
v-model:value="selectedDeviceId"
:options="deviceOptions"
:loading="deviceLoading"
style="width: 220px"
placeholder="选择设备"
/>
</div>
</template>
<div v-if="isDeviceMode" class="device-mode-tip">
<Tag color="blue">设备级配置</Tag>
<span>当前配置仅对选中的边缘设备生效，未单独设置的参数将继承全局默认值</span>
</div>
<div v-else class="global-mode-tip">
<Tag color="green">全局默认</Tag>
<span>配置各算法的全局默认参数，ROI 绑定时将以此为默认值</span>
</div>
<Spin :spinning="loading">
<div v-if="algorithms.length === 0 && !loading" class="empty-state">
暂无可用算法
@@ -267,6 +402,13 @@ function isSkippedField(key: string, schema: any): boolean {
>
恢复默认
</Button>
<Tag
v-if="isDeviceMode && isSameAsGlobal(String(key))"
color="default"
class="global-hint-tag"
>
与全局默认一致
</Tag>
</div>
<div v-if="getParamDesc(String(key))" class="param-desc">
{{ getParamDesc(String(key)) }}
@@ -296,6 +438,13 @@ function isSkippedField(key: string, schema: any): boolean {
>
恢复默认
</Button>
<Tag
v-if="isDeviceMode && isSameAsGlobal(String(key))"
color="default"
class="global-hint-tag"
>
与全局默认一致
</Tag>
</div>
<div v-if="getParamDesc(String(key))" class="param-desc">
{{ getParamDesc(String(key)) }}
@@ -314,7 +463,7 @@ function isSkippedField(key: string, schema: any): boolean {
:loading="saving"
@click="handleSave"
>
保存全局参数
{{ saveButtonText }}
</Button>
</div>
</Tabs.TabPane>
@@ -324,7 +473,12 @@ function isSkippedField(key: string, schema: any): boolean {
<!-- 帮助说明 -->
<div class="help-tip">
<span class="help-text">
全局参数为各算法的默认配置，当 ROI 绑定算法时未单独设置参数，将使用此处的全局默认值。修改后需重新推送配置到边缘端才能生效。
<template v-if="isDeviceMode">
设备级参数仅覆盖选中设备的配置。未设置的参数将使用全局默认值。修改后需重新推送配置到边缘端才能生效。
</template>
<template v-else>
全局参数为各算法的默认配置，当 ROI 绑定算法时未单独设置参数，将使用此处的全局默认值。修改后需重新推送配置到边缘端才能生效。
</template>
</span>
</div>
</Card>
@@ -336,9 +490,38 @@ function isSkippedField(key: string, schema: any): boolean {
padding: 16px;
}
.card-tip {
.card-extra {
display: flex;
align-items: center;
gap: 8px;
}
.device-label {
font-size: 13px;
color: #8c8c8c;
color: #595959;
white-space: nowrap;
}
.device-mode-tip,
.global-mode-tip {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
color: #595959;
}
.device-mode-tip {
background: #e6f7ff;
border: 1px solid #91d5ff;
}
.global-mode-tip {
background: #f6ffed;
border: 1px solid #b7eb8f;
}
.empty-state {
@@ -367,6 +550,11 @@ function isSkippedField(key: string, schema: any): boolean {
gap: 8px;
}
.global-hint-tag {
font-size: 11px;
color: #8c8c8c !important;
}
.param-desc {
margin-top: 4px;
font-size: 12px;