From 8e7d32a48bd15c0e941e7e21c5cd1bfb0a310c26 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 7 Jul 2025 19:56:56 +0900 Subject: [PATCH] =?UTF-8?q?=ED=95=98=EC=88=98=EC=B2=98=EB=A6=AC=EC=8B=9C?= =?UTF-8?q?=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 = ({ 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' | 'nothing'>('list'); const [fcltPk, setFcltPk] = useState(''); @@ -105,14 +106,27 @@ 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: [] }); - 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(); + const [selectRow, setSelectRow] = useState(); + const [hasuPage, setHasuPage] = useState(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 = ({ 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 = ({ 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 = ({ 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 = ({ "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 = ({ } }; 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 = ({ if (layerId === null || layerId === undefined) { layerId = seletectedLayerNm || ''; } + //하수처리시설 + let isPrcsFclt = layerId == '하수처리시설' // 재이용시설 let isPbnst = layerId == '하수재이용시설'; // 빗물이용시설 @@ -416,7 +449,28 @@ const NewWindowPopup: React.FC = ({ let isRswt = layerId == '중수도시설'; // 온배수시설 let isHtdfl = layerId == '온배수시설'; - + if (isPrcsFclt) { + if (viewMode == 'list') { + return ( + <> +
+ + </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()}