Merge branch 'master' of http://gitea.palntour.com/pav/pav-fe-kac

src/assets/css/custom.css

@@ -1118,7 +1118,7 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .statistics-table tr th, .statistics-table tr td{vertical-align:middle;background:#fff;}
 .statistics-table tr + tr{border-top:1px solid #ddd}
 .statistics-table tr span{display:block;font-size:0.875rem}
-.statistics-table tr th{background:#f4f4f4;text-align:center;padding:1rem 0.4rem;width:90px;border-right:1px solid #ddd}
+.statistics-table tr th{background:#ddd;text-align:center;padding:1rem 0.4rem;width:90px;border-right:1px solid #ddd}
 .statistics-table tr th svg{font-size: 20px;margin-bottom:6px}
 .statistics-table tr th span{font-weight:500;line-height:1.3}
 .statistics-table tr td{padding:0.4rem 0.8rem}
@@ -1131,3 +1131,8 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 	background: #ffefec!important;
 	border-color: #ffefec!important;
 	box-shadow: -5px 0 0 #ffefec, 5px 0 0 #ffefec!important; }
+
+.statistics	.chart-wrap .card {min-height:520px}
+.statistics .card .card-title{font-size:1.125rem}
+.statistics .select-date-wrap{padding-left:1rem;padding-right:1rem}
+.statistics .select-date + .select-date{margin-left:0.5rem}

src/components/laanc/map/FlightArea.js

@@ -41,6 +41,7 @@ import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone';
 import { WeatherContainer } from '../../../containers/basis/flight/plan/WeatherContainer';
 import { initFlightBas } from '../../../modules/laanc/models/laancModels';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
+import LaancDrawModal from './LaancDrawModal';
 
 const initialAddData = {
   isAddable: false,
@@ -72,6 +73,12 @@ export default function FlightArea({
   const [previewLayer, setPreviewLayer] = useState();
   const [formModal, setFormModal] = useState(false);
 
+  const [modal, setModal] = useState({
+    title: '',
+    desc: '',
+    isOpen: false
+  });
+
   const [isSaveable, setIsSaveable] = useState(false);
   const [addData, setAddData] = useState(initialAddData);
 
@@ -169,8 +176,27 @@ export default function FlightArea({
     });
   };
 
+  const handlerModal = () => {
+    setModal(!modal);
+  };
+
   const handlerDrawType = val => {
+    if (drawObj.getMode().includes('draw')) {
+      // alert('비행구역설정 완료 후 타입을 변경해주세요.');
+      setModal({
+        title: '비행 구역 설정',
+        desc: (
+          <>
+            비행구역 설정이 완료되지 않았습니다.
+            <br />
+            비행구역 설정 완료 후 타입 변경 부탁드립니다.
+          </>
+        ),
+        isOpen: true
+      });
+    } else {
       dispatch(drawTypeChangeAction(val));
+    }
   };
 
   const handlerSave = async () => {
@@ -564,6 +590,7 @@ export default function FlightArea({
               addData={addData}
               setSaveData={setSaveData}
               handlerSaveElev={handlerSaveElev}
+              setModal={setModal}
             />
           </ModalBody>
           <ModalFooter>
@@ -657,6 +684,7 @@ export default function FlightArea({
           </ModalFooter>
         </Modal>
       ) : null}
+      {modal ? <LaancDrawModal modal={modal} handler={handlerModal} /> : null}
       <Modal
         isOpen={formModal}
         toggle={handlerWeather}

src/components/laanc/map/LaancAreaMap.js

@@ -32,7 +32,6 @@ import geoJson from '../../map/geojson/airArea.json';
 import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone';
 import LaancMapSearch from './LaancMapSearch';
 import { LaancDrawControl } from './LaancDrawControl';
-import LaancModal from '../../map/mapbox/draw/LaancModal';
 
 export default function LaancAreaMap({
   centeredModal,
@@ -43,7 +42,8 @@ export default function LaancAreaMap({
   addData,
   handlerInitCoordinates,
   setSaveData,
-  handlerSaveElev
+  handlerSaveElev,
+  setModal
 }) {
   const dispatch = useDispatch();
   const mapControl = useSelector(state => state.controlMapReducer);
@@ -57,11 +57,11 @@ export default function LaancAreaMap({
   );
 
   const [number, setNumber] = useState(0);
-  const [modal, setModal] = useState({
-    title: '',
-    desc: '',
-    isOpen: false
-  });
+  // const [modal, setModal] = useState({
+  //   title: '',
+  //   desc: '',
+  //   isOpen: false
+  // });
 
   const [detailLayer, setDetailLayer] = useState();
 
@@ -315,9 +315,9 @@ export default function LaancAreaMap({
     dispatch(AREA_COORDINATE_LIST_SAVE(areaList));
   };
 
-  const handlerModal = () => {
-    setModal(!modal);
-  };
+  // const handlerModal = () => {
+  //   setModal(!modal);
+  // };
 
   return (
     <Card className='mb-0'>
@@ -325,9 +325,6 @@ export default function LaancAreaMap({
         <div style={{ position: 'relative' }}>
           <LaancMapSearch mapObject={mapObject} />
           <div className='d-flex coords-wrap'>
-            {mapObject && viewCoordObj.length > 0 ? (
-              <div className='coords-box'>
-                {/* {console.log(viewCoordObj, '----')} */}
             {viewCoordObj?.map((obj, i) => {
               let coord =
                 obj.properties.id === 'LINE'
@@ -341,6 +338,7 @@ export default function LaancAreaMap({
 
               return (
                 <div
+                  className='coords-box'
                   key={i}
                   onClick={() => {
                     const allObj = drawObj
@@ -352,6 +350,7 @@ export default function LaancAreaMap({
                     });
                   }}
                 >
+                  <div>
                     <h6 className='ti'>비행구역 {i + 1}</h6>
                     <div className='coords-box-scroll'>
                       {coord?.map((co, idx) => {
@@ -387,11 +386,11 @@ export default function LaancAreaMap({
                       })}
                     </div>
                   </div>
+                </div>
               );
             })}
           </div>
-            ) : null}
-          </div>
+
           <div
             id='detail'
             ref={mapContainer}
@@ -417,9 +416,9 @@ export default function LaancAreaMap({
                 handlerSaveElev={handlerSaveElev}
               />
               <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
-              {modal ? (
+              {/* {modal ? (
                 <LaancModal modal={modal} handler={handlerModal} />
-              ) : null}
+              ) : null} */}
             </>
           ) : null}
         </div>

src/components/laanc/map/LaancDrawControl.js

@@ -357,8 +357,10 @@ export const LaancDrawControl = props => {
     const remainObj = drawObj
       .getAll()
       .features.filter(o => o.properties.id !== 'BUFFER' && o.id !== id);
+
     if (remainObj.length === 0) {
       props.handlerSaveCheck(false);
+      dispatch(drawTypeChangeAction('RESET'));
     } else {
       props.handlerSaveCheck(true);
     }

src/components/laanc/map/LaancDrawModal.js

@@ -1,6 +1,6 @@
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
-export default function LaancModal({ modal, handler }) {
+export default function LaancDrawModal({ modal, handler }) {
   const handlerDroneOneStop = () => {
     window.open('https://drone.onestop.go.kr/', '드론원스탑');
     handler();

src/views/statistics/FlightView.js

@@ -7,20 +7,182 @@ import {
   Col,
   Row,
   Card,
+  CardHeader,
+  CardTitle,
   CardBody,
   FormGroup,
   Input,
   CustomInput,
   Label
 } from 'reactstrap';
-import { Search } from 'react-feather';
+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 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 (
     <CustomMainLayout title={titleName}>
-      <div className='pal-card-box'>
+      <div className='pal-card-box statistics'>
         <div>
           <Row>
             <Col md='4'>
@@ -160,6 +322,90 @@ export default function Flight() {
             </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>
   );