ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 상류관로 보기 함수 위치 이동 (Gis.js -> popupComponent/smh.tsx)

Browse Source
This commit is contained in:
swcho
2025-09-01 13:06:53 +09:00
parent 875434239e
commit 27801244b0
3 changed files with 154 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/featureClickEventPopup.tsx
+75 -4
View File
@@ -12,8 +12,9 @@ import RdiiChart from './chart/rdiiChart';
import { useInfilChartModalStore, useRdiiChartModalStore } from "./chartModalStore";
import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
import { codeMapper } from "../common/codeMapper";
import { searchUpperPpls } from '@common/business_components/ui/map/Gis';
import LoadingOverlay from '@/components/ui/LoadingBar';
// import GisApp from "@common/business_components/ui/map/lib/gis.core";
import { searchUpperPpls } from "./smh";
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
@@ -58,7 +59,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
const getSelectedLayers = () => {
let result = null;
const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
let featureLayer: { get: (key: string) => any }; // 피처가 속한 레이어를 찾기 위한 변수
let featureLayer: any = null; // 피처가 속한 레이어를 찾기 위한 변수
layers.some((layer: any) => {
const source = layer.getSource();
// if (source && featureData && featureData.fid) {
@@ -121,7 +122,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
setHeadlist2(untrtSwgRainCol2);
setLayerSpecificNm(featureData.values_.manage_no);
}
else result = featureLayer.get('lyrNm');
else result = featureLayer ? featureLayer.get('lyrNm') : null;
}
else {
// SearchModal 클릭 이벤트
@@ -384,6 +385,76 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
// 레이어명에 따라 상세페이지 렌더링
const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
// const searchUpperPpls = async (fcltMngNo: any) => {
// const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
// const res = await fetch(`${BASE_URL}/v1/fcltmhl/upperPpls/${fcltMngNo}`, {
// method: "GET",
// });
// let data = null;
// if (res.ok) {
// try {
// // 응답이 비어있는지 확인
// const contentLength = res.headers.get("content-length");
// if (contentLength === "0")
// alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
// // 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
// const text = await res.text();
// if (!text || text.trim() === "")
// alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
// // JSON 파싱 시도
// data = JSON.parse(text);
// } catch (error) {
// console.error("JSON parsing error:", error);
// alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
// }
// }
// const select: any = GisApp.Module.select;
// // const gisMap = GisApp.Module.core?.map;
// let foundFeature: any = null;
// data.forEach((item: any) => {
// const pplMngNo = item.ppl_mng_no.trim();
// gisMap
// .getLayers()
// .getArray()
// .filter((e: any) => e.get("lyrTyNm") == "tb_ms_swage_ppl")
// .forEach((layer: any) => {
// const source = layer.getSource?.();
// if (source?.getFeatures) {
// const features = source.getFeatures();
// for (const f of features) {
// if (f.values_.fclt_mng_no.trim() === pplMngNo) {
// foundFeature = f;
// break;
// }
// }
// }
// });
// if (foundFeature) select?.selectMultiFeature?.(foundFeature, true);
// });
// if (!foundFeature) alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
// let geometry = foundFeature?.getGeometry();
// if (geometry) {
// let extent = geometry.getExtent();
// gisMap.getView().fit(extent, {
// duration: 300,
// padding: [50, 50, 50, 50],
// maxZoom: 14,
// constrainResolution: true,
// nearest: true,
// });
// }
// };
return (
<div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-5rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[50]">
<LoadingOverlay isLoading={isLoading} />
@@ -424,7 +495,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
className="px-2 py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
onClick={() => {
setIsLoading(true);
searchUpperPpls(layerSpecificNm).finally(() => setIsLoading(false));
searchUpperPpls(gisMap, layerSpecificNm).finally(() => setIsLoading(false));
}}
>
상류관로 보기
apps/sn/app/(map-layout)/map/components/popupComponent/smh.tsx
+78
View File
@@ -1,6 +1,84 @@
// 하수맨홀
import { VerticalTable } from '@/components/ui/verticalTable';
import { useEffect, useState } from 'react';
import GisApp from "@common/business_components/ui/map/lib/gis.core";
// exported helper: 상류관로 검색 및 선택 (FeatureClickEventPopup에서 사용)
export async function searchUpperPpls(gisMap: any, fcltMngNo: any) {
const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
const res = await fetch(`${BASE_URL}/v1/fcltmhl/upperPpls/${fcltMngNo}`, {
method: "GET",
});
let data: any = null;
if (res.ok) {
try {
// 응답이 비어있는지 확인
const contentLength = res.headers.get("content-length");
if (contentLength === "0") {
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
return;
}
// 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
const text = await res.text();
if (!text || text.trim() === "") {
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
return;
}
// JSON 파싱 시도
data = JSON.parse(text);
} catch (error) {
console.error("JSON parsing error:", error);
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
return;
}
} else {
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
return;
}
const select: any = GisApp.Module.select;
let foundFeature: any = null;
(data || []).forEach((item: any) => {
const pplMngNo = item.ppl_mng_no?.trim?.();
gisMap
.getLayers()
.getArray()
.filter((e: any) => e.get("lyrTyNm") == "tb_ms_swage_ppl")
.forEach((layer: any) => {
const source = layer.getSource?.();
if (source?.getFeatures) {
const features = source.getFeatures();
for (const f of features) {
if (f.values_.fclt_mng_no?.trim?.() === pplMngNo) {
foundFeature = f;
break;
}
}
}
});
if (foundFeature) select?.selectMultiFeature?.(foundFeature, true);
});
if (!foundFeature) alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
const geometry = foundFeature?.getGeometry();
if (geometry) {
const extent = geometry.getExtent();
gisMap.getView().fit(extent, {
duration: 300,
padding: [50, 50, 50, 50],
maxZoom: 14,
constrainResolution: true,
nearest: true,
});
}
}
const inputColumn = [
{ id: "swtrmtZoneNm", title: "처리구역", type: "input" },
apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+1 -6
View File
@@ -80,12 +80,9 @@ const SearchModal: React.FC<SearchModalProps> = ({
const [end2, setEnd2] = useState("");
const [var1, setVar1] = useState("");
const [var2, setVar2] = useState("");
const [var3, setVar3] = useState("");
const [var4, setVar4] = useState("");
// 시작, 종료
const [yearFilter, setYearFilter] = useState({ start: "", end: "" });
const { ctpv, sgg, BIZ_TY_CD, BIZ_SE_CD } = useStore();
const { ctpv, sgg, BIZ_TY_CD } = useStore();
// 오늘 날짜 구하기
@@ -128,8 +125,6 @@ const SearchModal: React.FC<SearchModalProps> = ({
setEnd2("");
setVar1("");
setVar2("");
setVar3("");
setVar4("");
setCtpvCd("0");
setSggCd("0");
setYearFilter({