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

replaced DateTime with DateRangePicker for VirtualMeterEnergy report in Web UI

pull/129/head
13621160019@163.com 2022-02-26 17:33:55 +08:00
parent 90215039b9
commit 4daab6ea7a
2 changed files with 115 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/MyEMS/Meter/MeterEnergy.js
View File

@ -316,7 +316,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setDetailedDataTableData([]); setDetailedDataTableData([]);
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/reports/metercost?' + fetch(APIBaseURL + '/reports/meterenergy?' +
'meterid=' + selectedMeter + 'meterid=' + selectedMeter +
'&periodtype=' + periodType + '&periodtype=' + periodType +
'&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') + '&baseperiodstartdatetime=' + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') +

236
web/src/components/MyEMS/Meter/VirtualMeterEnergy.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'));
@ -63,14 +63,28 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [selectedVirtualMeter, setSelectedVirtualMeter] = useState(undefined); const [selectedVirtualMeter, setSelectedVirtualMeter] = 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);
const [spinnerHidden, setSpinnerHidden] = useState(true); const [spinnerHidden, setSpinnerHidden] = useState(true);
@ -212,67 +226,51 @@ const VirtualMeterEnergy = ({ 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) {
let onBasePeriodEndsDatetimeChange = (newDateTime) => { setBasePeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime); } else {
} setBasePeriodDateRange([DateRange[0], DateRange[1]]);
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 onReportingPeriodEndsDatetimeChange = (newDateTime) => { let onReportingPeriodChange = (DateRange) => {
setReportingPeriodEndsDatetime(newDateTime); if(DateRange == null) {
if (comparisonType === 'year-over-year') { setReportingPeriodDateRange([null, null]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years')); } else {
} else if (comparisonType === 'month-on-month') { setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months')); 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) { let onBasePeriodClean = event => {
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); setBasePeriodDateRange([null, null]);
} };
var getValidBasePeriodEndsDatetimes = function (currentDate) { let onReportingPeriodClean = event => {
return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); 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();
@ -281,10 +279,10 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
console.log(selectedVirtualMeter); console.log(selectedVirtualMeter);
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);
@ -300,10 +298,10 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/reports/virtualmeterenergy?' + fetch(APIBaseURL + '/reports/virtualmeterenergy?' +
'virtualmeterid=' + selectedVirtualMeter + 'virtualmeterid=' + selectedVirtualMeter +
'&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",
@ -505,56 +503,44 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<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="basePeriodBeginsDatetime">
{t('Base Period Begins')}{t('(Optional)')} {t('Base Period')}{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}>{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">
<FormGroup> <FormGroup>
<br></br> <br/>
<ButtonGroup id="submit"> <ButtonGroup id="submit">
<Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button> <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
</ButtonGroup> </ButtonGroup>
@ -578,20 +564,25 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
</Form> </Form>
</CardBody> </CardBody>
</Card> </Card>
<div className="card-deck"> <Fragment>
<CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': virtualMeterEnergyCategory['name'], 'UNIT': '(' + virtualMeterEnergyCategory['unit'] + ')' })}
color="success" > <div className="card-deck">
<CountUp end={reportingPeriodEnergyConsumptionInCategory} duration={2} prefix="" separator="," decimals={2} decimal="." />
</CardSummary> <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': virtualMeterEnergyCategory['name'], 'UNIT': '(' + virtualMeterEnergyCategory['unit'] + ')' })}
<CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Standard Coal'), 'UNIT': '(TCE)' })} color="success" >
color="warning" > <CountUp end={reportingPeriodEnergyConsumptionInCategory} duration={2} prefix="" separator="," decimals={2} decimal="." />
<CountUp end={reportingPeriodEnergyConsumptionInTCE} duration={2} prefix="" separator="," decimal="." decimals={2} /> </CardSummary>
</CardSummary>
<CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Carbon Dioxide Emissions'), 'UNIT': '(T)' })} <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Standard Coal'), 'UNIT': '(TCE)' })}
color="warning" > color="warning" >
<CountUp end={reportingPeriodEnergyConsumptionInCO2} duration={2} prefix="" separator="," decimal="." decimals={2} /> <CountUp end={reportingPeriodEnergyConsumptionInTCE} duration={2} prefix="" separator="," decimal="." decimals={2} />
</CardSummary> </CardSummary>
</div> <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Carbon Dioxide Emissions'), 'UNIT': '(T)' })}
color="warning" >
<CountUp end={reportingPeriodEnergyConsumptionInCO2} duration={2} prefix="" separator="," decimal="." decimals={2} />
</CardSummary>
</div>
<LineChart reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': virtualMeterEnergyCategory['name'], 'VALUE': reportingPeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + virtualMeterEnergyCategory['unit'] + ')' })} <LineChart reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': virtualMeterEnergyCategory['name'], 'VALUE': reportingPeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + virtualMeterEnergyCategory['unit'] + ')' })}
baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': virtualMeterEnergyCategory['name'], 'VALUE': basePeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + virtualMeterEnergyCategory['unit'] + ')' })} baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': virtualMeterEnergyCategory['name'], 'VALUE': basePeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + virtualMeterEnergyCategory['unit'] + ')' })}
@ -610,6 +601,7 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} > <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
</DetailedDataTable> </DetailedDataTable>
</Fragment>
</Fragment> </Fragment>
); );
}; };