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

added rsuite/DateRangePicker to MeterEnergy

pull/125/head
Caozhenhui 2022-02-18 20:10:57 +08:00
parent 5ac1889af0
commit ffcd2df20b
1 changed files with 292 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
@ -14,7 +13,7 @@ import {
Input, Input,
Label, Label,
CustomInput, CustomInput,
Spinner Spinner,
} from 'reactstrap'; } from 'reactstrap';
import CountUp from 'react-countup'; import CountUp from 'react-countup';
import Datetime from 'react-datetime'; import Datetime from 'react-datetime';
@ -33,7 +32,9 @@ import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
import { DateRangePicker } from 'rsuite'; import { DateRangePicker } from 'rsuite';
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
let current_moment = moment(); let current_moment = moment();
useEffect(() => { useEffect(() => {
@ -64,18 +65,11 @@ const MeterEnergy = ({ 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( const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month'));
current_moment
.clone()
.subtract(1, 'months')
.startOf('month')
);
const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months')); const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months'));
const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true); const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true);
const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true); const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true);
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState( const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
current_moment.clone().startOf('month')
);
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined);
@ -86,7 +80,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
//Results //Results
const [meterEnergyCategory, setMeterEnergyCategory] = useState({ name: '', unit: '' }); const [meterEnergyCategory, setMeterEnergyCategory] = useState({ 'name': '', 'unit': '' });
const [reportingPeriodEnergyConsumptionInCategory, setReportingPeriodEnergyConsumptionInCategory] = useState(0); const [reportingPeriodEnergyConsumptionInCategory, setReportingPeriodEnergyConsumptionInCategory] = useState(0);
const [reportingPeriodEnergyConsumptionRate, setReportingPeriodEnergyConsumptionRate] = useState(''); const [reportingPeriodEnergyConsumptionRate, setReportingPeriodEnergyConsumptionRate] = useState('');
const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0); const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0);
@ -98,9 +92,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]); const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]);
const [parameterLineChartData, setParameterLineChartData] = useState({}); const [parameterLineChartData, setParameterLineChartData] = useState({});
const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]); const [parameterLineChartLabels, setParameterLineChartLabels] = useState([]);
const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([ const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
{ dataField: 'startdatetime', text: t('Datetime'), sort: true }
]);
const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]); const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]);
@ -110,90 +102,76 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/tree', { fetch(APIBaseURL + '/spaces/tree', {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-type': 'application/json', "Content-type": "application/json",
'User-UUID': getCookieValue('user_uuid'), "User-UUID": getCookieValue('user_uuid'),
Token: getCookieValue('token') "Token": getCookieValue('token')
}, },
body: null body: null,
})
.then(response => { }).then(response => {
console.log(response); console.log(response);
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}) }).then(json => {
.then(json => { console.log(json);
console.log(json); if (isResponseOK) {
if (isResponseOK) { // rename keys
// rename keys json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
json = JSON.parse( setCascaderOptions(json);
JSON.stringify([json]) setSelectedSpaceName([json[0]].map(o => o.label));
.split('"id":') setSelectedSpaceID([json[0]].map(o => o.value));
.join('"value":') // get Meters by root Space ID
.split('"name":') let isResponseOK = false;
.join('"label":') fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', {
); method: 'GET',
setCascaderOptions(json); headers: {
setSelectedSpaceName([json[0]].map(o => o.label)); "Content-type": "application/json",
setSelectedSpaceID([json[0]].map(o => o.value)); "User-UUID": getCookieValue('user_uuid'),
// get Meters by root Space ID "Token": getCookieValue('token')
let isResponseOK = false; },
fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { body: null,
method: 'GET',
headers: { }).then(response => {
'Content-type': 'application/json', if (response.ok) {
'User-UUID': getCookieValue('user_uuid'), isResponseOK = true;
Token: getCookieValue('token') }
}, return response.json();
body: null }).then(json => {
}) if (isResponseOK) {
.then(response => { json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
if (response.ok) { console.log(json);
isResponseOK = true; setMeterList(json[0]);
} setFilteredMeterList(json[0]);
return response.json(); if (json[0].length > 0) {
}) setSelectedMeter(json[0][0].value);
.then(json => { // enable submit button
if (isResponseOK) { setSubmitButtonDisabled(false);
json = JSON.parse( } else {
JSON.stringify([json]) setSelectedMeter(undefined);
.split('"id":') // disable submit button
.join('"value":') setSubmitButtonDisabled(true);
.split('"name":') }
.join('"label":') } else {
); toast.error(json.description)
console.log(json); }
setMeterList(json[0]); }).catch(err => {
setFilteredMeterList(json[0]); console.log(err);
if (json[0].length > 0) { });
setSelectedMeter(json[0][0].value); // end of get Meters by root Space ID
// enable submit button } else {
setSubmitButtonDisabled(false); toast.error(json.description);
} else { }
setSelectedMeter(undefined); }).catch(err => {
// disable submit button console.log(err);
setSubmitButtonDisabled(true); });
}
} else { }, [t,]);
toast.error(json.description);
}
})
.catch(err => {
console.log(err);
});
// end of get Meters by root Space ID
} else {
toast.error(json.description);
}
})
.catch(err => {
console.log(err);
});
}, [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]);
@ -202,47 +180,39 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/meters', { fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/meters', {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-type': 'application/json', "Content-type": "application/json",
'User-UUID': getCookieValue('user_uuid'), "User-UUID": getCookieValue('user_uuid'),
Token: getCookieValue('token') "Token": getCookieValue('token')
}, },
body: null body: null,
})
.then(response => { }).then(response => {
if (response.ok) { if (response.ok) {
isResponseOK = true; isResponseOK = true;
} }
return response.json(); return response.json();
}) }).then(json => {
.then(json => { if (isResponseOK) {
if (isResponseOK) { json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));
json = JSON.parse( console.log(json)
JSON.stringify([json]) setMeterList(json[0]);
.split('"id":') setFilteredMeterList(json[0]);
.join('"value":') if (json[0].length > 0) {
.split('"name":') setSelectedMeter(json[0][0].value);
.join('"label":') // enable submit button
); setSubmitButtonDisabled(false);
console.log(json);
setMeterList(json[0]);
setFilteredMeterList(json[0]);
if (json[0].length > 0) {
setSelectedMeter(json[0][0].value);
// enable submit button
setSubmitButtonDisabled(false);
} else {
setSelectedMeter(undefined);
// disable submit button
setSubmitButtonDisabled(true);
}
} else { } else {
toast.error(json.description); setSelectedMeter(undefined);
// disable submit button
setSubmitButtonDisabled(true);
} }
}) } else {
.catch(err => { toast.error(json.description)
console.log(err); }
}); }).catch(err => {
}; console.log(err);
});
}
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
@ -270,7 +240,9 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
const onSearchMeter = ({ target }) => { const onSearchMeter = ({ target }) => {
const keyword = target.value.toLowerCase(); const keyword = target.value.toLowerCase();
const filteredResult = meterList.filter(meter => meter.label.toLowerCase().includes(keyword)); const filteredResult = meterList.filter(
meter => meter.label.toLowerCase().includes(keyword)
);
setFilteredMeterList(keyword.length ? filteredResult : meterList); setFilteredMeterList(keyword.length ? filteredResult : meterList);
if (filteredResult.length > 0) { if (filteredResult.length > 0) {
setSelectedMeter(filteredResult[0].value); setSelectedMeter(filteredResult[0].value);
@ -280,14 +252,14 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSelectedMeter(undefined); setSelectedMeter(undefined);
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
} };
}; };
let onBasePeriodBeginsDatetimeChange = newDateTime => { let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
setBasePeriodBeginsDatetime(newDateTime); setBasePeriodBeginsDatetime(newDateTime);
}; };
let onBasePeriodEndsDatetimeChange = newDateTime => { let onBasePeriodEndsDatetimeChange = (newDateTime) => {
setBasePeriodEndsDatetime(newDateTime); setBasePeriodEndsDatetime(newDateTime);
}; };
@ -313,14 +285,22 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setValues([]); setValues([]);
}; };
var getValidBasePeriodBeginsDatetimes = function(currentDate) { var getValidBasePeriodBeginsDatetimes = function (currentDate) {
return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
}; };
var getValidBasePeriodEndsDatetimes = function(currentDate) { var getValidBasePeriodEndsDatetimes = function (currentDate) {
return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); 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
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
@ -339,184 +319,168 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
// show spinner // show spinner
setSpinnerHidden(false); setSpinnerHidden(false);
// hide export button // hide export button
setExportButtonHidden(true); setExportButtonHidden(true)
// Reinitialize tables // Reinitialize tables
setDetailedDataTableData([]); setDetailedDataTableData([]);
let isResponseOK = false; let isResponseOK = false;
fetch( fetch(APIBaseURL + '/reports/meterenergy?' +
APIBaseURL + 'meterid=' + selectedMeter +
'/reports/meterenergy?' + '&periodtype=' + periodType +
'meterid=' + '&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
selectedMeter + '&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') +
'&periodtype=' + '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
periodType + '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
'&baseperiodstartdatetime=' + method: 'GET',
(basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + headers: {
'&baseperiodenddatetime=' + "Content-type": "application/json",
(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + "User-UUID": getCookieValue('user_uuid'),
'&reportingperiodstartdatetime=' + "Token": getCookieValue('token')
reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + },
'&reportingperiodenddatetime=' + body: null,
reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'),
{
method: 'GET',
headers: {
'Content-type': 'application/json',
'User-UUID': getCookieValue('user_uuid'),
Token: getCookieValue('token')
},
body: null
}
)
.then(response => {
if (response.ok) {
isResponseOK = true;
}
return response.json();
})
.then(json => {
if (isResponseOK) {
console.log(json);
setMeterEnergyCategory({
name: json['meter']['energy_category_name'],
unit: json['meter']['unit_of_measure']
});
setReportingPeriodEnergyConsumptionRate(
parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + '%'
);
setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']);
setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000);
setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000);
setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']);
let names = Array(); }).then(response => {
names.push({ value: 'a0', label: json['meter']['energy_category_name'] }); if (response.ok) {
setMeterLineChartOptions(names); isResponseOK = true;
};
return response.json();
}).then(json => {
if (isResponseOK) {
console.log(json)
setMeterEnergyCategory({
'name': json['meter']['energy_category_name'],
'unit': json['meter']['unit_of_measure']
});
setReportingPeriodEnergyConsumptionRate(parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + "%");
setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']);
setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000);
setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000);
setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']);
let timestamps = {}; let names = Array();
timestamps['a0'] = json['reporting_period']['timestamps']; names.push({ 'value': 'a0', 'label': json['meter']['energy_category_name'] });
setMeterLineChartLabels(timestamps); setMeterLineChartOptions(names);
let values = { a0: [] }; let timestamps = {}
json['reporting_period']['values'].forEach((currentValue, index) => { timestamps['a0'] = json['reporting_period']['timestamps'];
values['a0'][index] = currentValue.toFixed(2); setMeterLineChartLabels(timestamps);
});
setMeterLineChartData(values);
names = Array(); let values = {'a0':[]}
json['parameters']['names'].forEach((currentValue, index) => { json['reporting_period']['values'].forEach((currentValue, index) => {
names.push({ value: 'a' + index, label: currentValue }); values['a0'][index] = currentValue.toFixed(2);
}); });
setParameterLineChartOptions(names); setMeterLineChartData(values)
timestamps = {}; names = Array();
json['parameters']['timestamps'].forEach((currentValue, index) => { json['parameters']['names'].forEach((currentValue, index) => {
timestamps['a' + index] = currentValue; names.push({ 'value': 'a' + index, 'label': currentValue });
}); });
setParameterLineChartLabels(timestamps); setParameterLineChartOptions(names);
values = {}; timestamps = {}
json['parameters']['values'].forEach((currentValue, index) => { json['parameters']['timestamps'].forEach((currentValue, index) => {
values['a' + index] = currentValue; timestamps['a' + index] = currentValue;
}); });
setParameterLineChartData(values); setParameterLineChartLabels(timestamps);
setDetailedDataTableColumns([ values = {}
{ json['parameters']['values'].forEach((currentValue, index) => {
dataField: 'startdatetime', values['a' + index] = currentValue;
text: t('Datetime'), });
sort: true setParameterLineChartData(values);
},
{ setDetailedDataTableColumns([{
dataField: 'a0', dataField: 'startdatetime',
text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', text: t('Datetime'),
sort: true, sort: true
formatter: function(decimalValue) { }, {
if (decimalValue !== null) { dataField: 'a0',
return decimalValue.toFixed(2); text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')',
} else { sort: true,
return null; formatter: function (decimalValue) {
} if (decimalValue !== null) {
} return decimalValue.toFixed(2);
} else {
return null;
} }
]); }
}]);
let detailed_value_list = [];
json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => {
let detailed_value = {};
detailed_value['id'] = timestampIndex;
detailed_value['startdatetime'] = currentTimestamp;
detailed_value['a0'] = json['reporting_period']['values'][timestampIndex];
detailed_value_list.push(detailed_value);
});
let detailed_value_list = [];
json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => {
let detailed_value = {}; let detailed_value = {};
detailed_value['id'] = detailed_value_list.length; detailed_value['id'] = timestampIndex;
detailed_value['startdatetime'] = t('Total'); detailed_value['startdatetime'] = currentTimestamp;
detailed_value['a0'] = json['reporting_period']['total_in_category']; detailed_value['a0'] = json['reporting_period']['values'][timestampIndex];
detailed_value_list.push(detailed_value); detailed_value_list.push(detailed_value);
setDetailedDataTableData(detailed_value_list); });
setExcelBytesBase64(json['excel_bytes_base64']); let detailed_value = {};
detailed_value['id'] = detailed_value_list.length;
detailed_value['startdatetime'] = t('Total');
detailed_value['a0'] = json['reporting_period']['total_in_category'];
detailed_value_list.push(detailed_value);
setDetailedDataTableData(detailed_value_list);
// enable submit button setExcelBytesBase64(json['excel_bytes_base64']);
setSubmitButtonDisabled(false);
// hide spinner // enable submit button
setSpinnerHidden(true); setSubmitButtonDisabled(false);
// show export button // hide spinner
setExportButtonHidden(false); setSpinnerHidden(true);
} else { // show export button
toast.error(json.description); setExportButtonHidden(false);
}
}) } else {
.catch(err => { toast.error(json.description)
console.log(err); setSpinnerHidden(true);
}); setSubmitButtonDisabled(false);
}
}).catch(err => {
console.log(err);
});
}; };
const handleExport = e => { const handleExport = e => {
e.preventDefault(); e.preventDefault();
const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileName = 'meterenergy.xlsx'; const fileName = 'meterenergy.xlsx'
var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64; var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64;
fetch(fileUrl) fetch(fileUrl)
.then(response => response.blob()) .then(response => response.blob())
.then(blob => { .then(blob => {
var link = window.document.createElement('a'); var link = window.document.createElement("a");
link.href = window.URL.createObjectURL(blob, { type: mimeType }); link.href = window.URL.createObjectURL(blob, { type: mimeType });
link.download = fileName; link.download = fileName;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
}); });
}; };
return ( return (
<Fragment> <Fragment>
<div> <div>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem> <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Meter Energy')}</BreadcrumbItem>
<BreadcrumbItem active>{t('Meter Energy')}</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
</div> </div>
<Card className="bg-light mb-3"> <Card className="bg-light mb-3">
<CardBody className="p-3"> <CardBody className="p-3">
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Row form> <Row form >
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="space"> <Label className={labelClasses} for="space">
{t('Space')} {t('Space')}
</Label> </Label>
<br /> <br />
<Cascader <Cascader options={cascaderOptions}
options={cascaderOptions}
onChange={onSpaceCascaderChange} onChange={onSpaceCascaderChange}
changeOnSelect changeOnSelect
expandTrigger="hover" expandTrigger="hover">
>
<Input value={selectedSpaceName || ''} readOnly /> <Input value={selectedSpaceName || ''} readOnly />
</Cascader> </Cascader>
</FormGroup> </FormGroup>
@ -526,21 +490,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="meterSelect"> <Label className={labelClasses} for="meterSelect">
{t('Meter')} {t('Meter')}
</Label> </Label>
<Form inline> <Form inline>
<Input placeholder={t('Search')} onChange={onSearchMeter} /> <Input placeholder={t('Search')} onChange={onSearchMeter} />
<CustomInput <CustomInput type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)}
type="select" >
id="meterSelect" {filteredMeterList.map((meter, index) => (
name="meterSelect" <option value={meter.value} key={meter.value}>
onChange={({ target }) => setSelectedMeter(target.value)} {meter.label}
> </option>
{filteredMeterList.map((meter, index) => ( ))}
<option value={meter.value} key={meter.value}> </CustomInput>
{meter.label}
</option>
))}
</CustomInput>
</Form> </Form>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
@ -548,15 +510,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="comparisonType"> <Label className={labelClasses} for="comparisonType">
{t('Comparison Types')} {t('Comparison Types')}
</Label> </Label>
<CustomInput <CustomInput type="select" id="comparisonType" name="comparisonType"
type="select"
id="comparisonType"
name="comparisonType"
defaultValue="month-on-month" defaultValue="month-on-month"
onChange={onComparisonTypeChange} onChange={onComparisonTypeChange}
> >
{comparisonTypeOptions.map((comparisonType, index) => ( {comparisonTypeOptions.map((comparisonType, index) => (
<option value={comparisonType.value} key={comparisonType.value}> <option value={comparisonType.value} key={comparisonType.value} >
{t(comparisonType.label)} {t(comparisonType.label)}
</option> </option>
))} ))}
@ -568,15 +527,10 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="periodType"> <Label className={labelClasses} for="periodType">
{t('Period Types')} {t('Period Types')}
</Label> </Label>
<CustomInput <CustomInput type="select" id="periodType" name="periodType" defaultValue="daily" onChange={({ target }) => setPeriodType(target.value)}
type="select"
id="periodType"
name="periodType"
defaultValue="daily"
onChange={({ target }) => setPeriodType(target.value)}
> >
{periodTypeOptions.map((periodType, index) => ( {periodTypeOptions.map((periodType, index) => (
<option value={periodType.value} key={periodType.value}> <option value={periodType.value} key={periodType.value} >
{t(periodType.label)} {t(periodType.label)}
</option> </option>
))} ))}
@ -586,33 +540,27 @@ const MeterEnergy = ({ 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('Base Period Begins')}{t('(Optional)')}
{t('(Optional)')}
</Label> </Label>
<Datetime <Datetime id='basePeriodBeginsDatetime'
id="basePeriodBeginsDatetime"
value={basePeriodBeginsDatetime} value={basePeriodBeginsDatetime}
inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }} inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }}
onChange={onBasePeriodBeginsDatetimeChange} onChange={onBasePeriodBeginsDatetimeChange}
isValidDate={getValidBasePeriodBeginsDatetimes} isValidDate={getValidBasePeriodBeginsDatetimes}
closeOnSelect={true} closeOnSelect={true} />
/>
</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="basePeriodEndsDatetime">
{t('Base Period Ends')} {t('Base Period Ends')}{t('(Optional)')}
{t('(Optional)')}
</Label> </Label>
<Datetime <Datetime id='basePeriodEndsDatetime'
id="basePeriodEndsDatetime"
value={basePeriodEndsDatetime} value={basePeriodEndsDatetime}
inputProps={{ disabled: basePeriodEndsDatetimeDisabled }} inputProps={{ disabled: basePeriodEndsDatetimeDisabled }}
onChange={onBasePeriodEndsDatetimeChange} onChange={onBasePeriodEndsDatetimeChange}
isValidDate={getValidBasePeriodEndsDatetimes} isValidDate={getValidBasePeriodEndsDatetimes}
closeOnSelect={true} closeOnSelect={true} />
/>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs={6} sm={3}> <Col xs={6} sm={3}>
@ -632,122 +580,67 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<FormGroup> <FormGroup>
<br /> <br></br>
<ButtonGroup id="submit"> <ButtonGroup id="submit">
<Button color="success" disabled={submitButtonDisabled}> <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
{t('Submit')}
</Button>
</ButtonGroup> </ButtonGroup>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<FormGroup> <FormGroup>
<br /> <br></br>
<Spinner color="primary" hidden={spinnerHidden} /> <Spinner color="primary" hidden={spinnerHidden} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<br /> <br></br>
<ButtonIcon <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default"
icon="external-link-alt"
transform="shrink-3 down-2"
color="falcon-default"
hidden={exportButtonHidden} hidden={exportButtonHidden}
onClick={handleExport} onClick={handleExport} >
> {t('Export')}
{t('Export')} </ButtonIcon>
</ButtonIcon>
</Col> </Col>
</Row> </Row>
</Form> </Form>
</CardBody> </CardBody>
</Card> </Card>
<Fragment> <Fragment>
<div className="card-deck"> <div className="card-deck">
<CardSummary
rate={reportingPeriodEnergyConsumptionRate} <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
title={t('Reporting Period Consumption CATEGORY UNIT', { color="success" >
CATEGORY: meterEnergyCategory['name'], <CountUp end={reportingPeriodEnergyConsumptionInCategory} duration={2} prefix="" separator="," decimals={2} decimal="." />
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
color="success"
>
<CountUp
end={reportingPeriodEnergyConsumptionInCategory}
duration={2}
prefix=""
separator=","
decimals={2}
decimal="."
/>
</CardSummary> </CardSummary>
<CardSummary <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Standard Coal'), 'UNIT': '(TCE)' })}
rate={reportingPeriodEnergyConsumptionRate} color="warning" >
title={t('Reporting Period Consumption CATEGORY UNIT', { <CountUp end={reportingPeriodEnergyConsumptionInTCE} duration={2} prefix="" separator="," decimal="." decimals={2} />
CATEGORY: t('Ton of Standard Coal'),
UNIT: '(TCE)'
})}
color="warning"
>
<CountUp
end={reportingPeriodEnergyConsumptionInTCE}
duration={2}
prefix=""
separator=","
decimal="."
decimals={2}
/>
</CardSummary> </CardSummary>
<CardSummary <CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Carbon Dioxide Emissions'), 'UNIT': '(T)' })}
rate={reportingPeriodEnergyConsumptionRate} color="warning" >
title={t('Reporting Period Consumption CATEGORY UNIT', { <CountUp end={reportingPeriodEnergyConsumptionInCO2} duration={2} prefix="" separator="," decimal="." decimals={2} />
CATEGORY: t('Ton of Carbon Dioxide Emissions'),
UNIT: '(T)'
})}
color="warning"
>
<CountUp
end={reportingPeriodEnergyConsumptionInCO2}
duration={2}
prefix=""
separator=","
decimal="."
decimals={2}
/>
</CardSummary> </CardSummary>
</div> </div>
<LineChart <LineChart reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': reportingPeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': basePeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })}
CATEGORY: meterEnergyCategory['name'],
VALUE: reportingPeriodEnergyConsumptionInCategory.toFixed(2),
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', {
CATEGORY: meterEnergyCategory['name'],
VALUE: basePeriodEnergyConsumptionInCategory.toFixed(2),
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
labels={meterLineChartLabels} labels={meterLineChartLabels}
data={meterLineChartData} data={meterLineChartData}
options={meterLineChartOptions} options={meterLineChartOptions}>
/> </LineChart>
<LineChart <LineChart reportingTitle={t('Related Parameters')}
reportingTitle={t('Related Parameters')} baseTitle=''
baseTitle=""
labels={parameterLineChartLabels} labels={parameterLineChartLabels}
data={parameterLineChartData} data={parameterLineChartData}
options={parameterLineChartOptions} options={parameterLineChartOptions}>
/> </LineChart>
<br /> <br />
<DetailedDataTable <DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >
data={detailedDataTableData} </DetailedDataTable>
title={t('Detailed Data')}
columns={detailedDataTableColumns}
pagesize={50}
/>
</Fragment> </Fragment>
</Fragment> </Fragment>
); );