import React, { useState, useEffect, useRef } from 'react'; import styles from './index.less'; import PropTypes from 'prop-types'; import { Tag, Tooltip, Modal } from 'antd'; import { EnvironmentOutlined } from '@ant-design/icons'; import { monitorService } from './api'; import moment from 'moment'; import classnames from 'classnames'; import { switchTimeToPeriod } from './utils'; import NormChart from './NormChart/NormChart'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/swiper.min.css'; import 'swiper/components/pagination/pagination.min.css'; import 'swiper/components/navigation/navigation.min.css'; import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper/core'; SwiperCore.use([Autoplay, Pagination, Navigation]); /* * 1. 获取当前所有数据; * 2. 倒序滚动播放; * 3. 初始化进入时,取截止到当前时间为止的所有的实时报警数据。 * 4. 播放结束后,重新获取实时报警数据进行第二轮的播放。 * */ const InfoItem = ({ info }) => { const returnClassName = (type, key) => { let _className = ''; if (type === '普通') { _className = 'normal'; } else if (type === '紧急') { _className = 'warning'; } return `${_className}${key}`; }; const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info; return ( <div className={styles[returnClassName(alertLevel, 'Wrapper')]}> <Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag> <span className={classnames(styles.time, styles.fontSize13)}>{startTime}</span> <Tooltip title={deviceAddress} placement={'topLeft'}> <span className={styles.location}> <EnvironmentOutlined style={{ fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle' }} /> {deviceAddress || ' - '} </span> </Tooltip> <Tooltip title={alertMsg} placement={'topLeft'}> <span className={styles[returnClassName(alertLevel, 'Content')]}>{alertMsg}</span> </Tooltip> <div className={styles.periodWrapper}> <span className={styles.period}>{switchTimeToPeriod(startTime)}</span> </div> </div> ); }; let timer = null; const AlarmScrollAssembly = (props) => { const [modalVisible, setModalVisible] = useState(false); const [currentInfo, setCurrentInfo] = useState({}); const [enableToGetData, setEnableToGetData] = useState(false); const constanceRef = useRef({ level: '1,2', type: '直接取值,取变化量,取变化率,取是否', userID: window.globalConfig.userInfo.OID, userAccess: true, }); const [realTimeDataList, setRealTimeDataList] = useState(null); // const getDeviceNumber = () => { // return monitorService.getEquipmentInfo({ // deviceTypes: props.deviceType, // pageIndex: 1, // pageSize: 1, // ...constanceRef.current, // }); // }; const getRealTimeData = (pagination) => { return monitorService.GetAlarmListRealTime({ deviceType: props.deviceType, ...constanceRef.current, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, userAccess: props.userAccess === void 0 ? true : props.userAccess, /* dateFrom: moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00'), dateTo: moment().format('YYYY-MM-DD 23:59:59'),*/ }); }; const getData = async () => { // let firstRequest = await getDeviceNumber(); let secondRequest = await getRealTimeData({ pageIndex: 1, // pageSize: firstRequest.data.totalCount, pageSize: 10, }); setRealTimeDataList(secondRequest?.data?.list || []); setEnableToGetData(false); runTimer(secondRequest?.data?.list.length || 0); }; const runTimer = (num) => { let _interval = props.interval || 0; if (num > 200) _interval = 0; timer = setTimeout(() => { setEnableToGetData(true); }, 1000 * 60 * _interval); }; useEffect(() => { getData(); }, []); return ( <div className={styles.alarmScrollAssemblyWrapper}> {realTimeDataList && realTimeDataList.length ? ( <div className={styles.content} style={{ display: 'flex' }}> {props.prefix ? ( <span style={{ ...props.style, flex: 'none', marginRight: 10 }}>{props.prefix}</span> ) : ( '' )} <div className={classnames( styles.alarmScrollAssembly, realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000, )} id={'alarmListDiv'} > <Swiper slidesPerView={1} // modules={[Pagination]} // pagination={ // props.showTotal // ? { // type: 'fraction', // formatFractionCurrent: (num) => `第${num}条`, // formatFractionTotal: (num) => `共${num}条`, // } // : false // } navigation={props.showTotal ? true : false} autoplay={{ delay: 3000, disableOnInteraction: false, }} loop direction="vertical" onSlideChange={(e) => { if (e.activeIndex === realTimeDataList.length - 1 && enableToGetData) getData(); }} > {realTimeDataList.map((item, index) => { return ( <SwiperSlide key={index} virtualIndex={index} onClick={() => { setCurrentInfo(item); setModalVisible(true); }} > <InfoItem key={index} info={item} /> </SwiperSlide> ); })} </Swiper> {modalVisible && ( <Modal visible={modalVisible} onCancel={() => setModalVisible(false)} width={'80%'} destroyOnClose > <NormChart info={currentInfo} deviceType={currentInfo.deviceType} deviceCode={currentInfo.stationCode} /> </Modal> )} </div> </div> ) : ( '' )} </div> ); }; AlarmScrollAssembly.defaultProps = { deviceType: '二供泵房,二供机组', prefix: '', showTotal: true, interval: 5, userAccess: false, }; AlarmScrollAssembly.propTypes = { deviceType: PropTypes.string, prefix: PropTypes.string, showTotal: PropTypes.bool, interval: PropTypes.number, userAccess: PropTypes.bool, }; export default AlarmScrollAssembly;