67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import './index.less';
|
|||
|
|
|
|||
|
|
const WaterLevelAlert = () => {
|
|||
|
|
const [position, setPosition] = useState(0);
|
|||
|
|
|
|||
|
|
const alerts = [
|
|||
|
|
{
|
|||
|
|
reservoir: '浮桥河水库',
|
|||
|
|
time: '06月08日02时',
|
|||
|
|
level: '65.01',
|
|||
|
|
overLimit: '0.12',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
reservoir: '浮桥河水库',
|
|||
|
|
time: '06月08日02时',
|
|||
|
|
level: '93.4',
|
|||
|
|
overLimit: '0.40',
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const height = 24; // 每个项目的高度
|
|||
|
|
const totalHeight = height * alerts.length;
|
|||
|
|
let currentPosition = 0;
|
|||
|
|
|
|||
|
|
const animate = () => {
|
|||
|
|
currentPosition += height;
|
|||
|
|
if (currentPosition >= totalHeight) {
|
|||
|
|
currentPosition = 0;
|
|||
|
|
}
|
|||
|
|
setPosition(currentPosition);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const timer = setInterval(animate, 3000);
|
|||
|
|
return () => clearInterval(timer);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
// 复制一份数据用于无缝滚动
|
|||
|
|
const displayAlerts = [...alerts, ...alerts];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="water-level-alert">
|
|||
|
|
<div className="alert-container">
|
|||
|
|
<div
|
|||
|
|
className="alert-wrapper"
|
|||
|
|
style={{
|
|||
|
|
transform: `translateY(-${position}px)`,
|
|||
|
|
transition: position === 0 ? 'none' : 'transform 0.5s ease-in-out'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{displayAlerts.map((alert, index) => (
|
|||
|
|
<div key={index} className="alert-item">
|
|||
|
|
<span className="alert-text">
|
|||
|
|
预计{alert.reservoir}于 {alert.time}水位将上涨至
|
|||
|
|
{alert.level} m (超汛限水位{alert.overLimit}m)，
|
|||
|
|
请做好防范
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default WaterLevelAlert;
|