From 515f75bd804f0645cc383ed3e742fad46dbb2f78 Mon Sep 17 00:00:00 2001 From: mind-one005 Date: Mon, 30 Jun 2025 15:45:01 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=84=20x=EC=B6=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../popupComponent/chart/aplcnYms.ts | 32 ++++++++- .../popupComponent/chart/infilChart.tsx | 70 ++++++++++--------- 2 files changed, 68 insertions(+), 34 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 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 31c92d339..fcdf5dbf8 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,9 +5,11 @@ 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, TInftwtAnlsRslt } 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, @@ -26,14 +28,25 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe const [inftwtAnls, setInftwtAnls] = useState(null); // 침입수분석정보 const [inftwtAnlsSn, setInftwtAnlsSn] = useState(0); // 침입수분석 정보 선택시 사용 const [chartData, setChartData] = useState<{ chartData1: { label: string; val: number }[]; chartData2: { label: string; val: number }[] }>({ - 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 },], - }); - + 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]); //const [aplcnYms, setAplcnYms] = useState<{ text: string; val: string }[]>([]); const aplcnYms = useAplcnYms(); // 상수사용월 데이터 가져오기 const openPopup = () => { @@ -49,34 +62,26 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe //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 // 침입수분석결과 + })); }); + // selectOilq(inftwtAnlsSn,"L13101003").then((data) => {// 유량 조회 + // const rsltData = getChartDataOilq(data ?? []); + // setChartData(prev => ({ + // ...prev, + // chartData2: rsltData // 유량 + // })); + // }); setPopupOpen(false); }; const onChangeAplcnYm = (e: React.ChangeEvent) => { @@ -97,6 +102,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal}: ModalOpe setInftwtAnls(selectedAnls); } }; + return ( {/* 분석 입력현황 조회 */}