관제 - 알림내역 리스트

src/components/map/naver/dron/DronMarker.js

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import '../../../../assets/css/custom.css';
 import DronIconPulple from '../../../../assets/images/drone-marker-icon-pulple.png';
 import DronIcon from '../../../../assets/images/drone-marker-icon.png';
-import { controlGpDtlAction, controlGpHisAction, controlDbHisAction, controlGpFlightPlanAction } from '../../../../modules/control/gp';
+import { controlGpDtlAction, controlGpHisAction, controlDbHisAction, controlGpFlightPlanAction, controlGpLogAction } from '../../../../modules/control/gp';
 import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions';
 import { toast } from 'react-toastify';
 import DronToast from './DronToast';
@@ -129,6 +129,10 @@ export const DronMarker = props => {
         dispatch(objectClickAction(controlId));
         dispatch(controlGpDtlAction.request(controlId));
         dispatch(controlGpFlightPlanAction.request(idntfNum));
+        // dispatch(controlGpLogAction.request({ id: controlId }));
+        // dispatch(controlGpLogAction.request(controlId));
+
+        // dispatch(controlGpHisAction.request({ id: objectId }));
     };
 
     //마커를 삭제 한다.

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

@@ -4,13 +4,16 @@ import { ActionType, createAction, createAsyncAction } from 'typesafe-actions';
 import {
   ControlDetailData,
   ControlGpData,
+  ControlGpState,
   ControlGpDtlState,
   ControlGpFlightPlanDataList,  
+  ControlGpWarnLogData,
+  ControlGpLogState,
   ControlGpHisState,
   ControlGpPlanContainsRQ,
   ControlGpPlanContainsRS,
-  ControlGpState,
-  ControlGroupAuthState
+  ControlGroupAuthState,
+  // ControlGpWarnLogDataList,
 } from '../models/controlGpModel';
 
 const CONTROL_GP_REQUEST = 'control/gp/CONTROL_GP_REQUEST';
@@ -39,6 +42,11 @@ const CONTROL_FLIGHT_PLAN_REQUEST = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_
 const CONTROL_FLIGHT_PLAN_SUCCESS = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_SUCCESS';
 const CONTROL_FLIGHT_PLAN_FAILURE = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_FAILURE';
 
+//로그 리스트 조회
+const CONTROL_GP_LOG_REQIEST = 'control/gp/CONTROL_GP_LOG_REQUEST';
+const CONTROL_GP_LOG_SUCCESS = 'control/gp/CONTROL_GP_LOG_SUCCESS';
+const CONTROL_GP_LOG_FAILURE = 'control/gp/CONTROL_GP_LOG_FAILURE';
+
 const CONTROL_FLIGHT_PLAN_INIT = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_INIT';
 
 // [관제] 비행 구역 비정상 여부 체크
@@ -51,37 +59,44 @@ export const controlGpAction = createAsyncAction(
   CONTROL_GP_SUCCESS,
   CONTROL_GP_FAILURE
 )<ControlGpData[], ControlGpState, AxiosError>();
-
+  
 export const controlGpHisAction = createAsyncAction(
   CONTROL_GP_HIS_REQUEST,
   CONTROL_GP_HIS_SUCCESS,
   CONTROL_GP_HIS_FAILURE
 )<{ id: string }, ControlGpHisState, AxiosError>();
 
+  
 export const controlGpDtlAction = createAsyncAction(
   CONTROL_GP_DTL_REQUEST,
   CONTROL_GP_DTL_SUCCESS,
   CONTROL_GP_DTL_FAILURE
 )<string, ControlDetailData, AxiosError>();
-
+    
 export const controlGpRtDtlAction = createAsyncAction(
   CONTROL_GP_RTDTL_REQUEST,
   CONTROL_GP_RTDTL_SUCCESS,
   CONTROL_GP_RTDTL_FAILURE
 )<ControlGpData, ControlGpDtlState, AxiosError>();
-
+  
 export const controlGroupAuthAction = createAsyncAction(
   CONTROL_GROUP_AUTH_REQUEST,
   CONTROL_GROUP_AUTH_SUCCESS,
   CONTROL_GROUP_AUTH_FAILURE  
 )<string, ControlGroupAuthState, AxiosError>();
-
+    
 export const controlGpFlightPlanAction = createAsyncAction(
   CONTROL_FLIGHT_PLAN_REQUEST,
   CONTROL_FLIGHT_PLAN_SUCCESS, 
   CONTROL_FLIGHT_PLAN_FAILURE,
 )<string, ControlGpFlightPlanDataList, AxiosError>();
 
+export const controlGpLogAction = createAsyncAction(
+  CONTROL_GP_LOG_REQIEST,
+  CONTROL_GP_LOG_SUCCESS,
+  CONTROL_GP_LOG_FAILURE
+  )<{ id: string }, ControlGpLogState, AxiosError>();
+
 export const controlGpFlightPlanWarnAction = createAsyncAction(
   CONTROL_FLIGHT_PLAN_WARN_REQUEST,
   CONTROL_FLIGHT_PLAN_WARN_SUCCESS, 
@@ -93,6 +108,7 @@ export const controlGpFlightPlanInitAction = createAction(CONTROL_FLIGHT_PLAN_IN
 const actions = {
   controlGpAction,
   controlGpHisAction,
+  controlGpLogAction,
   controlGpDtlAction,
   controlGpRtDtlAction,
   controlGroupAuthAction,

src/modules/control/gp/apis/controlGpApi.ts

@@ -1,5 +1,10 @@
 import axios from '../../../utils/customAxiosUtil';
-import { ReponseControlGpHistory, ControlGroupAuthData, ResponseControlGroupAuth, ControlGpPlanContainsRQ} from '../models/controlGpModel';
+import {
+  ResponseControlGpHistory,
+  ResponseControlGroupAuth,
+  ControlGpPlanContainsRQ,
+  ResponseControlGpWarnLog
+} from '../models/controlGpModel';
 import qs from 'qs';
 
 export const controlGpApi = {
@@ -8,12 +13,24 @@ export const controlGpApi = {
       console.log(' ID is Empty');
       return null;
     }
-    const { data }: ReponseControlGpHistory = await axios.get(
+    const { data }: ResponseControlGpHistory = await axios.get(
       `api/ctr/cntrl/history/list/${id}`
     );
 
     return data;
   },
+  getWarnLog: async (id: string) => {
+    if (!id) {
+      console.log(' ID is Empty');
+      return null;
+    }
+
+    const { data }: ResponseControlGpWarnLog = await axios.get(
+      `api/ctr/cntrl/warnLog/${id}`
+    );
+    
+    return data;
+  },
   getDetail: async (id: string) => {
     return await axios.get(`api/ctr/cntrl/detail/${id}`);
   },

src/modules/control/gp/models/controlGpModel.ts

@@ -9,6 +9,10 @@ export interface ControlGpFlightPlanState {
   controlGpContains: ControlGpPlanContainsRS | undefined;
 }
 
+export interface ControlGpLogState {
+  controlGpWarnLog: ControlGpWarnLogData[] | undefined;
+}
+
 export interface ControlGpHisState {
   controlGpHistory: ControlGpHistoryData[] | undefined;
 }
@@ -16,7 +20,6 @@ export interface ControlGpHisState {
 export interface ControlGpDtlState {
   controlGpDetail: ControlGpDtlData | undefined;
   controlDetail: ControlDetailData | undefined;
-
 }
 
 export interface ControlGroupAuthState {
@@ -104,7 +107,6 @@ export interface ControlGroupAuthData {
 }
 
 export interface ControlGpFlightPlanDataList extends Array<ControlGpFlightPlanData> {};
-
 export interface ControlGpFlightPlanData {
   planSno?: number,
   groupId: string,
@@ -128,6 +130,12 @@ export interface ControlGpFlightPlanData {
   areaList?: FlightPlanAreaDataList | undefined    
 }
 
+export interface ControlGpWarnLogData {
+  warnLogSno: number;
+  cntrlId: String;
+  createDt: String;
+}
+
 export interface FlightPlanAreaDataList extends Array<FlightPlanAreaData> {};
 
 export interface FlightPlanAreaData {
@@ -169,10 +177,14 @@ export interface ControlGpPlanContainsRS {
   idntfNum: string,
 }
 
-export interface ReponseControlGpHistory {
+export interface ResponseControlGpHistory {
   data: ControlGpHistoryData[];
 }
 
+export interface ResponseControlGpWarnLog {
+  data: ControlGpWarnLogData[];
+}
+
 export interface ResponseControlGroupAuth {
   data: ControlGroupAuthData[];
 }
@@ -181,8 +193,10 @@ export const initiaResponseControlGpData = {
   controlGpList: undefined,
   controlGpDetail: undefined,
   controlGpHistory: undefined,
+  controlGpWarnLog: undefined,
   controlDetail: undefined,
   controlGroupAuthInfo: undefined,
   controlGpFltPlanList: undefined,
+  controlGpWarnLogList: undefined,
   controlGpContains: undefined
 };

src/modules/control/gp/reducers/controlGpReducer.ts

@@ -7,18 +7,21 @@ import {
   controlGpFlightPlanAction,
   controlGpFlightPlanInitAction,
   controlGpFlightPlanWarnAction,
+  controlGpLogAction,
   controlGpHisAction,
   controlGpRtDtlAction,
-  controlGroupAuthAction
+  controlGroupAuthAction,
 } from '../actions/controlGpAction';
 import {
+  ControlGpWarnLogData,
   ControlDetailData,
   ControlGpDtlState,  
   ControlGpFlightPlanState,  
+  ControlGpLogState,
   ControlGpHisState,
   ControlGpState,  
   ControlGroupAuthState,
-  initiaResponseControlGpData
+  initiaResponseControlGpData,
 } from '../models/controlGpModel';
 
 export const controlGpReducer = createReducer<ControlGpState, ControlGpAction>(
@@ -28,7 +31,7 @@ export const controlGpReducer = createReducer<ControlGpState, ControlGpAction>(
     const { controlGpList } = action.payload;    
     draft.controlGpList = controlGpList;
   })
-)
+);
 
 export const controlGpFltPlanReducer = createReducer<ControlGpFlightPlanState, ControlGpAction>(
   initiaResponseControlGpData
@@ -50,24 +53,27 @@ export const controlGpFltPlanReducer = createReducer<ControlGpFlightPlanState, C
     })
 );
 
+export const controlGpLogReducer = createReducer<ControlGpLogState, ControlGpAction>(
+  initiaResponseControlGpData
+).handleAction(controlGpLogAction.success, (state, action) => 
+  produce(state, draft => {
+    const { controlGpWarnLog } = action.payload;
+    draft.controlGpWarnLog = controlGpWarnLog;
+  })
+);
 
-export const controlGpHisReducer = createReducer<
-  ControlGpHisState,
-  ControlGpAction
->(initiaResponseControlGpData).handleAction(
-  controlGpHisAction.success,
-  (state, action) =>
+export const controlGpHisReducer = createReducer<ControlGpHisState, ControlGpAction>(
+  initiaResponseControlGpData
+  ).handleAction(controlGpHisAction.success, (state, action) =>
     produce(state, draft => {
       const { controlGpHistory } = action.payload;
       draft.controlGpHistory = controlGpHistory;
     })
 );
 
-export const controlGpDtlReducer = createReducer<
-  ControlGpDtlState,
-  ControlGpAction
->(initiaResponseControlGpData)
-  .handleAction(controlGpRtDtlAction.success, (state, action) =>
+export const controlGpDtlReducer = createReducer<ControlGpDtlState, ControlGpAction>(
+  initiaResponseControlGpData
+  ).handleAction(controlGpRtDtlAction.success, (state, action) =>
     produce(state, draft => {
       const { controlGpDetail } = action.payload;
 

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

@@ -15,7 +15,7 @@ function* getControlGpSaga(
         const state = yield select();
         const { objectId, isClickObject } = state.controlMapReducer;
         const { controlGroupAuthInfo } = state.controlGroupAuthState;        
-        const { controlGpHistory } = state.controlGpHisState;   
+        const { controlGpHistory } = state.controlGpHisState;
 
         let gpsData: ControlGpData[] = [];
 
@@ -35,25 +35,24 @@ function* getControlGpSaga(
             });
         } 
         
-        console.log('gps ', gpsData);
+        console.log('gps>>>> ', data);
 
         yield put(
             Actions.controlGpAction.success({
-                controlGpList: gpsData
+                controlGpList: data
             })
         );
 
-
         if (objectId && isClickObject) {
             let detailData;            
 
             //상세 정보에서 실시간 데이터 호출
-            gpsData.map(item => {
+            data.map(item => {
                 if (item.controlId === objectId) {
                     detailData = item;
                 }
-            });            
-            
+              });            
+              
             yield put(Actions.controlGpRtDtlAction.request(detailData));
 
             // History Push
@@ -98,7 +97,6 @@ function* controlGpRtDtlSaga(
     try {
         const controlGpDetail = action.payload;
 
-        // console.log(controlGpDetail);
         yield put(
             Actions.controlGpRtDtlAction.success({
                 controlDetail: undefined,
@@ -117,7 +115,6 @@ function* controlDtlSaga(
         const controlId = action.payload;
 
         const { data } = yield call(controlGpApi.getDetail, controlId);
-        console.log('data>>>>>>>>>>>>>>>>>>>>>', data);
         yield put(Actions.controlGpDtlAction.success(data));
     } catch (error) {
         yield put(Actions.controlGpDtlAction.failure(error));
@@ -161,6 +158,23 @@ function* controlGpFlightPlanSaga(
     }
 }
 
+function* getControlGpWarnLogSaga(
+  action: ActionType<typeof Actions.controlGpLogAction.request>
+) {
+  try{
+    const {id} = action.payload;
+    const data = yield call(controlGpApi.getWarnLog, id)
+    console.log('SAGA : Warn Log list : ', data);
+    yield put(
+      Actions.controlGpLogAction.success({
+        controlGpWarnLog: data
+      })
+    );
+  } catch(error) {
+    yield put(Actions.controlGpLogAction.failure(error));
+  }
+}
+
 function* controlGpFlightPlanWarnSaga(
     action: ActionType<typeof Actions.controlGpFlightPlanWarnAction.request>
 ) {
@@ -176,9 +190,11 @@ function* controlGpFlightPlanWarnSaga(
     }
 }
 
+
 export function* controlGpSaga() {
     yield takeEvery(Actions.controlGpAction.request, getControlGpSaga);
     yield takeEvery(Actions.controlGpHisAction.request, getControlGpHistorySaga);
+    yield takeEvery(Actions.controlGpLogAction.request, getControlGpWarnLogSaga);
     yield takeEvery(Actions.controlGpRtDtlAction.request, controlGpRtDtlSaga);
     yield takeEvery(Actions.controlGpDtlAction.request, controlDtlSaga);
     yield takeEvery(Actions.controlGroupAuthAction.request, controlGroupAuthSaga);

src/redux/reducers/rootReducer.ts

@@ -22,6 +22,7 @@ import {
   controlGpFltPlanReducer,
   controlGpSaga,
   ControlGpState,
+  controlGpLogReducer,
 } from '../../modules/control/gp';
 import controlMapReducer from '../../modules/control/map/reducers/controlMapReducer';
 import { mainDahReducer } from '../../modules/main/dash/reducers/mainDashReducer';
@@ -34,6 +35,7 @@ import navbar from './navbar';
 
 import { flightReducer } from '../../modules/basis/flight/reducers/basisFlightReducer';
 import { flightSaga } from '../../modules/basis/flight/sagas/basisFlightSaga';
+
 export interface StoreState {
   controlGpState: ControlGpState;
 }
@@ -63,6 +65,7 @@ const rootReducer = combineReducers({
   accountState: accountReducer,
   controlGpState: controlGpReducer,
   controlGpHisState: controlGpHisReducer,
+  controlGpLogState: controlGpLogReducer,
   controlGpDtlState: controlGpDtlReducer,
   controlGroupAuthState: controlGroupAuthReducer,  
   controlGpFltPlanState: controlGpFltPlanReducer,

src/views/control/report/ControlReportDetail.js

@@ -11,19 +11,22 @@ import {
   GET_ARCTFT_TYPE_CD,
   GET_WGHT_TYPE_CD
 } from '../../../utility/CondeUtil';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Card  } from 'reactstrap'
+import { controlGpLogAction } from '../../../modules/control/gp';
 
 const ControlReportDetail = props => {
-  const [historyModal, setHistoryModal] = useState(false);
   const dispatch = useDispatch();
+  const [historyModal, setHistoryModal] = useState(false);
 
-  const { controlGpDetail, controlDetail } = useSelector(
-    state => state.controlGpDtlState
-  );
+  const { controlGpDetail, controlDetail } = useSelector(state => state.controlGpDtlState);
+  const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
+
+  useEffect(() => {
+    if(historyModal) {
+      dispatch(controlGpLogAction.request({id : controlGpDetail.controlId}));
+    }
+  }, [historyModal])
 
-  // useEffect(() => {
-  //   // console.log(controlGpDetail);
-  // }, [controlGpDetail]);
 
   const handlerClose = () => {
     // console.log('================');
@@ -37,6 +40,7 @@ const ControlReportDetail = props => {
       return '-';
     }
   };
+
   return (
     <div className='left-layer'>
       <div className='layer-content'>
@@ -55,41 +59,52 @@ const ControlReportDetail = props => {
         <div className='layer-content-box mb-1'>
             <button type="button" className='history-btn'onClick={() => setHistoryModal(!historyModal)}>비정상상황 알림내역</button> 
         </div>
+
         <Modal
           isOpen={historyModal}
           toggle={() => setHistoryModal(!historyModal)}
           className='modal-dialog-centered historyModal'
         >
-          <ModalHeader toggle={() => setHistoryModal(!historyModal)}>
-          <div className='drone-ti'>
-            <span className="drone-name">DRONE01</span>
-            <span>알림내역</span>
-          </div>
-        
-          </ModalHeader>
-          <ModalBody>
-            <table className='table pal-table'>
-              <tr>
-                <th>번호</th>
-                <th>날짜</th>
-                <th>내용</th>
-              </tr>
-              <tr>
-                <th>1</th>
-                <th>2022-08-12 22:12:05</th>
-                <th>탈출!!비상탈출!!!</th>
-              </tr>
-            </table>
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              color='info'
-              onClick={() => setHistoryModal(!historyModal)}
-            >
-              확인
-            </Button>
-          </ModalFooter>
-        </Modal>
+        <ModalHeader toggle={() => setHistoryModal(!historyModal)}>
+        <div className='drone-ti'>
+          <span className="drone-name">{controlGpDetail?.objectId}</span>
+          <span>알림내역</span>
+        </div>
+      
+        </ModalHeader>
+        <ModalBody>
+          <table className='table pal-table'>
+            <tr>
+              <th>번호</th>
+              <th>날짜</th>
+              <th>내용</th>
+            </tr>
+            {controlGpWarnLog ?
+              controlGpWarnLog.map((p, i) => {
+                return (
+                  <tr>
+                    <th>{i+1}</th>
+                    <th>{p.createDt}</th>
+                    <th>{p.warnType}</th>
+                  </tr>
+                )
+              })
+            :
+                <tr>
+                  <th colSpan={3}>데이터가 없습니다.</th>
+                </tr>
+            }
+          </table>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            color='info'
+            onClick={() => setHistoryModal(!historyModal)}
+          >
+            확인
+          </Button>
+        </ModalFooter>
+      </Modal>
 
 
         <div className='layer-content-box'>

src/views/control/report/ControlReportList.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Search, X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import { Badge, Button, Input, InputGroup } from 'reactstrap';
-import { controlGpDtlAction } from '../../../modules/control/gp';
+import { controlGpDtlAction, controlGpLogAction } from '../../../modules/control/gp';
 import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlReportList = props => {
@@ -12,11 +12,6 @@ const ControlReportList = props => {
 
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    // console.log('>>>>', filterId);
-    controlGpList;
-  }, [controlGpList]);
-
   const handlerDetail = (objectId, cntrlId) => {
     dispatch(objectClickAction(objectId));
     dispatch(controlGpDtlAction.request(cntrlId));
@@ -63,7 +58,7 @@ const ControlReportList = props => {
           // console.log(item);
 
           if (item.objectId && item.objectId.indexOf(filterId) != -1) {
-            console.log(item);
+            // console.log(item);
             return (
               <div
                 className='layer-content-list'