diff --git a/apps/wr/app/map/htdflSttn/page.tsx b/apps/wr/app/map/htdflSttn/page.tsx index 7b804b7cd..b3a030421 100644 --- a/apps/wr/app/map/htdflSttn/page.tsx +++ b/apps/wr/app/map/htdflSttn/page.tsx @@ -4,7 +4,7 @@ import Gis from "@common/business_components/ui/map/Gis"; import { useEffect, useRef, useState, useCallback } from "react"; import FeatureClickEventPopup from "../featureClickEventPopup"; import { mapService } from "../service"; -import { MapSearchBar } from "../mapSearchBar"; +// import { MapSearchBar } from "../mapSearchBar"; import NewWindowPopup from "../newWindowPopup"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; @@ -136,7 +136,7 @@ const Map = () => { // /> // ) // } - detailView={(props: any) => ( + detailView={(props: any) =>( { {...props} /> )} - onFeatureSelect={undefined} + onFeatureSelect={onFeatureSelect} setIsOpen={setIsOpen} setFeatureData={setFeatureData} featureData={featureData} diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index ebfcac1ca..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 { excelDownload } from "@/components/lib/func/commom"; -import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components'; +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 { Button } from "@common/components/ui"; import React, { useCallback, useState, useEffect } from 'react'; @@ -16,11 +16,16 @@ import RswtrPrfmncsSttnPopup from "@/app/map/rswtrPrfmncSttnPopup"; import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; 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' | 'nothing' onClose: () => void; } @@ -45,11 +50,15 @@ const NewWindowPopup: React.FC = ({ featureData, checkedLayers = [], checkedLayersData = [], + seletectedLayerNm, onClose }) => { - const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0"); - // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음 - const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가 + 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' | 'nothing'>('list'); + const [fcltPk, setFcltPk] = useState(''); + // onClose 함수를 useCallback으로 메모이제이션 const memoizedOnClose = useCallback(() => { @@ -62,15 +71,8 @@ const NewWindowPopup: React.FC = ({ pbnstSttn, pbnstSttnSearch, pbnSttnInit, - getPbnStnDetail, - pbnNmSearch, } = useWrStore((state) => state); - const [bdstTable, setBdstTable] = useState(); - const [pageNation, setPageNation] = useState(1); - const [pbnDetaileData, setPbnDetaileData] = useState<{ - isModal: boolean; - data: customPbnst; - }>({ isModal: false, data: {} as customPbnst }); + const [bdstTable, setBdstTable] = useState() // 빗물재이용시설 변수 const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore( @@ -82,6 +84,7 @@ const NewWindowPopup: React.FC = ({ 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 }); // 중수도시설 변수 @@ -95,6 +98,7 @@ const NewWindowPopup: React.FC = ({ isOpen: boolean; chBuilding: chgBuilding[]; }>({ isOpen: false, chBuilding: [] }); + const [rswtrPage, setRswtrPage] = useState(1); // 온배수시설 변수 const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state); @@ -102,71 +106,151 @@ 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 null; - } + 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 : layerId == '하수처리시설' ? 'a' : null; + if (featureCd && featureCd !== fcltPk) { + if (layerId == '하수재이용시설') { + featureCd = selectedVal?.swtrmt_fclt_cd; + setFcltPk(featureCd); // 현재 호출된 featureCd 저장 + setActiveTab(featureCd) + fetchpbnstDetail(featureCd); // 상세정보 + } + else if (layerId == '빗물이용시설') { + featureCd = selectedVal?.bdst_nm; + 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; + console.log(featureCd) + setFcltPk(featureCd) + rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd); + setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] }); + setViewMode("detail") + } + 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") + } + else if(layerId =='하수처리시설') setViewMode('nothing') + } + } else if (seletectedLayerNm) { setViewMode("list") } + }, [featureData]); + ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// - // 2. RuseMngTable에 필요한 tableData를 생성합니다. (단일 행 데이터) - const tableData = [featureData]; - console.log("tableData", tableData); - - // 물재이용시설 cellClick 이벤트 (상세정보) + ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// + // 재이용시설 cellClick 이벤트 (상세정보) const pbnstCellClick = (index: number | undefined) => { if ( index !== undefined && pbnstSttn.pbnstSttnRes && pbnstSttn.pbnstSttnRes[index] ) { - const pbnstRuseFcltPk = pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk; - getPbnStnDetail(pbnstRuseFcltPk); + setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk); + fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) + setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk) + setViewMode("detail") } }; + const getSelectedLayers = () => { + let result = null; + const layers = gisMap ? gisMap.getLayers().getArray() : []; // gisMap이 null인지 확인 후 레이어 가져오기 + let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수 + layers.forEach((layer: any) => { + const source = layer.getSource(); + if (source && source.hasFeature && featureData + && typeof featureData.getId === 'function' && source.hasFeature(featureData)) { + featureLayer = layer; // 피처가 속한 레이어 찾기 + } + }); + result = featureLayer.get('lyrNm'); + + return result; + }; + // 재이용 현황 초기값 + useEffect(() => { + if (!pbnstSttn.isInit) { + pbnSttnInit("1", "13", { + partValue: "A", + sidoValue: "0", + sigunValue: "", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "" + }, String(new Date().getFullYear())); + } + }, [seletectedLayerNm, pbnstSttn.isInit]); useEffect(() => { setBdstTable(pbnstSttn.pbnstSttnRes); - }, [pbnstSttn.pbnstSttnRes]); + }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]); - useEffect(() => { - if (pbnstSttn.pbnstDetail.pbnstRuseFcltPk) setShowDetailView(true); - }, [pbnstSttn.pbnstDetail]); - - - // 빗물재이용시설 cellClick 이벤트 (상세정보) - const rainCellClick = (index: number | undefined, headId: string) => { - if ( - index !== undefined && - rainTable !== undefined && - headId !== 'chBuildingYn') { - setRainDetailModal({ isOpen: true, data: rainTable[index] }) - } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) { - if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null) - setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding }); - } - } - - // 중수도시설 cellClick 이벤트 (상세정보) - const rswtCellClick = (index: number | undefined, headId: string) => { - if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { - setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] }) - } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { - if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') { - setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding }); + // 재이용시설 상세정보 + 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 }]; + }); } - - // 온배수시설 cellClick 이벤트 (상세정보) - const htdflCellClick = (index: number | undefined, headId: string) => { - if ( - headId !== "chBuildingYn" && - index !== undefined && - htdflTable !== undefined - ) { - setHtdflDetailModal({ isOpen: true, data: htdflTable[index] }); + // 재이용시설 조회 + 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( + String(page), + String(13), + { + partValue: "A", + sidoValue: "0", + sigunValue: "", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "", + }, + "", + String(new Date().getFullYear()) + ); + }, []); const excelClick = useCallback(() => { // if (codeData) pbnstSttnSearch(1, "10000", codeData); excelDownload( @@ -176,6 +260,173 @@ const NewWindowPopup: React.FC = ({ "A1:U2" ); }, [pbnstSttnSearch]); + ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// + + + ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// + // 빗물재이용시설 cellClick 이벤트 (상세정보) + const rainCellClick = (index: number | undefined, headId: string) => { + if ( + index !== undefined && + rainTable !== undefined && + headId !== 'chBuildingYn') { + setRainDetailModal({ isOpen: true, data: rainTable[index] }) + setViewMode('detail') + } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) { + if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null) + setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding }); + } + } + + useEffect(() => { + if (!rainSttn.isInit) { + rainSttnInit(1, "20", "0", '', code.cityCd, code.sggCd); + } + }, [rainSttn.isInit, rainSttnInit]); + + useEffect(() => { + const data = tableData(rainSttnRes, { code }); + const chData = data + .map((item: any) => { + return { + ...item, + ...item.reuseBuilding[0], + ...item.reuseBuilding[0].rainyObj, + dtfcltCpct: item.reuseBuilding[0].rainyObj.dtfcltCpct === -1 + ? "확인불가" + : item.reuseBuilding[0].rainyObj.dtfcltCpct, + instlCst: item.reuseBuilding[0].instlCst === -1 + ? "확인불가" + : item.reuseBuilding[0].instlCst, + instlCstSprtAmt: item.reuseBuilding[0].instlCstSprtAmt === -1 + ? "확인불가" + : item.reuseBuilding[0].instlCstSprtAmt, + chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N", + pntfColArea: item.reuseBuilding[0].rainyObj.pntfColArea === -1 + ? "확인불가" + : item.reuseBuilding[0].rainyObj.pntfColArea, + filtrTrtmfctCpct: item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct === -1 + ? "확인불가" + : item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct, + archArea: Math.floor(item.archArea) === -1 ? "확인불가" : item.archArea, + }; + }) + .filter((item: any) => item.rainyObj !== undefined); + setRainTable(chData); + }, [code, rainSttnRes, rainSttn.rainSttHeadList]); + + useEffect(() => { + rainSttnSearch(rainPage, "20", '', '', code.cityCd, code.sggCd); + }, [rainPage]); + ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// + + ///////////////////////////////////////////// 중수도 시설 ////////////////////////////////////////////////// + // 중수도시설 cellClick 이벤트 (상세정보) + const rswtCellClick = (index: number | undefined, headId: string) => { + if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { + setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] }); + setViewMode('detail') + } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { + if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') { + setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding }); + } + } + } + useEffect(() => { + if (!rswtSttn.isInit) { + rswtSttnInit(1, "20", "0", '', code.cityCd, code.sggCd); + } + }, [rswtSttn.isInit, rswtSttnInit]); + + useEffect(() => { + const data = tableData(rswtSttnRes, { code }); + const chData = data + .map((item: customRswtBdst) => { + return { + ...item, + ...item.reuseBuilding[0], + ...item.reuseBuilding[0]?.rswtrObj, + chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N', + instlCst: item.reuseBuilding[0]?.instlCst === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCst, + instlCstSprtAmt: item.reuseBuilding[0]?.instlCstSprtAmt === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCstSprtAmt, + archArea: item?.archArea.split('.')[0] !== '-1' ? item?.archArea.split('.')[0] : '확인불가' + } + }) + .filter( + (item: customRswtBdst) => + item.reuseBuilding[0]?.rswtrObj !== undefined + ); + + setRswtrTable(chData); + }, [code, rswtSttnRes]); + // 엑셀 관련 + const rswtSttnExcelDownload = useCallback(() => { + console.log('excel', rswtSttn.excelList, rswtrTable) + if (rswtSttn.excelList.length > 0) { + if (rswtSttn.excelList.length === 0) return; + excelDownload( + rswtSttn.excelList, + "중수도시설 현황", + "sample_rswtSttn.xlsx", + "A1:W3", + ); + } + }, [rswtSttn.excelList]) + + useEffect(() => { + rswtSttnSearch(rswtrPage, "20", '', '', code.cityCd, code.sggCd); + }, [rswtrPage]); + ///////////////////////////////////////////// 중수도 시설 ////////////////////////////////////////////////// + + ///////////////////////////////////////////// 온배수 시설 ////////////////////////////////////////////////// + // 온배수시설 cellClick 이벤트 (상세정보) + const htdflCellClick = (index: number | undefined, headId: string) => { + if ( + headId !== "chBuildingYn" && + index !== undefined && + htdflTable !== undefined + ) { + setHtdflDetailModal({ isOpen: true, data: htdflTable[index] }); + setViewMode('detail') + } + }; + 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]); + + 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 = () => { @@ -183,195 +434,222 @@ const NewWindowPopup: React.FC = ({ const hasWaterTreatmentLayer = checkedLayersData.some(layer => layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설') ); - - // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음 + const actTabData = tabData.find((tab) => tab.id === activeTab); + let layerId = getSelectedLayers(); + if (layerId === null || layerId === undefined) { + layerId = seletectedLayerNm || ''; + } + //하수처리시설 + let isPrcsFclt = layerId == '하수처리시설' // 재이용시설 - const isPbnst = true; + let isPbnst = layerId == '하수재이용시설'; // 빗물이용시설 - const isRain = false; + let isRain = layerId == '빗물이용시설'; // 중수도시설 - const isRswt = false; + let isRswt = layerId == '중수도시설'; // 온배수시설 - const isHtdfl = false; + 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') { + // 재이용시설 상세 + 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), + }))} + children={undefined} + /> + </div> + <PbnstSttnModal + data={actTabData?.data[0] || ({} as customPbnst)} + titleVisible={false} + /> + </> + ); + } else { + // 재이용시설 목록 + return ( + <> + <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 || []} + children={<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />} + headlist={pbnstSttn.pbnstSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + pbnstCellClick(index); + }} + onPageChange={onPageChangeHandler} + /> + </> + ); + } + } + if (isRain) { + if (viewMode == 'detail') { + // 빗물이용시설 상세 + return ( + <> + <div className="flex justify-between items-center mb-4"> + <Title title="빗물이용시설 상세정보" /> + </div> + <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} /> + </> + ); + } else { + // 빗물이용시설 목록 + return ( + <> + <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={rainTable || []} + children={<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />} + headlist={rainSttn.rainSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + rainCellClick(index ?? undefined, headId); + }} + onPageChange={setRainPage} + /> + </> + ); + } + } - return ( - <div className="mt-4"> - {/* 체크된 레이어가 없는 경우 (재이용시설 목록) */} - {isPbnst && ( + if (isRswt) { + if (viewMode == 'detail') { + // 중수도시설 상세 + return ( <> - {showDetailView ? ( - // 재이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='하수재이용시설 상세정보' /> - </div> - <div className="flex justify-between items-center mb-8"> - <UITab - defaultValue={TABS[0]?.val} - tabList={TABS.map((tab) => ({ - value: tab.val, - label: tab.text, - onClick: () => setActiveTab(tab.val), - }))} - children={undefined} - /> - </div> - <PbnstSttnModal - data={pbnDetaileData.data || ({} as customPbnst)} - titleVisible={false} - /> - <PbnstPrfmncSttnPopup isVisible={false} /> - </> - ) : ( - // 재이용시설 목록 - <> - <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 || []} - children={ - <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} /> - } - headlist={pbnstSttn.pbnstSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - pbnstCellClick(index); - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center mb-4"> + <Title title="중수도시설 상세정보" /> + </div> + <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} /> </> - )} - {/* 빗물이용시설 */} - {isRain && ( + ); + } else { + // 중수도시설 목록 + return ( <> - {showDetailView ? ( - // 빗물이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='빗물이용시설 상세정보' /> - </div> - <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} /> - {/* TODO: 지도 점검 결과 현황 추가 할 것 */} - </> - ) : ( - // 빗물이용시설 목록 - <> - <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={rainTable || []} - children={ - <HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} /> - } - headlist={rainSttn.rainSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - rainCellClick(index ?? undefined, headId) - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center"> + <Title title="중수도시설 현황" /> + {/* <div className="flex gap-2 mt-8"> + <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}> + 엑셀다운로드 + </Button> + </div> */} + </div> + <UiTable + headName={[]} + tableData={rswtrTable || []} + children={<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />} + headlist={rswtSttn.rswtSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + rswtCellClick(index, headId); + }} + onPageChange={setRswtrPage} + /> </> - )} - {/* 중수도시설 */} - {isRswt && ( + ); + } + } + + if (isHtdfl) { + if (viewMode == 'detail') { + // 온배수시설 상세 + return ( <> - {showDetailView ? ( - // 재이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='중수도시설 상세정보' /> - </div> - <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} /> - {/* TODO: 지도 점검 결과 현황 추가 할 것 */} - </> - ) : ( - // 재이용시설 목록 - <> - <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={rswtrTable || []} - children={ - <HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} /> - } - headlist={rswtSttn.rswtSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - rswtCellClick(index, headId); - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center mb-4"> + <Title title="온배수시설 상세정보" /> + </div> + <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> </> - )} - {/* 온배수시설 */} - {isHtdfl && ( + ); + } else { + // 온배수시설 목록 + return ( <> - {showDetailView ? ( - // 재이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='온배수시설 상세정보' /> - </div> - {/* <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> */} - <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> - </> - ) : ( - // 재이용시설 목록 - <> - <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 || []} - children={ - <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} /> - } - headlist={htdflSttn.htdflSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - htdflCellClick(index ?? undefined, headId); - }} - onPageChange={setPageNation} - /> - </> - )} + <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={htdflTable || []} + children={<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />} + headlist={htdflSttn.htdflSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + htdflCellClick(index ?? undefined, headId); + }} + onPageChange={setHtdflPage} + /> </> - )} - </div> - ); + ); + } + } + + return null; // 조건에 맞는 콘텐츠가 없을 경우 }; return ( + viewMode == 'nothing' ? <></> : <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보"> {/* 체크된 레이어에 따른 조건부 렌더링 */} {renderConditionalContent()} diff --git a/apps/wr/app/map/rainPrfmncSttnPopup.tsx b/apps/wr/app/map/rainPrfmncSttnPopup.tsx index 18cdac8e6..b6ebf11ef 100644 --- a/apps/wr/app/map/rainPrfmncSttnPopup.tsx +++ b/apps/wr/app/map/rainPrfmncSttnPopup.tsx @@ -261,7 +261,7 @@ export default function RainPrfmncSttnPopup({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={filtrTrtmfctYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -279,7 +279,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={filtrTrtmfctYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -328,7 +328,7 @@ export default function RainPrfmncSttnPopup({ handleCommaNumberChange(e, field.onChange); }} value={formatCommaNumber(field.value)} - readOnly={instlCstSprtYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -371,7 +371,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={grntchBdstCertYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -389,7 +389,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={grntchBdstCertYn !== "Y"} + readOnly={true} /> </FormUi> )} @@ -407,7 +407,7 @@ export default function RainPrfmncSttnPopup({ type="" value={field.value ?? ""} onChange={field.onChange} - readOnly={grntchBdstCertYn !== "Y"} + readOnly={true} /> </FormUi> )} diff --git a/apps/wr/public/images/map/layericon/Layer_Select_BTN.png b/apps/wr/public/images/map/layericon/Layer_Select_BTN.png new file mode 100644 index 000000000..1e810feaf Binary files /dev/null and b/apps/wr/public/images/map/layericon/Layer_Select_BTN.png differ diff --git a/packages/common/business_components/src/ui/map/Gis.js b/packages/common/business_components/src/ui/map/Gis.js index ef5c21d5b..cde836627 100644 --- a/packages/common/business_components/src/ui/map/Gis.js +++ b/packages/common/business_components/src/ui/map/Gis.js @@ -8,6 +8,7 @@ import * as olProj from 'ol/proj'; import { register } from 'ol/proj/proj4'; import proj4 from 'proj4'; import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import { createRoot } from 'react-dom/client'; import GisLonLat from './GisLonLat'; import GisMapToggle from './GisMapToggle'; import GisSelect from './GisSelect'; @@ -46,7 +47,7 @@ function Gis({ const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []); const mapInstanceRef = useRef(null); const checkedLayerIds = useRef([]); - + const [viewMode, setViewMode] = useState('list'); // 상태로 관리 // 팝업 데이터를 저장할 상태와 오버레이 참조를 저장할 ref 추가 // const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]);