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

added spinner and export button to combinedequipmentefficiency and equipmentefficiency in web

pull/18/head
13621160019@163.com 2021-03-13 09:01:50 +08:00
parent 82fb8c2e5a
commit 2c4271d641
2 changed files with 140 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web/src/components/MyEMS/CombinedEquipment/CombinedEquipmentEfficiency.js
View File

@ -12,7 +12,8 @@ import {
FormGroup,
Input,
Label,
CustomInput
CustomInput,
Spinner,
} from 'reactstrap';
import CountUp from 'react-countup';
import Datetime from 'react-datetime';
@ -25,6 +26,7 @@ import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config';
import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
@ -67,7 +69,11 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [isDisabled, setIsDisabled] = useState(true);
// buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
const [spinnerHidden, setSpinnerHidden] = useState(true);
const [exportButtonHidden, setExportButtonHidden] = useState(true);
//Results
const [cardSummaryList, setCardSummaryList] = useState([]);
@ -81,6 +87,7 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
useEffect(() => {
let isResponseOK = false;
@ -130,10 +137,12 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setCombinedEquipmentList(json[0]);
if (json[0].length > 0) {
setSelectedCombinedEquipment(json[0][0].value);
setIsDisabled(false);
// enable submit button
setSubmitButtonDisabled(false);
} else {
setSelectedCombinedEquipment(undefined);
setIsDisabled(true);
// disable submit button
setSubmitButtonDisabled(true);
}
} else {
toast.error(json.description)
@ -180,11 +189,16 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setCombinedEquipmentList(json[0]);
if (json[0].length > 0) {
setSelectedCombinedEquipment(json[0][0].value);
setIsDisabled(false);
// enable submit button
setSubmitButtonDisabled(false);
} else {
setSelectedCombinedEquipment(undefined);
setIsDisabled(true);
// disable submit button
setSubmitButtonDisabled(true);
}
// hide export buttion
setExportButtonHidden(true)
} else {
toast.error(json.description)
}
@ -272,6 +286,13 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button
setSubmitButtonDisabled(true);
// show spinner
setSpinnerHidden(false);
// hide export buttion
setExportButtonHidden(true)
// Reinitialize tables
setDetailedDataTableData([]);
@ -392,6 +413,16 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
})
});
setDetailedDataTableColumns(detailed_column_list);
setExcelBytesBase64(json['excel_bytes_base64']);
// enable submit button
setSubmitButtonDisabled(false);
// hide spinner
setSpinnerHidden(true);
// show export buttion
setExportButtonHidden(false);
} else {
toast.error(json.description)
}
@ -400,6 +431,24 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
});
};
const handleExport = e => {
e.preventDefault();
const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileName = 'combinedequipmentefficiency.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);
});
};
return (
<Fragment>
<div>
@ -526,10 +575,24 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
<FormGroup>
<br></br>
<ButtonGroup id="submit">
<Button color="success" disabled={isDisabled} >{t('Submit')}</Button>
<Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
</ButtonGroup>
</FormGroup>
</Col>
<Col xs="auto">
<FormGroup>
<br></br>
<Spinner color="primary" hidden={spinnerHidden} />
</FormGroup>
</Col>
<Col xs="auto">
<br></br>
<ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default"
hidden={exportButtonHidden}
onClick={handleExport} >
{t('Export')}
</ButtonIcon>
</Col>
</Row>
</Form>
</CardBody>

77
web/src/components/MyEMS/Equipment/EquipmentEfficiency.js
View File

@ -12,7 +12,8 @@ import {
FormGroup,
Input,
Label,
CustomInput
CustomInput,
Spinner,
} from 'reactstrap';
import CountUp from 'react-countup';
import Datetime from 'react-datetime';
@ -25,6 +26,7 @@ import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config';
import { periodTypeOptions } from '../common/PeriodTypeOptions';
import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
@ -67,7 +69,11 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [isDisabled, setIsDisabled] = useState(true);
// buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
const [spinnerHidden, setSpinnerHidden] = useState(true);
const [exportButtonHidden, setExportButtonHidden] = useState(true);
//Results
const [cardSummaryList, setCardSummaryList] = useState([]);
@ -81,6 +87,7 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
useEffect(() => {
let isResponseOK = false;
@ -130,10 +137,12 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setEquipmentList(json[0]);
if (json[0].length > 0) {
setSelectedEquipment(json[0][0].value);
setIsDisabled(false);
// enable submit button
setSubmitButtonDisabled(false);
} else {
setSelectedEquipment(undefined);
setIsDisabled(true);
// disable submit button
setSubmitButtonDisabled(true);
}
} else {
toast.error(json.description)
@ -180,11 +189,16 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setEquipmentList(json[0]);
if (json[0].length > 0) {
setSelectedEquipment(json[0][0].value);
setIsDisabled(false);
// enable submit button
setSubmitButtonDisabled(false);
} else {
setSelectedEquipment(undefined);
setIsDisabled(true);
// disable submit button
setSubmitButtonDisabled(true);
}
// hide export buttion
setExportButtonHidden(true)
} else {
toast.error(json.description)
}
@ -272,6 +286,13 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button
setSubmitButtonDisabled(true);
// show spinner
setSpinnerHidden(false);
// hide export buttion
setExportButtonHidden(true)
// Reinitialize tables
setDetailedDataTableData([]);
@ -392,6 +413,16 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
})
});
setDetailedDataTableColumns(detailed_column_list);
setExcelBytesBase64(json['excel_bytes_base64']);
// enable submit button
setSubmitButtonDisabled(false);
// hide spinner
setSpinnerHidden(true);
// show export buttion
setExportButtonHidden(false);
} else {
toast.error(json.description)
}
@ -400,6 +431,24 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
});
};
const handleExport = e => {
e.preventDefault();
const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileName = 'equipmentefficiency.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);
});
};
return (
<Fragment>
<div>
@ -526,10 +575,24 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
<FormGroup>
<br></br>
<ButtonGroup id="submit">
<Button color="success" disabled={isDisabled} >{t('Submit')}</Button>
<Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
</ButtonGroup>
</FormGroup>
</Col>
<Col xs="auto">
<FormGroup>
<br></br>
<Spinner color="primary" hidden={spinnerHidden} />
</FormGroup>
</Col>
<Col xs="auto">
<br></br>
<ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default"
hidden={exportButtonHidden}
onClick={handleExport} >
{t('Export')}
</ButtonIcon>
</Col>
</Row>
</Form>
</CardBody>