diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index e1a26267f..cd9bb8e00 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -10,9 +10,10 @@ import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstS import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; -import { getFetch } from "@/components/lib/api"; +import { fetchType, getFetch, postFectch } from "@/components/lib/api"; import { useGisContext } from "@common/business_components/ui/map/Gis"; import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal"; +import { set } from "react-hook-form"; interface NewWindowPopupProps { featureData: any; @@ -104,25 +105,26 @@ const NewWindowPopup: React.FC = ({ const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] }); 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); + pbnst, + pubHasuInit, + pubHasuSearch, + } = useWrStore((state) => state); + let { pubFacHeadList, pbnstHasuRes, pbnstRes } = pbnst; + const [isRuseReg, setIsRuseReg] = useState<{ + data:any | undefined; + }>({ data: undefined }); + const [hasuTable, setHasuTable] = useState(); + const [selectRow, setSelectRow] = useState(); + const [hasuPage, setHasuPage] = useState(1); if (!featureData) return; ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// useEffect(() => { const layerId = getSelectedLayers(); if (featureData && typeof featureData.getProperties === "function") { const selectedVal = featureData.getProperties(); - let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설'? selectedVal?.bdst_nm : layerId == '하수처리시설' ? 'a' : null; + let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null; if (featureCd && featureCd !== fcltPk) { if (layerId == '하수재이용시설') { featureCd = selectedVal?.swtrmt_fclt_cd; @@ -148,8 +150,10 @@ const NewWindowPopup: React.FC = ({ htdflSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); } - else if(layerId =='하수처리시설') { - + else if (layerId == '하수처리시설') { + featureCd = selectedVal?.swtrmt_fclt_nm; + setFcltPk(featureCd); // 현재 호출된 featureCd 저장 + const res = fetchHasuDetail(featureCd,selectedVal?.swtrmt_fclt_cd); }; setViewMode("detail") @@ -176,7 +180,7 @@ const NewWindowPopup: React.FC = ({ }; const getSelectedLayers = () => { let result = null; - const layers = gisMap ? gisMap.getLayers().getArray().filter((l:any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기 + const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기 let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 layers.forEach((layer: any) => { const source = layer.getSource(); @@ -414,19 +418,38 @@ const NewWindowPopup: React.FC = ({ }, [htdflPage]); ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// - useEffect(() => { - if (code.sggCd.length && pbnstHasuRes.length > 0) { - setHasuTable(tableData(pbnstHasuRes, { code })); - } - }, [code, pbnstHasuRes]); - useEffect(() => { - if (!pbnst.isInit) { - pubHasuInit("1", "0"); - } - }, [pbnst.isInit, pubHasuInit]); - useEffect(() => { - pubHasuInit(String(hasuPage), "0"); - }, [hasuPage]); + useEffect(() => { + if (code.sggCd.length && pbnstHasuRes.length > 0) { + setHasuTable(tableData(pbnstHasuRes, { code })); + } + }, [code, pbnstHasuRes]); + useEffect(() => { + if (!pbnst.isInit) { + pubHasuInit("1", "0"); + } + }, [pbnst.isInit, pubHasuInit]); + useEffect(() => { + pubHasuInit(String(hasuPage), "0"); + }, [hasuPage]); + const fetchHasuDetail = async (featureCd: string,data:string) => { + try { + const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`,[data],fetchType.COMMON); + const hasuList = rainRes.data.map((item: any) => { + return { + ...item, + fctCpc: Number(item.fctCpc) || 0, + ruse: item.ruse === false ? "N" : "Y", + }; + }); + pbnstHasuRes = hasuList + // console.log(hasuList) + if(pbnstHasuRes.length >0)setIsRuseReg({ data:[pbnstHasuRes[0]] }); + console.log(pbnstHasuRes) + + } catch (error) { + console.error("Error fetching data:", error); + } + }; // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수 const renderConditionalContent = () => { @@ -452,17 +475,46 @@ const NewWindowPopup: React.FC = ({
</div> - {/* 높이 조정 */} - <UiTable - tableData={hasuTable || []} - headlist={pubFacHeadList} - pageSize={10} - total={100000} - headName={""} - cellClick={()=>{}} - onPageChange={setHasuPage} - children={undefined} - /> + {/* 높이 조정 */} + <UiTable + tableData={hasuTable || []} + headlist={pubFacHeadList} + pageSize={10} + total={100000} + headName={""} + cellClick={() => { }} + onPageChange={setHasuPage} + children={undefined} + /> + </> + ) + } else { + return ( + <> + <div className="flex justify-between items-center mb-4"> + <Title title="하수처리시설 상세정보" /> + </div> + {/* 높이 조정 */} + <UiTable + tableData={isRuseReg?.data || []} + headlist={pubFacHeadList.slice(0,4)} + pageSize={1} + total={null} + headName={"위치정보"} + cellClick={() => { }} + onPageChange={() => { }} + children={undefined} + /> + <UiTable + tableData={isRuseReg?.data || []} + headlist={pubFacHeadList.slice(4)} + pageSize={1} + total={null} + headName={"기본정보"} + cellClick={() => { }} + onPageChange={() => { }} + children={undefined} + /> </> ) } @@ -525,7 +577,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ if (viewMode == 'detail') { // 빗물이용시설 상세 return ( - <SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} /> + <SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} /> ); } else { // 빗물이용시설 목록 @@ -560,7 +612,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ if (viewMode == 'detail') { // 중수도시설 상세 return ( - <SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst}/> + <SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst} /> ); } else { // 중수도시설 목록 @@ -595,7 +647,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ if (viewMode == 'detail') { // 온배수시설 상세 return ( - <SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst}/> + <SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst} /> ); } else { // 온배수시설 목록 @@ -630,11 +682,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ }; return ( - viewMode == 'nothing' ? <></> : - <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보"> - {/* 체크된 레이어에 따른 조건부 렌더링 */} - {renderConditionalContent()} - </NewWindowPortal> + viewMode == 'nothing' ? <></> : + <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보"> + {/* 체크된 레이어에 따른 조건부 렌더링 */} + {renderConditionalContent()} + </NewWindowPortal> ); };