From ffcd2df20b3c362a430f325d467726584468b4b0 Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Fri, 18 Feb 2022 20:10:57 +0800 Subject: [PATCH] added rsuite/DateRangePicker to MeterEnergy --- web/src/components/MyEMS/Meter/MeterEnergy.js | 691 ++++++++---------- 1 file changed, 292 insertions(+), 399 deletions(-) diff --git a/web/src/components/MyEMS/Meter/MeterEnergy.js b/web/src/components/MyEMS/Meter/MeterEnergy.js index c3f30f24..d17c9c2e 100644 --- a/web/src/components/MyEMS/Meter/MeterEnergy.js +++ b/web/src/components/MyEMS/Meter/MeterEnergy.js @@ -1,5 +1,4 @@ import React, { Fragment, useEffect, useState } from 'react'; - import { Breadcrumb, BreadcrumbItem, @@ -14,7 +13,7 @@ import { Input, Label, CustomInput, - Spinner + Spinner, } from 'reactstrap'; import CountUp from 'react-countup'; import Datetime from 'react-datetime'; @@ -33,7 +32,9 @@ import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import { DateRangePicker } from 'rsuite'; + const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); + const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { let current_moment = moment(); useEffect(() => { @@ -64,18 +65,11 @@ const MeterEnergy = ({ 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 [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 [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [cascaderOptions, setCascaderOptions] = useState(undefined); @@ -86,7 +80,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [loading, setLoading] = useState(false); //Results - const [meterEnergyCategory, setMeterEnergyCategory] = useState({ name: '', unit: '' }); + const [meterEnergyCategory, setMeterEnergyCategory] = useState({ 'name': '', 'unit': '' }); const [reportingPeriodEnergyConsumptionInCategory, setReportingPeriodEnergyConsumptionInCategory] = useState(0); const [reportingPeriodEnergyConsumptionRate, setReportingPeriodEnergyConsumptionRate] = useState(''); const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0); @@ -98,9 +92,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [parameterLineChartOptions, setParameterLineChartOptions] = useState([]); const [parameterLineChartData, setParameterLineChartData] = 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 [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]); @@ -110,90 +102,76 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { fetch(APIBaseURL + '/spaces/tree', { method: 'GET', headers: { - 'Content-type': 'application/json', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + "Content-type": "application/json", + "User-UUID": getCookieValue('user_uuid'), + "Token": getCookieValue('token') }, - body: null - }) - .then(response => { - console.log(response); - if (response.ok) { - isResponseOK = true; - } - return response.json(); - }) - .then(json => { - console.log(json); - if (isResponseOK) { - // rename keys - json = JSON.parse( - JSON.stringify([json]) - .split('"id":') - .join('"value":') - .split('"name":') - .join('"label":') - ); - setCascaderOptions(json); - setSelectedSpaceName([json[0]].map(o => o.label)); - setSelectedSpaceID([json[0]].map(o => o.value)); - // get Meters by root Space ID - let isResponseOK = false; - fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { - 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) { - json = JSON.parse( - JSON.stringify([json]) - .split('"id":') - .join('"value":') - .split('"name":') - .join('"label":') - ); - 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 { - 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]); + body: null, + + }).then(response => { + console.log(response); + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }).then(json => { + console.log(json); + if (isResponseOK) { + // rename keys + json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); + setCascaderOptions(json); + setSelectedSpaceName([json[0]].map(o => o.label)); + setSelectedSpaceID([json[0]].map(o => o.value)); + // get Meters by root Space ID + let isResponseOK = false; + fetch(APIBaseURL + '/spaces/' + [json[0]].map(o => o.value) + '/meters', { + 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) { + json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); + 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 { + 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'; + let onSpaceCascaderChange = (value, selectedOptions) => { setSelectedSpaceName(selectedOptions.map(o => o.label).join('/')); setSelectedSpaceID(value[value.length - 1]); @@ -202,47 +180,39 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/meters', { method: 'GET', headers: { - 'Content-type': 'application/json', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + "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) { - json = JSON.parse( - JSON.stringify([json]) - .split('"id":') - .join('"value":') - .split('"name":') - .join('"label":') - ); - 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); - } + body: null, + + }).then(response => { + if (response.ok) { + isResponseOK = true; + } + return response.json(); + }).then(json => { + if (isResponseOK) { + json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":')); + 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 { - toast.error(json.description); + setSelectedMeter(undefined); + // disable submit button + setSubmitButtonDisabled(true); } - }) - .catch(err => { - console.log(err); - }); - }; + } else { + toast.error(json.description) + } + }).catch(err => { + console.log(err); + }); + } let onComparisonTypeChange = ({ target }) => { console.log(target.value); @@ -270,7 +240,9 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const onSearchMeter = ({ target }) => { 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); if (filteredResult.length > 0) { setSelectedMeter(filteredResult[0].value); @@ -280,14 +252,14 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { setSelectedMeter(undefined); // disable submit button setSubmitButtonDisabled(true); - } + }; }; - let onBasePeriodBeginsDatetimeChange = newDateTime => { + let onBasePeriodBeginsDatetimeChange = (newDateTime) => { setBasePeriodBeginsDatetime(newDateTime); }; - let onBasePeriodEndsDatetimeChange = newDateTime => { + let onBasePeriodEndsDatetimeChange = (newDateTime) => { setBasePeriodEndsDatetime(newDateTime); }; @@ -313,14 +285,22 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { setValues([]); }; - var getValidBasePeriodBeginsDatetimes = function(currentDate) { + var getValidBasePeriodBeginsDatetimes = function (currentDate) { 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')); }; + 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 const handleSubmit = e => { e.preventDefault(); @@ -339,184 +319,168 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { // show spinner setSpinnerHidden(false); // hide export button - setExportButtonHidden(true); + setExportButtonHidden(true) // Reinitialize tables setDetailedDataTableData([]); let isResponseOK = false; - fetch( - APIBaseURL + - '/reports/meterenergy?' + - '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'), - { - 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']); + fetch(APIBaseURL + '/reports/meterenergy?' + + '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'), { + method: 'GET', + headers: { + "Content-type": "application/json", + "User-UUID": getCookieValue('user_uuid'), + "Token": getCookieValue('token') + }, + body: null, - let names = Array(); - names.push({ value: 'a0', label: json['meter']['energy_category_name'] }); - setMeterLineChartOptions(names); + }).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 timestamps = {}; - timestamps['a0'] = json['reporting_period']['timestamps']; - setMeterLineChartLabels(timestamps); + let names = Array(); + names.push({ 'value': 'a0', 'label': json['meter']['energy_category_name'] }); + setMeterLineChartOptions(names); - let values = { a0: [] }; - json['reporting_period']['values'].forEach((currentValue, index) => { - values['a0'][index] = currentValue.toFixed(2); - }); - setMeterLineChartData(values); + let timestamps = {} + timestamps['a0'] = json['reporting_period']['timestamps']; + setMeterLineChartLabels(timestamps); - names = Array(); - json['parameters']['names'].forEach((currentValue, index) => { - names.push({ value: 'a' + index, label: currentValue }); - }); - setParameterLineChartOptions(names); + let values = {'a0':[]} + json['reporting_period']['values'].forEach((currentValue, index) => { + values['a0'][index] = currentValue.toFixed(2); + }); + setMeterLineChartData(values) - timestamps = {}; - json['parameters']['timestamps'].forEach((currentValue, index) => { - timestamps['a' + index] = currentValue; - }); - setParameterLineChartLabels(timestamps); + names = Array(); + json['parameters']['names'].forEach((currentValue, index) => { + names.push({ 'value': 'a' + index, 'label': currentValue }); + }); + setParameterLineChartOptions(names); - values = {}; - json['parameters']['values'].forEach((currentValue, index) => { - values['a' + index] = currentValue; - }); - setParameterLineChartData(values); + timestamps = {} + json['parameters']['timestamps'].forEach((currentValue, index) => { + timestamps['a' + index] = currentValue; + }); + setParameterLineChartLabels(timestamps); - setDetailedDataTableColumns([ - { - dataField: 'startdatetime', - text: t('Datetime'), - sort: true - }, - { - dataField: 'a0', - text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', - sort: true, - formatter: function(decimalValue) { - if (decimalValue !== null) { - return decimalValue.toFixed(2); - } else { - return null; - } - } + values = {} + json['parameters']['values'].forEach((currentValue, index) => { + values['a' + index] = currentValue; + }); + setParameterLineChartData(values); + + setDetailedDataTableColumns([{ + dataField: 'startdatetime', + text: t('Datetime'), + sort: true + }, { + dataField: 'a0', + text: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', + sort: true, + 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 = {}; - detailed_value['id'] = detailed_value_list.length; - detailed_value['startdatetime'] = t('Total'); - detailed_value['a0'] = json['reporting_period']['total_in_category']; + detailed_value['id'] = timestampIndex; + detailed_value['startdatetime'] = currentTimestamp; + detailed_value['a0'] = json['reporting_period']['values'][timestampIndex]; 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 - setSubmitButtonDisabled(false); - // hide spinner - setSpinnerHidden(true); - // show export button - setExportButtonHidden(false); - } else { - toast.error(json.description); - } - }) - .catch(err => { - console.log(err); - }); + setExcelBytesBase64(json['excel_bytes_base64']); + + // enable submit button + setSubmitButtonDisabled(false); + // hide spinner + setSpinnerHidden(true); + // show export button + setExportButtonHidden(false); + + } else { + toast.error(json.description) + setSpinnerHidden(true); + setSubmitButtonDisabled(false); + } + }).catch(err => { + console.log(err); + }); }; const handleExport = e => { e.preventDefault(); - const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; - const fileName = 'meterenergy.xlsx'; - var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64; + const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' + const fileName = 'meterenergy.xlsx' + var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64; fetch(fileUrl) - .then(response => response.blob()) - .then(blob => { - var link = window.document.createElement('a'); - link.href = window.URL.createObjectURL(blob, { type: mimeType }); - link.download = fileName; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - }); + .then(response => response.blob()) + .then(blob => { + var link = window.document.createElement("a"); + link.href = window.URL.createObjectURL(blob, { type: mimeType }); + link.download = fileName; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }); }; + return (
- {t('Meter Data')} - {t('Meter Energy')} + {t('Meter Data')}{t('Meter Energy')}
- +
- + expandTrigger="hover"> @@ -526,21 +490,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { + - - setSelectedMeter(target.value)} - > - {filteredMeterList.map((meter, index) => ( - - ))} - + + setSelectedMeter(target.value)} + > + {filteredMeterList.map((meter, index) => ( + + ))} + + @@ -548,15 +510,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - {comparisonTypeOptions.map((comparisonType, index) => ( - ))} @@ -568,15 +527,10 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - setPeriodType(target.value)} + setPeriodType(target.value)} > {periodTypeOptions.map((periodType, index) => ( - ))} @@ -586,33 +540,27 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - + closeOnSelect={true} /> - + closeOnSelect={true} /> @@ -632,122 +580,67 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { -
+

- + -
- -
-
+ + onClick={handleExport} > + {t('Export')} +
+
- - + + + - - + + - - + + +
- + options={meterLineChartOptions}> + - + options={parameterLineChartOptions}> +
- + + + );