diff --git a/apps/sn/app/(map-layout)/map/components/common/table.ts b/apps/sn/app/(map-layout)/map/components/common/table.ts index cabb95649..68448af71 100644 --- a/apps/sn/app/(map-layout)/map/components/common/table.ts +++ b/apps/sn/app/(map-layout)/map/components/common/table.ts @@ -376,7 +376,7 @@ export const MsSwageMhlCol = [ { id: 'vrtc_len', title: '세로길이(m)' }, // { id: 'ang_dir', title: '표고' }, { id: 'altd_vl', title: '표고(EL.m)' }, - { id: 'dpthlVl', title: '심도(m)' }, + { id: 'dpthl_vl', title: '심도(m)' }, // { id: 'inst_mng_no', title: '기관관리번호' } ]; export const MsSwageMhlCol2 = [ @@ -507,7 +507,7 @@ export const ExclnSewagePumpCol2 = [ // { id: 'instMngNo', title: '기관관리번호' }, ] // 오수펌프장 -export const DrtwSewagePumpCol1 = [ +export const DrtwSewagePumpCol = [ // { id: 'fid', title: 'FID' }, // { id: 'geom', title: 'geometry' }, // { id: 'ftreSmbolCd', title: '지형지물부호코드' }, @@ -574,16 +574,16 @@ export const stofcbrCol = [ { id: 'drtn_angl', title: '방향각도(°)' }, ] export const stofcbrCol2 = [ - // { id: 'ftre_smbol_cd', title: '지형지물부호코드' }, - { id: 'pbadmsEmdCd', title: '시설관리번호' }, - // { id: 'pbadms_emd_cd', title: '행정읍면동코드' }, + // { id: 'ftreSmbolCd', title: '지형지물부호코드' }, + { id: 'fcltMngNo', title: '시설관리번호' }, + // { id: 'pbadmsEmdCd', title: '행정읍면동코드' }, { id: 'mapshtNo', title: '도엽번호' }, - // { id: 'mng_inst_cd', title: '관리기관코드' }, + // { id: 'mngInstCd', title: '관리기관코드' }, { id: 'instlYmd', title: '설치일자' }, - // { id: 'fclty_shp_cd', title: '시설물형태코드' }, + // { id: 'fcltyShpCd', title: '시설물형태코드' }, { id: 'worflwWallHgt', title: '월류벽높이(m)' }, - // { id: 'mhl_exst_yn_cd', title: '맨홀존재여부코드' }, - // { id: 'swage_mhl_ftre_smbol_cd', title: '하수맨홀지형지물부호코드' }, + // { id: 'mhlExstYnCd', title: '맨홀존재여부코드' }, + // { id: 'swageMhlFtreSmbolCd', title: '하수맨홀지형지물부호코드' }, { id: 'swageMhlMngNo', title: '하수맨홀관리번호' }, { id: 'drtnAngl', title: '방향각도(°)' }, ] diff --git a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx index 3e8229310..3a9b052a2 100644 --- a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx +++ b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx @@ -6,7 +6,7 @@ import { useGisContext } from "@common/business_components/ui/map/Gis"; import { Button } from "@common/components/ui"; import { useEffect, useRef, useState, useCallback, useMemo } from "react"; import { getLayerContentComponent } from "./components/common"; -import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol1, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "./components/common/table"; +import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "./components/common/table"; import InfilChart from './components/popupComponent/chart/infilChart'; import RdiiChart from './components/popupComponent/chart/rdiiChart'; import { useInfilChartModalStore, useRdiiChartModalStore } from "./components/popupComponent/chartModalStore"; @@ -14,7 +14,6 @@ import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue'; import { codeMapper } from "./components/common/codeMapper"; -// TODO: const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => { const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [layerNm, setLayerNm] = useState(""); // 레이어 이름 상태 @@ -59,59 +58,118 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, let result = null; const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기 let featureLayer: { get: (key: string) => any }; // 피처가 속한 레이어를 찾기 위한 변수 - layers.forEach((layer: any) => { + layers.some((layer: any) => { const source = layer.getSource(); + // console.log('실행됨3 source', source); + // console.log('실행됨3 featureData', featureData); + // console.log('실행됨3 featureData.fid', featureData.fid); + // if (source && featureData && featureData.fid) { + // featureLayer = layer; // 피처가 속한 레이어 찾기 + // } if (source && source.hasFeature && featureData && typeof featureData.getId === 'function' && source.hasFeature(featureData)) { featureLayer = layer; // 피처가 속한 레이어 찾기 + return true; // 반복 종료 } + return false; }); - // console.log("featureLayer.get('lyrTyNm');", featureLayer.get('lyrTyNm')); - // SearchModal 클릭 이벤트 - if (featureLayer.get('lyrNm') === null) { - setIsClicked(false); - if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설'; - else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역'; - else if (featureData.lyrTypeNm === 'tb_ms_stofcbr') result = '우수토실'; - else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실'; - else if (featureData.lyrTypeNm === 'tb_ms_swage_ppl') result = '하수관로'; - else if (featureData.lyrTypeNm === 'tb_ms_swage_pmstn') { - const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장'); - console.log('값 비교', featureData.values_.usg_cd.trim(), drtwPumpCode?.val); - if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) { - setIsDrtwSewagePump(false); - } else { - setIsDrtwSewagePump(true); - } - result = '하수펌프장'; - } - else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') result = '하수맨홀'; - } - else { + + if (featureData['ol_uid']) { // Gis 레이어 클릭 이벤트 setIsClicked(true); - const lyrTyNm = featureLayer.get('lyrTyNm'); - if (lyrTyNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설'; - else if (lyrTyNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역'; - else if (lyrTyNm === 'tb_ms_stofcbr') result = '우수토실'; - else if (lyrTyNm === 'om_dt_untrt_swg_rain') result = '중점우수토실'; - else if (lyrTyNm === 'tb_ms_swage_ppl') result = '하수관로'; - else if (lyrTyNm === 'tb_ms_swage_pmstn') { + console.log('gis data', featureData.values_); + const lyrTyNm = featureData.id_.split('.')[0]; + if (lyrTyNm === 'tb_ms_swage_ppl') { + result = '하수관로'; + setHeadlist(MsSwagePplCol) + setLayerSpecificNm(featureData.values_.fclt_mng_no); + } + else if (lyrTyNm === 'tb_ms_swage_mhl') { + result = '하수맨홀'; + setHeadlist(MsSwageMhlCol) + } + else if (lyrTyNm === 'tb_ms_swage_pmstn') { // 하수펌프장 const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장'); - console.log('값 비교', featureData.values_.usg_cd.trim(), drtwPumpCode?.val); if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) { setIsDrtwSewagePump(false); - } else { + setHeadlist(ExclnSewagePumpCol) + } + else { setIsDrtwSewagePump(true); + setHeadlist(DrtwSewagePumpCol) } result = '하수펌프장'; } - else if (lyrTyNm === 'tb_ms_swage_mhl') result = '하수맨홀'; + else if (lyrTyNm === 'tb_il_swage_prcs_fclt') { + result = '하수처리시설'; + setHeadlist(SwtrmtFcltCol) + } + else if (lyrTyNm === 'tb_ms_swage_prcs_zone') { + result = '하수처리구역'; + setHeadlist(SwtrmtPrcsZoneCol) + } + else if (lyrTyNm === 'tb_ms_stofcbr') { + result = '우수토실'; + setHeadlist(stofcbrCol) + } + else if (lyrTyNm === 'om_dt_untrt_swg_rain') { + result = '중점우수토실'; + setHeadlist(untrtSwgRainCol1) + setHeadlist2(untrtSwgRainCol2) + } else result = featureLayer.get('lyrNm'); } + else { + // SearchModal 클릭 이벤트 + setIsClicked(false); + console.log('SearchModal data', featureData); + const lyrTyNm = featureData.lyrTypeNm; + console.log('실행됨4 SearchModal 클릭 이벤트', lyrTyNm); + console.log('실행됨4 SearchModal 클릭 이벤트 featureData', featureData); + if (featureData.lyrTypeNm === 'tb_ms_swage_ppl') { + result = '하수관로'; + setHeadlist(MsSwagePplCol2) + setLayerSpecificNm(featureData.swtrmtFcltCd); + } + else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') { + result = '하수맨홀'; + setHeadlist(MsSwageMhlCol2) + setLayerSpecificNm(featureData.fcltMngNo); + } + else if (featureData.lyrTypeNm === 'tb_ms_swage_pmstn') { // 하수펌프장 + const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장'); + if (drtwPumpCode && featureData.usgCd.trim() === drtwPumpCode.val) { + console.log('오수펌프장'); + setIsDrtwSewagePump(false); + setHeadlist(ExclnSewagePumpCol2) + } + else { + console.log('빗물펌프장'); + setIsDrtwSewagePump(true); + setHeadlist(DrtwSewagePumpCol2) + } + setLayerSpecificNm(featureData.fcltMngNo); + result = '하수펌프장'; + } + else if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') { + result = '하수처리시설'; + setHeadlist(SwtrmtFcltCol2) + setLayerSpecificNm(featureData.swtrmtFcltCd); + } + else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') { + result = '하수처리구역'; + setHeadlist(SwtrmtPrcsZoneCol2); + setLayerSpecificNm(featureData.swtrmtFcltCd); + } + else if (featureData.lyrTypeNm === 'tb_ms_stofcbr') { + result = '우수토실'; + setHeadlist(stofcbrCol2) + setLayerSpecificNm(featureData.fcltMngNo); + } + // else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실'; + } return result; - // return featureLayer.get('lyrNm'); // 레이어 이름 출력 }; useEffect(() => { @@ -122,8 +180,10 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기 setLayerNm(selectedLayerName); // 상태 업데이트 - console.log('gis data', featureData.values_); - const data = featureData.values_; + // console.log('gis data', featureData.values_); + let data; + if (featureData['ol_uid']) data = featureData.values_; // Gis 레이어 클릭 이벤트일 때 + else data = featureData; // SearchModal 클릭 이벤트일 때 // 하수맨홀인 경우 용도코드를 텍스트로 변환 if (selectedLayerName === '하수맨홀' && data) { @@ -139,16 +199,11 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, // 🎯 기본 데이터 포맷팅 const formattedData = formatDisplayData(data); - if (featureData?.values_?.fclt_mng_no) setLayerSpecificNm(featureData.values_.fclt_mng_no); - else if (featureData?.values_?.swtrmt_fclt_cd) setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd); - else setLayerSpecificNm(featureData?.values_?.manage_no); setFetchData(formattedData); setTableData(formattedData); switch (selectedLayerName) { case '하수관로': - if (isClicked) setHeadlist(MsSwagePplCol) - else setHeadlist(MsSwagePplCol2) setButtonChk(true) // ✅ codeMapper 사용하여 API 결과도 변환 @@ -156,12 +211,8 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, layerName: selectedLayerName, data: { ...formattedData } })); - // setFetchData(mappedData); - // setTableData(mappedData); break; case '하수맨홀': - if (isClicked) setHeadlist(MsSwageMhlCol) - else setHeadlist(MsSwageMhlCol2) setButtonChk(true) // ✅ codeMapper 사용하여 API 결과도 변환 @@ -169,46 +220,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, layerName: selectedLayerName, data: { ...formattedData } })); - // setFetchData(mappedData); - // setTableData(mappedData); break; case '하수펌프장': - if (isDrtwSewagePump) { - if (isClicked) setHeadlist(DrtwSewagePumpCol1) - else setHeadlist(DrtwSewagePumpCol2) - } else { - if (isClicked) setHeadlist(ExclnSewagePumpCol) - else setHeadlist(ExclnSewagePumpCol2) - } - setButtonChk(true) setTableData(codeMapper({ layerName: selectedLayerName, data: { ...formattedData } })); - // setFetchData(mappedData); - // setTableData(mappedData); break; case '하수처리시설': - if (isClicked) setHeadlist(SwtrmtFcltCol) - else setHeadlist(SwtrmtFcltCol2) setButtonChk(false) break; case '하수처리구역': - if (isClicked) setHeadlist(SwtrmtPrcsZoneCol) - else setHeadlist(SwtrmtPrcsZoneCol2) setButtonChk(false) break; case '우수토실': - if (isClicked) setHeadlist(stofcbrCol) - else setHeadlist(stofcbrCol2) setButtonChk(true) setIsMainSsc(false) break; case '중점우수토실': - setHeadlist(untrtSwgRainCol1) - setHeadlist2(untrtSwgRainCol2) setButtonChk(false) setIsMainSsc(true) // 🎯 processedData도 포맷팅하여 설정