From e0e927cae3b88f278abc9f6bb4062260516b99ea Mon Sep 17 00:00:00 2001 From: hhjk00 Date: Tue, 7 Nov 2023 16:27:14 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=ED=86=B5=EA=B3=84=20conta?= =?UTF-8?q?iner=20=EB=B6=84=ED=95=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/statistics/FlightContainer.js | 399 +++++++++++++++++ src/views/statistics/AbnormalSituationView.js | 2 +- src/views/statistics/FlightView.js | 410 +----------------- 3 files changed, 403 insertions(+), 408 deletions(-) create mode 100644 src/containers/statistics/FlightContainer.js diff --git a/src/containers/statistics/FlightContainer.js b/src/containers/statistics/FlightContainer.js new file mode 100644 index 0000000..460905e --- /dev/null +++ b/src/containers/statistics/FlightContainer.js @@ -0,0 +1,399 @@ +import '../../assets/css/custom.css'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; +import '@styles/react/libs/tables/react-dataTable-component.scss'; +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, Polar } from 'react-chartjs-2'; + +export default function FlightContainer({ + tooltipShadow, + gridLineColor, + labelColor +}) { + const titleName = '비행 통계'; + + 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건 +
+
+ + +
+
+ + +
+
+

검색조건

+
+
+ + + 검색 + +
+
+ + +
+
+
+
+
검색조건
+
+
+ + + + + + + + + +
+
+
+
+
+
+ + + + +
+
+ + + + + 비행 시간 통계 +
+ +
+ + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+ + {/* + */} +
+ + +
+ +
+ + + + + + + 비행시간 TOP5 + + +
+ +
+ {/*
+
+
*/} + + + + +
+
+ + ); +} diff --git a/src/views/statistics/AbnormalSituationView.js b/src/views/statistics/AbnormalSituationView.js index bf24a79..cf49d1f 100644 --- a/src/views/statistics/AbnormalSituationView.js +++ b/src/views/statistics/AbnormalSituationView.js @@ -3,6 +3,6 @@ import '@styles/react/libs/flatpickr/flatpickr.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss'; import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; -export default function AbnormalSituation() { +export default function AbnormalSituationView() { return ; } diff --git a/src/views/statistics/FlightView.js b/src/views/statistics/FlightView.js index fc1d41e..77fbfd2 100644 --- a/src/views/statistics/FlightView.js +++ b/src/views/statistics/FlightView.js @@ -1,412 +1,8 @@ import '../../assets/css/custom.css'; import '@styles/react/libs/flatpickr/flatpickr.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss'; -import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; -import { - Button, - Col, - Row, - Card, - CardHeader, - CardTitle, - CardBody, - FormGroup, - Input, - CustomInput, - Label -} from 'reactstrap'; -import { - Search, - Calendar, - Monitor, - Tablet, - ArrowDown, - ArrowUp -} from 'react-feather'; -import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; -import { Bar, Doughnut, Polar } from 'react-chartjs-2'; -import Flatpickr from 'react-flatpickr'; +import FlightContainer from '../../containers/statistics/FlightContainer'; -export default function Flight({ - tooltipShadow, - gridLineColor, - labelColor, - successColorShade, - warningLightColor, - primary -}) { - const titleName = '비행 통계'; - 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건 -
-
- - -
-
- - -
-
-

검색조건

-
-
- - - 검색 - -
-
- - -
-
-
-
-
검색조건
-
-
- - - - - - - - - -
-
-
-
-
-
- - - - -
-
- - - - - 비행 시간 통계 -
- -
- - - - - - -
-
- - - - - -
-
- - - - - -
-
- - - - - -
- - {/* - */} -
- - -
- -
- - - - - - - 비행시간 TOP5 - - -
- -
- {/*
-
-
*/} - - - - -
-
- - ); +export default function FlightView() { + return ; }