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 ccce0095a..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,6 +27,12 @@ export type TInftwtAnlsRslt = { anlsTm: string; predcOilq:number; } +export type TOilqData = { + inftwtAnlsSn: number; // 침입수분석 일련번호 + pplMngNo: string; // 관로관리번호 + mtrngDt: string; // 계측일시 + oilq: number; // 유량 +} const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => { let yyyymms1 = yyyymms.map(dateStr => { const year = dateStr.slice(0, 4); @@ -78,7 +84,7 @@ export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 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) { @@ -100,7 +106,29 @@ 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) { + console.error(error); + } +}; +export const getChartDataOilq = (arr: TOilqData[]): { label: string; val: number }[] => { + const options = arr.map(anlsRslt => ({ + label: anlsRslt.mtrngDt, + val: anlsRslt.oilq, + })); + return options; +}; +export const selectOilq = 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/oilqppl/${inftwtAnlsSn}/${pplMngNo}`); + if (result && result.numberOfElements > 0) { + console.log("selectOilq", result.content); return result.content; } } catch (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 f96065a4e..c8816d114 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 @@ -4,9 +4,11 @@ import { SelectBox } from '@common/business_components/ui' import { type ChartConfig, MainChart, CHART_FORM, UiModal } from "@common/business_components"; import { Button, Input, Label } from '@common/components'; import { getData } from "@/components/lib/api"; + import type { TInftwtAnls, TInftwtAnlsRslt } from './aplcnYms'; -import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo } from './aplcnYms'; -import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt } from './aplcnYms'; +import { useAplcnYms, selectInftwtAnls, getOptionsInftwtAnlsInfo} from './aplcnYms'; +import { selectInftwtAnlsRslt, getChartDataInftwtAnlsRslt} from './aplcnYms'; +import { selectOilq, getChartDataOilq} from './aplcnYms'; import { set } from 'react-hook-form'; type ModalOpenProp = { isModalOpen: boolean, @@ -67,7 +69,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp 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 [inftwtAnlsInfos, setInftwtAnlsInfos] = useState([]); // 침입수분석정보 options const [inftwtAnls, setInftwtAnls] = useState(null); // 침입수분석정보 const [inftwtAnlsSn, setInftwtAnlsSn] = useState(0); // 침입수분석 정보 선택시 사용 const [drtwSwtcRt, setDrtwSwtcRt] = useState(0); // 오수전환율 @@ -83,6 +85,25 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp { label: "3", val: 35 }, { label: "5", val: 55 },], }); + // chartData1: [],chartData2: [],}); + useEffect(() => { + if(isModalOpen === false){ + setPopupOpen(true); // 모달이 닫힐 때 팝업은 + setAplcnYm(""); // 상수사용월 초기화 + setInftwtAnlss([]); // 침입수분석 초기화 + setInftwtAnlsInfos([]); // 침입수분석정보 초기화 + setInftwtAnls(null); // 침입수분석정보 초기화 + setInftwtAnlsSn(0); // 침입수분석 일련번호 초기화 + setChartData({ + chartData1: [{ label: "1", val: 20 }, + { label: "3", val: 40 }, + { label: "5", val: 60 },], + chartData2: [{ label: "1", val: 15 }, + { label: "3", val: 35 }, + { label: "5", val: 55 },], + }); // 차트 데이터 초기화 + } + }, [isModalOpen]); // 상수사용월, 분석정보 더미 데이터로 초기화 (API 호출 실패 시 대비) const [selectedAplcnYms, setSelectedAplcnYms] = useState(dummyAplcnYms[0]?.val || "0"); @@ -108,54 +129,47 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOp //console.log("btnTxt", btnTxt); const chartForm = CHART_FORM.LINE; - // const chartData = { - // chartData1: [ - // { label: "1", val: 20 }, - // { label: "3", val: 40 }, - // { label: "5", val: 60 }, - // ], - // chartData2: [ - // { label: "1", val: 15 }, - // { label: "3", val: 35 }, - // { label: "5", val: 55 }, - // ], - // } - const chartConfig = Object.values(chartData).flat().reduce((config, element) => { - config[element.label] = { - label: element.label, - color: "hsl(var(--chart-1))", - }; - return config; - }, {} as Record) satisfies ChartConfig; - + const chartConfig = { + chartData1: {label: '침입수예측유량',color: "red",}, + chartData2: {label: '실측유량',color: "orange",} + } as ChartConfig; + const closePopup = () => { // 팝업 닫기 selectInftwtAnlsRslt(inftwtAnlsSn, "L13101003").then((data) => {// 침입수분석 결과 조회 const rsltData = getChartDataInftwtAnlsRslt(data ?? []); - setChartData({ - chartData1: rsltData, - chartData2: rsltData, // 예시로 같은 데이터를 사용 - }); + setChartData(prev => ({ + ...prev, + chartData1: rsltData // 침입수분석결과 + })); }); - setPopupOpen(false); + // selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회 + // const rsltData = getChartDataOilq(data ?? []); + // setChartData(prev => ({ + // ...prev, + // chartData2: rsltData // 유량 + // })); + // }); + setPopupOpen(false); }; - // 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); - // } - // }; + 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); + } + }; + const renderBody = () => (