From 071320bfd133cbe074d43c80d8ad4075af7ff13b Mon Sep 17 00:00:00 2001 From: qinjian Date: Thu, 21 Aug 2025 09:42:40 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B8=85=E9=99=A4=E8=B0=83?= =?UTF-8?q?=E8=AF=95=E6=97=A5=E5=BF=97=EF=BC=8C=E5=8F=AA=E4=BF=9D=E7=95=99?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=97=A5=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wuyuanbiaoba/components/CameraView.jsx | 90 +++++++++---------- .../components/RealtimeCharts.jsx | 12 +-- .../sections/wuyuanbiaoba/container/index.jsx | 32 +++---- server/tcpProxy/index.js | 38 ++++---- 4 files changed, 81 insertions(+), 91 deletions(-) diff --git a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx index 10bd9f6..9b26fb8 100644 --- a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx +++ b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx @@ -76,10 +76,7 @@ const CameraView = ({ canvas.style.width = rect.width + "px"; canvas.style.height = rect.height + "px"; - console.log("resizeCanvas: 画布大小已调整", { - width: rect.width, - height: rect.height, - }); + // console.log("resizeCanvas: 画布大小已调整", { width: rect.width, height: rect.height }); // 延迟调用applyTransform，确保画布已经完全设置好 setTimeout(() => { @@ -95,14 +92,12 @@ const CameraView = ({ if (img.naturalWidth && img.naturalHeight) { setVideoNaturalWidth(img.naturalWidth); setVideoNaturalHeight(img.naturalHeight); - console.log( - `handleImageLoad: 视频原始分辨率: ${img.naturalWidth}x${img.naturalHeight}` - ); + // console.log(`handleImageLoad: 视频原始分辨率: ${img.naturalWidth}x${img.naturalHeight}`); } resizeCanvas(); // 视频加载完成后，确保重新绘制矩形框 setTimeout(() => { - console.log("handleImageLoad: 延迟重绘矩形框"); + // console.log("handleImageLoad: 延迟重绘矩形框"); redrawAllRectangles(); }, 200); } @@ -229,7 +224,7 @@ const CameraView = ({ (target) => target.id === clickedRectangle.id ); if (targetData) { - console.log("点击矩形框，弹出标靶详情:", targetData); + // console.log("点击矩形框，弹出标靶详情:", targetData); onRectangleClick(targetData); } } @@ -317,13 +312,13 @@ const CameraView = ({ setRectangles((prev) => [...prev, newRect]); - console.log("新建矩形:", newRect); + // console.log("新建矩形:", newRect); if (selectedTemplate) { - console.log("使用模板参数:", selectedTemplate); + // console.log("使用模板参数:", selectedTemplate); } else { - console.log("使用默认参数"); + // console.log("使用默认参数"); } - logRectangleData(); + // logRectangleData(); } }; // 拖拽已存在的矩形 const dragExistingRectangle = (mouseX, mouseY) => { @@ -703,15 +698,15 @@ const CameraView = ({ const handleSave = useCallback(async () => { // 防止重复保存 if (isSaving) { - console.log("正在保存中，忽略重复请求"); + // console.log("正在保存中，忽略重复请求"); return; } - console.log("=== 保存矩形信息 ==="); - console.log("矩形总数:", rectangles.length); + // console.log("=== 保存矩形信息 ==="); + // console.log("矩形总数:", rectangles.length); if (rectangles.length === 0) { - console.log("没有创建任何矩形"); + // console.log("没有创建任何矩形"); return; } @@ -720,7 +715,7 @@ const CameraView = ({ try { // 组装指定格式的数据 const targets = {}; - console.log(rectangles, "当前矩形数据"); + // console.log(rectangles, "当前矩形数据"); rectangles.forEach((rect, index) => { targets[index.toString()] = { @@ -758,7 +753,7 @@ const CameraView = ({ }, }; - console.log("格式化数据:"); + // console.log("格式化数据:"); // 手动序列化以保持浮点数格式 const jsonString = JSON.stringify(outputData, null, 2).replace( @@ -770,7 +765,7 @@ const CameraView = ({ const success = sendMessage(jsonString); if (success) { - console.log("数据已发送到服务器"); + // console.log("数据已发送到服务器"); // 保存成功后刷新标靶列表数据 setTimeout(() => { @@ -832,14 +827,14 @@ const CameraView = ({ // 监听视频尺寸变化，确保重新绘制 useEffect(() => { if (videoNaturalWidth && videoNaturalHeight) { - console.log("视频尺寸已更新，重新绘制矩形框"); + // console.log("视频尺寸已更新，重新绘制矩形框"); redrawAllRectangles(); } }, [videoNaturalWidth, videoNaturalHeight]); // 监听矩形列表变化，自动重绘 useEffect(() => { - console.log("矩形列表发生变化，重新绘制:", rectangles); + // console.log("矩形列表发生变化，重新绘制:", rectangles); // 使用requestAnimationFrame来优化重绘性能 const rafId = requestAnimationFrame(() => { redrawAllRectangles(); @@ -848,27 +843,22 @@ const CameraView = ({ return () => cancelAnimationFrame(rafId); }, [rectangles]); - // 强制刷新矩形框的函数 - const forceRefreshRectangles = useCallback(() => { - console.log("强制刷新矩形框"); - redrawAllRectangles(); - }, []); // 从标靶数据初始化矩形框 useEffect(() => { - console.log("targets 或 loading 状态变化:", { - targets, - loading, - targetsLength: targets?.length, - }); + // console.log("targets 或 loading 状态变化:", { + // targets, + // loading, + // targetsLength: targets?.length, + // }); if (!loading && targets && targets.length > 0) { - console.log("从标靶数据初始化矩形框:", targets); + // console.log("从标靶数据初始化矩形框:", targets); const initialRectangles = targets .map((target) => { const rectangleArea = target.rectangleArea; - console.log("处理标靶:", target.id, "矩形区域:", rectangleArea); + // console.log("处理标靶:", target.id, "矩形区域:", rectangleArea); if ( rectangleArea && rectangleArea.x !== undefined && @@ -896,17 +886,17 @@ const CameraView = ({ }) .filter((rect) => rect !== null); // 过滤掉空值 - console.log("生成的矩形框数据:", initialRectangles); - console.log("当前矩形框数据:", rectangles); - console.log( - "标靶数据详情:", - targets.map((t) => ({ id: t.id, rectangleArea: t.rectangleArea })) - ); + // console.log("生成的矩形框数据:", initialRectangles); + // console.log("当前矩形框数据:", rectangles); + // console.log( + // "标靶数据详情:", + // targets.map((t) => ({ id: t.id, rectangleArea: t.rectangleArea })) + // ); // 总是根据targets数据更新rectangles，确保数据同步 - console.log("强制更新矩形框数据以确保与targets同步"); + // console.log("强制更新矩形框数据以确保与targets同步"); setRectangles(initialRectangles); - console.log("已从标靶数据强制更新矩形框:", initialRectangles); + // console.log("已从标靶数据强制更新矩形框:", initialRectangles); // 矩形框更新后，延迟一下确保重绘 const timeoutId = setTimeout(() => { @@ -915,18 +905,18 @@ const CameraView = ({ return () => clearTimeout(timeoutId); } else if (!loading && (!targets || targets.length === 0)) { // 如果没有标靶数据，清空矩形框 - console.log( - "标靶数据为空，准备清空矩形框，当前矩形框数量:", - rectangles.length - ); + // console.log( + // "标靶数据为空，准备清空矩形框，当前矩形框数量:", + // rectangles.length + // ); setRectangles([]); - console.log("标靶数据为空，已清空矩形框"); + // console.log("标靶数据为空，已清空矩形框"); } }, [targets, loading]); // 只依赖targets和loading状态 // 专门监听rectangles变化并重绘 useEffect(() => { - console.log("rectangles状态变化:", rectangles); + // console.log("rectangles状态变化:", rectangles); // 矩形状态改变时立即重绘 if (videoNaturalWidth && videoNaturalHeight) { // 如果矩形数组为空，强制清除画布 @@ -935,7 +925,7 @@ const CameraView = ({ if (canvas) { const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); - console.log("强制清除画布，因为矩形数组为空"); + // console.log("强制清除画布，因为矩形数组为空"); } } else { redrawAllRectangles(); @@ -958,7 +948,7 @@ const CameraView = ({ // 监听选中标靶变化，重新绘制高亮效果 useEffect(() => { - console.log("选中标靶ID变化:", selectedTargetId); + // console.log("选中标靶ID变化:", selectedTargetId); // 只有在有矩形框的时候才重绘，使用requestAnimationFrame优化性能 if (rectangles.length > 0) { const rafId = requestAnimationFrame(() => { diff --git a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx index 74f1e63..324e4d2 100644 --- a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx +++ b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx @@ -31,7 +31,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { // 添加数据验证 if (!Array.isArray(tableData)) { - console.warn('tableData is not an array:', tableData); + // console.warn('tableData is not an array:', tableData); return
数据格式错误
; } @@ -300,11 +300,11 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => { }; // 添加调试信息 - useEffect(() => { - console.log('RealtimeCharts - tableData:', tableData); - console.log('RealtimeCharts - xChartData:', xChartData); - console.log('RealtimeCharts - yChartData:', yChartData); - }, [tableData, xChartData, yChartData]); + // useEffect(() => { + // console.log('RealtimeCharts - tableData:', tableData); + // console.log('RealtimeCharts - xChartData:', xChartData); + // console.log('RealtimeCharts - yChartData:', yChartData); + // }, [tableData, xChartData, yChartData]); // 如果没有数据，显示空状态 if (!tableData || tableData.length === 0) { diff --git a/client/src/sections/wuyuanbiaoba/container/index.jsx b/client/src/sections/wuyuanbiaoba/container/index.jsx index b91b2fa..ba3de9c 100644 --- a/client/src/sections/wuyuanbiaoba/container/index.jsx +++ b/client/src/sections/wuyuanbiaoba/container/index.jsx @@ -86,7 +86,7 @@ const WuyuanbiaobaContent = () => { // 初始化空的实时数据表格 setRealtimeData([]); setTableData([]); - console.log("数据已初始化，等待实时数据...", import.meta.env.MODE); + // console.log("数据已初始化，等待实时数据...", import.meta.env.MODE); }, []); // 模板数据加载完成后，默认选中内置模板 @@ -98,11 +98,11 @@ const WuyuanbiaobaContent = () => { ); if (builtinTemplate) { setSelectedTemplate("builtin_1"); - console.log("默认选中内置模板:", builtinTemplate.name); + // console.log("默认选中内置模板:", builtinTemplate.name); } else { // 如果没有内置模板，选择第一个模板 setSelectedTemplate(tempListData[0].key); - console.log("默认选中第一个模板:", tempListData[0].name); + // console.log("默认选中第一个模板:", tempListData[0].name); } } }, [templatesLoading, tempListData, selectedTemplate]); @@ -110,15 +110,15 @@ const WuyuanbiaobaContent = () => { // WebSocket连接成功后的处理 useEffect(() => { if (isConnected) { - console.log("WebSocket已连接，等待实时数据..."); + // console.log("WebSocket已连接，等待实时数据..."); } else { - console.log("WebSocket未连接"); + // console.log("WebSocket未连接"); } }, [isConnected]); // 调试实时数据订阅状态 useEffect(() => { - // console.log('实时数据订阅状态:', { + // console.log('实时数据订阅状态:', { // hasData: !!realtimeDataSubscription.latest, // dataCount: realtimeDataSubscription.data?.length || 0, // latestTimestamp: realtimeDataSubscription.latest?.timestamp, @@ -177,24 +177,24 @@ const WuyuanbiaobaContent = () => { setCurrentEditTarget(target); setTargetDetailModalMode("edit"); setTargetDetailModalVisible(true); - console.log("编辑标靶:", target); + // console.log("编辑标靶:", target); }; // 选中标靶的处理函数 const handleSelectTarget = (target) => { setSelectedTargetId(target.id); - console.log("选中标靶:", target); + // console.log("选中标靶:", target); }; // 清除选中标靶的处理函数 const handleClearSelection = () => { setSelectedTargetId(null); - console.log("清除标靶选中状态"); + // console.log("清除标靶选中状态"); }; // 处理矩形框点击事件 const handleRectangleClick = (targetData) => { - console.log("矩形框被点击，打开标靶详情:", targetData); + // console.log("矩形框被点击，打开标靶详情:", targetData); setCurrentEditTarget(targetData); setTargetDetailModalMode("edit"); setTargetDetailModalVisible(true); @@ -203,7 +203,7 @@ const WuyuanbiaobaContent = () => { // 选择模板的处理函数 const handleTemplateSelect = (templateKey) => { setSelectedTemplate(templateKey); - console.log("选中模板:", templateKey); + // console.log("选中模板:", templateKey); }; // 添加新模板的处理函数 @@ -222,7 +222,7 @@ const WuyuanbiaobaContent = () => { // 模态框确认处理函数 const handleTemplateModalOk = (templateInfo) => { - console.log(templateInfo, "templateInfo"); + // console.log(templateInfo, "templateInfo"); let success = false; if (templateModalMode === "add") { @@ -269,7 +269,7 @@ const WuyuanbiaobaContent = () => { if (success) { setTargetDetailModalVisible(false); setCurrentEditTarget(null); - console.log("更新标靶信息:", targetInfo); + // console.log("更新标靶信息:", targetInfo); } else { console.error("更新标靶失败"); // 可以添加用户提示 @@ -284,7 +284,7 @@ const WuyuanbiaobaContent = () => { // 删除标靶处理函数 const handleDeleteTarget = (targetKey) => { - console.log("开始删除标靶:", targetKey); + // console.log("开始删除标靶:", targetKey); const success = deleteTarget(targetKey); if (success) { @@ -294,7 +294,7 @@ const WuyuanbiaobaContent = () => { if (selectedTargetId === targetKey) { setSelectedTargetId(null); } - console.log("删除标靶成功:", targetKey); + // console.log("删除标靶成功:", targetKey); // 强制刷新标靶数据，确保UI立即更新 setTimeout(() => { @@ -307,7 +307,7 @@ const WuyuanbiaobaContent = () => { }; // 标靶-一键清零 const onClickClearAll = () => { - console.log("一键清零操作"); + // console.log("一键清零操作"); sendMessage( JSON.stringify({ _from: "setup", diff --git a/server/tcpProxy/index.js b/server/tcpProxy/index.js index cef885e..645f423 100644 --- a/server/tcpProxy/index.js +++ b/server/tcpProxy/index.js @@ -10,7 +10,7 @@ function setupTcpProxy(conf) { // 从配置中获取端口，如果没有则使用默认端口 const wsPort = (conf && conf.port) ? Number(conf.port) + 1 : 5001; // WebSocket端口比HTTP端口大1 - console.log(`准备在端口 ${wsPort} 启动WebSocket服务器`); + // console.log(`准备在端口 ${wsPort} 启动WebSocket服务器`); const wss = new WebSocket.Server({ port: wsPort, @@ -19,7 +19,7 @@ function setupTcpProxy(conf) { }); wss.on('connection', (ws, request) => { - console.log(`WebSocket连接建立，来自: ${request.socket.remoteAddress}`); + // console.log(`WebSocket连接建立，来自: ${request.socket.remoteAddress}`); // 创建TCP连接 const tcpClient = new net.Socket(); @@ -28,8 +28,8 @@ function setupTcpProxy(conf) { // TCP连接成功 tcpClient.connect(process.env.TCP_PORT || TCP_PORT, process.env.TCP_HOST || TCP_HOST, () => { - console.log(process.env); - console.log(`TCP连接已建立到 ${TCP_HOST}:${TCP_PORT}`); + // console.log(process.env); + // console.log(`TCP连接已建立到 ${TCP_HOST}:${TCP_PORT}`); }); // TCP接收数据，转发到WebSocket @@ -40,7 +40,7 @@ function setupTcpProxy(conf) { textData = data.toString('utf8'); // console.log('收到TCP数据片段:', textData.length, '字节'); } catch (e) { - console.log('TCP数据无法解析为文本'); + // console.log('TCP数据无法解析为文本'); return; } @@ -55,7 +55,7 @@ function setupTcpProxy(conf) { // 从缓冲区移除已处理的消息 tcpDataBuffer = tcpDataBuffer.substring(endIndex + 2); - console.log('提取到完整消息:', completeMessage.length, '字节'); + // console.log('提取到完整消息:', completeMessage.length, '字节'); // 转发完整消息到WebSocket if (ws.readyState === WebSocket.OPEN) { @@ -65,13 +65,13 @@ function setupTcpProxy(conf) { if (err) { console.error('WebSocket发送数据错误:', err); } else { - console.log('完整消息已转发到WebSocket客户端'); + // console.log('完整消息已转发到WebSocket客户端'); } }); } } - console.log('缓冲区剩余数据:', tcpDataBuffer.length, '字节'); + // console.log('缓冲区剩余数据:', tcpDataBuffer.length, '字节'); }); // WebSocket接收数据，转发到TCP @@ -86,28 +86,28 @@ function setupTcpProxy(conf) { messageStr = data; // console.log('WebSocket数据(字符串):', messageStr); } else { - console.warn('收到未知类型数据，已忽略:', typeof data); + // console.warn('收到未知类型数据，已忽略:', typeof data); return; } // 转发字符串数据到TCP服务器 if (tcpClient.writable) { - console.log('准备发送数据到TCP服务器:', messageStr); + // console.log('准备发送数据到TCP服务器:', messageStr); // 检查数据大小 const dataSize = Buffer.byteLength(messageStr, 'utf8'); - console.log(`数据大小: ${dataSize} bytes`); + // console.log(`数据大小: ${dataSize} bytes`); // 直接发送完整数据 tcpClient.write(messageStr + '\n\n', (err) => { if (err) { console.error('TCP发送数据错误:', err); } else { - console.log('数据已发送到TCP服务器'); + // console.log('数据已发送到TCP服务器'); } }); } else { - console.warn('TCP连接不可写，无法发送数据'); + // console.warn('TCP连接不可写，无法发送数据'); } }); @@ -122,7 +122,7 @@ function setupTcpProxy(conf) { // TCP连接关闭 tcpClient.on('close', () => { - console.log('TCP连接已关闭'); + // console.log('TCP连接已关闭'); tcpDataBuffer = ''; // 清理缓冲区 if (ws.readyState === WebSocket.OPEN) { ws.close(); @@ -131,7 +131,7 @@ function setupTcpProxy(conf) { // WebSocket连接关闭 ws.on('close', () => { - console.log('WebSocket连接已关闭'); + // console.log('WebSocket连接已关闭'); tcpDataBuffer = ''; // 清理缓冲区 if (tcpClient.writable) { tcpClient.destroy(); @@ -148,10 +148,10 @@ function setupTcpProxy(conf) { }); wss.on('listening', () => { - console.log(`TCP代理WebSocket服务器已启动在端口 ${wsPort}，路径: /tcp-proxy`); - console.log(`局域网连接地址: ws://[本机IP]:${wsPort}/tcp-proxy`); - console.log(`本地连接地址: ws://localhost:${wsPort}/tcp-proxy`); - console.log(`注意：请确保防火墙允许端口 ${wsPort} 的访问`); + // console.log(`TCP代理WebSocket服务器已启动在端口 ${wsPort}，路径: /tcp-proxy`); + // console.log(`局域网连接地址: ws://[本机IP]:${wsPort}/tcp-proxy`); + // console.log(`本地连接地址: ws://localhost:${wsPort}/tcp-proxy`); + // console.log(`注意：请确保防火墙允许端口 ${wsPort} 的访问`); }); wss.on('error', (err) => {