|
|
@ -1,5 +1,6 @@ |
|
|
|
import { useState, useEffect, useRef } from 'react'; |
|
|
|
import { useState, useEffect, useRef } from 'react'; |
|
|
|
import Flatpickr from 'react-flatpickr'; |
|
|
|
import Flatpickr from 'react-flatpickr'; |
|
|
|
|
|
|
|
import { Collapse, ConfigProvider } from 'antd'; |
|
|
|
import { |
|
|
|
import { |
|
|
|
Button, |
|
|
|
Button, |
|
|
|
Input, |
|
|
|
Input, |
|
|
@ -53,276 +54,302 @@ export default function NewFlightApprovalsReport(props) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<ConfigProvider |
|
|
|
<div className='layer-content' onDragEnd={props.handleDragEnd} draggable> |
|
|
|
theme={{ |
|
|
|
<div className='layer-ti'> |
|
|
|
components: { |
|
|
|
|
|
|
|
Collapse: { |
|
|
|
|
|
|
|
headerPadding: 0 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div onDragEnd={props.handleDragEnd} draggable> |
|
|
|
|
|
|
|
<Collapse |
|
|
|
|
|
|
|
size='middle' |
|
|
|
|
|
|
|
bordered={false} |
|
|
|
|
|
|
|
expandIconPosition='end' |
|
|
|
|
|
|
|
items={[ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
key: '1', |
|
|
|
|
|
|
|
label: ( |
|
|
|
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
|
|
|
<h4>비행승인 신청 검토결과 현황</h4> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
children: ( |
|
|
|
|
|
|
|
<> |
|
|
|
|
|
|
|
<div className='layer-content'> |
|
|
|
|
|
|
|
{/* <div className='layer-ti'> |
|
|
|
<h4>비행승인 신청 검토결과 현황</h4> |
|
|
|
<h4>비행승인 신청 검토결과 현황</h4> |
|
|
|
</div> |
|
|
|
</div> */} |
|
|
|
|
|
|
|
|
|
|
|
<div className='input-n'> |
|
|
|
<div className='input-n'> |
|
|
|
<div className='list-input'> |
|
|
|
<div className='list-input'> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='layer-content'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label for='searchDate'>신청일자</Label> |
|
|
|
<Label for='searchDate'>신청일자</Label> |
|
|
|
<div className='calendar-flat'> |
|
|
|
<div className='calendar-flat'> |
|
|
|
<Flatpickr |
|
|
|
<Flatpickr |
|
|
|
ref={flatPickerRef} |
|
|
|
ref={flatPickerRef} |
|
|
|
placeholder='날짜를 선택해주세요' |
|
|
|
placeholder='날짜를 선택해주세요' |
|
|
|
id='searchDate' |
|
|
|
id='searchDate' |
|
|
|
options={{ |
|
|
|
options={{ |
|
|
|
mode: 'range', |
|
|
|
mode: 'range', |
|
|
|
defaultDate: [searchDate.startDate, searchDate.endDate] |
|
|
|
defaultDate: [ |
|
|
|
}} |
|
|
|
searchDate.startDate, |
|
|
|
onChange={date => { |
|
|
|
searchDate.endDate |
|
|
|
setSearchDate({ |
|
|
|
] |
|
|
|
startDate: dayjs(date[0]).format('YYYY-MM-DD'), |
|
|
|
}} |
|
|
|
endDate: dayjs(date[1]).format('YYYY-MM-DD') |
|
|
|
onChange={date => { |
|
|
|
}); |
|
|
|
setSearchDate({ |
|
|
|
}} |
|
|
|
startDate: dayjs(date[0]).format( |
|
|
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
|
|
|
'YYYY-MM-DD' |
|
|
|
/> |
|
|
|
), |
|
|
|
<Calendar size={14} /> |
|
|
|
endDate: dayjs(date[1]).format('YYYY-MM-DD') |
|
|
|
</div> |
|
|
|
}); |
|
|
|
</FormGroup> |
|
|
|
}} |
|
|
|
</div> |
|
|
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
|
|
|
</div> |
|
|
|
/> |
|
|
|
|
|
|
|
<Calendar size={14} /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</FormGroup> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div className='list-input'> |
|
|
|
<div className='list-input'> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='layer-content'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label for='filterId'>신청번호</Label> |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
type='text' |
|
|
|
type='text' |
|
|
|
bsSize='sm' |
|
|
|
bsSize='sm' |
|
|
|
placeholder='신청번호를 입력해주세요.' |
|
|
|
placeholder='신청번호를 입력해주세요.' |
|
|
|
value={props.filterId} |
|
|
|
value={props.filterId} |
|
|
|
onChange={e => props.setFilterId(e.target.value)} |
|
|
|
onChange={e => props.setFilterId(e.target.value)} |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className='list-input'> |
|
|
|
<div className='list-input'> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='layer-content'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label for='limitZoneNm'>장애물 제한표면</Label> |
|
|
|
<CustomInput |
|
|
|
<CustomInput |
|
|
|
type='select' |
|
|
|
type='select' |
|
|
|
bsSize='sm' |
|
|
|
bsSize='sm' |
|
|
|
id='limitzoneNm' |
|
|
|
id='limitzoneNm' |
|
|
|
placeholder='장애물 제한표면을 선택 해 주세요.' |
|
|
|
placeholder='장애물 제한표면을 선택 해 주세요.' |
|
|
|
onChange={e => |
|
|
|
onChange={e => |
|
|
|
props.setCheckState({ |
|
|
|
props.setCheckState({ |
|
|
|
...props.checkState, |
|
|
|
...props.checkState, |
|
|
|
limitZoneNm: e.target.value |
|
|
|
limitZoneNm: e.target.value |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
value={props.checkState.limitZoneNm} |
|
|
|
value={props.checkState.limitZoneNm} |
|
|
|
> |
|
|
|
> |
|
|
|
<option value={'전체'}>장애물 제한표면</option> |
|
|
|
<option value={'전체'}>전체</option> |
|
|
|
<option value={'C'}>원추</option> |
|
|
|
<option value={'C'}>원추</option> |
|
|
|
<option value={'H'}>수평</option> |
|
|
|
<option value={'H'}>수평</option> |
|
|
|
</CustomInput> |
|
|
|
</CustomInput> |
|
|
|
</FormGroup> |
|
|
|
</FormGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='input-n'> |
|
|
|
<div className='layer-ti'> |
|
|
|
<div className='list-input'> |
|
|
|
<h4>확인 결과</h4> |
|
|
|
<div className='layer-content'> |
|
|
|
</div> |
|
|
|
<FormGroup> |
|
|
|
<div className='input-n'> |
|
|
|
<CustomInput |
|
|
|
<div className='list-input'> |
|
|
|
type='select' |
|
|
|
<div className='layer-content'> |
|
|
|
bsSize='sm' |
|
|
|
<FormGroup> |
|
|
|
id={ |
|
|
|
<Label for='searchDate'> |
|
|
|
props.pageName === 'control' |
|
|
|
{props.pageName === 'control' ? '관제통신과' : '안전운항과'} |
|
|
|
? 'reviewedProcType' |
|
|
|
</Label> |
|
|
|
: 'reviewedType' |
|
|
|
<CustomInput |
|
|
|
} |
|
|
|
type='select' |
|
|
|
value={ |
|
|
|
bsSize='sm' |
|
|
|
props.pageName === 'control' |
|
|
|
id={ |
|
|
|
? props.checkState.reviewedProcType |
|
|
|
props.pageName === 'control' |
|
|
|
: props.checkState.reviewedType |
|
|
|
? 'reviewedProcType' |
|
|
|
} |
|
|
|
: 'reviewedType' |
|
|
|
onChange={e => { |
|
|
|
} |
|
|
|
props.pageName === 'control' |
|
|
|
value={ |
|
|
|
? props.setCheckState({ |
|
|
|
props.pageName === 'control' |
|
|
|
...props.checkState, |
|
|
|
? props.checkState.reviewedProcType |
|
|
|
reviewedProcType: e.target.value |
|
|
|
: props.checkState.reviewedType |
|
|
|
}) |
|
|
|
} |
|
|
|
: props.setCheckState({ |
|
|
|
onChange={e => { |
|
|
|
...props.checkState, |
|
|
|
props.pageName === 'control' |
|
|
|
reviewedType: e.target.value |
|
|
|
? props.setCheckState({ |
|
|
|
}); |
|
|
|
...props.checkState, |
|
|
|
}} |
|
|
|
reviewedProcType: e.target.value |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
}) |
|
|
|
> |
|
|
|
: props.setCheckState({ |
|
|
|
{Object.entries( |
|
|
|
...props.checkState, |
|
|
|
props.pageName === 'control' |
|
|
|
reviewedType: e.target.value |
|
|
|
? FlightCategory.Control |
|
|
|
}); |
|
|
|
: FlightCategory.Operation |
|
|
|
}} |
|
|
|
).map(([key, value]) => ( |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
<option key={key} value={key}> |
|
|
|
> |
|
|
|
{value} |
|
|
|
{Object.entries( |
|
|
|
</option> |
|
|
|
props.pageName === 'control' |
|
|
|
))} |
|
|
|
? FlightCategory.Control |
|
|
|
</CustomInput> |
|
|
|
: FlightCategory.Operation |
|
|
|
</FormGroup> |
|
|
|
).map(([key, value]) => ( |
|
|
|
</div> |
|
|
|
<option key={key} value={key}> |
|
|
|
</div> |
|
|
|
{value} |
|
|
|
{props.pageName !== 'control' && ( |
|
|
|
</option> |
|
|
|
<div className='list-input'> |
|
|
|
))} |
|
|
|
<div className='layer-content'> |
|
|
|
</CustomInput> |
|
|
|
<FormGroup> |
|
|
|
</FormGroup> |
|
|
|
<CustomInput |
|
|
|
</div> |
|
|
|
type='select' |
|
|
|
</div> |
|
|
|
bsSize='sm' |
|
|
|
{props.pageName !== 'control' && ( |
|
|
|
id={ |
|
|
|
<div className='list-input'> |
|
|
|
props.pageName === 'control' |
|
|
|
<div className='layer-content'> |
|
|
|
? 'reviewedType' |
|
|
|
<FormGroup> |
|
|
|
: 'reviewedProcType' |
|
|
|
<Label for='searchDate'> |
|
|
|
} |
|
|
|
{props.pageName === 'control' ? '안전운항과' : '관제통신과'} |
|
|
|
value={ |
|
|
|
</Label> |
|
|
|
props.pageName === 'control' |
|
|
|
<CustomInput |
|
|
|
? props.checkState.reviewedType |
|
|
|
type='select' |
|
|
|
: props.checkState.reviewedProcType |
|
|
|
bsSize='sm' |
|
|
|
} |
|
|
|
id={ |
|
|
|
onChange={e => { |
|
|
|
props.pageName === 'control' |
|
|
|
props.pageName === 'control' |
|
|
|
? 'reviewedType' |
|
|
|
? props.setCheckState({ |
|
|
|
: 'reviewedProcType' |
|
|
|
...props.checkState, |
|
|
|
} |
|
|
|
reviewedType: e.target.value |
|
|
|
value={ |
|
|
|
}) |
|
|
|
props.pageName === 'control' |
|
|
|
: props.setCheckState({ |
|
|
|
? props.checkState.reviewedType |
|
|
|
...props.checkState, |
|
|
|
: props.checkState.reviewedProcType |
|
|
|
reviewedProcType: e.target.value |
|
|
|
} |
|
|
|
}); |
|
|
|
onChange={e => { |
|
|
|
}} |
|
|
|
props.pageName === 'control' |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
? props.setCheckState({ |
|
|
|
> |
|
|
|
...props.checkState, |
|
|
|
{Object.entries( |
|
|
|
reviewedType: e.target.value |
|
|
|
props.pageName === 'control' |
|
|
|
}) |
|
|
|
? FlightCategory.Operation |
|
|
|
: props.setCheckState({ |
|
|
|
: FlightCategory.Control |
|
|
|
...props.checkState, |
|
|
|
).map(([key, value]) => ( |
|
|
|
reviewedProcType: e.target.value |
|
|
|
<option key={key} value={key}> |
|
|
|
}); |
|
|
|
{value} |
|
|
|
}} |
|
|
|
</option> |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
))} |
|
|
|
> |
|
|
|
</CustomInput> |
|
|
|
{Object.entries( |
|
|
|
</FormGroup> |
|
|
|
props.pageName === 'control' |
|
|
|
</div> |
|
|
|
? FlightCategory.Operation |
|
|
|
</div> |
|
|
|
: FlightCategory.Control |
|
|
|
)} |
|
|
|
).map(([key, value]) => ( |
|
|
|
|
|
|
|
<option key={key} value={key}> |
|
|
|
|
|
|
|
{value} |
|
|
|
|
|
|
|
</option> |
|
|
|
|
|
|
|
))} |
|
|
|
|
|
|
|
</CustomInput> |
|
|
|
|
|
|
|
</FormGroup> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className='list-input'> |
|
|
|
<div className='list-input'> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='layer-content'> |
|
|
|
<FormGroup> |
|
|
|
<FormGroup> |
|
|
|
<Label for='searchDate'>전송 상태</Label> |
|
|
|
<CustomInput |
|
|
|
<CustomInput type='select' bsSize='sm' id='searchDate'> |
|
|
|
type='select' |
|
|
|
<option>전체</option> |
|
|
|
bsSize='sm' |
|
|
|
<option>전송</option> |
|
|
|
id='searchDate' |
|
|
|
<option>미전송</option> |
|
|
|
> |
|
|
|
</CustomInput> |
|
|
|
<option>전송 상태</option> |
|
|
|
</FormGroup> |
|
|
|
<option>전송</option> |
|
|
|
</div> |
|
|
|
<option>미전송</option> |
|
|
|
</div> |
|
|
|
</CustomInput> |
|
|
|
</div> |
|
|
|
</FormGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='layer-content'> |
|
|
|
</div> |
|
|
|
<div className='layer-ti'> |
|
|
|
</div> |
|
|
|
<h4>신청구역</h4> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className='layer-content'> |
|
|
|
<div className='input-n'> |
|
|
|
<div className='layer-ti'> |
|
|
|
<div className='list-input'> |
|
|
|
<h4>신청구역</h4> |
|
|
|
<CustomInput |
|
|
|
</div> |
|
|
|
type='select' |
|
|
|
<div className='input-n'> |
|
|
|
id='filterArea' |
|
|
|
<div className='list-input'> |
|
|
|
bsSize='sm' |
|
|
|
<CustomInput |
|
|
|
value={props.filterArea.ctprvn} |
|
|
|
type='select' |
|
|
|
onChange={e => |
|
|
|
id='filterArea' |
|
|
|
props.setFilterArea({ |
|
|
|
bsSize='sm' |
|
|
|
...props.filterArea, |
|
|
|
value={props.filterArea.ctprvn} |
|
|
|
ctprvn: e.target.value, |
|
|
|
onChange={e => |
|
|
|
sig: '전체' |
|
|
|
props.setFilterArea({ |
|
|
|
}) |
|
|
|
...props.filterArea, |
|
|
|
} |
|
|
|
ctprvn: e.target.value, |
|
|
|
> |
|
|
|
sig: '전체' |
|
|
|
{Object.values(CityCategories).map(city => ( |
|
|
|
}) |
|
|
|
<option key={city} value={city}> |
|
|
|
} |
|
|
|
{city} |
|
|
|
> |
|
|
|
</option> |
|
|
|
{Object.values(CityCategories).map(city => ( |
|
|
|
))} |
|
|
|
<option key={city} value={city}> |
|
|
|
</CustomInput> |
|
|
|
{city} |
|
|
|
</div> |
|
|
|
</option> |
|
|
|
<div className='list-input'> |
|
|
|
))} |
|
|
|
<CustomInput |
|
|
|
</CustomInput> |
|
|
|
type='select' |
|
|
|
</div> |
|
|
|
id='district' |
|
|
|
<div className='list-input'> |
|
|
|
bsSize='sm' |
|
|
|
<CustomInput |
|
|
|
value={props.filterArea.sig} |
|
|
|
type='select' |
|
|
|
onChange={e => |
|
|
|
id='district' |
|
|
|
props.setFilterArea({ |
|
|
|
bsSize='sm' |
|
|
|
...props.filterArea, |
|
|
|
value={props.filterArea.sig} |
|
|
|
sig: e.target.value |
|
|
|
onChange={e => |
|
|
|
}) |
|
|
|
props.setFilterArea({ |
|
|
|
} |
|
|
|
...props.filterArea, |
|
|
|
> |
|
|
|
sig: e.target.value |
|
|
|
{DistrictCategories[props.pageName][props.filterArea.ctprvn]?.map( |
|
|
|
}) |
|
|
|
district => ( |
|
|
|
} |
|
|
|
<option key={district} value={district}> |
|
|
|
> |
|
|
|
{district} |
|
|
|
{DistrictCategories[props.pageName][ |
|
|
|
</option> |
|
|
|
props.filterArea.ctprvn |
|
|
|
) |
|
|
|
]?.map(district => ( |
|
|
|
)} |
|
|
|
<option key={district} value={district}> |
|
|
|
</CustomInput> |
|
|
|
{district} |
|
|
|
</div> |
|
|
|
</option> |
|
|
|
<div className='list-input'> |
|
|
|
))} |
|
|
|
<Input |
|
|
|
</CustomInput> |
|
|
|
type='text' |
|
|
|
</div> |
|
|
|
bsSize='sm' |
|
|
|
<div className='list-input'> |
|
|
|
placeholder='주소를 입력해주세요.' |
|
|
|
<Input |
|
|
|
value={props.filterArea.address} |
|
|
|
type='text' |
|
|
|
onChange={e => |
|
|
|
bsSize='sm' |
|
|
|
props.setFilterArea({ |
|
|
|
placeholder='주소를 입력해주세요.' |
|
|
|
...props.filterArea, |
|
|
|
value={props.filterArea.address} |
|
|
|
address: e.target.value |
|
|
|
onChange={e => |
|
|
|
}) |
|
|
|
props.setFilterArea({ |
|
|
|
} |
|
|
|
...props.filterArea, |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
address: e.target.value |
|
|
|
/> |
|
|
|
}) |
|
|
|
</div> |
|
|
|
} |
|
|
|
<div className='list-input list-input-btn'> |
|
|
|
onKeyPress={handleKeyDown} |
|
|
|
<Button |
|
|
|
/> |
|
|
|
color='primary' |
|
|
|
</div> |
|
|
|
onClick={() => { |
|
|
|
<div className='list-input list-input-btn'> |
|
|
|
props.handlerSearch( |
|
|
|
<Button |
|
|
|
props.filterId, |
|
|
|
color='primary' |
|
|
|
searchDate, |
|
|
|
onClick={() => { |
|
|
|
props.filterArea, |
|
|
|
props.handlerSearch( |
|
|
|
props.limitZoneNm |
|
|
|
props.filterId, |
|
|
|
); |
|
|
|
searchDate, |
|
|
|
}} |
|
|
|
props.filterArea, |
|
|
|
size='sm' |
|
|
|
props.limitZoneNm |
|
|
|
> |
|
|
|
); |
|
|
|
검색 |
|
|
|
}} |
|
|
|
</Button> |
|
|
|
size='sm' |
|
|
|
</div> |
|
|
|
> |
|
|
|
</div> |
|
|
|
검색 |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
]} |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</> |
|
|
|
</ConfigProvider> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|