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

replaced DateTime with DateRangePicker for MeterSubmetersBalance report in Web UI

pull/129/head
13621160019@163.com 2022-02-27 11:10:25 +08:00
parent b7cb8a3751
commit 7c4cd668b6
1 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,10 +16,9 @@ import {
Spinner,
} from 'reactstrap';
import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import Cascader from 'rc-cascader';
import moment from 'moment';
import loadable from '@loadable/component';
import Cascader from 'rc-cascader';
import CardSummary from '../common/CardSummary';
import LineChart from '../common/LineChart';
import { getCookieValue, createCookie } from '../../../helpers/utils';
@ -29,7 +28,7 @@ import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config';
import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -62,9 +61,25 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
const [filteredMeterList, setFilteredMeterList] = useState([]);
const [selectedMeter, setSelectedMeter] = useState(undefined);
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 [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
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@ -222,21 +237,18 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
};
};
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
setReportingPeriodBeginsDatetime(newDateTime);
let onReportingPeriodChange = (DateRange) => {
if(DateRange == null) {
setReportingPeriodDateRange([null, null]);
} else {
setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
}
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
setReportingPeriodEndsDatetime(newDateTime);
let onReportingPeriodClean = event => {
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
const handleSubmit = e => {
e.preventDefault();
@ -244,8 +256,8 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedSpaceID);
console.log(selectedMeter);
console.log(periodType);
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button
setSubmitButtonDisabled(true);
@ -261,8 +273,8 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/metersubmetersbalance?' +
'meterid=' + selectedMeter +
'&periodtype=' + periodType +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
'&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET',
headers: {
"Content-type": "application/json",
@ -449,26 +461,20 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
</Col>
<Col xs={6} sm={3}>
<FormGroup className="form-group">
<Label className={labelClasses} for="reportingPeriodBeginsDatetime">
{t('Reporting Period Begins')}
</Label>
<Datetime id='reportingPeriodBeginsDatetime'
value={reportingPeriodBeginsDatetime}
onChange={onReportingPeriodBeginsDatetimeChange}
isValidDate={getValidReportingPeriodBeginsDatetimes}
closeOnSelect={true} />
</FormGroup>
</Col>
<Col xs={6} sm={3}>
<FormGroup className="form-group">
<Label className={labelClasses} for="reportingPeriodEndsDatetime">
{t('Reporting Period Ends')}
</Label>
<Datetime id='reportingPeriodEndsDatetime'
value={reportingPeriodEndsDatetime}
onChange={onReportingPeriodEndsDatetimeChange}
isValidDate={getValidReportingPeriodEndsDatetimes}
closeOnSelect={true} />
<Label className={labelClasses}>{t('Reporting Period')}</Label>
<br/>
<DateRangePicker
id='reportingPeriodDateRangePicker'
format="yyyy-MM-dd hh:mm aa"
value={reportingPeriodDateRange}
onChange={onReportingPeriodChange}
size="md"
style={dateRangePickerStyle}
onClean={onReportingPeriodClean}
locale={dateRangePickerLocale}
showMeridian
placeholder={t("Select Date Range")}
/>
</FormGroup>
</Col>
<Col xs="auto">