diff --git a/apps/sn/app/(map-layout)/map/components/common/index.ts b/apps/sn/app/(map-layout)/map/components/common/index.ts index a17d2a0a8..875c647e3 100644 --- a/apps/sn/app/(map-layout)/map/components/common/index.ts +++ b/apps/sn/app/(map-layout)/map/components/common/index.ts @@ -21,15 +21,14 @@ type LayerContentMap = { const layerContentMap: LayerContentMap = { // TODO: gis데이터 추가되면 추가 작업 필요 "하수처리시설": { component: SwtrmtFclt, }, - // 하수관로 개발용 - // "하수처리시설": { component: MsSwagePpl, }, "하수처리구역": {}, "우수토실": { component: Ssc, }, "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정 "하수관로": { component: MsSwagePpl, }, "하수맨홀": { component: smh, }, - "빗물펌프": { component: StormWaterPump }, - "오수펌프": { component: sewagePump }, + "하수펌프장": { component: sewagePump }, + // "빗물펌프": { component: StormWaterPump }, + // "오수펌프": { component: sewagePump }, }; // 동적 컴포넌트 반환 함수 diff --git a/apps/sn/app/(map-layout)/map/components/common/table.ts b/apps/sn/app/(map-layout)/map/components/common/table.ts index d06973d37..54a75e27e 100644 --- a/apps/sn/app/(map-layout)/map/components/common/table.ts +++ b/apps/sn/app/(map-layout)/map/components/common/table.ts @@ -1,3 +1,33 @@ +// 하수관로 +export const MsSwagePplCol = [ + { id: 'avgGrdn', title: '평균구배' }, + { id: 'clarFvlc', title: '맑음유속' }, + { id: 'drtwMltvArea', title: '오수배수면적' }, + { id: 'exclnMltvArea', title: '우수배수면적' }, + { id: 'fcltMngNo', title: '시설관리번호' }, + // { id: 'fcltyShpCd', title: '시설물형태코드' }, + // { id: 'fid', title: 'FID' }, + // { id: 'ftreSmbolCd', title: '지형지물부호코드' }, + { id: 'instMngNo', title: '기관관리번호' }, + { id: 'instlYmd', title: '설치일자' }, + { id: 'mapshtNo', title: '도엽번호' }, + // { id: 'mngInstCd', title: '관리기관코드' }, + // { id: 'mqltCd', title: '재질코드' }, + // { id: 'pbadmsEmdCd', title: '행정읍면동코드' }, + { id: 'pdmt', title: '관경' }, + { id: 'prlg', title: '연장' }, + { id: 'rnyssnFvlc', title: '우기유속' }, + { id: 'scendDpth', title: '종점깊이' }, + { id: 'scendMhlMngNo', title: '종점맨홀관리번호' }, + { id: 'tmptDpth', title: '시점깊이' }, + { id: 'tmptMhlMngNo', title: '시점맨홀관리번호' }, + { id: 'trflnCnt', title: '차선수' }, + // { id: 'usgCd', title: '용도코드' }, + { id: 'vrtcLen', title: '세로길이' }, + { id: 'wdthLen', title: '가로길이' }, + // { id: 'lyrTypeNm', title: '레이어타입명' }, +] + // 하수처리시설 export const SwtrmtFcltCol = [ { id: 'swtrmtFcltNm', title: '하수처리시설명' }, @@ -6,7 +36,7 @@ export const SwtrmtFcltCol = [ { id: 'cmcnYmd', title: '준공일자' }, { id: 'oprtngStrtYmd', title: '가동개시일자' }, { id: 'clsgYmd', title: '폐쇄일자' }, - { id: 'prcsMsrcCd', title: '처리공법코드' }, + // { id: 'prcsMsrcCd', title: '처리공법코드' }, // { id: 'laeCd', title: '지자체코드' }, { id: 'laeNm', title: '지자체명' }, { id: 'ctpvNm', title: '시도명' }, @@ -52,27 +82,49 @@ export const SwtrmtPrcsZoneCol = [ // 하수맨홀 export const MsSwageMhlCol = [ - { id: 'fid', title: 'FID' }, - { id: 'geom', title: 'geometry' }, - { id: 'ftreSmblCd', title: '지형지물부호코드' }, - { id: 'mngNo', title: '관리번호' }, + // { id: 'fid', title: 'FID' }, + // { id: 'geom', title: 'geometry' }, + // { id: 'ftreSmbolCd', title: '지형지물부호코드' }, + { id: 'fcltMngNo', title: '시설관리번호' }, // { id: 'pbadmsEmdCd', title: '행정읍면동코드' }, { id: 'mapshtNo', title: '도엽번호' }, // { id: 'mngInstCd', title: '관리기관코드' }, { id: 'instlYmd', title: '설치일자' }, { id: 'lastDrdgnYmd', title: '최종준설일자' }, - { id: 'usgCd', title: '용도코드' }, + // { id: 'usgCd', title: '용도코드' }, // { id: 'fcltyShpCd', title: '시설물형태코드' }, - { id: 'mhlKndCd', title: '맨홀종류코드' }, + // { id: 'mhlKndCd', title: '맨홀종류코드' }, { id: 'swageMhDiam', title: '하수맨홀구경' }, { id: 'wdthLen', title: '가로길이' }, { id: 'vrtcLen', title: '세로길이' }, // { id: 'mqltCd', title: '재질코드' }, - { id: 'altdVl', title: '표고값' }, - { id: 'dpthlVl', title: '심도값' }, - { id: 'instMngNo', title: '기관관리번호' } + { id: 'altdVl', title: '표고' }, + { id: 'dpthlVl', title: '심도' }, + // { id: 'instMngNo', title: '기관관리번호' } ]; +// 하수펌프장 +export const SewagePump = [ + // { id: 'fid', title: 'FID' }, + // { id: 'geom', title: 'geometry' }, + // { id: 'ftreSmbolCd', title: '지형지물부호코드' }, + { id: 'fcltMngNo', title: '시설관리번호' }, + // { id: 'pbadmsEmdCd', title: '행정읍면동코드' }, + { id: 'mapshtNo', title: '도엽번호' }, + // { id: 'mngInstCd', title: '관리기관코드' }, + { id: 'instlYmd', title: '설치일자' }, + { id: 'swagePmstnNm', title: '하수펌프장명' }, + { id: 'pllnArea', title: '부지면적' }, + // { id: 'opngSttsCd', title: '개통상태코드' }, + // { id: 'usgCd', title: '용도코드' }, + { id: 'dailyPrcsCpct', title: '일일처리용량' }, + { id: 'maxImpndCpct', title: '최대저수용량' }, + { id: 'altdVl', title: '표고' }, + { id: 'wtlvVl', title: '수위' }, + { id: 'exclnWpmpAblt', title: '우수양수능력' }, + { id: 'instMngNo', title: '기관관리번호' }, +] + // 중점우수토실 측정지점 export const untrtSwgRainCol1 = [ { id: 'manage_no', title: '관리번호' }, diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx index 212bfedf4..1f7774bce 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx @@ -7,7 +7,6 @@ import { Button } from '@common/components/ui'; import InfilChart from './chart/infilChart'; import RdiiChart from './chart/rdiiChart'; // 하수관로 -// TODO: RDII 버튼인가 그거 팝업 두개 구현 필요 const inputColumn = [ { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] }, { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts index c9106fb16..53b4c7954 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts @@ -27,34 +27,6 @@ export type TInftwtAnlsRslt = { anlsTm: string; predcOilq:number; } -export type TRdiiAnls = { - rainInfwtAnlsSn:number; - aplcnYm: string; - enoCd: string; - ctpvCd: string; - sggCd: string; - swageTmplntCd: string; - swageTmplntNm: string; - swtrmtZoneCd: string; - swtrmtZoneNm: string; - atflCd: string; - atflId: string; - atflInpNm: string; - atflHrPttnNm: string; - atflMpngNm: string; - atflRainNm: string; - atflNm: string; - drtwSwtcRt:number; - anlsInfo: string; - scsYn: string; - srcNm: string; // 출처이름 -}; -export type TRdiiAnlsRslt = { - rainInfwtAnlsSn: number; - pplMngNo: string; - anlsTm: string; - predcOilq:number; -} export type TOilqData = { inftwtAnlsSn: number; // 침입수분석 일련번호 pplMngNo: string; // 관로관리번호 @@ -73,31 +45,6 @@ const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] = yyyymms1.unshift({ val: '0', text: '선택' }); return yyyymms1; }; -const selectAplcnYms = async(gubun:string) => { // 상수사용월 - try { - const queryString = ''; - const result = await getData(`v1/${gubun}/aplcnYm${queryString ? `?${queryString}` : ''}`); - if (result && result.length > 0) { - console.log("selectAplcnYms", result); - return getOptionsAplcnYm(result); - } - } catch (error) { - console.error(error); - } -}; -export const useAplcnYms = (gubun:string) => { - const [data, setData] = useState<{ text: string; val: string }[]>([]); - - useEffect(() => { - const fetch = async (gubun:string) => { - const result = await selectAplcnYms(gubun); - if (result) setData(result); - }; - fetch(gubun); - }, []); - - return data; -}; export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number }[] => { const options = anlsArr.map(anls => ({ text: anls.anlsInfo, @@ -106,13 +53,38 @@ export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string options.unshift({ val: 0, text: '선택' }); return options; }; +const selectAplcnYms = async() => { // 상수사용월 + try { + const queryString = ''; + const result = await getData(`v1/inftwtAnlsRslt/aplcnYm${queryString ? `?${queryString}` : ''}`); + if (result && result.length > 0) { + console.log("selectAplcnYms", result); + return getOptionsAplcnYm(result); + } + } catch (error) { + console.error(error); + } +}; +export const useAplcnYms = () => { + const [data, setData] = useState<{ text: string; val: string }[]>([]); + + useEffect(() => { + const fetch = async () => { + const result = await selectAplcnYms(); + if (result) setData(result); + }; + fetch(); + }, []); + + return data; +}; export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 try { const queryString = aplcnYm ? `aplcnYm=${aplcnYm}` : ''; const result = await getData(`v1/inftwtAnls${queryString ? `?${queryString}` : ''}`); if (result && result.numberOfElements > 0) { - console.log("selectInftwtAnls", result.content); + //console.log("selectInftwtAnls", result.content); return result.content; } } catch (error) { @@ -134,7 +106,7 @@ export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string) } const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`); if (result && result.numberOfElements > 0) { - console.log("selectInftwtAnlsRslt", result.content); + //console.log("selectInftwtAnlsRslt", result.content); return result.content; } } catch (error) { @@ -163,47 +135,3 @@ export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { // console.error(error); } }; - -export const getOptionsRdiiAnlsInfo = (anlsArr: TRdiiAnls[]): { text: string; val: number }[] => { - const options = anlsArr.map(anls => ({ - text: anls.anlsInfo, - val: anls.rainInfwtAnlsSn, - })); - options.unshift({ val: 0, text: '선택' }); - return options; -}; - -export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석 - try { - const queryString = aplcnYm ? `aplcnYm=${aplcnYm}` : ''; - const result = await getData(`v1/rdiiAnls${queryString ? `?${queryString}` : ''}`); - if (result && result.numberOfElements > 0) { - console.log("selectRdiiAnls", result.content); - return result.content; - } - } catch (error) { - console.error(error); - } -}; -export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => { - const options = arr.map(anlsRslt => ({ - label: anlsRslt.anlsTm, - val: anlsRslt.predcOilq, - })); - return options; -}; -export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과 - try { - if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) { - console.warn("RdiiAnlsSn or pplMngNo is not provided"); - return []; - } - const result = await getData(`v1/rdiiAnlsRslt/ppl/${rainInfwtAnlsSn}/${pplMngNo}`); - if (result && result.numberOfElements > 0) { - console.log("selectRdiiAnlsRslt", result.content); - return result.content; - } - } catch (error) { - console.error(error); - } -}; diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx index 467ad2bba..a420c4b40 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx @@ -6,7 +6,6 @@ import React, { useEffect, useState } from 'react'; import type { TInftwtAnls } from './aplcnYms'; import { getChartDataInftwtAnlsRslt, getOptionsInftwtAnlsInfo, selectInftwtAnls, selectInftwtAnlsRslt, useAplcnYms } from './aplcnYms'; -import { selectOilq, getChartDataOilq } from './aplcnYms'; type ModalOpenProp = { isModalOpen: boolean, setIsModalOpen: (open: boolean) => void, @@ -14,11 +13,13 @@ type ModalOpenProp = { btnTxt?: string, } + + const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => { const [popupOpen, setPopupOpen] = React.useState(true); const buttonRef = React.useRef(null); // 버튼 참조 const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 - const [aplcnYm, setAplcnYm] = useState(""); + const [aplcnYm, setAplcnYm] = useState("0"); const [inftwtAnlss, setInftwtAnlss] = useState([]); const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState([]); // 침입수분석정보 options const [inftwtAnls, setInftwtAnls] = useState(null); // 침입수분석정보 @@ -31,8 +32,13 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp { label: "3", val: 35 }, { label: "5", val: 55 },], }); + // chartData1: [],chartData2: [],}); - const aplcnYms = useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기 + // API에서 데이터를 가져오지 못할 경우 더미 데이터 사용 + // const aplcnYms = useAplcnYms().length > 0 ? useAplcnYms() : dummyAplcnYms; + + //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]); + const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기 const openPopup = () => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 @@ -75,7 +81,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp // aplcnYm이 비어있거나 "0"이면 API 호출하지 않음 if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") { setInftwtAnlsSn(0); // 초기화 - setInftwtAnlsInfos([]); + setInftwtAnlsInfos([{ val: 0, text: '선택' }]); return; } @@ -83,25 +89,23 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp .then((data) => { setInftwtAnlss(data ?? []); setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data)); - setInftwtAnlsSn(0); // 초기화 }) .catch((error) => { console.error("selectInftwtAnls 에러:", error); setInftwtAnlss([]); - setInftwtAnlsInfos([]); + setInftwtAnlsInfos([{ val: 0, text: '선택' }]); }); - + setInftwtAnlsSn(0); // 초기화 }, [aplcnYm]); // 값 표시 useEffect(() => { // 선택된 침입수분석 정보에 대한 처리 로직 - if (inftwtAnlsSn === 0) return; const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === inftwtAnlsSn); if (selectedAnls) { setInftwtAnls(selectedAnls); } - }, [inftwtAnlsSn]); + }, [inftwtAnlsSn, inftwtAnlss]); const closePopup = () => { // 팝업 닫기 selectInftwtAnlsRslt(inftwtAnlsSn, "L13101003").then((data) => {// 침입수분석 결과 조회 @@ -111,14 +115,13 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp chartData1: rsltData // 침입수분석결과 })); }); - - selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회 - const rsltData = getChartDataOilq(data ?? []); - setChartData(prev => ({ - ...prev, - chartData2: rsltData // 유량 - })); - }); + // selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회 + // const rsltData = getChartDataOilq(data ?? []); + // setChartData(prev => ({ + // ...prev, + // chartData2: rsltData // 유량 + // })); + // }); setPopupOpen(false); }; @@ -162,7 +165,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
{ +// 하수펌프장 +const sewagePump = () => { return ( -
-
+ <> + + ) } diff --git a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx index 79f90a32a..68a23de87 100644 --- a/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx +++ b/apps/sn/app/(map-layout)/map/featureClickEventPopup.tsx @@ -6,7 +6,7 @@ import { useGisContext } from "@common/business_components/ui/map/Gis"; import { Button } from "@common/components/ui"; import { useEffect, useRef, useState } from "react"; import { getLayerContentComponent } from "./components/common"; -import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2 } from "./components/common/table"; +import { SwtrmtFcltCol, SwtrmtPrcsZoneCol, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, SewagePump, MsSwageMhlCol } from "./components/common/table"; // TODO: const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => { const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; }; @@ -37,13 +37,26 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureLayer = layer; // 피처가 속한 레이어 찾기 } }); + console.log("featureLayer.get('lyrTyNm');", featureLayer.get('lyrTyNm')); // SearchModal 클릭 이벤트와 Gis 클릭 이벤트 구분하기 if (featureLayer.get('lyrNm') === null) { if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설'; else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역'; else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실'; + else if (featureData.lyrTypeNm === 'tb_ms_swage_ppl') result = '하수관로'; + else if (featureData.lyrTypeNm === 'tb_ms_swage_pmstn') result = '하수펌프장'; + else if (featureData.lyrTypeNm === 'tb_ms_swage_mhl') result = '하수맨홀'; + } + else { + const lyrTyNm = featureLayer.get('lyrTyNm'); + if (lyrTyNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설'; + else if (lyrTyNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역'; + else if (lyrTyNm === 'om_dt_untrt_swg_rain') result = '중점우수토실'; + else if (lyrTyNm === 'tb_ms_swage_ppl') result = '하수관로'; + else if (lyrTyNm === 'tb_ms_swage_pmstn') result = '하수펌프장'; + else if (lyrTyNm === 'tb_ms_swage_mhl') result = '하수맨홀'; + else result = featureLayer.get('lyrNm'); } - else result = featureLayer.get('lyrNm'); return result; // return featureLayer.get('lyrNm'); // 레이어 이름 출력 @@ -86,15 +99,21 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, setButtonChk(true) break; case '하수관로': + setHeadlist(MsSwagePplCol) setButtonChk(true) break; - case '오수펌프': - setButtonChk(true) - break; - case '빗물펌프': + // case '오수펌프': + // setButtonChk(true) + // break; + // case '빗물펌프': + // setButtonChk(true) + // break; + case '하수펌프장': + setHeadlist(SewagePump) setButtonChk(true) break; case '하수맨홀': + setHeadlist(MsSwageMhlCol) setButtonChk(true) break; default: diff --git a/apps/sn/app/components/lib/utils/date.ts b/apps/sn/app/components/lib/utils/date.ts index 9319d7013..fe717301f 100644 --- a/apps/sn/app/components/lib/utils/date.ts +++ b/apps/sn/app/components/lib/utils/date.ts @@ -11,3 +11,15 @@ export const yearOptions = Array.from({ length: 10 }, (_, i) => { const year = new Date().getFullYear() - i; return { text: `${year}년`, val: year.toString() }; }); + +// ["202506", "202505", "202502", "202405"] 을 SelectBox의 옵션으로 변환 +export const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => { + return yyyymms.map(dateStr => { + const year = dateStr.slice(0, 4); + const month = dateStr.slice(4, 6); + return { + text: `${year}-${month}`, + val: dateStr + }; + }); +}; \ No newline at end of file