index.js

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>
    );
};
const AlarmScrollAssembly = (props) => {
    const [modalVisible, setModalVisible] = useState(false);
    const [currentInfo, setCurrentInfo] = useState({});
    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,
        });
        setRealTimeDataList(secondRequest?.data?.list || []);
    };
    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={{
                            type: 'fraction',
                            formatFractionCurrent: (num) => `第${num}条`,
                            formatFractionTotal: (num) => `共${num}条`,
                        }}
                        navigation
                        autoplay={{
                            delay: 3000,
                            disableOnInteraction: false,
                        }}
                        loop
                        direction="vertical"
                        onSlideChange={(e) => {
                            if (e.activeIndex === realTimeDataList.length - 1) 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: ''
};
AlarmScrollAssembly.propTypes = {
    deviceType: PropTypes.string,
    prefix: PropTypes.string
};
export default AlarmScrollAssembly;