From 60ae8c9e728cfbabe46cd9545c083b33c0264cfe Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Fri, 25 Jul 2025 18:08:28 +0900 Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=9A=94=EC=B2=98=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 226 +++++++++++++++++++++-------- 1 file changed, 167 insertions(+), 59 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 4a3ad41bb..40247c0df 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -7,12 +7,14 @@ 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 { tableData } from "@/components/lib/func/commom"; +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 { 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, useState } from 'react'; interface NewWindowPopupProps { @@ -74,7 +76,7 @@ const NewWindowPopup: React.FC = ({ // 온배수시설 변수 const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state); - const { 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) @@ -92,11 +94,31 @@ const NewWindowPopup: React.FC = ({ }>({ data: undefined }); const [hasuTable, setHasuTable] = useState(); const [hasuPage, setHasuPage] = useState(1); + + // 수요처관리 변수 + const { + coSttn, + coSttnInit, + coSttnSearch, + // getDemandCompList, + // regDemandCompany, + // updateDemandCompany, + // coSttnTxtSearch, + // demandCompList, + } = useWrStore((state) => state); + const [mngTable, setMngTable] = useState(); + const [mngPage, setMngPage] = useState(1); + const { coSttnRes, coSttnResCount, coSttHeadList } = coSttn; + const [isDmdModal, setIsDmdModal] = useState<{ + isMoal: boolean; + data: any | undefined; + }>({ isMoal: false, data: undefined}); + const [mngList, setMngList] = useState(coSttnRes || []); ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// 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:()=> null}; + let featureLayer: { get: (key: string) => any } = { get: () => null }; layers.forEach((layer: any) => { const source = layer.getSource(); if (source && source.hasFeature && featureData @@ -122,13 +144,13 @@ const NewWindowPopup: React.FC = ({ const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/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", - }; - }) - ) + return { + ...item, + fctCpc: Number(item.fctCpc) || 0, + ruse: item.ruse === false ? "N" : "Y", + }; + }) + ) } catch (error) { console.error("Error fetching data:", error); } @@ -138,56 +160,63 @@ const NewWindowPopup: React.FC = ({ 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}`) + else if (layerNm == '중수도시설') { + const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`) setRswtrList(res) } - else{ + 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(()=>{ + useEffect(() => { if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] }); - },[hasuList]) - useEffect(()=>{ + }, [hasuList]) + useEffect(() => { if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] }); - },[rainList]) - useEffect(()=>{ + }, [rainList]) + useEffect(() => { if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] }); - },[rswtrList]) - useEffect(()=>{ + }, [rswtrList]) + useEffect(() => { if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] }); - },[htdflList]) + }, [htdflList]) + useEffect(() => { + if(mngList.length > 0) setIsDmdModal({ isMoal: true, data: [mngList[0]] }); + },[mngList]) 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; - if (featureCd && featureCd !== fcltPk) { - if (layerId == '하수재이용시설') { - featureCd = selectedVal?.swtrmt_fclt_cd; - setFcltPk(featureCd); // 현재 호출된 featureCd 저장 - setActiveTab(featureCd) - fetchpbnstDetail(featureCd); // 상세정보 - } - else if (layerId == '하수처리시설') { - featureCd = selectedVal?.swtrmt_fclt_nm; - setFcltPk(featureCd); // 현재 호출된 featureCd 저장 - fetchHasuDetail(featureCd, selectedVal?.swtrmt_fclt_cd); - } - else { - featureCd = selectedVal?.bdst_nm; - setFcltPk(featureCd) - if (layerId) { - detainSttn(featureCd, layerId); - } - } - setViewMode("detail") + if (featureData && typeof featureData.getProperties === "function") { + const selectedVal = featureData.getProperties(); + let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' || layerId == '수요처' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null; + if (featureCd && featureCd !== fcltPk) { + if (layerId == '하수재이용시설') { + featureCd = selectedVal?.swtrmt_fclt_cd; + setFcltPk(featureCd); // 현재 호출된 featureCd 저장 + setActiveTab(featureCd) + fetchpbnstDetail(featureCd); // 상세정보 } - } else if (layerId === null && seletectedLayerNm) { setViewMode("list") } + else if (layerId == '하수처리시설') { + featureCd = selectedVal?.swtrmt_fclt_nm; + setFcltPk(featureCd); // 현재 호출된 featureCd 저장 + fetchHasuDetail(featureCd, selectedVal?.swtrmt_fclt_cd); + } + else { + featureCd = selectedVal?.bdst_nm; + setFcltPk(featureCd) + if (layerId) { + detainSttn(featureCd, layerId); + } + } + setViewMode("detail") + } + } else if (layerId === null && seletectedLayerNm) { setViewMode("list") } ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// @@ -210,7 +239,7 @@ const NewWindowPopup: React.FC = ({ getFlcts() } }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]); - useEffect(()=>{ + useEffect(() => { pbnSttnInit("1", "15", { partValue: "A", sidoValue: '0', @@ -258,7 +287,7 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()), fclts ); }, [fclts, pbnstSttnSearch]); -// FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제. + // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제. // const excelClick = useCallback(() => { // // if (codeData) pbnstSttnSearch(1, "10000", codeData); // excelDownload( @@ -283,7 +312,7 @@ const NewWindowPopup: React.FC = ({ onClose(); } } - + useEffect(() => { if (!rainSttn.isInit) { @@ -427,7 +456,7 @@ const NewWindowPopup: React.FC = ({ useEffect(() => { pubHasuInit(String(hasuPage), "0"); }, [hasuPage, pubHasuInit]); - + const hasuCellClick = (index: number | undefined) => { if (index !== undefined && pbnstHasuRes !== undefined) { onFeatureSelect(pbnstHasuRes[index]); @@ -436,10 +465,42 @@ const NewWindowPopup: React.FC = ({ }; ///////////////////////////////////////////// 하수처리 시설 ////////////////////////////////////////////////// + ///////////////////////////////////////////// 수요처 관리 ////////////////////////////////////////////////// + useEffect(() => { + if (!coSttn.isInit) { + coSttnInit("1", "13", "0"); + } + }, [coSttn.isInit, coSttnInit]); + const coMngCellClick = (index: number | undefined) => { + if (index !== undefined && mngTable !== undefined) { + onFeatureSelect(mngTable[index]); + onClose(); + } + }; + useEffect(() => { + if (coSttnRes) { + if (coSttnRes?.length > 0 && code.cityCd.length > 0) { + const data = tableData(coSttnRes, { code }); + const chData = data.map((item: any) => ({ + ...item, + telno: formatPhoneNumber(item.telno || undefined), + regDt: moment(item.regDt).format("YYYY-MM-DD"), + dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}` + })); + // .filter((item: any) => item !== undefined); + setMngTable(chData); + } + } + }, [coSttnRes, code]); + useEffect(() => { + coSttnSearch(String(mngPage), "13", String(0)); + }, [coSttnSearch, mngPage]); + ///////////////////////////////////////////// 수요처 관리 ////////////////////////////////////////////////// + // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수 const renderConditionalContent = () => { const actTabData = tabData.find((tab) => tab.id === activeTab); - let layerId:string | undefined | null = getSelectedLayers(); + let layerId: string | undefined | null = getSelectedLayers(); if (layerId === null || layerId === undefined) { layerId = seletectedLayerNm || ''; } @@ -453,10 +514,12 @@ const NewWindowPopup: React.FC = ({ const isRswt = layerId == '중수도시설'; // 온배수시설 const isHtdfl = layerId == '온배수시설'; + // 수요처관리 + const isReuseMng = layerId == '수요처'; if (isPrcsFclt) { if (viewMode == 'list') { return ( -
+
</div> @@ -474,7 +537,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ ) } else { return ( - <div style={{overflowX:'hidden'}}> + <div style={{ overflowX: 'hidden' }}> <div className="flex justify-between items-center mb-4"> <Title title="하수처리시설 상세정보" /> </div> @@ -528,7 +591,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ } else { // 재이용시설 목록 return ( - <div style={{overflowY:'auto'}}> + <div style={{ overflowY: 'auto' }}> <div className="flex justify-between items-center"> <Title title="하수재이용시설 현황" /> {/* <div className="flex gap-2 mt-8"> @@ -600,7 +663,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ } else { // 중수도시설 목록 return ( - <div style={{overflowY:'auto'}}> + <div style={{ overflowY: 'auto' }}> <div className="flex justify-between items-center"> <Title title="중수도시설 현황" /> {/* <div className="flex gap-2 mt-8"> @@ -636,7 +699,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ } else { // 온배수시설 목록 return ( - <div style={{overflowY:'auto'}}> + <div style={{ overflowY: 'auto' }}> <div className="flex justify-between items-center"> <Title title="온배수시설 현황" /> {/* <div className="flex gap-2 mt-8"> @@ -662,15 +725,60 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({ ); } } - + if (isReuseMng) { + if (viewMode == 'detail') { + return ( + <div style={{ overflowX: 'hidden' }}> + <div className="flex justify-between items-center mb-4"> + <Title title="수요처 상세정보" /> + </div> + {/* 높이 조정 */} + <UiTable + tableData={isDmdModal?.data || []} + headlist={coSttHeadList.slice(0, 3)} + pageSize={1} + total={0} + headName={"위치정보"} + cellClick={() => { }} + onPageChange={() => { }} + /> + <UiTable + tableData={isDmdModal?.data || []} + headlist={coSttHeadList.slice(3)} + pageSize={1} + total={0} + headName={"기본정보"} + cellClick={() => { }} + onPageChange={() => { }} + /> + </div> + ) + } else if(viewMode == 'list') { + console.log('수요처 대이터 확인', mngTable, coSttHeadList); + ( <UiTable + headName={[]} + tableData={mngTable || []} + headlist={coSttHeadList} + pageSize={20} + total={coSttnResCount + 10 || 0} + cellClick={(index: number | undefined) => { + coMngCellClick(index); + // setUpdateData(coSttnRes[index as number]); + }} + onPageChange={(page) => { + setMngPage(page); + }} + ></UiTable>) + } + } return null; // 조건에 맞는 콘텐츠가 없을 경우 }; return ( viewMode == 'nothing' ? <></> : - <NewWindowPortal - onClose={memoizedOnClose} - title="시설 상세 정보" + <NewWindowPortal + onClose={memoizedOnClose} + title="시설 상세 정보" width={viewMode == 'list' ? window.screen.availWidth : 1100} height={viewMode == 'list' ? window.screen.availHeight : layerId == '하수처리시설' && viewMode == 'detail' ? 450 : 900} scrollbars='yes'