From cd7e0fe62160c21e546b472c0076c308ec0c7189 Mon Sep 17 00:00:00 2001 From: mind-one005 Date: Wed, 2 Jul 2025 00:21:42 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EB=A1=9C=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../popupComponent/chart/aplcnYms.ts | 16 ++++-- .../popupComponent/chart/infilChart.tsx | 52 ++++++++----------- .../popupComponent/chart/rdiiChart.tsx | 38 ++++++-------- 3 files changed, 48 insertions(+), 58 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 e80711f5c..56157bc0e 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 @@ -54,6 +54,7 @@ export type TRdiiAnlsRslt = { pplMngNo: string; anlsTm: string; predcOilq:number; + minq:number; } export type TOilqData = { inftwtAnlsSn: number; // 침입수분석 일련번호 @@ -121,12 +122,12 @@ export const selectInftwtAnls = async(aplcnYm:String) => { // 침입수분석 }; export const getChartDataInftwtAnlsRslt = (arr: TInftwtAnlsRslt[]): { label: string; val: number }[] => { const options = arr.map(anlsRslt => ({ - label: anlsRslt.anlsTm, + label: anlsRslt.anlsTm.substring(4), val: anlsRslt.predcOilq, })); return options; }; -export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string|undefined) => { // 침입수분석 결과 +export const selectInftwtAnlsRslt = async(inftwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과 try { if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) { console.warn("inftwtAnlsSn or pplMngNo is not provided"); @@ -148,7 +149,7 @@ export const getChartDataOilq = (arr: TOilqData[]): { label: string; val: number })); return options; }; -export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string|undefined) => { // 유량 +export const selectOilq = async(inftwtAnlsSn:number, pplMngNo:string) => { // 유량 try { if ((inftwtAnlsSn === undefined || inftwtAnlsSn === 0) || !pplMngNo) { console.warn("inftwtAnlsSn or pplMngNo is not provided"); @@ -187,11 +188,18 @@ export const selectRdiiAnls = async(aplcnYm:String) => { // 침입수분석 }; export const getChartDataRdiiAnlsRslt = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => { const options = arr.map(anlsRslt => ({ - label: anlsRslt.anlsTm, + label: anlsRslt.anlsTm.substring(4), val: anlsRslt.predcOilq, })); return options; }; +export const getChartDataRdiiAnlsRsltMinq = (arr: TRdiiAnlsRslt[]): { label: string; val: number }[] => { + const options = arr.map(anlsRslt => ({ + label: anlsRslt.anlsTm.substring(4), + val: anlsRslt.minq, + })); + return options; +}; export const selectRdiiAnlsRslt = async(rainInfwtAnlsSn:number, pplMngNo:string) => { // 침입수분석 결과 try { if ((rainInfwtAnlsSn === undefined || rainInfwtAnlsSn === 0) || !pplMngNo) { 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 8f4d22bfa..a8a7d0f85 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,7 +4,7 @@ import { SelectBox } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; import React, { useEffect, useState } from 'react'; -import type { TInftwtAnls } from './aplcnYms'; +import type { TInftwtAnls, TOilqData } from './aplcnYms'; import { useAplcnYms, getOptionsInftwtAnlsInfo, selectInftwtAnls } from './aplcnYms'; import { getChartDataInftwtAnlsRslt, selectInftwtAnlsRslt, selectOilq, getChartDataOilq } from './aplcnYms'; type ModalOpenProp = { @@ -14,6 +14,7 @@ type ModalOpenProp = { btnTxt?: string, pplMngNo?: string, // 관로관리번호 } +type DataType = {label: string; val: number}; const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }: ModalOpenProp) => { const [popupOpen, setPopupOpen] = React.useState(true); @@ -24,16 +25,12 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState([{ val: 0, text: '선택' }]); // 침입수분석정보 options 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 },], + const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({ + chartData1: [], chartData2: [], }); const aplcnYms = useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기 - pplMngNo = "L13101003"; + pplMngNo = "L"+pplMngNo; // "L13101003"; + console.log("pplMngNo", pplMngNo); const openPopup = () => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 @@ -44,7 +41,6 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } setPopupOpen(true); // 팝업 열기 }; - //console.log("btnTxt", btnTxt); const chartForm = CHART_FORM.LINE; const chartConfig = { @@ -60,14 +56,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화 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 },], - }); // 차트 데이터 초기화 + setChartData({chartData1: [], chartData2: []}); // 차트 데이터 초기화 } }, [isModalOpen]); @@ -84,6 +73,7 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo .then((data) => { setInftwtAnlss(data ?? []); setInftwtAnlsInfos(getOptionsInftwtAnlsInfo(data)); + setInftwtAnls(null); // 오수전환율 이후 초기화 setInftwtAnlsSn(0); // 초기화 }) .catch((error) => { @@ -113,19 +103,19 @@ const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo chartData1: rsltData // 침입수분석결과 })); }); - selectOilq(inftwtAnlsSn, pplMngNo).then((data) => {// 유량 조회 - const rsltData = getChartDataOilq(data ?? []); - setChartData(prev => ({ - ...prev, - chartData2: rsltData // 유량 - })); - }).catch((err) => { - console.error("selectOilq 에러:", err); - setChartData(prev => ({ - ...prev, - chartData2: [] // 유량 데이터 초기화 - })); - }); + // selectOilq(inftwtAnlsSn, pplMngNo).then((data) => {// 유량 조회 + // const rsltData = getChartDataOilq(data ?? []); + // setChartData(prev => ({ + // ...prev, + // chartData2: rsltData // 유량 + // })); + // }).catch((err) => { + // console.error("selectOilq 에러:", err); + // setChartData(prev => ({ + // ...prev, + // chartData2: [] // 유량 데이터 초기화 + // })); + // }); setPopupOpen(false); }; diff --git a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx index 86be63ae4..750a91dd6 100644 --- a/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx +++ b/apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx @@ -5,7 +5,7 @@ import { Button, Input, Label } from '@common/components'; import React, { useEffect, useState } from 'react'; import type { TRdiiAnls, TRdiiAnlsRslt, TOilqData } from './aplcnYms'; -import { getChartDataRdiiAnlsRslt, selectRdiiAnlsRslt } from './aplcnYms'; +import { selectRdiiAnlsRslt, getChartDataRdiiAnlsRslt, getChartDataRdiiAnlsRsltMinq } from './aplcnYms'; import { getOptionsRdiiAnlsInfo, selectRdiiAnls, useAplcnYms } from './aplcnYms'; type ModalOpenProp = { isModalOpen: boolean, @@ -14,7 +14,7 @@ type ModalOpenProp = { btnTxt?: string, pplMngNo?: string, // 관로관리번호 } - +type DataType = {label: string; val: number}; const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }: ModalOpenProp) => { const [popupOpen, setPopupOpen] = React.useState(true); const buttonRef = React.useRef(null); // 버튼 참조 @@ -24,16 +24,13 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options const [rdiiAnls, setRdiiAnls] = useState(null); // 강우유입수분석정보 const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = 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 },], + const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({ + chartData1: [], chartData2: [], }); const aplcnYms = useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기 + pplMngNo = "L"+pplMngNo; // "L13101003"; + console.log("pplMngNo", pplMngNo); const openPopup = () => { if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 @@ -48,8 +45,8 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } const chartForm = CHART_FORM.LINE; const chartConfig = { - chartData1: { label: '강우유입수예측유량', color: "red", }, - chartData2: { label: '실측유량', color: "orange", } + chartData1: { label: 'BSF', color: "orange", }, + chartData2: { label: '강우유입수예측유량', color: "red", }, } as ChartConfig; useEffect(() => { @@ -60,14 +57,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화 setRdiiAnls(null); // 강우유입수분석정보 초기화 setRainInfwtAnlsSn(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 },], - }); // 차트 데이터 초기화 + setChartData({chartData1: [], chartData2: []}); // 차트 데이터 초기화 } }, [isModalOpen]); @@ -84,6 +74,7 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } .then((data) => { setRdiiAnlss(data ?? []); setRdiiAnlsInfos(getOptionsRdiiAnlsInfo(data)); + setRdiiAnls(null); // 오수전환율 이후 초기화 setRainInfwtAnlsSn(0); // 초기화 }) .catch((error) => { @@ -104,11 +95,12 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo } }, [rainInfwtAnlsSn]); const closePopup = () => { // 팝업 닫기 - selectRdiiAnlsRslt(rainInfwtAnlsSn, "L13101003").then((data) => {// 강우유입수분석 결과 조회 - const rsltData = getChartDataRdiiAnlsRslt(data ?? []); + selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수분석 결과 조회 + const rsltData1 = getChartDataRdiiAnlsRsltMinq(data ?? []); + const rsltData2 = getChartDataRdiiAnlsRslt(data ?? []); setChartData(prev => ({ - ...prev, - chartData1: rsltData // 강우유입수분석결과 + chartData1: rsltData1, // BSF + chartData2: rsltData2 // 강우유입수분석결과 })); });