노승철
2 years ago
4 changed files with 175 additions and 65 deletions
@ -1,66 +1,160 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
import { X } from 'react-feather'; |
import { X } from 'react-feather'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { controlGpArcrftWarnAction } from '../../../modules/control/gp/actions/controlGpAction'; |
||||||
|
|
||||||
const ControlAlarmList = props => { |
const ControlAlarmList = props => { |
||||||
return ( |
const dispatch = useDispatch(); |
||||||
<div className='left-layer'> |
|
||||||
<div className='layer-content'> |
const { controlGpList } = useSelector(state => state.controlGpState); |
||||||
<div className='layer-ti'> |
const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState);
|
||||||
<h4>알림 리스트</h4> |
|
||||||
<button |
const [total, setTotal] = useState({ |
||||||
className='btn-icon' |
totalDroneCnt: 0, |
||||||
outline |
totalWarnCnt: 0, |
||||||
color='primary' |
warnList: [] |
||||||
onClick={() => props.setOpenAlarmList(false)} |
});
|
||||||
> |
|
||||||
<X size={20} /> |
useEffect(() => { |
||||||
</button> |
if(controlGpArcrftWarnList) { |
||||||
</div> |
let totalWarnCnt = 0; |
||||||
<div className='layer-content-list'> |
|
||||||
<dl className='notice-list'> |
if(controlGpArcrftWarnList.length > 0) { |
||||||
<dt> |
controlGpArcrftWarnList.forEach(warn => { |
||||||
<div className='list-ti'> |
totalWarnCnt += warn.warnCount; |
||||||
<div className='list-left-txt'>전체 2000건</div> |
}); |
||||||
<div className='list-right-txt'>오늘 120건</div> |
}
|
||||||
</div> |
|
||||||
</dt> |
setTotal(total => { |
||||||
</dl> |
return { |
||||||
</div> |
totalDroneCnt : controlGpArcrftWarnList.length, |
||||||
</div> |
totalWarnCnt : totalWarnCnt, |
||||||
<div className='layer-content'> |
warnList : controlGpArcrftWarnList |
||||||
<div className='layer-ti'> |
}
|
||||||
<h4>알림 목록</h4> |
}) |
||||||
</div> |
} |
||||||
<div className='layer-content-list'> |
|
||||||
<dl className='notice-list'> |
}, [controlGpArcrftWarnList]); |
||||||
<dt> |
|
||||||
<div className='list-ti'> |
useEffect(() => { |
||||||
<div className='list-left-txt'>통신 장애 알림</div> |
if(controlGpList) { |
||||||
<div className='list-right-txt'>6월 17일</div> |
const controlIds = []; |
||||||
</div> |
|
||||||
<div className='list-txt'> |
if(controlGpList.length > 0) { |
||||||
통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 |
controlGpList.forEach(gps => { |
||||||
통신장애 통신장애{' '} |
controlIds.push(gps.controlId); |
||||||
</div> |
}); |
||||||
</dt> |
|
||||||
</dl> |
const param = controlIds.join(','); |
||||||
</div> |
|
||||||
<div className='layer-content-list'> |
dispatch(controlGpArcrftWarnAction.request(param)); |
||||||
<dl className='notice-list'> |
} else { |
||||||
<dt> |
setTotal(total => { |
||||||
<div className='list-ti'> |
return { |
||||||
<div className='list-left-txt'>비행 경로 이탈</div> |
totalDroneCnt: 0, |
||||||
<div className='list-right-txt'>6월 17일</div> |
totalWarnCnt: 0, |
||||||
</div> |
warnList: [] |
||||||
<div className='list-txt'> |
} |
||||||
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 |
}) |
||||||
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 |
}
|
||||||
</div> |
}
|
||||||
</dt> |
|
||||||
</dl> |
}, [controlGpList]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='left-layer'> |
||||||
|
<div className='layer-content'> |
||||||
|
<div className='layer-ti'> |
||||||
|
<h4>실시간 비정상 알림 정보</h4> |
||||||
|
<button |
||||||
|
className='btn-icon' |
||||||
|
// outline
|
||||||
|
color='primary' |
||||||
|
onClick={() => props.setOpenAlarmList(false)} |
||||||
|
> |
||||||
|
<X size={20} /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className='layer-content-list'> |
||||||
|
<dl className='notice-list'> |
||||||
|
<dt> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>{total? total.totalDroneCnt: 0}대 비행 중</div> |
||||||
|
<div className='list-right-txt'>전체 {total? total.totalWarnCnt : 0}건</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='layer-content'> |
||||||
|
<div className='layer-ti'> |
||||||
|
<h4>알림 목록</h4> |
||||||
|
</div> |
||||||
|
{!total ? null : total.warnList.map((warn, i) => { |
||||||
|
const warnContent = warn.warnType === 'PLAN' ? '비행 경로 이탈' : '비정상 상황 발생' |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='layer-content-list' key={i}> |
||||||
|
<dl className='notice-list'> |
||||||
|
<dt> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>{warn.idntfNum}</div> |
||||||
|
<div className='list-right-txt'>{warn.occurDt}</div> |
||||||
|
</div> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>{warnContent}</div> |
||||||
|
<div className='list-right-txt'>{warn.warnCount}건</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
) |
||||||
|
})} |
||||||
|
{/* <div className='layer-content-list'> |
||||||
|
<dl className='notice-list'> |
||||||
|
<dt> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>PAV-001</div> |
||||||
|
<div className='list-right-txt'>2022. 09. 02 10:00:30</div> |
||||||
|
</div> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>비행 경로 이탈</div> |
||||||
|
<div className='list-right-txt'>22건</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
<div className='layer-content-list'> |
||||||
|
<dl className='notice-list'> |
||||||
|
<dt> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>PAV-002</div> |
||||||
|
<div className='list-right-txt'>2022. 09. 02 11:23:52</div> |
||||||
|
</div> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>비행 경로 이탈</div> |
||||||
|
<div className='list-right-txt'>10건</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
<div className='layer-content-list'> |
||||||
|
<dl className='notice-list'> |
||||||
|
<dt> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>PAV-003</div> |
||||||
|
<div className='list-right-txt'>-</div> |
||||||
|
</div> |
||||||
|
<div className='list-ti'> |
||||||
|
<div className='list-left-txt'>-</div> |
||||||
|
<div className='list-right-txt'>0건</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> */} |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
); |
||||||
</div> |
|
||||||
); |
|
||||||
}; |
}; |
||||||
|
|
||||||
export default ControlAlarmList; |
export default ControlAlarmList; |
||||||
|
Loading…
Reference in new issue