|
|
|
@ -1,14 +1,74 @@
|
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { X } from 'react-feather'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { controlGpArcrftWarnAction } from '../../../modules/control/gp/actions/controlGpAction'; |
|
|
|
|
|
|
|
|
|
const ControlAlarmList = props => { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
const { controlGpList } = useSelector(state => state.controlGpState); |
|
|
|
|
const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState);
|
|
|
|
|
|
|
|
|
|
const [total, setTotal] = useState({ |
|
|
|
|
totalDroneCnt: 0, |
|
|
|
|
totalWarnCnt: 0, |
|
|
|
|
warnList: [] |
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(controlGpArcrftWarnList) { |
|
|
|
|
let totalWarnCnt = 0; |
|
|
|
|
|
|
|
|
|
if(controlGpArcrftWarnList.length > 0) { |
|
|
|
|
controlGpArcrftWarnList.forEach(warn => { |
|
|
|
|
totalWarnCnt += warn.warnCount; |
|
|
|
|
}); |
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setTotal(total => { |
|
|
|
|
return { |
|
|
|
|
totalDroneCnt : controlGpArcrftWarnList.length, |
|
|
|
|
totalWarnCnt : totalWarnCnt, |
|
|
|
|
warnList : controlGpArcrftWarnList |
|
|
|
|
}
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, [controlGpArcrftWarnList]); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if(controlGpList) { |
|
|
|
|
const controlIds = []; |
|
|
|
|
|
|
|
|
|
if(controlGpList.length > 0) { |
|
|
|
|
controlGpList.forEach(gps => { |
|
|
|
|
controlIds.push(gps.controlId); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const param = controlIds.join(','); |
|
|
|
|
|
|
|
|
|
dispatch(controlGpArcrftWarnAction.request(param)); |
|
|
|
|
} else { |
|
|
|
|
setTotal(total => { |
|
|
|
|
return { |
|
|
|
|
totalDroneCnt: 0, |
|
|
|
|
totalWarnCnt: 0, |
|
|
|
|
warnList: [] |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}, [controlGpList]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='left-layer'> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>알림 리스트</h4> |
|
|
|
|
<h4>실시간 비정상 알림 정보</h4> |
|
|
|
|
<button |
|
|
|
|
className='btn-icon' |
|
|
|
|
outline |
|
|
|
|
// outline
|
|
|
|
|
color='primary' |
|
|
|
|
onClick={() => props.setOpenAlarmList(false)} |
|
|
|
|
> |
|
|
|
@ -19,8 +79,8 @@ const ControlAlarmList = props => {
|
|
|
|
|
<dl className='notice-list'> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-ti'> |
|
|
|
|
<div className='list-left-txt'>전체 2000건</div> |
|
|
|
|
<div className='list-right-txt'>오늘 120건</div> |
|
|
|
|
<div className='list-left-txt'>{total? total.totalDroneCnt: 0}대 비행 중</div> |
|
|
|
|
<div className='list-right-txt'>전체 {total? total.totalWarnCnt : 0}건</div> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
@ -30,34 +90,68 @@ const ControlAlarmList = props => {
|
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>알림 목록</h4> |
|
|
|
|
</div> |
|
|
|
|
<div className='layer-content-list'> |
|
|
|
|
{!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'>통신 장애 알림</div> |
|
|
|
|
<div className='list-right-txt'>6월 17일</div> |
|
|
|
|
<div className='list-left-txt'>{warn.idntfNum}</div> |
|
|
|
|
<div className='list-right-txt'>{warn.occurDt}</div> |
|
|
|
|
</div> |
|
|
|
|
<div className='list-txt'> |
|
|
|
|
통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 |
|
|
|
|
통신장애 통신장애{' '} |
|
|
|
|
<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'> |
|
|
|
|
) |
|
|
|
|
})} |
|
|
|
|
{/* <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'>6월 17일</div> |
|
|
|
|
<div className='list-right-txt'>22건</div> |
|
|
|
|
</div> |
|
|
|
|
<div className='list-txt'> |
|
|
|
|
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 |
|
|
|
|
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 |
|
|
|
|
</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> |
|
|
|
|
); |
|
|
|
|