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..03edf7d7a 100644 --- a/apps/sn/app/(map-layout)/map/components/common/index.ts +++ b/apps/sn/app/(map-layout)/map/components/common/index.ts @@ -20,9 +20,9 @@ type LayerContentMap = { // 레이어 선택시 변경되는 팝업 컨텐츠 동적으로 변경하도록 작업 const layerContentMap: LayerContentMap = { // TODO: gis데이터 추가되면 추가 작업 필요 - "하수처리시설": { component: SwtrmtFclt, }, + // "하수처리시설": { component: SwtrmtFclt, }, // 하수관로 개발용 - // "하수처리시설": { component: MsSwagePpl, }, + "하수처리시설": { component: MsSwagePpl, }, "하수처리구역": {}, "우수토실": { component: Ssc, }, "중점우수토실": { component: Ssc, }, // 중점우수토실 여부 설정 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 43f70de24..7d6e45d34 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx @@ -1,3 +1,4 @@ +'use client' import { VerticalTable } from '@/components/ui/verticalTable'; import React, { useState } from 'react' import InputSection from '../InputSection'; 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 new file mode 100644 index 000000000..695c13560 --- /dev/null +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts @@ -0,0 +1,46 @@ +import {useState, useEffect} from 'react'; + +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 + }; + }); +}; +const selectAplcnYms = async() => { // 상수사용월 + try { + //const result = await getData('v1/inftwtAnlsRslt/aplcnYm'); + let result = null; + const res = await fetch('http://con.mind-one.co.kr:11083/sewerage-service/api/v1/inftwtAnlsRslt/aplcnYm', { + method: "GET", + body: null, + }); + if (res.ok) { + result = await res.json(); + } + + if (result && result.length > 0) { + //setAplcnYms(convertToTextValArray(result)); + console.log("selectAplcnYms", result); + return convertToTextValArray(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; +}; \ No newline at end of file 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 f82184db8..7e6ba39b8 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 @@ -1,17 +1,25 @@ -import React, { useState } from 'react' +'use client' +import React, { useState, useMemo, useEffect } from 'react' +import { SelectBox } from '@common/business_components/ui' import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components"; import Modal from '@/components/ui/modal'; import { Button } from '@common/components/ui'; +import { getData } from "@/components/lib/api"; +import { useAplcnYms } from './aplcnYms'; type ModalOpenProp = { isModalOpen: boolean, setIsModalOpen: (open: boolean) => void, closeModal: () => void, btnTxt?: string, } + const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => { - const [popupOpen, setPopupOpen] = React.useState(false); + 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 [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]); + //const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기 const openPopup = () => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 @@ -22,7 +30,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp } setPopupOpen(true); // 팝업 열기 }; - console.log("btnTxt", btnTxt); + //console.log("btnTxt", btnTxt); const closePopup = () => { setPopupOpen(false); }; // 팝업 닫기 const chartForm = CHART_FORM.LINE; const chartData = { @@ -50,6 +58,47 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1 return `${year}-${month}`; }; + + 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 + }; + }); + }; + const selectAplcnYms = async() => { // 상수사용월 + try { + //const result = await getData('v1/inftwtAnlsRslt/aplcnYm'); + let result = null; + const res = await fetch('http://con.mind-one.co.kr:11083/sewerage-service/api/v1/inftwtAnlsRslt/aplcnYm', { + method: "GET", + body: null, + }); + if (res.ok) { + result = await res.json(); + } + + if (result && result.length > 0) { + //setAplcnYms(convertToTextValArray(result)); + console.log("selectAplcnYms", result); + return convertToTextValArray(result); + } + } catch (error) { + console.error(error); + } + } + useEffect(() => { + const fetchAplcnYms = async () => { + const aplcnYmsData = await selectAplcnYms(); + setAplcnYms(aplcnYmsData||[]); + console.log("aplcnYms: ", aplcnYms); + //setAplcnYm(getCurrentDate()); + }; + fetchAplcnYms(); + }, [aplcnYms]); return ( {/* 분석 입력현황 조회 */} @@ -75,18 +124,34 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp {popupOpen && (
-
분석 입력현황
+
침입수분석 입력현황
-
상수사용량 정보:
+
- + setAplcnYm(String(value))} + /> +
+
+
+ setAplcnYm(String(value))} + />
오수 전환율:
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