From 83e7e1153f710780f5b4868d570de06c8c788063 Mon Sep 17 00:00:00 2001 From: hhjk00 Date: Mon, 13 Nov 2023 13:48:33 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8B=A4=EC=A0=81=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../statistics/FlightPerformanceContainer.js | 485 ++++++++++++++++++ src/navigation/statistics/index.js | 6 + src/router/routes/RouteStatistics.js | 6 + src/views/statistics/FlightPerformanceView.js | 8 + 4 files changed, 505 insertions(+) create mode 100644 src/containers/statistics/FlightPerformanceContainer.js create mode 100644 src/views/statistics/FlightPerformanceView.js diff --git a/src/containers/statistics/FlightPerformanceContainer.js b/src/containers/statistics/FlightPerformanceContainer.js new file mode 100644 index 00000000..d05add29 --- /dev/null +++ b/src/containers/statistics/FlightPerformanceContainer.js @@ -0,0 +1,485 @@ +import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; +import { + Button, + Col, + Row, + Card, + CardHeader, + CardTitle, + CardBody, + CustomInput +} from 'reactstrap'; +import { Search } from 'react-feather'; +import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; +import { Bar, Doughnut } from 'react-chartjs-2'; +import { useCallback, useEffect, useState } from 'react'; +import { useDispatch } from 'react-redux'; +import * as StcsActions from '../../modules/statistics/actions'; + +export default function FlightPerformanceContainer({ + tooltipShadow, + gridLineColor, + labelColor +}) { + const dispatch = useDispatch(); + + const [searchType, setSearchType] = useState({ + category: '비행실적', + dateType: 'year', + year: new Date().getFullYear(), + month: new Date().getMonth() + 1, + day: new Date().getDate() + }); + const [dateLists, setDateLists] = useState({ + month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], + day: [] + }); + + const titleName = '비행 실적 통계'; + + useEffect(() => { + const { year, month } = searchType; + const lastDay = new Date(year, Number(month), 0).getDate(); + const dayList = Array.from({ length: lastDay }, (_, index) => index + 1); + + setDateLists({ ...dateLists, day: dayList }); + }, [searchType.month]); + + // 검색조건 handler + const handleChangeSearchType = useCallback( + (type, val) => { + setSearchType({ + ...searchType, + [type]: val + }); + }, + [searchType] + ); + + const options = { + elements: { + rectangle: { + borderWidth: 2, + borderSkipped: 'bottom' + } + }, + responsive: true, + maintainAspectRatio: false, + responsiveAnimationDuration: 500, + legend: { + display: false + }, + tooltips: { + // Updated default tooltip UI + shadowOffsetX: 1, + shadowOffsetY: 1, + shadowBlur: 8, + shadowColor: tooltipShadow, + backgroundColor: '#fff', + titleFontColor: '#000', + bodyFontColor: '#000' + }, + scales: { + xAxes: [ + { + display: true, + gridLines: { + display: true, + color: gridLineColor, + zeroLineColor: gridLineColor + }, + scaleLabel: { + display: false + }, + ticks: { + fontColor: labelColor + } + } + ], + yAxes: [ + { + display: true, + gridLines: { + color: gridLineColor, + zeroLineColor: gridLineColor + }, + ticks: { + stepSize: 100, + min: 0, + max: 400, + fontColor: labelColor + } + } + ] + } + }, + data = { + labels: [ + '7/12', + '8/12', + '9/12', + '10/12', + '11/12', + '12/12', + '13/12', + '14/12', + '15/12', + '16/12', + '17/12' + ], + datasets: [ + { + data: [275, 90, 190, 205, 125, 85, 55, 87, 127, 150, 230, 280, 190], + backgroundColor: '#00bcd4', + borderColor: '#00bcd4', + barThickness: 15 + } + ] + }; + + const options2 = { + responsive: true, + maintainAspectRatio: true, + responsiveAnimationDuration: 500, + cutoutPercentage: 60, + legend: { + position: 'bottom', + labels: { + usePointStyle: true, + padding: 18, + boxWidth: 8, + fontColor: labelColor, + fontSize: 14, + fontWeight: 500, + fontFamily: ['Rubik', 'Montserrat', 'NotoSansKR'] + } + }, + tooltips: { + callbacks: { + label(tooltipItem, data) { + const label = data.datasets[0].labels[tooltipItem.index] || '', + value = data.datasets[0].data[tooltipItem.index]; + const output = ` ${label} : ${value} %`; + return output; + } + }, + shadowOffsetX: 1, + shadowOffsetY: 1, + shadowBlur: 8, + shadowColor: tooltipShadow, + backgroundColor: '#fff', + titleFontColor: '#000', + bodyFontColor: '#000' + } + }, + data2 = { + labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], + datasets: [ + { + labels: ['PA0001', 'PA0002', 'PA0003', 'PA0004', 'PA0005'], + data: [10, 20, 30, 40, 80], + // 레드버전 + // backgroundColor: [ + // '#ffe8d1', + // '#ffb59e', + // '#f0826b', + // '#Bd4f38', + // '#8a1c05' + // ], + + backgroundColor: [ + '#ccffff', + '#99ffff', + '#66ffff', + '#33efff', + '#00bcd4' + ], + borderWidth: 0, + pointStyle: 'rectRounded' + } + ] + }; + + return ( + +
+
+ + +
+ + + + + + + + + +
+ + + + 비행 실적 + PA0001 + + 년 + 8일 10시간 35분 12초 +
+ 월 + 1일 35분 12초 + + 일 + 35분 12초 +
+
+ + +
+ + + + + + + + + +
+ + + + 비행 계획 + PA0002 + + 년 + 10,845m +
+ 월 + 1,201m + + 일 + 53m +
+
+ + +
+ + + + + + + + + +
+ + + + 비행 승인 + PA0002 + + 년 + 1,024,845건 +
+ 월 + 111,201건 + + 일 + 153건 +
+
+ + +
+
+ + +
+
+

검색조건

+
+ {/*
+ + + 검색 + +
*/} +
+ + +
+
+
+
+
검색조건
+
+
+ + + + handleChangeSearchType( + 'category', + e.target.value + ) + } + > + + + + + + +
+
+
+
+
+
+ + + + +
+
+ + + + + {searchType.category} 통계 +
+ +
+ + handleChangeSearchType('dateType', e.target.value) + } + > + + + + + +
+ + {searchType.dateType === 'month' || + searchType.dateType === 'day' || + searchType.dateType === 'one-day' ? ( + <> +
+ + handleChangeSearchType('year', e.target.value) + } + > + + +
+ {searchType.dateType === 'day' || + searchType.dateType === 'one-day' ? ( +
+ + handleChangeSearchType( + 'month', + e.target.value + ) + } + > + {dateLists.month.map(i => ( + + ))} + +
+ ) : null} + {searchType.dateType === 'one-day' ? ( +
+ + handleChangeSearchType('day', e.target.value) + } + > + {dateLists.day.map(i => ( + + ))} + +
+ ) : null} + + ) : null} + + {/* + */} +
+ + +
+ +
+ + + + + + + {searchType.category} TOP5 + + +
+ +
+ {/*
+
+
*/} + + + + +
+
+ + ); +} diff --git a/src/navigation/statistics/index.js b/src/navigation/statistics/index.js index f46b83d1..a42eb804 100644 --- a/src/navigation/statistics/index.js +++ b/src/navigation/statistics/index.js @@ -15,5 +15,11 @@ export default [ type: 'item', title: '비정상상황 통계', navLink: '/statistics/abnormal' + }, + { + id: 'statistics_001_03', + type: 'item', + title: '비행 실적', + navLink: '/statistics/performance' } ]; diff --git a/src/router/routes/RouteStatistics.js b/src/router/routes/RouteStatistics.js index 4447a7c6..d0a4deba 100644 --- a/src/router/routes/RouteStatistics.js +++ b/src/router/routes/RouteStatistics.js @@ -10,6 +10,12 @@ const RouteStatistics = [ component: lazy(() => import('../../views/statistics/AbnormalSituationView') ) + }, + { + path: '/statistics/performance', + component: lazy(() => + import('../../views/statistics/FlightPerformanceView') + ) } ]; diff --git a/src/views/statistics/FlightPerformanceView.js b/src/views/statistics/FlightPerformanceView.js new file mode 100644 index 00000000..3d128539 --- /dev/null +++ b/src/views/statistics/FlightPerformanceView.js @@ -0,0 +1,8 @@ +import '../../assets/css/custom.css'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; +import '@styles/react/libs/tables/react-dataTable-component.scss'; +import FlightPerformanceContainer from '../../containers/statistics/FlightPerformanceContainer'; + +export default function FlightPerformanceView() { + return ; +}