From 37066e2184292a25911e357705fcf1d2453867cf Mon Sep 17 00:00:00 2001 From: qinjian Date: Wed, 24 Dec 2025 15:38:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=AB=98=E7=BA=A7?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=20Hook=EF=BC=8C=E8=B0=83=E6=95=B4=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E8=8E=B7=E5=8F=96=E5=92=8C=E4=BF=9D=E5=AD=98=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/AdvancedSettings.jsx | 15 ++-- .../wuyuanbiaoba/hooks/useAdvancedSettings.js | 68 +++++++++---------- 2 files changed, 42 insertions(+), 41 deletions(-) diff --git a/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx b/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx index 5cd71ca..7a61947 100644 --- a/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx +++ b/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 }) => { 滤波阈值 { 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 { // 状态