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

Merge remote-tracking branch 'origin/sn-ljpark' into iipbs/sn/ii

Browse Source
This commit is contained in:
swcho
2025-06-30 15:51:18 +09:00
parent a0ee6f34f5 515f75bd80
commit 842e63cef1
2 changed files with 90 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+30 -2
View File
@@ -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) {
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+60 -46
View File
@@ -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<TInftwtAnls[]>([]);
// const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([]); // 침입수분석정보 options
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
const [drtwSwtcRt, setDrtwSwtcRt] = useState<number>(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<string>(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<string, { label: string; color: string }>) 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<HTMLSelectElement>) => {
// 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<HTMLSelectElement>) => {
// 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<HTMLSelectElement>) => {
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<HTMLSelectElement>) => {
const selectedInfo = e.target.value;
setInftwtAnlsSn(Number(selectedInfo)); // 선택값 상태로 저장
// 선택된 침입수분석 정보에 대한 처리 로직 추가
const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === Number(selectedInfo));
if (selectedAnls) {
setInftwtAnls(selectedAnls);
}
};
const renderBody = () => (