From d79561e2bcf5d43dfaafabf3fd0e341643c61ff8 Mon Sep 17 00:00:00 2001 From: qinjian Date: Thu, 30 Oct 2025 15:50:38 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=88=B7=E6=96=B0=EF=BC=8C=E6=B5=8B=E7=82=B9=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E6=8C=87=E4=BB=A4=E9=87=8D=E5=A4=8D=E5=8F=91=E9=80=81=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wuyuanbiaoba/components/CameraView.jsx | 24 ++++++++++++------- .../sections/wuyuanbiaoba/container/index.jsx | 4 ++++ .../wuyuanbiaoba/hooks/useTargetStorage.js | 24 +++++++++++++++---- package.json | 2 +- server/tcpProxy/index.js | 2 +- 5 files changed, 41 insertions(+), 15 deletions(-) diff --git a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx index f7dcd38..d03f850 100644 --- a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx +++ b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx @@ -1,12 +1,16 @@ import React, { useRef, useEffect, useState, useCallback } from "react"; import { useWebSocket } from "../actions/websocket.jsx"; import { message } from "antd"; -import { useTargetStorage } from "../hooks/useTargetStorage.js"; +// import { useTargetStorage } from "../hooks/useTargetStorage.js"; + const CameraView = ({ selectedTargetId, onClearSelection, onRectangleClick, selectedTemplate, + targets = [], + targetsLoading = false, + onRefreshTargets, }) => { const imgRef = useRef(null); const canvasRef = useRef(null); @@ -43,8 +47,8 @@ const CameraView = ({ // 使用WebSocket连接 const { isConnected, sendMessage } = useWebSocket(); - // 使用标靶数据管理Hook - const { targets, loading, refreshTargets } = useTargetStorage(); + // 从 props 接收标靶数据，而不是调用 Hook + // const { targets, loading, refreshTargets } = useTargetStorage(); const minScale = 0.2; const maxScale = 4.0; @@ -797,7 +801,9 @@ const CameraView = ({ // 保存成功后刷新标靶列表数据 setTimeout(() => { - refreshTargets(); + if (onRefreshTargets) { + onRefreshTargets(); + } }, 500); // 延迟500ms确保服务器处理完成 // 清除选中状态 @@ -822,7 +828,7 @@ const CameraView = ({ rectangles, isConnected, sendMessage, - refreshTargets, + onRefreshTargets, onClearSelection, isSaving, ]); @@ -882,12 +888,12 @@ const CameraView = ({ useEffect(() => { // console.log("targets 或 loading 状态变化:", { // targets, - // loading, + // targetsLoading, // targetsLength: targets?.length, // }); if ( - !loading && + !targetsLoading && targets && targets.length > 0 && videoNaturalWidth > 0 && @@ -943,7 +949,7 @@ const CameraView = ({ redrawAllRectangles(); }, 100); return () => clearTimeout(timeoutId); - } else if (!loading && (!targets || targets.length === 0)) { + } else if (!targetsLoading && (!targets || targets.length === 0)) { // 如果没有标靶数据，清空矩形框 // console.log( // "标靶数据为空，准备清空矩形框，当前矩形框数量:", @@ -952,7 +958,7 @@ const CameraView = ({ setRectangles([]); // console.log("标靶数据为空，已清空矩形框"); } - }, [targets, loading, videoNaturalWidth, videoNaturalHeight]); // 只依赖targets和loading状态 + }, [targets, targetsLoading, videoNaturalWidth, videoNaturalHeight]); // 专门监听rectangles变化并重绘 useEffect(() => { diff --git a/client/src/sections/wuyuanbiaoba/container/index.jsx b/client/src/sections/wuyuanbiaoba/container/index.jsx index 5d02741..7934030 100644 --- a/client/src/sections/wuyuanbiaoba/container/index.jsx +++ b/client/src/sections/wuyuanbiaoba/container/index.jsx @@ -517,6 +517,10 @@ const WuyuanbiaobaContent = () => { selectedTemplate={ selectedTemplate ? getTemplateByKey(selectedTemplate) : null } + // 传递标靶数据，避免重复调用 Hook + targets={targetListData} + targetsLoading={targetsLoading} + onRefreshTargets={refreshTargets} /> {/* 右侧 Target List / Temp List 区域 */} diff --git a/client/src/sections/wuyuanbiaoba/hooks/useTargetStorage.js b/client/src/sections/wuyuanbiaoba/hooks/useTargetStorage.js index ca9c958..2863876 100644 --- a/client/src/sections/wuyuanbiaoba/hooks/useTargetStorage.js +++ b/client/src/sections/wuyuanbiaoba/hooks/useTargetStorage.js @@ -34,8 +34,9 @@ export const useTargetStorage = () => { // 发送获取标靶数据的命令 const fetchTargets = useCallback(() => { + if (!isConnected) { - console.warn('WebSocket未连接，无法获取标靶数据'); + console.warn('⚠️ WebSocket未连接，无法获取标靶数据'); return; } @@ -49,8 +50,11 @@ export const useTargetStorage = () => { })); if (!success) { + console.error('❌ 发送获取标靶数据命令失败'); setError('发送获取标靶数据命令失败'); setLoading(false); + } else { + // console.log(' getPoints 请求已发送'); } }, [isConnected, sendMessage]); @@ -63,7 +67,7 @@ export const useTargetStorage = () => { // 检查是否为空对象 if (!responseValues || Object.keys(responseValues).length === 0) { - console.log('服务端返回空的标靶数据'); + console.log('⚠️ 服务端返回空的标靶数据'); setTargets([]); setError(null); setLoading(false); @@ -120,8 +124,20 @@ export const useTargetStorage = () => { // WebSocket连接建立后自动获取数据 useEffect(() => { - if (isConnected) { - fetchTargets(); + let isMounted = true; + + if (isConnected && isMounted) { + // 添加延迟，避免立即重复触发 + const timer = setTimeout(() => { + if (isMounted) { + fetchTargets(); + } + }, 100); + + return () => { + isMounted = false; + clearTimeout(timer); + }; } }, [isConnected, fetchTargets]); diff --git a/package.json b/package.json index 90c8fe3..35e24e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wuyuanbiaoba-web", - "version": "1.0.2", + "version": "1.0.3", "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/server/tcpProxy/index.js b/server/tcpProxy/index.js index f3731d6..05fe5a5 100644 --- a/server/tcpProxy/index.js +++ b/server/tcpProxy/index.js @@ -92,7 +92,7 @@ function setupTcpProxy(conf) { // 转发字符串数据到TCP服务器 if (tcpClient.writable) { - // console.log('准备发送数据到TCP服务器:', messageStr); + console.log('准备发送数据到TCP服务器:', messageStr); // 检查数据大小 const dataSize = Buffer.byteLength(messageStr, 'utf8');