pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행 승인 신청 결과 기능 추가

master
sanguu516 5 months ago
parent
ce380dcfa7
commit
75ef99ef19
6 changed files with 1444 additions and 571 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/crud/grid/GridDatatable.js
  2. 64
      src/components/flight/FlightApprovalsReport.js
  3. 366
      src/components/flight/FlightApprovalsTable.js
  4. 317
      src/containers/flight/flightApprovalsContainer.js
  5. 1
      src/redux/features/laanc/laancState.ts
  6. 1257
      src/views/design/tempCodeRunnerFile.js

10
src/components/crud/grid/GridDatatable.js
Unescape View File

@ -1,20 +1,17 @@
import DataTable from 'react-data-table-component';
import { ChevronDown } from 'react-feather';
import { useLayoutEffect } from 'react';
import { useEffect } from 'react';
import { EMPTY_MESSAGE } from '@src/configs/msgConst';
// DataTable lib 참고
// https://react-data-table-component.netlify.app/?path=/docs/api-props--page
export const GridDatabase = props => {
useLayoutEffect(() => {
useEffect(() => {
const el = document.querySelectorAll('.sc-AxhCb.sc-AxmLO');
console.log('@?@?@?');
console.log(el);
for (let i = 0; i < el.length; i++) {
console.log(el);
el[i].id = 'expandableRows';
}
}, []);
}, [props.data]);
return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
<div className='d-flex justify-content-center align-items-center h-100'>
@ -35,7 +32,6 @@ export const GridDatabase = props => {
responsive={true}
sortIcon={<ChevronDown />}
className='react-dataTable pal-dateTable'
onRowClicked={props.handleRowClick}
paginationDefaultPage={props.page || 1}
// defaultSortField='invoiceId'
// paginationDefaultPage={currentPage}

64
src/components/flight/FlightApprovalsReport.js
Unescape View File

@ -2,79 +2,57 @@ import { useState } from 'react';
import Flatpickr from 'react-flatpickr';
import { Button, Input, InputGroup, Col } from '@component/ui';
import { Search, Calendar } from 'react-feather';
import dayjs from 'dayjs';
export default function FlightApprovalsReport(props) {
// 식별번호
const [filterId, setFilterId] = useState('');
// 키보드 enter 입력시 검색
const handlerKeyPress = e => {
if (e.key === 'Enter') {
props.handlerSearch(filterId);
}
};
// 달력
const [searchDate, setSearchDate] = useState({
startDate: dayjs().format('YYYY-MM-DD'),
endDate: dayjs().format('YYYY-MM-DD')
});
return (
<div className='layer-content'>
<div className='layer-ti'>
<h4>비행승인 신청 검토결과 현황</h4>
</div>
<div class='layer-ti-sub'>
검색일자 또는 민원번호/검토결과를 입력해주세요.
<div className='layer-ti-sub'>
검색일자 또는 민원번호/검토결과를 입력해주세요.
</div>
<div
className='layer-search layer-search-form'
>
<div className='layer-search layer-search-form'>
<div className='calendar-flat'>
<Flatpickr
placeholder='날짜를 선택해주세요'
id='searchDate'
options={{
mode: 'range'
mode: 'range',
defaultDate: [searchDate.startDate, searchDate.endDate]
}}
onChange={date => {
setSearchDate({
startDate: dayjs(date[0]).format('YYYY-MM-DD'),
endDate: dayjs(date[1]).format('YYYY-MM-DD')
});
}}
className='form-control flat-picker bg-transparent border-0 shadow-none'
/>
<Calendar size={14}/>
<Calendar size={14} />
</div>
<div className='list-input'>
<Input
type='text'
bsSize='sm'
placeholder='민원번호 또는 검토결과를 입력해주세요.'
value={filterId}
onChange={e => setFilterId(`${e.target.value}`)}
/>
</div>
{/* <InputGroup>
<div style={{ position: 'relative', borderRadius: '12px' }}>
<Input
type='text'
placeholder={`민원 번호 또는 승인 결과를 입력해 주세요.`}
value={filterId}
style={{
width: '490px',
borderRadius: '12px'
}}
onKeyPress={handlerKeyPress}
onChange={e => setFilterId(`${e.target.value}`)}
/>
<Search
style={{
position: 'absolute',
right: '6px',
top: '50%',
transform: 'translateY(-50%)',
cursor: 'pointer',
color: '#6c757d'
}}
onClick={() => props.handlerSearch(filterId)}
size={21}
/>
</div>
</InputGroup> */}
<div>
<Button
color='primary'
onClick={() => props.handlerSearch(filterId)}
onClick={() => props.handlerSearch(filterId, searchDate)}
size='sm'
>
검색

366
src/components/flight/FlightApprovalsTable.js
Unescape View File

@ -1,55 +1,50 @@
import { useEffect, useRef, useState, lazy, Suspense } from 'react';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from '@src/redux/store';
import { Spinner, Badge, Row, Col, Card, Button } from '@component/ui';
import { Card, Button } from '@component/ui';
import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
import dayjs from 'dayjs';
import { openModal } from '@src/redux/features/comn/message/messageSlice';
import { ERROR_MESSAGE, ERROR_TITLE } from '@src/configs/msgConst';
import { Link } from 'react-router-dom';
export default function FlightApprovalsTable(props) {
const dispatch = useDispatch();
const [results, setSearchResults] = useState([]);
const { laancAprvList } = useSelector(state => state.laancState);
useEffect(() => {
if (props.data) {
setSearchResults(props.data);
}
}, []);
console.log('>>', laancAprvList);
useEffect(() => {
if (props.filter) {
const results = props.data.filter(
item =>
item.planSno.toLowerCase().includes(props.filter.toLowerCase()) ||
(item.approval.toLowerCase() === '승인' &&
props.filter.toLowerCase() === '승인') ||
(item.approval.toLowerCase() === '미승인' &&
props.filter.toLowerCase() === '미승인')
);
setSearchResults(results);
} else if (props.filter === '') {
setSearchResults(props.data);
const columns = [
{
name: '신청번호',
selector: row => row.applyNo,
center: true,
width: '202px',
cell: row => {
return row.applyNo;
}
},
{
name: '신청일자',
selector: row => row.cntrlStDt,
center: true,
width: '182px',
sortable: true,
cell: row => {
return dayjs(row.cntrlStDt).format('YYYY-MM-DD');
}
}
}, [props.filter]);
];
const handlerOpenModal = (approval, reason) => {
if (approval === '미승인') {
const handlerOpenModal = approval => {
if (approval === 'U') {
dispatch(
openModal({
header: '미승인 사유',
body: reason,
body: '관제권 내 제한고도(신청고도130m/허용고도80m) 입니다.',
type: 'error'
})
);
} else if (approval === '승인') {
} else if (approval === 'A') {
dispatch(
openModal({
header: '승인 사유',
body: reason,
body: '관제권 내 허용고도(신청고도30m/허용고도40m) 입니다.',
type: 'success'
})
);
@ -57,252 +52,87 @@ export default function FlightApprovalsTable(props) {
dispatch(
openModal({
header: '비대상',
body: reason,
body: '해당 구역은 비 대상(신청고도130m/허용고도150m) 지역 입니다.',
type: 'error'
})
);
}
};
const handleRowClick = row => {
props.handlerDetail(row.planSno);
// 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
};
const conditionalRowStyles = [
{
when: row => row.approval === '미승인',
classNames: ['flight-not-approval-row']
},
{
when: row => row.approval === '승인',
classNames: ['flight-approval-row']
},
{
when: row => row.planSno === props.selected
// classNames: ['flight-approval-row-click']
}
];
const columns = [
{
name: '신청번호',
selector: row => row.applyNo,
center: true,
width: '202px',
cell: row => {
return row.applyNo;
}
},
{
name: '신청일자',
selector: row => row.cntrlStDt,
center: true,
width: '182px',
sortable: true,
cell: row => {
return dayjs(row.cntrlStDt).format('YYYY-MM-DD');
}
}
// {
// name: '자세히 보기',
// // selector: row => row.altitude,
// Width: '150px',
// sortable: false,
// center: true,
// cell: row => {
// return (
// <Link
// to={'#'}
// color='primary'
// size='md'
// onClick={e => {
// e.preventDefault();
// handlerOpenModal(row.approval, row.reason);
// }}
// >
// 자세히보기
// </Link>
// );
// }
// }
];
const FlightInfoComponent = () => {
const FlightInfoComponent = ({ data }) => {
return (
<>
<div
// className={`layer-content-list ${
// item.cntrlId === props.cntrlId ? 'on' : ''
// }`}
className='layer-content-list flight-approval-row '
// onClick={() => {
// props.handlerDetail(item.cntrlId);
// }}
key={Math.random()}
>
<dl>
<dt>
<div className='list-left-txt'><strong>비행구역 1번</strong></div>
</dt>
<dt>
<div className='list-left-txt'>중심좌표(위/경도)</div>
<div className='list-right-txt'>37.45467/126.73687</div>
</dt>
<dt>
<div className='list-left-txt'>반경(m)</div>
<div className='list-right-txt'>
100 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */}
</div>
</dt>
<dt>
<div className='list-left-txt'>고도(m)</div>
<div className='list-right-txt'>100</div>
</dt>
<dt>
<div className='list-left-txt'>검토결과</div>
<div className='list-right-txt'>
승인
{/* {dayjs(item.cntrlStDt).format('HH:mm')}
{dayjs(item.cntrlEndDt).format('HH:mm')} */}
</div>
</dt>
<dt>
<div className='list-left-txt'>사유보기</div>
<div className='list-right-txt'>
<Button color='flat-dark'>사유보기</Button>
{/* {dayjs(item.cntrlStDt).format('HH:mm')}
{dayjs(item.cntrlEndDt).format('HH:mm')} */}
</div>
</dt>
</dl>
</div>
<div
// className={`layer-content-list ${
// item.cntrlId === props.cntrlId ? 'on' : ''
// }`}
className='layer-content-list flight-not-approval-row '
// onClick={() => {
// props.handlerDetail(item.cntrlId);
// }}
key={Math.random()}
>
<dl>
<dt>
<div className='list-left-txt'><strong>비행구역 2번</strong></div>
</dt>
<dt>
<div className='list-left-txt'>중심좌표(위/경도)</div>
<div className='list-right-txt'>36.45467/126.73687</div>
</dt>
<dt>
<div className='list-left-txt'>반경(m)</div>
<div className='list-right-txt'>
100 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */}
</div>
</dt>
<dt>
<div className='list-left-txt'>고도(m)</div>
<div className='list-right-txt'>180</div>
</dt>
<dt>
<div className='list-left-txt'>검토결과</div>
<div className='list-right-txt'>
승인
{/* {dayjs(item.cntrlStDt).format('HH:mm')}
{dayjs(item.cntrlEndDt).format('HH:mm')} */}
</div>
</dt>
<dt>
<div className='list-left-txt'>사유보기</div>
<div className='list-right-txt'>
<Button color='flat-dark'>사유보기</Button>
{/* {dayjs(item.cntrlStDt).format('HH:mm')}
{dayjs(item.cntrlEndDt).format('HH:mm')} */}
</div>
</dt>
</dl>
</div>
<div
// className={`layer-content-list ${
// item.cntrlId === props.cntrlId ? 'on' : ''
// }`}
className='layer-content-list'
// onClick={() => {
// props.handlerDetail(item.cntrlId);
// }}
key={Math.random()}
>
<dl>
<dt>
<div className='list-left-txt'><strong>비행구역 3번</strong></div>
</dt>
<dt>
<div className='list-left-txt'>중심좌표(위/경도)</div>
<div className='list-right-txt'>39.45467/126.73687</div>
</dt>
<dt>
<div className='list-left-txt'>반경(m)</div>
<div className='list-right-txt'>
140 {/* {dayjs(item.cntrlStDt).format('YYYY년 MM월 DD일')} */}
</div>
</dt>
<dt>
<div className='list-left-txt'>고도(m)</div>
<div className='list-right-txt'>120</div>
</dt>
<dt>
<div className='list-left-txt'>검토결과</div>
<div className='list-right-txt'>
승인
{/* {dayjs(item.cntrlStDt).format('HH:mm')}
{dayjs(item.cntrlEndDt).format('HH:mm')} */}
</div>
</dt>
<dt>
<div className='list-left-txt'>사유보기</div>
<div className='list-right-txt'>
<Button color='flat-dark'>사유보기</Button>
{/* {dayjs(item.cntrlStDt).format('HH:mm')}
{dayjs(item.cntrlEndDt).format('HH:mm')} */}
</div>
</dt>
</dl>
</div>
{data.areaList?.map((area, index) => (
<div
className={`layer-content-list ${
area.planAreaSno === props.selected ? 'on' : ''
} ${
area.approvalCd === 'A'
? 'flight-approval-row'
: area.approvalCd === 'U'
? 'flight-not-approval-row'
: ''
} `}
onClick={() => {
props.handlerDetail(area);
}}
key={Math.random()}
>
<dl>
<dt>
<div className='list-left-txt'>
<strong>비행구역 {index}번</strong>
</div>
</dt>
<dt>
<div className='list-left-txt'>중심좌표(위/경도)</div>
<div className='list-right-txt'>
{' '}
{area.lat}/{area.lon}
</div>
</dt>
<dt>
<div className='list-left-txt'>반경(m)</div>
<div className='list-right-txt'>{area.bufferZone}</div>
</dt>
<dt>
<div className='list-left-txt'>고도(m)</div>
<div className='list-right-txt'>{area.fltElev}</div>
</dt>
<dt>
<div className='list-left-txt'>검토결과</div>
<div className='list-right-txt'>
{area.approvalCd === 'O'
? '비대상'
: area.approvalCd === 'A'
? '승인'
: '미승인'}
</div>
</dt>
<dt>
<div className='list-left-txt'>사유보기</div>
<div className='list-right-txt'>
<Button
color='flat-dark'
onClick={() => handlerOpenModal(area.approvalCd)}
>
사유보기
</Button>
</div>
</dt>
</dl>
</div>
))}
</>
);
};
const customStyles = {
rows: {
style: {
minHeight: '70px'
}
},
header: {
style: {
height: '100px'
}
},
cells: {
style: {
minHeight: '76px'
}
}
};
return (
<div className='layer-content'>
<div className='layer-ti d-flex justify-content-between align-items-center'>
<h4>비행승인 신청 검토결과 목록</h4>
<span className='search-case'>
{dayjs().format('YYYY년 MM월 DD일')} 총 {results?.length} 건 결과
{props.startDate} 총 {laancAprvList?.length} 건 결과
</span>
</div>
<div className='invoice-list-wrapper'>
@ -315,16 +145,18 @@ export default function FlightApprovalsTable(props) {
<GridDatabase
title={'비행이력'}
data={laancAprvList}
// count={laancSearchData?.size}
columns={columns}
// handlerPageChange={props.handlerPageChange}
pagination={true}
// customStyles={customStyles}
conditionalRowStyles={conditionalRowStyles}
handleRowClick={handleRowClick}
FlightInfoComponent={FlightInfoComponent}
/>
) : null}
) : (
<div
className='d-flex justify-content-center align-items-center '
style={{ height: '100px', color: '#000' }}
>
<p>비행승인 신청 건수가 없습니다.</p>
</div>
)}
</div>
</Card>
</div>

317
src/containers/flight/flightApprovalsContainer.js
Unescape View File

@ -1,14 +1,8 @@
import { useEffect, useRef, useState, lazy, Suspense } from 'react';
import { useDispatch, useSelector } from '@src/redux/store';
import { Map } from 'react-feather';
import FlightApprovalsReport from '../../components/flight/FlightApprovalsReport';
import {
getLaancDetail,
AreaBufferList
} from '@src/redux/features/laanc/laancThunk';
import {
InitFeature,
handlerCreatePoint,
handlerFitBounds,
handlerGetCircleCoord,
flightlayerWayPoint,
@ -24,159 +18,11 @@ import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
import FlightApprovalsTable from '@src/components/flight/FlightApprovalsTable';
import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
import dayjs from 'dayjs';
import { X } from 'react-feather';
export default function FlightApprovalsContainer() {
const dispatch = useDispatch();
const [res, setRes] = useState(
[
{
planSno: '364',
complaint: '15000',
radius: '1000',
coord: '37.55529/126.68347',
elev: '100',
approval: '미승인',
Representative: '김포항공관리사무소',
reason:
'신청하신 비행구역이 비 가시권 입니다. 특별비행신청 부탁드립니다.',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 08:50:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '363',
complaint: '15000',
radius: '100',
coord: '37.53058/126.71821',
elev: '100',
approval: '승인',
reason: '관제권 내 허용 고도(신청고도 100m/허용고도 120m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 13:14:12',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '362',
complaint: '15000',
radius: '100',
coord: '37.48783/126.73621',
elev: '110',
approval: '승인',
reason: '관제권 내 허용 고도(신청고도 110m/허용고도 120m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 12:14:12',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '361',
complaint: '15000',
radius: '376',
elev: '140',
coord: '37.49127/126.72556',
approval: '미승인',
reason: '관제권 내 제한 고도(신청고도 140m/허용고도 120m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 12:01:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '360',
complaint: '15000',
radius: '100',
coord: '37.54417/126.72024',
elev: '120',
approval: '미승인',
reason: '관제권 내 제한 고도(신청고도 120m/허용고도 120m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 11:50:12',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '359',
complaint: '15000',
radius: '100',
coord: '37.50211/126.78935',
elev: '50',
approval: '승인',
reason: '관제권 내 허용 고도(신청고도 50m/허용고도 80m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 11:10:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '358',
complaint: '15000',
radius: '274',
coord: '37.50748/126.79796',
elev: '30',
approval: '승인',
reason: '관제권 내 허용 고도(신청고도 30m/허용고도 40m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 10:40:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '357',
complaint: '15000',
radius: '200',
coord: '37.51063/126.77923',
elev: '100',
approval: '미승인',
reason: '관제권 내 제한 고도(신청고도 100m/80m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 10:14:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '356',
complaint: '15000',
radius: '200',
coord: '37.50753/126.77283',
elev: '110',
approval: '미승인',
reason: '관제권 내 제한 고도(신청고도 110m/허용고도 100m) 입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 09:50:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '355',
complaint: '15000',
radius: '430',
coord: '37.46752/126.70865',
elev: '130',
approval: '비대상',
reason: '해당 구역은 비 대상(신청고도 130m/허용고도 150m) 지역입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 09:14:00',
cntrlEndDt: '2023-11-22 13:16:29'
},
{
planSno: '354',
complaint: '15000',
radius: '300',
coord: '37.45467/126.73687',
elev: '160',
approval: '미승인',
reason: '해당 구역은 비 대상(신청고도 160m/허용고도 150m) 지역입니다.',
Representative: '김포항공관리사무소',
stArea: ' 인천광역시 부평구 청천동 372',
cntrlStDt: '2024-04-05 08:50:00',
cntrlEndDt: '2023-11-22 13:16:29'
}
].reverse()
);
const [selected, setSelected] = useState(null);
const [isMapLoading, setIsMapLoading] = useState(false);
// 비행구역 그리기
@ -187,12 +33,13 @@ export default function FlightApprovalsContainer() {
const { areaCoordList, isOpenModal } = useSelector(state => state.laancState);
//
const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD'));
// 미니맵 레이어
const [previewLayer, setPreviewLayer] = useState();
const { laancAprvList } = useSelector(state => state.laancState);
const { laancDetail } = useSelector(state => state.laancState);
const map = useSelector(state => state.mapState.map);
const previewGeo2 = {
@ -201,7 +48,7 @@ export default function FlightApprovalsContainer() {
};
useEffect(() => {
const searchStDt = dayjs().subtract(1, 'months').format('YYYY-MM-DD');
const searchStDt = dayjs().format('YYYY-MM-DD');
const searchEndDt = dayjs().format('YYYY-MM-DD');
dispatch(
getLaancAprvList({
@ -213,54 +60,64 @@ export default function FlightApprovalsContainer() {
useEffect(() => {
if (areaCoordList.length != 0) {
const area = areaCoordList[0];
if (area.areaType && area.areaType !== '') {
handlerPreviewDraw();
}
handlerPreviewDraw();
}
}, [areaCoordList]);
const handlerSearch = search => {
setFilter(search);
};
const handlerDetail = id => {
if (id === '364') {
setSelected(id);
// dispatch(getLaancDetail(365));
} else {
setSelected(id);
// dispatch(getLaancDetail(id));
}
handlerMapInit();
// setAreaCoordList(res.payload.areaList);
// if (areaCoordList.areaType === 'LINE') {
// const val = await dispatch(AreaBufferList(areaCoordList));
// setAreaBufferList(val.payload[0].bufferCoordList);
// }
// if (areaCoordList.length > 0) handlerMapInit();
};
useEffect(() => {
if (map) {
setMapObject(map);
}
}, [map]);
useEffect(() => {
if (laancDetail.planSno) {
dispatch(AreaBufferList(laancDetail?.areaList));
dispatch(clientSaveAreaCoordinateList(laancDetail?.areaList));
}
}, [laancDetail]);
useEffect(async () => {
if (areaCoordList.length === 0) return;
}, [areaCoordList]);
const handlerSearch = (search, searchDate) => {
setStartDate(searchDate.startDate);
if (
search != '' &&
(search === '승인' || search === '미승인' || search === '비대상')
) {
dispatch(
getLaancAprvList({
searchStDt: searchDate.startDate,
searchEndDt: searchDate.endDate,
approvalCd: search
})
);
} else if (search != '') {
dispatch(
getLaancAprvList({
searchStDt: searchDate.startDate,
searchEndDt: searchDate.endDate,
applyNo: search
})
);
} else {
dispatch(
getLaancAprvList({
searchStDt: searchDate.startDate,
searchEndDt: searchDate.endDate
})
);
}
// );
setFilter(search);
};
const handlerDetail = area => {
setSelected(area.planAreaSno);
dispatch(clientSaveAreaCoordinateList([area]));
handlerMapInit();
};
const handlerMapInit = () => {
if (map.getSource('preview')) {
// map.removeSource('preview');
} else {
map.addSource('preview', {
type: 'geojson',
@ -285,76 +142,30 @@ export default function FlightApprovalsContainer() {
const handlerPreviewDraw = () => {
if (areaCoordList.length > 0) {
const areas = areaCoordList[0];
const paths = [];
areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
previewGeo2.features = [];
let fitZoomPaths = [];
if (areas.areaType) {
if (areas.areaType === 'CIRCLE') {
const radius = areas.bufferZone;
const circleCoords = handlerGetCircleCoord(paths[0], radius);
const circle = InitFeature('Polygon', 'CIRCLE');
circle.properties.center = paths[0];
circle.geometry.coordinates = circleCoords;
previewGeo2.features.push(circle);
mapObject.setCenter(circle.properties.center);
fitZoomPaths = circleCoords[0];
}
// else {
// const lineString = InitFeature('LineString', 'LINE');
// const bufferPolyline = InitFeature('LineString', 'buffer');
// const polygon = InitFeature('Polygon', 'POLYGON');
// const point = [];
// if (areas.areaType === 'LINE') {
// lineString.geometry.coordinates = paths;
// previewGeo2.features.push(lineString);
const radius = areas.bufferZone;
const circleCoords = handlerGetCircleCoord(
[areas.lon, areas.lat],
radius
);
// //버퍼 생성
// if (areas.bufferCoordList) {
// const bufferPaths = [];
const circle = InitFeature('Polygon', 'CIRCLE');
circle.properties.center = [areas.lon, areas.lat];
circle.geometry.coordinates = circleCoords;
// areas.bufferCoordList.forEach(bfCoord =>
// bufferPaths.push([bfCoord.lon, bfCoord.lat])
// );
previewGeo2.features.push(circle);
// bufferPolyline.geometry.coordinates = bufferPaths;
// previewGeo2.features.push(bufferPolyline);
// }
// } else if (areas.areaType === 'POLYGON') {
// polygon.geometry.coordinates = [paths];
// previewGeo2.features.push(polygon);
// }
// // 포인트 생성
// paths.forEach((p, i) => {
// const wayPoint = handlerCreatePoint(p, i, areas.areaType);
// point.push(wayPoint);
// });
// previewGeo2.features = previewGeo2.features.filter(
// geo => geo.properties.id !== 'point'
// );
// point.forEach(p => previewGeo2.features.push(p));
mapObject.setCenter(circle.properties.center);
// //지도 줌 좌표 설정
// fitZoomPaths = paths.concat();
// }
fitZoomPaths = circleCoords[0];
handlerFitBounds(
mapObject,
fitZoomPaths,
400,
areas.areaType,
'flight'
);
handlerFitBounds(mapObject, fitZoomPaths, 400, 'CIRCLE', 'flight');
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
mapObject.getSource('preview').setData(previewGeo2);
}
// mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
mapObject.getSource('preview').setData(previewGeo2);
}
};
@ -364,14 +175,12 @@ export default function FlightApprovalsContainer() {
<MapControl />
</div>
<div className='right-menu active'>
<div
className='right-layer active flight-approval-layer'
>
<div className='right-layer active flight-approval-layer'>
<div className='layer-content'>
<FlightApprovalsReport handlerSearch={handlerSearch} />
<FlightApprovalsTable
data={res}
filter={filter}
startDate={startDate}
selected={selected}
handlerDetail={handlerDetail}
/>

1
src/redux/features/laanc/laancState.ts
Unescape View File

@ -629,6 +629,7 @@ export interface ILaancAprvListRq {
applyNo: string;
searchStDt: string;
searchEndDt: string;
approvalCd: string;
}
export interface ILaancAprvListRs {

1257
src/views/design/tempCodeRunnerFile.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save