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

feat: stash 적용

Browse Source
This commit is contained in:
swcho
2025-07-07 20:59:07 +09:00
parent 2dd80be17f
commit b396a14a5d
4 changed files with 89 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/components/popupComponent/chart/aplcnYms.ts
+4 -4
View File
@@ -71,7 +71,7 @@ export const getDcTree = async () => {
return result;
};
const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] => {
const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string, hidden?: boolean }[] => {
let yyyymms1 = yyyymms.map(dateStr => {
const year = dateStr.slice(0, 4);
const month = dateStr.slice(4, 6);
@@ -80,7 +80,7 @@ const getOptionsAplcnYm = (yyyymms: string[]): { text: string; val: string }[] =
val: dateStr
};
});
yyyymms1.unshift({ val: '0', text: '선택' });
yyyymms1.unshift({ val: '0', text: '선택', hidden: true });
return yyyymms1;
};
const selectAplcnYms = async(gubun:string) => { // 상수사용월
@@ -109,12 +109,12 @@ export const useAplcnYms = (gubun:string) => {
return data;
};
export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number }[] => {
export const getOptionsInftwtAnlsInfo = (anlsArr: TInftwtAnls[]): { text: string; val: number, hidden?: boolean }[] => {
const options = anlsArr.map(anls => ({
text: anls.anlsInfo,
val: anls.inftwtAnlsSn,
}));
options.unshift({ val: 0, text: '선택' });
options.unshift({ val: 0, text: '선택', hidden: true });
return options;
};
apps/sn/app/(map-layout)/map/components/popupComponent/chart/infilChart.tsx
+61 -52
View File
@@ -11,25 +11,25 @@ import { useInfilChartModalStore } from '../chartModalStore'; // 모달 상태
type ModalOpenProp = {
pplMngNo?: string, // 관로관리번호
}
type DataType = {label: string; val: number};
type DataType = { label: string; val: number };
const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useInfilChartModalStore(); // 모달 상태 관리 스토어
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 [selectedAplcnYm, setSelectedAplcnYm] = useState("");
const [inftwtAnlss, setInftwtAnlss] = useState<TInftwtAnls[]>([]);
const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([{ val: 0, text: '선택' }]); // 침입수분석정보 options
const [inftwtAnlsInfos, setInftwtAnlsInfos] = useState<any[]>([{ val: 0, text: '선택', hidden: true }]); // 침입수분석정보 options
const [inftwtAnls, setInftwtAnls] = useState<TInftwtAnls | null>(null); // 침입수분석정보
const [inftwtAnlsSn, setInftwtAnlsSn] = useState<number>(0); // 침입수분석 정보 선택시 사용
const [selectedInftwtAnls, setSelectedInftwtAnls] = useState<number>(0); // 침입수분석 정보 선택시 사용
const [chartData, setChartData] = useState<{ chartData1: DataType[]; chartData2: DataType[] }>({
chartData1: [], chartData2: [],
});
const [inftwtQty, setInftwtQty] = useState<number>(0); // 침입수량
const aplcnYms = fn.useAplcnYms('inftwtAnlsRslt'); // 상수사용월 데이터 가져오기
pplMngNo = "L"+pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여
pplMngNo = "L" + pplMngNo; // inp파일에 하수관로와 맨홀의 번호가 같으면 분석 오류가 발행하여
const openPopup = () => {
if (buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
@@ -50,60 +50,73 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
useEffect(() => {
if (isModalOpen === false) {
setPopupOpen(true); // 모달이 닫힐 때 조회조건팝업은 열어두기
setAplcnYm(""); // 상수사용월 초기화
setSelectedAplcnYm(""); // 상수사용월 초기화
setInftwtAnlss([]); // 침입수분석 초기화
setInftwtAnlsInfos([{ val: 0, text: '선택' }]); // 침입수분석정보 초기화
setInftwtAnlsInfos([{ val: 0, text: '선택', hidden: true }]); // 침입수분석정보 초기화
setInftwtAnls(null); // 침입수분석정보 초기화
setInftwtAnlsSn(0); // 침입수분석 일련번호 초기화
setChartData({chartData1: [], chartData2: [],}); // 차트 데이터 초기화
setSelectedInftwtAnls(0); // 침입수분석 일련번호 초기화
setChartData({ chartData1: [], chartData2: [], }); // 차트 데이터 초기화
setInftwtQty(0); // 침입수량 초기화
}
}, [isModalOpen]);
// 상수사용월 변경시 분석 정보 리스트 가져오기
useEffect(() => {
// aplcnYm이 비어있거나 "0"이면 API 호출하지 않음
if (!aplcnYm || aplcnYm === "0" || aplcnYm === "") {
setInftwtAnlsSn(0); // 초기화
setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
// 상수사용월 변경 핸들러
const handleAplcnYmChange = async (val: string | number) => {
const selectedValue = String(val);
console.log("선택된 상수사용월:", selectedValue);
setSelectedAplcnYm(selectedValue);
// 즉시 관련 상태 초기화
setInftwtAnls(null);
// 빈 값이면 초기화만 하고 종료
if (!selectedValue || selectedValue === "0" || selectedValue === "") {
setInftwtAnlsInfos([{ val: 0, text: '선택', hidden: true }]);
return;
}
const dcData = fn.getDcTree(); // 자료관 데이터 가져오기
fn.selectInftwtAnls(aplcnYm)
.then((data) => {
setInftwtAnlss(data ?? []);
setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data));
setInftwtAnls(null); // 오수전환율 이후 초기화
setInftwtAnlsSn(0); // 초기화
})
.catch((error) => {
console.error("selectInftwtAnls 에러:", error);
setInftwtAnlss([]);
setInftwtAnlsInfos([{ val: 0, text: '선택' }]);
});
}, [aplcnYm]);
// 값 표시
useEffect(() => {
// API 호출
try {
const dcData = fn.getDcTree();
const data = await fn.selectInftwtAnls(selectedValue);
setInftwtAnlss(data ?? []);
setInftwtAnlsInfos(fn.getOptionsInftwtAnlsInfo(data));
} catch (error) {
console.error("selectInftwtAnls 에러:", error);
setInftwtAnlss([]);
setInftwtAnlsInfos([{ val: 0, text: '선택', hidden: true }]);
}
setSelectedInftwtAnls(0);
};
// 분석정보 변경 핸들러
const handleInftwtAnlsSnChange = (val: string | number) => {
const selectedValue = Number(val);
setSelectedInftwtAnls(selectedValue);
// 선택된 침입수분석 정보에 대한 처리 로직
if (inftwtAnlsSn === 0) return;
const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === inftwtAnlsSn);
if (selectedValue === 0) {
setInftwtAnls(null);
return;
}
const selectedAnls = inftwtAnlss.find(anls => anls.inftwtAnlsSn === selectedValue);
if (selectedAnls) {
setInftwtAnls(selectedAnls);
}
}, [inftwtAnlsSn]);
};
const closePopup = () => { // 팝업 닫기
fn.selectInftwtAnlsRslt(inftwtAnlsSn, pplMngNo).then((data) => {// 침입수분석 결과 조회
fn.selectInftwtAnlsRslt(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수분석 결과 조회
const rsltData = fn.getChartDataInftwtAnlsRslt(data ?? []);
setChartData(prev => ({
...prev,
chartData1: rsltData // 침입수분석결과
}));
});
fn.selectOilq(inftwtAnlsSn, pplMngNo).then((data) => {// 유량 조회
fn.selectOilq(selectedInftwtAnls, pplMngNo).then((data) => {// 유량 조회
const rsltData = fn.getChartDataOilq(data ?? []);
setChartData(prev => ({
...prev,
@@ -116,7 +129,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
chartData2: [] // 유량 데이터 초기화
}));
});
fn.selectPplInftwtQty(inftwtAnlsSn, pplMngNo).then((data) => {// 침입수량 조회
fn.selectPplInftwtQty(selectedInftwtAnls, pplMngNo).then((data) => {// 침입수량 조회
if (data > 0) {
setInftwtQty(data);
}
@@ -138,7 +151,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
<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"):""}
{(selectedAplcnYm) ? moment(selectedAplcnYm, "YYYYMM").format("YYYY-MM") : ""}
</span>
</div>
</div>
@@ -153,8 +166,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
</div>
{/* 차트 */}
<div className="bg-white text-3xl">
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
yFieldText2="시간" yFieldText="유량(m³/h)"/>
<MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'}
yFieldText2="시간" yFieldText="유량(m³/h)" />
</div>
</div>
{popupOpen && (
@@ -175,10 +188,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
selectClass="rounded-lg bg-white"
label=''
selectArray={aplcnYms}
value={aplcnYm}
onSelectValue={(val) => {console.log("선택된 상수사용월:", val);
setAplcnYm(String(val));
}}
value={selectedAplcnYm}
onSelectValue={handleAplcnYmChange}
/>
</div>
<div className='flex items-center justify-between'>
@@ -188,10 +199,8 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
selectClass="rounded-lg bg-white"
label=''
selectArray={inftwtAnlsInfos}
value={inftwtAnlsSn}
onSelectValue={(val) => {
setInftwtAnlsSn(Number(val));
}}
value={selectedInftwtAnls}
onSelectValue={handleInftwtAnlsSnChange}
/>
</div>
<div className='flex items-center justify-between'>
@@ -264,7 +273,7 @@ const InfilChart = ({ pplMngNo }: ModalOpenProp) => {
z-[50]
`}
body={renderBody()}
noFooterYn = 'Y'
noFooterYn='Y'
/>
)
}
apps/sn/app/components/lib/utils/date.ts
+20
View File
@@ -12,6 +12,26 @@ export const yearOptions = Array.from({ length: 10 }, (_, i) => {
return { text: `${year}년`, val: year.toString() };
});
// 현재 날짜를 기준으로 현재 분기까지의 분기 옵션 생성
export const getQuarterOptions = (): { text: string; val: string }[] => {
const currentDate = new Date();
const currentMonth = currentDate.getMonth() + 1; // 0부터 시작하므로 +1
// 현재 월을 기준으로 현재 분기 계산
const currentQuarter = Math.ceil(currentMonth / 3);
// 현재 분기까지의 분기 옵션 생성
const quarterOptions = [];
for (let i = 1; i <= currentQuarter; i++) {
quarterOptions.push({
text: `${i}분기`,
val: i.toString()
});
}
return quarterOptions;
};
// ["202506", "202505", "202502", "202405"] 을 SelectBox의 옵션으로 변환
export const convertToTextValArray = (yyyymms: string[]): { text: string; val: string }[] => {
return yyyymms.map(dateStr => {
apps/sn/app/components/ui/operFileUploadForm.tsx
+4 -4
View File
@@ -2,16 +2,16 @@
import { SelectBox } from '@common/business_components/ui';
import React, { useState } from 'react'
import FileUploadForm from './fileUploadForm';
import { yearOptions } from '@/components/lib/utils';
import { yearOptions, getQuarterOptions } from '@/components/lib/utils';
const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (files: string, year: string, quarter: string, code: string, id: string) => void }) => {
const [atflCd, setAtflCd] = useState<string | null>(null);
const [atflId, setAtflId] = useState<string | null>(null);
const quaterOptions = getQuarterOptions();
const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }]
const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
const [selectedQuarter, setSelectedQuarter] = useState<string>(quaterOptions[0]?.val || '');
return (
<div>
@@ -31,7 +31,7 @@ const operFileUploadForm = ({ title, onSubmit }: { title: string, onSubmit: (fil
className="w-50"
selectClass="rounded-lg bg-white"
label="분기"
selectArray={quater}
selectArray={quaterOptions}
onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
/>
<FileUploadForm