diff --git a/src/components/dashboard/DashboardStcsArea.js b/src/components/dashboard/DashboardStcsArea.js index 195e6b5..c220dc6 100644 --- a/src/components/dashboard/DashboardStcsArea.js +++ b/src/components/dashboard/DashboardStcsArea.js @@ -40,82 +40,75 @@ const options = { } }; +const arrColors = [ + successColorShade, + warningLightColor, + primaryColorShade, + yellowColor, + blueColor +]; + +const arrColorsClass = [ + 'successColorShade', + 'warningLightColor', + 'primaryColorShade', + 'yellowColor', + 'blueColor' +]; + const titles = { droneStatus: '드론 현황', flightsRegion: 'TOP5 지역 별 비행횟수 통계' }; -export const DashboardStcsArea = props => { +export const DashboardStcsArea = ({ data, title, setStartDate, startDate }) => { const [chartData, setChartData] = useState({}); - const arrColors = [ - successColorShade, - warningLightColor, - primaryColorShade, - yellowColor, - blueColor - ]; - - const arrColorsClass = [ - 'successColorShade', - 'warningLightColor', - 'primaryColorShade', - 'yellowColor', - 'blueColor' - ]; + useEffect(() => { + chartDataInit(); + }, [data]); const chartDataInit = () => { - let arrArea = []; - let arrValue = []; + if (data.length > 0) { + let arrArea = []; + let arrValue = []; - props.data?.map(item => { - arrArea.push(item.typeCd); - arrValue.push(item.count); - }); + data?.map(item => { + arrArea.push(item.typeCd); + arrValue.push(item.count); + }); - setChartData({ - labels: arrArea, - datasets: [ - { - data: arrValue, - backgroundColor: arrColors, - borderWidth: 0, - pointStyle: 'rectRounded' - } - ] - }); + setChartData({ + labels: arrArea, + datasets: [ + { + data: arrValue, + backgroundColor: arrColors, + borderWidth: 0, + pointStyle: 'rectRounded' + } + ] + }); + } else { + setChartData({}); + } }; - useEffect(() => { - chartDataInit(); - }, [props.data]); - return (
- {titles[`${props.title}`]} - {/*
- - -
*/} + {titles[`${title}`]}
- {props.title === 'flightsRegion' && ( + {title === 'flightsRegion' && ( <>
props.setStartDate(date)} + selected={startDate} + onChange={date => setStartDate(date)} dateFormat='yyy / MMMM' showMonthYearPicker showFullMonthYearPicker @@ -134,32 +127,16 @@ export const DashboardStcsArea = props => {
- + {Object.keys(chartData).length > 0 ? ( + + ) : ( +
+

표시할 데이터가 없습니다.

+
+ )}
- {props.data?.map((item, index) => { + {data?.map((item, index) => { return (
@@ -167,23 +144,6 @@ export const DashboardStcsArea = props => { {item.typeCd} ({item.count})
- - {/*
- - 인천광역시 -
-
- - 충청북도 -
-
- - 세종시 -
-
- - 제주도 -
*/}
); })} diff --git a/src/components/dashboard/DashboardStcsDay.js b/src/components/dashboard/DashboardStcsDay.js index 559b9bd..ce5b54b 100644 --- a/src/components/dashboard/DashboardStcsDay.js +++ b/src/components/dashboard/DashboardStcsDay.js @@ -1,7 +1,7 @@ import 'react-datepicker/dist/react-datepicker.css'; import { ko } from 'date-fns/esm/locale'; import { Plus } from 'react-feather'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { Bar } from 'react-chartjs-2'; import DatePicker from 'react-datepicker'; import { Calendar } from 'react-feather'; @@ -61,7 +61,7 @@ const options = { }, ticks: { stepSize: 1, - // min: 0, + min: 0, // max: 400, fontColor: '#6e6b7bs' } @@ -73,33 +73,36 @@ const options = { export const DashboardStcsDay = ({ startDate, setStartDate, data }) => { const [chartData, setChartData] = useState({}); - const chartDataInit = () => { - let arrDay = []; - let arrValue = []; + useEffect(() => { + chartDataInit(); + }, [data]); - data?.map(item => { - arrDay.push(item.typeCd); - arrValue.push(item.count); - }); + const chartDataInit = () => { + if (data.length > 0) { + let arrDay = []; + let arrValue = []; - setChartData({ - labels: arrDay, + data.map(item => { + arrDay.push(item.typeCd); + arrValue.push(item.count); + }); - datasets: [ - { - data: arrValue, - backgroundColor: successColorShade, - borderColor: 'transparent', - barThickness: 15 - } - ] - }); + setChartData({ + labels: [...arrDay], + datasets: [ + { + data: [...arrValue], + backgroundColor: successColorShade, + borderColor: 'transparent', + barThickness: 15 + } + ] + }); + } else { + setChartData({}); + } }; - useEffect(() => { - chartDataInit(); - }, [data]); - return ( @@ -112,7 +115,9 @@ export const DashboardStcsDay = ({ startDate, setStartDate, data }) => { setStartDate(date)} + onChange={date => { + setStartDate(date); + }} dateFormat='yyy / MMMM' showMonthYearPicker showFullMonthYearPicker @@ -129,31 +134,13 @@ export const DashboardStcsDay = ({ startDate, setStartDate, data }) => {
- + {Object.keys(chartData).length > 0 ? ( + + ) : ( +
+

표시할 데이터가 없습니다.

+
+ )}
diff --git a/src/containers/main/dash/MainDashContainer.js b/src/containers/main/dash/MainDashContainer.js index 0f7b981..361a173 100644 --- a/src/containers/main/dash/MainDashContainer.js +++ b/src/containers/main/dash/MainDashContainer.js @@ -23,6 +23,9 @@ export const MainDashContainer = () => { state => [state.mainDashState.dashboardData], shallowEqual ); + const { stcsDayList, stcsAreaList } = useSelector( + state => state.mainDashState + ); const { user } = useSelector(state => state.authState, shallowEqual); const [dayStartDate, setDayStartDate] = useState(new Date()); const [areaStartDate, setAreaStartDate] = useState(new Date()); @@ -60,13 +63,10 @@ export const MainDashContainer = () => { ); }; - const handlerStcsDayParam = useCallback( - date => { - setDayStartDate(date); - handlerStcsDaySearch(date); - }, - [dayStartDate] - ); + const handlerStcsDayParam = date => { + setDayStartDate(date); + handlerStcsDaySearch(date); + }; const handlerStcsAreaParam = date => { setAreaStartDate(date); @@ -85,13 +85,9 @@ export const MainDashContainer = () => { history.push(url); }; useEffect(() => { - dispatch( - Actions.DASHBOARD_DATA.request({ - stcsDay: moment(dayStartDate).format('YYYY-MM') - }) - ); - // handlerStcsDaySearch(dayStartDate); - // handlerStcsAreaSearch(areaStartDate); + dispatch(Actions.DASHBOARD_DATA.request()); + handlerStcsDaySearch(dayStartDate); + handlerStcsAreaSearch(areaStartDate); // handlerGroupSearch(); // handlerDronSearch(); }, []); @@ -136,7 +132,7 @@ export const MainDashContainer = () => { @@ -148,10 +144,9 @@ export const MainDashContainer = () => { - { // top5 지역 별 바행횟수 @@ -159,7 +154,7 @@ export const MainDashContainer = () => { diff --git a/src/modules/main/dash/apis/mainDashApi.ts b/src/modules/main/dash/apis/mainDashApi.ts index 1ea9c15..e6a80b4 100644 --- a/src/modules/main/dash/apis/mainDashApi.ts +++ b/src/modules/main/dash/apis/mainDashApi.ts @@ -8,7 +8,7 @@ export const mainDashAPI = { addQueryPrefix: true, arrayFormat: 'repeat' }); - console.log(data); + return await axios.get(`api/main/dash/stcs/day${queryString}`); }, stcsArea: async (data: string) => { @@ -42,5 +42,8 @@ export const mainDashAPI = { }, dailyFlightCount: async () => { return await axios.get('api/main/dash/stcs/dailyflight'); + }, + dronSituation: async () => { + return await axios.get('api/main/dash/stcs/dron-flight/'); } }; diff --git a/src/modules/main/dash/models/mainDashModel.ts b/src/modules/main/dash/models/mainDashModel.ts index f6ab293..ad91e7e 100644 --- a/src/modules/main/dash/models/mainDashModel.ts +++ b/src/modules/main/dash/models/mainDashModel.ts @@ -12,6 +12,17 @@ export enum EDateType { tomorrow = '명일' } +export enum EDronStatus { + inFlight = '비행 중', + flightComplete = '비행 완료', + flightWaiting = '비행 대기 중 ' +} + +export interface IDronSituation { + typeCd: string; + count: number; +} + export interface IDailyFlightPlan { dateType: string; plan: number; @@ -61,10 +72,10 @@ export interface DronListData { } export interface IDashBoardData { - stcsDayList: StcsDayData[]; dailyFlightWarn: IDailyFlightWarn[]; dailyFlightCount: IDailyFlightCount[]; dailyFlightPlan: IDailyFlightPlan[]; + dronSituation: IDronSituation[]; } export interface IDashBoardRq { diff --git a/src/modules/main/dash/sagas/mainDashSaga.ts b/src/modules/main/dash/sagas/mainDashSaga.ts index accef1f..a9d7688 100644 --- a/src/modules/main/dash/sagas/mainDashSaga.ts +++ b/src/modules/main/dash/sagas/mainDashSaga.ts @@ -1,5 +1,6 @@ import { call, put, takeEvery, all } from '@redux-saga/core/effects'; import { ActionType } from 'typesafe-actions'; +import { EDronStatus } from '../models/mainDashModel'; import * as MessageActions from '../../../comn/message/actions/comnMessageAction'; import * as Actions from '../actions/mainDashAction'; import * as Apis from '../apis/mainDashApi'; @@ -121,20 +122,17 @@ function* dashboardData( action: ActionType ) { try { - const params = action.payload; - /* - stcsDayList: 일 별 비행횟수 통계 dailyFlightPlan: 일일 비행계획 현황 통계 dailyFlightCount: 일일 비행건수 현황 통계 dailyFlighWarn: 일일 비정상상황 현황 통계 */ - const { stcsDayList, dailyFlighWarn, dailyFlightPlan, dailyFlightCount } = + const { dailyFlighWarn, dailyFlightPlan, dailyFlightCount, dronSituation } = 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) + dailyFlightCount: call(Apis.mainDashAPI.dailyFlightCount), + dronSituation: call(Apis.mainDashAPI.dronSituation) }); // if (errorCode) { @@ -150,15 +148,24 @@ function* dashboardData( // return; // } + let dronSituationArr: { typeCd: string; count: number }[] = []; + + Object.keys(dronSituation.data).forEach(i => { + dronSituationArr.push({ + typeCd: EDronStatus[`${i}`], + count: Number(dronSituation.data[i]) + }); + }); + yield put( Actions.DASHBOARD_DATA.success({ - stcsDayList: stcsDayList.data, dailyFlightWarn: dailyFlighWarn.data.slice( 0, dailyFlightPlan.data.length - 1 ), dailyFlightCount: dailyFlightCount.data, - dailyFlightPlan: dailyFlightPlan.data + dailyFlightPlan: dailyFlightPlan.data, + dronSituation: dronSituationArr }) ); } catch (error) {