|
|
|
@ -4,12 +4,28 @@ 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 DataTable from 'react-data-table-component'; |
|
|
|
|
import { FaAngleDown, FaAngleUp } from 'react-icons/fa'; |
|
|
|
|
|
|
|
|
|
export default function FlightApprovalsTable(props) { |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
|
|
const { laancAprvList, laancElev } = useSelector(state => state.laancState); |
|
|
|
|
|
|
|
|
|
const [approvalCdValue, setApprovalCdValue] = useState({ |
|
|
|
|
S: 0, |
|
|
|
|
F: 0, |
|
|
|
|
U: 0 |
|
|
|
|
}); |
|
|
|
|
const [expandedRows, setExpandedRows] = useState({}); |
|
|
|
|
|
|
|
|
|
const toggleRow = rowId => { |
|
|
|
|
setExpandedRows({ |
|
|
|
|
...expandedRows, |
|
|
|
|
[rowId]: !expandedRows[rowId] |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const conditionalRowStyles = [ |
|
|
|
|
{ |
|
|
|
|
when: row => row.areaList[0].approvalCd === 'F', |
|
|
|
@ -25,6 +41,21 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const infoRowStyles = [ |
|
|
|
|
{ |
|
|
|
|
when: row => row.approvalCd === 'F', |
|
|
|
|
classNames: ['flight-not-approval-row'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
when: row => row.approvalCd === 'S', |
|
|
|
|
classNames: ['flight-approval-row'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
when: row => row.planAreaSno === props.selected, |
|
|
|
|
classNames: ['flight-approval-row-click'] |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const columns = [ |
|
|
|
|
{ |
|
|
|
|
name: '신청번호', |
|
|
|
@ -117,25 +148,22 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
</Button> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '더보기', |
|
|
|
|
selector: row => row.areaList, |
|
|
|
|
center: true, |
|
|
|
|
width: '120px', |
|
|
|
|
cell: row => |
|
|
|
|
row.areaList.length > 1 ? ( |
|
|
|
|
<Button color='flat-dark' onClick={() => toggleRow(row.applyNo)}> |
|
|
|
|
{row.areaList.length}건 더 보기 |
|
|
|
|
{expandedRows[row.applyNo] ? <FaAngleDown /> : <FaAngleUp />} |
|
|
|
|
</Button> |
|
|
|
|
) : ( |
|
|
|
|
'-' |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
// {
|
|
|
|
|
// name: '더보기',
|
|
|
|
|
// selector: row => row.areaList,
|
|
|
|
|
// center: true,
|
|
|
|
|
// width: '120px',
|
|
|
|
|
// cell: row => {
|
|
|
|
|
// return row.areaList.length > 1 ? (
|
|
|
|
|
// <Button
|
|
|
|
|
// color='flat-dark'
|
|
|
|
|
// // onClick={() =>}
|
|
|
|
|
// >
|
|
|
|
|
// {row.areaList.length}건 더 보기
|
|
|
|
|
// </Button>
|
|
|
|
|
// ) : (
|
|
|
|
|
// '-'
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const handlerOpenModal = (approval, fltElev, fltElevMax) => { |
|
|
|
@ -168,100 +196,139 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const nestedColumns = [ |
|
|
|
|
{ |
|
|
|
|
selector: row => row.applyNo, |
|
|
|
|
center: true, |
|
|
|
|
cell: row => { |
|
|
|
|
return '240503-0001'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.applyDt, |
|
|
|
|
center: true, |
|
|
|
|
cell: row => { |
|
|
|
|
return dayjs(row.applyDt).format('YYYY-MM-DD'); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.zoneNo, |
|
|
|
|
center: true, |
|
|
|
|
sortable: true, |
|
|
|
|
width: '80px', |
|
|
|
|
cell: row => { |
|
|
|
|
return row.zoneNo + '번'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.lat, |
|
|
|
|
center: true, |
|
|
|
|
sortable: true, |
|
|
|
|
cell: row => { |
|
|
|
|
return `${row.lat.toFixed(5)}/${row.lon.toFixed(5)}`; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.bufferZone, |
|
|
|
|
center: true, |
|
|
|
|
sortable: true, |
|
|
|
|
cell: row => { |
|
|
|
|
return row.bufferZone; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.fltElev, |
|
|
|
|
center: true, |
|
|
|
|
sortable: true, |
|
|
|
|
cell: row => { |
|
|
|
|
return row.fltElev; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.approvalCd, |
|
|
|
|
center: true, |
|
|
|
|
sortable: true, |
|
|
|
|
cell: row => { |
|
|
|
|
return row.approvalCd === 'U' |
|
|
|
|
? '비대상' |
|
|
|
|
: row.approvalCd === 'S' |
|
|
|
|
? '승인' |
|
|
|
|
: '미승인'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
selector: row => row.approvalCd, |
|
|
|
|
cell: row => { |
|
|
|
|
return ( |
|
|
|
|
<Button |
|
|
|
|
color='flat-dark' |
|
|
|
|
onClick={() => |
|
|
|
|
handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
사유보기 |
|
|
|
|
</Button> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const handleInRowClick = row => { |
|
|
|
|
props.handlerDetail(row); |
|
|
|
|
}; |
|
|
|
|
const handleRowClick = row => { |
|
|
|
|
props.handlerDetail(row.areaList[0]); |
|
|
|
|
// 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const FlightInfoComponent = ({ data }) => { |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{data.areaList?.map((area, index) => ( |
|
|
|
|
<div |
|
|
|
|
className={`layer-content-list ${ |
|
|
|
|
area.planAreaSno === props.selected ? 'on' : '' |
|
|
|
|
} ${ |
|
|
|
|
area.approvalCd === 'S' |
|
|
|
|
? 'flight-approval-row' |
|
|
|
|
: area.approvalCd === 'F' |
|
|
|
|
? 'flight-not-approval-row' |
|
|
|
|
: '' |
|
|
|
|
} `}
|
|
|
|
|
onClick={() => { |
|
|
|
|
props.handlerDetail(area); |
|
|
|
|
}} |
|
|
|
|
key={Math.random()} |
|
|
|
|
> |
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'> |
|
|
|
|
<strong>비행구역 {index + 1}번</strong> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'>중심좌표(위/경도)</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
{area.lat.toFixed(5)}/{area.lon.toFixed(5)} |
|
|
|
|
</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 === 'U' |
|
|
|
|
? '비대상' |
|
|
|
|
: area.approvalCd === 'S' |
|
|
|
|
? '승인' |
|
|
|
|
: '미승인'} |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
<dt> |
|
|
|
|
<div className='list-left-txt'>사유보기</div> |
|
|
|
|
<div className='list-right-txt'> |
|
|
|
|
<Button |
|
|
|
|
color='flat-dark' |
|
|
|
|
onClick={() => |
|
|
|
|
handlerOpenModal( |
|
|
|
|
area.approvalCd, |
|
|
|
|
area.fltElev, |
|
|
|
|
area.fltElevMax |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
사유보기 |
|
|
|
|
</Button> |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
<div> |
|
|
|
|
<DataTable |
|
|
|
|
noTableHead={true} |
|
|
|
|
data={data.areaList.slice(1)} |
|
|
|
|
columns={nestedColumns} |
|
|
|
|
conditionalRowStyles={infoRowStyles} |
|
|
|
|
onRowClicked={handleInRowClick} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// const customStyles = {
|
|
|
|
|
// rows: {
|
|
|
|
|
// style: {
|
|
|
|
|
// minHeight: '70px'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// header: {
|
|
|
|
|
// style: {
|
|
|
|
|
// width: '20px'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// cells: {
|
|
|
|
|
// style: {
|
|
|
|
|
// width: '10px'
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
const formatDate = dateString => { |
|
|
|
|
const date = new Date(dateString); |
|
|
|
|
const year = date.getFullYear(); |
|
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|
|
|
|
const day = String(date.getDate()).padStart(2, '0'); |
|
|
|
|
return `${year} 년 ${month} 월 ${day} 일`; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
resApprovalCd(); |
|
|
|
|
}, [laancAprvList]); |
|
|
|
|
|
|
|
|
|
const handleRowClick = row => { |
|
|
|
|
props.handlerDetail(row.areaList[0]); |
|
|
|
|
// 여기에 클릭 이벤트를 처리하는 코드를 작성하세요.
|
|
|
|
|
const resApprovalCd = () => { |
|
|
|
|
let approvalCdValue = { S: 0, F: 0, U: 0 }; |
|
|
|
|
|
|
|
|
|
laancAprvList?.map(item => { |
|
|
|
|
item.areaList.map(area => { |
|
|
|
|
if (area.approvalCd === 'S') { |
|
|
|
|
approvalCdValue.S += 1; |
|
|
|
|
} else if (area.approvalCd === 'F') { |
|
|
|
|
approvalCdValue.F += 1; |
|
|
|
|
} else { |
|
|
|
|
approvalCdValue.U += 1; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
setApprovalCdValue({ |
|
|
|
|
F: approvalCdValue.F, |
|
|
|
|
S: approvalCdValue.S, |
|
|
|
|
U: approvalCdValue.U |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
@ -269,15 +336,16 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
<div className='layer-ti d-flex justify-content-between align-items-center'> |
|
|
|
|
<h4>비행승인 신청 검토결과 목록</h4> |
|
|
|
|
<span className='search-case'> |
|
|
|
|
{props.startDate} 총 {laancAprvList?.length} 건 결과 |
|
|
|
|
{formatDate(props.startDate)} 총{' '} |
|
|
|
|
{approvalCdValue.S + approvalCdValue.F + approvalCdValue.U}건 |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div className='search-case-list'> |
|
|
|
|
<div> |
|
|
|
|
<ul> |
|
|
|
|
<li className='approval'>승인 10건</li> |
|
|
|
|
<li className='not-approved'>미승인 10건</li> |
|
|
|
|
<li className='non-target'>비대상 10건</li> |
|
|
|
|
<li className='approval'>승인 {approvalCdValue.S}건</li> |
|
|
|
|
<li className='not-approved'>미승인 {approvalCdValue.F}건</li> |
|
|
|
|
<li className='non-target'>비대상 {approvalCdValue.U}건</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -295,8 +363,12 @@ export default function FlightApprovalsTable(props) {
|
|
|
|
|
pagination={true} |
|
|
|
|
// customStyles={customStyles}
|
|
|
|
|
conditionalRowStyles={conditionalRowStyles} |
|
|
|
|
// FlightInfoComponent={FlightInfoComponent}
|
|
|
|
|
FlightInfoComponent={FlightInfoComponent} |
|
|
|
|
handleRowClick={handleRowClick} |
|
|
|
|
expandableRowExpanded={row => |
|
|
|
|
expandedRows[row.applyNo] || false |
|
|
|
|
} |
|
|
|
|
paginationPerPage={20} |
|
|
|
|
/> |
|
|
|
|
) : ( |
|
|
|
|
<div |
|
|
|
|