Commit baf4594e authored by 陈龙's avatar 陈龙

feat: 优化报警滚动组件

parent 8b2770f0
import React, { useState, useEffect, useRef } from 'react'; import React, {useState, useEffect, useRef} from 'react';
import styles from './index.less'; import styles from './index.less';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Tag, Tooltip, Modal } from 'antd'; import {Tag, Tooltip, Modal} from 'antd';
import { EnvironmentOutlined } from '@ant-design/icons'; import {EnvironmentOutlined} from '@ant-design/icons';
import { monitorService } from './api'; import {monitorService} from './api';
import moment from 'moment'; import moment from 'moment';
import classnames from 'classnames'; import classnames from 'classnames';
import { switchTimeToPeriod } from './utils'; import {switchTimeToPeriod} from './utils';
import NormChart from './NormChart/NormChart'; import NormChart from './NormChart/NormChart';
import { Swiper, SwiperSlide } from 'swiper/react'; import {Swiper, SwiperSlide} from 'swiper/react';
import 'swiper/swiper.min.css'; import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.min.css'; import 'swiper/components/pagination/pagination.min.css';
import 'swiper/components/navigation/navigation.min.css'; import 'swiper/components/navigation/navigation.min.css';
import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper/core'; import SwiperCore, {Autoplay, Pagination, Navigation} from 'swiper/core';
SwiperCore.use([Autoplay, Pagination, Navigation]); SwiperCore.use([Autoplay, Pagination, Navigation]);
/* /*
...@@ -21,7 +21,7 @@ SwiperCore.use([Autoplay, Pagination, Navigation]); ...@@ -21,7 +21,7 @@ SwiperCore.use([Autoplay, Pagination, Navigation]);
* 3. 初始化进入时,取截止到当前时间为止的所有的实时报警数据。 * 3. 初始化进入时,取截止到当前时间为止的所有的实时报警数据。
* 4. 播放结束后,重新获取实时报警数据进行第二轮的播放。 * 4. 播放结束后,重新获取实时报警数据进行第二轮的播放。
* */ * */
const InfoItem = ({ info }) => { const InfoItem = ({info}) => {
const returnClassName = (type, key) => { const returnClassName = (type, key) => {
let _className = ''; let _className = '';
if (type === '普通') { if (type === '普通') {
...@@ -31,7 +31,7 @@ const InfoItem = ({ info }) => { ...@@ -31,7 +31,7 @@ const InfoItem = ({ info }) => {
} }
return `${_className}${key}`; return `${_className}${key}`;
}; };
const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info; const {alertLevel, startTime, stationName, alertMsg, deviceAddress} = info;
return ( return (
<div className={styles[returnClassName(alertLevel, 'Wrapper')]}> <div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
<Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag> <Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag>
...@@ -39,9 +39,9 @@ const InfoItem = ({ info }) => { ...@@ -39,9 +39,9 @@ const InfoItem = ({ info }) => {
<Tooltip title={deviceAddress} placement={'topLeft'}> <Tooltip title={deviceAddress} placement={'topLeft'}>
<span className={styles.location}> <span className={styles.location}>
<EnvironmentOutlined <EnvironmentOutlined
style={{ fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle' }} style={{fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle'}}
/> />
{deviceAddress} {deviceAddress || ' - '}
</span> </span>
</Tooltip> </Tooltip>
<Tooltip title={alertMsg} placement={'topLeft'}> <Tooltip title={alertMsg} placement={'topLeft'}>
...@@ -88,14 +88,16 @@ const AlarmScrollAssembly = (props) => { ...@@ -88,14 +88,16 @@ const AlarmScrollAssembly = (props) => {
pageIndex: 1, pageIndex: 1,
pageSize: firstRequest.data.totalCount, pageSize: firstRequest.data.totalCount,
}); });
setRealTimeDataList(secondRequest.data.list); setRealTimeDataList(secondRequest?.data?.list || []);
}; };
useEffect(() => { useEffect(() => {
getData(); getData();
}, []); }, []);
return ( return (
<div className={styles.alarScrollAssembly} id={'alarmListDiv'}> <>
{realTimeDataList && realTimeDataList.length ? ( {realTimeDataList && realTimeDataList.length ? <div
className={classnames(styles.alarScrollAssembly, (realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000))}
id={'alarmListDiv'}>
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
modules={[Pagination]} modules={[Pagination]}
...@@ -125,14 +127,11 @@ const AlarmScrollAssembly = (props) => { ...@@ -125,14 +127,11 @@ const AlarmScrollAssembly = (props) => {
setModalVisible(true); setModalVisible(true);
}} }}
> >
<InfoItem key={index} info={item} /> <InfoItem key={index} info={item}/>
</SwiperSlide> </SwiperSlide>
); );
})} })}
</Swiper> </Swiper>
) : (
''
)}
{modalVisible && ( {modalVisible && (
<Modal <Modal
visible={modalVisible} visible={modalVisible}
...@@ -147,7 +146,8 @@ const AlarmScrollAssembly = (props) => { ...@@ -147,7 +146,8 @@ const AlarmScrollAssembly = (props) => {
/> />
</Modal> </Modal>
)} )}
</div> </div> : ''}
</>
); );
}; };
AlarmScrollAssembly.defaultProps = { AlarmScrollAssembly.defaultProps = {
......
.alarScrollAssembly { .alarScrollAssembly {
&.moreThan1000 {
:global { :global {
.swiper-container { .swiper-container {
width: 950px; width: 950px;
...@@ -33,7 +34,43 @@ ...@@ -33,7 +34,43 @@
} }
} }
} }
}
&.lessThan1000 {
:global {
.swiper-container {
width: 950px;
height: 42px;
.swiper-button-prev {
right: 150px;
left: auto !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 12px;
}
.swiper-pagination-fraction {
top: 15px;
right: 24px;
left: auto;
width: 130px;
line-height: 12px;
}
.swiper-wrapper {
width: calc(100% - 140px);
}
.swiper-slide {
height: 32px;
line-height: 32px;
text-align: center;
}
}
}
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment