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

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

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

Loading…
Cancel
Save