From aa7ef37aaf353a46eeab4fe9ce23afebf362f300 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 4 Jul 2025 10:33:09 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EC=83=81=EC=84=B8=20/=20=ED=98=84=ED=99=A9?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EB=B6=84=EB=A6=AC=EC=9E=91=EC=97=85=20?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 128 +++++++++++++++++------------ 1 file changed, 76 insertions(+), 52 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 777c3dcf2..5946199a7 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -16,11 +16,13 @@ import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; import { getFetch } from "@/components/lib/api"; +import { useGisContext } from "@common/business_components/ui/map/Gis"; interface NewWindowPopupProps { featureData: any; checkedLayers?: string[]; checkedLayersData?: any[]; + seletectedLayerNm?: string onClose: () => void; } @@ -38,12 +40,16 @@ const NewWindowPopup: React.FC = ({ featureData, checkedLayers = [], checkedLayersData = [], + seletectedLayerNm, onClose }) => { + const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); const [activeTab, setActiveTab] = useState('0'); // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 - const [showDetailView, setShowDetailView] = useState(false); // 상세정보 화면 표시 상태 추가 + const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가 + const [showListView, setShowListView] = useState(false) + const [viewMode, setViewMode] = useState<"detail" | "list">("detail"); // "detail" 또는 "list"로 상태 관리 // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -56,8 +62,6 @@ const NewWindowPopup: React.FC = ({ pbnstSttn, pbnstSttnSearch, pbnSttnInit, - getPbnStnDetail, - pbnNmSearch, } = useWrStore((state) => state); const [bdstTable, setBdstTable] = useState(); const [pageNation, setPageNation] = useState(1); @@ -98,11 +102,7 @@ const NewWindowPopup: React.FC = ({ const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] }); - if (!featureData) { - return null; - } - - // 물재이용시설 cellClick 이벤트 (상세정보) + // 재이용시설 cellClick 이벤트 (상세정보) const pbnstCellClick = (index: number | undefined) => { if ( index !== undefined && @@ -112,36 +112,51 @@ const NewWindowPopup: React.FC = ({ setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) - setShowDetailView(true); // 상세정보 화면 표시 상태 변경 + setViewMode('detail') } }; - - useEffect(() => { - if (!pbnstSttn.isInit) { - pbnSttnInit("1", "13",{ - partValue: "A", - sidoValue: "0", - sigunValue: "", - regionValue: "", - unitWaterShedValue: "", - middleRegionValue: "", - envPartValue: "", - sidoText: "", - sigunText: "" - }, String(new Date().getFullYear())); + const getSelectedLayers = () => { + let result = null; + const layers = gisMap ? gisMap.getLayers().getArray() : []; // gisMap이 null인지 확인 후 레이어 가져오기 + let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 + layers.forEach((layer: any) => { + const source = layer.getSource(); + if (source && source.hasFeature && featureData + && typeof featureData.getId === 'function' && source.hasFeature(featureData)) { + featureLayer = layer; // 피처가 속한 레이어 찾기 } - }, [pbnstSttn.isInit]); + }); + result = featureLayer.get('lyrNm'); - useEffect(() => { - setBdstTable(pbnstSttn.pbnstSttnRes); - }, [pbnstSttn.pbnstSttnRes]); + return result; + }; + // 재이용 현황 초기값 + useEffect(() => { + if (!pbnstSttn.isInit) { + pbnSttnInit("1", "13", { + partValue: "A", + sidoValue: "0", + sigunValue: "", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "" + }, String(new Date().getFullYear())); + } + }, [pbnstSttn.isInit]); -// 재이용시설 상세정보 - const setTabDataFunc = (res:any, pk:string) => { + useEffect(() => { + setBdstTable(pbnstSttn.pbnstSttnRes); + }, [pbnstSttn.pbnstSttnRes]); + + // 재이용시설 상세정보 + const setTabDataFunc = (res: any, pk: string) => { setTabData((prev) => { if (prev.some((tab) => tab.id === pk)) { return prev; // 이미 존재하는 탭이면 추가하지 않음 - } + } return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }]; }); } @@ -175,17 +190,25 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()) ); }, []); - // useEffect(() => { - // if (featureData) { - // const selectedVal = featureData.getProperties(); - // const featureCd = selectedVal?.swtrmt_fclt_cd; - // if (featureCd && featureCd !== pbnstRuseFcltPk) { - // setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 - // setActiveTab(featureCd) - // fetchpbnstDetail(featureCd); // 상세정보 가져오기 - // } - // } - // }, [featureData]); + useEffect(() => { + if (seletectedLayerNm && seletectedLayerNm === getSelectedLayers()) { + console.log('레이어명이 일치하여 상세보기 비활성화'); // 디버깅 로그 추가 + setViewMode('list') + } + }, [seletectedLayerNm]); + + useEffect(() => { + if (featureData) { + const selectedVal = featureData.getProperties(); + const featureCd = selectedVal?.swtrmt_fclt_cd; + if (featureCd && featureCd !== pbnstRuseFcltPk) { + setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 + setActiveTab(featureCd) + fetchpbnstDetail(featureCd); // 상세정보 + setViewMode("detail"); // 상세 보기 활성화 + } + } + }, [featureData]); useEffect(() => { if (pbnstSttn.pbnstDetail) { @@ -248,18 +271,19 @@ const NewWindowPopup: React.FC = ({ layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설') ); const actTabData = tabData.find((tab) => tab.id === activeTab); - console.log('tavbData',actTabData) + const layerId = getSelectedLayers() // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음 // 재이용시설 - const isPbnst = true; + let isPbnst = layerId == '하수처리시설'; // 빗물이용시설 - const isRain = false; + let isRain = layerId == '빗물이용시설'; // 중수도시설 - const isRswt = false; + let isRswt = layerId == '중수도시설'; // 온배수시설 - const isHtdfl = false; + let isHtdfl = layerId == '온배수시설'; + if (isPbnst) { - if (showDetailView) { + if (viewMode=='detail') { // 재이용시설 상세 return ( <> @@ -278,7 +302,7 @@ const NewWindowPopup: React.FC = ({ /> tab.id === activeTab)?.data[0] || ({} as customPbnst)} + data={actTabData?.data[0] || ({} as customPbnst)} titleVisible={false} /> @@ -311,7 +335,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + if (isRain) { if (showDetailView) { // 빗물이용시설 상세 @@ -351,7 +375,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + if (isRswt) { if (showDetailView) { // 중수도시설 상세 @@ -391,7 +415,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + if (isHtdfl) { if (showDetailView) { // 온배수시설 상세 @@ -431,7 +455,7 @@ const NewWindowPopup: React.FC = ({ ); } } - + return null; // 조건에 맞는 콘텐츠가 없을 경우 }; From 916c0687062b9d4d24f221876e78bb048420f0e1 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 4 Jul 2025 11:00:34 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=A7=84=ED=96=89?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/htdflSttn/page.tsx | 3 ++- apps/wr/app/map/newWindowPopup.tsx | 24 ++++++++++-------------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/apps/wr/app/map/htdflSttn/page.tsx b/apps/wr/app/map/htdflSttn/page.tsx index e74d055d8..5702e0179 100644 --- a/apps/wr/app/map/htdflSttn/page.tsx +++ b/apps/wr/app/map/htdflSttn/page.tsx @@ -4,7 +4,7 @@ import Gis from "@common/business_components/ui/map/Gis"; import { useEffect, useRef, useState, useCallback } from "react"; import FeatureClickEventPopup from "../featureClickEventPopup"; import { mapService } from "../service"; -import { MapSearchBar } from "../mapSearchBar"; +// import { MapSearchBar } from "../mapSearchBar"; import NewWindowPopup from "../newWindowPopup"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; @@ -141,6 +141,7 @@ const Map = () => { onClose={handlePopupClose} // 메모이제이션된 함수 사용 checkedLayers={checkedLayers} checkedLayersData={checkedLayersData} + seletectedLayerNm={""} {...props} /> )} diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 5946199a7..976cd052b 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -23,6 +23,8 @@ interface NewWindowPopupProps { checkedLayers?: string[]; checkedLayersData?: any[]; seletectedLayerNm?: string + viewMode?:string + setViewMode?:React.Dispatch>; onClose: () => void; } @@ -41,15 +43,15 @@ const NewWindowPopup: React.FC = ({ checkedLayers = [], checkedLayersData = [], seletectedLayerNm, + viewMode, + setViewMode, onClose }) => { const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); const [activeTab, setActiveTab] = useState('0'); // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 - const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가 - const [showListView, setShowListView] = useState(false) - const [viewMode, setViewMode] = useState<"detail" | "list">("detail"); // "detail" 또는 "list"로 상태 관리 + // const [viewMode, setViewMode] = useState<"detail" | "list">("detail"); // "detail" 또는 "list"로 상태 관리 // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -112,7 +114,7 @@ const NewWindowPopup: React.FC = ({ setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) - setViewMode('detail') + setViewMode && setViewMode("detail") } }; const getSelectedLayers = () => { @@ -190,12 +192,6 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()) ); }, []); - useEffect(() => { - if (seletectedLayerNm && seletectedLayerNm === getSelectedLayers()) { - console.log('레이어명이 일치하여 상세보기 비활성화'); // 디버깅 로그 추가 - setViewMode('list') - } - }, [seletectedLayerNm]); useEffect(() => { if (featureData) { @@ -205,7 +201,7 @@ const NewWindowPopup: React.FC = ({ setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 setActiveTab(featureCd) fetchpbnstDetail(featureCd); // 상세정보 - setViewMode("detail"); // 상세 보기 활성화 + setViewMode && setViewMode("detail"); // 상세 보기 활성화 } } }, [featureData]); @@ -337,7 +333,7 @@ const NewWindowPopup: React.FC = ({ } if (isRain) { - if (showDetailView) { + if (viewMode == 'detail') { // 빗물이용시설 상세 return ( <> @@ -377,7 +373,7 @@ const NewWindowPopup: React.FC = ({ } if (isRswt) { - if (showDetailView) { + if (viewMode == 'detail') { // 중수도시설 상세 return ( <> @@ -417,7 +413,7 @@ const NewWindowPopup: React.FC = ({ } if (isHtdfl) { - if (showDetailView) { + if (viewMode == 'detail') { // 온배수시설 상세 return ( <> From bf32364514aa3fb68fd7d1016c83b386000d973a Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 4 Jul 2025 17:36:12 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=96=B4=20=EB=AA=85=20?= =?UTF-8?q?=EC=9A=B0=EC=B8=A1=EC=97=90=20=ED=81=B4=EB=A6=AD=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=98=84?= =?UTF-8?q?=ED=99=A9=20/=20=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EB=82=98=EB=89=98=EC=96=B4=EC=84=9C=20=EB=82=98=EC=98=A4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/htdflSttn/page.tsx | 5 ++-- apps/wr/app/map/newWindowPopup.tsx | 39 +++++++++++------------------- 2 files changed, 16 insertions(+), 28 deletions(-) diff --git a/apps/wr/app/map/htdflSttn/page.tsx b/apps/wr/app/map/htdflSttn/page.tsx index 5702e0179..535c08d69 100644 --- a/apps/wr/app/map/htdflSttn/page.tsx +++ b/apps/wr/app/map/htdflSttn/page.tsx @@ -136,16 +136,15 @@ const Map = () => { // /> // ) // } - detailView={(props: any) => ( + detailView={(props: any) =>( )} - onFeatureSelect={undefined} + onFeatureSelect={onFeatureSelect} setIsOpen={setIsOpen} setFeatureData={setFeatureData} featureData={featureData} diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 976cd052b..d29b0fe0f 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -23,8 +23,7 @@ interface NewWindowPopupProps { checkedLayers?: string[]; checkedLayersData?: any[]; seletectedLayerNm?: string - viewMode?:string - setViewMode?:React.Dispatch>; + viewMode?:'list' | 'detail' onClose: () => void; } @@ -43,15 +42,12 @@ const NewWindowPopup: React.FC = ({ checkedLayers = [], checkedLayersData = [], seletectedLayerNm, - viewMode, - setViewMode, onClose }) => { const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); const [activeTab, setActiveTab] = useState('0'); - // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 - // const [viewMode, setViewMode] = useState<"detail" | "list">("detail"); // "detail" 또는 "list"로 상태 관리 + const [viewMode,setViewMode] = useState<'list' | 'detail'>('list'); // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -65,8 +61,7 @@ const NewWindowPopup: React.FC = ({ pbnstSttnSearch, pbnSttnInit, } = useWrStore((state) => state); - const [bdstTable, setBdstTable] = useState(); - const [pageNation, setPageNation] = useState(1); + const [bdstTable, setBdstTable] = useState() const [pbnstRuseFcltPk, setPbnstRuseFcltPk] = useState(''); const [pbnDetaileData, setPbnDetaileData] = useState<{ isModal: boolean; @@ -114,7 +109,7 @@ const NewWindowPopup: React.FC = ({ setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) - setViewMode && setViewMode("detail") + setViewMode("detail") } }; const getSelectedLayers = () => { @@ -194,26 +189,18 @@ const NewWindowPopup: React.FC = ({ }, []); useEffect(() => { - if (featureData) { + if (featureData && typeof featureData.getProperties === "function") { const selectedVal = featureData.getProperties(); const featureCd = selectedVal?.swtrmt_fclt_cd; if (featureCd && featureCd !== pbnstRuseFcltPk) { setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 setActiveTab(featureCd) fetchpbnstDetail(featureCd); // 상세정보 - setViewMode && setViewMode("detail"); // 상세 보기 활성화 + setViewMode("detail") } - } + }else if(seletectedLayerNm){setViewMode("list")} }, [featureData]); - useEffect(() => { - if (pbnstSttn.pbnstDetail) { - setPbnDetaileData({ - isModal: true, - data: pbnstSttn.pbnstDetail, - }); - } - }, [pbnstSttn.pbnstDetail]); // 빗물재이용시설 cellClick 이벤트 (상세정보) const rainCellClick = (index: number | undefined, headId: string) => { @@ -267,8 +254,10 @@ const NewWindowPopup: React.FC = ({ layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설') ); const actTabData = tabData.find((tab) => tab.id === activeTab); - const layerId = getSelectedLayers() - // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음 + let layerId = getSelectedLayers(); + if(layerId === null || layerId === undefined) { + layerId = seletectedLayerNm || ''; + } // 재이용시설 let isPbnst = layerId == '하수처리시설'; // 빗물이용시설 @@ -365,7 +354,7 @@ const NewWindowPopup: React.FC = ({ cellClick={(index: number | undefined, headId: string) => { rainCellClick(index ?? undefined, headId); }} - onPageChange={setPageNation} + onPageChange={()=>{}} /> ); @@ -405,7 +394,7 @@ const NewWindowPopup: React.FC = ({ cellClick={(index: number | undefined, headId: string) => { rswtCellClick(index, headId); }} - onPageChange={setPageNation} + onPageChange={()=>{}} /> ); @@ -445,7 +434,7 @@ const NewWindowPopup: React.FC = ({ cellClick={(index: number | undefined, headId: string) => { htdflCellClick(index ?? undefined, headId); }} - onPageChange={setPageNation} + onPageChange={()=>{}} /> ); From b3a8c6af3603c7882bf9d17f3987146fc31146e2 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 7 Jul 2025 15:23:17 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=EC=A4=91=EC=88=98=EB=8F=84=EC=8B=9C?= =?UTF-8?q?=EC=84=A4=EA=B9=8C=EC=A7=80=20=ED=8C=9D=EC=97=85=EB=9C=A8?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=99=84=EB=A3=8C(=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EA=B5=AC=ED=98=84=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 200 ++++++++++++++++++------ apps/wr/app/map/rainPrfmncSttnPopup.tsx | 12 +- 2 files changed, 162 insertions(+), 50 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 15bab32c6..747f53971 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -1,7 +1,7 @@ import { useWrStore } from "@/app/store"; import { btnClass } from "@/app/store/common/code"; import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; -import { excelDownload } from "@/components/lib/func/commom"; +import { excelDownload, tableData } from "@/components/lib/func/commom"; import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components'; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; import { Button } from "@common/components/ui"; @@ -24,7 +24,7 @@ interface NewWindowPopupProps { checkedLayers?: string[]; checkedLayersData?: any[]; seletectedLayerNm?: string - viewMode?:'list' | 'detail' + viewMode?: 'list' | 'detail' onClose: () => void; } @@ -55,7 +55,9 @@ const NewWindowPopup: React.FC = ({ const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); const [activeTab, setActiveTab] = useState('0'); - const [viewMode,setViewMode] = useState<'list' | 'detail'>('list'); + const [viewMode, setViewMode] = useState<'list' | 'detail'>('list'); + const [fcltPk, setFcltPk] = useState(''); + // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -70,11 +72,6 @@ const NewWindowPopup: React.FC = ({ pbnSttnInit, } = useWrStore((state) => state); const [bdstTable, setBdstTable] = useState() - const [pbnstRuseFcltPk, setPbnstRuseFcltPk] = useState(''); - const [pbnDetaileData, setPbnDetaileData] = useState<{ - isModal: boolean; - data: customPbnst; - }>({ isModal: false, data: {} as customPbnst }); // 빗물재이용시설 변수 const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore( @@ -86,6 +83,7 @@ const NewWindowPopup: React.FC = ({ isOpen: boolean; chBuilding: chgBuilding[]; }>({ isOpen: false, chBuilding: [] }); + const [rainPage, setRainPage] = useState(1) const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false }); // 중수도시설 변수 @@ -99,6 +97,7 @@ const NewWindowPopup: React.FC = ({ isOpen: boolean; chBuilding: chgBuilding[]; }>({ isOpen: false, chBuilding: [] }); + const [rswtrPage, setRswtrPage] = useState(1); // 온배수시설 변수 const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state); @@ -106,7 +105,40 @@ const NewWindowPopup: React.FC = ({ const [htdflTable, setHtdflTable] = useState(); const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] }); + if(!featureData) return ; + ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// + useEffect(() => { + if (featureData && typeof featureData.getProperties === "function") { + const selectedVal = featureData.getProperties(); + const layerId = getSelectedLayers(); + let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : ''; + if (featureCd && featureCd !== fcltPk) { + if (layerId == '하수재이용시설') { + featureCd = selectedVal?.swtrmt_fclt_cd; + setFcltPk(featureCd); // 현재 호출된 featureCd 저장 + setActiveTab(featureCd) + fetchpbnstDetail(featureCd); // 상세정보 + } + else if (layerId == '빗물이용시설') { + featureCd = selectedVal?.bdst_nm; + setFcltPk(featureCd) + rainSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); + setRainDetailModal({ isOpen: true, data: rainSttn.rainSttnRes[0] }); + } + else if (layerId == '중수도시설') { + featureCd = selectedVal?.bdst_nm; + console.log(featureCd) + setFcltPk(featureCd) + rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); + setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] }); + } + setViewMode("detail") + } + } else if (seletectedLayerNm) { setViewMode("list") } + }, [featureData]); + ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// + ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// // 재이용시설 cellClick 이벤트 (상세정보) const pbnstCellClick = (index: number | undefined) => { if ( @@ -114,7 +146,7 @@ const NewWindowPopup: React.FC = ({ pbnstSttn.pbnstSttnRes && pbnstSttn.pbnstSttnRes[index] ) { - setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); + setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) setViewMode("detail") @@ -150,11 +182,11 @@ const NewWindowPopup: React.FC = ({ sigunText: "" }, String(new Date().getFullYear())); } - }, [pbnstSttn.isInit]); + }, [seletectedLayerNm, pbnstSttn.isInit]); useEffect(() => { setBdstTable(pbnstSttn.pbnstSttnRes); - }, [pbnstSttn.pbnstSttnRes]); + }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]); // 재이용시설 상세정보 const setTabDataFunc = (res: any, pk: string) => { @@ -195,22 +227,19 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()) ); }, []); - - useEffect(() => { - if (featureData && typeof featureData.getProperties === "function") { - const selectedVal = featureData.getProperties(); - const featureCd = selectedVal?.swtrmt_fclt_cd; - if (featureCd && featureCd !== pbnstRuseFcltPk) { - setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장 - setActiveTab(featureCd) - fetchpbnstDetail(featureCd); // 상세정보 - setViewMode("detail") - } - }else if(seletectedLayerNm){setViewMode("list")} - }, [featureData]); - + const excelClick = useCallback(() => { + // if (codeData) pbnstSttnSearch(1, "10000", codeData); + excelDownload( + [[]], + "하수재이용시설 현황", + "sample_pbnstSttn.xlsx", + "A1:U2" + ); + }, [pbnstSttnSearch]); + ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// + ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// // 빗물재이용시설 cellClick 이벤트 (상세정보) const rainCellClick = (index: number | undefined, headId: string) => { if ( @@ -218,23 +247,114 @@ const NewWindowPopup: React.FC = ({ rainTable !== undefined && headId !== 'chBuildingYn') { setRainDetailModal({ isOpen: true, data: rainTable[index] }) + setViewMode('detail') } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) { if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null) setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding }); } } + useEffect(() => { + if (!rainSttn.isInit) { + rainSttnInit(1, "20", "0", '', code.cityCd, code.sggCd); + } + }, [rainSttn.isInit, rainSttnInit]); + + useEffect(() => { + const data = tableData(rainSttnRes, { code }); + const chData = data + .map((item: any) => { + return { + ...item, + ...item.reuseBuilding[0], + ...item.reuseBuilding[0].rainyObj, + dtfcltCpct: item.reuseBuilding[0].rainyObj.dtfcltCpct === -1 + ? "확인불가" + : item.reuseBuilding[0].rainyObj.dtfcltCpct, + instlCst: item.reuseBuilding[0].instlCst === -1 + ? "확인불가" + : item.reuseBuilding[0].instlCst, + instlCstSprtAmt: item.reuseBuilding[0].instlCstSprtAmt === -1 + ? "확인불가" + : item.reuseBuilding[0].instlCstSprtAmt, + chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N", + pntfColArea: item.reuseBuilding[0].rainyObj.pntfColArea === -1 + ? "확인불가" + : item.reuseBuilding[0].rainyObj.pntfColArea, + filtrTrtmfctCpct: item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct === -1 + ? "확인불가" + : item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct, + archArea: Math.floor(item.archArea) === -1 ? "확인불가" : item.archArea, + }; + }) + .filter((item: any) => item.rainyObj !== undefined); + setRainTable(chData); + }, [code, rainSttnRes, rainSttn.rainSttHeadList]); + + useEffect(() => { + rainSttnSearch(rainPage, "20", '', '', code.cityCd, code.sggCd); + }, [rainPage]); + ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// + + ///////////////////////////////////////////// 중수도 시설 ////////////////////////////////////////////////// // 중수도시설 cellClick 이벤트 (상세정보) const rswtCellClick = (index: number | undefined, headId: string) => { if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { - setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] }) + setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] }); + setViewMode('detail') } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') { setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding }); } } } + useEffect(() => { + if (!rswtSttn.isInit) { + rswtSttnInit(1, "20", "0", '', code.cityCd, code.sggCd); + } + }, [rswtSttn.isInit, rswtSttnInit]); + useEffect(() => { + const data = tableData(rswtSttnRes, { code }); + const chData = data + .map((item: customRswtBdst) => { + return { + ...item, + ...item.reuseBuilding[0], + ...item.reuseBuilding[0]?.rswtrObj, + chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N', + instlCst: item.reuseBuilding[0]?.instlCst === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCst, + instlCstSprtAmt: item.reuseBuilding[0]?.instlCstSprtAmt === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCstSprtAmt, + archArea: item?.archArea.split('.')[0] !== '-1' ? item?.archArea.split('.')[0] : '확인불가' + } + }) + .filter( + (item: customRswtBdst) => + item.reuseBuilding[0]?.rswtrObj !== undefined + ); + + setRswtrTable(chData); + }, [code, rswtSttnRes]); +// 엑셀 관련 + const rswtSttnExcelDownload = useCallback(()=>{ + console.log('excel', rswtSttn.excelList, rswtrTable) + if (rswtSttn.excelList.length > 0) { + if (rswtSttn.excelList.length === 0) return; + excelDownload( + rswtSttn.excelList, + "중수도시설 현황", + "sample_rswtSttn.xlsx", + "A1:W3", + ); + } + },[rswtSttn.excelList]) + + useEffect(() => { + rswtSttnSearch(rswtrPage, "20", '', '', code.cityCd, code.sggCd); + }, [rswtrPage]); + ///////////////////////////////////////////// 중수도 시설 ////////////////////////////////////////////////// + + ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// // 온배수시설 cellClick 이벤트 (상세정보) const htdflCellClick = (index: number | undefined, headId: string) => { if ( @@ -245,16 +365,8 @@ const NewWindowPopup: React.FC = ({ setHtdflDetailModal({ isOpen: true, data: htdflTable[index] }); } }; - - const excelClick = useCallback(() => { - // if (codeData) pbnstSttnSearch(1, "10000", codeData); - excelDownload( - [[]], - "하수재이용시설 현황", - "sample_pbnstSttn.xlsx", - "A1:U2" - ); - }, [pbnstSttnSearch]); + + ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수 const renderConditionalContent = () => { @@ -264,20 +376,20 @@ const NewWindowPopup: React.FC = ({ ); const actTabData = tabData.find((tab) => tab.id === activeTab); let layerId = getSelectedLayers(); - if(layerId === null || layerId === undefined) { + if (layerId === null || layerId === undefined) { layerId = seletectedLayerNm || ''; } // 재이용시설 - let isPbnst = layerId == '하수처리시설'; + let isPbnst = layerId == '하수재이용시설'; // 빗물이용시설 let isRain = layerId == '빗물이용시설'; // 중수도시설 let isRswt = layerId == '중수도시설'; // 온배수시설 let isHtdfl = layerId == '온배수시설'; - + if (isPbnst) { - if (viewMode=='detail') { + if (viewMode == 'detail') { // 재이용시설 상세 return ( <> @@ -363,7 +475,7 @@ const NewWindowPopup: React.FC = ({ cellClick={(index: number | undefined, headId: string) => { rainCellClick(index ?? undefined, headId); }} - onPageChange={()=>{}} + onPageChange={setRainPage} /> ); @@ -388,7 +500,7 @@ const NewWindowPopup: React.FC = ({
<div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}> + <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}> 엑셀다운로드 </Button> </div> @@ -403,7 +515,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ cellClick={(index: number | undefined, headId: string) => { rswtCellClick(index, headId); }} - onPageChange={()=>{}} + onPageChange={setRswtrPage} /> </> ); @@ -443,7 +555,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ cellClick={(index: number | undefined, headId: string) => { htdflCellClick(index ?? undefined, headId); }} - onPageChange={()=>{}} + onPageChange={() => { }} /> </> ); diff --git a/apps/wr/app/map/rainPrfmncSttnPopup.tsx b/apps/wr/app/map/rainPrfmncSttnPopup.tsx index 18cdac8e6..b6ebf11ef 100644 --- a/apps/wr/app/map/rainPrfmncSttnPopup.tsx +++ b/apps/wr/app/map/rainPrfmncSttnPopup.tsx @@ -261,7 +261,7 @@ export default function RainPrfmncSttnPopup({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={filtrTrtmfctYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -279,7 +279,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={filtrTrtmfctYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -328,7 +328,7 @@ export default function RainPrfmncSttnPopup({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={instlCstSprtYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -371,7 +371,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={grntchBdstCertYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -389,7 +389,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={grntchBdstCertYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -407,7 +407,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={grntchBdstCertYn !== "Y"} + readOnly={true} /> </FormUi> )} From 4e9770e197becabced38597e876d7bac76a70c5e Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Mon, 7 Jul 2025 15:53:57 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=EC=98=A8=EB=B0=B0=EC=88=98=EC=8B=9C?= =?UTF-8?q?=EC=84=A4=20=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 33 ++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 747f53971..d2b44bbb3 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -105,6 +105,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>(); const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] }); + const [htdflPage,setHtdflPage] = useState(1) if(!featureData) return ; ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// useEffect(() => { @@ -132,6 +133,12 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] }); } + else if(layerId == '온배수시설'){ + featureCd = selectedVal?.bdst_nm; + setFcltPk(featureCd) + htdflSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); + setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); + } setViewMode("detail") } } else if (seletectedLayerNm) { setViewMode("list") } @@ -363,9 +370,31 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ htdflTable !== undefined ) { setHtdflDetailModal({ isOpen: true, data: htdflTable[index] }); + setViewMode('detail') } }; - + useEffect(() => { + if (!htdflSttn.isInit) { + initHtdfl(1, "20", "0", '', code.cityCd, code.sggCd); + } + }, [htdflSttn.isInit, initHtdfl]); + + useEffect(() => { + const data = tableData(htdflSttnRes, { code }); + const chData = data + .map((item: any) => ({ + ...item, + ...item.reuseBuilding[0], + ...item.reuseBuilding[0].htdflObj, + chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N", + })) + .filter((item: any) => item.htdflObj !== undefined); + setHtdflTable(chData); + }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]); + + useEffect(() => { + htdflSttnSearch(htdflPage, "20", '', '', code.cityCd, code.sggCd); + }, [htdflPage]); ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수 @@ -555,7 +584,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ cellClick={(index: number | undefined, headId: string) => { htdflCellClick(index ?? undefined, headId); }} - onPageChange={() => { }} + onPageChange={setHtdflPage} /> </> ); From 8e7d32a48bd15c0e941e7e21c5cd1bfb0a310c26 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Mon, 7 Jul 2025 19:56:56 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=ED=95=98=EC=88=98=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=EC=8B=9C=EC=84=A4=20=ED=98=84=ED=99=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 139 ++++++++++++++++++++--------- 1 file changed, 97 insertions(+), 42 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index d2b44bbb3..c6ca97042 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -1,8 +1,8 @@ import { useWrStore } from "@/app/store"; import { btnClass } from "@/app/store/common/code"; -import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; +import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; import { excelDownload, tableData } from "@/components/lib/func/commom"; -import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components'; +import { Title, UiTable, UITab, ContentsDiv, ScrollArea } from '@common/business_components'; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; import { Button } from "@common/components/ui"; import React, { useCallback, useState, useEffect } from 'react'; @@ -18,13 +18,14 @@ import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; import { getFetch } from "@/components/lib/api"; import { useGisContext } from "@common/business_components/ui/map/Gis"; +import ListDiv from "@common/business_components/ui/list_div"; interface NewWindowPopupProps { featureData: any; checkedLayers?: string[]; checkedLayersData?: any[]; seletectedLayerNm?: string - viewMode?: 'list' | 'detail' + viewMode?: 'list' | 'detail' | 'nothing' onClose: () => void; } @@ -55,7 +56,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]); const [activeTab, setActiveTab] = useState<string>('0'); - const [viewMode, setViewMode] = useState<'list' | 'detail'>('list'); + const [viewMode, setViewMode] = useState<'list' | 'detail' | 'nothing'>('list'); const [fcltPk, setFcltPk] = useState<string>(''); @@ -105,14 +106,27 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>(); const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] }); - const [htdflPage,setHtdflPage] = useState(1) - if(!featureData) return ; + const [htdflPage, setHtdflPage] = useState(1) + + const { + pbnst, + pubHasuInit, + pubHasuSearch, + } = useWrStore((state) => state); + const { pubFacHeadList, pbnstHasuRes, pbnstRes } = pbnst; + const [isRuseReg, setIsRuseReg] = useState<{ + isModal: boolean; + }>({ isModal: false }); + const [hasuTable, setHasuTable] = useState<pubHasuType[]>(); + const [selectRow, setSelectRow] = useState<pubHasuType>(); + const [hasuPage, setHasuPage] = useState<number>(1); + if (!featureData) return; ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// useEffect(() => { if (featureData && typeof featureData.getProperties === "function") { const selectedVal = featureData.getProperties(); const layerId = getSelectedLayers(); - let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : ''; + let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? 'a' : null; if (featureCd && featureCd !== fcltPk) { if (layerId == '하수재이용시설') { featureCd = selectedVal?.swtrmt_fclt_cd; @@ -125,6 +139,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ setFcltPk(featureCd) rainSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); setRainDetailModal({ isOpen: true, data: rainSttn.rainSttnRes[0] }); + setViewMode("detail") } else if (layerId == '중수도시설') { featureCd = selectedVal?.bdst_nm; @@ -132,14 +147,16 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ setFcltPk(featureCd) rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] }); + setViewMode("detail") } - else if(layerId == '온배수시설'){ + else if (layerId == '온배수시설') { featureCd = selectedVal?.bdst_nm; setFcltPk(featureCd) htdflSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); + setViewMode("detail") } - setViewMode("detail") + else if(layerId =='하수처리시설') setViewMode('nothing') } } else if (seletectedLayerNm) { setViewMode("list") } }, [featureData]); @@ -342,8 +359,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ setRswtrTable(chData); }, [code, rswtSttnRes]); -// 엑셀 관련 - const rswtSttnExcelDownload = useCallback(()=>{ + // 엑셀 관련 + const rswtSttnExcelDownload = useCallback(() => { console.log('excel', rswtSttn.excelList, rswtrTable) if (rswtSttn.excelList.length > 0) { if (rswtSttn.excelList.length === 0) return; @@ -354,14 +371,14 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ "A1:W3", ); } - },[rswtSttn.excelList]) + }, [rswtSttn.excelList]) useEffect(() => { rswtSttnSearch(rswtrPage, "20", '', '', code.cityCd, code.sggCd); }, [rswtrPage]); ///////////////////////////////////////////// 중수도 시설 ////////////////////////////////////////////////// - ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// + ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// // 온배수시설 cellClick 이벤트 (상세정보) const htdflCellClick = (index: number | undefined, headId: string) => { if ( @@ -374,29 +391,43 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ } }; useEffect(() => { - if (!htdflSttn.isInit) { - initHtdfl(1, "20", "0", '', code.cityCd, code.sggCd); - } - }, [htdflSttn.isInit, initHtdfl]); - - useEffect(() => { - const data = tableData(htdflSttnRes, { code }); - const chData = data - .map((item: any) => ({ - ...item, - ...item.reuseBuilding[0], - ...item.reuseBuilding[0].htdflObj, - chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N", - })) - .filter((item: any) => item.htdflObj !== undefined); - setHtdflTable(chData); - }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]); + if (!htdflSttn.isInit) { + initHtdfl(1, "20", "0", '', code.cityCd, code.sggCd); + } + }, [htdflSttn.isInit, initHtdfl]); - useEffect(() => { - htdflSttnSearch(htdflPage, "20", '', '', code.cityCd, code.sggCd); - }, [htdflPage]); + useEffect(() => { + const data = tableData(htdflSttnRes, { code }); + const chData = data + .map((item: any) => ({ + ...item, + ...item.reuseBuilding[0], + ...item.reuseBuilding[0].htdflObj, + chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N", + })) + .filter((item: any) => item.htdflObj !== undefined); + setHtdflTable(chData); + }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]); + + useEffect(() => { + htdflSttnSearch(htdflPage, "20", '', '', code.cityCd, code.sggCd); + }, [htdflPage]); ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// + useEffect(() => { + if (code.sggCd.length && pbnstHasuRes.length > 0) { + setHasuTable(tableData(pbnstHasuRes, { code })); + } + }, [code, pbnstHasuRes]); + useEffect(() => { + if (!pbnst.isInit) { + pubHasuInit("1", "41"); + } + }, [pbnst.isInit, pubHasuInit]); + useEffect(() => { + pubHasuInit(String(hasuPage), "41"); + }, [hasuPage, pubHasuInit]); + // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수 const renderConditionalContent = () => { // 특정 레이어가 체크되었는지 확인 @@ -408,6 +439,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ if (layerId === null || layerId === undefined) { layerId = seletectedLayerNm || ''; } + //하수처리시설 + let isPrcsFclt = layerId == '하수처리시설' // 재이용시설 let isPbnst = layerId == '하수재이용시설'; // 빗물이용시설 @@ -416,7 +449,28 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ let isRswt = layerId == '중수도시설'; // 온배수시설 let isHtdfl = layerId == '온배수시설'; - + if (isPrcsFclt) { + if (viewMode == 'list') { + return ( + <> + <div className="flex justify-between items-center mb-4"> + <Title title="하수처리시설 현황" /> + </div> + {/* 높이 조정 */} + <UiTable + tableData={bdstTable || []} + headlist={pubFacHeadList} + pageSize={10} + total={100000} + headName={""} + cellClick={()=>{}} + onPageChange={setHasuPage} + children={undefined} + /> + </> + ) + } + } if (isPbnst) { if (viewMode == 'detail') { // 재이용시설 상세 @@ -448,11 +502,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ <> <div className="flex justify-between items-center"> <Title title="하수재이용시설 현황" /> - <div className="flex gap-2 mt-8"> + {/* <div className="flex gap-2 mt-8"> <Button className={btnClass} color="primary" onClick={excelClick}> 엑셀다운로드 </Button> - </div> + </div> */} </div> <UiTable headName={[]} @@ -488,11 +542,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ <> <div className="flex justify-between items-center"> <Title title="빗물이용시설 현황" /> - <div className="flex gap-2 mt-8"> + {/* <div className="flex gap-2 mt-8"> <Button className={btnClass} color="primary" onClick={excelClick}> 엑셀다운로드 </Button> - </div> + </div> */} </div> <UiTable headName={[]} @@ -528,11 +582,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ <> <div className="flex justify-between items-center"> <Title title="중수도시설 현황" /> - <div className="flex gap-2 mt-8"> + {/* <div className="flex gap-2 mt-8"> <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}> 엑셀다운로드 </Button> - </div> + </div> */} </div> <UiTable headName={[]} @@ -568,11 +622,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ <> <div className="flex justify-between items-center"> <Title title="온배수시설 현황" /> - <div className="flex gap-2 mt-8"> + {/* <div className="flex gap-2 mt-8"> <Button className={btnClass} color="primary" onClick={excelClick}> 엑셀다운로드 </Button> - </div> + </div> */} </div> <UiTable headName={[]} @@ -595,6 +649,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ }; return ( + viewMode == 'nothing' ? <></> : <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보"> {/* 체크된 레이어에 따른 조건부 렌더링 */} {renderConditionalContent()}