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 9f481a2b9..b01ce79c9 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 @@ -1,268 +1,279 @@ 'use client' -import { CHART_FORM, type ChartConfig, MainChart, UiModal } from "@common/business_components"; + +import React, { useEffect, useMemo, useState } from 'react'; +import moment from 'moment'; + +import { + CHART_FORM, + type ChartConfig, + MainChart, + UiModal, +} from '@common/business_components'; import { SelectBox } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; -import React, { useEffect, useState } from 'react'; -import moment from "moment"; import type { TInftwtAnls } from './aplcnYms'; import * as fn from './aplcnYms'; -import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어 +import { useInfilChartModalStore } from '../chartModalStore'; + type ModalOpenProp = { - pplMngNo?: string, // 관로관리번호 -} -type DataType = { label: string; val: number }; + pplMngNo?: string; // 관로관리번호 +}; -const InfilChart = ({ pplMngNo }: ModalOpenProp) => { - const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어 - const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 - const buttonRef = React.useRef(null); // 버튼 참조 - const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 - const [selectedAplcnYm, setSelectedAplcnYm] = useState(""); +type DataType = { + label: string; + val: number; +}; + +const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }]; + +const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => { + const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); + + const [selectedAplcnYm, setSelectedAplcnYm] = useState(''); const [inftwtAnlss, setInftwtAnlss] = useState([]); - const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options - const [inftwtAnls, setInftwtAnls] = useState(null); // 침입수분석정보 - const [selectedInftwtAnls, setSelectedInftwtAnls] = useState(0); // 침입수분석 정보 선택시 사용 + const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>( + INITIAL_ANALYSIS_OPTIONS, + ); + const [inftwtAnls, setInftwtAnls] = useState(null); + const [selectedInftwtAnls, setSelectedInftwtAnls] = useState(0); const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({ - chartData1: [], chartData2: [], + chartData1: [], + chartData2: [], }); - const [inftwtQty, setInftwtQty] = useState("0"); // 침입수량 - const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기 + const [inftwtQty, setInftwtQty] = useState('0'); - pplMngNo = "L" + pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여 - const openPopup = () => { - if (buttonRef.current) { - const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 - setPopupPosition({ - top: rect.bottom + window.scrollY, // 버튼 아래쪽 - left: rect.left + window.scrollX, // 버튼 왼쪽 - }); - } - setPopupOpen(true); // 팝업 열기 - }; + const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); + const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : ''; const chartForm = CHART_FORM.LINE; const chartConfig = { - chartData1: { label: '순오수량', color: "red", }, - chartData2: { label: '실측하수량', color: "orange", } + chartData1: { label: '순오수량', color: 'red' }, + chartData2: { label: '실측하수량', color: 'orange' }, } as ChartConfig; + const hasChartData = useMemo(() => { + return chartData.chartData1.length > 0 || chartData.chartData2.length > 0; + }, [chartData]); + + const resetState = () => { + setSelectedAplcnYm(''); + setInftwtAnlss([]); + setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS); + setInftwtAnls(null); + setSelectedInftwtAnls(0); + setChartData({ chartData1: [], chartData2: [] }); + setInftwtQty('0'); + }; + useEffect(() => { - if (isModalOpen === false) { - setPopupOpen(true); // 모달이 닫힐 때 조회조건팝업은 열어두기 - setSelectedAplcnYm(""); // 상수사용월 초기화 - setInftwtAnlss([]); // 침입수분석 초기화 - setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화 - setInftwtAnls(null); // 침입수분석정보 초기화 - setSelectedInftwtAnls(0); // 침입수분석 일련번호 초기화 - setChartData({ chartData1: [], chartData2: [], }); // 차트 데이터 초기화 - setInftwtQty("0"); // 침입수량 초기화 + if (!isModalOpen) { + resetState(); // 모달이 닫힐 때 리셋 } }, [isModalOpen]); - // 상수사용월 변경 핸들러 const handleAplcnYmChange = async (val: string | number) => { const selectedValue = String(val); setSelectedAplcnYm(selectedValue); - - // 즉시 관련 상태 초기화 + setInftwtAnlss([]); setInftwtAnls(null); + setSelectedInftwtAnls(0); + setInftwtQty('0'); + setChartData({ chartData1: [], chartData2: [] }); - // 빈 값이면 초기화만 하고 종료 - if (!selectedValue || selectedValue === "0" || selectedValue === "") { - setInftwtAnlsInfos([{ val: 0, text: '선택' }]); + if (!selectedValue || selectedValue === '0') { + setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS); return; } - // API 호출 try { const data = await fn.selectInftwtAnls(selectedValue); - setInftwtAnlss(data ?? []); - setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data)); + const list = data ?? []; + setInftwtAnlss(list); + setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(list)); } catch (error) { - console.error("selectInftwtAnls 에러:", error); + console.error('selectInftwtAnls 에러:', error); setInftwtAnlss([]); - setInftwtAnlsInfos([{ val: 0, text: '선택' }]); + setInftwtAnlsInfos(INITIAL_ANALYSIS_OPTIONS); } - setSelectedInftwtAnls(0); }; - // 분석정보 변경 핸들러 const handleInftwtAnlsSnChange = (val: string | number) => { const selectedValue = Number(val); - setSelectedInftwtAnls(selectedValue); - // 선택된 침입수분석 정보에 대한 처리 로직 + setSelectedInftwtAnls(selectedValue); + setChartData({ chartData1: [], chartData2: [] }); + setInftwtQty('0'); + if (selectedValue === 0) { setInftwtAnls(null); return; } - const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === selectedValue); - if (selectedAnls) { - setInftwtAnls(selectedAnls); + const selectedAnls = inftwtAnlss.find((anls) => anls.inftwtAnlsSn === selectedValue) ?? null; + setInftwtAnls(selectedAnls); + }; + + const infilRsltChart = async () => { + if (!selectedAplcnYm || selectedInftwtAnls === 0 || !normalizedPplMngNo) { + setChartData({ chartData1: [], chartData2: [] }); + setInftwtQty('0'); + return; + } + + try { + const [inftwtAnlsRslt, oilq, qty] = await Promise.all([ + fn.selectInftwtAnlsRslt(selectedInftwtAnls, normalizedPplMngNo), + fn.selectOilq(selectedInftwtAnls, normalizedPplMngNo).catch((err) => { + console.error('selectOilq 에러:', err); + return []; + }), + fn.selectPplInftwtQty(selectedInftwtAnls, normalizedPplMngNo).catch((err) => { + console.error('selectPplInftwtQty 에러:', err); + return 0; + }), + ]); + + setChartData({ + chartData1: fn.getChartDataInftwtAnlsRslt(inftwtAnlsRslt ?? []), + chartData2: fn.getChartDataOilq(oilq ?? []), + }); + + const normalizedQty = Number(qty ?? 0); + setInftwtQty(normalizedQty.toLocaleString('ko-KR')); + } catch (error) { + console.error('infilRsltChart 에러:', error); + setChartData({ chartData1: [], chartData2: [] }); + setInftwtQty('0'); } }; - const closePopup = () => { // 팝업 닫기 - setPopupOpen(false); - } - const infilRsltChart = () => { // 그래프 & 팝업 닫기 + const renderInfoInput = (label: string, value?: string | number | null) => ( +
+ + +
+ ); - fn.selectInftwtAnlsRslt(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수분석 결과 조회 - const rsltData = fn.getChartDataInftwtAnlsRslt(data ?? []); - setChartData(prev => ({ - ...prev, - chartData1: rsltData // 침입수분석결과 - })); - }); - fn.selectOilq(selectedInftwtAnls, pplMngNo).then((data) => {// 유량 조회 - const rsltData = fn.getChartDataOilq(data ?? []); - setChartData(prev => ({ - ...prev, - chartData2: rsltData // 유량 - })); - }).catch((err) => { - console.error("selectOilq 에러:", err); - setChartData(prev => ({ - ...prev, - chartData2: [] // 유량 데이터 초기화 - })); - }); - fn.selectPplInftwtQty(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수량 조회 - if (data > 0) { - setInftwtQty(data.toLocaleString('ko-KR')); - } - }); - setPopupOpen(false); - }; + const handleReset = () => { + resetState(); + } const renderBody = () => ( - <> -
침입수분석결과
- -
-
- - {/* 상수사용량 적용연월 */} -
- ● 상수사용량 적용연월 -
- - {(selectedAplcnYm) ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : ""} - -
-
- {/* 침입수량 분석결과 */} -
- ● 침입수량 산정결과 -
- 침입수량 : - {inftwtQty} - m³/d -
-
-
- {/* 차트 */} -
- -
+
+
+
- {popupOpen && ( -
-
침입수분석 입력현황
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + +
+
+

+ 침입수 분석 선택 조건 +

+ +
+
+
+ + +
+ +
+ + +
+ + {renderInfoInput('오수전환율:', inftwtAnls?.drtwSwtcRt ?? '')} + {renderInfoInput('시간패턴 파일명:', inftwtAnls?.atflHrPttnNm ?? '')} + {renderInfoInput('수용가-맨홀 매칭:', inftwtAnls?.atflMpngNm ?? '')} + {renderInfoInput('관망도 파일명:', inftwtAnls?.atflInpNm ?? '')} + {renderInfoInput('유량 파일명:', inftwtAnls?.atflOilqNm ?? '')}
-
- - + +
+    +
-
)} - {/* */} - - ) +
+ +
+

침입수 분석 결과

+ +
+
+
+ {/* ● */} + 상수사용량 적용연월 +
+
+ {selectedAplcnYm ? moment(selectedAplcnYm, 'YYYYMM').format('YYYY-MM') : '-'} +
+
+ +
+
+ {/* ● */} + 침입수량 산정결과 +
+
+ 침입수량 +
+ {inftwtQty} + m³/d +
+
+
+
+ +
+ {hasChartData ? ( + + ) : ( +
+ 데이터가 없습니다. +
+ )} +
+
+
+
+ ); return ( { onOpenChange={setIsModalOpen} headerTitle="" bodyClass={` - min-h-[50vh] - w-[55vw] - max-w-none - max-h-none - overflow-visible - z-[50] - `} + w-[78vw] + max-w-none + min-h-[74vh] + max-h-none + overflow-visible + z-[50] + `} body={renderBody()} - noFooterYn='Y' + noFooterYn="Y" /> - ) -} + ); +}; -export default React.memo(InfilChart); \ No newline at end of file +export default React.memo(InfilChart); 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 39617eb21..07286bcbe 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 @@ -1,282 +1,339 @@ 'use client' -import { CHART_FORM, type ChartConfig, MainChart, UiModal } from "@common/business_components"; + +import React, { useEffect, useMemo, useState } from 'react'; +import moment from 'moment'; + +import { + CHART_FORM, + type ChartConfig, + MainChart, + UiModal, +} from '@common/business_components'; import { SelectBox } from '@common/business_components/ui'; import { Button, Input, Label } from '@common/components'; -import React, { useEffect, useState } from 'react'; -import moment from "moment"; import type { TRdiiAnls } from './aplcnYms'; import * as fn from './aplcnYms'; -import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어 +import { useRdiiChartModalStore } from '../chartModalStore'; type ModalOpenProp = { - pplMngNo: string, // 관로관리번호 -} -// 차트 -type lineBarChartData = { - label : string; - lineVal0 : number; - barVal0 : number; -} + pplMngNo?: string; // 관로관리번호 +}; +type LineBarChartData = { + label: string; + lineVal0: number; + barVal0: number; +}; -const RdiiChart = ({ pplMngNo }: ModalOpenProp) => { - const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어 - const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업 - const buttonRef = React.useRef(null); // 버튼 참조 - const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 - const [aplcnYm, setAplcnYm] = useState(""); +const INITIAL_ANALYSIS_OPTIONS = [{ val: 0, text: '선택' }]; + +const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => { + const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); + + const [aplcnYm, setAplcnYm] = useState(''); const [rdiiAnlss, setRdiiAnlss] = useState([]); - const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options + const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<{ text: string; val: number; hidden?: boolean }[]>( + INITIAL_ANALYSIS_OPTIONS, + ); const [rdiiAnls, setRdiiAnls] = useState(null); // 강우유입수분석정보 - const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState(0); // 강우유입수분석 정보 선택시 사용 - const [chartData, setChartData] = useState([]); - const [rdiiQty, setRdiiQty] = useState("0"); // 강우유입수량 - const [rainTotal, setRainTotal] = useState("0"); // 적용강우량 - const [totalVolume, setTotalVolume] = useState("0"); // 총체적 m³/mm + const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState(0);// 강우유입수분석 정보 선택시 사용 + const [chartData, setChartData] = useState([]); + const [rdiiQty, setRdiiQty] = useState('0'); // 강우유입수량 + const [rainTotal, setRainTotal] = useState('0'); // 적용강우량 + const [totalVolume, setTotalVolume] = useState('0');// 총체적 m³/mm + const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기 - pplMngNo = "L"+pplMngNo; // "L13101003"; - - const openPopup = () => { - if (buttonRef.current) { - const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산 - setPopupPosition({ - top: rect.bottom + window.scrollY, // 버튼 아래쪽 - left: rect.left + window.scrollX, // 버튼 왼쪽 - }); - } - setPopupOpen(true); // 팝업 열기 - }; + const normalizedPplMngNo = pplMngNo ? `L${pplMngNo}` : ''; const chartForm = CHART_FORM.LINEBAR2; const chartConfig = { - barVal0: { + barVal0: { label: '강수량', - color: "#33AAFF", + color: '#33AAFF', }, lineVal0: { label: 'RDII', - color: "#FF0000", + color: '#FF0000', }, } as ChartConfig; + const hasChartData = useMemo(() => chartData.length > 0, [chartData]); + + const resetState = () => { + setAplcnYm(''); // 상수사용월 초기화 + setRdiiAnlss([]); // 강우유입수분석 초기화 + setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); // 강우유입수분석정보 초기화 + setRdiiAnls(null); // 강우유입수분석정보 초기화 + setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화 + setChartData([]); + setRdiiQty('0'); // 강우유입수량 초기화 + setRainTotal('0');// 적용강우량 초기화 + setTotalVolume('0');// 총체적 m³/mm 초기화 + }; + useEffect(() => { - if (isModalOpen === false) { - setPopupOpen(true); // 모달이 닫힐 때 팝업은 - setAplcnYm(""); // 상수사용월 초기화 - setRdiiAnlss([]); // 강우유입수분석 초기화 - setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화 - setRdiiAnls(null); // 강우유입수분석정보 초기화 - setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화 - setChartData([]); // 차트 데이터 초기화 - setRdiiQty("0"); // 강우유입수량 초기화 - setRainTotal("0"); // 적용강우량 초기화 - setTotalVolume("0"); // 총체적 m³/mm 초기화 + if (!isModalOpen) { + resetState(); } }, [isModalOpen]); - // 상수사용월 변경시 분석 정보 리스트 가져오기 - useEffect(() => { - // aplcnYm이 비어있거나 "0"이면 API 호출하지 않음 - if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") { - setRainInfwtAnlsSn(0); // 초기화 - setRdiiAnlsInfos([]); + const handleAplcnYmChange = async (val: string | number) => { + const selectedValue = String(val); + + setAplcnYm(selectedValue); + setRdiiAnlss([]); + setRdiiAnls(null); + setRainInfwtAnlsSn(0); + setChartData([]); + setRdiiQty('0'); + setRainTotal('0'); + setTotalVolume('0'); + + if (!selectedValue || selectedValue === '0') { + setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); return; } - fn.selectRdiiAnls(aplcnYm) - .then((data) => { - setRdiiAnlss(data ?? []); // 선택한 월의 분석성공한 RDII분석데이터[] - setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(data)); - setRdiiAnls(null); // 오수전환율 이후 초기화 - setRainInfwtAnlsSn(0); // 초기화 - }) - .catch((error) => { - console.error("selectrdiiAnls 에러:", error); - setRdiiAnlss([]); - setRdiiAnlsInfos([]); - }); - }, [aplcnYm]); - // 값 표시 - useEffect(() => { - // 선택된 강우유입수분석 정보에 대한 처리 로직 - if (rainInfwtAnlsSn === 0) return; - const selectedAnls = rdiiAnlss.find(anls => anls.rainInfwtAnlsSn === rainInfwtAnlsSn); - if (selectedAnls) { - setRdiiAnls(selectedAnls); + try { + const data = await fn.selectRdiiAnls(selectedValue); // 상수사용월 변경시 분석 정보 리스트 가져오기 + const list = data ?? []; + setRdiiAnlss(list); + setRdiiAnlsInfos(fn.getOptionsRdiiAnlsInfo(list)); + } catch (error) { + console.error('selectRdiiAnls 에러:', error); + setRdiiAnlss([]); + setRdiiAnlsInfos(INITIAL_ANALYSIS_OPTIONS); } - }, [rainInfwtAnlsSn, rdiiAnlss]); - - const closePopup = () => { // 팝업 닫기 - setPopupOpen(false); - } - const rdiiRsltChart = () => { // 그래프 & 팝업 닫기 - fetchFilteredData(); - fn.selectPplRdiiQty(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수량 조회 - setRdiiQty(Math.round(data?.rdiih*24).toLocaleString('ko-KR')); // cmd: m³/d 단위로 변환 - if (data?.raintotal && data?.rainTotal !== 0) { - setRainTotal(data?.raintotal.toLocaleString('ko-KR')); // 총강우량mm - setTotalVolume(Math.round(data?.rdiih * data?.sustaintime / data?.raintotal).toLocaleString('ko-KR')); // 총체적 m³/mm - } - }); - setPopupOpen(false); }; - const fetchFilteredData: () => Promise = async () => { - const rsltData = await fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo); - const rsltDataformatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []); // format 변경 - const rainData = await fn.selectRainData(rainInfwtAnlsSn); - const rainDataformatted = fn.getChartDataRainData(rainData ?? []); // format 변경 - const rainMap = new Map(rainDataformatted.map(item => [item.label, item.barVal0])); + const handleRdiiAnlsSnChange = (val: string | number) => { + const selectedValue = Number(val); + + setRainInfwtAnlsSn(selectedValue); + setChartData([]); + setRdiiQty('0'); + setRainTotal('0'); + setTotalVolume('0'); + + if (selectedValue === 0) { + setRdiiAnls(null); + return; + } + + const selectedAnls = rdiiAnlss.find((anls) => anls.rainInfwtAnlsSn === selectedValue) ?? null; + setRdiiAnls(selectedAnls); + }; + + const fetchFilteredData = async () => { + if (!rainInfwtAnlsSn || !normalizedPplMngNo) { + setChartData([]); + setRdiiQty('0'); + setRainTotal('0'); + setTotalVolume('0'); + return; + } + + try { + const [rsltData, rainData, qtyData] = await Promise.all([ + fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, normalizedPplMngNo), + fn.selectRainData(rainInfwtAnlsSn), + fn.selectPplRdiiQty(rainInfwtAnlsSn, normalizedPplMngNo), + ]); + + const rsltDataFormatted = fn.getChartDataRdiiAnlsRslt(rsltData ?? []); + const rainDataFormatted = fn.getChartDataRainData(rainData ?? []); + const rainMap = new Map(rainDataFormatted.map((item) => [item.label, item.barVal0])); + + rsltDataFormatted.forEach((item) => { + const matchedVal = rainMap.get(item.label); + if (matchedVal !== undefined) { + item.barVal0 = matchedVal; + } + }); + + setChartData(rsltDataFormatted);// 차트 데이터 설정 + + const avgRdii = Number(qtyData?.rdiih ?? 0); + const appliedRainfall = Number(qtyData?.raintotal ?? 0); + const rdiiPerRainfall = + qtyData?.raintotal && qtyData?.raintotal !== 0 + ? Math.round(avgRdii * Number(qtyData?.sustaintime ?? 0) / qtyData.raintotal) + : 0; + + setRdiiQty(Math.round(avgRdii * 24).toLocaleString('ko-KR')); + setRainTotal(appliedRainfall.toLocaleString('ko-KR')); + setTotalVolume(rdiiPerRainfall.toLocaleString('ko-KR')); + } catch (error) { + console.error('rdiiRsltChart 에러:', error); + setChartData([]); + setRdiiQty('0'); + setRainTotal('0'); + setTotalVolume('0'); + } + }; + + const renderInfoInput = (label: string, value?: string | number | null) => ( +
+ + +
+ ); - rsltDataformatted.forEach(item => { - const matchedVal = rainMap.get(item.label); - if (matchedVal !== undefined) { - item.barVal0 = matchedVal; - } - }); - setChartData(rsltDataformatted); // 차트 데이터 설정 - } const renderBody = () => ( - <> -
RDII분석결과
- -
-
- - {/* 상수사용량 적용연월 */} -
- ● 상수사용량 적용연월 -
- - {(aplcnYm)? moment(aplcnYm, "YYYYMM").format("YYYY-MM"):""} - -
-
- - {/* 강우유입수량 분석결과 */} -
- ● 강우유입수량 분석결과 -
- 평균RDII : - {rdiiQty} - m³/d -
-
- 적용강우량 : - {rainTotal} - mm -
-
- 강우량대비RDII : - {totalVolume} - m³/mm -
-
-
- {/* 차트 */} -
- -
+
+
+
- {popupOpen && ( -
-
강우유입수분석 입력현황
-
-
- - { - setAplcnYm(String(val)); - }} - /> -
-
- - { - setRainInfwtAnlsSn(Number(val)); - }} - /> -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - + +
+
+

+ 강우유입수분석 선택 조건 +

+ +
+
+
+ + +
+ +
+ + +
+ + {renderInfoInput('오수전환율:', rdiiAnls?.drtwSwtcRt ?? '')} + {renderInfoInput('수용가-맨홀 매칭:', rdiiAnls?.atflMpngNm ?? '')} + {renderInfoInput('관망도 파일명:', rdiiAnls?.atflInpNm ?? '')} + {renderInfoInput('강우 파일명:', rdiiAnls?.atflRainNm ?? '')} + {renderInfoInput('RTK계수 출처:', rdiiAnls?.srcNm ?? '')}
-
- - + +
+ +    +
-
)} - {/* */} - - ) +
+ +
+

+ 강우유입수분석 결과 +

+ +
+ {/* 좌측 카드 */} +
+
+ 상수사용량 적용연월 +
+
+ {aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'} +
+
+ + {/* 우측 카드 */} +
+ {/* 좌측: 제목 (세로 가운데 정렬) */} +
+
+ 강우유입수량 분석결과 +
+
+ + {/* 우측: 지표 영역 */} +
+
+
+ 평균RDII +
+
+ {rdiiQty} +
+
+ m³/d +
+
+ +
+
+ 적용 강우량 +
+
+ {rainTotal} +
+
+ mm +
+
+ +
+
+ 강우량 대비 RDII +
+
+ {totalVolume} +
+
+ m³/mm +
+
+
+
+
+ +
+ {hasChartData ? ( + + ) : ( +
+ 데이터가 없습니다. +
+ )} +
+
+
+
+ ); return ( { onOpenChange={setIsModalOpen} headerTitle="" bodyClass={` - min-h-[50vh] - w-[55vw] - max-w-none - max-h-none - overflow-visible - z-[50] - `} + w-[78vw] + max-w-none + min-h-[74vh] + max-h-none + overflow-visible + z-[50] + `} body={renderBody()} - noFooterYn = 'Y' + noFooterYn="Y" /> - ) -} + ); +}; -export default React.memo(RdiiChart); \ No newline at end of file +export default React.memo(RdiiChart);