diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index e8641ca6c..6da584f8e 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -1,19 +1,18 @@ -import { useWrStore } from "@/app/store"; -import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; -import { excelDownload, tableData } from "@/components/lib/func/commom"; -import { Title, UiTable, UITab, ContentsDiv, ScrollArea } from '@common/business_components'; -import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; -import React, { useCallback, useState, useEffect } from 'react'; import NewWindowPortal from '@/app/map/newWindowPortal'; -import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal"; -import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type"; -import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; -import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; +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 { 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 { useGisContext } from "@common/business_components/ui/map/Gis"; +import { 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 { set } from "react-hook-form"; +import { Title, UITab, UiTable } from '@common/business_components'; +import { useGisContext } from "@common/business_components/ui/map/Gis"; +import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; +import React, { useCallback, useEffect, useState } from 'react'; interface NewWindowPopupProps { featureData: any; @@ -25,27 +24,8 @@ interface NewWindowPopupProps { onClose: () => void; } -// 탭 -const TABS = [ - { val: "0", text: "재이용시설1" }, - { val: "1", text: "재이용시설2" }, - { val: "2", text: "재이용시설n" }, -]; - -// 데이터의 속성(key)을 사용자에게 보여줄 한글 이름으로 변환하기 위한 맵 -// 실제 데이터에 맞게 이 부분을 확장해야 합니다. -const propertyNameMap: { [key: string]: string } = { - fid: '고유 ID', - fcltNm: '시설명', - opertDe: '운영일자', - addr: '주소', - // ... 필요한 만큼 속성 매핑 추가 -}; - const NewWindowPopup: React.FC = ({ featureData, - checkedLayers = [], - checkedLayersData = [], seletectedLayerNm, onFeatureSelect, onClose @@ -77,12 +57,8 @@ const NewWindowPopup: React.FC = ({ const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore( (state) => state ); - let { rainSttnRes, rainSttnResCount } = rainSttn; + const { rainSttnRes, rainSttnResCount } = rainSttn; const [rainTable, setRainTable] = useState(); - const [rainBdstChgProps, setRainBdstChgProps] = useState<{ - 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 }); @@ -90,18 +66,14 @@ const NewWindowPopup: React.FC = ({ const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore( (state) => state ); - let { rswtSttnRes, rswtSttnResCount } = rswtSttn; + const { rswtSttnRes, rswtSttnResCount } = rswtSttn; const [rswtrTable, setRswtrTable] = useState(); const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false }); - const [rswtrBdstChgProps, setRswtrBdstChgProps] = useState<{ - isOpen: boolean; - chBuilding: chgBuilding[]; - }>({ isOpen: false, chBuilding: [] }); const [rswtrPage, setRswtrPage] = useState(1); // 온배수시설 변수 const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state); - let { htdflSttnRes,htdflSttnResCount } = htdflSttn; + const { htdflSttnRes,htdflSttnResCount } = htdflSttn; const [htdflTable, setHtdflTable] = useState(); const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [htdflPage, setHtdflPage] = useState(1) @@ -111,19 +83,19 @@ const NewWindowPopup: React.FC = ({ pbnst, pubHasuInit, } = useWrStore((state) => state); - let { pubFacHeadList, pbnstHasuRes } = pbnst; + const { pubFacHeadList, pbnstHasuRes } = pbnst; + const [hasuList, setHasuList] = useState(pbnstHasuRes || []); const [isRuseReg, setIsRuseReg] = useState<{ data: any | undefined; }>({ data: undefined }); const [hasuTable, setHasuTable] = useState(); const [hasuPage, setHasuPage] = useState(1); - const [hasuRes,setHasuRes] = useState() if (!featureData) return; ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// const getSelectedLayers = () => { let result = null; const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기 - let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 + let featureLayer: { get: (key: string) => any } = {get:()=> null}; layers.forEach((layer: any) => { const source = layer.getSource(); if (source && source.hasFeature && featureData @@ -135,8 +107,55 @@ const NewWindowPopup: React.FC = ({ return result; }; - useEffect(() => { - const layerId = getSelectedLayers(); + 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/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON); + //TODO : state 처리. + setHasuList( + rainRes.data.map((item: any) => { + return { + ...item, + fctCpc: Number(item.fctCpc) || 0, + ruse: item.ruse === false ? "N" : "Y", + }; + }); + ) + pbnstHasuRes = hasuList + if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] }); + + } 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}`) + rainSttnRes = res + setRainDetailModal({ isOpen: true, data: rainSttnRes[0] }); + } + else if(layerNm == '중수도시설'){ + const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`) + rswtSttnRes = res + console.log('중수도', res, featureCd) + setRswtrDetailModal({isOpen:true,data:rswtSttnRes[0]}) + } + else{ + const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) + htdflSttnRes = res + setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); + } + } + 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 == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null; @@ -160,7 +179,6 @@ const NewWindowPopup: React.FC = ({ setViewMode("detail") } } else if (layerId === null && seletectedLayerNm) { setViewMode("list") } - }, [featureData]); ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// @@ -182,7 +200,7 @@ const NewWindowPopup: React.FC = ({ if (!pbnstSttn.isInit) { getFlcts() } - }, [seletectedLayerNm, pbnstSttn.isInit]); + }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]); useEffect(()=>{ pbnSttnInit("1", "15", { partValue: "A", @@ -210,15 +228,6 @@ const NewWindowPopup: React.FC = ({ }); } // 재이용시설 조회 - 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 onPageChangeHandler = useCallback((page: number) => { pbnstSttnSearch( @@ -240,18 +249,18 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()),fclts ); }, []); - const excelClick = useCallback(() => { - // if (codeData) pbnstSttnSearch(1, "10000", codeData); - excelDownload( - [[]], - "하수재이용시설 현황", - "sample_pbnstSttn.xlsx", - "A1:U2" - ); - }, [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) => { @@ -263,29 +272,9 @@ const NewWindowPopup: React.FC = ({ // setViewMode('detail') onFeatureSelect(rainTable[index]); onClose(); - } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) { - if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null) - setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding }); - } - } - const detainSttn = async (featureCd: string, layerNm: string) => { - if (layerNm == '빗물이용시설') { - const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`) - rainSttnRes = res - setRainDetailModal({ isOpen: true, data: rainSttnRes[0] }); - } - else if(layerNm == '중수도시설'){ - const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`) - rswtSttnRes = res - console.log('중수도', res, featureCd) - setRswtrDetailModal({isOpen:true,data:rswtSttnRes[0]}) - } - else{ - const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) - htdflSttnRes = res - setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); } } + useEffect(() => { if (!rainSttn.isInit) { @@ -337,10 +326,6 @@ const NewWindowPopup: React.FC = ({ // setViewMode('detail') onFeatureSelect(rswtrTable[index]); onClose(); - } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { - if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') { - setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding }); - } } } useEffect(() => { @@ -369,18 +354,18 @@ const NewWindowPopup: React.FC = ({ ); setRswtrTable(chData); }, [code, rswtSttnRes]); - // 엑셀 관련 - const rswtSttnExcelDownload = useCallback(() => { - if (rswtSttn.excelList.length > 0) { - if (rswtSttn.excelList.length === 0) return; - excelDownload( - rswtSttn.excelList, - "중수도시설 현황", - "sample_rswtSttn.xlsx", - "A1:W3", - ); - } - }, [rswtSttn.excelList]) + // FIXME: 윤선화 차장님 요구사항으로 엑셀 다운로드 삭제. + // const rswtSttnExcelDownload = useCallback(() => { + // if (rswtSttn.excelList.length > 0) { + // if (rswtSttn.excelList.length === 0) return; + // excelDownload( + // rswtSttn.excelList, + // "중수도시설 현황", + // "sample_rswtSttn.xlsx", + // "A1:W3", + // ); + // } + // }, [rswtSttn.excelList]) useEffect(() => { rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd); @@ -433,24 +418,8 @@ const NewWindowPopup: React.FC = ({ 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 - if (pbnstHasuRes.length > 0) setIsRuseReg({ data: [pbnstHasuRes[0]] }); - - } catch (error) { - console.error("Error fetching data:", error); - } - }; - const hasuCellClick = (index: number | undefined, headId: string) => { + + const hasuCellClick = (index: number | undefined) => { if (index !== undefined && pbnstHasuRes !== undefined) { onFeatureSelect(pbnstHasuRes[index]); onClose(); @@ -466,15 +435,15 @@ const NewWindowPopup: React.FC = ({ layerId = seletectedLayerNm || ''; } //하수처리시설 - let isPrcsFclt = layerId == '하수처리시설' + const isPrcsFclt = layerId == '하수처리시설' // 재이용시설 - let isPbnst = layerId == '하수재이용시설'; + const isPbnst = layerId == '하수재이용시설'; // 빗물이용시설 - let isRain = layerId == '빗물이용시설'; + const isRain = layerId == '빗물이용시설'; // 중수도시설 - let isRswt = layerId == '중수도시설'; + const isRswt = layerId == '중수도시설'; // 온배수시설 - let isHtdfl = layerId == '온배수시설'; + const isHtdfl = layerId == '온배수시설'; if (isPrcsFclt) { if (viewMode == 'list') { return ( @@ -491,7 +460,6 @@ const NewWindowPopup: React.FC = ({ headName={""} cellClick={hasuCellClick} onPageChange={setHasuPage} - children={undefined} /> ) @@ -506,21 +474,19 @@ const NewWindowPopup: React.FC = ({ tableData={isRuseReg?.data || []} headlist={pubFacHeadList.slice(0, 4)} pageSize={1} - total={null} + total={0} headName={"위치정보"} cellClick={() => { }} onPageChange={() => { }} - children={undefined} /> { }} onPageChange={() => { }} - children={undefined} /> ) @@ -542,7 +508,6 @@ const NewWindowPopup: React.FC = ({ label: tab.name, onClick: () => setActiveTab(tab.id), }))} - children={undefined} /> = ({ } headlist={pbnstSttn.pbnstSttHeadList} pageSize={20} total={pbnstSttnResCount || 0} - cellClick={(index: number | undefined, headId: string) => { + cellClick={(index: number | undefined) => { pbnstCellClick(index); }} onPageChange={onPageChangeHandler} - /> + > + + ); } @@ -601,7 +567,6 @@ const NewWindowPopup: React.FC = ({ } headlist={rainSttn.rainSttHeadList} pageSize={20} total={rainSttnResCount} @@ -609,7 +574,9 @@ const NewWindowPopup: React.FC = ({ rainCellClick(index ?? undefined, headId); }} onPageChange={setRainPage} - /> + > + + ); } @@ -636,7 +603,6 @@ const NewWindowPopup: React.FC = ({ } headlist={rswtSttn.rswtSttHeadList} pageSize={20} total={rswtSttnResCount} @@ -644,7 +610,9 @@ const NewWindowPopup: React.FC = ({ rswtCellClick(index, headId); }} onPageChange={setRswtrPage} - /> + > + + ); } @@ -671,7 +639,6 @@ const NewWindowPopup: React.FC = ({ } headlist={htdflSttn.htdflSttHeadList} pageSize={20} total={htdflSttnResCount || 0} @@ -679,7 +646,9 @@ const NewWindowPopup: React.FC = ({ htdflCellClick(index ?? undefined, headId); }} onPageChange={setHtdflPage} - /> + > + + ); }