cles
2 weeks ago
9 changed files with 360 additions and 6 deletions
@ -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 ( |
||||
|
<div |
||||
|
style={{ |
||||
|
height: 'calc(100vh - 100px)', |
||||
|
maxHeight: '100%', |
||||
|
display: 'flex', |
||||
|
overflow: 'hidden', |
||||
|
margin: '0', |
||||
|
boxSizing: 'border-box' |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
minWidth: 0, |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
padding: '10px', |
||||
|
gap: '10px', |
||||
|
overflow: 'hidden' |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
minHeight: 0, |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
overflow: 'hidden', |
||||
|
border: '1px solid var(--border-color)' |
||||
|
}} |
||||
|
> |
||||
|
<p style={{ margin: '0 0 5px 0', fontSize: '14px', fontWeight: '500' }}>Y方向曲线</p> |
||||
|
<div style={{ flex: 1, minHeight: 0, position: 'relative' }}> |
||||
|
<Line data={dataY} options={options} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
minHeight: 0, |
||||
|
display: 'flex', |
||||
|
flexDirection: 'column', |
||||
|
overflow: 'hidden', |
||||
|
border: '1px solid var(--border-color)' |
||||
|
}} |
||||
|
> |
||||
|
<p style={{ margin: '0 0 5px 0', fontSize: '14px', fontWeight: '500' }}>X方向曲线</p> |
||||
|
<div style={{ flex: 1, minHeight: 0, position: 'relative' }}> |
||||
|
<Line data={dataX} options={options} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
style={{ |
||||
|
width: '300px', |
||||
|
minWidth: '300px', |
||||
|
maxWidth: '300px', |
||||
|
margin: '10px', |
||||
|
padding: '10px', |
||||
|
border: '1px solid var(--border-color)', |
||||
|
overflow: 'auto', |
||||
|
boxSizing: 'border-box' |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
style={{ |
||||
|
fontSize: '14px', |
||||
|
fontWeight: '600', |
||||
|
marginBottom: '10px', |
||||
|
color: '#333' |
||||
|
}} |
||||
|
> |
||||
|
实时数据 |
||||
|
</div> |
||||
|
|
||||
|
{targetsData.map((target, index) => { |
||||
|
const latestData = target.data[target.data.length - 1] |
||||
|
const latestTime = timeLabels[timeLabels.length - 1] |
||||
|
|
||||
|
return ( |
||||
|
<div |
||||
|
key={index} |
||||
|
style={{ |
||||
|
marginBottom: '15px', |
||||
|
padding: '10px', |
||||
|
backgroundColor: '#fafafa', |
||||
|
border: '1px solid #e8e8e8', |
||||
|
borderRadius: '4px' |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
style={{ |
||||
|
display: 'flex', |
||||
|
alignItems: 'center', |
||||
|
marginBottom: '8px' |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
style={{ |
||||
|
width: '8px', |
||||
|
height: '8px', |
||||
|
backgroundColor: target.color, |
||||
|
borderRadius: '50%', |
||||
|
marginRight: '8px' |
||||
|
}} |
||||
|
></div> |
||||
|
<span |
||||
|
style={{ |
||||
|
fontSize: '14px', |
||||
|
fontWeight: '500', |
||||
|
color: '#333' |
||||
|
}} |
||||
|
> |
||||
|
测点位置：{index + 1} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
style={{ |
||||
|
display: 'flex', |
||||
|
alignItems: 'center', |
||||
|
marginBottom: '5px' |
||||
|
}} |
||||
|
> |
||||
|
<FileTextOutlined style={{ fontSize: '12px', color: '#666' }} /> |
||||
|
<span |
||||
|
style={{ |
||||
|
fontSize: '12px', |
||||
|
color: '#666', |
||||
|
marginLeft: '5px' |
||||
|
}} |
||||
|
> |
||||
|
测点描述： |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
style={{ |
||||
|
display: 'flex', |
||||
|
alignItems: 'center', |
||||
|
marginBottom: '5px' |
||||
|
}} |
||||
|
> |
||||
|
<ClockCircleOutlined style={{ fontSize: '12px', color: '#666' }} /> |
||||
|
<span |
||||
|
style={{ |
||||
|
fontSize: '12px', |
||||
|
color: '#666', |
||||
|
marginLeft: '5px' |
||||
|
}} |
||||
|
> |
||||
|
采集时间：{new Date().toLocaleDateString()} {latestTime} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
style={{ |
||||
|
display: 'flex', |
||||
|
alignItems: 'center', |
||||
|
marginBottom: '3px' |
||||
|
}} |
||||
|
> |
||||
|
<EyeOutlined style={{ fontSize: '12px', color: '#666' }} /> |
||||
|
<span |
||||
|
style={{ |
||||
|
fontSize: '12px', |
||||
|
color: '#333', |
||||
|
marginLeft: '5px' |
||||
|
}} |
||||
|
> |
||||
|
X → {latestData.x.toFixed(3)} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
style={{ |
||||
|
display: 'flex', |
||||
|
alignItems: 'center' |
||||
|
}} |
||||
|
> |
||||
|
<EyeOutlined style={{ fontSize: '12px', color: '#666' }} /> |
||||
|
<span |
||||
|
style={{ |
||||
|
fontSize: '12px', |
||||
|
color: '#333', |
||||
|
marginLeft: '5px' |
||||
|
}} |
||||
|
> |
||||
|
Y → {latestData.y.toFixed(3)} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default DeflectionCollection |
||||
@ -0,0 +1,3 @@ |
|||||
|
.chartContainer { |
||||
|
width: 100%; |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
import React from 'react' |
||||
|
|
||||
|
function ImageCollection() { |
||||
|
return <div>ImageCollection</div> |
||||
|
} |
||||
|
|
||||
|
export default ImageCollection |
||||
Loading…
Reference in new issue