pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행 통계 container 분할

pull/2/head
hhjk00 11 months ago
parent
3a586c448e
commit
e0e927cae3
3 changed files with 403 additions and 408 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 399
      src/containers/statistics/FlightContainer.js
  2. 2
      src/views/statistics/AbnormalSituationView.js
  3. 410
      src/views/statistics/FlightView.js

399
src/containers/statistics/FlightContainer.js
Unescape View File

@ -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 (
<CustomMainLayout title={titleName}>
<div className='pal-card-box statistics'>
<div>
<Row>
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowSpan='2'>
<span>
<FcAlarmClock />
</span>
<span>총 비행시간</span>
<span>PA0001</span>
</th>
<td colSpan='3'>
<span className='date'>년</span>
<span className='date-data'>8일 10시간 35분 12초</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>1일 35분 12초</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>35분 12초</span>
</td>
</tr>
</table>
</div>
</Col>
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowSpan='2'>
<span>
<FcWorkflow />
</span>
<span>총 비행거리</span>
<span>PA0002</span>
</th>
<td colSpan='3'>
<span className='date'>년</span>
<span className='date-data'>10,845m</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>1,201m</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>53m</span>
</td>
</tr>
</table>
</div>
</Col>
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowSpan='2'>
<span>
<FcBarChart />
</span>
<span>총 비행횟수</span>
<span>PA0002</span>
</th>
<td colSpan='3'>
<span className='date'>년</span>
<span className='date-data'>1,024,845건</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>111,201건</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>153건</span>
</td>
</tr>
</table>
</div>
</Col>
</Row>
</div>
<div>
<Row>
<Col>
<div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<div>
<h4>검색조건</h4>
</div>
<div className='d-flex align-items-center'>
<Button.Ripple color='primary' size='sm'>
<Search size={16} />
검색
</Button.Ripple>
</div>
</div>
<Card>
<CardBody className='pal-card-body'>
<div className='search-cont'>
<dl>
<dt>
<div className='search-box'>
<div className='search-list-ti'>검색조건</div>
<div className='search-list'>
<div className='search-list-cont'>
<Row>
<Col className='list-input' md='4' sm='12'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
>
<option>비행시간</option>
<option>비행거리</option>
<option>비행횟수</option>
</CustomInput>
</Col>
</Row>
</div>
</div>
</div>
</dt>
</dl>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
<div>
<Row className='mt-2'>
<Col md='8' className='chart-wrap'>
<Card>
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
<CardTitle tag='h4'>비행 시간 통계</CardTitle>
<div className='select-date-wrap'>
<Row>
<div className='select-date'>
<CustomInput inline type='select' id='' bsSize='sm'>
<option>년</option>
<option>월</option>
<option>일</option>
<option>시간</option>
</CustomInput>
</div>
<div className='select-date'>
<CustomInput inline type='select' id='' bsSize='sm'>
<option>2023</option>
<option>2022</option>
<option>2021</option>
</CustomInput>
</div>
<div className='select-date'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
value='월'
>
<option>1</option>
<option>1</option>
<option>1</option>
</CustomInput>
</div>
<div className='select-date'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
value='일'
>
<option>1</option>
<option>1</option>
<option>1</option>
</CustomInput>
</div>
</Row>
{/* <Calendar size={14} />
<Flatpickr
options={{
mode: 'range',
defaultDate: ['2019-05-01', '2019-05-10']
}}
className='form-control flat-picker bg-transparent border-0 shadow-none'
/> */}
</div>
</CardHeader>
<CardBody>
<div style={{ height: '400px' }}>
<Bar data={data} options={options} height={400} />
</div>
</CardBody>
</Card>
</Col>
<Col md='4' className='chart-wrap'>
<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>
</CardHeader>
<CardBody>
<div style={{ height: '275px' }}>
<Doughnut data={data2} options={options2} height={275} />
</div>
{/* <div className='d-flex justify-content-between mt-3 mb-1'>
<div className='d-flex align-items-center'></div>
</div> */}
</CardBody>
</Card>
</Col>
</Row>
</div>
</div>
</CustomMainLayout>
);
}

2
src/views/statistics/AbnormalSituationView.js
Unescape View File

@ -3,6 +3,6 @@ import '@styles/react/libs/flatpickr/flatpickr.scss';
import '@styles/react/libs/tables/react-dataTable-component.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss';
import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
export default function AbnormalSituation() { export default function AbnormalSituationView() {
return <CustomMainLayout></CustomMainLayout>; return <CustomMainLayout></CustomMainLayout>;
} }

410
src/views/statistics/FlightView.js
Unescape View File

@ -1,412 +1,8 @@
import '../../assets/css/custom.css'; import '../../assets/css/custom.css';
import '@styles/react/libs/flatpickr/flatpickr.scss'; import '@styles/react/libs/flatpickr/flatpickr.scss';
import '@styles/react/libs/tables/react-dataTable-component.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss';
import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; import FlightContainer from '../../containers/statistics/FlightContainer';
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';
export default function Flight({ export default function FlightView() {
tooltipShadow, return <FlightContainer />;
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 (
<CustomMainLayout title={titleName}>
<div className='pal-card-box statistics'>
<div>
<Row>
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowspan='2'>
<span>
<FcAlarmClock />
</span>
<span>총 비행시간</span>
<span>PA0001</span>
</th>
<td colspan='3'>
<span className='date'>년</span>
<span className='date-data'>8일 10시간 35분 12초</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>1일 35분 12초</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>35분 12초</span>
</td>
</tr>
</table>
</div>
</Col>
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowspan='2'>
<span>
<FcWorkflow />
</span>
<span>총 비행거리</span>
<span>PA0002</span>
</th>
<td colspan='3'>
<span className='date'>년</span>
<span className='date-data'>10,845m</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>1,201m</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>53m</span>
</td>
</tr>
</table>
</div>
</Col>
<Col md='4'>
<div>
<table className='statistics-table'>
<tr>
<th rowspan='2'>
<span>
<FcBarChart />
</span>
<span>총 비행횟수</span>
<span>PA0002</span>
</th>
<td colspan='3'>
<span className='date'>년</span>
<span className='date-data'>1,024,845건</span>
</td>
</tr>
<tr>
<td>
<span className='date'>월</span>
<span className='date-data'>111,201건</span>
</td>
<td>
<span className='date'>일</span>
<span className='date-data'>153건</span>
</td>
</tr>
</table>
</div>
</Col>
</Row>
</div>
<div>
<Row>
<Col>
<div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<div>
<h4>검색조건</h4>
</div>
<div className='d-flex align-items-center'>
<Button.Ripple color='primary' size='sm'>
<Search size={16} />
검색
</Button.Ripple>
</div>
</div>
<Card>
<CardBody className='pal-card-body'>
<div className='search-cont'>
<dl>
<dt>
<div className='search-box'>
<div className='search-list-ti'>검색조건</div>
<div className='search-list'>
<div className='search-list-cont'>
<Row>
<Col className='list-input' md='4' sm='12'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
>
<option>비행시간</option>
<option>비행거리</option>
<option>비행횟수</option>
</CustomInput>
</Col>
</Row>
</div>
</div>
</div>
</dt>
</dl>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
<div>
<Row className='mt-2'>
<Col md='8' className='chart-wrap'>
<Card>
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
<CardTitle tag='h4'>비행 시간 통계</CardTitle>
<div className='select-date-wrap'>
<Row>
<div className='select-date'>
<CustomInput inline type='select' id='' bsSize='sm'>
<option>년</option>
<option>월</option>
<option>일</option>
<option>시간</option>
</CustomInput>
</div>
<div className='select-date'>
<CustomInput inline type='select' id='' bsSize='sm'>
<option>2023</option>
<option>2022</option>
<option>2021</option>
</CustomInput>
</div>
<div className='select-date'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
value='월'
>
<option>1</option>
<option>1</option>
<option>1</option>
</CustomInput>
</div>
<div className='select-date'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
value='일'
>
<option>1</option>
<option>1</option>
<option>1</option>
</CustomInput>
</div>
</Row>
{/* <Calendar size={14} />
<Flatpickr
options={{
mode: 'range',
defaultDate: ['2019-05-01', '2019-05-10']
}}
className='form-control flat-picker bg-transparent border-0 shadow-none'
/> */}
</div>
</CardHeader>
<CardBody>
<div style={{ height: '400px' }}>
<Bar data={data} options={options} height={400} />
</div>
</CardBody>
</Card>
</Col>
<Col md='4' className='chart-wrap'>
<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>
</CardHeader>
<CardBody>
<div style={{ height: '275px' }}>
<Doughnut data={data2} options={options2} height={275} />
</div>
{/* <div className='d-flex justify-content-between mt-3 mb-1'>
<div className='d-flex align-items-center'></div>
</div> */}
</CardBody>
</Card>
</Col>
</Row>
</div>
</div>
</CustomMainLayout>
);
} }

Write Preview
Loading…
Cancel
Save