침입수분석결과 조회

apps/sn/app/(map-layout)/map/components/popupComponent/MsSwagePpl.tsx

@@ -16,7 +16,7 @@ const inputColumn = [
   { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
   { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
 ];
-const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
+const MsSwagePpl = ({ featureData }: { featureData: any }) => { // SwtrmtFclt
   console.log("featureData", featureData);
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [btnTxt, setBtnTxt] = useState<string>("");

apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts

@@ -21,6 +21,12 @@ export type TInftwtAnls = {
   anlsInfo: string;
   scsYn: string;
 };
+export type TInftwtAnlsRslt = {
+  inftwtAnlsSn: number;
+  pplMngNo: string;
+  anlsTm: string;
+  predcOilq:number;
+}
 const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => {
     let yyyymms1 = yyyymms.map(dateStr => {
       const year = dateStr.slice(0, 4);
@@ -53,19 +59,6 @@ const selectAplcnYms = async() => { // 상수사용월
     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;
-    } 
-  } catch (error) {
-    console.error(error);
-  }
-};
 export const useAplcnYms = () => {
   const [data, setData] = useState<{ text: string; val: string }[]>([]);
 
@@ -79,3 +72,38 @@ export const useAplcnYms = () => {
 
   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);
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};
+export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]): { label: string; val: number }[] => {
+  const options = arr.map(anlsRslt => ({
+    label: anlsRslt.anlsTm,
+    val: anlsRslt.predcOilq,
+  }));
+  return options;
+};
+export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과
+  try {
+    if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) {
+      console.warn("inftwtAnlsSn or pplMngNo is not provided");
+      return [];
+    }
+    const result = await getData(`v1/inftwtAnlsRslt/ppl/${inftwtAnlsSn}/${pplMngNo}`);
+    if (result && result.numberOfElements > 0) {
+        console.log("selectInftwtAnlsRslt", result.content);
+        return result.content;
+    } 
+  } catch (error) {
+    console.error(error);
+  }
+};

apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx

@@ -5,8 +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 type { TInftwtAnls } from './aplcnYms';
+import type { TInftwtAnls, TInftwtAnlsRslt } from './aplcnYms';
 import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms';
+import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt} from './aplcnYms';
 import { set } from 'react-hook-form';
 type ModalOpenProp = {
   isModalOpen: boolean,
@@ -15,7 +16,7 @@ type ModalOpenProp = {
   btnTxt?: string,
 }
 
-const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
+const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpenProp) => {
   const [popupOpen, setPopupOpen] = React.useState(true);
   const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
   const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
@@ -24,7 +25,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
   const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
   const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls|null>(null); // 침입수분석정보
   const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
-  
+
   //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]);
   const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기
   const openPopup = () => {
@@ -38,7 +39,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     setPopupOpen(true); // 팝업 열기
   };
   //console.log("btnTxt", btnTxt);
-  const closePopup = () => { setPopupOpen(false); }; // 팝업 닫기
+  
   const chartForm = CHART_FORM.LINE;
   const chartData = {
     chartData1: [
@@ -59,11 +60,12 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     };
     return config;
   }, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig;
-  const getCurrentDate = () => {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1
-    return `${year}-${month}`;
+
+  const closePopup = () => {  // 팝업 닫기
+    selectInftwtAnlsRslt(inftwtAnlsSn,"L13101003").then((data) => {
+      chartData.chartData1 = getChartDataInftwtAnlsRslt(data ?? []);
+    });
+    setPopupOpen(false); 
   };
   const onChangeAplcnYm = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedValue = e.target.value;
@@ -84,7 +86,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp
     }
   };
   return (
-    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
+    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} >
       {/* 분석 입력현황 조회 */}
       <div className='grid grid-cols-4 gap-4'>
         <div className="grid grid-rows-4 gap-4 mb-4">