240 lines
8.7 KiB
TypeScript
240 lines
8.7 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 UnderWaterInputModal from "./modal/page";
|
||
import type { UnderWaterProps } from "@/app/store/underWaterInput/types";
|
||
import LoadingOverlay from "@common/business_components/ui/loadingBar";
|
||
|
||
export default function UnderWaterInput() {
|
||
const {Common
|
||
,UnderWater
|
||
,UnderWaterSearch
|
||
,initializeCommonData
|
||
,searchUnderWaterList
|
||
} = useFoStore((state) => state) || {
|
||
Common: { isInit: false, selectUpdownData: [], selectOperationData: [], selectSidoData: [], selectSigunData: [], selectRegionData: [], selectUnitWaterShedData: [], selectMiddleRegionData: [], selectEnvPartData: [], selectSearchYear: [{ val: "0" }], btnClass: "" },
|
||
UnderWater: { underWaterList: [], underWaterCount: 0, excelList: [], upHeadList1: [], upHeadList2: [], upHeadList3: [] },
|
||
UnderWaterSearch: { labelArray: [] },
|
||
initializeCommonData: () => {},
|
||
searchUnderWaterList: () => {}
|
||
};
|
||
|
||
const {
|
||
isInit,
|
||
selectUpdownData,
|
||
selectOperationData,
|
||
selectSidoData,
|
||
selectSigunData,
|
||
selectRegionData,
|
||
selectUnitWaterShedData,
|
||
selectMiddleRegionData,
|
||
selectEnvPartData,
|
||
selectSearchYear,
|
||
btnClass
|
||
} = Common;
|
||
|
||
const {
|
||
labelArray,
|
||
} = UnderWaterSearch;
|
||
|
||
const {
|
||
upHeadList1,
|
||
upHeadList2,
|
||
upHeadList3,
|
||
underWaterList,
|
||
underWaterCount,
|
||
excelList,
|
||
isLoading,
|
||
} = UnderWater;
|
||
|
||
const ref = useRef<ReturnType>({
|
||
partValue: '',
|
||
sidoValue: '',
|
||
sigunValue: '',
|
||
regionValue: '',
|
||
unitWaterShedValue: '',
|
||
middleRegionValue: '',
|
||
envPartValue: '',
|
||
sidoText: '',
|
||
sigunText: ''
|
||
});
|
||
|
||
const underWater = UnderWater?.underWaterList || [];
|
||
|
||
// 모달 상태 추가
|
||
const [selectedRow, setSelectedRow] = useState<number | null>(null);
|
||
const [fcltyNm, setFcltyNm] = useState<string>("");
|
||
|
||
// 그리드 관련
|
||
const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
|
||
|
||
// 초기화 변수
|
||
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 = "";
|
||
}
|
||
}
|
||
searchUnderWaterList(1, 10, selectSearchYear[0]?.val || "0");
|
||
}
|
||
|
||
// 모달 닫기
|
||
const closeModal = () => {
|
||
setSelectedRow(null);
|
||
};
|
||
|
||
// 셀 클릭 시 모달 표시
|
||
const cellClick = (index: number) => {
|
||
if (underWater[index]) {
|
||
setFcltyNm(underWater[index].bscFctCd);
|
||
setSelectedRow(index); // 클릭한 행의 index 저장
|
||
}
|
||
};
|
||
|
||
/**
|
||
* useEffect
|
||
*/
|
||
useEffect(() => {
|
||
if (!isInit) {
|
||
initializeCommonData();
|
||
searchUnderWaterList(1, 10, selectSearchYear[0]?.val || "0");
|
||
}
|
||
}, [isInit, initializeCommonData, searchUnderWaterList]);
|
||
|
||
useEffect(() => {
|
||
if (excelList && excelList.length > 0) {
|
||
downloadExcel({
|
||
data: excelList as unknown as JSON[],
|
||
fileName: '지하수유입량 추정',
|
||
sheetNameArray: ['지하수유입량 추정'],
|
||
headerRange: 'A1:V1'
|
||
});
|
||
}
|
||
}, [excelList]);
|
||
|
||
/**
|
||
* 콜백함수
|
||
*/
|
||
// 조회
|
||
const searchFacilityPrecipitation = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
|
||
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 || fcltCpct !== '0' || operationValue!== '0' ||nameCd ||(fcltyName.trim() !== "" && fcltyName.trim() !== null)) {
|
||
searchUnderWaterList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
|
||
} else {
|
||
searchUnderWaterList(pageNo, pageCnt, searchYear);
|
||
}
|
||
}, [fcltCpct, operationValue, fcltyName, searchUnderWaterList, searchYear]);
|
||
|
||
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(() => {
|
||
searchFacilityPrecipitation(ref.current, 1, 10000);
|
||
}, [searchFacilityPrecipitation]);
|
||
|
||
// 페이지 변경
|
||
const handlePageChange = useCallback((page: number) => {
|
||
setResetPage(false);
|
||
searchFacilityPrecipitation(ref.current, page, 10);
|
||
}, [searchFacilityPrecipitation]);
|
||
|
||
const mainList: UnderWaterProps[] = underWaterList || [];
|
||
const total = underWaterCount || 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[5] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
|
||
<SelectBox className="col-span-3" label={labelArray[6] 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>
|
||
<LoadingOverlay isLoading={isLoading} />
|
||
<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>
|
||
</div>
|
||
<span className="text-2xl text-gray-500">※지하수 유입량 = 하수처리장 청천시 실제유입량 - (물사용량 × 오수전환율)</span>
|
||
</ListDiv>
|
||
</ContentsDiv>
|
||
{selectedRow !== null && (
|
||
<UiModal
|
||
body={<UnderWaterInputModal fcltyName={fcltyNm} searchYear={searchYear}></UnderWaterInputModal>}
|
||
bodyClass="sm:max-w-[90vw] w-[1000px] h-[770px]"
|
||
open={selectedRow !== null}
|
||
onOpenChange={(open) => !open && closeModal()}
|
||
noHeaderYn="Y"
|
||
noFooterYn="Y"
|
||
/>
|
||
)}
|
||
</MainDiv>
|
||
);
|
||
} |