266 lines
11 KiB
TypeScript
266 lines
11 KiB
TypeScript
'use client'
|
|
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, TRdiiAnlsRslt, TOilqData } from './aplcnYms';
|
|
import * as fn from './aplcnYms';
|
|
import { useRdiiChartModalStore } from '../chartModalStore'; // 모달 상태 관리 스토어
|
|
type ModalOpenProp = {
|
|
pplMngNo: string, // 관로관리번호
|
|
}
|
|
type DataType = {label: string; val: number};
|
|
|
|
const RdiiChart = ({ pplMngNo }: ModalOpenProp) => {
|
|
const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useRdiiChartModalStore(); // 모달 상태 관리 스토어
|
|
const [popupOpen, setPopupOpen] = React.useState(false); // 조회조건팝업
|
|
const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
|
|
const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
|
|
const [aplcnYm, setAplcnYm] = useState("");
|
|
const [rdiiAnlss, setRdiiAnlss] = useState<TRdiiAnls[]>([]);
|
|
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: DataType[]; }>({
|
|
chartData1: [], //chartData2: [],
|
|
});
|
|
const [rdiiQty, setRdiiQty] = useState<number>(0); // 강우유입수량
|
|
const [totalVolume, setTotalVolume] = useState<number>(0); // 총체적 m³/mm
|
|
const aplcnYms = fn.useAplcnYms('rdiiAnlsRslt'); // 상수사용월 데이터 가져오기
|
|
pplMngNo = "L"+pplMngNo; // "L13101003";
|
|
console.log("pplMngNo", pplMngNo);
|
|
const openPopup = () => {
|
|
if (buttonRef.current) {
|
|
const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
|
|
setPopupPosition({
|
|
top: rect.bottom + window.scrollY, // 버튼 아래쪽
|
|
left: rect.left + window.scrollX, // 버튼 왼쪽
|
|
});
|
|
}
|
|
setPopupOpen(true); // 팝업 열기
|
|
};
|
|
|
|
const chartForm = CHART_FORM.LINE;
|
|
const chartConfig = {
|
|
chartData1: { label: 'RDII(m³/h)', color: "red", },
|
|
//chartData2: { label: '순오수량(m³/h)', color: "orange", },
|
|
} as ChartConfig;
|
|
|
|
useEffect(() => {
|
|
if (isModalOpen === false) {
|
|
setPopupOpen(true); // 모달이 닫힐 때 팝업은
|
|
setAplcnYm(""); // 상수사용월 초기화
|
|
setRdiiAnlss([]); // 강우유입수분석 초기화
|
|
setRdiiAnlsInfos([{ val: 0, text: '선택' }]); // 강우유입수분석정보 초기화
|
|
setRdiiAnls(null); // 강우유입수분석정보 초기화
|
|
setRainInfwtAnlsSn(0); // 강우유입수분석 일련번호 초기화
|
|
setChartData({chartData1: [], }); // 차트 데이터 초기화
|
|
setRdiiQty(0); // 강우유입수량 초기화
|
|
setTotalVolume(0); // 총체적 m³/mm 초기화
|
|
}
|
|
}, [isModalOpen]);
|
|
|
|
// 상수사용월 변경시 분석 정보 리스트 가져오기
|
|
useEffect(() => {
|
|
// aplcnYm이 비어있거나 "0"이면 API 호출하지 않음
|
|
if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") {
|
|
setRainInfwtAnlsSn(0); // 초기화
|
|
setRdiiAnlsInfos([]);
|
|
return;
|
|
}
|
|
console.log(moment(aplcnYm).format("YYYY-MM"));
|
|
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);
|
|
}
|
|
}, [rainInfwtAnlsSn]);
|
|
|
|
const closePopup = () => { // 팝업 닫기
|
|
fn.selectRdiiAnlsRslt(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수분석 결과 조회
|
|
const rsltData1 = fn.getChartDataRdiiAnlsRslt(data ?? []);
|
|
//const rsltData2 = fn.getChartDataRdiiAnlsRsltMinq(data ?? []);
|
|
setChartData(prev => ({
|
|
chartData1: rsltData1, // 순오수량(m³/h)
|
|
// chartData2: rsltData2 // RDII(m³/h) 강우유입수분석결과
|
|
}));
|
|
});
|
|
fn.selectPplRdiiQty(rainInfwtAnlsSn, pplMngNo).then((data) => {// 강우유입수량 조회
|
|
setRdiiQty(Math.round(data.rdiih*24)); // cmd: m³/d 단위로 변환
|
|
if (data.raintotal && data.rainTotal !== 0) {
|
|
setTotalVolume(Math.round(data.rdiih * data.sustaintime / data.raintotal)); // 총체적 m³/mm
|
|
}
|
|
});
|
|
setPopupOpen(false);
|
|
};
|
|
|
|
const renderBody = () => (
|
|
<>
|
|
<div className="text-black text-3xl font-bold mb-5">RDII분석결과</div>
|
|
|
|
<div className='grid grid-cols-[1fr_3fr] gap-4'>
|
|
<div className="grid grid-rows-4 gap-4 mb-4">
|
|
<Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
|
|
분석 입력현황 조회
|
|
</Button>
|
|
{/* 상수사용량 적용연월 */}
|
|
<div className="bg-white px-4 py-2 ">
|
|
<span className="text-2xl text-red-600 font-bold">상수사용량 적용연월</span>
|
|
<div className="flex items-center mt-2">
|
|
<span className="text-black text-xl font-bold">
|
|
{(aplcnYm)? moment(aplcnYm, "YYYYMM").format("YYYY-MM"):""}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 강우유입수량 분석결과 */}
|
|
<div className="bg-white px-4 py-2 ">
|
|
<span className="text-2xl text-red-600 font-bold">강우유입수량 분석결과</span>
|
|
<div className="flex items-center mt-2">
|
|
<span className="text-black text-xl font-bold">{rdiiQty}</span>
|
|
<span className="ml-2 text-black">m³/d</span>
|
|
</div>
|
|
<div className="flex items-center mt-2">
|
|
<span className="text-black text-xl font-bold">{totalVolume}</span>
|
|
<span className="ml-2 text-black">m³/mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* 차트 */}
|
|
<div className="h-[90%] bg-white text-2xl">
|
|
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
|
|
yFieldText2="시간" yFieldText="유량(m³/h)" />
|
|
</div>
|
|
</div>
|
|
{popupOpen && (
|
|
<div
|
|
className="absolute bg-gray-100 border border-gray-300 w-[440px] shadow-lg p-6 rounded text-2xl"
|
|
style={{
|
|
top: popupPosition.top,
|
|
left: popupPosition.left,
|
|
zIndex: 1000,
|
|
}}
|
|
>
|
|
<div className="font-bold mb-6 text-3xl">강우유입수분석 입력현황</div>
|
|
<div className='flex flex-col'>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">상수사용월:</Label>
|
|
<SelectBox
|
|
className="w-[220px] mr-8 z-[51] mb-2"
|
|
selectClass="rounded-lg bg-white"
|
|
label=''
|
|
selectArray={aplcnYms}
|
|
value={aplcnYm}
|
|
onSelectValue={(val) => {
|
|
setAplcnYm(String(val));
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">분석정보:</Label>
|
|
<SelectBox
|
|
className="w-[220px] mr-8 z-[51] mb-2"
|
|
selectClass="rounded-lg bg-white"
|
|
label=''
|
|
selectArray={rdiiAnlsInfos}
|
|
value={rainInfwtAnlsSn}
|
|
onSelectValue={(val) => {
|
|
setRainInfwtAnlsSn(Number(val));
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">오수전환율:</Label>
|
|
<Input
|
|
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
|
|
placeholder=""
|
|
value={rdiiAnls?.drtwSwtcRt ?? ""}
|
|
readOnly={true}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">수용가-맨홀 매칭:</Label>
|
|
<Input
|
|
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
|
|
placeholder=""
|
|
value={rdiiAnls?.atflMpngNm ?? ""}
|
|
readOnly={true}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">관망도 파일명:</Label>
|
|
<Input
|
|
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
|
|
placeholder=""
|
|
value={rdiiAnls?.atflInpNm ?? ""}
|
|
readOnly={true}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">강우 파일명:</Label>
|
|
<Input
|
|
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
|
|
placeholder=""
|
|
value={rdiiAnls?.atflRainNm ?? ""}
|
|
readOnly={true}
|
|
/>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Label className="mr-2 w-auto text-2xl text-gray-600 whitespace-nowrap">RTK계수 출처:</Label>
|
|
<Input
|
|
className="mr-8 w-[220px] !text-xl placeholder:text-center mb-2"
|
|
placeholder=""
|
|
value={rdiiAnls?.srcNm ?? ""}
|
|
readOnly={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end mt-4 space-x-2">
|
|
<button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
|
|
분석결과 도표
|
|
</button>
|
|
</div>
|
|
</div>)}
|
|
{/* </Modal > */}
|
|
</>
|
|
)
|
|
|
|
return (
|
|
<UiModal
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
headerTitle=""
|
|
bodyClass={`
|
|
min-h-[50vh]
|
|
w-[50vw]
|
|
max-w-none
|
|
max-h-none
|
|
overflow-visible
|
|
z-[50]
|
|
`}
|
|
body={renderBody()}
|
|
noFooterYn = 'Y'
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default React.memo(RdiiChart); |