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

src/modules/control/gp/actions/controlGpAction.ts

@@ -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)();
 

src/modules/control/gp/sagas/controlGpSaga.ts

@@ -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);
 }

src/views/control/alarm/ControlAlarmList.js

@@ -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-left-txt'>{total? total.totalDroneCnt: 0}대 비행 중</div>
-                <div className='list-right-txt'>오늘 120건</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-left-txt'>{warn.idntfNum}</div>
-                <div className='list-right-txt'>6월 17일</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>
     );

src/views/control/main/ControlMain.js

@@ -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>