fix: '定时任务运行日志数据数据过大界面卡顿问题修复'

src/pages/platformCenter/scheduledTasks/components/LookModal.jsx

@@ -64,13 +64,17 @@ const LookModal = props => {
   };
 
   const getLogList = val => {
+    if (tableList.current.beginDate === '' && tableList.current.endDate === '') {
+      message.warning('请先选择时间！');
+      return;
+    }
     if (!val) {
       tableList.current.pageIndex = 1;
     }
     QueryIISAgentCalllog(tableList.current).then(res => {
       if (res.code === 0) {
-        setTableData(res.data.data);
         tableList.current.total = res.data.count;
+        setTableData(res.data.data);
       }
     });
   };
@@ -161,7 +165,9 @@ const LookModal = props => {
         tableList.current.endDate = '';
         break;
     }
-    getLogList();
+    if (tableList.current.beginDate !== '' && tableList.current.endDate !== '') {
+      getLogList();
+    }
   };
 
   // 自定义时间日期变化函数

src/pages/platformCenter/scheduledTasks/index.jsx

@@ -24,6 +24,7 @@ import {
   ZoomInOutlined,
 } from '@ant-design/icons';
 import 'moment/dist/locale/zh-cn';
+import { FixedSizeList as List } from 'react-window';
 import styles from './index.less';
 import {
   GetIISAgentConfig,
@@ -50,7 +51,9 @@ const ScheduledTasks = () => {
   const typeValue = useRef('重复执行');
   const [columnsData, setColumnsData] = useState([]);
   const scroll = useRef();
+  const listRef = useRef();
   const [logList, setLogList] = useState([]);
+  const keepLength = useRef(0);
 
   const columns = [
     {
@@ -190,9 +193,11 @@ const ScheduledTasks = () => {
     GetIISAgentLog().then(res => {
       if (res.code === 0) {
         let arr = [];
-        arr.push(
-          res.data.split(/(\r\n)|(\n)/).map((item, index) => {
-            // eslint-disable-next-line react/no-danger
+        let list = res.data
+          .split(/(\r\n)|(\n)/)
+          .filter(item => item !== '\r\n' && item !== undefined);
+        arr = list
+          .map((item, index) => {
             let mes = item?.indexOf('[信息]');
             let warn = item?.indexOf('[警告]');
             if (mes !== -1) {
@@ -212,15 +217,22 @@ const ScheduledTasks = () => {
                 />
               );
             } else {
+              if (!item) {
+                return null;
+              }
               return <div key={index} dangerouslySetInnerHTML={{ __html: item }} />;
             }
-          }),
-        );
-        setLogList(arr);
+          })
+          .filter(item => item !== null);
+        if (keepLength.current !== list.length) {
+          setLogList(arr);
+          listRef.current.scrollTo((arr.length - 1) * 22);
+        }
+        keepLength.current = list.length;
         scroll.current.scrollTop = scroll.current.scrollHeight;
         timer = setTimeout(() => {
           getIISAgentLog();
-        }, 5000);
+        }, 2000);
       } else {
         notification.error({
           message: '提示',
@@ -324,6 +336,10 @@ const ScheduledTasks = () => {
     }
   };
 
+  const Row = ({ index, style }) => {
+    return <div style={style}>{logList[index]}</div>;
+  };
+
   return (
     <div className={styles.scheduledTasks}>
       <div className={styles.head}>
@@ -403,7 +419,14 @@ const ScheduledTasks = () => {
         <CalendarOutlined style={{ color: '#1685ff' }} />
         <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>运行日志</span>
         <div className={styles.runLog} ref={scroll}>
-          {logList}
+          <List
+            ref={listRef}
+            height={284} // 这里设置列表的高度
+            itemCount={logList.length}
+            itemSize={22} // 这里设置每个列表项的高度
+          >
+            {Row}
+          </List>
           <div className={styles.blinkingCursor}>|</div>
         </div>
       </div>