From 17bf3f9a0172e9aebbfec5ac57a318f836f4ca07 Mon Sep 17 00:00:00 2001 From: "13621160019@163.com" <13621160019@163.com> Date: Sat, 26 Feb 2022 15:47:29 +0800 Subject: [PATCH] replaced DateTime with DateRangePicker for MeterCarbon report in Web UI --- web/src/components/MyEMS/Meter/MeterCarbon.js | 192 ++++++++---------- web/src/components/MyEMS/Meter/MeterCost.js | 1 - web/src/i18n.js | 2 +- 3 files changed, 89 insertions(+), 106 deletions(-) diff --git a/web/src/components/MyEMS/Meter/MeterCarbon.js b/web/src/components/MyEMS/Meter/MeterCarbon.js index 8be4a07e..dd50ee91 100644 --- a/web/src/components/MyEMS/Meter/MeterCarbon.js +++ b/web/src/components/MyEMS/Meter/MeterCarbon.js @@ -16,7 +16,6 @@ import { Spinner, } from 'reactstrap'; import CountUp from 'react-countup'; -import Datetime from 'react-datetime'; import moment from 'moment'; import loadable from '@loadable/component'; import Cascader from 'rc-cascader'; @@ -30,6 +29,7 @@ import ButtonIcon from '../../common/ButtonIcon'; import { APIBaseURL } from '../../../config'; import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; +import { DateRangePicker } from 'rsuite'; const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); @@ -64,14 +64,28 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { const [selectedMeter, setSelectedMeter] = useState(undefined); const [comparisonType, setComparisonType] = useState('month-on-month'); 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 [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 const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true); const [spinnerHidden, setSpinnerHidden] = useState(true); @@ -167,7 +181,6 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; - let onSpaceCascaderChange = (value, selectedOptions) => { setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceID(value[value.length - 1]); @@ -231,66 +244,50 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { console.log(target.value); setComparisonType(target.value); if (target.value === 'year-over-year') { - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); - setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); - setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years')); + setBasePeriodDateRangePickerDisabled(true); + setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(), + moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]); } else if (target.value === 'month-on-month') { - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); - setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); - setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months')); + setBasePeriodDateRangePickerDisabled(true); + setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(), + moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]); } else if (target.value === 'free-comparison') { - setBasePeriodBeginsDatetimeDisabled(false); - setBasePeriodEndsDatetimeDisabled(false); + setBasePeriodDateRangePickerDisabled(false); } else if (target.value === 'none-comparison') { - setBasePeriodBeginsDatetime(undefined); - setBasePeriodEndsDatetime(undefined); - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDateRange([null, null]); + setBasePeriodDateRangePickerDisabled(true); } }; - let onBasePeriodBeginsDatetimeChange = (newDateTime) => { - setBasePeriodBeginsDatetime(newDateTime); - }; - - let onBasePeriodEndsDatetimeChange = (newDateTime) => { - setBasePeriodEndsDatetime(newDateTime); - }; - - let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { - setReportingPeriodBeginsDatetime(newDateTime); - if (comparisonType === 'year-over-year') { - setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); - } else if (comparisonType === 'month-on-month') { - setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); + let onBasePeriodChange = (DateRange) => { + console.log(DateRange); + + if(DateRange == null) { + setBasePeriodDateRange([null, null]); + } else { + setBasePeriodDateRange([DateRange[0], DateRange[1]]); } }; - let onReportingPeriodEndsDatetimeChange = (newDateTime) => { - setReportingPeriodEndsDatetime(newDateTime); - if (comparisonType === 'year-over-year') { - setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); - } else if (comparisonType === 'month-on-month') { - setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months')); + let onReportingPeriodChange = (DateRange) => { + if(DateRange == null) { + setReportingPeriodDateRange([null, null]); + } else { + setReportingPeriodDateRange([DateRange[0], DateRange[1]]); + if (comparisonType === 'year-over-year') { + setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]); + } else if (comparisonType === 'month-on-month') { + setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'months').toDate(), moment(DateRange[1]).clone().subtract(1, 'months').toDate()]); + } } }; - var getValidBasePeriodBeginsDatetimes = function (currentDate) { - return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); + let onBasePeriodClean = event => { + setBasePeriodDateRange([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')); + let onReportingPeriodClean = event => { + setReportingPeriodDateRange([null, null]); }; // Handler @@ -301,10 +298,10 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { console.log(selectedMeter); console.log(comparisonType); console.log(periodType); - console.log(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); - console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); - console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); - console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); + console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null) + console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null) + 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); @@ -320,10 +317,10 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { fetch(APIBaseURL + '/reports/metercarbon?' + 'meterid=' + selectedMeter + '&periodtype=' + periodType + - '&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + - '&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + - '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + - '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') + + '&baseperiodenddatetime=' + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).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", @@ -529,52 +526,39 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { - - - - - - - - - - - - - - - + +
+ diff --git a/web/src/components/MyEMS/Meter/MeterCost.js b/web/src/components/MyEMS/Meter/MeterCost.js index 12b84669..83ff6726 100644 --- a/web/src/components/MyEMS/Meter/MeterCost.js +++ b/web/src/components/MyEMS/Meter/MeterCost.js @@ -181,7 +181,6 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => { const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; - let onSpaceCascaderChange = (value, selectedOptions) => { setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceID(value[value.length - 1]); diff --git a/web/src/i18n.js b/web/src/i18n.js index 80d633ed..cbae33b4 100644 --- a/web/src/i18n.js +++ b/web/src/i18n.js @@ -1725,7 +1725,7 @@ const resources = { 'Base Period Begins': '基准期开始', 'Base Period Ends': '基准期结束', 'Comparison Types': '比较类型', - 'Year-Over-Year': '上年同比', + 'Year-Over-Year': '去年同比', 'Month-On-Month': '上月环比', 'Free Comparison': '自由比', 'None Comparison': '不比',