|
|
|
import moment from 'moment';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import { Col, Row } from 'reactstrap';
|
|
|
|
import { DashboardDronList } from '../../../components/dashboard/DashboardDronList';
|
|
|
|
import { DashboardGroupList } from '../../../components/dashboard/DashboardGroupList';
|
|
|
|
import { DashboardMenu } from '../../../components/dashboard/DashboardMenu';
|
|
|
|
import { DashboardStcsArea } from '../../../components/dashboard/DashboardStcsArea';
|
|
|
|
import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay';
|
|
|
|
import * as Actions from '../../../modules/main/dash/actions/mainDashAction';
|
|
|
|
|
|
|
|
export const MainDashContainer = () => {
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
const { stcsDayList, stcsAreaList, groupList, dronList } = useSelector(
|
|
|
|
state => state.mainDashState
|
|
|
|
);
|
|
|
|
|
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
const { user } = useSelector(state => state.authState, shallowEqual);
|
|
|
|
|
|
|
|
const [dayStartDate, setDayStartDate] = useState(new Date());
|
|
|
|
|
|
|
|
const [areaStartDate, setAreaStartDate] = useState(new Date());
|
|
|
|
|
|
|
|
const handlerStcsDaySearch = date => {
|
|
|
|
dispatch(
|
|
|
|
Actions.STCS_DAY.request({
|
|
|
|
yyyymm: moment(date).format('YYYY-MM')
|
|
|
|
})
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerStcsAreaSearch = date => {
|
|
|
|
dispatch(
|
|
|
|
Actions.STCS_AREA.request({
|
|
|
|
yyyymm: moment(date).format('YYYY-MM')
|
|
|
|
})
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerGroupSearch = () => {
|
|
|
|
dispatch(
|
|
|
|
Actions.GROUP_LIST.request({
|
|
|
|
cstmrSno: user?.cstmrSno
|
|
|
|
})
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerDronSearch = () => {
|
|
|
|
dispatch(
|
|
|
|
Actions.DRON_LIST.request({
|
|
|
|
cstmrSno: user?.cstmrSno
|
|
|
|
})
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerStcsDayParam = date => {
|
|
|
|
setDayStartDate(date);
|
|
|
|
handlerStcsDaySearch(date);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerStcsAreaParam = date => {
|
|
|
|
setAreaStartDate(date);
|
|
|
|
handlerStcsAreaSearch(date);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerDronDetail = () => {
|
|
|
|
history.push('/basis/dron/index');
|
|
|
|
};
|
|
|
|
|
|
|
|
const handlerGroupDetail = () => {
|
|
|
|
history.push('/basis/group/index');
|
|
|
|
};
|
|
|
|
|
|
|
|
const movePage = url => {
|
|
|
|
history.push(url);
|
|
|
|
};
|
|
|
|
useEffect(() => {
|
|
|
|
handlerStcsDaySearch(dayStartDate);
|
|
|
|
handlerStcsAreaSearch(areaStartDate);
|
|
|
|
handlerGroupSearch();
|
|
|
|
handlerDronSearch();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {}, [stcsDayList]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className='main-dashboard'>
|
|
|
|
<DashboardMenu movePage={movePage} />
|
|
|
|
<div className='dashboard-section'>
|
|
|
|
<Row>
|
|
|
|
<Col lg={8} md={12} className='dashboard-chart'>
|
|
|
|
<DashboardStcsDay
|
|
|
|
startDate={dayStartDate}
|
|
|
|
setStartDate={handlerStcsDayParam}
|
|
|
|
data={stcsDayList}
|
|
|
|
/>
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
<Col lg={4} md={12} className='dashboard-chart'>
|
|
|
|
<DashboardStcsArea
|
|
|
|
startDate={areaStartDate}
|
|
|
|
setStartDate={handlerStcsAreaParam}
|
|
|
|
data={stcsAreaList}
|
|
|
|
/>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
<div className='dashboard-section'>
|
|
|
|
<Row>
|
|
|
|
<Col md={6}>
|
|
|
|
<DashboardGroupList
|
|
|
|
data={groupList}
|
|
|
|
pageMove={handlerGroupDetail}
|
|
|
|
/>
|
|
|
|
</Col>
|
|
|
|
<Col md={6}>
|
|
|
|
<DashboardDronList data={dronList} pageMove={handlerDronDetail} />
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|