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

added DateTimeRangeContainer to MeterEnergy

pull/122/head
Caozhenhui 2022-02-16 01:07:33 +08:00
parent eda10a270c
commit 51ff6234a6
1 changed files with 456 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import { import {
Breadcrumb, Breadcrumb,
BreadcrumbItem, BreadcrumbItem,
@ -13,7 +14,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';
@ -30,10 +31,10 @@ 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 DateTimeRangeContainer from 'react-advanced-datetimerange-picker';
import { FormControl } from 'react-bootstrap';
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,11 +65,18 @@ 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(current_moment.clone().subtract(1, 'months').startOf('month')); const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(
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(current_moment.clone().startOf('month')); const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(
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);
@ -79,7 +87,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);
@ -91,32 +99,53 @@ 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([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]); const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([
{ 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 [local, setLocal] = useState({
format: 'MM/DD/YYYY HH:mm:ss A',
sundayFirst: false
});
const [ranges, setRanges] = useState({
'Today Only': [moment(reportingPeriodEndsDatetime).subtract('1','days'), moment(reportingPeriodEndsDatetime)],
'Yesterday Only': [
moment().subtract(2, 'days'),
moment().subtract(1, 'days')
],
'Last 3 Days': [moment().subtract(3, 'days'), moment()],
});
useEffect(() => { useEffect(() => {
let isResponseOK = false; let isResponseOK = false;
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(
JSON.stringify([json])
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
setCascaderOptions(json); setCascaderOptions(json);
setSelectedSpaceName([json[0]].map(o => o.label)); setSelectedSpaceName([json[0]].map(o => o.label));
setSelectedSpaceID([json[0]].map(o => o.value)); setSelectedSpaceID([json[0]].map(o => o.value));
@ -125,20 +154,27 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/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(
JSON.stringify([json])
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
console.log(json); console.log(json);
setMeterList(json[0]); setMeterList(json[0]);
setFilteredMeterList(json[0]); setFilteredMeterList(json[0]);
@ -152,24 +188,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
} }
} else { } else {
toast.error(json.description) toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(err); console.log(err);
}); });
// end of get Meters by root Space ID // end of get Meters by root Space ID
} else { } else {
toast.error(json.description); toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(err); console.log(err);
}); });
}, [t]);
}, [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]);
@ -178,21 +214,28 @@ 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])
.split('"id":')
.join('"value":')
.split('"name":')
.join('"label":')
);
console.log(json);
setMeterList(json[0]); setMeterList(json[0]);
setFilteredMeterList(json[0]); setFilteredMeterList(json[0]);
if (json[0].length > 0) { if (json[0].length > 0) {
@ -205,12 +248,13 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
} }
} else { } else {
toast.error(json.description) toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(err); console.log(err);
}); });
} };
let onComparisonTypeChange = ({ target }) => { let onComparisonTypeChange = ({ target }) => {
console.log(target.value); console.log(target.value);
@ -238,9 +282,7 @@ 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( const filteredResult = meterList.filter(meter => meter.label.toLowerCase().includes(keyword));
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);
@ -250,57 +292,40 @@ 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);
}; };
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { let applyCallback = (startDate, endDate) => {
if(reportingPeriodEndsDatetime < newDateTime){ setReportingPeriodBeginsDatetime(startDate);
newDateTime = reportingPeriodBeginsDatetime;
}
setReportingPeriodBeginsDatetime(newDateTime);
if (comparisonType === 'year-over-year') { if (comparisonType === 'year-over-year') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years')); setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years'));
} else if (comparisonType === 'month-on-month') { } else if (comparisonType === 'month-on-month') {
setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months')); setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'months'));
}
setReportingPeriodEndsDatetime(endDate);
if (comparisonType === 'year-over-year') {
setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'years'));
} else if (comparisonType === 'month-on-month') {
setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months'));
} }
}; };
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { var getValidBasePeriodBeginsDatetimes = function(currentDate) {
if(reportingPeriodBeginsDatetime > newDateTime){
newDateTime = reportingPeriodEndsDatetime;
}
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'));
}
};
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();
@ -319,93 +344,109 @@ 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(APIBaseURL + '/reports/meterenergy?' + fetch(
'meterid=' + selectedMeter + APIBaseURL +
'&periodtype=' + periodType + '/reports/meterenergy?' +
'&baseperiodstartdatetime=' + (basePeriodBeginsDatetime != null ? basePeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + 'meterid=' +
'&baseperiodenddatetime=' + (basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : '') + selectedMeter +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&periodtype=' +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { 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'),
{
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) {
console.log(json) console.log(json);
setMeterEnergyCategory({ setMeterEnergyCategory({
'name': json['meter']['energy_category_name'], name: json['meter']['energy_category_name'],
'unit': json['meter']['unit_of_measure'] unit: json['meter']['unit_of_measure']
}); });
setReportingPeriodEnergyConsumptionRate(parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + "%"); setReportingPeriodEnergyConsumptionRate(
parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + '%'
);
setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']); setReportingPeriodEnergyConsumptionInCategory(json['reporting_period']['total_in_category']);
setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000); setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000);
setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000); setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000);
setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']); setBasePeriodEnergyConsumptionInCategory(json['base_period']['total_in_category']);
let names = Array(); let names = Array();
names.push({ 'value': 'a0', 'label': json['meter']['energy_category_name'] }); names.push({ value: 'a0', label: json['meter']['energy_category_name'] });
setMeterLineChartOptions(names); setMeterLineChartOptions(names);
let timestamps = {} let timestamps = {};
timestamps['a0'] = json['reporting_period']['timestamps']; timestamps['a0'] = json['reporting_period']['timestamps'];
setMeterLineChartLabels(timestamps); setMeterLineChartLabels(timestamps);
let values = {'a0':[]} let values = { a0: [] };
json['reporting_period']['values'].forEach((currentValue, index) => { json['reporting_period']['values'].forEach((currentValue, index) => {
values['a0'][index] = currentValue.toFixed(2); values['a0'][index] = currentValue.toFixed(2);
}); });
setMeterLineChartData(values) setMeterLineChartData(values);
names = Array(); names = Array();
json['parameters']['names'].forEach((currentValue, index) => { json['parameters']['names'].forEach((currentValue, index) => {
names.push({ 'value': 'a' + index, 'label': currentValue }); names.push({ value: 'a' + index, label: currentValue });
}); });
setParameterLineChartOptions(names); setParameterLineChartOptions(names);
timestamps = {} timestamps = {};
json['parameters']['timestamps'].forEach((currentValue, index) => { json['parameters']['timestamps'].forEach((currentValue, index) => {
timestamps['a' + index] = currentValue; timestamps['a' + index] = currentValue;
}); });
setParameterLineChartLabels(timestamps); setParameterLineChartLabels(timestamps);
values = {} values = {};
json['parameters']['values'].forEach((currentValue, index) => { json['parameters']['values'].forEach((currentValue, index) => {
values['a' + index] = currentValue; values['a' + index] = currentValue;
}); });
setParameterLineChartData(values); setParameterLineChartData(values);
setDetailedDataTableColumns([{ setDetailedDataTableColumns([
{
dataField: 'startdatetime', dataField: 'startdatetime',
text: t('Datetime'), text: t('Datetime'),
sort: true sort: true
}, { },
{
dataField: 'a0', dataField: 'a0',
text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')',
sort: true, sort: true,
formatter: function (decimalValue) { formatter: function(decimalValue) {
if (decimalValue !== null) { if (decimalValue !== null) {
return decimalValue.toFixed(2); return decimalValue.toFixed(2);
} else { } else {
return null; return null;
} }
} }
}]); }
]);
let detailed_value_list = []; let detailed_value_list = [];
json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => { json['reporting_period']['timestamps'].forEach((currentTimestamp, timestampIndex) => {
@ -431,24 +472,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
setSpinnerHidden(true); setSpinnerHidden(true);
// show export button // show export button
setExportButtonHidden(false); setExportButtonHidden(false);
} else { } else {
toast.error(json.description) toast.error(json.description);
} }
}).catch(err => { })
.catch(err => {
console.log(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);
@ -457,28 +498,30 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
}); });
}; };
return ( return (
<Fragment> <Fragment>
<div> <div>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Meter Energy')}</BreadcrumbItem> <BreadcrumbItem>{t('Meter Data')}</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 options={cascaderOptions} <Cascader
options={cascaderOptions}
onChange={onSpaceCascaderChange} onChange={onSpaceCascaderChange}
changeOnSelect changeOnSelect
expandTrigger="hover"> expandTrigger="hover"
>
<Input value={selectedSpaceName || ''} readOnly /> <Input value={selectedSpaceName || ''} readOnly />
</Cascader> </Cascader>
</FormGroup> </FormGroup>
@ -488,10 +531,13 @@ 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 type="select" id="meterSelect" name="meterSelect" onChange={({ target }) => setSelectedMeter(target.value)} <CustomInput
type="select"
id="meterSelect"
name="meterSelect"
onChange={({ target }) => setSelectedMeter(target.value)}
> >
{filteredMeterList.map((meter, index) => ( {filteredMeterList.map((meter, index) => (
<option value={meter.value} key={meter.value}> <option value={meter.value} key={meter.value}>
@ -500,7 +546,6 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
))} ))}
</CustomInput> </CustomInput>
</Form> </Form>
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
@ -508,12 +553,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="comparisonType"> <Label className={labelClasses} for="comparisonType">
{t('Comparison Types')} {t('Comparison Types')}
</Label> </Label>
<CustomInput type="select" id="comparisonType" name="comparisonType" <CustomInput
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>
))} ))}
@ -525,10 +573,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
<Label className={labelClasses} for="periodType"> <Label className={labelClasses} for="periodType">
{t('Period Types')} {t('Period Types')}
</Label> </Label>
<CustomInput type="select" id="periodType" name="periodType" defaultValue="daily" onChange={({ target }) => setPeriodType(target.value)} <CustomInput
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>
))} ))}
@ -538,72 +591,84 @@ 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('(Optional)')} {t('Base Period Begins')}
{t('(Optional)')}
</Label> </Label>
<Datetime id='basePeriodBeginsDatetime' <Datetime
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('(Optional)')} {t('Base Period Ends')}
{t('(Optional)')}
</Label> </Label>
<Datetime id='basePeriodEndsDatetime' <Datetime
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}>
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="reportingPeriodBeginsDatetime"> <Label className={labelClasses}>
{t('Reporting Period Begins')} {t('Reporting Period')}
</Label> </Label>
<Datetime id='reportingPeriodBeginsDatetime' <DateTimeRangeContainer
value={reportingPeriodBeginsDatetime} start={reportingPeriodBeginsDatetime}
onChange={onReportingPeriodBeginsDatetimeChange} end={reportingPeriodEndsDatetime}
isValidDate={getValidReportingPeriodBeginsDatetimes} local={local}
closeOnSelect={true} /> twelveHoursClock={true}
</FormGroup> applyCallback={applyCallback}
</Col> ranges={ranges}
<Col xs={6} sm={3}> >
<FormGroup className="form-group"> <FormControl
<Label className={labelClasses} for="reportingPeriodEndsDatetime"> id="formControlsTextA"
{t('Reporting Period Ends')} type="text"
</Label> label="Text"
<Datetime id='reportingPeriodEndsDatetime' value={reportingPeriodBeginsDatetime.format('DD/MM/YYYY HH:mm:ss A') + " ~ " +
value={reportingPeriodEndsDatetime} reportingPeriodEndsDatetime.format('DD/MM/YYYY HH:mm:ss A')
onChange={onReportingPeriodEndsDatetimeChange} }
isValidDate={getValidReportingPeriodEndsDatetimes} />
closeOnSelect={true} /> </DateTimeRangeContainer>
</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>
</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 icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" <ButtonIcon
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>
@ -612,42 +677,91 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
</CardBody> </CardBody>
</Card> </Card>
<Fragment> <Fragment>
<div className="card-deck"> <div className="card-deck">
<CardSummary
<CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })} rate={reportingPeriodEnergyConsumptionRate}
color="success" > title={t('Reporting Period Consumption CATEGORY UNIT', {
<CountUp end={reportingPeriodEnergyConsumptionInCategory} duration={2} prefix="" separator="," decimals={2} decimal="." /> CATEGORY: meterEnergyCategory['name'],
UNIT: '(' + meterEnergyCategory['unit'] + ')'
})}
color="success"
>
<CountUp
end={reportingPeriodEnergyConsumptionInCategory}
duration={2}
prefix=""
separator=","
decimals={2}
decimal="."
/>
</CardSummary> </CardSummary>
<CardSummary rate={reportingPeriodEnergyConsumptionRate} title={t('Reporting Period Consumption CATEGORY UNIT', { 'CATEGORY': t('Ton of Standard Coal'), 'UNIT': '(TCE)' })} <CardSummary
color="warning" > rate={reportingPeriodEnergyConsumptionRate}
<CountUp end={reportingPeriodEnergyConsumptionInTCE} duration={2} prefix="" separator="," decimal="." decimals={2} /> title={t('Reporting Period Consumption CATEGORY UNIT', {
CATEGORY: t('Ton of Standard Coal'),
UNIT: '(TCE)'
})}
color="warning"
>
<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
color="warning" > rate={reportingPeriodEnergyConsumptionRate}
<CountUp end={reportingPeriodEnergyConsumptionInCO2} duration={2} prefix="" separator="," decimal="." decimals={2} /> 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> </CardSummary>
</div> </div>
<LineChart reportingTitle={t('Reporting Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': reportingPeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })} <LineChart
baseTitle={t('Base Period Consumption CATEGORY VALUE UNIT', { 'CATEGORY': meterEnergyCategory['name'], 'VALUE': basePeriodEnergyConsumptionInCategory.toFixed(2), 'UNIT': '(' + meterEnergyCategory['unit'] + ')' })} reportingTitle={t('Reporting Period Consumption CATEGORY VALUE 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 reportingTitle={t('Related Parameters')} <LineChart
baseTitle='' reportingTitle={t('Related Parameters')}
baseTitle=""
labels={parameterLineChartLabels} labels={parameterLineChartLabels}
data={parameterLineChartData} data={parameterLineChartData}
options={parameterLineChartOptions}> options={parameterLineChartOptions}
</LineChart> />
<br /> <br />
<DetailedDataTable data={detailedDataTableData} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} > <DetailedDataTable
</DetailedDataTable> data={detailedDataTableData}
title={t('Detailed Data')}
columns={detailedDataTableColumns}
pagesize={50}
/>
</Fragment> </Fragment>
</Fragment> </Fragment>
); );