diff --git a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx
index 86e40bb..f7dcd38 100644
--- a/client/src/sections/wuyuanbiaoba/components/CameraView.jsx
+++ b/client/src/sections/wuyuanbiaoba/components/CameraView.jsx
@@ -575,7 +575,7 @@ const CameraView = ({
// 如果没有矩形框数据且没有正在绘制的预览矩形，也记录一下
if ((!rectangles || rectangles.length === 0) && !currentDrawingRect) {
- console.log("redrawAllRectangles: 没有矩形框数据且没有预览矩形");
+ // console.log("redrawAllRectangles: 没有矩形框数据且没有预览矩形");
return;
}
diff --git a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx
index a352d58..2dd6d74 100644
--- a/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx
+++ b/client/src/sections/wuyuanbiaoba/components/RealtimeCharts.jsx
@@ -1,5 +1,12 @@
-import React, { useMemo, useEffect, useRef, useState, useCallback } from "react";
-import { Typography, Badge, Button, Space } from "antd";
+import React, {
+ useMemo,
+ useEffect,
+ useRef,
+ useState,
+ useCallback,
+} from "react";
+import { Typography, Badge, Button, Space,InputNumber } from "antd";
+import { DownloadOutlined } from "@ant-design/icons";
import {
Chart as ChartJS,
CategoryScale,
@@ -25,7 +32,7 @@ ChartJS.register(
const { Title } = Typography;
-const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
+const RealtimeCharts = ({ tableData, lastUpdateTime, onDataExport,exportCount = 200, setExportCount }) => {
const xChartRef = useRef(null);
const yChartRef = useRef(null);
@@ -119,7 +126,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
// 获取 deviceId 到 desc 的映射
const deviceDescMap = useMemo(() => {
const map = {};
- tableData.forEach(item => {
+ tableData.forEach((item) => {
if (item.deviceId && item.desc) {
map[item.deviceId] = item.desc;
}
@@ -130,18 +137,18 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
useEffect(() => {
if (deviceIds.length > 0) {
const initialVisible = {};
- deviceIds.forEach(deviceId => {
+ deviceIds.forEach((deviceId) => {
initialVisible[deviceId] = true; // 默认所有标靶都显示
});
- setVisibleTargets(prev => ({ ...initialVisible, ...prev }));
+ setVisibleTargets((prev) => ({ ...initialVisible, ...prev }));
}
- }, [deviceIds.join(',')]);
+ }, [deviceIds.join(",")]);
// 切换标靶显示状态的函数
const toggleTargetVisibility = useCallback((deviceId) => {
- setVisibleTargets(prev => ({
+ setVisibleTargets((prev) => ({
...prev,
- [deviceId]: !prev[deviceId]
+ [deviceId]: !prev[deviceId],
}));
// 同时控制两个图表的显示状态
@@ -149,8 +156,12 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
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);
+ 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);
@@ -167,29 +178,32 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
}, []);
// 全部显示/隐藏的函数
- const toggleAllTargets = useCallback((visible) => {
- const newVisibleTargets = {};
- deviceIds.forEach(deviceId => {
- newVisibleTargets[deviceId] = visible;
- });
- setVisibleTargets(newVisibleTargets);
+ const toggleAllTargets = useCallback(
+ (visible) => {
+ const newVisibleTargets = {};
+ deviceIds.forEach((deviceId) => {
+ newVisibleTargets[deviceId] = visible;
+ });
+ setVisibleTargets(newVisibleTargets);
- // 同时控制两个图表
- const xChart = xChartRef.current;
- const yChart = yChartRef.current;
+ // 同时控制两个图表
+ 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);
- });
+ 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]);
+ xChart.update();
+ yChart.update();
+ }
+ },
+ [deviceIds]
+ );
// 准备X轴图表数据
const xChartData = useMemo(() => {
@@ -229,7 +243,10 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
return { labels, datasets };
} catch (error) {
- console.error(`${new Date().toLocaleString()} - 准备X轴图表数据出错:`, error);
+ console.error(
+ `${new Date().toLocaleString()} - 准备X轴图表数据出错:`,
+ error
+ );
return { labels: [], datasets: [] };
}
}, [tableData, visibleTargets]);
@@ -272,130 +289,142 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
return { labels, datasets };
} catch (error) {
- console.error(`${new Date().toLocaleString()} - 准备Y轴图表数据出错:`, error);
+ console.error(
+ `${new Date().toLocaleString()} - 准备Y轴图表数据出错:`,
+ error
+ );
return { labels: [], datasets: [] };
}
}, [tableData, visibleTargets]);
// Chart.js配置选项 - 移到组件内部以访问 deviceDescMap
- const chartOptions = useMemo(() => ({
- responsive: true,
- maintainAspectRatio: false,
- interaction: {
- mode: "index",
- intersect: false,
- },
- plugins: {
- legend: {
- display: false, // 隐藏默认图例，使用自定义控制器
+ const chartOptions = useMemo(
+ () => ({
+ responsive: true,
+ maintainAspectRatio: false,
+ interaction: {
+ mode: "index",
+ intersect: false,
},
- tooltip: {
- filter: function (tooltipItem) {
- return tooltipItem.parsed.y !== null;
+ plugins: {
+ legend: {
+ display: false, // 隐藏默认图例，使用自定义控制器
},
- callbacks: {
- title: function(context) {
- return context[0].label; // 显示时间
+ tooltip: {
+ filter: function (tooltipItem) {
+ return tooltipItem.parsed.y !== null;
},
- label: function(context) {
- const deviceId = context.dataset.label;
- const deviceDesc = deviceDescMap[deviceId] || deviceId;
- const value = context.parsed.y;
- return `${deviceDesc}: ${value}`;
- }
- }
- },
- },
- scales: {
- x: {
- display: true,
- title: {
- display: true,
- text: "时间",
- },
- ticks: {
- maxRotation: 45,
- minRotation: 0,
- font: {
- size: 10,
+ callbacks: {
+ title: function (context) {
+ return context[0].label; // 显示时间
+ },
+ label: function (context) {
+ const deviceId = context.dataset.label;
+ const deviceDesc = deviceDescMap[deviceId] || deviceId;
+ const value = context.parsed.y;
+ return `${deviceDesc}: ${value}`;
+ },
},
},
},
- y: {
- display: true,
- title: {
+ scales: {
+ x: {
display: true,
- font: {
- size: 12,
+ title: {
+ display: true,
+ text: "时间",
+ },
+ ticks: {
+ maxRotation: 45,
+ minRotation: 0,
+ font: {
+ size: 10,
+ },
},
},
- ticks: {
- font: {
- size: 10,
+ y: {
+ display: true,
+ title: {
+ display: true,
+ font: {
+ size: 12,
+ },
+ },
+ ticks: {
+ font: {
+ size: 10,
+ },
},
},
},
- },
- elements: {
- point: {
- radius: 3,
- hoverRadius: 5,
- },
- line: {
- tension: 0,
+ elements: {
+ point: {
+ radius: 3,
+ hoverRadius: 5,
+ },
+ line: {
+ tension: 0,
+ },
},
- },
- }), [deviceDescMap]);
+ }),
+ [deviceDescMap]
+ );
// X轴图表配置
- const xChartOptions = useMemo(() => ({
- ...chartOptions,
- plugins: {
- ...chartOptions.plugins,
- title: {
- display: true,
- text: "X轴位移数据",
- font: {
- size: 16,
+ const xChartOptions = useMemo(
+ () => ({
+ ...chartOptions,
+ plugins: {
+ ...chartOptions.plugins,
+ title: {
+ display: true,
+ text: "X轴位移数据",
+ font: {
+ size: 16,
+ },
},
},
- },
- scales: {
- ...chartOptions.scales,
- y: {
- ...chartOptions.scales.y,
- title: {
- ...chartOptions.scales.y.title,
- text: "X值(mm)",
+ scales: {
+ ...chartOptions.scales,
+ y: {
+ ...chartOptions.scales.y,
+ title: {
+ ...chartOptions.scales.y.title,
+ text: "X值(mm)",
+ },
},
},
- },
- }), [chartOptions]);
+ }),
+ [chartOptions]
+ );
// Y轴图表配置
- const yChartOptions = useMemo(() => ({
- ...chartOptions,
- plugins: {
- ...chartOptions.plugins,
- title: {
- display: true,
- text: "Y轴位移数据",
- font: {
- size: 16,
+ const yChartOptions = useMemo(
+ () => ({
+ ...chartOptions,
+ plugins: {
+ ...chartOptions.plugins,
+ title: {
+ display: true,
+ text: "Y轴位移数据",
+ font: {
+ size: 16,
+ },
},
},
- },
- scales: {
- ...chartOptions.scales,
- y: {
- ...chartOptions.scales.y,
- title: {
- ...chartOptions.scales.y.title,
- text: "Y值(mm)",
+ scales: {
+ ...chartOptions.scales,
+ y: {
+ ...chartOptions.scales.y,
+ title: {
+ ...chartOptions.scales.y.title,
+ text: "Y值(mm)",
+ },
},
},
- },
- }), [chartOptions]);
+ }),
+ [chartOptions]
+ );
// 如果没有数据，显示空状态
if (!tableData || tableData.length === 0) {
@@ -442,7 +471,14 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
flexDirection: "column",
}}
>
-
+ <Title
+ level={4}
+ style={{
+ marginBottom: "16px",
+ display: "flex",
+ alignItems: "center",
+ }}
+ >
实时数据图
<Badge
status="processing"
@@ -450,15 +486,50 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
style={{ marginLeft: "16px", fontSize: "12px" }}
/>
<Badge
- status="default"
+ status="success"
text={`图表数据采样频率:1Hz`}
style={{ marginLeft: "16px", fontSize: "12px" }}
/>
+ <Badge
+ status="default"
+ text={`导出数据条数配置`}
+ style={{ marginLeft: "16px", fontSize: "12px" }}
+ />
+ <InputNumber
+ min={1}
+ max={1000}
+ value={exportCount}
+ onChange={setExportCount}
+ style={{ marginLeft: 16, width: 80 }}
+ step={1}
+ />
+ <Button
+ style={{ marginLeft: 8 }}
+ icon={<DownloadOutlined />}
+ onClick={() => onDataExport(exportCount)}
+ >
+ 导出
+ </Button>
{/* 统一的图例控制器 */}
-
-
显示控制
+
+
+ 显示控制
+
-