diff --git a/client/src/layout/container/index.jsx b/client/src/layout/container/index.jsx index b9e27fc..26ca6bb 100644 --- a/client/src/layout/container/index.jsx +++ b/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"); } }, []); diff --git a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx index fdf8434..d85589a 100644 --- a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx +++ b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx @@ -286,8 +286,7 @@ const CameraView = ({ const templateParams = selectedTemplate ? { // 从模板中获取参数 - name: - selectedTemplate.name || `target${rectangles.length + 1}`, + name: `target${rectangles.length + 1}` || selectedTemplate.name, radius: selectedTemplate.physicalRadius || 40.0, isReferencePoint: selectedTemplate.isBaseline || false, gradientThreshold: diff --git a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx index 10520bf..9215667 100644 --- a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx +++ b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx @@ -1,5 +1,5 @@ -import React, { useMemo, useEffect, useRef } from "react"; -import { Typography, Badge } from "antd"; +import React, { useMemo, useEffect, useRef, useState, useCallback } from "react"; +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
数据格式错误
; } @@ -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", - labels: { - usePointStyle: true, - padding: 20, - font: { - size: 12, - }, - }, + display: false, // 隐藏默认图例，使用自定义控制器 }, 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 }) => { /> + {/* 统一的图例控制器 */} +
+
显示控制
+ + + + {deviceIds.map(deviceId => ( + + ))} + +
+
{ 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;