自检记录添加滑动加载

.umirc.ts

@@ -30,7 +30,7 @@ export default defineConfig({
       // target: 'http://47.96.12.136:8888/',
       target: 'http://47.96.12.136:8788/',
       // target: 'http://120.55.44.4:8903/',
-      // target: 'https://work.greentech.com.cn/',
+      //target: 'https://metawant.greentech.com.cn/',
       changeOrigin: true,
     },
   },

src/pages/EqSelfInspection/List/index.js

@@ -1,15 +1,29 @@
 import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
+import ScrollLoading from '@/components/ScrollLoading';
 import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
 import { connect, history, useParams } from '@umijs/max';
 import dayjs from 'dayjs';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './index.less';
 
 function List(props) {
-  const { loading, list, processList = [], dispatch } = props;
-
+  const { loading, processList = [], dispatch } = props;
   const { projectId } = useParams();
+  const [list, setList] = useState([]);
+  const [curPagination, setCurPagination] = useState({
+    pageSize: 50,
+    currentPage: 1,
+  });
+
+  const defaultParam = {
+    projectId: projectId,
+    auto: 1,
+    startDate: dayjs().subtract(10, 'day').format('YYYY-MM-DD 00:00:00'),
+    endDate: dayjs().format('YYYY-MM-DD 23:59:59'),
+    pageSize: 50,
+    currentPage: 1,
+  };
 
   const goToDetail = (record) => {
     UnityAction.sendMsg('reportDetail', '');
@@ -21,54 +35,61 @@ function List(props) {
   };
 
   useEffect(() => {
-    let params = {};
-    params.projectId = projectId;
-    params.auto = 1;
-    params.startDate = dayjs()
-      .subtract(10, 'day')
-      .format('YYYY-MM-DD 00:00:00');
-    params.endDate = dayjs().format('YYYY-MM-DD 23:59:59');
-    params.pageSize = 100;
-    params.currentPage = 1;
+    queryData(1);
+  }, []);
+
+  const queryData = (currentPage) => {
+    const params = { ...defaultParam, currentPage };
     dispatch({
       type: 'patrolArtificialRecord/queryPatrol',
       payload: params,
+      callback: (data) => {
+        setList([...list, ...data.list]);
+        setCurPagination(data.pagination);
+      },
     });
-  }, []);
+  };
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>自检记录</PageTitle>
-      <div className={`content-title ${styles.list}`}>
-        {list.map((item) => (
-          <div className={styles.item} onClick={() => goToDetail(item)}>
-            {item.Status == 0 ? (
-              <div className={`${styles.status}`}>正常</div>
-            ) : (
-              <div className={`${styles.status} ${styles.statusError}`}>
-                异常
-              </div>
-            )}
-            <div className={styles.info}>
-              <div className={styles.time}>
-                <i></i>自检时间：{dayjs(item.CreatedTime).format('MM-DD HH:mm')}
-              </div>
-              <div className={styles.desc}>
-                <i></i>
-                发现异常
-                <span className={styles.number}>{item.Status}</span>
-                <span>项</span>
+      <ScrollLoading
+        loading={loading}
+        pagination={curPagination}
+        handleLoadData={queryData}
+      >
+        <div>
+          {list.map((item) => (
+            <div className={styles.item} onClick={() => goToDetail(item)}>
+              {item.Status == 0 ? (
+                <div className={`${styles.status}`}>正常</div>
+              ) : (
+                <div className={`${styles.status} ${styles.statusError}`}>
+                  异常
+                </div>
+              )}
+              <div className={styles.info}>
+                <div className={styles.time}>
+                  <i></i>自检时间：
+                  {dayjs(item.CreatedTime).format('MM-DD HH:mm')}
+                </div>
+                <div className={styles.desc}>
+                  <i></i>
+                  发现异常
+                  <span className={styles.number}>{item.Status}</span>
+                  <span>项</span>
+                </div>
               </div>
+              <div className={styles.btn}></div>
             </div>
-            <div className={styles.btn}></div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      </ScrollLoading>
     </PageContent>
   );
 }
 
 export default connect(({ patrolArtificialRecord, loading }) => ({
-  list: patrolArtificialRecord.list,
+  // list: patrolArtificialRecord.list,
   routeInfoList: patrolArtificialRecord.routeInfoList,
   loading: loading.models.patrolArtificialRecord,
   processList: patrolArtificialRecord.processList,

src/pages/EqSelfInspection/List/index.less

@@ -1,70 +1,67 @@
-.list {
-  margin-top: 0.4rem;
-  .item {
-    padding: 0.28rem 0.75rem 0.28rem 1.24rem;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 0.18rem;
-    background: #ffffff;
-    box-shadow: 0rem 0rem 0.08rem 0.14rem rgba(0, 0, 0, 0.03);
-    border-radius: 0.12rem;
-    align-items: center;
-  }
-  .status {
-    width: 1.34rem;
-    height: 1.34rem;
-    font-size: 0.32rem;
-    font-weight: 400;
-    color: #000000;
-    text-align: center;
-    line-height: 1.34rem;
-    background: url('@/assets/circle-success.png') no-repeat center;
-    background-size: 100% 100%;
-  }
-  .statusError {
-    background-image: url('@/assets/circle-error.png');
-  }
-  .info {
-    flex: 1;
-    padding-left: 1rem;
-    i {
-      width: 0.14rem;
-      height: 0.14rem;
-      display: inline-block;
-      vertical-align: middle;
-      border-radius: 50%;
-      margin-right: 0.14rem;
-      background-color: rgba(74, 144, 226, 1);
-    }
+.item {
+  padding: 0.28rem 0.75rem 0.28rem 1.24rem;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.18rem;
+  background: #ffffff;
+  box-shadow: 0rem 0rem 0.08rem 0.14rem rgba(0, 0, 0, 0.03);
+  border-radius: 0.12rem;
+  align-items: center;
+}
+.status {
+  width: 1.34rem;
+  height: 1.34rem;
+  font-size: 0.32rem;
+  font-weight: 400;
+  color: #000000;
+  text-align: center;
+  line-height: 1.34rem;
+  background: url('@/assets/circle-success.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.statusError {
+  background-image: url('@/assets/circle-error.png');
+}
+.info {
+  flex: 1;
+  padding-left: 1rem;
+  i {
+    width: 0.14rem;
+    height: 0.14rem;
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 50%;
+    margin-right: 0.14rem;
+    background-color: rgba(74, 144, 226, 1);
   }
-  .time {
-    font-size: 0.24rem;
-    font-weight: 400;
-    color: #4a4a4a;
-    line-height: 0.34rem;
+}
+.time {
+  font-size: 0.24rem;
+  font-weight: 400;
+  color: #4a4a4a;
+  line-height: 0.34rem;
+}
+.desc {
+  font-size: 0.32rem;
+  font-weight: 400;
+  color: #4a4a4a;
+  line-height: 0.44rem;
+  .number {
+    font-size: 0.54rem;
+    font-weight: 500;
+    color: #f5a623;
+    line-height: 0.76rem;
+    margin-left: 0.12rem;
   }
-  .desc {
-    font-size: 0.32rem;
-    font-weight: 400;
-    color: #4a4a4a;
-    line-height: 0.44rem;
-    .number {
-      font-size: 0.54rem;
-      font-weight: 500;
-      color: #f5a623;
-      line-height: 0.76rem;
-      margin-left: 0.12rem;
-    }
 
-    span {
-      font-size: 0.28rem;
-      color: #000000;
-    }
-  }
-  .btn {
-    width: 0.23rem;
-    height: 0.35rem;
-    background: url('@/assets/arr-right.png') no-repeat center;
-    background-size: 100% 100%;
+  span {
+    font-size: 0.28rem;
+    color: #000000;
   }
 }
+.btn {
+  width: 0.23rem;
+  height: 0.35rem;
+  background: url('@/assets/arr-right.png') no-repeat center;
+  background-size: 100% 100%;
+}