add:轨迹回放添加分页，点击行选中状态

谢忠泽
1 parent 684294aa
Showing 3 changed files with 45 additions and 10 deletions
src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx
src/pages/vms/OperationAdministration/components/PlayBackTable/style.css
src/pages/vms/OperationAdministration/components/PlayBackTable/style.less
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from &#39;react&#39;;
 import { Table, message} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import {getGpsTableData, getTripTableData} from '../../api';
-
 import './style.less';
  
 interface DataType {
@@ -11,6 +10,12 @@ interface DataType {
   entityName:string;
   enable:boolean;
 }
+interface Data{
+  current?:number;
+  currentPage?:number;
+  total?:number;
+  pageSize?:number;
+}
  
   const columns:ColumnsType<DataType> = [
     {
@@ -45,52 +50,76 @@ interface DataType {
 function PlayBackTable(props:any) {
     const {handelRow, type} = props;
     const [tableData, setTableData] = useState<any>([]);
+    const [data, setData] = useState<Data>({current: 1, pageSize: 10});
+    const [rowKey, setRowKey] = useState<number>();
     useEffect(() => {
       //获取table数据
       if (type === 1) {
-        getGpsTableData().then(res => {
+        getGpsTableData({current: data.current, pageSize: data.pageSize}).then(res => {
           const data = res?.data?.data.map((item:any) => {
             if (item?.enable) item.enable = '启用'; else item.enable = '禁用';
             return item;
           });
             setTableData(data);
+            setData(res?.data);
           }).catch((e) => {
             message.error('查询数据失败！');
           });
       } else if (type === 2) {
-        getTripTableData().then(res => {
+        getTripTableData({current: data.current, pageSize: data.pageSize}).then(res => {
           const data = res?.data?.data.map((item:any) => {
             if (item?.enable) item.enable = '启用'; else item.enable = '禁用';
             return item;
           });
             setTableData(data);
+            setData(res?.data);
         }).catch((e) => {
-          message.error('查询数据失败！');
+          message.error('查询数据失败');
         });
       }
-    }, []);
-    
+    }, [data.current, data.pageSize]);
+    const setRowClassName = (record:any, key:any) => {
+      if (rowKey === key) {
+        return 'checkRow';
+      } else {
+        return 'row';
+      }
+    };
+
+    const handlePageChange = (current:number, pageSize:number) => {
+      console.log(1);
+      setTableData([]);
+      setData({...data, current, pageSize});
+    };
     return (
       <div className="play_back_table">
         <Table
           dataSource={tableData}
           columns={columns}
           className="table_back"
+          rowClassName={setRowClassName}
           rowKey={row => row.tid}
           pagination={{
+            total: data?.total,
+            current: data?.current,
+            pageSize: data?.pageSize,
             showQuickJumper: false,
             showSizeChanger: true,
+            onChange: handlePageChange,
+            onShowSizeChange: handlePageChange,
+            pageSizeOptions: ['10', '20', '50', '100', '150', '200']
           }}
           onRow={
-            record => {
+            (record, rowkey) => {
                 return {
                     //行点击
                     onClick: () => {
+                        setRowKey(rowkey);
                         handelRow({tid: record?.tid, entityName: record?.entityName});
                     }, 
-            };
-          }
-}
+                };
+            }
+         }
         />
       </div>
     );
@@ -8,3 +8,6 @@
 .play_back_table .ant-table .ant-table-cell {
   max-width: 100px !important;
 }
+.play_back_table .ant-table .checkRow {
+  background-color: #FAAD14;
+}
@@ -6,5 +6,8 @@
       .ant-table-cell{
         max-width: 100px !important;
       }
+      .checkRow{
+        background-color: #FAAD14;
+      }
     }
 }
 \ No newline at end of file