feat:将认证后的重定向地址更新为上位机，优化标靶名称处理，并为实时图表实现交互式标靶显示/隐藏功能

client/src/layout/container/index.jsx

@@ -11,7 +11,7 @@ export default (props) => {
 
    useEffect(() => {
       if (!sessionStorage.getItem("user")) {
-         window.location.replace("/signin");
+         window.location.replace("/wuyuanbiaoba");
       }
    }, []);
 

client/src/sections/wuyuanbiaoba/components/CameraView.jsx

@@ -286,8 +286,7 @@ const CameraView = ({
          const templateParams = selectedTemplate
             ? {
                  // 从模板中获取参数
-                 name:
+                 name: `target${rectangles.length + 1}` || selectedTemplate.name,
-                    selectedTemplate.name || `target${rectangles.length + 1}`,
                  radius: selectedTemplate.physicalRadius || 40.0,
                  isReferencePoint: selectedTemplate.isBaseline || false,
                  gradientThreshold:

client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx

@@ -1,5 +1,5 @@
-import React, { useMemo, useEffect, useRef } from "react";
+import React, { useMemo, useEffect, useRef, useState, useCallback } from "react";
-import { Typography, Badge } from "antd";
+import { Typography, Badge, Button, Space } from "antd";
 import {
    Chart as ChartJS,
    CategoryScale,
@@ -29,9 +29,11 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
    const xChartRef = useRef(null);
    const yChartRef = useRef(null);
 
+   // 添加标靶显示状态控制
+   const [visibleTargets, setVisibleTargets] = useState({});
+
    // 添加数据验证
    if (!Array.isArray(tableData)) {
-      // console.warn('tableData is not an array:', tableData);
       return <div>数据格式错误</div>;
    }
 
@@ -104,7 +106,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
 
          return { labels, deviceIds, timeGroups, sortedTimes };
       } catch (error) {
-         console.error("数据采样出错:", error);
+         console.error(`${new Date().toLocaleString()} - 数据采样出错:`, error);
          return {
             labels: [],
             deviceIds: [],
@@ -114,6 +116,72 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
       }
    };
 
+   // 初始化可见目标状态
+   const { deviceIds } = sampleData(tableData);
+   useEffect(() => {
+      if (deviceIds.length > 0) {
+         const initialVisible = {};
+         deviceIds.forEach(deviceId => {
+            initialVisible[deviceId] = true; // 默认所有标靶都显示
+         });
+         setVisibleTargets(prev => ({ ...initialVisible, ...prev }));
+      }
+   }, [deviceIds.join(',')]);
+
+   // 切换标靶显示状态的函数
+   const toggleTargetVisibility = useCallback((deviceId) => {
+      setVisibleTargets(prev => ({
+         ...prev,
+         [deviceId]: !prev[deviceId]
+      }));
+
+      // 同时控制两个图表的显示状态
+      const xChart = xChartRef.current;
+      const yChart = yChartRef.current;
+
+      if (xChart && yChart) {
+         const xDatasetIndex = xChart.data.datasets.findIndex(dataset => dataset.label === deviceId);
+         const yDatasetIndex = yChart.data.datasets.findIndex(dataset => dataset.label === deviceId);
+
+         if (xDatasetIndex !== -1 && yDatasetIndex !== -1) {
+            const isVisible = xChart.isDatasetVisible(xDatasetIndex);
+
+            // 切换显示状态
+            xChart.setDatasetVisibility(xDatasetIndex, !isVisible);
+            yChart.setDatasetVisibility(yDatasetIndex, !isVisible);
+
+            // 更新图表
+            xChart.update();
+            yChart.update();
+         }
+      }
+   }, []);
+
+   // 全部显示/隐藏的函数
+   const toggleAllTargets = useCallback((visible) => {
+      const newVisibleTargets = {};
+      deviceIds.forEach(deviceId => {
+         newVisibleTargets[deviceId] = visible;
+      });
+      setVisibleTargets(newVisibleTargets);
+
+      // 同时控制两个图表
+      const xChart = xChartRef.current;
+      const yChart = yChartRef.current;
+
+      if (xChart && yChart) {
+         xChart.data.datasets.forEach((_, index) => {
+            xChart.setDatasetVisibility(index, visible);
+         });
+         yChart.data.datasets.forEach((_, index) => {
+            yChart.setDatasetVisibility(index, visible);
+         });
+
+         xChart.update();
+         yChart.update();
+      }
+   }, [deviceIds]);
+
    // 准备X轴图表数据
    const xChartData = useMemo(() => {
       try {
@@ -145,15 +213,16 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                pointHoverRadius: 5,
                tension: 0,
                connectNulls: false,
+               hidden: !visibleTargets[deviceId], // 根据状态控制显示
             };
          });
 
          return { labels, datasets };
       } catch (error) {
-         console.error("准备X轴图表数据出错:", error);
+         console.error(`${new Date().toLocaleString()} - 准备X轴图表数据出错:`, error);
          return { labels: [], datasets: [] };
       }
-   }, [tableData]);
+   }, [tableData, visibleTargets]);
 
    // 准备Y轴图表数据
    const yChartData = useMemo(() => {
@@ -186,15 +255,16 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                pointHoverRadius: 5,
                tension: 0,
                connectNulls: false,
+               hidden: !visibleTargets[deviceId], // 根据状态控制显示
             };
          });
 
          return { labels, datasets };
       } catch (error) {
-         console.error("准备Y轴图表数据出错:", error);
+         console.error(`${new Date().toLocaleString()} - 准备Y轴图表数据出错:`, error);
          return { labels: [], datasets: [] };
       }
-   }, [tableData]);
+   }, [tableData, visibleTargets]);
 
    // Chart.js配置选项
    const chartOptions = {
@@ -206,14 +276,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
       },
       plugins: {
          legend: {
-            position: "bottom",
+            display: false, // 隐藏默认图例，使用自定义控制器
-            labels: {
-               usePointStyle: true,
-               padding: 20,
-               font: {
-                  size: 12,
-               },
-            },
          },
          tooltip: {
             filter: function (tooltipItem) {
@@ -312,13 +375,6 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
       },
    };
 
-   // 添加调试信息
-   // useEffect(() => {
-   // console.log('RealtimeCharts - tableData:', tableData);
-   // console.log('RealtimeCharts - xChartData:', xChartData);
-   // console.log('RealtimeCharts - yChartData:', yChartData);
-   // }, [tableData, xChartData, yChartData]);
-
    // 如果没有数据，显示空状态
    if (!tableData || tableData.length === 0) {
       return (
@@ -378,6 +434,41 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
             />
          </Title>
 
+         {/* 统一的图例控制器 */}
+         <div style={{ marginBottom: "16px", padding: "12px", backgroundColor: "#fafafa", borderRadius: "6px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>显示控制</div>
+            <Space wrap>
+               <Button
+                  size="small"
+                  onClick={() => toggleAllTargets(true)}
+                  type="primary"
+               >
+                  全部显示
+               </Button>
+               <Button
+                  size="small"
+                  onClick={() => toggleAllTargets(false)}
+               >
+                  全部隐藏
+               </Button>
+               {deviceIds.map(deviceId => (
+                  <Button
+                     key={deviceId}
+                     size="small"
+                     type={visibleTargets[deviceId] ? "primary" : "default"}
+                     style={{
+                        borderColor: getDeviceColor(deviceId),
+                        color: visibleTargets[deviceId] ? "#fff" : getDeviceColor(deviceId),
+                        backgroundColor: visibleTargets[deviceId] ? getDeviceColor(deviceId) : "#fff"
+                     }}
+                     onClick={() => toggleTargetVisibility(deviceId)}
+                  >
+                     {deviceId}
+                  </Button>
+               ))}
+            </Space>
+         </div>
+
          <div
             style={{
                flex: 1,

server/tcpProxy/index.js

@@ -63,7 +63,7 @@ function setupTcpProxy(conf) {
                // console.log('消息内容:', completeMessage);
                ws.send(completeMessage, (err) => {
                   if (err) {
-                     console.error('WebSocket发送数据错误:', err);
+                     console.error(`[${new Date().toLocaleString()}] WebSocket发送数据错误:`, err);
                   } else {
                      // console.log('完整消息已转发到WebSocket客户端');
                   }
@@ -101,7 +101,7 @@ function setupTcpProxy(conf) {
             // 直接发送完整数据
             tcpClient.write(messageStr + '\n\n', (err) => {
                if (err) {
-                  console.error('TCP发送数据错误:', err);
+                  console.error(`[${new Date().toLocaleString()}] TCP发送数据错误:`, err);
                } else {
                   // console.log('数据已发送到TCP服务器');
                }
@@ -113,7 +113,7 @@ function setupTcpProxy(conf) {
 
       // TCP连接错误处理
       tcpClient.on('error', (err) => {
-         console.error('TCP连接错误:', err);
+         console.error(`[${new Date().toLocaleString()}] TCP连接错误:`, err);
          tcpDataBuffer = ''; // 清理缓冲区
          if (ws.readyState === WebSocket.OPEN) {
             ws.close(1011, 'TCP连接错误');
@@ -140,7 +140,7 @@ function setupTcpProxy(conf) {
 
       // WebSocket错误处理
       ws.on('error', (err) => {
-         console.error('WebSocket错误:', err);
+         console.error(`[${new Date().toLocaleString()}] WebSocket错误:`, err);
          if (tcpClient.writable) {
             tcpClient.destroy();
          }
@@ -155,7 +155,7 @@ function setupTcpProxy(conf) {
    });
 
    wss.on('error', (err) => {
-      console.error('WebSocket服务器错误:', err);
+   console.error(`[${new Date().toLocaleString()}] WebSocket服务器错误:`, err);
    });
 
    return wss;