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

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

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