feat:添加数据导出功能

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;
       }
 

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,9 +178,10 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
    }, []);
 
    // 全部显示/隐藏的函数
-   const toggleAllTargets = useCallback((visible) => {
+   const toggleAllTargets = useCallback(
+      (visible) => {
          const newVisibleTargets = {};
-      deviceIds.forEach(deviceId => {
+         deviceIds.forEach((deviceId) => {
             newVisibleTargets[deviceId] = visible;
          });
          setVisibleTargets(newVisibleTargets);
@@ -189,7 +201,9 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
             xChart.update();
             yChart.update();
          }
-   }, [deviceIds]);
+      },
+      [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,13 +289,17 @@ 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(() => ({
+   const chartOptions = useMemo(
+      () => ({
          responsive: true,
          maintainAspectRatio: false,
          interaction: {
@@ -294,16 +315,16 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                   return tooltipItem.parsed.y !== null;
                },
                callbacks: {
-               title: function(context) {
+                  title: function (context) {
                      return context[0].label; // 显示时间
                   },
-               label: function(context) {
+                  label: function (context) {
                      const deviceId = context.dataset.label;
                      const deviceDesc = deviceDescMap[deviceId] || deviceId;
                      const value = context.parsed.y;
                      return `${deviceDesc}: ${value}`;
-               }
-            }
+                  },
+               },
             },
          },
          scales: {
@@ -345,10 +366,13 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                tension: 0,
             },
          },
-   }), [deviceDescMap]);
+      }),
+      [deviceDescMap]
+   );
 
    // X轴图表配置
-   const xChartOptions = useMemo(() => ({
+   const xChartOptions = useMemo(
+      () => ({
          ...chartOptions,
          plugins: {
             ...chartOptions.plugins,
@@ -370,10 +394,13 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                },
             },
          },
-   }), [chartOptions]);
+      }),
+      [chartOptions]
+   );
 
    // Y轴图表配置
-   const yChartOptions = useMemo(() => ({
+   const yChartOptions = useMemo(
+      () => ({
          ...chartOptions,
          plugins: {
             ...chartOptions.plugins,
@@ -395,7 +422,9 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                },
             },
          },
-   }), [chartOptions]);
+      }),
+      [chartOptions]
+   );
 
    // 如果没有数据，显示空状态
    if (!tableData || tableData.length === 0) {
@@ -442,7 +471,14 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
             flexDirection: "column",
          }}
       >
-         <Title level={4} style={{ marginBottom: "16px" }}>
+         <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>
          </Title>
 
          {/* 统一的图例控制器 */}
-         <div style={{ marginBottom: "16px", padding: "12px", backgroundColor: "#fafafa", borderRadius: "6px" }}>
-            <div style={{ marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>显示控制</div>
+         <div
+            style={{
+               marginBottom: "16px",
+               padding: "12px",
+               backgroundColor: "#fafafa",
+               borderRadius: "6px",
+            }}
+         >
+            <div
+               style={{
+                  marginBottom: "8px",
+                  fontSize: "14px",
+                  fontWeight: "500",
+               }}
+            >
+               显示控制
+            </div>
             <Space wrap>
                <Button
                   size="small"
@@ -467,10 +538,7 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                >
                   全部显示
                </Button>
-               <Button
-                  size="small"
-                  onClick={() => toggleAllTargets(false)}
-               >
+               <Button size="small" onClick={() => toggleAllTargets(false)}>
                   全部隐藏
                </Button>
                {deviceIds.map((deviceId, index) => (
@@ -480,8 +548,12 @@ const RealtimeCharts = ({ tableData, lastUpdateTime }) => {
                      type={visibleTargets[deviceId] ? "primary" : "default"}
                      style={{
                         borderColor: getDeviceColor(index),
-                        color: visibleTargets[deviceId] ? "#fff" : getDeviceColor(index),
-                        backgroundColor: visibleTargets[deviceId] ? getDeviceColor(index) : "#fff"
+                        color: visibleTargets[deviceId]
+                           ? "#fff"
+                           : getDeviceColor(index),
+                        backgroundColor: visibleTargets[deviceId]
+                           ? getDeviceColor(index)
+                           : "#fff",
                      }}
                      onClick={() => toggleTargetVisibility(deviceId)}
                   >

client/src/sections/wuyuanbiaoba/container/index.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Tabs, Typography } from "antd";
-import { EyeOutlined } from "@ant-design/icons";
+import ExcelJS from "exceljs";
+
 import {
    CameraView,
    TargetList,
@@ -17,7 +18,7 @@ import {
 } from "../actions/websocket.jsx";
 import { useTemplateStorage } from "../hooks/useTemplateStorage.js";
 import { useTargetStorage } from "../hooks/useTargetStorage.js";
-
+import { useRef } from "react";
 const { Title } = Typography;
 
 // 内部组件，使用WebSocket hook
@@ -26,7 +27,29 @@ const WuyuanbiaobaContent = () => {
 
    // 订阅实时数据
    const realtimeDataSubscription = useWebSocketSubscription("dev", "data");
+   const realtimeBufferRef = useRef([]);
+   const exportCountRef = useRef(200);
+   // 设置导出数据条数
+   const setExportCount = (count) => {
+      exportCountRef.current = count;
+   };
+   // 数据缓冲区数据维护函数
+   const pushToRealtimeBuffer = (newDataGroup) => {
+      // newDataGroup: { time: "2025-09-29 01:40:57.091", data: [...] }
+      const now = Date.now();
+      const group = {
+         ...newDataGroup,
+         _bufferTimestamp: now,
+      };
 
+      // 合并到缓冲区
+      realtimeBufferRef.current = [...realtimeBufferRef.current, group];
+
+      // 只保留最近200条数据
+      if (realtimeBufferRef.current.length > exportCountRef.current) {
+         realtimeBufferRef.current = realtimeBufferRef.current.slice(-exportCountRef.current);
+      }
+   };
    const {
       templates: tempListData,
       loading: templatesLoading,
@@ -78,7 +101,7 @@ const WuyuanbiaobaContent = () => {
          desc: item.desc, // 添加 desc 字段
          xValue: item.x,
          yValue: item.y,
-         updateTime: data.time || new Date().toLocaleString(),
+         updateTime: data.time,
       }));
    };
 
@@ -156,23 +179,120 @@ const WuyuanbiaobaContent = () => {
                      })),
                   ];
 
-                  // 只保留最近25个数据点（25秒）
+                  // 只保留最近25个数据点
                   return updatedData.slice(-75); // 3个设备 * 25个时间点
                });
 
                // 更新实时数据表格（使用最新的采样数据）
-               setRealtimeData(newRealtimeData.map((point) => ({
+               setRealtimeData(
+                  newRealtimeData.map((point) => ({
                      ...point,
                      key: `realtime_${point.key}`,
                      updateTime: new Date(currentTime).toLocaleString(),
-               })));
+                  }))
+               );
             }
-
+            //维护两分钟的缓冲区
+            pushToRealtimeBuffer(realtimeDataSubscription.latest.values);
             setLastUpdateTime(new Date());
          }
       }
-   }, [realtimeDataSubscription.latest, lastSampleTime]);
+   }, [realtimeDataSubscription.latest]);
+
+   const dataExport = async () => {
+      const dataToExport = realtimeBufferRef.current;
+      if (dataToExport.length === 0) {
+         console.warn("没有数据可导出");
+         return;
+      }
+      // console.log('导出数据:', dataToExport);
+
+      // 收集所有出现过的desc，保持顺序且唯一
+      const descSet = [];
+      dataToExport.forEach((group) => {
+         if (Array.isArray(group.data)) {
+            group.data.forEach((point) => {
+               if (point && !descSet.includes(point.desc)) {
+                  descSet.push(point.desc);
+               }
+            });
+         }
+      });
 
+      // 构造表头
+      const columns = [{ header: "采集时间", key: "time", width: 24 }];
+      descSet.forEach((desc) => {
+         columns.push(
+            { header: `标靶${desc}X`, key: `x_${desc}`, width: 12 },
+            { header: `标靶${desc}Y`, key: `y_${desc}`, width: 12 }
+         );
+      });
+
+      // 创建工作簿和工作表
+      const workbook = new ExcelJS.Workbook();
+      const worksheet = workbook.addWorksheet("两分钟内数据");
+      worksheet.columns = columns;
+
+      // 填充数据
+      dataToExport.forEach((group) => {
+         const row = { time: group.time };
+         // 先清空所有desc对应的列
+         descSet.forEach((desc) => {
+            row[`x_${desc}`] = "";
+            row[`y_${desc}`] = "";
+         });
+         // 填充本组数据
+         group.data.forEach((point) => {
+            if (point && descSet.includes(point.desc)) {
+               row[`x_${point.desc}`] = point.x;
+               row[`y_${point.desc}`] = point.y;
+            }
+         });
+         worksheet.addRow(row);
+      });
+
+      // 设置表头样式
+      worksheet.getRow(1).font = { bold: true, color: { argb: "FF1F497D" } };
+      worksheet.getRow(1).alignment = {
+         vertical: "middle",
+         horizontal: "center",
+      };
+
+      // 设置边框样式
+      worksheet.eachRow((row, rowNumber) => {
+         row.eachCell((cell) => {
+            cell.border = {
+               top: { style: "thin" },
+               left: { style: "thin" },
+               bottom: { style: "thin" },
+               right: { style: "thin" },
+            };
+            cell.alignment = { vertical: "middle", horizontal: "center" };
+         });
+      });
+
+      // 导出为文件
+      const now = new Date();
+      const pad = (n) => n.toString().padStart(2, "0");
+      const localFileName = `${now.getFullYear()}-${pad(
+         now.getMonth() + 1
+      )}-${pad(now.getDate())}-${pad(now.getHours())}-${pad(
+         now.getMinutes()
+      )}-${pad(now.getSeconds())}.xlsx`;
+
+      const buffer = await workbook.xlsx.writeBuffer();
+      const blob = new Blob([buffer], {
+         type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = localFileName;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+   };
    // 编辑标靶的处理函数
    const handleEditTarget = (target) => {
       setCurrentEditTarget(target);
@@ -431,6 +551,9 @@ const WuyuanbiaobaContent = () => {
             <RealtimeCharts
                tableData={tableData}
                lastUpdateTime={lastUpdateTime}
+               onDataExport={dataExport}
+               exportCount={exportCountRef.current}
+               setExportCount={setExportCount}
             />
 
             {/* Table 区域 - 使用采样数据显示 */}

package.json

@@ -27,6 +27,7 @@
    "dependencies": {
       "@koa/multer": "^3.0.2",
       "@peace/react_client": "^5.0.1",
+      "exceljs": "^4.4.0",
       "fs-extra": "^11.2.0",
       "ws": "^8.18.3"
    }