대시보드 page link 연결 및 권한코드 처리

src/components/dashboard/DashboardGroupList.js

@@ -173,12 +173,30 @@ const columns = {
   ]
 };
 
-export const DashboardGroupList = ({ title, pageMove, data }) => {
+export const DashboardGroupList = ({ title, handlerMovePage, data }) => {
   return (
     <Card>
       <CardHeader className=''>
         <CardTitle tag='h4'>{titles[title]}</CardTitle>
-        <button onClick={e => pageMove()}>
+        <button
+          onClick={() => {
+            let movePage = '/';
+            switch (title) {
+              case 'dailyFlightPlan': // 비행 실적
+                movePage = '/statistics/result';
+                break;
+              case 'dailyFlightCount': // 비행 통계
+                movePage = '/statistics/flight';
+                break;
+              case 'dailyFlightWarn': // 비정상상황 통계
+                movePage = '/statistics/abnormal';
+                break;
+              default:
+                break;
+            }
+            handlerMovePage(movePage);
+          }}
+        >
           <Plus />
         </button>
       </CardHeader>

src/components/dashboard/DashboardStcsArea.js

@@ -61,7 +61,13 @@ const titles = {
   flightsRegion: 'TOP5 지역 별 비행횟수 통계'
 };
 
-export const DashboardStcsArea = ({ data, title, setStartDate, startDate }) => {
+export const DashboardStcsArea = ({
+  data,
+  title,
+  setStartDate,
+  startDate,
+  handlerMovePage
+}) => {
   const [chartData, setChartData] = useState({});
 
   useEffect(() => {
@@ -117,7 +123,10 @@ export const DashboardStcsArea = ({ data, title, setStartDate, startDate }) => {
                     />
                   </div>
                 </div>
-                <button onClick={e => {}} style={{ marginLeft: '8px' }}>
+                <button
+                  onClick={() => handlerMovePage('/statistics/flight')}
+                  style={{ marginLeft: '8px' }}
+                >
                   <Plus />
                 </button>
               </>
@@ -126,7 +135,11 @@ export const DashboardStcsArea = ({ data, title, setStartDate, startDate }) => {
         </div>
       </CardHeader>
       <CardBody>
-        <div style={{ height: '100%' }}>
+        <div
+          style={{
+            height: Object.keys(chartData).length > 0 ? '275px' : '100%'
+          }}
+        >
           {Object.keys(chartData).length > 0 ? (
             <Doughnut data={chartData} options={options} height={275} />
           ) : (

src/components/dashboard/DashboardStcsDay.js

@@ -70,7 +70,12 @@ const options = {
   }
 };
 
-export const DashboardStcsDay = ({ startDate, setStartDate, data }) => {
+export const DashboardStcsDay = ({
+  startDate,
+  setStartDate,
+  data,
+  handlerMovePage
+}) => {
   const [chartData, setChartData] = useState({});
 
   useEffect(() => {
@@ -126,7 +131,10 @@ export const DashboardStcsDay = ({ startDate, setStartDate, data }) => {
                 />
               </div>
             </div>
-            <button onClick={e => {}} style={{ marginLeft: '8px' }}>
+            <button
+              onClick={() => handlerMovePage('/statistics/flight')}
+              style={{ marginLeft: '8px' }}
+            >
               <Plus />
             </button>
           </div>

src/components/dashboard/DroneFlightSchedule.js

@@ -1,5 +1,13 @@
+import { useSelector } from 'react-redux';
 import { Plus } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle, Input, Col } from 'reactstrap';
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label
+} from 'reactstrap';
 import { GridDatabase } from '../../components/crud/grid/GridDatatable';
 
 const columns = [
@@ -61,24 +69,97 @@ const columns = [
   }
 ];
 
-export default function DroneFlightSchedule({ pageMove, data }) {
+const competentAgency = [
+  {
+    text: '서울지방항공청(항공운항과)',
+    value: 'F0001'
+  },
+  {
+    text: '김포항공관리사무소(안전운항과)',
+    value: 'F0002'
+  },
+  {
+    text: '양양공항출장소',
+    value: 'F0003'
+  },
+  {
+    text: '원주공항출장소',
+    value: 'F0004'
+  },
+  {
+    text: '청주공항출장소',
+    value: 'F0005'
+  },
+  {
+    text: '군산공항출장소',
+    value: 'F0006'
+  },
+  {
+    text: '부산지방항공청(항공운항과)',
+    value: 'F0007'
+  },
+  {
+    text: '제주지방항공청(안전운항과)',
+    value: 'F0008'
+  },
+  {
+    text: '정석비행장',
+    value: 'F0009'
+  },
+  {
+    text: '울진공항출장소',
+    value: 'F0010'
+  }
+];
+
+export default function DroneFlightSchedule({
+  handlerMovePage,
+  handlerDronOperationChange,
+  user
+}) {
+  const { dronOperationList } = useSelector(state => state.mainDashState);
+
   return (
     <Card>
       <CardHeader className=''>
         <div className='w-100 d-flex justify-content-between'>
           <CardTitle tag='h4'>드론 별 비행운항 목록</CardTitle>
           <div className='d-flex align-items-center'>
-            <Input type='select' size='sm' style={{ minWidth: '120px' }}>
-              <option>그룹선택</option>
-            </Input>
-            <button onClick={e => {}} style={{ marginLeft: '8px' }}>
+            {user?.cptAuthCode === 'KAC' ||
+              (user?.authId === 'SUPER' && (
+                <Input
+                  id='groupSelect'
+                  type='select'
+                  size='sm'
+                  style={{ minWidth: '120px' }}
+                  s
+                  onChange={e => {
+                    const { value } = e.target;
+                    handlerDronOperationChange(value);
+                  }}
+                >
+                  <option value='all'>그룹선택</option>
+                  {competentAgency?.map(i => (
+                    <option value={i.value}>{i.text}</option>
+                  ))}
+                </Input>
+              ))}
+
+            <button
+              onClick={() => handlerMovePage('/basis/flight/schedule/index')}
+              style={{ marginLeft: '8px' }}
+            >
               <Plus />
             </button>
           </div>
         </div>
       </CardHeader>
       <CardBody>
-        <GridDatabase data={data} count={data.length} columns={columns} />
+        <GridDatabase
+          data={dronOperationList || []}
+          count={dronOperationList?.length || 0}
+          columns={columns}
+        />
       </CardBody>
     </Card>
   );

src/containers/main/dash/MainDashContainer.js

@@ -7,7 +7,8 @@ import DroneFlightSchedule from '../../../components/dashboard/DroneFlightSchedu
 import { DashboardGroupList } from '../../../components/dashboard/DashboardGroupList';
 import { DashboardStcsArea } from '../../../components/dashboard/DashboardStcsArea';
 import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay';
-import * as Actions from '../../../modules/main/dash/actions/mainDashAction';
+import * as DashActions from '../../../modules/main/dash/actions/mainDashAction';
+import * as GroupActions from '../../../modules/basis/group/actions/basisGroupAction';
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
 import '@styles/react/libs/flatpickr/flatpickr.scss';
 import '@styles/react/libs/tables/react-dataTable-component.scss';
@@ -27,75 +28,66 @@ export const MainDashContainer = () => {
   const { stcsDayList, stcsAreaList } = useSelector(
     state => state.mainDashState
   );
-  const { user } = useSelector(state => state.authState, shallowEqual);
+  const { user } = useSelector(state => state.authState);
+
   const [dayStartDate, setDayStartDate] = useState(new Date());
   const [areaStartDate, setAreaStartDate] = useState(new Date());
   const history = useHistory();
 
+  useEffect(() => {
+    // 일일 비행계획 현황, 일일 비행건수 현황, 일일 비정상상황 현황 Promise.all 처리
+    dispatch(DashActions.DASHBOARD_DATA.request());
+    handlerStcsDaySearch(dayStartDate);
+    handlerStcsAreaSearch(areaStartDate);
+  }, []);
+
+  useEffect(() => {
+    handlerDronOperationList(user.cptAuthCode);
+  }, [user]);
+
+  // 일 별 비행횟수 통계 날짜 리스트 dispatch
   const handlerStcsDaySearch = date => {
     dispatch(
-      Actions.STCS_DAY.request({
+      DashActions.STCS_DAY.request({
         yyyymm: moment(date).format('YYYY-MM')
       })
     );
   };
 
+  // top5 지역 별 비행횟수 통계 리스트 dispatch
   const handlerStcsAreaSearch = date => {
     dispatch(
-      Actions.STCS_AREA.request({
+      DashActions.STCS_AREA.request({
         yyyymm: moment(date).format('YYYY-MM')
       })
     );
   };
 
-  const handlerGroupSearch = () => {
-    dispatch(
-      Actions.GROUP_LIST.request({
-        cstmrSno: user?.cstmrSno
-      })
-    );
-  };
-
-  const handlerDronSearch = () => {
-    dispatch(
-      Actions.DRON_LIST.request({
-        cstmrSno: user?.cstmrSno
-      })
-    );
+  // 드론 별 비행운항 목록 리스트 dispatch
+  const handlerDronOperationList = data => {
+    dispatch(DashActions.DRON_OPERRATION_LIST.request(data));
   };
 
+  // 일 별 비행횟수 통계 날짜 변경 핸들러
   const handlerStcsDayParam = date => {
     setDayStartDate(date);
     handlerStcsDaySearch(date);
   };
 
+  // top5 지역 별 비행횟수 통계 날짜 변경 핸들러
   const handlerStcsAreaParam = date => {
     setAreaStartDate(date);
     handlerStcsAreaSearch(date);
   };
 
-  const handlerDronDetail = () => {
-    history.push('/basis/dron/index');
+  // 드론 별 비행운항 목록 그룹 체인지 핸들러
+  const handlerDronOperationChange = data => {
+    handlerDronOperationList(data);
   };
 
-  const handlerGroupDetail = useCallback(val => {
-    history.push('/basis/group/index');
-  }, []);
-
-  const movePage = url => {
+  const handlerMovePage = url => {
     history.push(url);
   };
-  useEffect(() => {
-    dispatch(
-      Actions.DASHBOARD_DATA.request({
-        serviceType: 'all'
-      })
-    );
-    handlerStcsDaySearch(dayStartDate);
-    handlerStcsAreaSearch(areaStartDate);
-    // handlerGroupSearch();
-    // handlerDronSearch();
-  }, []);
 
   return (
     <div className='main-dashboard'>
@@ -103,21 +95,21 @@ export const MainDashContainer = () => {
         <Row>
           <Col md={4}>
             <DashboardGroupList
-              pageMove={handlerGroupDetail}
+              handlerMovePage={handlerMovePage}
               title='dailyFlightPlan'
               data={dashboardData?.dailyFlightPlan || []}
             />
           </Col>
           <Col md={4}>
             <DashboardGroupList
-              pageMove={handlerGroupDetail}
+              handlerMovePage={handlerMovePage}
               title='dailyFlightCount'
               data={dashboardData?.dailyFlightCount || []}
             />
           </Col>
           <Col md={4}>
             <DashboardGroupList
-              pageMove={handlerGroupDetail}
+              handlerMovePage={handlerMovePage}
               title='dailyFlightWarn'
               data={dashboardData?.dailyFlightWarn || []}
             />
@@ -128,8 +120,9 @@ export const MainDashContainer = () => {
         <Row>
           <Col lg={8} md={12} className='dashboard-chart'>
             <DroneFlightSchedule
-              pageMove={handlerGroupDetail}
-              data={dashboardData?.dronOperationList || []}
+              handlerMovePage={handlerMovePage}
+              handlerDronOperationChange={handlerDronOperationChange}
+              user={user}
             />
           </Col>
 
@@ -153,6 +146,7 @@ export const MainDashContainer = () => {
               startDate={dayStartDate}
               setStartDate={handlerStcsDayParam}
               data={stcsDayList || []}
+              handlerMovePage={handlerMovePage}
             />
           </Col>
           <Col lg={4} md={12} className='dashboard-chart'>
@@ -164,23 +158,11 @@ export const MainDashContainer = () => {
               setStartDate={handlerStcsAreaParam}
               data={stcsAreaList || []}
               title='flightsRegion'
+              handlerMovePage={handlerMovePage}
             />
           </Col>
         </Row>
       </div>
-      {/* <div className='dashboard-section'>
-        <Row>
-          <Col md={6}>
-            <DashboardGroupList
-              data={groupList}
-              pageMove={handlerGroupDetail}
-            />
-          </Col>
-          <Col md={6}>
-            <DashboardDronList data={dronList} pageMove={handlerDronDetail} />
-          </Col>
-        </Row>
-      </div> */}
       <MessageErrorModal />
     </div>
   );

src/modules/main/dash/actions/mainDashAction.ts

@@ -6,7 +6,7 @@ import {
   StcsAreaData,
   StcsDayData,
   IDashBoardData,
-  IDashBoardRq
+  IDronOperationList
 } from '../models/mainDashModel';
 
 const STCS_DAY_REQUEST = 'main/dash/STCS_DAY_REQUEST';
@@ -29,6 +29,13 @@ const DASHBOARD_DATA_REQUEST = 'main/dashboard/DATA_REQUEST';
 const DASHBOARD_DATA_SUCCESS = 'main/dashboard/DATA_SUCCESS';
 const DASHBOARD_DATA_FAILURE = 'main/dashboard/DATA_FAILURE';
 
+const DRON_OPERRATION_LIST_REQUEST =
+  'main/dashboard/DRON_OPERRATION_LIST_REQUEST';
+const DRON_OPERRATION_LIST_SUCCESS =
+  'main/dashboard/DRON_OPERRATION_LIST_SUCCESS';
+const DRON_OPERRATION_LIST_FAILURE =
+  'main/dashboard/DRON_OPERRATION_LIST_FAILURE';
+
 export const STCS_DAY = createAsyncAction(
   STCS_DAY_REQUEST,
   STCS_DAY_SUCCESS,
@@ -57,14 +64,21 @@ export const DASHBOARD_DATA = createAsyncAction(
   DASHBOARD_DATA_REQUEST,
   DASHBOARD_DATA_SUCCESS,
   DASHBOARD_DATA_FAILURE
-)<IDashBoardRq, IDashBoardData, AxiosError>();
+)<{}, IDashBoardData, AxiosError>();
+
+export const DRON_OPERRATION_LIST = createAsyncAction(
+  DRON_OPERRATION_LIST_REQUEST,
+  DRON_OPERRATION_LIST_SUCCESS,
+  DRON_OPERRATION_LIST_FAILURE
+)<string, IDronOperationList[], AxiosError>();
 
 const actions = {
   STCS_DAY,
   STCS_AREA,
   GROUP_LIST,
   DRON_LIST,
-  DASHBOARD_DATA
+  DASHBOARD_DATA,
+  DRON_OPERRATION_LIST
 };
 
 export type MainDashAction = ActionType<typeof actions>;

src/modules/main/dash/apis/mainDashApi.ts

@@ -1,6 +1,5 @@
 import qs from 'qs';
 import axios from '../../../utils/customAxiosUtil';
-import { IDashBoardRq } from '../models/mainDashModel';
 
 export const mainDashAPI = {
   stcsDay: async (data: { yyyymm: string }) => {

src/modules/main/dash/models/mainDashModel.ts

@@ -4,6 +4,7 @@ export interface MainDashState {
   groupList: GroupListData[] | undefined;
   dronList: DronListData[] | undefined;
   dashboardData: IDashBoardData | undefined;
+  dronOperationList: IDronOperationList[] | undefined;
 }
 
 export enum EDateType {
@@ -86,11 +87,6 @@ export interface IDashBoardData {
   dailyFlightCount: IDailyFlightCount[];
   dailyFlightPlan: IDailyFlightPlan[];
   dronSituation: IDronSituation[];
-  dronOperationList: IDronOperationList[];
-}
-
-export interface IDashBoardRq {
-  serviceType: string;
 }
 
 export const initMainDash = {
@@ -98,7 +94,8 @@ export const initMainDash = {
   stcsAreaList: undefined,
   groupList: undefined,
   dronList: undefined,
-  dashboardData: undefined
+  dashboardData: undefined,
+  dronOperationList: undefined
 };
 
 // laanc 승인 목록 검색

src/modules/main/dash/reducers/mainDashReducer.ts

@@ -36,4 +36,10 @@ export const mainDahReducer = createReducer<
       const data = action.payload;
       draft.dashboardData = { ...data };
     })
+  )
+  .handleAction(Actions.DRON_OPERRATION_LIST.success, (state, action) =>
+    produce(state, draft => {
+      const data = action.payload;
+      draft.dronOperationList = data;
+    })
   );

src/modules/main/dash/sagas/mainDashSaga.ts

@@ -122,8 +122,6 @@ function* dashboardData(
   action: ActionType<typeof Actions.DASHBOARD_DATA.request>
 ) {
   try {
-    const { serviceType } = action.payload;
-
     /*
       dailyFlightWarn: 일일 비정상상황 현황 통계
       dailyFlightPlan: 일일 비행계획 현황 통계
@@ -135,8 +133,7 @@ function* dashboardData(
       call(Apis.mainDashAPI.dailyFlightWarn),
       call(Apis.mainDashAPI.dailyFlightPlan),
       call(Apis.mainDashAPI.dailyFlightCount),
-      call(Apis.mainDashAPI.dronSituation),
-      call(Apis.mainDashAPI.dronOperationList, serviceType)
+      call(Apis.mainDashAPI.dronSituation)
     ]);
 
     let errorCheck = res.filter(i => i.hasOwnProperty('errorCode'));
@@ -168,8 +165,7 @@ function* dashboardData(
         dailyFlightWarn: res[0].data.slice(0, res[0].data.length - 1),
         dailyFlightPlan: res[1].data,
         dailyFlightCount: res[2].data,
-        dronSituation: dronSituationArr,
-        dronOperationList: res[4].data
+        dronSituation: dronSituationArr
       })
     );
   } catch (error) {
@@ -177,10 +173,37 @@ function* dashboardData(
   }
 }
 
+function* dronOperationList(
+  action: ActionType<typeof Actions.DRON_OPERRATION_LIST.request>
+) {
+  try {
+    const params = action.payload;
+    const res = yield call(Apis.mainDashAPI.dronOperationList, params);
+    const { data, count, errorCode, errorMessage } = res;
+    if (errorCode) {
+      // 오류메시지 호출
+      yield put(
+        MessageActions.IS_ERROR({
+          errorCode: errorCode,
+          errorMessage: '처리중 오류가 발생하였습니다',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+
+      return;
+    }
+    yield put(Actions.DRON_OPERRATION_LIST.success(data));
+  } catch (error) {
+    yield put(Actions.DRON_OPERRATION_LIST.failure(error));
+  }
+}
+
 export function* mainDashSaga() {
   yield takeEvery(Actions.STCS_DAY.request, listStcsDay);
   yield takeEvery(Actions.STCS_AREA.request, listStcsArea);
   yield takeEvery(Actions.GROUP_LIST.request, listGroup);
   yield takeEvery(Actions.DRON_LIST.request, listDron);
   yield takeEvery(Actions.DASHBOARD_DATA.request, dashboardData);
+  yield takeEvery(Actions.DRON_OPERRATION_LIST.request, dronOperationList);
 }