fix & add
This commit is contained in:
parent
f50c507d5e
commit
a3a4c28fbf
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Avatar, Button, Input, Select, Table } from 'antd';
|
||||
import { Avatar, Button, Input, Select, Table, Pagination, message, Spin,Image } from 'antd';
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import DatePicker from "react-datepicker";
|
||||
|
|
@ -7,16 +7,17 @@ import "react-datepicker/dist/react-datepicker.css";
|
|||
import 'antd/dist/antd.css';
|
||||
|
||||
const columns = [
|
||||
|
||||
{
|
||||
title: 'Avt Origin',
|
||||
dataIndex: 'url_origin_img',
|
||||
render: (url_origin_img) => <Avatar src={url_origin_img} size={100} />,
|
||||
render: (url_origin_img) => <Image preview={false} src={url_origin_img} height={100} width={100} />,
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Avt Input',
|
||||
dataIndex: 'url_input_img',
|
||||
render: (url_input_img) => <Avatar src={url_input_img} size={100} />,
|
||||
render: (url_input_img) => <Image preview={false} src={url_input_img} height={100} width={100} />,
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
|
|
@ -57,38 +58,81 @@ const Test = () => {
|
|||
const [inputURL, setInputURL] = useState();
|
||||
const [inputConfidence, setInputConfidence] = useState();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [dataCount, setDataCount] = useState(0)
|
||||
|
||||
const [itemPerPage, setItemPerPage] = useState(10)
|
||||
|
||||
|
||||
const onChange = page => {
|
||||
const onChangePage = page => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (e) => {
|
||||
setItemPerPage(e)
|
||||
}
|
||||
|
||||
const onChangeSize = (current, size) => {
|
||||
setCurrentPage(current)
|
||||
setItemPerPage(size)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [currentPage, itemPerPage])
|
||||
|
||||
|
||||
const fetchData = () => {
|
||||
|
||||
if (inputCam) {
|
||||
var splitCam = inputCam.split(',');
|
||||
}
|
||||
|
||||
|
||||
if (inputURL) {
|
||||
setLoading(true)
|
||||
fetch(`${inputURL}/api/statistic_histories`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
'start_date': moment(startDate).format("YYYY-MM-DD 00:00:00"),
|
||||
'end_date': moment(endDate).format("YYYY-MM-DD 00:00:00"),
|
||||
'index': 1,
|
||||
'index': currentPage,
|
||||
'item_per_page': itemPerPage,
|
||||
'confidence': +inputConfidence,
|
||||
"ids_camera": splitCam
|
||||
})
|
||||
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setData(data.data)
|
||||
if (data.status === 10000) {
|
||||
setData(data.data.histories)
|
||||
setDataCount(data.data.count)
|
||||
setLoading(false)
|
||||
}
|
||||
else {
|
||||
message.error({
|
||||
content: "FETCH DATA ERROR",
|
||||
className: 'custom-class',
|
||||
style: {
|
||||
textAlign: "left",
|
||||
},
|
||||
})
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
message.error("FETCH DATA ERROR")
|
||||
setLoading(false)
|
||||
});
|
||||
} else {
|
||||
message.error({
|
||||
content: "URL required",
|
||||
duration: 1,
|
||||
className: 'custom-class',
|
||||
style: {
|
||||
textAlign: "left",
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeInput = (e) => {
|
||||
|
|
@ -103,26 +147,14 @@ const Test = () => {
|
|||
setInputConfidence(e.target.value)
|
||||
}
|
||||
|
||||
const handleChangePageSize = (e) => {
|
||||
setItemPerPage(e)
|
||||
console.log(itemPerPage)
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [itemPerPage])
|
||||
|
||||
console.log(itemPerPage)
|
||||
|
||||
const indexOfLastData = currentPage * itemPerPage;
|
||||
const indexOfFirstData = indexOfLastData - itemPerPage;
|
||||
const currentData = data.slice(indexOfFirstData, indexOfLastData)
|
||||
|
||||
const totalData = data.length;
|
||||
}, [currentPage])
|
||||
|
||||
|
||||
|
||||
|
||||
console.log(currentData)
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
|
|
@ -146,7 +178,7 @@ const Test = () => {
|
|||
<div style={{ display: 'flex', justifyContent: 'center', marginTop: "30px" }}>
|
||||
<Input
|
||||
style={{ width: 500 }}
|
||||
placeholder="URL"
|
||||
placeholder="http://api.demo.beetai.com"
|
||||
onChange={onChangeInputURL}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -194,18 +226,21 @@ const Test = () => {
|
|||
)
|
||||
})
|
||||
} */}
|
||||
|
||||
<Spin spinning={loading}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={currentData}
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
/>
|
||||
<Select defaultValue="10" style={{ width: 80, marginBottom: "30px" }} onChange={handleChangePageSize}>
|
||||
</Spin>
|
||||
|
||||
{/* <Select defaultValue="10" style={{ width: 80, marginBottom: "30px" }} onChange={handleChangePageSize}>
|
||||
<Option value={10}>10</Option>
|
||||
<Option value={50}>50</Option>
|
||||
<Option value={100}>100</Option>
|
||||
<Option value={1000}>1000</Option>
|
||||
<Option value={5000}>5000</Option>
|
||||
</Select>
|
||||
</Select> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="right">
|
||||
|
|
@ -213,11 +248,15 @@ const Test = () => {
|
|||
</div> */}
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginTop: "20px" }}>
|
||||
{/* <Pagination
|
||||
<Pagination
|
||||
current={currentPage}
|
||||
onChange={onChange}
|
||||
total={totalData}
|
||||
/> */}
|
||||
onChange={onChangePage}
|
||||
defaultPageSize={itemPerPage}
|
||||
total={dataCount}
|
||||
pageSizeOptions={[20, 50, 100, 500]}
|
||||
onShowSizeChange={onChangeSize}
|
||||
|
||||
/>
|
||||
{/* <Select defaultValue="10" style={{ width: 80 }} onChange={handleChangePageSize}>
|
||||
<Option value={10}>10</Option>
|
||||
<Option value={20}>20</Option>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user