index.js 6.41 KB
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 classnames from 'classnames';
import {switchTimeToPeriod} from './utils';
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 getRealTimeData = (pagination) => {
        return monitorService.GetAlarmListRealTime({
            deviceType: props.deviceType,
            ...constanceRef.current,
            pageIndex: pagination.pageIndex,
            pageSize: pagination.pageSize,
            userAccess: props.userAccess === void 0 ? true : props.userAccess,
        });
    };
    const getData = async () => {
        let secondRequest = await getRealTimeData({
            pageIndex: 1,
            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(() => {
        timer && clearTimeout(timer);
        getData();
    }, [props.deviceType]);
    useEffect(() => {
        return () => timer && clearTimeout(timer)
    }, [])
    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}
                            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>
                    </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;