ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'iipbs/sn/dev' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/sn/dev

Browse Source
This commit is contained in:
yschoi
2025-07-02 00:33:52 +09:00
parent e125b76bbe cd7e0fe621
commit e99c15018f
3 changed files with 48 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+12 -4
View File
@@ -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) {
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+21 -31
View File
@@ -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<any[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(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);
};
apps/sn/app/(map-layout)/map/components/popupComponent/chart/rdiiChart.tsx
+15 -23
View File
@@ -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<HTMLButtonElement>(null); // 버튼 참조
@@ -24,16 +24,13 @@ const RdiiChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal, pplMngNo }
const [rdiiAnlsInfos, setRdiiAnlsInfos] = useState<any[]>([{ val: 0, text: '선택' }]); // 강우유입수분석정보 options
const [rdiiAnls, setRdiiAnls] = useState<TRdiiAnls | null>(null); // 강우유입수분석정보
const [rainInfwtAnlsSn, setRainInfwtAnlsSn] = useState<number>(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 // 강우유입수분석결과
}));
});