249 lines
9.0 KiB
TypeScript
249 lines
9.0 KiB
TypeScript
"use client"
|
|
import { useFoStore } from "@/app/store";
|
|
import type { TableUpperProps } from "@/app/store/common";
|
|
import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import PrecipitationModal from "./modal/page";
|
|
|
|
export default function FacilityPrecipitation() {
|
|
const {Common
|
|
,FacilityPrecipitation
|
|
,FacilityPrecipitationSearch
|
|
,PrecipitationDetail
|
|
,initializeCommonData
|
|
,searchFacilityPrecipitationList
|
|
} = useFoStore((state) => state) || { processAreaList: { processAreaList: [] }};
|
|
|
|
const {
|
|
isInit,
|
|
selectSidoData,
|
|
selectSigunData,
|
|
selectRegionData,
|
|
selectUnitWaterShedData,
|
|
selectMiddleRegionData,
|
|
selectEnvPartData,
|
|
selectUpdownData,
|
|
selectOperationData,
|
|
selectSearchYear,
|
|
btnClass
|
|
} = Common;
|
|
|
|
const {
|
|
labelArray,
|
|
} = FacilityPrecipitationSearch;
|
|
|
|
const {
|
|
upHeadList1,
|
|
upHeadList2,
|
|
upHeadList3,
|
|
excelList,
|
|
facilityPrecipitation,
|
|
facilityPrecipitationCount
|
|
} = FacilityPrecipitation;
|
|
|
|
const {
|
|
gridListPrecipitationDetail
|
|
} = PrecipitationDetail;
|
|
|
|
const ref = useRef<ReturnType>({
|
|
partValue: '',
|
|
sidoValue: '',
|
|
sigunValue: '',
|
|
regionValue: '',
|
|
unitWaterShedValue: '',
|
|
middleRegionValue: '',
|
|
envPartValue: '',
|
|
sidoText: '',
|
|
sigunText: ''
|
|
});
|
|
|
|
const facilityPrecipitationList = FacilityPrecipitation?.facilityPrecipitation || [];
|
|
|
|
// 그리드 관련
|
|
const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
|
|
|
|
// 모달 상태 추가
|
|
const [selectedRow, setSelectedRow] = useState<number | null>(null);
|
|
const [fcltyNm, setFcltyNm] = useState<string>("");
|
|
const [fcltyCd, setFcltyCd] = useState<string>("");
|
|
|
|
// 초기화 변수
|
|
const [resetPage, setResetPage] = useState<boolean>(false);
|
|
// 표 너비
|
|
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
|
|
// 구분별 그리드 헤더
|
|
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
|
|
// 용량별
|
|
const [fcltCpct, setFcltCpct] = useState<string>("0");
|
|
// 시설명
|
|
const [fcltyName, setFcltyName] = useState<string>("");
|
|
// 시설상태
|
|
const [operationValue, setOperationValue] = useState<string>("0");
|
|
// 조회기간
|
|
const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
|
|
|
|
/**
|
|
* 페이지 함수
|
|
*/
|
|
// 초기화
|
|
const resetVal = () => {
|
|
setWidthSize("w-[120%]");
|
|
setUpheadList(upHeadList1)
|
|
// 상태값 설정
|
|
setFcltCpct(selectUpdownData[0]?.val || "0");
|
|
setOperationValue(selectOperationData[0]?.val || "0");
|
|
setSearchYear(selectSearchYear[0]?.val || "0");
|
|
// SearchInputSelect 초기화
|
|
setFcltyName("");
|
|
if (searchInputRef.current) {
|
|
const input = searchInputRef.current.querySelector('input');
|
|
if (input) {
|
|
input.value = "";
|
|
}
|
|
}
|
|
searchFacilityPrecipitationList(1, 10, selectSearchYear[0]?.val || "0");
|
|
}
|
|
|
|
// 모달 닫기
|
|
const closeModal = () => {
|
|
setSelectedRow(null);
|
|
};
|
|
|
|
// 셀 클릭 시 모달 표시
|
|
const cellClick = (index: number) => {
|
|
if (facilityPrecipitation[index]) {
|
|
setFcltyNm(facilityPrecipitation[index].bscFctNm);
|
|
setFcltyCd(facilityPrecipitation[index].bscFctCd);
|
|
setSelectedRow(index); // 클릭한 행의 index 저장
|
|
}
|
|
};
|
|
|
|
/**
|
|
* useEffect
|
|
*/
|
|
useEffect(() => {
|
|
if (!isInit) {
|
|
initializeCommonData();
|
|
searchFacilityPrecipitationList(1, 10, selectSearchYear[0]?.val || "0");
|
|
}
|
|
}, [isInit, initializeCommonData, searchFacilityPrecipitationList, selectSearchYear]);
|
|
|
|
useEffect(() => {
|
|
if (excelList && excelList.length > 0) {
|
|
downloadExcel({
|
|
data: excelList as unknown as JSON[],
|
|
fileName: '시설별 강수현황',
|
|
sheetNameArray: ['시설별 강수현황'],
|
|
headerRange: 'A1:N1'
|
|
});
|
|
}
|
|
}, [excelList]);
|
|
|
|
useEffect(() => {
|
|
if (facilityPrecipitation.length > 0) {
|
|
|
|
}
|
|
}, [facilityPrecipitation]);
|
|
|
|
/**
|
|
* 콜백함수
|
|
*/
|
|
// 조회
|
|
const searchFacilityPrecipitation = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
|
|
console.log('partValue : ', partValue);
|
|
console.log('regionValue : ', regionValue);
|
|
console.log('unitWaterShedValue : ', unitWaterShedValue);
|
|
console.log('middleRegionValue : ', middleRegionValue);
|
|
console.log('envPartValue : ', envPartValue);
|
|
console.log('sidoValue : ', sidoValue);
|
|
console.log('sigunValue : ', sigunValue);
|
|
|
|
let nameCd, partStr
|
|
switch (partValue) {
|
|
case 'R':
|
|
if (regionValue !== '0') {
|
|
if(unitWaterShedValue==='0') nameCd = regionValue;
|
|
else if (middleRegionValue==='0') nameCd = unitWaterShedValue;
|
|
else nameCd = middleRegionValue;
|
|
}
|
|
partStr = partValue
|
|
break;
|
|
default:
|
|
if(sidoValue !== '0') nameCd = sidoValue;
|
|
if(sigunValue !== '0') nameCd = sigunValue;
|
|
partStr = envPartValue !== '0' ? envPartValue:partValue;
|
|
break;
|
|
}
|
|
if (partStr.length > 1 || operationValue!== '0' || fcltCpct !== '0' ||nameCd ||(fcltyName.trim() !== "" && fcltyName.trim() !== null)) {
|
|
searchFacilityPrecipitationList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
|
|
} else {
|
|
searchFacilityPrecipitationList(pageNo, pageCnt, searchYear);
|
|
}
|
|
}, [operationValue, fcltyName, searchFacilityPrecipitationList, searchYear, fcltCpct]);
|
|
|
|
const chkVal = useCallback((returntype:ReturnType) => {
|
|
setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
|
|
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
|
|
setResetPage(true);
|
|
}, [upHeadList1, upHeadList2, upHeadList3]);
|
|
|
|
// 엑셀다운로드
|
|
const excelDownload = useCallback((searchReturn: ReturnType) => {
|
|
searchFacilityPrecipitation(searchReturn, 1, 10000);
|
|
}, [searchFacilityPrecipitation]);
|
|
|
|
// 페이지 변경
|
|
const handlePageChange = useCallback((page: number) => {
|
|
setResetPage(false);
|
|
searchFacilityPrecipitation(ref.current, page, 10);
|
|
}, [searchFacilityPrecipitation]);
|
|
|
|
const mainList = facilityPrecipitationList || [];
|
|
const total = facilityPrecipitationCount || 0;
|
|
|
|
return (
|
|
<MainDiv>
|
|
<Title title="시설별 강수현황" />
|
|
<ContentsDiv>
|
|
<SearchBaseForm
|
|
leftChildren={<>
|
|
<SelectBox className="col-span-3" label={labelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
|
|
<SearchInput className={"col-span-3"} label={labelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
|
|
<SelectBox className="col-span-3" label={labelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
|
|
<SelectBox className="col-span-3" label={labelArray[5] as string} selectArray={selectOperationData} onSelectValue={(val) => setOperationValue(val.toString())} value={operationValue} selectClass={undefined} />
|
|
</>}
|
|
rightChildren={undefined}
|
|
selectSidoData={selectSidoData}
|
|
selectSigunData={selectSigunData}
|
|
selectRegionData={selectRegionData}
|
|
selectUnitWaterShedData={selectUnitWaterShedData}
|
|
selectMiddleRegionData={selectMiddleRegionData}
|
|
selectEnvPartData={selectEnvPartData}
|
|
btnClass={btnClass}
|
|
queryClick={chkVal}
|
|
excelClick={excelDownload}
|
|
initClick={resetVal}
|
|
ref={ref} isAdmin={false} />
|
|
<ListDiv>
|
|
<div className="h-full w-full overflow-x-scroll">
|
|
<div className={widthSize}>
|
|
<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 강수현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
|
|
</div>
|
|
<span className="text-2xl font-bold text-gray-500">☞ 강우일은 3mm 이상만 해당 / 강우영향일은 강우일 및 강우일 후 연속 2일간으로 정의</span>
|
|
</div>
|
|
</ListDiv>
|
|
</ContentsDiv>
|
|
{selectedRow !== null && (
|
|
<UiModal
|
|
body={<PrecipitationModal searchYear={searchYear} fcltyName={fcltyNm} facilityCd={fcltyCd} detailList={gridListPrecipitationDetail}></PrecipitationModal>}
|
|
bodyClass="sm:max-w-[90vw] w-[72vw] h-[40vw]"
|
|
open={selectedRow !== null}
|
|
onOpenChange={(open) => !open && closeModal()}
|
|
noHeaderYn="Y"
|
|
noFooterYn="Y"
|
|
/>
|
|
)}
|
|
</MainDiv>
|
|
);
|
|
} |