메인 대시보드(비행계획, 비행건수, 비정상상황)완료

src/components/dashboard/DashboardGroupList.js

@@ -1,34 +1,193 @@
 import { Plus } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle, Table } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
+import { GridDatabase } from '../../components/crud/grid/GridDatatable';
+import { EDateType } from '../../modules/main/dash/models/mainDashModel.ts';
+import { IoIosArrowRoundDown, IoIosArrowRoundUp } from 'react-icons/io';
 
-export const DashboardGroupList = props => {
+const titles = {
+  dailyFlightPlan: '일일 비행계획 현황',
+  dailyFlightCount: '일일 비행건수 현황',
+  dailyFlightWarn: '일일 비정상상황 현황'
+};
+
+const columns = {
+  dailyFlightPlan: [
+    {
+      id: 'dateType',
+      name: '구분',
+      minWidth: '50px',
+      center: true,
+      cell: (row, i) => <div>{EDateType[`${row.dateType}`]}</div>
+    },
+    {
+      id: 'plan',
+      name: '제출',
+      minWidth: '50px',
+      center: true,
+      cell: (row, i) => <div>{row.plan}</div>
+    },
+    {
+      id: 'aprvn',
+      name: '승인',
+      minWidth: '50px',
+      center: true,
+      cell: row => {
+        return <div>{row.aprvn}</div>;
+      }
+    },
+    {
+      id: 'count',
+      name: '합계',
+      minWidth: '50px',
+      center: true,
+      cell: row => {
+        return <div>{row.count}</div>;
+      }
+    },
+    {
+      id: 'note',
+      name: '비고',
+      left: true,
+      cell: row => {
+        return (
+          <div>
+            {row.note >= 0 ? (
+              <IoIosArrowRoundUp color='red' />
+            ) : (
+              <IoIosArrowRoundDown color='blue' />
+            )}
+            {Math.sqrt(Math.pow(Math.floor(row.note), 2))}%
+          </div>
+        );
+      }
+    }
+  ],
+  dailyFlightCount: [
+    {
+      id: 'dateType',
+      name: '구분',
+      minWidth: '50px',
+      center: true,
+      cell: (row, i) => <div>{EDateType[`${row.dateType}`]}</div>
+    },
+    {
+      id: 'flightPlan',
+      name: '계획',
+      minWidth: '50px',
+      center: true,
+      cell: (row, i) => <div>{row.flightPlan}</div>
+    },
+    {
+      id: 'completeFlight',
+      name: '비행완료',
+      center: true,
+      cell: row => {
+        return <div>{row.completeFlight}</div>;
+      }
+    },
+    {
+      id: 'notFlight',
+      name: '미비행',
+      center: true,
+      cell: row => {
+        return <div>{row.notFlight}</div>;
+      }
+    },
+    {
+      id: 'note',
+      name: '비고',
+      left: true,
+      cell: row => {
+        return (
+          <div>
+            {row.note >= 0 ? (
+              <IoIosArrowRoundUp color='red' />
+            ) : (
+              <IoIosArrowRoundDown color='blue' />
+            )}
+            {Math.sqrt(Math.pow(Math.floor(row.note), 2))}%
+          </div>
+        );
+      }
+    }
+  ],
+  dailyFlightWarn: [
+    {
+      id: 'dateType',
+      name: '구분',
+      minWidth: '80px',
+      center: true,
+      cell: row => <div>{EDateType[`${row.dateType}`]}</div>
+    },
+    {
+      id: 'plan',
+      name: '비행경로이탈',
+      minWidth: '120px',
+      center: true,
+      cell: (row, i) => <div>{row.plan}</div>
+    },
+    {
+      id: 'altitude',
+      name: '비정상 고도',
+      minWidth: '105px',
+      center: true,
+      cell: row => {
+        return <div>{row.altitude}</div>;
+      }
+    },
+    {
+      id: 'crash',
+      name: '충돌위험',
+      minWidth: '95px',
+      center: true,
+      cell: row => {
+        return <div>{row.crash}</div>;
+      }
+    },
+    {
+      id: 'count',
+      name: '합계',
+      minWidth: '80px',
+      center: true,
+      cell: row => {
+        return <div>{row.count}</div>;
+      }
+    },
+    {
+      id: 'note',
+      name: '비고',
+      left: true,
+      cell: row => {
+        return (
+          <div>
+            {row.note >= 0 ? (
+              <IoIosArrowRoundUp color='red' />
+            ) : (
+              <IoIosArrowRoundDown color='blue' />
+            )}
+            {Math.sqrt(Math.pow(Math.floor(row.note), 2))}%
+          </div>
+        );
+      }
+    }
+  ]
+};
+
+export const DashboardGroupList = ({ title, pageMove, data }) => {
   return (
     <Card>
       <CardHeader className=''>
-        <CardTitle tag='h4'>그룹 정보</CardTitle>
-        <button onClick={e => props.pageMove()}>
+        <CardTitle tag='h4'>{titles[title]}</CardTitle>
+        <button onClick={e => pageMove()}>
           <Plus />
         </button>
       </CardHeader>
       <CardBody>
-        <Table striped responsive className='pal-table'>
-          <thead>
-            <tr>
-              <th>그룹 명</th>
-              <th>생성일시</th>
-            </tr>
-          </thead>
-          <tbody>
-            {props.data?.map((item, index) => {
-              return (
-                <tr key={index}>
-                  <td>{item.groupNm}</td>
-                  <td>{item.createDt}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </Table>
+        <GridDatabase
+          data={data}
+          count={data.length}
+          columns={columns[title]}
+        />
       </CardBody>
     </Card>
   );

src/components/dashboard/DashboardStcsArea.js

@@ -1,47 +1,18 @@
 import { ko } from 'date-fns/esm/locale';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Plus } from 'react-feather';
 import { Doughnut } from 'react-chartjs-2';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { Calendar } from 'react-feather';
 import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
-import { useSkin } from '../../utility/hooks/useSkin';
 
-export const DashboardStcsArea = props => {
-  const [chartData, setChartData] = useState({});
-
-  const [skin, setSkin] = useSkin(),
-    labelColor = skin === 'dark' ? '#b4b7bd' : '#6e6b7b',
-    tooltipShadow = 'rgba(0, 0, 0, 0.25)',
-    gridLineColor = 'rgba(200, 200, 200, 0.2)',
-    lineChartPrimary = '#666ee8',
-    lineChartDanger = '#ff4961',
-    warningColorShade = '#ffe802',
-    warningLightColor = '#FDAC34',
-    successColorShade = '#28dac6',
-    primaryColorShade = '#836AF9',
-    infoColorShade = '#299AFF',
-    yellowColor = '#ffe800',
-    greyColor = '#4F5D70',
-    blueColor = '#2c9aff',
-    blueLightColor = '#84D0FF',
-    greyLightColor = '#EDF1F4';
-
-  const arrColors = [
-    successColorShade,
-    warningLightColor,
-    primaryColorShade,
-    yellowColor,
-    blueColor
-  ];
-
-  const arrColorsClass = [
-    'successColorShade',
-    'warningLightColor',
-    'primaryColorShade',
-    'yellowColor',
-    'blueColor'
-  ];
+const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
+const warningLightColor = '#FDAC34';
+const successColorShade = '#28dac6';
+const primaryColorShade = '#836AF9';
+const yellowColor = '#ffe800';
+const blueColor = '#2c9aff';
 
 const options = {
   responsive: true,
@@ -69,6 +40,30 @@ export const DashboardStcsArea = props => {
   }
 };
 
+const titles = {
+  droneStatus: '드론 현황',
+  flightsRegion: 'TOP5 지역 별 비행횟수 통계'
+};
+
+export const DashboardStcsArea = props => {
+  const [chartData, setChartData] = useState({});
+
+  const arrColors = [
+    successColorShade,
+    warningLightColor,
+    primaryColorShade,
+    yellowColor,
+    blueColor
+  ];
+
+  const arrColorsClass = [
+    'successColorShade',
+    'warningLightColor',
+    'primaryColorShade',
+    'yellowColor',
+    'blueColor'
+  ];
+
   const chartDataInit = () => {
     let arrArea = [];
     let arrValue = [];
@@ -98,7 +93,7 @@ export const DashboardStcsArea = props => {
   return (
     <Card>
       <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
-        <CardTitle tag='h4'>TOP5 지역 별 비행횟수 통계</CardTitle>
+        <CardTitle tag='h4'>{titles[`${props.title}`]}</CardTitle>
         {/* <div className='d-flex align-items-center'>
           <Calendar size={14} />
           <Flatpickr
@@ -110,6 +105,8 @@ export const DashboardStcsArea = props => {
             className='form-control flat-picker bg-transparent border-0 shadow-none'
           />
         </div> */}
+        {props.title === 'flightsRegion' && (
+          <>
             <div className='datepicker-border-sm'>
               <div className='datepicker-custom'>
                 <Calendar size={14} />
@@ -125,10 +122,37 @@ export const DashboardStcsArea = props => {
                 />
               </div>
             </div>
+            <button onClick={e => {}}>
+              <Plus />
+            </button>
+          </>
+        )}
       </CardHeader>
       <CardBody>
         <div style={{ height: '275px' }}>
-          <Doughnut data={chartData} options={options} height={275} />
+          <Doughnut
+            data={chartData}
+            options={options}
+            height={275}
+            plugins={{
+              afterDraw: function (chart) {
+                let ctx = chart.chart.ctx;
+                let width = chart.chart.width;
+                let height = chart.chart.height;
+
+                chart.clear();
+                ctx.save();
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(
+                  '표시할 데이터가 없습니다.',
+                  width / 2,
+                  height / 2
+                );
+                ctx.restore();
+              }
+            }}
+          />
         </div>
         <div className='doughnut-chart-list'>
           {props.data?.map((item, index) => {

src/components/dashboard/DashboardStcsDay.js

@@ -1,31 +1,15 @@
+import 'react-datepicker/dist/react-datepicker.css';
 import { ko } from 'date-fns/esm/locale';
-import React, { useEffect, useState } from 'react';
+import { Plus } from 'react-feather';
+import { useEffect, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import { Calendar } from 'react-feather';
 import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
-import { useSkin } from '../../utility/hooks/useSkin';
-
-export const DashboardStcsDay = props => {
-  const [chartData, setChartData] = useState({});
 
-  const [skin, setSkin] = useSkin(),
-    labelColor = skin === 'dark' ? '#b4b7bd' : '#6e6b7b',
-    tooltipShadow = 'rgba(0, 0, 0, 0.25)',
-    gridLineColor = 'rgba(200, 200, 200, 0.2)',
-    lineChartPrimary = '#666ee8',
-    lineChartDanger = '#ff4961',
-    warningColorShade = '#ffe802',
-    warningLightColor = '#FDAC34',
-    successColorShade = '#28dac6',
-    primaryColorShade = '#836AF9',
-    infoColorShade = '#299AFF',
-    yellowColor = '#ffe800',
-    greyColor = '#4F5D70',
-    blueColor = '#2c9aff',
-    blueLightColor = '#84D0FF',
-    greyLightColor = '#EDF1F4';
+const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
+const gridLineColor = 'rgba(200, 200, 200, 0.2)';
+const successColorShade = '#28dac6';
 
 const options = {
   elements: {
@@ -40,6 +24,7 @@ export const DashboardStcsDay = props => {
   legend: {
     display: false
   },
+
   tooltips: {
     // Updated default tooltip UI
     shadowOffsetX: 1,
@@ -63,7 +48,7 @@ export const DashboardStcsDay = props => {
           display: false
         },
         ticks: {
-            fontColor: labelColor
+          fontColor: '#6e6b7b'
         }
       }
     ],
@@ -78,18 +63,21 @@ export const DashboardStcsDay = props => {
           stepSize: 1,
           // min: 0,
           // max: 400,
-            fontColor: labelColor
+          fontColor: '#6e6b7bs'
         }
       }
     ]
   }
 };
 
+export const DashboardStcsDay = ({ startDate, setStartDate, data }) => {
+  const [chartData, setChartData] = useState({});
+
   const chartDataInit = () => {
     let arrDay = [];
     let arrValue = [];
 
-    props.data?.map(item => {
+    data?.map(item => {
       arrDay.push(item.typeCd);
       arrValue.push(item.count);
     });
@@ -110,7 +98,7 @@ export const DashboardStcsDay = props => {
 
   useEffect(() => {
     chartDataInit();
-  }, [props.data]);
+  }, [data]);
 
   return (
     <Card>
@@ -121,8 +109,8 @@ export const DashboardStcsDay = props => {
             <Calendar size={14} />
             <DatePicker
               locale={ko}
-              selected={props.startDate}
-              onChange={date => props.setStartDate(date)}
+              selected={startDate}
+              onChange={date => setStartDate(date)}
               dateFormat='yyy / MMMM'
               showMonthYearPicker
               showFullMonthYearPicker
@@ -131,10 +119,37 @@ export const DashboardStcsDay = props => {
             />
           </div>
         </div>
+        <button onClick={e => {}}>
+          <Plus />
+        </button>
       </CardHeader>
       <CardBody>
         <div style={{ height: '400px' }}>
-          <Bar data={chartData} options={options} height={400} />
+          <Bar
+            data={chartData}
+            options={options}
+            height={400}
+            plugins={{
+              afterDraw: function (chart) {
+                if (data.length <= 0) {
+                  let ctx = chart.chart.ctx;
+                  let width = chart.chart.width;
+                  let height = chart.chart.height;
+
+                  chart.clear();
+                  ctx.save();
+                  ctx.textAlign = 'center';
+                  ctx.textBaseline = 'middle';
+                  ctx.fillText(
+                    '표시할 데이터가 없습니다.',
+                    width / 2,
+                    height / 2
+                  );
+                  ctx.restore();
+                }
+              }
+            }}
+          />
         </div>
       </CardBody>
     </Card>

src/components/dashboard/DroneFlightSchedule.js

@@ -0,0 +1,99 @@
+import { Plus } from 'react-feather';
+import { Card, CardBody, CardHeader, CardTitle, Input, Col } from 'reactstrap';
+import { GridDatabase } from '../../components/crud/grid/GridDatatable';
+
+const columns = [
+  {
+    id: 'a',
+    name: '그룹 몇',
+    minWidth: '50px',
+    center: true,
+    cell: (row, i) => <div>{row.a}</div>
+  },
+  {
+    id: 'b',
+    name: '조종자',
+    minWidth: '50px',
+    center: true,
+    cell: (row, i) => <div>{row.b}</div>
+  },
+  {
+    id: 'c',
+    name: '기체 신고 번호',
+    minWidth: '50px',
+    center: true,
+    cell: row => {
+      return <div>{row.c}</div>;
+    }
+  },
+  {
+    id: 'd',
+    name: '비행 시작 시간',
+    minWidth: '50px',
+    center: true,
+    cell: row => {
+      return <div>{row.d}</div>;
+    }
+  },
+  {
+    id: 'e',
+    name: '비행 종료 시간',
+    left: true,
+    cell: row => {
+      return <div>{row.e}</div>;
+    }
+  },
+  {
+    id: 'e',
+    name: '총 예상 비행시간',
+    left: true,
+    cell: row => {
+      return <div>{row.f}</div>;
+    }
+  },
+  {
+    id: 'e',
+    name: '상태',
+    left: true,
+    cell: row => {
+      return <div>{row.g}</div>;
+    }
+  }
+];
+
+const dummyData = [
+  {
+    a: '공항공사',
+    b: '홍길동',
+    c: 'PA123456',
+    d: '2023-11-11 10:00',
+    e: '2023-11-11 11:00',
+    f: '01:00',
+    g: '비행완료'
+  }
+];
+
+export default function DroneFlightSchedule({ pageMove, data }) {
+  return (
+    <Card>
+      <CardHeader className=''>
+        <CardTitle tag='h4'>드론 별 비행운항 목록</CardTitle>
+        <Col className='list-input' xs='2'>
+          <Input type='select'>
+            <option>그룹선택</option>
+          </Input>
+          <button onClick={e => {}}>
+            <Plus />
+          </button>
+        </Col>
+      </CardHeader>
+      <CardBody>
+        <GridDatabase
+          data={dummyData}
+          count={dummyData.length}
+          columns={columns}
+        />
+      </CardBody>
+    </Card>
+  );
+}

src/containers/main/dash/MainDashContainer.js

@@ -1,28 +1,32 @@
-import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import moment from 'moment';
 import { Col, Row } from 'reactstrap';
-import { DashboardDronList } from '../../../components/dashboard/DashboardDronList';
+import DroneFlightSchedule from '../../../components/dashboard/DroneFlightSchedule';
 import { DashboardGroupList } from '../../../components/dashboard/DashboardGroupList';
-import { DashboardMenu } from '../../../components/dashboard/DashboardMenu';
 import { DashboardStcsArea } from '../../../components/dashboard/DashboardStcsArea';
 import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay';
 import * as Actions from '../../../modules/main/dash/actions/mainDashAction';
+import '@styles/react/libs/flatpickr/flatpickr.scss';
+import '@styles/react/libs/tables/react-dataTable-component.scss';
+import '../../../assets/css/custom.css';
 
 export const MainDashContainer = () => {
   const dispatch = useDispatch();
-  const { stcsDayList, stcsAreaList, groupList, dronList } = useSelector(
-    state => state.mainDashState
+  /*
+    stcsDayList : 일 별 비행횟수
+    stcsAreaList: TOP 5 지역 별 비행횟수
+  */
+
+  const [dashboardData] = useSelector(
+    state => [state.mainDashState.dashboardData],
+    shallowEqual
   );
-
-  const history = useHistory();
-
   const { user } = useSelector(state => state.authState, shallowEqual);
-
   const [dayStartDate, setDayStartDate] = useState(new Date());
-
   const [areaStartDate, setAreaStartDate] = useState(new Date());
+  const history = useHistory();
 
   const handlerStcsDaySearch = date => {
     dispatch(
@@ -56,10 +60,13 @@ export const MainDashContainer = () => {
     );
   };
 
-  const handlerStcsDayParam = date => {
+  const handlerStcsDayParam = useCallback(
+    date => {
       setDayStartDate(date);
       handlerStcsDaySearch(date);
-  };
+    },
+    [dayStartDate]
+  );
 
   const handlerStcsAreaParam = date => {
     setAreaStartDate(date);
@@ -70,43 +77,48 @@ export const MainDashContainer = () => {
     history.push('/basis/dron/index');
   };
 
-  const handlerGroupDetail = () => {
+  const handlerGroupDetail = useCallback(val => {
     history.push('/basis/group/index');
-  };
+  }, []);
 
   const movePage = url => {
     history.push(url);
   };
   useEffect(() => {
-    handlerStcsDaySearch(dayStartDate);
-    handlerStcsAreaSearch(areaStartDate);
-    handlerGroupSearch();
-    handlerDronSearch();
+    dispatch(
+      Actions.DASHBOARD_DATA.request({
+        stcsDay: moment(dayStartDate).format('YYYY-MM')
+      })
+    );
+    // handlerStcsDaySearch(dayStartDate);
+    // handlerStcsAreaSearch(areaStartDate);
+    // handlerGroupSearch();
+    // handlerDronSearch();
   }, []);
 
-  useEffect(() => {}, [stcsDayList]);
-
   return (
     <div className='main-dashboard'>
-      {/* <DashboardMenu movePage={movePage} /> */}
       <div className='dashboard-section'>
         <Row>
           <Col md={4}>
             <DashboardGroupList
-              data={groupList}
               pageMove={handlerGroupDetail}
+              title='dailyFlightPlan'
+              data={dashboardData?.dailyFlightPlan || []}
             />
           </Col>
           <Col md={4}>
             <DashboardGroupList
-              data={groupList}
               pageMove={handlerGroupDetail}
+              title='dailyFlightCount'
+              data={dashboardData?.dailyFlightCount || []}
             />
           </Col>
           <Col md={4}>
             <DashboardGroupList
-              data={groupList}
               pageMove={handlerGroupDetail}
+              title='dailyFlightWarn'
+              data={dashboardData?.dailyFlightWarn || []}
             />
           </Col>
         </Row>
@@ -114,18 +126,18 @@ export const MainDashContainer = () => {
       <div className='dashboard-section'>
         <Row>
           <Col lg={8} md={12} className='dashboard-chart'>
-            <DashboardStcsDay
-              startDate={dayStartDate}
-              setStartDate={handlerStcsDayParam}
-              data={stcsDayList}
-            />
+            <DroneFlightSchedule pageMove={handlerGroupDetail} data={[]} />
           </Col>
 
           <Col lg={4} md={12} className='dashboard-chart'>
+            {
+              // 드론 현황
+            }
             <DashboardStcsArea
               startDate={areaStartDate}
               setStartDate={handlerStcsAreaParam}
-              data={stcsAreaList}
+              // data={stcsAreaList}
+              title='droneStatus'
             />
           </Col>
         </Row>
@@ -136,15 +148,19 @@ export const MainDashContainer = () => {
             <DashboardStcsDay
               startDate={dayStartDate}
               setStartDate={handlerStcsDayParam}
-              data={stcsDayList}
+              data={dashboardData?.stcsDayList || []}
             />
           </Col>
 
           <Col lg={4} md={12} className='dashboard-chart'>
+            {
+              // top5 지역 별 바행횟수
+            }
             <DashboardStcsArea
               startDate={areaStartDate}
               setStartDate={handlerStcsAreaParam}
-              data={stcsAreaList}
+              // data={stcsAreaList}
+              title='flightsRegion'
             />
           </Col>
         </Row>

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

@@ -4,7 +4,9 @@ import {
   DronListData,
   GroupListData,
   StcsAreaData,
-  StcsDayData
+  StcsDayData,
+  IDashBoardData,
+  IDashBoardRq
 } from '../models/mainDashModel';
 
 const STCS_DAY_REQUEST = 'main/dash/STCS_DAY_REQUEST';
@@ -23,11 +25,15 @@ const DRON_LIST_REQUEST = 'main/dash/DRON_LIST_REQUEST';
 const DRON_LIST_SUCCESS = 'main/dash/DRON_LIST_SUCCESS';
 const DRON_LIST_FAILURE = 'main/dash/DRON_LIST_FAILURE';
 
+const DASHBOARD_DATA_REQUEST = 'main/dashboard/DATA_REQUEST';
+const DASHBOARD_DATA_SUCCESS = 'main/dashboard/DATA_SUCCESS';
+const DASHBOARD_DATA_FAILURE = 'main/dashboard/DATA_FAILURE';
+
 export const STCS_DAY = createAsyncAction(
   STCS_DAY_REQUEST,
   STCS_DAY_SUCCESS,
   STCS_DAY_FAILURE
-)<string, { data: StcsDayData[] }, AxiosError>();
+)<{ yyyymm: string }, { data: StcsDayData[] }, AxiosError>();
 
 export const STCS_AREA = createAsyncAction(
   STCS_AREA_REQUEST,
@@ -47,11 +53,18 @@ export const DRON_LIST = createAsyncAction(
   DRON_LIST_FAILURE
 )<number, { data: DronListData[] }, AxiosError>();
 
+export const DASHBOARD_DATA = createAsyncAction(
+  DASHBOARD_DATA_REQUEST,
+  DASHBOARD_DATA_SUCCESS,
+  DASHBOARD_DATA_FAILURE
+)<IDashBoardRq, IDashBoardData, AxiosError>();
+
 const actions = {
   STCS_DAY,
   STCS_AREA,
   GROUP_LIST,
-  DRON_LIST
+  DRON_LIST,
+  DASHBOARD_DATA
 };
 
 export type MainDashAction = ActionType<typeof actions>;

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

@@ -1,12 +1,14 @@
 import qs from 'qs';
 import axios from '../../../utils/customAxiosUtil';
+import { IDashBoardRq } from '../models/mainDashModel';
 
 export const mainDashAPI = {
-  stcsDay: async (data: string) => {
+  stcsDay: async (data: { yyyymm: string }) => {
     const queryString = qs.stringify(data, {
       addQueryPrefix: true,
       arrayFormat: 'repeat'
     });
+    console.log(data);
     return await axios.get(`api/main/dash/stcs/day${queryString}`);
   },
   stcsArea: async (data: string) => {
@@ -31,5 +33,14 @@ export const mainDashAPI = {
       arrayFormat: 'repeat'
     });
     return await axios.get(`api/main/dash/arcrft/list${queryString}`);
+  },
+  dailyFlightWarn: async () => {
+    return await axios.get('api/main/dash/current/flight-warn');
+  },
+  dailyFlightPlan: async () => {
+    return await axios.get('api/main/dash/current/flight-plan');
+  },
+  dailyFlightCount: async () => {
+    return await axios.get('api/main/dash/stcs/dailyflight');
   }
 };

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

@@ -3,6 +3,37 @@ export interface MainDashState {
   stcsAreaList: StcsAreaData[] | undefined;
   groupList: GroupListData[] | undefined;
   dronList: DronListData[] | undefined;
+  dashboardData: IDashBoardData | undefined;
+}
+
+export enum EDateType {
+  yesterday = '전일',
+  today = '금일',
+  tomorrow = '명일'
+}
+
+export interface IDailyFlightPlan {
+  dateType: string;
+  plan: number;
+  aprvn: number;
+  count: number;
+  note: number;
+}
+export interface IDailyFlightWarn {
+  dateType: string;
+  plan: number;
+  altitude: number;
+  crash: number;
+  count: number;
+  note: number;
+}
+
+export interface IDailyFlightCount {
+  dateType: string;
+  flightPlan: number;
+  completeFlight: number;
+  notFlight: number;
+  note: number;
 }
 
 export interface StcsDayData {
@@ -29,11 +60,23 @@ export interface DronListData {
   groupNm: string;
 }
 
+export interface IDashBoardData {
+  stcsDayList: StcsDayData[];
+  dailyFlightWarn: IDailyFlightWarn[];
+  dailyFlightCount: IDailyFlightCount[];
+  dailyFlightPlan: IDailyFlightPlan[];
+}
+
+export interface IDashBoardRq {
+  stcsDay: string;
+}
+
 export const initMainDash = {
   stcsDayList: undefined,
   stcsAreaList: undefined,
   groupList: undefined,
-  dronList: undefined
+  dronList: undefined,
+  dashboardData: undefined
 };
 
 // laanc 승인 목록 검색

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

@@ -25,10 +25,15 @@ export const mainDahReducer = createReducer<
       draft.groupList = data;
     })
   )
-
   .handleAction(Actions.DRON_LIST.success, (state, action) =>
     produce(state, draft => {
       const { data } = action.payload;
       draft.dronList = data;
     })
+  )
+  .handleAction(Actions.DASHBOARD_DATA.success, (state, action) =>
+    produce(state, draft => {
+      const data = action.payload;
+      draft.dashboardData = { ...data };
+    })
   );

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

@@ -1,4 +1,4 @@
-import { call, put, takeEvery } from '@redux-saga/core/effects';
+import { call, put, takeEvery, all } from '@redux-saga/core/effects';
 import { ActionType } from 'typesafe-actions';
 import * as MessageActions from '../../../comn/message/actions/comnMessageAction';
 import * as Actions from '../actions/mainDashAction';
@@ -7,6 +7,7 @@ import * as Apis from '../apis/mainDashApi';
 function* listStcsDay(action: ActionType<typeof Actions.STCS_DAY.request>) {
   try {
     const params = action.payload;
+
     const res = yield call(Apis.mainDashAPI.stcsDay, params);
     const { data, count, errorCode, errorMessage } = res;
     if (errorCode) {
@@ -116,9 +117,59 @@ function* listDron(action: ActionType<typeof Actions.DRON_LIST.request>) {
   }
 }
 
+function* dashboardData(
+  action: ActionType<typeof Actions.DASHBOARD_DATA.request>
+) {
+  try {
+    const params = action.payload;
+
+    /*
+      stcsDayList: 일 별 비행횟수 통계
+      dailyFlightPlan: 일일 비행계획 현황 통계
+      dailyFlightCount: 일일 비행건수 현황 통계
+      dailyFlighWarn: 일일 비정상상황 현황 통계
+    */
+    const { stcsDayList, dailyFlighWarn, dailyFlightPlan, dailyFlightCount } =
+      yield all({
+        stcsDayList: call(Apis.mainDashAPI.stcsDay, { yyyymm: params.stcsDay }),
+        dailyFlighWarn: call(Apis.mainDashAPI.dailyFlightWarn),
+        dailyFlightPlan: call(Apis.mainDashAPI.dailyFlightPlan),
+        dailyFlightCount: call(Apis.mainDashAPI.dailyFlightCount)
+      });
+
+    // if (errorCode) {
+    //   // 오류메시지 호출
+    //   yield put(
+    //     MessageActions.IS_ERROR({
+    //       errorCode: errorCode,
+    //       errorMessage: '처리중 오류가 발생하였습니다',
+    //       isHistoryBack: false,
+    //       isRefresh: false
+    //     })
+    //   );
+
+    //   return;
+    // }
+    yield put(
+      Actions.DASHBOARD_DATA.success({
+        stcsDayList: stcsDayList.data,
+        dailyFlightWarn: dailyFlighWarn.data.slice(
+          0,
+          dailyFlightPlan.data.length - 1
+        ),
+        dailyFlightCount: dailyFlightCount.data,
+        dailyFlightPlan: dailyFlightPlan.data
+      })
+    );
+  } catch (error) {
+    yield put(Actions.DASHBOARD_DATA.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);
 }