From 7ee7a0fc69891b0e62589f9fb7fb0406f4c4ff0d Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Thu, 31 Jul 2025 14:38:14 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=E3=85=8C=ED=8A=B8?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=EC=A4=91=20..?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/components/hasuFacility.tsx | 89 +++++ apps/wr/app/map/components/reuseFacility.tsx | 147 ++++++++ apps/wr/app/map/mainMap/page.tsx | 3 +- apps/wr/app/map/newWindowPopup.tsx | 356 +++---------------- apps/wr/app/map/util.ts | 58 +++ 5 files changed, 344 insertions(+), 309 deletions(-) create mode 100644 apps/wr/app/map/components/hasuFacility.tsx create mode 100644 apps/wr/app/map/components/reuseFacility.tsx create mode 100644 apps/wr/app/map/util.ts diff --git a/apps/wr/app/map/components/hasuFacility.tsx b/apps/wr/app/map/components/hasuFacility.tsx new file mode 100644 index 000000000..d93d4c30a --- /dev/null +++ b/apps/wr/app/map/components/hasuFacility.tsx @@ -0,0 +1,89 @@ +import { useWrStore } from "@/app/store"; +import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; +import { tableData } from "@/components/lib/func/commom"; +import { Title, UiTable } from "@common/business_components/ui"; +import { useEffect, useState } from "react"; +interface Props { + seletectedLayerNm: string; + viewMode: 'list' | 'detail' | 'nothing'; + onFeatureSelect: (feature: any) => void; + onClose: () => void; + isRuseReg: { data: any | undefined }; +} +const HasuFacility = ({ seletectedLayerNm, viewMode, onClose, onFeatureSelect, isRuseReg }: Props) => { + const { + code, + pbnst, + pubHasuInit, + } = useWrStore((state) => state); + const { pubFacHeadList, pbnstHasuRes, pbnstHasuResCount } = pbnst; + const [hasuTable, setHasuTable] = useState(); + const [hasuPage, setHasuPage] = useState(1); + useEffect(() => { + if (code.sggCd.length && pbnstHasuRes.length > 0) { + setHasuTable(tableData(pbnstHasuRes, { code })); + } + }, [code, pbnstHasuRes]); + useEffect(() => { + if (seletectedLayerNm !== '하수처리시설') return; + if (!pbnst.isInit) { + pubHasuInit("1", "0"); + } + }, [pbnst.isInit, pubHasuInit]); + useEffect(() => { + if (seletectedLayerNm !== '하수처리시설') return; + pubHasuInit(String(hasuPage), "0"); + }, [hasuPage, pubHasuInit]); + + const hasuCellClick = (index: number | undefined) => { + if (index !== undefined && pbnstHasuRes !== undefined) { + onFeatureSelect(pbnstHasuRes[index]); + onClose(); + } + }; + return (viewMode == 'list' ? ( +
+
+ + </div> + {/* 높이 조정 */} + <UiTable + tableData={hasuTable || []} + headlist={pubFacHeadList} + pageSize={11} + total={pbnstHasuResCount || 0} + headName={""} + cellClick={hasuCellClick} + onPageChange={setHasuPage} + /> + </div> + ) : + ( + <div style={{ overflowX: 'hidden' }}> + <div className="flex justify-between items-center mb-4"> + <Title title="하수처리시설 상세정보" /> + </div> + {/* 높이 조정 */} + <UiTable + tableData={isRuseReg?.data || []} + headlist={pubFacHeadList.slice(0, 4)} + pageSize={1} + total={0} + headName={"위치정보"} + cellClick={() => { }} + onPageChange={() => { }} + /> + <UiTable + tableData={isRuseReg?.data || []} + headlist={pubFacHeadList.slice(4)} + pageSize={1} + total={0} + headName={"기본정보"} + cellClick={() => { }} + onPageChange={() => { }} + /> + </div> + ) + ) +} +export default HasuFacility; \ No newline at end of file diff --git a/apps/wr/app/map/components/reuseFacility.tsx b/apps/wr/app/map/components/reuseFacility.tsx new file mode 100644 index 000000000..dd18a657e --- /dev/null +++ b/apps/wr/app/map/components/reuseFacility.tsx @@ -0,0 +1,147 @@ +import { useWrStore } from "@/app/store"; +import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; +import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type"; +import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal"; +import { Title, UITab, UiTable } from "@common/business_components/ui"; +import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; +import { useState, useEffect, useCallback } from "react"; +interface Props { + seletectedLayerNm: string; + viewMode: 'list' | 'detail' | 'nothing'; + setFcltPk: (pk: string) => void; + onFeatureSelect: (feature: any) => void; + onClose: () => void; + actTabData: { id: string; name: string; data: any } | undefined; + tabData: { id: string; name: string; data: any }[]; +} +const ResueFacility = ({ viewMode, seletectedLayerNm, tabData, actTabData, setFcltPk, onFeatureSelect, onClose}: Props) => { + const [activeTab, setActiveTab] = useState<string>(''); // 현재 활성화된 탭 + // 하수재이용시설 변수 + const { + pbnstSttn, + pbnstSttnSearch, + pbnSttnInit, + getFlcts + } = useWrStore((state) => state); + const { fclts, pbnstSttnResCount } = pbnstSttn + const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>() + // 재이용시설 cellClick 이벤트 (상세정보) + const pbnstCellClick = (index: number | undefined) => { + if ( + index !== undefined && + pbnstSttn.pbnstSttnRes && + pbnstSttn.pbnstSttnRes[index] + ) { + setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltId); + onFeatureSelect(pbnstSttn.pbnstSttnRes[index]); + onClose() + } + }; + + // 재이용 현황 초기값 + useEffect(() => { + console.log('재이용시설 초기값 호출', viewMode) + if (seletectedLayerNm !== '하수재이용시설') return; + if (!pbnstSttn.isInit) { + getFlcts() + } + }, [seletectedLayerNm, pbnstSttn.isInit]); + useEffect(() => { + if (seletectedLayerNm !== '하수재이용시설') return; + pbnSttnInit("1", "20", { + partValue: "A", + sidoValue: '0', + sigunValue: "0", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "" + }, String(new Date().getFullYear()), pbnstSttn.fclts); + }, [fclts, pbnSttnInit, pbnstSttn.fclts, seletectedLayerNm]) + useEffect(() => { + setBdstTable(pbnstSttn.pbnstSttnRes); + }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]); + + // 재이용시설 조회 + // 재이용시설 페이징처리 관련 함수 + const onPageChangeHandler = useCallback((page: number) => { + if (seletectedLayerNm !== '하수재이용시설') return; + pbnstSttnSearch( + false, + String(page), + String(20), + { + partValue: "A", + sidoValue: "0", + sigunValue: "0", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "", + }, + "", + String(new Date().getFullYear()), fclts + ); + }, [fclts, pbnstSttnSearch]); + // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제. + // const excelClick = useCallback(() => { + // // if (codeData) pbnstSttnSearch(1, "10000", codeData); + // excelDownload( + // [[]], + // "하수재이용시설 현황", + // "sample_pbnstSttn.xlsx", + // "A1:U2" + // ); + // }, [pbnstSttnSearch]); + return ( + viewMode == 'detail' ? + // 재이용시설 상세 + <> + <div className="flex justify-between items-center mb-4"> + <Title title="하수재이용시설 상세정보" /> + </div> + <div className="flex justify-between items-center mb-8"> + <UITab + defaultValue={activeTab} + tabList={tabData.map((tab) => ({ + value: tab.id, + label: tab.name, + onClick: () => setActiveTab(tab.id), + }))} + /> + </div> + <PbnstSttnModal + data={actTabData?.data[0] || ({} as customPbnst)} + titleVisible={false} + /> + </> : + <div style={{ overflowY: 'auto' }}> + <div className="flex justify-between items-center"> + <Title title="하수재이용시설 현황" /> + {/* <div className="flex gap-2 mt-8"> + <Button className={btnClass} color="primary" onClick={excelClick}> + 엑셀다운로드 + </Button> + </div> */} + </div> + <UiTable + headName={[]} + tableData={bdstTable || []} + headlist={pbnstSttn.pbnstSttHeadList} + pageSize={20} + total={pbnstSttnResCount || 0} + cellClick={(index: number | undefined) => { + pbnstCellClick(index); + }} + onPageChange={onPageChangeHandler} + > + <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} /> + </UiTable> + </div> + ) +} +export default ResueFacility; \ No newline at end of file diff --git a/apps/wr/app/map/mainMap/page.tsx b/apps/wr/app/map/mainMap/page.tsx index c9d58c422..56c9e823d 100644 --- a/apps/wr/app/map/mainMap/page.tsx +++ b/apps/wr/app/map/mainMap/page.tsx @@ -135,13 +135,14 @@ const Map = () => { const renderDetailView = useCallback( (props: any) => ( <NewWindowPopup + key={featureData?.fid || featureData?.id || featureData?.ftrIdn} onClose={handlePopupClose} checkedLayers={checkedLayers} checkedLayersData={checkedLayersData} {...props} /> ), - [handlePopupClose, checkedLayers, checkedLayersData] // 필요 시 의존성 넣기 + [checkedLayers, checkedLayersData] // 필요 시 의존성 넣기 ); return ( <div className="bg-container"> diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index ea13d85de..d8e6b6338 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -2,20 +2,20 @@ import NewWindowPortal from '@/app/map/newWindowPortal'; import { useWrStore } from "@/app/store"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; -import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; +import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; -import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type"; -import { fetchType, getFetch, postFectch } from "@/components/lib/api"; import { formatPhoneNumber, tableData } from "@/components/lib/func/commom"; -import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal"; import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal"; -import { Title, UITab, UiTable } from '@common/business_components'; +import { Title, UiTable } from '@common/business_components'; import { useGisContext } from "@common/business_components/ui/map/Gis"; import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form'; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; import moment from 'moment'; import React, { useCallback, useEffect, useRef, useState } from 'react'; +import ResueFacility from './components/reuseFacility'; +import { detainSttn, fetchHasuDetail, fetchpbnstDetail } from './util'; +import HasuFacility from './components/hasuFacility'; interface NewWindowPopupProps { featureData: any; @@ -44,15 +44,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ }, [onClose]); // 하수재이용시설 변수 - const { - code, - pbnstSttn, - pbnstSttnSearch, - pbnSttnInit, - getFlcts - } = useWrStore((state) => state); - const { fclts, pbnstSttnResCount } = pbnstSttn - const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>() + const {code} = useWrStore((state) => state); // 빗물재이용시설 변수 const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore( @@ -82,18 +74,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ const [htdflPage, setHtdflPage] = useState(1) const [htdflList, setHtdflList] = useState<customHtdflBdst[]>(htdflSttnRes || []); - //하수처리시설 변수 - const { - pbnst, - pubHasuInit, - } = useWrStore((state) => state); - const { pubFacHeadList, pbnstHasuRes, pbnstHasuResCount } = pbnst; - const [hasuList, setHasuList] = useState<pubHasuType[]>(pbnstHasuRes || []); + // 하수처리시설 변수 + const [hasuList, setHasuList] = useState<pubHasuType[]>([]); const [isRuseReg, setIsRuseReg] = useState<{ data: any | undefined; }>({ data: undefined }); - const [hasuTable, setHasuTable] = useState<pubHasuType[]>(); - const [hasuPage, setHasuPage] = useState<number>(1); // 수요처관리 변수 const { @@ -111,7 +96,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ const [mngList, setMngList] = useState<DemandCompType[]>(coSttnRes || []); ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// const getSelectedLayers = () => { - console.trace('호출확인',1) + console.trace('호출확인', 1) let result = null; const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기 let featureLayer: { get: (key: string) => any } = { get: () => null }; @@ -125,50 +110,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ result = featureLayer.get('lyrNm'); return result; }; - const fetchpbnstDetail = async (featureCd: string) => { - try { - const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`); - // 중복 데이터 추가 방지 - setTabDataFunc(response, featureCd); - } catch (error) { - console.error("Error fetching data:", error); - } - }; - const fetchHasuDetail = async (featureCd: string, data: string) => { - try { - const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON) - setHasuList( - rainRes.data.map((item: any) => { - return { - ...item, - fctCpc: Number(item.fctCpc) || 0, - ruse: item.ruse === false ? "N" : "Y", - }; - }) - ) - } catch (error) { - console.error("Error fetching data:", error); - } - }; - const detainSttn = async (featureCd: string, layerNm: string) => { - if (layerNm == '빗물이용시설') { //빗물이용시설 - const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`) - setRainList(res) - } - else if (layerNm == '중수도시설') { //중수도 시설 - const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`) - setRswtrList(res) - } - else if (layerNm == '수요처') { //수요처 - const res = await getFetch(fetchType.WR, `/reuseFc/request/1/20/0/${featureCd}`) - setMngList(res) - } - else { - const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) - setHtdflList(res) - setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); - } - } // 상세 목록 데이터 상태 처리 useEffect(() => { if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] }); @@ -186,12 +127,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ if (mngList.length > 0) setIsDmdModal({ isMoal: true, data: [mngList[0]] }); }, [mngList]) const lastCalledIdRef = useRef<string | null>(null); - const [layerId, setLayerId] = useState<string|null>(); -useEffect(() => { - const layers = getSelectedLayers(); - setLayerId(layers); -}, []); // 최초 렌더링 시 호출 - + const [layerId, setLayerId] = useState<string | null>(); + useEffect(() => { + const layers = getSelectedLayers(); + setLayerId(layers); + }, []); // 최초 렌더링 시 호출 useEffect(() => { if (!featureData || typeof featureData.getProperties !== "function" || featureData.getProperties() == '') return; const selectedProps = featureData.getProperties(); @@ -205,106 +145,28 @@ useEffect(() => { if (!layerId || typeof layerId !== 'string') return; const featureCd = layerId === '하수재이용시설' ? selectedProps?.swtrmt_fclt_cd : - ['빗물이용시설', '중수도시설', '온배수시설', '수요처'].includes(layerId) ? selectedProps?.bdst_nm : - layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm : - null; + ['빗물이용시설', '중수도시설', '온배수시설', '수요처'].includes(layerId) ? selectedProps?.bdst_nm : + layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm : + null; if (!featureCd || featureCd === fcltPk) return; - if (layerId === '하수재이용시설') { - fetchpbnstDetail(featureCd); - } else if (layerId === '하수처리시설') { - fetchHasuDetail(featureCd, selectedProps?.swtrmt_fclt_cd); - } else { - detainSttn(featureCd, layerId); - } setFcltPk(featureCd); - setViewMode("detail"); setActiveTab(featureCd); + setViewMode("detail"); + if (layerId === '하수재이용시설') { + fetchpbnstDetail(featureCd, setTabData); + } else if (layerId === '하수처리시설') { + fetchHasuDetail(featureCd, selectedProps?.swtrmt_fclt_cd).then((data) => { setHasuList(data) }) + } else { + detainSttn(featureCd, layerId).then((res) => { + if (layerId === '빗물이용시설') setRainList(res); + else if (layerId === '중수도시설') setRswtrList(res); + else if (layerId === '온배수시설'){ setHtdflList(res); setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });} + else if (layerId === '수요처') setMngList(res); + }); + } }, [featureData]); ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// - ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// - // 재이용시설 cellClick 이벤트 (상세정보) - const pbnstCellClick = (index: number | undefined) => { - if ( - index !== undefined && - pbnstSttn.pbnstSttnRes && - pbnstSttn.pbnstSttnRes[index] - ) { - setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltId); - onFeatureSelect(pbnstSttn.pbnstSttnRes[index]); - onClose() - } - }; - - // 재이용 현황 초기값 - useEffect(() => { - if (!pbnstSttn.isInit && seletectedLayerNm === '하수재이용시설') { - getFlcts() - } - }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]); - useEffect(() => { - if(seletectedLayerNm !== '하수재이용시설') return; - console.trace('check', 1) - pbnSttnInit("1", "20", { - partValue: "A", - sidoValue: '0', - sigunValue: "0", - regionValue: "", - unitWaterShedValue: "", - middleRegionValue: "", - envPartValue: "", - sidoText: "", - sigunText: "" - }, String(new Date().getFullYear()), pbnstSttn.fclts); - }, [fclts, pbnSttnInit, pbnstSttn.fclts, seletectedLayerNm]) - useEffect(() => { - setBdstTable(pbnstSttn.pbnstSttnRes); - }, [seletectedLayerNm, 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 }]; - }); - } - // 재이용시설 조회 - // 재이용시설 페이징처리 관련 함수 - const onPageChangeHandler = useCallback((page: number) => { - if(seletectedLayerNm!== '하수재이용시설') return; - pbnstSttnSearch( - false, - String(page), - String(20), - { - partValue: "A", - sidoValue: "0", - sigunValue: "0", - regionValue: "", - unitWaterShedValue: "", - middleRegionValue: "", - envPartValue: "", - sidoText: "", - sigunText: "", - }, - "", - String(new Date().getFullYear()), fclts - ); - }, [fclts, pbnstSttnSearch]); - // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제. - // const excelClick = useCallback(() => { - // // if (codeData) pbnstSttnSearch(1, "10000", codeData); - // excelDownload( - // [[]], - // "하수재이용시설 현황", - // "sample_pbnstSttn.xlsx", - // "A1:U2" - // ); - // }, [pbnstSttnSearch]); - ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// - ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// // 빗물재이용시설 cellClick 이벤트 (상세정보) const rainCellClick = (index: number | undefined, headId: string) => { @@ -321,7 +183,7 @@ useEffect(() => { useEffect(() => { - if(seletectedLayerNm !== '빗물이용시설') return; + if (seletectedLayerNm !== '빗물이용시설') return; if (!rainSttn.isInit) { rainSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd); } @@ -359,7 +221,7 @@ useEffect(() => { }, [code, rainSttnRes, rainSttn.rainSttHeadList]); useEffect(() => { - if(seletectedLayerNm !== '빗물이용시설') return; + if (seletectedLayerNm !== '빗물이용시설') return; rainSttnSearch(false, rainPage, "20", '', '', code.cityCd, code.sggCd); }, [code.cityCd, code.sggCd, rainPage, rainSttnSearch]); ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// @@ -375,14 +237,14 @@ useEffect(() => { } } useEffect(() => { - if(seletectedLayerNm !== '중수도시설') return; + if (seletectedLayerNm !== '중수도시설') return; if (!rswtSttn.isInit) { rswtSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd); } }, [code.cityCd, code.sggCd, rswtSttn.isInit, rswtSttnInit]); useEffect(() => { - if(seletectedLayerNm !== '중수도시설') return; + if (seletectedLayerNm !== '중수도시설') return; const data = tableData(rswtSttnRes, { code }); const chData = data .map((item: customRswtBdst) => { @@ -416,7 +278,7 @@ useEffect(() => { // }, [rswtSttn.excelList]) useEffect(() => { - if(seletectedLayerNm !== '중수도시설') return; + if (seletectedLayerNm !== '중수도시설') return; rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd); }, [code.cityCd, code.sggCd, rswtSttnSearch, rswtrPage]); ///////////////////////////////////////////// 중수도 시설 ////////////////////////////////////////////////// @@ -430,14 +292,14 @@ useEffect(() => { } }; useEffect(() => { - if(seletectedLayerNm !== '온배수시설') return; + if (seletectedLayerNm !== '온배수시설') return; if (!htdflSttn.isInit) { initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd); } }, [code.cityCd, code.sggCd, htdflSttn.isInit, initHtdfl]); useEffect(() => { - if(seletectedLayerNm !== '온배수시설') return; + if (seletectedLayerNm !== '온배수시설') return; const data = tableData(htdflSttnRes, { code }); const chData = data .map((item: any) => ({ @@ -451,38 +313,14 @@ useEffect(() => { }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]); useEffect(() => { - if(seletectedLayerNm !== '온배수시설') return; + if (seletectedLayerNm !== '온배수시설') return; htdflSttnSearch(true, htdflPage, "20", '', '', code.cityCd, code.sggCd); }, [code.cityCd, code.sggCd, htdflPage, htdflSttnSearch]); ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// - ///////////////////////////////////////////// 하수처리 시설 ////////////////////////////////////////////////// - useEffect(() => { - if (code.sggCd.length && pbnstHasuRes.length > 0) { - setHasuTable(tableData(pbnstHasuRes, { code })); - } - }, [code, pbnstHasuRes]); - useEffect(() => { - if(seletectedLayerNm !== '하수처리시설') return; - if (!pbnst.isInit) { - pubHasuInit("1", "0"); - } - }, [pbnst.isInit, pubHasuInit]); - useEffect(() => { - pubHasuInit(String(hasuPage), "0"); - }, [hasuPage, pubHasuInit]); - - const hasuCellClick = (index: number | undefined) => { - if (index !== undefined && pbnstHasuRes !== undefined) { - onFeatureSelect(pbnstHasuRes[index]); - onClose(); - } - }; - ///////////////////////////////////////////// 하수처리 시설 ////////////////////////////////////////////////// - ///////////////////////////////////////////// 수요처 관리 ////////////////////////////////////////////////// useEffect(() => { - if(seletectedLayerNm !== '수요처') return; + if (seletectedLayerNm !== '수요처') return; if (!coSttn.isInit) { coSttnInit("1", "20", "0"); } @@ -494,7 +332,7 @@ useEffect(() => { } }; useEffect(() => { - if(seletectedLayerNm !== '수요처') return; + if (seletectedLayerNm !== '수요처') return; if (coSttnRes) { if (coSttnRes?.length > 0 && code.cityCd.length > 0) { const data = tableData(coSttnRes, { code }); @@ -510,7 +348,7 @@ useEffect(() => { } }, [coSttnRes, code]); useEffect(() => { - if(seletectedLayerNm !== '수요처') return; + if (seletectedLayerNm !== '수요처') return; coSttnSearch(String(mngPage), "20", String(0)); }, [coSttnSearch, mngPage]); ///////////////////////////////////////////// 수요처 관리 ////////////////////////////////////////////////// @@ -521,10 +359,6 @@ useEffect(() => { if (layerId === null || layerId === undefined) { setLayerId(seletectedLayerNm || ''); } - //하수처리시설 - const isPrcsFclt = layerId == '하수처리시설' - // 재이용시설 - const isPbnst = layerId == '하수재이용시설'; // 빗물이용시설 const isRain = layerId == '빗물이용시설'; // 중수도시설 @@ -533,108 +367,14 @@ useEffect(() => { const isHtdfl = layerId == '온배수시설'; // 수요처관리 const isReuseMng = layerId == '수요처'; - if (isPrcsFclt) { - if (viewMode == 'list') { - return ( - <div style={{ overflowY: 'auto' }}> - <div className="flex justify-between items-center mb-4"> - <Title title="하수처리시설 현황" /> - </div> - {/* 높이 조정 */} - <UiTable - tableData={hasuTable || []} - headlist={pubFacHeadList} - pageSize={11} - total={pbnstHasuResCount || 0} - headName={""} - cellClick={hasuCellClick} - onPageChange={setHasuPage} - /> - </div> - ) - } else { - return ( - <div style={{ overflowX: 'hidden' }}> - <div className="flex justify-between items-center mb-4"> - <Title title="하수처리시설 상세정보" /> - </div> - {/* 높이 조정 */} - <UiTable - tableData={isRuseReg?.data || []} - headlist={pubFacHeadList.slice(0, 4)} - pageSize={1} - total={0} - headName={"위치정보"} - cellClick={() => { }} - onPageChange={() => { }} - /> - <UiTable - tableData={isRuseReg?.data || []} - headlist={pubFacHeadList.slice(4)} - pageSize={1} - total={0} - headName={"기본정보"} - cellClick={() => { }} - onPageChange={() => { }} - /> - </div> - ) - } + switch (layerId) { + case '하수재이용시설': + return (<ResueFacility viewMode={viewMode} seletectedLayerNm={layerId} tabData={tabData} actTabData={actTabData} setFcltPk={setFcltPk} onFeatureSelect={onFeatureSelect} onClose={onClose} />) + case '하수처리시설': + return(<HasuFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} isRuseReg={isRuseReg}/>) + default: + break; } - if (isPbnst) { - if (viewMode == 'detail') { - // 재이용시설 상세 - return ( - <> - <div className="flex justify-between items-center mb-4"> - <Title title="하수재이용시설 상세정보" /> - </div> - <div className="flex justify-between items-center mb-8"> - <UITab - defaultValue={activeTab} - tabList={tabData.map((tab) => ({ - value: tab.id, - label: tab.name, - onClick: () => setActiveTab(tab.id), - }))} - /> - </div> - <PbnstSttnModal - data={actTabData?.data[0] || ({} as customPbnst)} - titleVisible={false} - /> - </> - ); - } else { - // 재이용시설 목록 - return ( - <div style={{ overflowY: 'auto' }}> - <div className="flex justify-between items-center"> - <Title title="하수재이용시설 현황" /> - {/* <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}> - 엑셀다운로드 - </Button> - </div> */} - </div> - <UiTable - headName={[]} - tableData={bdstTable || []} - headlist={pbnstSttn.pbnstSttHeadList} - pageSize={20} - total={pbnstSttnResCount || 0} - cellClick={(index: number | undefined) => { - pbnstCellClick(index); - }} - onPageChange={onPageChangeHandler} - > - <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} /> - </UiTable> - </div> - ); - } - } - if (isRain) { if (viewMode == 'detail') { // 빗물이용시설 상세 diff --git a/apps/wr/app/map/util.ts b/apps/wr/app/map/util.ts new file mode 100644 index 000000000..e3428b300 --- /dev/null +++ b/apps/wr/app/map/util.ts @@ -0,0 +1,58 @@ +import { getFetch, postFectch, fetchType } from "@/components/lib/api"; + +const fetchpbnstDetail = async (featureCd: string, setTabData: any) => { + try { + const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`); + // 중복 데이터 추가 방지 + setTabDataFunc(response, featureCd, setTabData); + } catch (error) { + console.error("Error fetching data:", error); + } +}; +const fetchHasuDetail = async (featureCd: string, data: string) => { + try { + const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON) + // setHasuList + const filteredData = rainRes.data.map((item: any) => { + return { + ...item, + fctCpc: Number(item.fctCpc) || 0, + ruse: item.ruse === false ? "N" : "Y", + }; + }) + return filteredData + } catch (error) { + console.error("Error fetching data:", error); + } +}; +// 재이용시설 상세정보 +const setTabDataFunc = (res: any, pk: string, setTabData: any) => { + setTabData((prev) => { + if (prev.some((tab) => tab.id === pk)) { + return prev; // 이미 존재하는 탭이면 추가하지 않음 + } + return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }]; + }); +} + +const detainSttn = async (featureCd: string, layerNm: string) => { + if (layerNm == '빗물이용시설') { //빗물이용시설 + const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`) + return res + } + else if (layerNm == '중수도시설') { //중수도 시설 + const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`) + return res + } + else if (layerNm == '수요처') { //수요처 + const res = await getFetch(fetchType.WR, `/reuseFc/request/1/20/0/${featureCd}`) + return res + } + else { + const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) + return res + // setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); + } +} + +export { fetchHasuDetail, fetchpbnstDetail, detainSttn }; \ No newline at end of file