seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add the pagination for meterrealtime page

pull/47/head
hyh123a 2021-07-05 16:25:21 +08:00
parent a648594243
commit f53e464f6e
1 changed files with 137 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
web/src/components/MyEMS/Meter/MeterRealtime.js
View File

@ -13,6 +13,9 @@ import {
Label, Label,
Row, Row,
Spinner, Spinner,
Pagination,
PaginationItem,
PaginationLink
} from 'reactstrap'; } from 'reactstrap';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
import RealtimeChart from './RealtimeChart'; import RealtimeChart from './RealtimeChart';
@ -23,8 +26,12 @@ import uuid from 'uuid/v1';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => { const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
const [cursor, setCursor] = useState(0);
const [maxCursor, setMaxCursor] = useState(0);
const [selectMeterList, setSelectMeterList] = useState([]);
const len = 8;
useEffect(() => { useEffect(() => {
let is_logged_in = getCookieValue('is_logged_in'); let is_logged_in = getCookieValue('is_logged_in');
let user_name = getCookieValue('user_name'); let user_name = getCookieValue('user_name');
@ -56,64 +63,73 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/tree', { fetch(APIBaseURL + '/spaces/tree', {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", 'Content-type': 'application/json',
"User-UUID": getCookieValue('user_uuid'), 'User-UUID': getCookieValue('user_uuid'),
"Token": getCookieValue('token') Token: getCookieValue('token')
}, },
body: null, body: null
})
}).then(response => { .then(response => {
console.log(response); console.log(response);
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}).then(json => { })
.then(json => {
console.log(json); console.log(json);
if (isResponseOK) { if (isResponseOK) {
// rename keys // rename keys
json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); json = JSON.parse(
JSON.stringify([json])
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
setCascaderOptions(json); setCascaderOptions(json);
// set the default space // set the default space
setSelectedSpaceName([json[0]].map(o => o.label)); setSelectedSpaceName([json[0]].map(o => o.label));
let selectedSpaceID = [json[0]].map(o => o.value) let selectedSpaceID = [json[0]].map(o => o.value);
//begin of getting meters of the default space //begin of getting meters of the default space
let isSecondResponseOK = false; let isSecondResponseOK = false;
fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', { fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", 'Content-type': 'application/json',
"User-UUID": getCookieValue('user_uuid'), 'User-UUID': getCookieValue('user_uuid'),
"Token": getCookieValue('token') Token: getCookieValue('token')
}, },
body: null, body: null
})
}).then(response => { .then(response => {
if (response.ok) { if (response.ok) {
isSecondResponseOK = true; isSecondResponseOK = true;
} }
return response.json(); return response.json();
}).then(json => { })
.then(json => {
if (isSecondResponseOK) { if (isSecondResponseOK) {
json = JSON.parse(JSON.stringify([json])); json = JSON.parse(JSON.stringify([json]));
console.log(json); console.log(json);
setMeterList(json[0]); setMeterList(json[0]);
setSpinnerHidden(true); setSpinnerHidden(true);
} else { } else {
toast.error(json.description) toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(err); console.log(err);
}); });
//end of getting meters of the default space //end of getting meters of the default space
} else { } else {
toast.error(json.description); toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(err); console.log(err);
}); });
//end of getting space tree //end of getting space tree
}, []); }, []);
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
@ -127,37 +143,51 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', { fetch(APIBaseURL + '/spaces/' + selectedSpaceID + '/meters', {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", 'Content-type': 'application/json',
"User-UUID": getCookieValue('user_uuid'), 'User-UUID': getCookieValue('user_uuid'),
"Token": getCookieValue('token') Token: getCookieValue('token')
}, },
body: null, body: null
})
}).then(response => { .then(response => {
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}).then(json => { })
.then(json => {
if (isResponseOK) { if (isResponseOK) {
json = JSON.parse(JSON.stringify([json])); json = JSON.parse(JSON.stringify([json]));
console.log(json); console.log(json);
setMeterList(json[0]); setMeterList(json[0]);
setSpinnerHidden(true); setSpinnerHidden(true);
} else { } else {
toast.error(json.description) toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(err); console.log(err);
}); });
//end of getting meters of the selected space //end of getting meters of the selected space
} };
useEffect(() => {
const meterLen = meterList.length;
const maxCursor = Math.ceil(meterLen / len);
setCursor(1);
setMaxCursor(maxCursor);
}, [meterList]);
useEffect(() => {
setSelectMeterList(meterList.slice(cursor * len - 8, cursor * len));
}, [cursor, meterList]);
return ( return (
<Fragment> <Fragment>
<div> <div>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Meter Realtime')}</BreadcrumbItem> <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem>
<BreadcrumbItem active>{t('Meter Realtime')}</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
</div> </div>
<Card className="bg-light mb-3"> <Card className="bg-light mb-3">
@ -170,17 +200,19 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
{t('Space')} {t('Space')}
</Label> </Label>
<br /> <br />
<Cascader options={cascaderOptions} <Cascader
options={cascaderOptions}
onChange={onSpaceCascaderChange} onChange={onSpaceCascaderChange}
changeOnSelect changeOnSelect
expandTrigger="hover"> expandTrigger="hover"
>
<Input value={selectedSpaceName || ''} readOnly /> <Input value={selectedSpaceName || ''} readOnly />
</Cascader> </Cascader>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<FormGroup> <FormGroup>
<br></br> <br />
<Spinner color="primary" hidden={spinnerHidden} /> <Spinner color="primary" hidden={spinnerHidden} />
</FormGroup> </FormGroup>
</Col> </Col>
@ -189,12 +221,30 @@ const MeterRealtime = ({ setRedirect, setRedirectUrl, t }) => {
</CardBody> </CardBody>
</Card> </Card>
<Row noGutters> <Row noGutters>
{meterList.map(meter => ( {selectMeterList.map(meter => (
<Col lg="3" className="pr-lg-2" key={uuid()}> <Col lg="3" className="pr-lg-2" key={uuid()}>
<RealtimeChart meterId={meter['id']} meterName={meter['name']} /> <RealtimeChart meterId={meter['id']} meterName={meter['name']} />
</Col> </Col>
))} ))}
</Row> </Row>
<Pagination>
<PaginationItem>
<PaginationLink first href="#" onClick={() => setCursor(1)} />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" onClick={() => (cursor - 1 >= 1 ? setCursor(cursor - 1) : null)} />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">{cursor}</PaginationLink>
</PaginationItem>
)
<PaginationItem>
<PaginationLink next href="#" onClick={() => (cursor + 1 <= maxCursor ? setCursor(cursor + 1) : null)} />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" onClick={() => setCursor(maxCursor)} />
</PaginationItem>
</Pagination>
</Fragment> </Fragment>
); );
}; };