<div className={styles.tableTh}><div className={styles.thItem} style={{ width: '40%' }}>报警名称</div><div className={styles.thItem} style={{ width: '35%' }}>开始时间</div><div className={styles.thItem} style={{ width: '25%' }}>状态</div></div><div className={styles.tableBody} ref={scrollRef}>{alarmTableList.map((item, index) => {return (<div className={styles.bodyContent} key={index}><div style={{ width: '40%' }}>{item?.name}</div><div style={{ width: '35%' }}>{item?.time}</div><div style={{ width: '25%', color: item?.status === 0 ? '#12fd00' : '#f62222' }}>{item?.status === 0 ? '报警' : '正常'}</div></div>);})}</div>
.tableTh {width: 100%;height: 36px;line-height: 36px;text-align: center;background-color: #2e3646;display: flex;justify-content: flex-start;.thItem {font-weight: bold;font-size: 16px;letter-spacing: 1px;color: #bae7ff;&:first-child {border-right: 1px solid #5a6477;}&:nth-child(2) {border-right: 1px solid #5a6477;}}}.tableBody {width: 100%;height: 86%;overflow: hidden;text-align: center;.bodyContent {font-size: 18px;display: flex;justify-content: flex-start;padding: 8px 0;&:nth-child(even) {background-color: #2e3646;}}}
const scrollRef = useRef(null); // 用于表格滚动const [scrollTop, setScrollTop] = useState(0);const [alarmTableList, setAlarmTableList] = useState([]); // 表格数据// 滚动动画的函数const scrollAnimation = () => {if (scrollRef.current) {// 每次滚动的高度const step = 1;// 更新scrollTop的值setScrollTop((prevScrollTop) => {// 当滚动到内容底部时，重置滚动位置到顶部if (prevScrollTop >= scrollRef.current.scrollHeight - scrollRef.current.clientHeight) {return 0;}return prevScrollTop + step;});}};useEffect(() => {const tableArr = [];for (let i = 1; i <= 32; i++) {let obj = {name: i + '级报警',time: '09:23',status: i % 2 === 0 ? 1 : 0, // 0：报警};tableArr.push(obj);}setAlarmTableList(tableArr);const intervalId = setInterval(scrollAnimation, 50); // 每50毫秒滚动一次return () => {clearInterval(intervalId); // 组件卸载时清除定时器autofit.off();};}, []); // 当scrollTop变化时，重新设置滚动位置useEffect(() => {if (scrollRef.current) {// 设置scrollRef的scrollTop属性来滚动内容scrollRef.current.scrollTop = scrollTop;}}, [scrollTop]); // 当scrollTop变化时，重新设置滚动位置
