From af631fd8f1a68b96ef1897d980d06bbe81239c52 Mon Sep 17 00:00:00 2001 From: wmiao <1106063169@qq.com> Date: Sun, 25 Feb 2024 20:24:12 +0800 Subject: [PATCH 1/2] fixed warnings in src/components/MyEMS/Meter/MeterCarbon.js --- .../src/components/MyEMS/Meter/MeterCarbon.js | 1009 ++++++++++------- 1 file changed, 598 insertions(+), 411 deletions(-) diff --git a/myems-web/src/components/MyEMS/Meter/MeterCarbon.js b/myems-web/src/components/MyEMS/Meter/MeterCarbon.js index d3bcca6251..fde65e3d0d 100644 --- a/myems-web/src/components/MyEMS/Meter/MeterCarbon.js +++ b/myems-web/src/components/MyEMS/Meter/MeterCarbon.js @@ -13,7 +13,7 @@ import { Input, Label, CustomInput, - Spinner, + Spinner } from 'reactstrap'; import CountUp from 'react-countup'; import moment from 'moment'; @@ -30,11 +30,10 @@ import { APIBaseURL, settings } from '../../../config'; import { periodTypeOptions } from '../common/PeriodTypeOptions'; import { comparisonTypeOptions } from '../common/ComparisonTypeOptions'; import DateRangePickerWrapper from '../common/DateRangePickerWrapper'; -import { endOfDay} from 'date-fns'; +import { endOfDay } from 'date-fns'; import AppContext from '../../../context/Context'; import MultipleLineChart from '../common/MultipleLineChart'; - const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { @@ -45,7 +44,7 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { let user_display_name = getCookieValue('user_display_name'); let user_uuid = getCookieValue('user_uuid'); let token = getCookieValue('token'); - if (checkEmpty(is_logged_in) || checkEmpty(token)|| checkEmpty(user_uuid) || !is_logged_in) { + if (checkEmpty(is_logged_in) || checkEmpty(token) || checkEmpty(user_uuid) || !is_logged_in) { setRedirectUrl(`/authentication/basic/login`); setRedirect(true); } else { @@ -79,9 +78,25 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { const [comparisonType, setComparisonType] = useState('month-on-month'); const [periodType, setPeriodType] = useState('daily'); 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 [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 [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([ + current_moment + .clone() + .startOf('month') + .toDate(), + current_moment.toDate() + ]); const dateRangePickerLocale = { sunday: t('sunday'), monday: t('monday'), @@ -99,7 +114,7 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { last7Days: t('last7Days'), formattedMonthPattern: 'yyyy-MM-dd' }; - const dateRangePickerStyle = { display: 'block', zIndex: 10}; + const dateRangePickerStyle = { display: 'block', zIndex: 10 }; const { language } = useContext(AppContext); // buttons @@ -108,109 +123,121 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { const [exportButtonHidden, setExportButtonHidden] = useState(true); //Results - const [meterEnergyCategory, setMeterEnergyCategory] = useState({ 'name': '', 'unit': '' }); + const [meterEnergyCategory, setMeterEnergyCategory] = useState({ name: '', unit: '' }); const [reportingPeriodEnergyCarbonInCategory, setReportingPeriodEnergyCarbonInCategory] = useState(0); const [reportingPeriodEnergyCarbonRate, setReportingPeriodEnergyCarbonRate] = useState(''); const [reportingPeriodEnergyConsumptionInTCE, setReportingPeriodEnergyConsumptionInTCE] = useState(0); const [reportingPeriodEnergyConsumptionInCO2, setReportingPeriodEnergyConsumptionInCO2] = useState(0); - const [meterBaseAndReportingNames, setMeterBaseAndReportingNames] = useState({"a0":""}); - const [meterBaseAndReportingUnits, setMeterBaseAndReportingUnits] = useState({"a0":"()"}); + const [meterBaseAndReportingNames, setMeterBaseAndReportingNames] = useState({ a0: '' }); + const [meterBaseAndReportingUnits, setMeterBaseAndReportingUnits] = useState({ a0: '()' }); - const [meterBaseLabels, setMeterBaseLabels] = useState({"a0": []}); - const [meterBaseData, setMeterBaseData] = useState({"a0": []}); - const [meterBaseSubtotals, setMeterBaseSubtotals] = useState({"a0": (0).toFixed(2)}); + const [meterBaseLabels, setMeterBaseLabels] = useState({ a0: [] }); + const [meterBaseData, setMeterBaseData] = useState({ a0: [] }); + const [meterBaseSubtotals, setMeterBaseSubtotals] = useState({ a0: (0).toFixed(2) }); - const [meterReportingLabels, setMeterReportingLabels] = useState({"a0": []}); - const [meterReportingData, setMeterReportingData] = useState({"a0": []}); - const [meterReportingSubtotals, setMeterReportingSubtotals] = useState({"a0": (0).toFixed(2)}); + const [meterReportingLabels, setMeterReportingLabels] = useState({ a0: [] }); + const [meterReportingData, setMeterReportingData] = useState({ a0: [] }); + const [meterReportingSubtotals, setMeterReportingSubtotals] = useState({ a0: (0).toFixed(2) }); - const [meterReportingRates, setMeterReportingRates] = useState({"a0": []}); + const [meterReportingRates, setMeterReportingRates] = useState({ a0: [] }); const [meterReportingOptions, setMeterReportingOptions] = useState([]); 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); useEffect(() => { let isResponseOK = false; - fetch( - APIBaseURL + - '/spaces/tree', { + fetch(APIBaseURL + '/spaces/tree', { method: 'GET', headers: { '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(t(json.description)) - } - }).catch(err => { - console.log(err); - }); - // end of get Meters by root Space ID - } else { - toast.error(t(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(t(json.description)); + } + }) + .catch(err => { + console.log(err); + }); + // end of get Meters by root Space ID + } else { + toast.error(t(json.description)); + } + }) + .catch(err => { + console.log(err); + }); + }, [t]); const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; @@ -219,52 +246,54 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { setSelectedSpaceID(value[value.length - 1]); let isResponseOK = false; - fetch( - APIBaseURL + - '/spaces/' + - value[value.length - 1] + - '/meters', { + fetch(APIBaseURL + '/spaces/' + value[value.length - 1] + '/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); + 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 { - setSelectedMeter(undefined); - // disable submit button - setSubmitButtonDisabled(true); + toast.error(t(json.description)); } - } else { - toast.error(t(json.description)) - } - }).catch(err => { - console.log(err); - }); + }) + .catch(err => { + console.log(err); + }); }; 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); @@ -274,7 +303,7 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { setSelectedMeter(undefined); // disable submit button setSubmitButtonDisabled(true); - }; + } let customInputTarget = document.getElementById('meterSelect'); customInputTarget.value = filteredResult[0].value; }; @@ -284,27 +313,45 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { setComparisonType(target.value); if (target.value === 'year-over-year') { setBasePeriodDateRangePickerDisabled(true); - setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'years').toDate(), - moment(reportingPeriodDateRange[1]).subtract(1, 'years').toDate()]); + setBasePeriodDateRange([ + moment(reportingPeriodDateRange[0]) + .subtract(1, 'years') + .toDate(), + moment(reportingPeriodDateRange[1]) + .subtract(1, 'years') + .toDate() + ]); } else if (target.value === 'month-on-month') { setBasePeriodDateRangePickerDisabled(true); - setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'months').toDate(), - moment(reportingPeriodDateRange[1]).subtract(1, 'months').toDate()]); + setBasePeriodDateRange([ + moment(reportingPeriodDateRange[0]) + .subtract(1, 'months') + .toDate(), + moment(reportingPeriodDateRange[1]) + .subtract(1, 'months') + .toDate() + ]); } else if (target.value === 'free-comparison') { setBasePeriodDateRangePickerDisabled(false); - setBasePeriodDateRange([moment(reportingPeriodDateRange[0]).subtract(1, 'days').toDate(), - moment(reportingPeriodDateRange[1]).subtract(1, 'days').toDate()]); + setBasePeriodDateRange([ + moment(reportingPeriodDateRange[0]) + .subtract(1, 'days') + .toDate(), + moment(reportingPeriodDateRange[1]) + .subtract(1, 'days') + .toDate() + ]); } else if (target.value === 'none-comparison') { setBasePeriodDateRange([null, null]); setBasePeriodDateRangePickerDisabled(true); } }; - let onBasePeriodChange = (DateRange) => { - if(DateRange == null) { + let onBasePeriodChange = DateRange => { + if (DateRange == null) { setBasePeriodDateRange([null, null]); } else { - if (moment(DateRange[1]).format('HH:mm:ss') == '00:00:00') { + if (moment(DateRange[1]).format('HH:mm:ss') === '00:00:00') { // if the user did not change time value, set the default time to the end of day DateRange[1] = endOfDay(DateRange[1]); } @@ -312,19 +359,37 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { } }; - let onReportingPeriodChange = (DateRange) => { - if(DateRange == null) { + let onReportingPeriodChange = DateRange => { + if (DateRange == null) { setReportingPeriodDateRange([null, null]); } else { - if (moment(DateRange[1]).format('HH:mm:ss') == '00:00:00') { + if (moment(DateRange[1]).format('HH:mm:ss') === '00:00:00') { // if the user did not change time value, set the default time to the end of day DateRange[1] = endOfDay(DateRange[1]); } setReportingPeriodDateRange([DateRange[0], DateRange[1]]); if (comparisonType === 'year-over-year') { - setBasePeriodDateRange([moment(DateRange[0]).clone().subtract(1, 'years').toDate(), moment(DateRange[1]).clone().subtract(1, 'years').toDate()]); + 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()]); + setBasePeriodDateRange([ + moment(DateRange[0]) + .clone() + .subtract(1, 'months') + .toDate(), + moment(DateRange[1]) + .clone() + .subtract(1, 'months') + .toDate() + ]); } } }; @@ -337,7 +402,7 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { setReportingPeriodDateRange([null, null]); }; - const isBasePeriodTimestampExists = (base_period_data) => { + const isBasePeriodTimestampExists = base_period_data => { const timestamps = base_period_data['timestamps']; if (timestamps.length === 0) { @@ -360,9 +425,9 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { console.log(selectedMeter); console.log(comparisonType); console.log(periodType); - console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null) - console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null) - console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss')) + console.log(basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : null); + console.log(basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : null); + console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss')); // disable submit button @@ -370,7 +435,7 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { // show spinner setSpinnerHidden(false); // hide export button - setExportButtonHidden(true) + setExportButtonHidden(true); // Reinitialize tables setDetailedDataTableData([]); @@ -378,267 +443,298 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { let isResponseOK = false; fetch( APIBaseURL + - '/reports/metercarbon?' + - 'meterid=' + - selectedMeter + - '&periodtype=' + - periodType + - '&baseperiodstartdatetime=' + - (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') + - '&baseperiodenddatetime=' + - (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') + - '&reportingperiodstartdatetime=' + - moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') + - '&reportingperiodenddatetime=' + - moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') + - '&language=' + - language, { - 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'] - }); - setReportingPeriodEnergyCarbonRate(parseFloat(json['reporting_period']['increment_rate']*100).toFixed(2) + "%"); - setReportingPeriodEnergyCarbonInCategory(json['reporting_period']['total_in_category']); - setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000); - setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000); - - let base_timestamps = {} - base_timestamps['a0'] = json['base_period']['timestamps']; - setMeterBaseLabels(base_timestamps) - - let base_values = {} - base_values['a0'] = json['base_period']['values']; - setMeterBaseData(base_values) - - let base_and_reporting_names = {} - base_and_reporting_names['a0'] = json['meter']['energy_category_name']; - setMeterBaseAndReportingNames(base_and_reporting_names) - - let base_and_reporting_units = {} - base_and_reporting_units['a0'] = "(" + json['meter']['unit_of_measure'] + ")"; - setMeterBaseAndReportingUnits(base_and_reporting_units) - - let base_subtotals = {} - base_subtotals['a0'] = json['base_period']['total_in_category']; - setMeterBaseSubtotals(base_subtotals) - - let reporting_timestamps = {} - reporting_timestamps['a0'] = json['reporting_period']['timestamps'] - setMeterReportingLabels(reporting_timestamps); - - let reporting_values = {} - reporting_values['a0'] = json['reporting_period']['values']; - setMeterReportingData(reporting_values); - - let reporting_subtotals = {} - reporting_subtotals['a0'] = json['reporting_period']['total_in_category']; - setMeterReportingSubtotals(reporting_subtotals); - - let rates = {} - rates['a0'] = []; - json['reporting_period']['rates'].forEach((currentValue, index) => { - rates['a0'].push(currentValue ? parseFloat(currentValue * 100).toFixed(2) : '0.00'); - }); - setMeterReportingRates(rates) - - let options = Array(); - options.push({'value': 'a0', 'label': json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')'}) - setMeterReportingOptions(options); - - let names = Array(); - json['parameters']['names'].forEach((currentValue, index) => { - - names.push({ 'value': 'a' + index, 'label': currentValue }); - }); - setParameterLineChartOptions(names); - - let timestamps = {} - json['parameters']['timestamps'].forEach((currentValue, index) => { - timestamps['a' + index] = currentValue; - }); - setParameterLineChartLabels(timestamps); - - let values = {} - json['parameters']['values'].forEach((currentValue, index) => { - values['a' + index] = currentValue; - }); - setParameterLineChartData(values); - - if(!isBasePeriodTimestampExists(json['base_period'])) { - 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 (typeof decimalValue === 'number') { - return decimalValue.toFixed(2); - } else { - return null; - } - } - }]); + '/reports/metercarbon?' + + 'meterid=' + + selectedMeter + + '&periodtype=' + + periodType + + '&baseperiodstartdatetime=' + + (basePeriodDateRange[0] != null ? moment(basePeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') : '') + + '&baseperiodenddatetime=' + + (basePeriodDateRange[1] != null ? moment(basePeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') : '') + + '&reportingperiodstartdatetime=' + + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') + + '&reportingperiodenddatetime=' + + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss') + + '&language=' + + language, + { + 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'] + }); + setReportingPeriodEnergyCarbonRate( + parseFloat(json['reporting_period']['increment_rate'] * 100).toFixed(2) + '%' + ); + setReportingPeriodEnergyCarbonInCategory(json['reporting_period']['total_in_category']); + setReportingPeriodEnergyConsumptionInTCE(json['reporting_period']['total_in_kgce'] / 1000); + setReportingPeriodEnergyConsumptionInCO2(json['reporting_period']['total_in_kgco2e'] / 1000); + + let base_timestamps = {}; + base_timestamps['a0'] = json['base_period']['timestamps']; + setMeterBaseLabels(base_timestamps); + + let base_values = {}; + base_values['a0'] = json['base_period']['values']; + setMeterBaseData(base_values); + + let base_and_reporting_names = {}; + base_and_reporting_names['a0'] = json['meter']['energy_category_name']; + setMeterBaseAndReportingNames(base_and_reporting_names); + + let base_and_reporting_units = {}; + base_and_reporting_units['a0'] = '(' + json['meter']['unit_of_measure'] + ')'; + setMeterBaseAndReportingUnits(base_and_reporting_units); + + let base_subtotals = {}; + base_subtotals['a0'] = json['base_period']['total_in_category']; + setMeterBaseSubtotals(base_subtotals); + + let reporting_timestamps = {}; + reporting_timestamps['a0'] = json['reporting_period']['timestamps']; + setMeterReportingLabels(reporting_timestamps); + + let reporting_values = {}; + reporting_values['a0'] = json['reporting_period']['values']; + setMeterReportingData(reporting_values); + + let reporting_subtotals = {}; + reporting_subtotals['a0'] = json['reporting_period']['total_in_category']; + setMeterReportingSubtotals(reporting_subtotals); + + let rates = {}; + rates['a0'] = []; + json['reporting_period']['rates'].forEach((currentValue, index) => { + rates['a0'].push(currentValue ? parseFloat(currentValue * 100).toFixed(2) : '0.00'); + }); + setMeterReportingRates(rates); - 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 options = Array(); + options.push({ + value: 'a0', + label: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')' }); + setMeterReportingOptions(options); - 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); - setTimeout(() => { - setDetailedDataTableData(detailed_value_list); - }, 0) - }else { - setDetailedDataTableColumns([{ - dataField: 'basePeriodDatetime', - text: t('Base Period') + ' - ' + t('Datetime'), - sort: true - }, { - dataField: 'a0', - text: t('Base Period') + ' - ' + json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', - sort: true, - formatter: function (decimalValue) { - if (typeof decimalValue === 'number') { - return decimalValue.toFixed(2); - } else { - return null; - } - } - }, { - dataField: 'reportingPeriodDatetime', - text: t('Reporting Period') + ' - ' + t('Datetime'), - sort: true - }, { - dataField: 'b0', - text: t('Reporting Period') + ' - ' + json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')', - sort: true, - formatter: function (decimalValue) { - if (typeof decimalValue === 'number') { - return decimalValue.toFixed(2); - } else { - return null; + let names = Array(); + json['parameters']['names'].forEach((currentValue, index) => { + names.push({ value: 'a' + index, label: currentValue }); + }); + setParameterLineChartOptions(names); + + let timestamps = {}; + json['parameters']['timestamps'].forEach((currentValue, index) => { + timestamps['a' + index] = currentValue; + }); + setParameterLineChartLabels(timestamps); + + let values = {}; + json['parameters']['values'].forEach((currentValue, index) => { + values['a' + index] = currentValue; + }); + setParameterLineChartData(values); + + if (!isBasePeriodTimestampExists(json['base_period'])) { + 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 (typeof decimalValue === 'number') { + return decimalValue.toFixed(2); + } else { + return null; + } + } } - } - }]); + ]); - let detailed_value_list = []; - const max_timestamps_length = json['base_period']['timestamps'].length >= json['reporting_period']['timestamps'].length? - json['base_period']['timestamps'].length : json['reporting_period']['timestamps'].length; + 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); + }); - for (let index = 0; index < max_timestamps_length; index++) { let detailed_value = {}; - detailed_value['id'] = index; - detailed_value['basePeriodDatetime'] = null; - detailed_value['a0'] = null; - detailed_value['reportingPeriodDatetime'] = null; - detailed_value['a0'] = null; - if (index < json['base_period']['timestamps'].length) { - detailed_value['basePeriodDatetime'] = json['base_period']['timestamps'][index]; - detailed_value['a0'] = json['base_period']['values'][index]; - } + 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); + setTimeout(() => { + setDetailedDataTableData(detailed_value_list); + }, 0); + } else { + setDetailedDataTableColumns([ + { + dataField: 'basePeriodDatetime', + text: t('Base Period') + ' - ' + t('Datetime'), + sort: true + }, + { + dataField: 'a0', + text: + t('Base Period') + + ' - ' + + json['meter']['energy_category_name'] + + ' (' + + json['meter']['unit_of_measure'] + + ')', + sort: true, + formatter: function(decimalValue) { + if (typeof decimalValue === 'number') { + return decimalValue.toFixed(2); + } else { + return null; + } + } + }, + { + dataField: 'reportingPeriodDatetime', + text: t('Reporting Period') + ' - ' + t('Datetime'), + sort: true + }, + { + dataField: 'b0', + text: + t('Reporting Period') + + ' - ' + + json['meter']['energy_category_name'] + + ' (' + + json['meter']['unit_of_measure'] + + ')', + sort: true, + formatter: function(decimalValue) { + if (typeof decimalValue === 'number') { + return decimalValue.toFixed(2); + } else { + return null; + } + } + } + ]); + + let detailed_value_list = []; + const max_timestamps_length = + json['base_period']['timestamps'].length >= json['reporting_period']['timestamps'].length + ? json['base_period']['timestamps'].length + : json['reporting_period']['timestamps'].length; + + for (let index = 0; index < max_timestamps_length; index++) { + let detailed_value = {}; + detailed_value['id'] = index; + detailed_value['basePeriodDatetime'] = null; + detailed_value['a0'] = null; + detailed_value['reportingPeriodDatetime'] = null; + detailed_value['a0'] = null; + if (index < json['base_period']['timestamps'].length) { + detailed_value['basePeriodDatetime'] = json['base_period']['timestamps'][index]; + detailed_value['a0'] = json['base_period']['values'][index]; + } - if (index < json['reporting_period']['timestamps'].length) { - detailed_value['reportingPeriodDatetime'] = json['reporting_period']['timestamps'][index]; - detailed_value['b0'] = json['reporting_period']['values'][index]; + if (index < json['reporting_period']['timestamps'].length) { + detailed_value['reportingPeriodDatetime'] = json['reporting_period']['timestamps'][index]; + detailed_value['b0'] = json['reporting_period']['values'][index]; + } + detailed_value_list.push(detailed_value); } + + let detailed_value = {}; + detailed_value['id'] = detailed_value_list.length; + detailed_value['basePeriodDatetime'] = t('Total'); + detailed_value['a0'] = json['base_period']['total_in_category']; + detailed_value['reportingPeriodDatetime'] = t('Total'); + detailed_value['b0'] = json['reporting_period']['total_in_category']; detailed_value_list.push(detailed_value); + setTimeout(() => { + setDetailedDataTableData(detailed_value_list); + }, 0); } - let detailed_value = {}; - detailed_value['id'] = detailed_value_list.length; - detailed_value['basePeriodDatetime'] = t('Total'); - detailed_value['a0'] = json['base_period']['total_in_category']; - detailed_value['reportingPeriodDatetime'] = t('Total'); - detailed_value['b0'] = json['reporting_period']['total_in_category']; - detailed_value_list.push(detailed_value); - setTimeout(() => { - setDetailedDataTableData(detailed_value_list); - }, 0) - } - - setExcelBytesBase64(json['excel_bytes_base64']); + setExcelBytesBase64(json['excel_bytes_base64']); - // enable submit button - setSubmitButtonDisabled(false); - // hide spinner - setSpinnerHidden(true); - // show export button - setExportButtonHidden(false); - - } else { - toast.error(t(json.description)) - } - }).catch(err => { - console.log(err); - }); + // enable submit button + setSubmitButtonDisabled(false); + // hide spinner + setSpinnerHidden(true); + // show export button + setExportButtonHidden(false); + } else { + toast.error(t(json.description)); + } + }) + .catch(err => { + console.log(err); + }); }; const handleExport = e => { e.preventDefault(); - const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' - const fileName = 'metercarbon.xlsx' - var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64; + const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; + const fileName = 'metercarbon.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 Carbon')} + {t('Meter Data')} + {t('Meter Carbon')}
- +
- + expandTrigger="hover" + > @@ -649,15 +745,19 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { {t('Meter')} - - setSelectedMeter(target.value)} - > - {filteredMeterList.map((meter, index) => ( - - ))} - + + setSelectedMeter(target.value)} + > + {filteredMeterList.map((meter, index) => ( + + ))} + @@ -666,12 +766,15 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { - {comparisonTypeOptions.map((comparisonType, index) => ( - ))} @@ -683,10 +786,15 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { - setPeriodType(target.value)} + setPeriodType(target.value)} > {periodTypeOptions.map((periodType, index) => ( - ))} @@ -695,9 +803,12 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { - + { onClean={onBasePeriodClean} locale={dateRangePickerLocale} placeholder={t('Select Date Range')} - /> + /> - -
+ +
{
- +
- -
- + + onClick={handleExport} + > + {t('Export')} +
- - + + - - + + - - + +
- - + options={meterReportingOptions} + /> - - + options={parameterLineChartOptions} + />
- - - + ); }; From 323df34cad0412b02faeebefa48752126ccc3c02 Mon Sep 17 00:00:00 2001 From: nengyuanzhang <13011132526@163.com> Date: Mon, 26 Feb 2024 11:35:04 +0800 Subject: [PATCH 2/2] fixed warnings in myems-web --- myems-web/src/components/MyEMS/Meter/MeterCarbon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/myems-web/src/components/MyEMS/Meter/MeterCarbon.js b/myems-web/src/components/MyEMS/Meter/MeterCarbon.js index fde65e3d0d..895290d903 100644 --- a/myems-web/src/components/MyEMS/Meter/MeterCarbon.js +++ b/myems-web/src/components/MyEMS/Meter/MeterCarbon.js @@ -527,14 +527,14 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => { }); setMeterReportingRates(rates); - let options = Array(); + let options = []; options.push({ value: 'a0', label: json['meter']['energy_category_name'] + ' (' + json['meter']['unit_of_measure'] + ')' }); setMeterReportingOptions(options); - let names = Array(); + let names = []; json['parameters']['names'].forEach((currentValue, index) => { names.push({ value: 'a' + index, label: currentValue }); });