index.tsx
3.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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 {
tid: number;
trid: number;
entityName:string;
enable:boolean;
}
interface Data{
current?:number;
currentPage?:number;
total?:number;
pageSize?:number;
}
const columns:ColumnsType<DataType> = [
{
title: '终端id',
dataIndex: 'tid',
key: 'tid',
width: 100
},
{
title: '终端名称',
dataIndex: 'entityName',
key: 'entityName',
width: 100
},
{
title: '轨迹id',
dataIndex: 'trid',
key: 'trid',
width: 100
},
{
title: '设备状态',
dataIndex: 'enable',
key: 'enable',
width: 100
}
];
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({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({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('查询数据失败');
});
}
}, [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, rowkey) => {
return {
//行点击
onClick: () => {
setRowKey(rowkey);
handelRow({tid: record?.tid, entityName: record?.entityName});
},
};
}
}
/>
</div>
);
}
export default PlayBackTable;