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

Merge branch 'develop'

pull/133/head
13621160019@163.com 2022-02-27 11:19:08 +08:00
parent 2d30249330 7c4cd668b6
commit e4db7bc446
4 changed files with 201 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
web/src/components/MyEMS/Meter/MeterBatch.js
View File

@ -14,21 +14,19 @@ import {
Label, Label,
Spinner, Spinner,
} from 'reactstrap'; } from 'reactstrap';
import Datetime from 'react-datetime'; import Cascader from 'rc-cascader';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader';
import { getCookieValue, createCookie } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; 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 { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
let current_moment = moment(); let current_moment = moment();
useEffect(() => { useEffect(() => {
@ -50,14 +48,30 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
} }
}); });
// State // State
// Query Parameters //Query From
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [meterList, setMeterList] = useState([]); const [meterList, setMeterList] = useState([]);
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
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(false); const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
const [spinnerHidden, setSpinnerHidden] = useState(true); const [spinnerHidden, setSpinnerHidden] = useState(true);
@ -114,30 +128,27 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
setMeterList([]); setMeterList([]);
setExportButtonHidden(true); setExportButtonHidden(true);
setSubmitButtonDisabled(false); setSubmitButtonDisabled(false);
} };
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
setReportingPeriodBeginsDatetime(newDateTime);
}
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { let onReportingPeriodChange = (DateRange) => {
setReportingPeriodEndsDatetime(newDateTime); if(DateRange == null) {
} setReportingPeriodDateRange([null, null]);
} else {
setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
}
};
var getValidReportingPeriodBeginsDatetimes = function (currentDate) { let onReportingPeriodClean = event => {
return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); setReportingPeriodDateRange([null, null]);
} };
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);
@ -152,8 +163,8 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/reports/meterbatch?' + fetch(APIBaseURL + '/reports/meterbatch?' +
'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",
@ -227,7 +238,6 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
setSpinnerHidden(true); setSpinnerHidden(true);
// show export button // show export button
setExportButtonHidden(false); setExportButtonHidden(false);
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -280,29 +290,22 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
</Cascader> </Cascader>
</FormGroup> </FormGroup>
</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">

86
web/src/components/MyEMS/Meter/MeterSubmetersBalance.js
View File

@ -16,10 +16,9 @@ import {
Spinner, Spinner,
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime'; import Cascader from 'rc-cascader';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader';
import CardSummary from '../common/CardSummary'; import CardSummary from '../common/CardSummary';
import LineChart from '../common/LineChart'; import LineChart from '../common/LineChart';
import { getCookieValue, createCookie } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils';
@ -29,7 +28,7 @@ import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon'; import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -62,9 +61,25 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
const [filteredMeterList, setFilteredMeterList] = useState([]); const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined); const [selectedMeter, setSelectedMeter] = useState(undefined);
const [periodType, setPeriodType] = useState('daily'); const [periodType, setPeriodType] = useState('daily');
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
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);
@ -222,21 +237,18 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
}; };
}; };
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();
@ -244,8 +256,8 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID); console.log(selectedSpaceID);
console.log(selectedMeter); console.log(selectedMeter);
console.log(periodType); console.log(periodType);
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);
@ -261,8 +273,8 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/metersubmetersbalance?' + fetch(APIBaseURL + '/reports/metersubmetersbalance?' +
'meterid=' + selectedMeter + 'meterid=' + selectedMeter +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&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",
@ -449,26 +461,20 @@ const MeterSubmetersBalance = ({ 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">

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

@ -20,6 +20,7 @@ import {
Spinner, Spinner,
} from 'reactstrap'; } from 'reactstrap';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
import moment from "moment";
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -30,8 +31,7 @@ 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 { DateRangePicker } from 'rsuite';
import moment from "moment";
const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => { const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
@ -57,22 +57,39 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
let table = createRef(); let table = createRef();
// State // State
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
const [meterList, setMeterList] = useState([]); const [meterList, setMeterList] = useState([]);
const [cascaderOptions, setCascaderOptions] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [spinnerHidden, setSpinnerHidden] = useState(false);
const [exportButtonHidden, setExportButtonHidden] = useState(true);
const [excelBytesBase64, setExcelBytesBase64] = 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);
const [spinnerHidden, setSpinnerHidden] = useState(false);
const [exportButtonHidden, setExportButtonHidden] = useState(true);
// Results
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
useEffect(() => { useEffect(() => {
// begin of getting space tree
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/spaces/tree', { fetch(APIBaseURL + '/spaces/tree', {
method: 'GET', method: 'GET',
@ -107,7 +124,6 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}); });
// end of getting space tree
}, []); }, []);
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -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 onReportingPeriodClean = event => {
setReportingPeriodDateRange([null, null]);
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { };
setReportingPeriodEndsDatetime(newDateTime);
}
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);
@ -239,13 +249,14 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
// hide export button // hide export button
setExportButtonHidden(true) setExportButtonHidden(true)
// Reinitialize tables
setMeterList([]); setMeterList([]);
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",
@ -277,12 +288,12 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
setExcelBytesBase64(json['excel_bytes_base64']); setExcelBytesBase64(json['excel_bytes_base64']);
// enable submit button
setSubmitButtonDisabled(false);
// hide spinner // hide spinner
setSpinnerHidden(true); setSpinnerHidden(true);
// show export button // show export button
setExportButtonHidden(false); setExportButtonHidden(false);
setSubmitButtonDisabled(false);
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -335,26 +346,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">

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

@ -15,10 +15,9 @@ import {
CustomInput, CustomInput,
Spinner, Spinner,
} from 'reactstrap'; } from 'reactstrap';
import Datetime from 'react-datetime'; import Cascader from 'rc-cascader';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader';
import LineChart from '../common/LineChart'; import LineChart from '../common/LineChart';
import { getCookieValue, createCookie } from '../../../helpers/utils'; import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
@ -26,7 +25,7 @@ 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 { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -58,9 +57,25 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
const [meterList, setMeterList] = useState([]); const [meterList, setMeterList] = useState([]);
const [filteredMeterList, setFilteredMeterList] = useState([]); const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined); const [selectedMeter, setSelectedMeter] = useState(undefined);
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('day'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
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);
@ -212,29 +227,26 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
}; };
}; };
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(selectedMeter); console.log(selectedMeter);
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);
@ -249,8 +261,8 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/reports/metertrend?' + fetch(APIBaseURL + '/reports/metertrend?' +
'meterid=' + selectedMeter + 'meterid=' + selectedMeter +
'&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",
@ -413,26 +425,20 @@ const MeterTrend = ({ 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">