You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.4 KiB
126 lines
3.4 KiB
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> |
|
); |
|
};
|
|
|