From 381bae8e2664b27d4c3d1a8edb841fc86a86e683 Mon Sep 17 00:00:00 2001 From: mind-one005 Date: Sat, 28 Jun 2025 22:01:56 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B9=A8=EC=9E=85=EC=88=98=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=20=EC=84=A0=ED=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../popupComponent/chart/aplcnYms.ts | 83 +++++++++---------- .../popupComponent/chart/infilChart.tsx | 58 ++++++++----- 2 files changed, 77 insertions(+), 64 deletions(-) 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 174cd4d7c..9b20398e3 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 @@ -1,38 +1,6 @@ import {useState, useEffect} from 'react'; - -const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => { - let yyyymms1 = yyyymms.map(dateStr => { - const year = dateStr.slice(0, 4); - const month = dateStr.slice(4, 6); - return { - text: `${year}-${month}`, - val: dateStr - }; - }); - yyyymms1.unshift({ val: '0', text: '선택' }); - return yyyymms1; -}; -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) { - console.log("selectAplcnYms", result); - return convertToTextValArray(result); - } - } catch (error) { - console.error(error); - } -}; -type InftwtAnls = { +import { getData } from '@/components/lib/api'; +export type TInftwtAnls = { inftwtAnlsSn:number; aplcnYm: string; enoCd: string; @@ -53,21 +21,46 @@ type InftwtAnls = { anlsInfo: string; scsYn: string; }; -const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 - 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/inftwtAnls', { - method: "GET", - body: JSON.stringify({aplcnYm}), +const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => { + let yyyymms1 = yyyymms.map(dateStr => { + const year = dateStr.slice(0, 4); + const month = dateStr.slice(4, 6); + return { + text: `${year}-${month}`, + val: dateStr + }; }); - if (res.ok) { - result = await res.json(); + yyyymms1.unshift({ val: '0', text: '선택' }); + return yyyymms1; +}; +export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number }[] => { + const options = anlsArr.map(anls => ({ + text: anls.anlsInfo, + val: anls.inftwtAnlsSn, + })); + 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 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); - return result.content as InftwtAnls[]; + return result.content; } } catch (error) { console.error(error); @@ -85,4 +78,4 @@ export const useAplcnYms = () => { }, []); 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 5d1d5bb42..2fbaf845a 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 @@ -5,7 +5,9 @@ import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_compon import Modal from '@/components/ui/modal'; import { Button } from '@common/components/ui'; import { getData } from "@/components/lib/api"; -import { useAplcnYms } from './aplcnYms'; +import type { TInftwtAnls } from './aplcnYms'; +import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms'; +import { set } from 'react-hook-form'; type ModalOpenProp = { isModalOpen: boolean, setIsModalOpen: (open: boolean) => void, @@ -18,6 +20,11 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp const buttonRef = React.useRef(null); // 버튼 참조 const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 const [aplcnYm, setAplcnYm] = useState(""); + const [inftwtAnlss, setInftwtAnlss] = useState([]); + const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState([]); // 침입수분석정보 options + const [inftwtAnls, setInftwtAnls] = useState(null); // 침입수분석정보 + const [inftwtAnlsSn, setInftwtAnlsSn] = useState(0); // 침입수분석 정보 선택시 사용 + //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]); const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기 const openPopup = () => { @@ -58,7 +65,24 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1 return `${year}-${month}`; }; - + const onChangeAplcnYm = (e: React.ChangeEvent) => { + const selectedValue = e.target.value; + selectInftwtAnls(selectedValue).then((data) => { + setInftwtAnlss(data ?? []); + console.log("onChangeAplcnYm", selectedValue, inftwtAnlss); + setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data ?? [])); + }); + setAplcnYm(selectedValue); + }; + const onChangeInftwtAnlsInfo = (e: React.ChangeEvent) => { + const selectedInfo = e.target.value; + setInftwtAnlsSn(Number(selectedInfo)); // 선택값 상태로 저장 + // 선택된 침입수분석 정보에 대한 처리 로직 추가 + const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === Number(selectedInfo)); + if (selectedAnls) { + setInftwtAnls(selectedAnls); + } + }; return ( {/* 분석 입력현황 조회 */} @@ -92,11 +116,11 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp }} >
침입수분석 입력현황
-
+
+ {inftwtAnlsInfos.map(opt => ( + + ))} +
오수 전환율:
- +
수용가-맨홀 매칭:
@@ -149,10 +172,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
-