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

replaced DateTime with DateRangePicker for MeterTracking report in Web UI

pull/129/head
13621160019@163.com 2022-02-26 19:40:58 +08:00
parent edf92a7e88
commit a30716552f
1 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/components/MyEMS/Meter/MeterTracking.js
View File

@ -30,8 +30,8 @@ import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon'; import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import Datetime from "react-datetime";
import moment from "moment"; import moment from "moment";
import { DateRangePicker } from 'rsuite';
const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => { const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
@ -65,8 +65,24 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined) const [selectedSpaceID, setSelectedSpaceID] = useState(undefined)
//Query From //Query From
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const dateRangePickerLocale = {
sunday: t('sunday'),
monday: t('monday'),
tuesday: t('tuesday'),
wednesday: t('wednesday'),
thursday: t('thursday'),
friday: t('friday'),
saturday: t('saturday'),
ok: t('ok'),
today: t('today'),
yesterday: t('yesterday'),
hours: t('hours'),
minutes: t('minutes'),
seconds: t('seconds'),
last7Days: t('last7Days')
};
const dateRangePickerStyle = { display: 'block', zIndex: 10};
// buttons // buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -206,31 +222,25 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
setSubmitButtonDisabled(false); setSubmitButtonDisabled(false);
}; };
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { let onReportingPeriodChange = (DateRange) => {
setReportingPeriodBeginsDatetime(newDateTime); if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} else {
setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
} }
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { let onReportingPeriodClean = event => {
setReportingPeriodEndsDatetime(newDateTime); setReportingPeriodDateRange([null, null]);
};
}
var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
var getValidReportingPeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}
// Handler // Handler
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
console.log('handleSubmit'); console.log('handleSubmit');
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -244,8 +254,8 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/reports/metertracking?' + fetch(APIBaseURL + '/reports/metertracking?' +
'spaceid=' + selectedSpaceID + 'spaceid=' + selectedSpaceID +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -335,26 +345,20 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="reportingPeriodBeginsDatetime"> <Label className={labelClasses}>{t('Reporting Period')}</Label>
{t('Reporting Period Begins')} <br/>
</Label> <DateRangePicker
<Datetime id='reportingPeriodBeginsDatetime' id='reportingPeriodDateRangePicker'
value={reportingPeriodBeginsDatetime} format="yyyy-MM-dd hh:mm aa"
onChange={onReportingPeriodBeginsDatetimeChange} value={reportingPeriodDateRange}
isValidDate={getValidReportingPeriodBeginsDatetimes} onChange={onReportingPeriodChange}
closeOnSelect={true} /> size="md"
</FormGroup> style={dateRangePickerStyle}
</Col> onClean={onReportingPeriodClean}
<Col xs={6} sm={3}> locale={dateRangePickerLocale}
<FormGroup className="form-group"> showMeridian
<Label className={labelClasses} for="reportingPeriodEndsDatetime"> placeholder={t("Select Date Range")}
{t('Reporting Period Ends')} />
</Label>
<Datetime id='reportingPeriodEndsDatetime'
value={reportingPeriodEndsDatetime}
onChange={onReportingPeriodEndsDatetimeChange}
isValidDate={getValidReportingPeriodEndsDatetimes}
closeOnSelect={true} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">