vietvv/tool_test
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix & add

Browse Source
This commit is contained in:
huyt 2021-03-26 15:27:30 +07:00
parent f50c507d5e
commit a3a4c28fbf
1 changed files with 85 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/component/Test1.js
View File

@ -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(',');
}
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,
'item_per_page': itemPerPage,
'confidence': +inputConfidence,
"ids_camera": splitCam
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': currentPage,
'item_per_page': itemPerPage,
'confidence': +inputConfidence,
"ids_camera": splitCam
})
})
.then((response) => response.json())
.then((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)
}
})
.then((response) => response.json())
.then((data) => {
setData(data.data)
})
.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={data}
pagination={false}
/>
</Spin>
<Table
columns={columns}
dataSource={currentData}
/>
<Select defaultValue="10" style={{ width: 80, marginBottom: "30px" }} onChange={handleChangePageSize}>
{/* <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>