diff --git a/src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx b/src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx index 0ebef96..67da671 100644 --- a/src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx +++ b/src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; 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 = [ { @@ -45,52 +50,76 @@ interface DataType { function PlayBackTable(props:any) { const {handelRow, type} = props; const [tableData, setTableData] = useState([]); + const [data, setData] = useState({current: 1, pageSize: 10}); + const [rowKey, setRowKey] = useState(); 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 (
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}); }, - }; - } -} + }; + } + } /> ); diff --git a/src/pages/vms/OperationAdministration/components/PlayBackTable/style.css b/src/pages/vms/OperationAdministration/components/PlayBackTable/style.css index bbce137..2f2b093 100644 --- a/src/pages/vms/OperationAdministration/components/PlayBackTable/style.css +++ b/src/pages/vms/OperationAdministration/components/PlayBackTable/style.css @@ -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; +} diff --git a/src/pages/vms/OperationAdministration/components/PlayBackTable/style.less b/src/pages/vms/OperationAdministration/components/PlayBackTable/style.less index 0c63366..af57a46 100644 --- a/src/pages/vms/OperationAdministration/components/PlayBackTable/style.less +++ b/src/pages/vms/OperationAdministration/components/PlayBackTable/style.less @@ -6,5 +6,8 @@ .ant-table-cell{ max-width: 100px !important; } + .checkRow{ + background-color: #FAAD14; + } } } \ No newline at end of file