From 82fd251703e77eac18b67debad08c5d468aae1c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Mon, 15 Jul 2024 15:59:15 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9A=B4=ED=95=AD=EA=B3=BC=20=EB=8B=A4?= =?UTF-8?q?=EB=A5=B8=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EB=B9=84=ED=96=89?= =?UTF-8?q?=EA=B5=AC=EC=97=AD=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=ED=8F=AC?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/OperationApprovalsTable.js | 59 +++++++++--- .../flight/OperationApprovalsContainer.js | 95 +++++++++++++++---- src/containers/rightMenuContainer.js | 32 ++++++- 3 files changed, 150 insertions(+), 36 deletions(-) diff --git a/src/components/flight/OperationApprovalsTable.js b/src/components/flight/OperationApprovalsTable.js index 8a86ba59..245cfc8e 100644 --- a/src/components/flight/OperationApprovalsTable.js +++ b/src/components/flight/OperationApprovalsTable.js @@ -32,6 +32,9 @@ export default function OperationApprovalsTable(props) { // 확장된 행 키 const [expandedRowKeys, setExpandedRowKeys] = useState([]); + // 확장된 행 데이터 + const [expandedRowDatas, setExpandedRowDatas] = useState([]); + // 수정 키 const [editingKey, setEditingKey] = useState(''); @@ -721,6 +724,7 @@ export default function OperationApprovalsTable(props) { dtl: item.dtl, approvalCd: item.approvalCd, planAreaSno: item.planAreaSno, + planSno: item.planSno, addr1: item.addr1, addr2: item.addr2, addr3: item.addr3 @@ -741,8 +745,10 @@ export default function OperationApprovalsTable(props) { className += 'flight-condition-approval-row editable-row'; } else className; - if (record.planAreaSno === props.selected) { - className += ' flight-approval-row-click'; + if (record.planAreaSno === props.selected[0]) { + if (props.selected.length <= 1) { + className += ' flight-approval-row-click'; + } } return className; }} @@ -879,8 +885,10 @@ export default function OperationApprovalsTable(props) { return `${year} 년 ${month} 월 ${day} 일`; }; + // 테이블 행 확장 이벤트 const handleExpand = record => { const key = record.key; + const areaList = record.areaList; const expanded = expandedRowKeys.includes(key); const keys = expanded @@ -888,9 +896,24 @@ export default function OperationApprovalsTable(props) { : [...expandedRowKeys, key]; setExpandedRowKeys(keys); - // 초기화 및 다시 셋팅(열릴때) + const datas = expanded + ? expandedRowDatas.filter(k => k.planSno !== record.planSno) + : [ + ...expandedRowDatas, + { + applyNo: record.applyNo, + planSno: record.planSno, + areaList + } + ]; + setExpandedRowDatas(datas); + if (!expanded) { props.handlerDetail(record.areaList); + } else { + if (props.selectedPlanSno === record.planSno) { + props.handlerDetail([]); + } } }; @@ -902,16 +925,24 @@ export default function OperationApprovalsTable(props) { row.areaList[0].fltElev, row.areaList[0].fltElevMax ); - // 초기화 및 다시 셋팅 props.handlerDetail([row.areaList[0]]); }; // 확장된 테이블 행 클릭 이벤트 - const handleInRowClick = row => { + const handleInRowClick = async row => { handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); - // 초기화 하지말고 포커스만 하기 - props.handlerDetail([row]); + if (props.selectedPlanSno !== row.planSno) { + // 지도에 표출되지 않은 확장 테이블 행 클릭 + const areaList = expandedRowDatas.filter( + data => data.planSno === row.planSno + ); + await props.handlerDetail(areaList[0].areaList); + props.setDiffRowZoneNo(row.zoneNo); + } else { + // 지도에 표출된 확장 테이블 행 클릭 + await props.handlerDetail([row]); + } }; const handleFileDownload = async type => { @@ -1066,12 +1097,16 @@ export default function OperationApprovalsTable(props) { 'flight-condition-approval-row editable-row'; } else className += 'editable-row'; } - if ( - record.areaList.length <= 1 && - record.areaList[0].planAreaSno === props.selected - ) { - className += ' flight-approval-row-click'; + + if (props.selected?.length > 0) { + if ( + record.areaList.length <= 1 && + record.areaList[0].planAreaSno === props.selected[0] + ) { + className += ' flight-approval-row-click'; + } } + if (expandedRowKeys.includes(record.key)) { className += ' expanded-row'; } diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index c2bf536a..34c0f641 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -37,8 +37,13 @@ import { ModalFooter, Table } from '@component/ui'; -import { FiUsers, FiFileText, FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; -import { X } from 'react-feather' +import { + FiUsers, + FiFileText, + FiRotateCw, + FiCornerUpLeft +} from 'react-icons/fi'; +import { X } from 'react-feather'; import mapboxgl from 'mapbox-gl'; import * as turf from '@turf/turf'; @@ -47,7 +52,12 @@ export default function OperationApprovalsContainer({ mode }) { const dispatch = useDispatch(); const history = useHistory(); + // 현재 선택한 데이터 구분 const [selected, setSelected] = useState(null); + const [selectedPlanSno, setSelectedPlanSno] = useState(null); + // 다른 더보기에서 단건 조회 시 포커스를 위한 zoneNo 저장 + const [diffRowZoneNo, setDiffRowZoneNo] = useState(0); + const [isMapLoading, setIsMapLoading] = useState(false); // 비행구역 그리기 const [drawObj, setDrawObj] = useState(); @@ -69,8 +79,6 @@ export default function OperationApprovalsContainer({ mode }) { // 시군구 const [district, setDistrict] = useState('전체'); - // 미니맵 레이어 - // const [previewLayer, setPreviewLayer] = useState(); const { map, mapType } = useSelector(state => state.mapState); @@ -105,6 +113,8 @@ export default function OperationApprovalsContainer({ mode }) { useEffect(() => { if (areaCoordList.length !== 0) { handlerAreaDraw(); + } else { + handlerRemoveArea(); } }, [areaCoordList]); @@ -115,7 +125,9 @@ export default function OperationApprovalsContainer({ mode }) { .queryRenderedFeatures(e.point) .find(feature => feature.source === 'operationLayer'); - if (features) setSelected(features.properties.key); + if (features) { + setSelected([features.properties.key]); + } }); window._mapbox = map; @@ -212,6 +224,14 @@ export default function OperationApprovalsContainer({ mode }) { }; }, []); + // 다른 더보기의 단건 조회 시 + useEffect(() => { + if (diffRowZoneNo > 0) { + const area = areaCoordList.filter(k => k.zoneNo === diffRowZoneNo); + handlerDetail(area); + } + }, [diffRowZoneNo]); + const handleDragEnd = e => { setIsPopup(true); const el = document.querySelector('.flight-approval-layer'); @@ -292,11 +312,22 @@ export default function OperationApprovalsContainer({ mode }) { } }; - const handlerDetail = area => { - if (area.length === 1) { - setSelected(area[0].planAreaSno); + //현재 선택한 sno 및 areacoordList 저장 + const handlerDetail = async area => { + if (area.length > 0) { + if (area.length > 1) { + const planAreaSno = []; + area.map(data => { + planAreaSno.push(data.planAreaSno); + }); + setSelected(planAreaSno); + } else { + setSelected([area[0].planAreaSno]); + } + setSelectedPlanSno(area[0].planSno); } else { - setSelected(null); + setSelected([]); + setSelectedPlanSno([]); } dispatch(clientSaveAreaCoordinateList(area)); @@ -304,6 +335,7 @@ export default function OperationApprovalsContainer({ mode }) { handlerMapInit(); }; + // 지도 레이어 초기화 const handlerMapInit = () => { let mapInstance = mode === 'container' ? map : window.opener._mapbox; @@ -320,9 +352,6 @@ export default function OperationApprovalsContainer({ mode }) { } dispatch(clientSetIsMapLoading(true)); - // const preview = mapInstance.getSource('operationLayer'); - - // if (preview) setPreviewLayer(preview); setIsMapLoading(true); @@ -331,9 +360,7 @@ export default function OperationApprovalsContainer({ mode }) { dispatch(clientMapInit(mapInstance)); }; - // 더보기 펼친게 두개(A,B)인 상황에서 - // A의 1번에 포커스 잡혀있다가 B의 1을 클릭하면 - // B구역이 안그려지고(A구역은 그대로) 포커스만 잡히는 에러 고치기 + // 비행구역 생성 및 화면 포커스 const handlerAreaDraw = () => { if (areaCoordList.length > 0) { operationLayer.features = []; @@ -367,12 +394,28 @@ export default function OperationApprovalsContainer({ mode }) { handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight'); if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) { + if (diffRowZoneNo > 0) { + setDiffRowZoneNo(0); + return; + } handlerInfoWindow(areaCoordList); mapObject?.getSource('operationLayer')?.setData(operationLayer); } } }; + // 비행구역 초기화 + const handlerRemoveArea = () => { + if (dataBlocks.length > 0) { + dataBlocks?.map(block => { + block.remove(); + }); + } + + operationLayer.features = []; + mapObject?.getSource('operationLayer')?.setData(operationLayer); + }; + // 데이터블록 표출 이벤트 const handlerInfoWindow = areaList => { if (dataBlocks.length > 0) { @@ -731,13 +774,25 @@ export default function OperationApprovalsContainer({ mode }) {

측정

- - -
@@ -796,7 +851,9 @@ export default function OperationApprovalsContainer({ mode }) { startDate={startDate} endDate={endDate} selected={selected} + selectedPlanSno={selectedPlanSno} handlerDetail={handlerDetail} + setDiffRowZoneNo={setDiffRowZoneNo} />
diff --git a/src/containers/rightMenuContainer.js b/src/containers/rightMenuContainer.js index 6be46e6b..83064094 100644 --- a/src/containers/rightMenuContainer.js +++ b/src/containers/rightMenuContainer.js @@ -10,6 +10,9 @@ function RightMenuContainer() { const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD')); const [endDate, setEndDate] = useState(); const [selected, setSelected] = useState(null); + const [selectedPlanSno, setSelectedPlanSno] = useState(null); + const [diffRowZoneNo, setDiffRowZoneNo] = useState(0); + // 식별번호 const [filterId, setFilterId] = useState(''); @@ -34,7 +37,9 @@ function RightMenuContainer() { switch (type) { case 'initalState': setFilter(payload.filter); - setSelected(payload.selected); + setSelected([payload.selected]); + setSelectedPlanSno(payload.selectedPlanSno); + setDiffRowZoneNo(payload.diffRowZoneNo); setStartDate(payload.startDate); setEndDate(payload.endDate); @@ -113,11 +118,26 @@ function RightMenuContainer() { handlerOpnerPostMessage('search', { search, searchDate, filterArea }); }; - const handlerDetail = area => { - if (area.length === 1) { - setSelected(area[0].planAreaSno); + const handlerDetail = async area => { + // if (area.length === 1) { + // setSelected(area[0].planAreaSno); + // } else { + // setSelected(null); + // } + if (area.length > 0) { + if (area.length > 1) { + const planAreaSno = []; + area.map(data => { + planAreaSno.push(data.planAreaSno); + }); + setSelected(planAreaSno); + } else { + setSelected([area[0].planAreaSno]); + } + setSelectedPlanSno(area[0].planSno); } else { - setSelected(null); + setSelected([]); + setSelectedPlanSno([]); } handlerOpnerPostMessage('detail', { area }); @@ -148,7 +168,9 @@ function RightMenuContainer() { startDate={startDate} endDate={endDate} selected={selected} + selectedPlanSno={selectedPlanSno} handlerDetail={handlerDetail} + setDiffRowZoneNo={setDiffRowZoneNo} />