From 77aaeaf6bd88e0f42246b105615f51f72ec0cb13 Mon Sep 17 00:00:00 2001 From: wmiao <1106063169@qq.com> Date: Sat, 24 Feb 2024 13:14:44 +0800 Subject: [PATCH] Fixed the warning message in the MeterBatch.js file --- .../src/components/MyEMS/Meter/MeterBatch.js | 338 ++++++++++-------- 1 file changed, 180 insertions(+), 158 deletions(-) diff --git a/myems-web/src/components/MyEMS/Meter/MeterBatch.js b/myems-web/src/components/MyEMS/Meter/MeterBatch.js index 062482ed09..d471adde2d 100644 --- a/myems-web/src/components/MyEMS/Meter/MeterBatch.js +++ b/myems-web/src/components/MyEMS/Meter/MeterBatch.js @@ -12,7 +12,7 @@ import { FormGroup, Input, Label, - Spinner, + Spinner } from 'reactstrap'; import Cascader from 'rc-cascader'; import moment from 'moment'; @@ -24,7 +24,7 @@ import { toast } from 'react-toastify'; import ButtonIcon from '../../common/ButtonIcon'; import { APIBaseURL, settings } from '../../../config'; import DateRangePickerWrapper from '../common/DateRangePickerWrapper'; -import { endOfDay} from 'date-fns'; +import { endOfDay } from 'date-fns'; import AppContext from '../../../context/Context'; const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); @@ -37,7 +37,7 @@ const MeterBatch = ({ 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 { @@ -67,7 +67,13 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { const [selectedSpaceID, setSelectedSpaceID] = useState(undefined); const [meterList, setMeterList] = useState([]); const [cascaderOptions, setCascaderOptions] = useState(undefined); - 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'), @@ -85,7 +91,7 @@ const MeterBatch = ({ 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 @@ -94,50 +100,56 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { const [exportButtonHidden, setExportButtonHidden] = useState(true); //Results - const [detailedDataTableColumns, setDetailedDataTableColumns] = useState( - [{dataField: 'id', text: t('ID'), sort: true}, - {dataField: 'name', text: t('Name'), sort: true}, - {dataField: 'space', text: t('Space'), sort: true}]); + const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([ + { dataField: 'id', text: t('ID'), sort: true }, + { dataField: 'name', text: t('Name'), sort: true }, + { dataField: 'space', text: t('Space'), sort: true } + ]); 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); - // set the default selected space - setSelectedSpaceName([json[0]].map(o => o.label)); - setSelectedSpaceID([json[0]].map(o => o.value)); - - setSubmitButtonDisabled(false); - setSpinnerHidden(true); - } else { - toast.error(t(json.description)); - } - }).catch(err => { - console.log(err); - }); + 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); + // set the default selected space + setSelectedSpaceName([json[0]].map(o => o.label)); + setSelectedSpaceID([json[0]].map(o => o.value)); + setSubmitButtonDisabled(false); + setSpinnerHidden(true); + } else { + toast.error(t(json.description)); + } + }) + .catch(err => { + console.log(err); + }); }, []); const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; @@ -150,11 +162,11 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { setSubmitButtonDisabled(false); }; - 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]); } @@ -171,7 +183,7 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { e.preventDefault(); console.log('handleSubmit'); console.log(selectedSpaceID); - console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss')) + 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 @@ -179,7 +191,7 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { // show spinner setSpinnerHidden(false); // hide export button - setExportButtonHidden(true) + setExportButtonHidden(true); // Reinitialize tables setMeterList([]); @@ -187,125 +199,127 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { let isResponseOK = false; fetch( APIBaseURL + - '/reports/meterbatch?' + - 'spaceid=' + - selectedSpaceID + - '&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) - let meters = []; - if (json['meters'].length > 0) { - json['meters'].forEach((currentMeter, index) => { - let detailed_value = {}; - detailed_value['id'] = currentMeter['id']; - detailed_value['name'] = currentMeter['meter_name']; - detailed_value['space'] = currentMeter['space_name']; - detailed_value['costcenter'] = currentMeter['cost_center_name']; - currentMeter['values'].forEach((currentValue, energyCategoryIndex) => { - if (typeof currentValue === 'number') { - detailed_value['a' + energyCategoryIndex] = currentValue; - } else { - detailed_value['a' + energyCategoryIndex] = null; - } - + '/reports/meterbatch?' + + 'spaceid=' + + selectedSpaceID + + '&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); + let meters = []; + if (json['meters'].length > 0) { + json['meters'].forEach((currentMeter, index) => { + let detailed_value = {}; + detailed_value['id'] = currentMeter['id']; + detailed_value['name'] = currentMeter['meter_name']; + detailed_value['space'] = currentMeter['space_name']; + detailed_value['costcenter'] = currentMeter['cost_center_name']; + currentMeter['values'].forEach((currentValue, energyCategoryIndex) => { + if (typeof currentValue === 'number') { + detailed_value['a' + energyCategoryIndex] = currentValue; + } else { + detailed_value['a' + energyCategoryIndex] = null; + } + }); + meters.push(detailed_value); }); - meters.push(detailed_value); - }); - }; + } - setMeterList(meters); + setMeterList(meters); - let detailed_column_list = []; - detailed_column_list.push({ - dataField: 'id', - text: t('ID'), - sort: true - }); - detailed_column_list.push({ - dataField: 'name', - text: t('Name'), - sort: true - }); - detailed_column_list.push({ - dataField: 'space', - text: t('Space'), - sort: true - }); - json['energycategories'].forEach((currentValue, index) => { + let detailed_column_list = []; + detailed_column_list.push({ + dataField: 'id', + text: t('ID'), + sort: true + }); detailed_column_list.push({ - dataField: 'a' + index, - text: currentValue['name'] + ' (' + currentValue['unit_of_measure'] + ')', - sort: true, - formatter: function (decimalValue) { - if (typeof decimalValue === 'number') { - return decimalValue.toFixed(2); - } else { - return null; + dataField: 'name', + text: t('Name'), + sort: true + }); + detailed_column_list.push({ + dataField: 'space', + text: t('Space'), + sort: true + }); + json['energycategories'].forEach((currentValue, index) => { + detailed_column_list.push({ + dataField: 'a' + index, + text: currentValue['name'] + ' (' + currentValue['unit_of_measure'] + ')', + sort: true, + formatter: function(decimalValue) { + if (typeof decimalValue === 'number') { + return decimalValue.toFixed(2); + } else { + return null; + } } - } - }) - }); - setDetailedDataTableColumns(detailed_column_list); + }); + }); + setDetailedDataTableColumns(detailed_column_list); - 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 = 'meterbatch.xlsx' - var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64; + const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; + const fileName = 'meterbatch.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 Batch Analysis')} + {t('Meter Data')} + {t('Meter Batch Analysis')}
@@ -318,18 +332,22 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => { {t('Space')}
- + expandTrigger="hover" + > - -
+ +
{
- +
- -
- + + onClick={handleExport} + > + {t('Export')} + - - - + ); };