From 96143e1852e5ffe8d7e8219229e2447c93807c24 Mon Sep 17 00:00:00 2001 From: cles <208023732@qq.com> Date: Tue, 2 Sep 2025 10:27:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20DeflectionCollecti?= =?UTF-8?q?on=20=E5=92=8C=20ImageCollection=20=E7=BB=84=E4=BB=B6;=20?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=9B=B8=E5=85=B3=E6=A0=B7=E5=BC=8F=E5=92=8C?= =?UTF-8?q?=E4=BE=9D=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 32 +- package.json | 4 +- src/renderer/src/App.jsx | 6 +- .../DeflectionCollection.jsx | 311 ++++++++++++++++++ .../DeflectionCollection.module.css | 3 + .../ImageCollection/ImageCollection.jsx | 7 + .../ImageCollection.module.css | 0 .../MeasurementPointSetting.module.css | 2 - .../SystemSettings/SystemSettings.module.css | 1 + 9 files changed, 360 insertions(+), 6 deletions(-) create mode 100644 src/renderer/src/components/DeflectionCollection/DeflectionCollection.jsx create mode 100644 src/renderer/src/components/DeflectionCollection/DeflectionCollection.module.css create mode 100644 src/renderer/src/components/ImageCollection/ImageCollection.jsx create mode 100644 src/renderer/src/components/ImageCollection/ImageCollection.module.css diff --git a/package-lock.json b/package-lock.json index de350f8..83931df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,9 @@ "@electron-toolkit/preload": "^3.0.2", "@electron-toolkit/utils": "^4.0.0", "antd": "^5.27.1", - "electron-updater": "^6.3.9" + "chart.js": "^4.5.0", + "electron-updater": "^6.3.9", + "react-chartjs-2": "^5.3.0" }, "devDependencies": { "@electron-toolkit/eslint-config": "^2.0.0", @@ -1729,6 +1731,12 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "license": "MIT" + }, "node_modules/@malept/cross-spawn-promise": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz", @@ -3614,6 +3622,18 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chart.js": { + "version": "4.5.0", + "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.0.tgz", + "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==", + "license": "MIT", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chownr": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/chownr/-/chownr-2.0.0.tgz", @@ -8746,6 +8766,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.3.0", + "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz", + "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==", + "license": "MIT", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-dom": { "version": "19.1.1", "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-19.1.1.tgz", diff --git a/package.json b/package.json index 7a3eb52..4ab2316 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,9 @@ "@electron-toolkit/preload": "^3.0.2", "@electron-toolkit/utils": "^4.0.0", "antd": "^5.27.1", - "electron-updater": "^6.3.9" + "chart.js": "^4.5.0", + "electron-updater": "^6.3.9", + "react-chartjs-2": "^5.3.0" }, "devDependencies": { "@electron-toolkit/eslint-config": "^2.0.0", diff --git a/src/renderer/src/App.jsx b/src/renderer/src/App.jsx index ec6293a..77c3b09 100644 --- a/src/renderer/src/App.jsx +++ b/src/renderer/src/App.jsx @@ -4,17 +4,19 @@ const { Sider, Content } = Layout import SiderHeader from './components/SiderHeader/SiderHeader' import { FundFilled, CameraFilled } from '@ant-design/icons' import { Tabs } from 'antd' +import DeflectionCollection from './components/DeflectionCollection/DeflectionCollection' +import ImageCollection from './components/ImageCollection/ImageCollection' const tabItem = [ { key: '1', label: `挠度数据采集`, - children: `挠度数据采集`, + children: , icon: }, { key: '2', label: `图像数据采集`, - children: `图像数据采集`, + children: , icon: } ] diff --git a/src/renderer/src/components/DeflectionCollection/DeflectionCollection.jsx b/src/renderer/src/components/DeflectionCollection/DeflectionCollection.jsx new file mode 100644 index 0000000..036b0fa --- /dev/null +++ b/src/renderer/src/components/DeflectionCollection/DeflectionCollection.jsx @@ -0,0 +1,311 @@ +import { Line } from 'react-chartjs-2' +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend +} from 'chart.js' +import { FileTextOutlined, ClockCircleOutlined, EyeOutlined } from '@ant-design/icons' + +ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend) + +function randomAround(base, delta) { + return base + Math.round((Math.random() * 2 - 1) * delta) +} + +function getTimeLabels(count) { + const now = new Date() + return Array.from({ length: count }).map((_, i) => { + const d = new Date(now.getTime() - (count - 1 - i) * 2 * 1000) + return d.toTimeString().slice(0, 8) + }) +} + +function DeflectionCollection() { + const count = 10 + const targetCount = 5 // 支持多个target + + // 为每个target生成颜色 + const targetColors = [ + 'rgba(75,192,192,1)', // 青色 + 'rgba(255,99,132,1)', // 红色 + 'rgba(54,162,235,1)', // 蓝色 + 'rgba(255,206,86,1)', // 黄色 + 'rgba(153,102,255,1)' // 紫色 + ] + + // 生成多个target的数据 + const targetsData = Array.from({ length: targetCount }).map((_, targetIndex) => ({ + name: `Target ${targetIndex + 1}`, + color: targetColors[targetIndex % targetColors.length], + data: Array.from({ length: count }).map((_, i) => ({ + x: 350 + targetIndex * 50 + Math.sin(i * 0.5 + targetIndex) * 20 + randomAround(0, 3), + y: 50 + targetIndex * 20 + Math.cos(i * 0.3 + targetIndex) * 15 + randomAround(0, 2), + w: randomAround(125, 5), + h: randomAround(115, 5) + })) + })) + + const timeLabels = getTimeLabels(count) + + const dataY = { + labels: timeLabels, + datasets: targetsData.map((target) => ({ + label: `${target.name}`, + data: target.data.map((d) => d.y), + borderColor: target.color, + backgroundColor: target.color.replace('1)', '0.2)'), + tension: 0.3, + pointRadius: 3, + pointHoverRadius: 5 + })) + } + + const dataX = { + labels: timeLabels, + datasets: targetsData.map((target) => ({ + label: `${target.name}`, + data: target.data.map((d) => d.x), + borderColor: target.color, + backgroundColor: target.color.replace('1)', '0.2)'), + tension: 0.3, + pointRadius: 3, + pointHoverRadius: 5 + })) + } + + const options = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: true, + labels: { + boxWidth: 8, + boxHeight: 8, + font: { + size: 10 + }, + padding: 5 + }, + position: 'top' + }, + title: { display: false } + }, + scales: { + x: { + title: { display: true, text: '时间' }, + ticks: { font: { size: 10 } } + }, + y: { + title: { display: true, text: '挠度值' }, + ticks: { font: { size: 10 } } + } + } + } + + return ( +
+
+
+

Y方向曲线

+
+ +
+
+
+

X方向曲线

+
+ +
+
+
+
+
+ 实时数据 +
+ + {targetsData.map((target, index) => { + const latestData = target.data[target.data.length - 1] + const latestTime = timeLabels[timeLabels.length - 1] + + return ( +
+
+
+ + 测点位置：{index + 1} + +
+ +
+ + + 测点描述： + +
+ +
+ + + 采集时间：{new Date().toLocaleDateString()} {latestTime} + +
+ +
+ + + X → {latestData.x.toFixed(3)} + +
+ +
+ + + Y → {latestData.y.toFixed(3)} + +
+
+ ) + })} +
+
+ ) +} + +export default DeflectionCollection diff --git a/src/renderer/src/components/DeflectionCollection/DeflectionCollection.module.css b/src/renderer/src/components/DeflectionCollection/DeflectionCollection.module.css new file mode 100644 index 0000000..a5c4526 --- /dev/null +++ b/src/renderer/src/components/DeflectionCollection/DeflectionCollection.module.css @@ -0,0 +1,3 @@ +.chartContainer { + width: 100%; +} diff --git a/src/renderer/src/components/ImageCollection/ImageCollection.jsx b/src/renderer/src/components/ImageCollection/ImageCollection.jsx new file mode 100644 index 0000000..8d9f702 --- /dev/null +++ b/src/renderer/src/components/ImageCollection/ImageCollection.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +function ImageCollection() { + return
ImageCollection
+} + +export default ImageCollection diff --git a/src/renderer/src/components/ImageCollection/ImageCollection.module.css b/src/renderer/src/components/ImageCollection/ImageCollection.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.module.css b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.module.css index 2c3d3c9..3520323 100644 --- a/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.module.css +++ b/src/renderer/src/components/MeasurementPointSetting/MeasurementPointSetting.module.css @@ -24,7 +24,6 @@ display: flex; flex-direction: column; gap: 4px; - background: #f9f9f9; } .sectionTitle { @@ -62,7 +61,6 @@ border-radius: 4px; margin: 4px 0; padding: 8px; - background: #f9f9f9; flex: 1; display: flex; flex-direction: column; diff --git a/src/renderer/src/components/SystemSettings/SystemSettings.module.css b/src/renderer/src/components/SystemSettings/SystemSettings.module.css index c4a85f1..f329fdc 100644 --- a/src/renderer/src/components/SystemSettings/SystemSettings.module.css +++ b/src/renderer/src/components/SystemSettings/SystemSettings.module.css @@ -24,6 +24,7 @@ border-radius: 6px; margin: 4px; padding: 4px; + background-color: #f9f9f9; } .sectionTitle {