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

replaced DateTime with DateRangePicker for MeterCarbon report in Web UI

pull/129/head
13621160019@163.com 2022-02-26 15:47:29 +08:00
parent 447c6fa795
commit 17bf3f9a01
3 changed files with 89 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
web/src/components/MyEMS/Meter/MeterCarbon.js
View File

@ -16,7 +16,6 @@ import {
Spinner, Spinner,
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime';
import moment from 'moment'; import moment from 'moment';
import loadable from '@loadable/component'; import loadable from '@loadable/component';
import Cascader from 'rc-cascader'; import Cascader from 'rc-cascader';
@ -30,6 +29,7 @@ import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@ -64,13 +64,27 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedMeter, setSelectedMeter] = useState(undefined); const [selectedMeter, setSelectedMeter] = useState(undefined);
const [comparisonType, setComparisonType] = useState('month-on-month'); const [comparisonType, setComparisonType] = useState('month-on-month');
const [periodType, setPeriodType] = useState('daily'); const [periodType, setPeriodType] = useState('daily');
const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month'));
const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months'));
const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true);
const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true);
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 [basePeriodDateRange, setBasePeriodDateRange] = useState([current_moment.clone().subtract(1, 'months').startOf('month').toDate(), current_moment.clone().subtract(1, 'months').toDate()]);
const [basePeriodDateRangePickerDisabled, setBasePeriodDateRangePickerDisabled] = useState(true);
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);
@ -167,7 +181,6 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
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';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);
@ -231,66 +244,50 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
console.log(target.value); console.log(target.value);
setComparisonType(target.value); setComparisonType(target.value);
if (target.value === 'year-over-year') { if (target.value === 'year-over-year') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
} else if (target.value === 'month-on-month') { } else if (target.value === 'month-on-month') {
setBasePeriodBeginsDatetimeDisabled(true); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodEndsDatetimeDisabled(true); setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(),
setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]);
setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
} else if (target.value === 'free-comparison') { } else if (target.value === 'free-comparison') {
setBasePeriodBeginsDatetimeDisabled(false); setBasePeriodDateRangePickerDisabled(false);
setBasePeriodEndsDatetimeDisabled(false);
} else if (target.value === 'none-comparison') { } else if (target.value === 'none-comparison') {
setBasePeriodBeginsDatetime(undefined); setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(undefined); setBasePeriodDateRangePickerDisabled(true);
setBasePeriodBeginsDatetimeDisabled(true);
setBasePeriodEndsDatetimeDisabled(true);
} }
}; };
let onBasePeriodBeginsDatetimeChange = (newDateTime) => { let onBasePeriodChange = (DateRange) => {
setBasePeriodBeginsDatetime(newDateTime); console.log(DateRange);
if(DateRange == null) {
setBasePeriodDateRange([null, null]);
} else {
setBasePeriodDateRange([DateRange[0], DateRange[1]]);
}
}; };
let onBasePeriodEndsDatetimeChange = (newDateTime) => { let onReportingPeriodChange = (DateRange) => {
setBasePeriodEndsDatetime(newDateTime); if(DateRange == null) {
}; setReportingPeriodDateRange([null, null]);
} else {
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
setReportingPeriodBeginsDatetime(newDateTime);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]);
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]);
}
} }
}; };
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { let onBasePeriodClean = event => {
setReportingPeriodEndsDatetime(newDateTime); setBasePeriodDateRange([null, null]);
if (comparisonType === 'year-over-year') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years'));
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
}
}; };
var getValidBasePeriodBeginsDatetimes = function (currentDate) { let onReportingPeriodClean = event => {
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); setReportingPeriodDateRange([null, null]);
};
var getValidBasePeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
};
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
@ -301,10 +298,10 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedMeter); console.log(selectedMeter);
console.log(comparisonType); console.log(comparisonType);
console.log(periodType); console.log(periodType);
console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null)
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null)
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);
@ -320,10 +317,10 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/metercarbon?' + fetch(APIBaseURL + '/reports/metercarbon?' +
'meterid=' + selectedMeter + 'meterid=' + selectedMeter +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') +
'&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",
@ -529,52 +526,39 @@ const MeterCarbon = ({ 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="basePeriodBeginsDatetime"> <Label className={labelClasses} for="basePeriodDateRangePicker">{t('Base Period')}{t('(Optional)')}
{t('Base Period Begins')}{t('(Optional)')}
</Label> </Label>
<Datetime id='basePeriodBeginsDatetime' <DateRangePicker
value={basePeriodBeginsDatetime} id='basePeriodDateRangePicker'
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} readOnly={basePeriodDateRangePickerDisabled}
onChange={onBasePeriodBeginsDatetimeChange} format="yyyy-MM-dd hh:mm aa"
isValidDate={getValidBasePeriodBeginsDatetimes} value={basePeriodDateRange}
closeOnSelect={true} /> onChange={onBasePeriodChange}
size="md"
style={dateRangePickerStyle}
onClean={onBasePeriodClean}
locale={dateRangePickerLocale}
showMeridian
placeholder={t("Select Date Range")}
/>
</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="basePeriodEndsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Base Period Ends')}{t('(Optional)')} <br/>
</Label> <DateRangePicker
<Datetime id='basePeriodEndsDatetime' id='reportingPeriodDateRangePicker'
value={basePeriodEndsDatetime} format="yyyy-MM-dd hh:mm aa"
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} value={reportingPeriodDateRange}
onChange={onBasePeriodEndsDatetimeChange} onChange={onReportingPeriodChange}
isValidDate={getValidBasePeriodEndsDatetimes} size="md"
closeOnSelect={true} /> style={dateRangePickerStyle}
</FormGroup> onClean={onReportingPeriodClean}
</Col> locale={dateRangePickerLocale}
<Col xs={6} sm={3}> showMeridian
<FormGroup className="form-group"> placeholder={t("Select Date Range")}
<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} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

1
web/src/components/MyEMS/Meter/MeterCost.js
View File

@ -181,7 +181,6 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
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';
let onSpaceCascaderChange = (value, selectedOptions) => { let onSpaceCascaderChange = (value, selectedOptions) => {
setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
setSelectedSpaceID(value[value.length - 1]); setSelectedSpaceID(value[value.length - 1]);

2
web/src/i18n.js
View File

@ -1725,7 +1725,7 @@ const resources = {
'Base Period Begins': '基准期开始', 'Base Period Begins': '基准期开始',
'Base Period Ends': '基准期结束', 'Base Period Ends': '基准期结束',
'Comparison Types': '比较类型', 'Comparison Types': '比较类型',
'Year-Over-Year': '上年同比', 'Year-Over-Year': '去年同比',
'Month-On-Month': '上月环比', 'Month-On-Month': '上月环比',
'Free Comparison': '自由比', 'Free Comparison': '自由比',
'None Comparison': '不比', 'None Comparison': '不比',