feat: 优化报警滚动组件

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,9 +39,9 @@ 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}
+            {deviceAddress || ' - '}
         </span>
             </Tooltip>
             <Tooltip title={alertMsg} placement={'topLeft'}>
@@ -88,14 +88,16 @@ const AlarmScrollAssembly = (props) => {
             pageIndex: 1,
             pageSize: firstRequest.data.totalCount,
         });
-    setRealTimeDataList(secondRequest.data.list);
+        setRealTimeDataList(secondRequest?.data?.list || []);
     };
     useEffect(() => {
         getData();
     }, []);
     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
                     slidesPerView={1}
                     modules={[Pagination]}
@@ -125,14 +127,11 @@ const AlarmScrollAssembly = (props) => {
                                     setModalVisible(true);
                                 }}
                             >
-                <InfoItem key={index} info={item} />
+                                <InfoItem key={index} info={item}/>
                             </SwiperSlide>
                         );
                     })}
                 </Swiper>
-      ) : (
-        ''
-      )}
                 {modalVisible && (
                     <Modal
                         visible={modalVisible}
@@ -147,7 +146,8 @@ const AlarmScrollAssembly = (props) => {
                         />
                     </Modal>
                 )}
-    </div>
+            </div> : ''}
+        </>
     );
 };
 AlarmScrollAssembly.defaultProps = {

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

 .alarScrollAssembly {
+  &.moreThan1000 {
     :global {
       .swiper-container {
         width: 950px;
@@ -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;
   flex-direction: column;
   gap: 8px;