pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[관제] 실시간 비정상 알림 정보 작업

pull/2/head
노승철 2 years ago
parent
d83648f51b
commit
0608588f33
4 changed files with 175 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/modules/control/gp/actions/controlGpAction.ts
  2. 16
      src/modules/control/gp/sagas/controlGpSaga.ts
  3. 212
      src/views/control/alarm/ControlAlarmList.js
  4. 10
      src/views/control/main/ControlMain.js

2
src/modules/control/gp/actions/controlGpAction.ts
Unescape View File

@ -114,7 +114,7 @@ export const controlGpArcrftWarnAction = createAsyncAction(
CONTROL_GP_ARCRFT_WARN_REQUEST,
CONTROL_GP_ARCRFT_WARN_SUCCESS,
CONTROL_GP_ARCRFT_WARN_FAILURE
)<{id : string}, ControlGpArcrftWarnList, AxiosError>();
)<string, ControlGpArcrftWarnList, AxiosError>();
export const controlGpFlightPlanInitAction = createAction(CONTROL_FLIGHT_PLAN_INIT)();

16
src/modules/control/gp/sagas/controlGpSaga.ts
Unescape View File

@ -179,6 +179,21 @@ function* controlGpFlightPlanWarnSaga(
}
}
function* controlGpArcrftWarnSaga(
action: ActionType<typeof Actions.controlGpArcrftWarnAction.request>
) {
try {
const id = action.payload;
const rs = yield call(controlGpApi.getArcrftWarnList, id);
yield put(Actions.controlGpArcrftWarnAction.success(rs));
} catch (error) {
yield put(Actions.controlGpArcrftWarnAction.failure(error));
}
}
export function* controlGpSaga() {
yield takeEvery(Actions.controlGpAction.request, getControlGpSaga);
@ -189,4 +204,5 @@ export function* controlGpSaga() {
yield takeEvery(Actions.controlGroupAuthAction.request, controlGroupAuthSaga);
yield takeEvery(Actions.controlGpFlightPlanAction.request, controlGpFlightPlanSaga);
yield takeEvery(Actions.controlGpFlightPlanWarnAction.request, controlGpFlightPlanWarnSaga);
yield takeEvery(Actions.controlGpArcrftWarnAction.request, controlGpArcrftWarnSaga);
}

212
src/views/control/alarm/ControlAlarmList.js
Unescape View File

@ -1,66 +1,160 @@
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 => {
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'>전체 2000건</div>
<div className='list-right-txt'>오늘 120건</div>
</div>
</dt>
</dl>
</div>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>알림 목록</h4>
</div>
<div className='layer-content-list'>
<dl className='notice-list'>
<dt>
<div className='list-ti'>
<div className='list-left-txt'>통신 장애 알림</div>
<div className='list-right-txt'>6월 17일</div>
</div>
<div className='list-txt'>
통신장애 통신장애 통신장애 통신장애 통신장애 통신장애 통신장애
통신장애 통신장애{' '}
</div>
</dt>
</dl>
</div>
<div className='layer-content-list'>
<dl className='notice-list'>
<dt>
<div className='list-ti'>
<div className='list-left-txt'>비행 경로 이탈</div>
<div className='list-right-txt'>6월 17일</div>
</div>
<div className='list-txt'>
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈
비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈 비행경로이탈
</div>
</dt>
</dl>
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>
<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>
);
);
};
export default ControlAlarmList;

10
src/views/control/main/ControlMain.js
Unescape View File

@ -76,21 +76,21 @@ const ControlMain = () => {
<DroneMenuIcon width='30' height='30' />
</button>
</li>
<li>
{/* <li>
<button>
<Bell width='20' height='20' />
</button>
</li>
</li> */}
{/* <li>
<button onClick={() => openMenu('weatherList')}>
<Sun size={25} />
</button>
</li>
</li> */}
<li>
<button onClick={() => openMenu('alarmList')}>
<Bell size={25} />
<Bell width='20' height='20' />
</button>
</li> */}
</li>
</ul>
<ul className='left-menu-footer'>
<li>

Write Preview
Loading…
Cancel
Save