Commit d3c2ff4ad53fdd7e85275c176cae305a8c4e5789
1 parent
684294aa
add:轨迹回放添加分页,点击行选中状态
Showing
3 changed files
with
45 additions
and
10 deletions
src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; | @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; | ||
2 | import { Table, message} from 'antd'; | 2 | import { Table, message} from 'antd'; |
3 | import type { ColumnsType } from 'antd/es/table'; | 3 | import type { ColumnsType } from 'antd/es/table'; |
4 | import {getGpsTableData, getTripTableData} from '../../api'; | 4 | import {getGpsTableData, getTripTableData} from '../../api'; |
5 | - | ||
6 | import './style.less'; | 5 | import './style.less'; |
7 | 6 | ||
8 | interface DataType { | 7 | interface DataType { |
@@ -11,6 +10,12 @@ interface DataType { | @@ -11,6 +10,12 @@ interface DataType { | ||
11 | entityName:string; | 10 | entityName:string; |
12 | enable:boolean; | 11 | enable:boolean; |
13 | } | 12 | } |
13 | +interface Data{ | ||
14 | + current?:number; | ||
15 | + currentPage?:number; | ||
16 | + total?:number; | ||
17 | + pageSize?:number; | ||
18 | +} | ||
14 | 19 | ||
15 | const columns:ColumnsType<DataType> = [ | 20 | const columns:ColumnsType<DataType> = [ |
16 | { | 21 | { |
@@ -45,52 +50,76 @@ interface DataType { | @@ -45,52 +50,76 @@ interface DataType { | ||
45 | function PlayBackTable(props:any) { | 50 | function PlayBackTable(props:any) { |
46 | const {handelRow, type} = props; | 51 | const {handelRow, type} = props; |
47 | const [tableData, setTableData] = useState<any>([]); | 52 | const [tableData, setTableData] = useState<any>([]); |
53 | + const [data, setData] = useState<Data>({current: 1, pageSize: 10}); | ||
54 | + const [rowKey, setRowKey] = useState<number>(); | ||
48 | useEffect(() => { | 55 | useEffect(() => { |
49 | //获取table数据 | 56 | //获取table数据 |
50 | if (type === 1) { | 57 | if (type === 1) { |
51 | - getGpsTableData().then(res => { | 58 | + getGpsTableData({current: data.current, pageSize: data.pageSize}).then(res => { |
52 | const data = res?.data?.data.map((item:any) => { | 59 | const data = res?.data?.data.map((item:any) => { |
53 | if (item?.enable) item.enable = '启用'; else item.enable = '禁用'; | 60 | if (item?.enable) item.enable = '启用'; else item.enable = '禁用'; |
54 | return item; | 61 | return item; |
55 | }); | 62 | }); |
56 | setTableData(data); | 63 | setTableData(data); |
64 | + setData(res?.data); | ||
57 | }).catch((e) => { | 65 | }).catch((e) => { |
58 | message.error('查询数据失败!'); | 66 | message.error('查询数据失败!'); |
59 | }); | 67 | }); |
60 | } else if (type === 2) { | 68 | } else if (type === 2) { |
61 | - getTripTableData().then(res => { | 69 | + getTripTableData({current: data.current, pageSize: data.pageSize}).then(res => { |
62 | const data = res?.data?.data.map((item:any) => { | 70 | const data = res?.data?.data.map((item:any) => { |
63 | if (item?.enable) item.enable = '启用'; else item.enable = '禁用'; | 71 | if (item?.enable) item.enable = '启用'; else item.enable = '禁用'; |
64 | return item; | 72 | return item; |
65 | }); | 73 | }); |
66 | setTableData(data); | 74 | setTableData(data); |
75 | + setData(res?.data); | ||
67 | }).catch((e) => { | 76 | }).catch((e) => { |
68 | - message.error('查询数据失败!'); | 77 | + message.error('查询数据失败'); |
69 | }); | 78 | }); |
70 | } | 79 | } |
71 | - }, []); | ||
72 | - | 80 | + }, [data.current, data.pageSize]); |
81 | + const setRowClassName = (record:any, key:any) => { | ||
82 | + if (rowKey === key) { | ||
83 | + return 'checkRow'; | ||
84 | + } else { | ||
85 | + return 'row'; | ||
86 | + } | ||
87 | + }; | ||
88 | + | ||
89 | + const handlePageChange = (current:number, pageSize:number) => { | ||
90 | + console.log(1); | ||
91 | + setTableData([]); | ||
92 | + setData({...data, current, pageSize}); | ||
93 | + }; | ||
73 | return ( | 94 | return ( |
74 | <div className="play_back_table"> | 95 | <div className="play_back_table"> |
75 | <Table | 96 | <Table |
76 | dataSource={tableData} | 97 | dataSource={tableData} |
77 | columns={columns} | 98 | columns={columns} |
78 | className="table_back" | 99 | className="table_back" |
100 | + rowClassName={setRowClassName} | ||
79 | rowKey={row => row.tid} | 101 | rowKey={row => row.tid} |
80 | pagination={{ | 102 | pagination={{ |
103 | + total: data?.total, | ||
104 | + current: data?.current, | ||
105 | + pageSize: data?.pageSize, | ||
81 | showQuickJumper: false, | 106 | showQuickJumper: false, |
82 | showSizeChanger: true, | 107 | showSizeChanger: true, |
108 | + onChange: handlePageChange, | ||
109 | + onShowSizeChange: handlePageChange, | ||
110 | + pageSizeOptions: ['10', '20', '50', '100', '150', '200'] | ||
83 | }} | 111 | }} |
84 | onRow={ | 112 | onRow={ |
85 | - record => { | 113 | + (record, rowkey) => { |
86 | return { | 114 | return { |
87 | //行点击 | 115 | //行点击 |
88 | onClick: () => { | 116 | onClick: () => { |
117 | + setRowKey(rowkey); | ||
89 | handelRow({tid: record?.tid, entityName: record?.entityName}); | 118 | handelRow({tid: record?.tid, entityName: record?.entityName}); |
90 | }, | 119 | }, |
91 | - }; | ||
92 | - } | ||
93 | -} | 120 | + }; |
121 | + } | ||
122 | + } | ||
94 | /> | 123 | /> |
95 | </div> | 124 | </div> |
96 | ); | 125 | ); |
src/pages/vms/OperationAdministration/components/PlayBackTable/style.css
src/pages/vms/OperationAdministration/components/PlayBackTable/style.less