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

Merge branch 'PR' into develop

pull/131/MERGE
13621160019@163.com 2022-03-02 16:17:42 +08:00
parent d597415432 92a30c58b7
commit 94c8b8a7b9
1 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js
View File

@ -25,6 +25,8 @@ 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 { APIBaseURL } from '../../../config'; import { APIBaseURL } from '../../../config';
import { DateRangePicker } from 'rsuite';
import { endOfDay} from 'date-fns';
echarts.use([SankeyChart]); echarts.use([SankeyChart]);
const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => { const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
@ -51,8 +53,24 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
// Query Parameters // Query Parameters
const [energyFlowDiagramList, setEnergyFlowDiagramList] = useState([]); const [energyFlowDiagramList, setEnergyFlowDiagramList] = useState([]);
const [selectedEnergyFlowDiagram, setSelectedEnergyFlowDiagram] = useState(undefined); const [selectedEnergyFlowDiagram, setSelectedEnergyFlowDiagram] = useState(undefined);
const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month')); const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months').endOf('month')); const dateRangePickerLocale = {
sunday: t('sunday'),
monday: t('monday'),
tuesday: t('tuesday'),
wednesday: t('wednesday'),
thursday: t('thursday'),
friday: t('friday'),
saturday: t('saturday'),
ok: t('ok'),
today: t('today'),
yesterday: t('yesterday'),
hours: t('hours'),
minutes: t('minutes'),
seconds: t('seconds'),
last7Days: t('last7Days')
};
const dateRangePickerStyle = { display: 'block', zIndex: 10};
const { isDark } = useContext(AppContext); const { isDark } = useContext(AppContext);
// buttons // buttons
@ -193,29 +211,32 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
}; };
}; };
let onReportingPeriodBeginsDatetimeChange = (newDateTime) => { let onReportingPeriodChange = (DateRange) => {
setReportingPeriodBeginsDatetime(newDateTime); if(DateRange == null) {
} setReportingPeriodDateRange([null, null]);
setSubmitButtonDisabled(true);
} else {
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]]);
setSubmitButtonDisabled(false);
}
};
let onReportingPeriodEndsDatetimeChange = (newDateTime) => { // Callback fired when value clean
setReportingPeriodEndsDatetime(newDateTime); let onReportingPeriodClean = event => {
} setReportingPeriodDateRange([null, null]);
};
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 // Handler
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
console.log('handleSubmit'); console.log('handleSubmit');
console.log(selectedEnergyFlowDiagram); console.log(selectedEnergyFlowDiagram);
console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'));
console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss')); console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
// disable submit button // disable submit button
setSubmitButtonDisabled(true); setSubmitButtonDisabled(true);
@ -225,8 +246,8 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
let isResponseOK = false; let isResponseOK = false;
fetch(APIBaseURL + '/reports/energyflowdiagram?' + fetch(APIBaseURL + '/reports/energyflowdiagram?' +
'energyflowdiagramid=' + selectedEnergyFlowDiagram + 'energyflowdiagramid=' + selectedEnergyFlowDiagram +
'&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') + '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
'&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), { '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-type": "application/json", "Content-type": "application/json",
@ -289,26 +310,19 @@ const EnergyFlowDiagram = ({ setRedirect, setRedirectUrl, t }) => {
</Col> </Col>
<Col xs="auto"> <Col xs="auto">
<FormGroup className="form-group"> <FormGroup className="form-group">
<Label className={labelClasses} for="reportingPeriodBeginsDatetime"> <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>
{t('Reporting Period Begins')} <br/>
</Label> <DateRangePicker
<Datetime id='reportingPeriodBeginsDatetime' id='reportingPeriodDateRangePicker'
value={reportingPeriodBeginsDatetime} format="yyyy-MM-dd HH:mm:ss"
onChange={onReportingPeriodBeginsDatetimeChange} value={reportingPeriodDateRange}
isValidDate={getValidReportingPeriodBeginsDatetimes} onChange={onReportingPeriodChange}
closeOnSelect={true} /> size="md"
</FormGroup> style={dateRangePickerStyle}
</Col> onClean={onReportingPeriodClean}
<Col xs="auto"> locale={dateRangePickerLocale}
<FormGroup className="form-group"> placeholder={t("Select Date Range")}
<Label className={labelClasses} for="reportingPeriodEndsDatetime"> />
{t('Reporting Period Ends')}
</Label>
<Datetime id='reportingPeriodEndsDatetime'
value={reportingPeriodEndsDatetime}
onChange={onReportingPeriodEndsDatetimeChange}
isValidDate={getValidReportingPeriodEndsDatetimes}
closeOnSelect={true} />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="auto"> <Col xs="auto">