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, FormGroup,
Input, Input,
Label, Label,
CustomInput CustomInput,
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';
@ -25,6 +26,7 @@ import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
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';
@ -67,7 +69,11 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
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);
const [isDisabled, setIsDisabled] = useState(true);
// buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
const [spinnerHidden, setSpinnerHidden] = useState(true);
const [exportButtonHidden, setExportButtonHidden] = useState(true);
//Results //Results
const [cardSummaryList, setCardSummaryList] = useState([]); const [cardSummaryList, setCardSummaryList] = useState([]);
@ -81,6 +87,7 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]); const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
useEffect(() => { useEffect(() => {
let isResponseOK = false; let isResponseOK = false;
@ -130,10 +137,12 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setCombinedEquipmentList(json[0]); setCombinedEquipmentList(json[0]);
if (json[0].length > 0) { if (json[0].length > 0) {
setSelectedCombinedEquipment(json[0][0].value); setSelectedCombinedEquipment(json[0][0].value);
setIsDisabled(false); // enable submit button
setSubmitButtonDisabled(false);
} else { } else {
setSelectedCombinedEquipment(undefined); setSelectedCombinedEquipment(undefined);
setIsDisabled(true); // disable submit button
setSubmitButtonDisabled(true);
} }
} else { } else {
toast.error(json.description) toast.error(json.description)
@ -180,11 +189,16 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setCombinedEquipmentList(json[0]); setCombinedEquipmentList(json[0]);
if (json[0].length > 0) { if (json[0].length > 0) {
setSelectedCombinedEquipment(json[0][0].value); setSelectedCombinedEquipment(json[0][0].value);
setIsDisabled(false); // enable submit button
setSubmitButtonDisabled(false);
} else { } else {
setSelectedCombinedEquipment(undefined); setSelectedCombinedEquipment(undefined);
setIsDisabled(true); // disable submit button
setSubmitButtonDisabled(true);
} }
// hide export buttion
setExportButtonHidden(true)
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -271,6 +285,13 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined);
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.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 // Reinitialize tables
setDetailedDataTableData([]); setDetailedDataTableData([]);
@ -392,6 +413,16 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
}) })
}); });
setDetailedDataTableColumns(detailed_column_list); setDetailedDataTableColumns(detailed_column_list);
setExcelBytesBase64(json['excel_bytes_base64']);
// enable submit button
setSubmitButtonDisabled(false);
// hide spinner
setSpinnerHidden(true);
// show export buttion
setExportButtonHidden(false);
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -399,6 +430,24 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(err); console.log(err);
}); });
}; };
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 ( return (
<Fragment> <Fragment>
@ -526,10 +575,24 @@ const CombinedEquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
<FormGroup> <FormGroup>
<br></br> <br></br>
<ButtonGroup id="submit"> <ButtonGroup id="submit">
<Button color="success" disabled={isDisabled} >{t('Submit')}</Button> <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
</ButtonGroup> </ButtonGroup>
</FormGroup> </FormGroup>
</Col> </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> </Row>
</Form> </Form>
</CardBody> </CardBody>

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

@ -12,7 +12,8 @@ import {
FormGroup, FormGroup,
Input, Input,
Label, Label,
CustomInput CustomInput,
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';
@ -25,6 +26,7 @@ import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect'; import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
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';
@ -67,7 +69,11 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
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);
const [isDisabled, setIsDisabled] = useState(true);
// buttons
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
const [spinnerHidden, setSpinnerHidden] = useState(true);
const [exportButtonHidden, setExportButtonHidden] = useState(true);
//Results //Results
const [cardSummaryList, setCardSummaryList] = useState([]); const [cardSummaryList, setCardSummaryList] = useState([]);
@ -81,6 +87,7 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [detailedDataTableData, setDetailedDataTableData] = useState([]);
const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]); const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
useEffect(() => { useEffect(() => {
let isResponseOK = false; let isResponseOK = false;
@ -130,10 +137,12 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setEquipmentList(json[0]); setEquipmentList(json[0]);
if (json[0].length > 0) { if (json[0].length > 0) {
setSelectedEquipment(json[0][0].value); setSelectedEquipment(json[0][0].value);
setIsDisabled(false); // enable submit button
setSubmitButtonDisabled(false);
} else { } else {
setSelectedEquipment(undefined); setSelectedEquipment(undefined);
setIsDisabled(true); // disable submit button
setSubmitButtonDisabled(true);
} }
} else { } else {
toast.error(json.description) toast.error(json.description)
@ -180,11 +189,16 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
setEquipmentList(json[0]); setEquipmentList(json[0]);
if (json[0].length > 0) { if (json[0].length > 0) {
setSelectedEquipment(json[0][0].value); setSelectedEquipment(json[0][0].value);
setIsDisabled(false); // enable submit button
setSubmitButtonDisabled(false);
} else { } else {
setSelectedEquipment(undefined); setSelectedEquipment(undefined);
setIsDisabled(true); // disable submit button
setSubmitButtonDisabled(true);
} }
// hide export buttion
setExportButtonHidden(true)
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -271,6 +285,13 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined); console.log(basePeriodEndsDatetime != null ? basePeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss') : undefined);
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.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 // Reinitialize tables
setDetailedDataTableData([]); setDetailedDataTableData([]);
@ -392,6 +413,16 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
}) })
}); });
setDetailedDataTableColumns(detailed_column_list); setDetailedDataTableColumns(detailed_column_list);
setExcelBytesBase64(json['excel_bytes_base64']);
// enable submit button
setSubmitButtonDisabled(false);
// hide spinner
setSpinnerHidden(true);
// show export buttion
setExportButtonHidden(false);
} else { } else {
toast.error(json.description) toast.error(json.description)
} }
@ -399,6 +430,24 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
console.log(err); console.log(err);
}); });
}; };
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 ( return (
<Fragment> <Fragment>
@ -526,10 +575,24 @@ const EquipmentEfficiency = ({ setRedirect, setRedirectUrl, t }) => {
<FormGroup> <FormGroup>
<br></br> <br></br>
<ButtonGroup id="submit"> <ButtonGroup id="submit">
<Button color="success" disabled={isDisabled} >{t('Submit')}</Button> <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
</ButtonGroup> </ButtonGroup>
</FormGroup> </FormGroup>
</Col> </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> </Row>
</Form> </Form>
</CardBody> </CardBody>