feat: 优化设置；优化定时请求

packages/base-components/AlarmScrollAssembly/src/demos/index.js

@@ -5,5 +5,12 @@ window.globalConfig = {
   userInfo: { OID: 1 },
 };
 export default () => {
-  return <AlarmScrollAssembly deviceType={'二供泵房,二供机组'} prefix={'报警信息：'} />; // 最小宽度930px
+  return (
+    <AlarmScrollAssembly
+      deviceType={'二供泵房,二供机组'}
+      prefix={'报警信息：'}
+      showTotal={false}
+      interval={1}
+    />
+  ); // 最小宽度930px
 };

packages/base-components/AlarmScrollAssembly/src/index.js

-import React, {useState, useEffect, useRef} from 'react';
+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 { 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 { switchTimeToPeriod } from './utils';
 import NormChart from './NormChart/NormChart';
-import {Swiper, SwiperSlide} from 'swiper/react';
+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';
+import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper/core';
 
 SwiperCore.use([Autoplay, Pagination, Navigation]);
 /*
@@ -21,7 +21,7 @@ SwiperCore.use([Autoplay, Pagination, Navigation]);
  *   3. 初始化进入时，取截止到当前时间为止的所有的实时报警数据。
  *   4. 播放结束后，重新获取实时报警数据进行第二轮的播放。
  * */
-const InfoItem = ({info}) => {
+const InfoItem = ({ info }) => {
   const returnClassName = (type, key) => {
     let _className = '';
     if (type === '普通') {
@@ -31,7 +31,7 @@ const InfoItem = ({info}) => {
     }
     return `${_className}${key}`;
   };
-    const {alertLevel, startTime, stationName, alertMsg, deviceAddress} = info;
+  const { alertLevel, startTime, stationName, alertMsg, deviceAddress } = info;
   return (
     <div className={styles[returnClassName(alertLevel, 'Wrapper')]}>
       <Tag className={styles[returnClassName(alertLevel, 'Tag')]}>{alertLevel}</Tag>
@@ -39,7 +39,7 @@ const InfoItem = ({info}) => {
       <Tooltip title={deviceAddress} placement={'topLeft'}>
         <span className={styles.location}>
           <EnvironmentOutlined
-              style={{fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle'}}
+            style={{ fontSize: 12, color: '#666666', marginRight: 5, verticalAlign: 'middle' }}
           />
           {deviceAddress || ' - '}
         </span>
@@ -53,9 +53,11 @@ const InfoItem = ({info}) => {
     </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: '直接取值,取变化量,取变化率,取是否',
@@ -86,32 +88,54 @@ const AlarmScrollAssembly = (props) => {
     let firstRequest = await getDeviceNumber();
     let secondRequest = await getRealTimeData({
       pageIndex: 1,
-            pageSize: firstRequest.data.totalCount,
+      // pageSize: firstRequest.data.totalCount,
+      pageSize: 10,
     });
     setRealTimeDataList(secondRequest?.data?.list || []);
+    setEnableToGetData(false);
+    runTimer(secondRequest?.data?.list.length || 0);
+  };
+  const runTimer = (num) => {
+    console.log('timer: ', num);
+    console.log(enableToGetData);
+    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> : ''
-                }
+      {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'}>
+            className={classnames(
+              styles.alarmScrollAssembly,
+              realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000,
+            )}
+            id={'alarmListDiv'}
+          >
             <Swiper
               slidesPerView={1}
               modules={[Pagination]}
-                        pagination={{
+              pagination={
+                props.showTotal
+                  ? {
                       type: 'fraction',
                       formatFractionCurrent: (num) => `第${num}条`,
                       formatFractionTotal: (num) => `共${num}条`,
-                        }}
-                        navigation
+                    }
+                  : false
+              }
+              navigation={props.showTotal ? true : false}
               autoplay={{
                 delay: 3000,
                 disableOnInteraction: false,
@@ -119,7 +143,8 @@ const AlarmScrollAssembly = (props) => {
               loop
               direction="vertical"
               onSlideChange={(e) => {
-                            if (e.activeIndex === realTimeDataList.length - 1) getData();
+                console.log(enableToGetData);
+                if (e.activeIndex === realTimeDataList.length - 1 && enableToGetData) getData();
               }}
             >
               {realTimeDataList.map((item, index) => {
@@ -132,7 +157,7 @@ const AlarmScrollAssembly = (props) => {
                       setModalVisible(true);
                     }}
                   >
-                                    <InfoItem key={index} info={item}/>
+                    <InfoItem key={index} info={item} />
                   </SwiperSlide>
                 );
               })}
@@ -152,16 +177,23 @@ const AlarmScrollAssembly = (props) => {
               </Modal>
             )}
           </div>
-            </div> : ''}
+        </div>
+      ) : (
+        ''
+      )}
     </div>
   );
 };
 AlarmScrollAssembly.defaultProps = {
   deviceType: '二供泵房,二供机组',
-    prefix: ''
+  prefix: '',
+  showTotal: true,
+  interval: 5,
 };
 AlarmScrollAssembly.propTypes = {
   deviceType: PropTypes.string,
-    prefix: PropTypes.string
+  prefix: PropTypes.string,
+  showTotal: PropTypes.bool,
+  interval: PropTypes.number,
 };
 export default AlarmScrollAssembly;