Browse Source

feat: 优化高级设置 Hook,调整配置获取和保存逻辑

master
qinjian 3 weeks ago
parent
commit
37066e2184
  1. 15
      client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx
  2. 68
      client/src/sections/wuyuanbiaoba/hooks/useAdvancedSettings.js

15
client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx

@ -18,7 +18,6 @@ import {
import {
SettingOutlined,
SaveOutlined,
ReloadOutlined,
DatabaseOutlined,
ClockCircleOutlined,
BellOutlined,
@ -44,6 +43,15 @@ const AdvancedSettings = ({ onLogout }) => {
updateLocalSettings,
} = useAdvancedSettings();
// isReady true
const hasFetchedRef = React.useRef(false);
useEffect(() => {
if (isReady && !hasFetchedRef.current) {
fetchAllSettings();
hasFetchedRef.current = true;
}
}, [isReady, fetchAllSettings]);
// settings
const deviceId = settings.deviceId;
const fps = settings.dataFps;
@ -52,7 +60,7 @@ const AdvancedSettings = ({ onLogout }) => {
const enableFiltering = settings.filterConfig?.enable ?? true;
const filterMethod = settings.filterConfig?.method ?? 'median';
const windowSize = settings.filterConfig?.size ?? 5;
const filterThreshold = Math.abs(settings.filterConfig?.threshold ?? 0.1);
const filterThreshold = settings.filterConfig?.threshold ?? 0.1;
const flowThreshold = settings.filterConfig?.imgThreshold ?? 10.0;
const enableMqtt = settings.mqttConfig?.enable ?? true;
const brokerAddress = settings.mqttConfig?.mqtt?.broker ?? '';
@ -476,9 +484,6 @@ const AdvancedSettings = ({ onLogout }) => {
滤波阈值
</div>
<InputNumber
min={0}
max={100}
step={0.1}
value={filterThreshold}
onChange={setFilterThreshold}
addonAfter="mm"

68
client/src/sections/wuyuanbiaoba/hooks/useAdvancedSettings.js

@ -111,7 +111,7 @@ const useAdvancedSettings = () => {
useEffect(() => {
if (setIdResponse?.values?.operate !== undefined) {
if (setIdResponse.values.operate) {
message.success('设备编码设置成功');
} else {
message.error('设备编码设置失败');
}
@ -138,7 +138,7 @@ const useAdvancedSettings = () => {
useEffect(() => {
if (setDataFpsResponse?.values?.operate !== undefined) {
if (setDataFpsResponse.values.operate) {
message.success('数据帧率设置成功');
} else {
message.error('数据帧率设置失败');
}
@ -165,7 +165,7 @@ const useAdvancedSettings = () => {
useEffect(() => {
if (setAlertResponse?.values?.operate !== undefined) {
if (setAlertResponse.values.operate) {
message.success('异常监控配置设置成功');
} else {
message.error('异常监控配置设置失败');
}
@ -192,7 +192,7 @@ const useAdvancedSettings = () => {
useEffect(() => {
if (setWinResponse?.values?.operate !== undefined) {
if (setWinResponse.values.operate) {
message.success('滤波配置设置成功');
} else {
message.error('滤波配置设置失败');
}
@ -219,7 +219,7 @@ const useAdvancedSettings = () => {
useEffect(() => {
if (setMqttResponse?.values?.operate !== undefined) {
if (setMqttResponse.values.operate) {
message.success('MQTT 配置设置成功');
} else {
message.error('MQTT 配置设置失败');
}
@ -376,26 +376,26 @@ const useAdvancedSettings = () => {
console.log('🔄 开始获取所有高级配置...');
// 依次发送所有读取命令
fetchDeviceId();
// 添加延迟避免命令过快
setTimeout(() => fetchDataFps(), 100);
setTimeout(() => fetchAlertConfig(), 200);
setTimeout(() => fetchFilterConfig(), 300);
setTimeout(() => fetchMqttConfig(), 400);
// 所有指令都用 setTimeout 包裹,首个指令也延迟,避免第一个指令丢包
fetchDeviceId()
setTimeout(() => fetchDeviceId(), 50);
setTimeout(() => fetchDataFps(), 150);
setTimeout(() => fetchAlertConfig(), 250);
setTimeout(() => fetchFilterConfig(), 350);
setTimeout(() => fetchMqttConfig(), 450);
// 等待所有响应
setTimeout(() => {
setLoading(false);
console.log('配置获取完成');
console.log('配置获取完成');
}, 2000);
}, [isConnected, isReady, fetchDeviceId, fetchDataFps, fetchAlertConfig, fetchFilterConfig, fetchMqttConfig]);
/**
* 保存所有配置
*/
const saveAllSettings = useCallback(() => {
const saveAllSettings = useCallback(async () => {
if (!isConnected) {
message.warning('WebSocket 未连接,无法保存配置');
return false;
@ -403,18 +403,25 @@ const useAdvancedSettings = () => {
if (!isReady) {
message.info('连接正在建立中,指令已加入队列...');
} else {
message.info('正在保存配置...');
}
// 依次发送所有设置命令
updateDeviceId(settings.deviceId);
setTimeout(() => updateDataFps(settings.dataFps), 100);
setTimeout(() => updateAlertConfig(settings.alertConfig), 200);
setTimeout(() => updateFilterConfig(settings.filterConfig), 300);
setTimeout(() => updateMqttConfig(settings.mqttConfig), 400);
return true;
// 依次发送所有设置命令,并收集每项的结果
const results = [];
results.push(await updateDeviceId(settings.deviceId));
results.push(await new Promise(resolve => setTimeout(() => resolve(updateDataFps(settings.dataFps)), 100)));
results.push(await new Promise(resolve => setTimeout(() => resolve(updateAlertConfig(settings.alertConfig)), 200)));
results.push(await new Promise(resolve => setTimeout(() => resolve(updateFilterConfig(settings.filterConfig)), 300)));
results.push(await new Promise(resolve => setTimeout(() => resolve(updateMqttConfig(settings.mqttConfig)), 400)));
// 判断是否全部成功
const allSuccess = results.every(r => r !== false);
if (allSuccess) {
message.success('保存成功');
return true;
} else {
message.error('保存失败');
return false;
}
}, [isConnected, isReady, settings, updateDeviceId, updateDataFps, updateAlertConfig, updateFilterConfig, updateMqttConfig]);
/**
@ -435,18 +442,7 @@ const useAdvancedSettings = () => {
}));
}, []);
/**
* WebSocket 连接建立后自动获取配置
*/
useEffect(() => {
if (isConnected) {
console.log('🔌 WebSocket 已连接,自动获取高级配置');
// 延迟获取,避免连接刚建立时发送命令
setTimeout(() => {
fetchAllSettings();
}, 500);
}
}, [isConnected, fetchAllSettings]);
// 组件应在需要时自行调用 fetchAllSettings,不再在 hook 内自动调用
return {
// 状态

Loading…
Cancel
Save