297 lines
11 KiB
TypeScript
297 lines
11 KiB
TypeScript
"use client"
|
|
import { HeadMakeColSpan } from "@/app/components/common/HeadMakeColSpan";
|
|
import { useFoStore } from "@/app/store";
|
|
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 ProcessFacilityInfoModal from "./modal/page";
|
|
import LoadingOverlay from "@common/business_components/ui/loadingBar";
|
|
|
|
export default function ProcessFacilitySearch() {
|
|
const {Common
|
|
,ProcessFacility
|
|
,ProcessFacilityList
|
|
,initializeCommonData
|
|
//시설데이터 조회
|
|
,searchProcessFacility
|
|
//시설데이터 이력정보 조회
|
|
,searchProcessFacilityHist
|
|
//시설데이터 수질정보 조회
|
|
,searchProcessFacilityWaterQlty
|
|
} = useFoStore((state) => state) || { ProcessFacilityList: { processFacilityList: [], processFacilityCount: 0 }};
|
|
|
|
const {
|
|
isInit,
|
|
selectUpdownData,
|
|
selectOperationData,
|
|
selectFacilityPartData,
|
|
selectSidoData,
|
|
selectSigunData,
|
|
selectRegionData,
|
|
selectUnitWaterShedData,
|
|
selectMiddleRegionData,
|
|
selectEnvPartData,
|
|
btnClass,
|
|
} = Common;
|
|
|
|
const ref = useRef<ReturnType>({
|
|
partValue: '',
|
|
sidoValue: '',
|
|
sigunValue: '',
|
|
regionValue: '',
|
|
unitWaterShedValue: '',
|
|
middleRegionValue: '',
|
|
envPartValue: '',
|
|
sidoText: '',
|
|
sigunText: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
if(!isInit) {
|
|
initializeCommonData();
|
|
searchProcessFacility(1, 10, 'A', '0', '0', '0', '0');
|
|
}
|
|
}, [isInit
|
|
,initializeCommonData
|
|
,searchProcessFacility
|
|
]);
|
|
|
|
const {
|
|
processFacilityLabelArray,
|
|
} = ProcessFacility;
|
|
|
|
const {
|
|
upHeadList1,
|
|
upHeadList2,
|
|
upHeadList3,
|
|
excelList,
|
|
isLoading,
|
|
} = ProcessFacilityList;
|
|
|
|
const processFacilityList = ProcessFacilityList?.processFacilityList || [];
|
|
|
|
// 그리드 관련
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
|
|
|
|
const [fcltCpct, setFcltCpct] = useState<string>("0");
|
|
const [fcltyName, setFcltyName] = useState<string>("");
|
|
const [operationValue, setOperationValue] = useState<string>("0");
|
|
const [facilityPartValue, setFacilityPartValue] = useState<string>("0");
|
|
|
|
const [resetPage, setResetPage] = useState<boolean>(false);
|
|
|
|
const [partValue, setPartValue] = useState<string>("A");
|
|
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
|
|
const [upHeadList, setUpheadList] = useState(upHeadList1);
|
|
|
|
/**
|
|
* 모달 상태 변수
|
|
* selectedRow : 클릭한 행의 index
|
|
* modalFcltyNm : 시설명
|
|
* modalFcltyCd : 시설코드
|
|
* modalSido : 시도
|
|
* modalGugun : 시군구
|
|
* modalLaeNm : 주소
|
|
* modalFctCpc : 시설용량
|
|
* modalTrtFrfNm : 공법
|
|
* modalRnDt : 가동개시일
|
|
* modalCmplDt : 준공일
|
|
* modalTrstOprEtpNm : 관리대행업자
|
|
* modalBscFctClsNm : 시설구분
|
|
*/
|
|
const [selectedRow, setSelectedRow] = useState<number | null>(null);
|
|
const [modalFcltyNm, setModalFcltyNm] = useState<string>("");
|
|
const [modalFcltyCd, setModalFcltyCd] = useState<string>("");
|
|
const [modalSido, setModalSido] = useState<string>("");
|
|
const [modalGugun, setModalGugun] = useState<string>("");
|
|
const [modalAddr, setModalAddr] = useState<string>("");
|
|
const [modalFctCpc, setModalFctCpc] = useState<number | ''>("");
|
|
const [modalTrtFrfNm, setModalTrtFrfNm] = useState<string>("");
|
|
const [modalRnDt, setModalRnDt] = useState<string>("");
|
|
const [modalCmplDt, setModalCmplDt] = useState<string>("");
|
|
const [modalTrstOprEtpNm, setModalTrstOprEtpNm] = useState<string>("");
|
|
const [modalBscFctClsNm, setModalBscFctClsNm] = useState<string>("");
|
|
const [modalMnstr, setModalMnstr] = useState<string>("");
|
|
const [modalEfflWtrrgn, setModalEfflWtrrgn] = useState<string>("");
|
|
const [modalLgbsn, setModalLgbsn] = useState<string>("");
|
|
const [modalEfflWqltStndrdNm, setModalEfflWqltStndrdNm] = useState<string>("");
|
|
const [modalRgnNm, setModalRgnNm] = useState<string>("");
|
|
const [modalRvbsn, setModalRvbsn] = useState<string>("");
|
|
const [isSearch, setIsSearch] = useState<boolean>(false);
|
|
|
|
// 표 레이아웃 상태
|
|
const chkVal = useCallback((result:ReturnType) => {
|
|
setPartValue(result.partValue);
|
|
setResetPage(true);
|
|
setIsSearch(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
switch (partValue) {
|
|
case 'A':
|
|
setWidthSize("w-[130%]");
|
|
setUpheadList(upHeadList1);
|
|
break;
|
|
case 'R':
|
|
setWidthSize("w-[140%]");
|
|
setUpheadList(upHeadList2);
|
|
break;
|
|
case 'G':
|
|
setWidthSize("w-[150%]");
|
|
setUpheadList(upHeadList3);
|
|
break;
|
|
}
|
|
}, [partValue, upHeadList1, upHeadList2, upHeadList3]);
|
|
|
|
useEffect(() => {
|
|
if (excelList && excelList.length > 0) {
|
|
downloadExcel({ data: excelList as unknown as JSON[], fileName: '처리시설 시설정보', sheetNameArray: ['처리시설 시설정보'], headerRange: 'A1:P1' });
|
|
}
|
|
}, [excelList]);
|
|
|
|
const searchFcltyList = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=10) => {
|
|
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;
|
|
}
|
|
searchProcessFacility(pageNo, pageCnt, partStr, nameCd || '0', fcltCpct, operationValue, facilityPartValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
|
|
if(isSearch) {
|
|
setIsSearch(false);
|
|
}
|
|
}, [facilityPartValue, fcltCpct, fcltyName, isSearch, operationValue, searchProcessFacility])
|
|
|
|
const changePage = useCallback((page: number) => {
|
|
searchFcltyList(ref.current, page);
|
|
},[searchFcltyList])
|
|
|
|
const resetVal = () => {
|
|
// SelectBox 초기화 - 각 selectArray의 첫 번째 옵션 값 사용
|
|
searchProcessFacility(1, 10, 'A', '0', '0', '0', '0', '');
|
|
setFcltCpct("0");
|
|
setOperationValue("0");
|
|
setFacilityPartValue("0");
|
|
setPartValue('A');
|
|
setUpheadList(upHeadList1);
|
|
// SearchInputSelect 초기화
|
|
setFcltyName("");
|
|
|
|
// ref를 사용하여 input 값 초기화
|
|
if (inputRef.current) {
|
|
inputRef.current.value = "";
|
|
}
|
|
|
|
if (searchInputRef.current) {
|
|
const input = searchInputRef.current.querySelector('input');
|
|
if (input) {
|
|
input.value = "";
|
|
}
|
|
}
|
|
}
|
|
|
|
// 셀 클릭 시 모달 표시
|
|
const cellClick = (index: number) => {
|
|
const facility = processFacilityList[index];
|
|
if (facility) {
|
|
setModalFcltyNm(facility.bscFctNm);
|
|
setModalFcltyCd(facility.bscFctCd);
|
|
setModalSido(facility.sido);
|
|
setModalGugun(facility.gugun);
|
|
setModalAddr(facility.daddr);
|
|
setModalFctCpc(Number(facility.fctCpc));
|
|
setModalTrtFrfNm(facility.trtFrfNm);
|
|
setModalRnDt(facility.rnDt);
|
|
setModalCmplDt(facility.cmplDt);
|
|
setModalTrstOprEtpNm(facility.trstOprEtpNm);
|
|
setModalBscFctClsNm(facility.bscFctClsNm);
|
|
setModalMnstr(facility.mnstr);
|
|
setModalEfflWtrrgn(facility.efflWtrrgn);
|
|
setModalLgbsn(facility.lgbsn);
|
|
setModalEfflWqltStndrdNm(facility.efflWqltStndrdNm);
|
|
setModalRgnNm(facility.rgnNm);
|
|
setModalRvbsn(facility.rvbsn);
|
|
|
|
searchProcessFacilityHist(facility.bscFctCd);
|
|
searchProcessFacilityWaterQlty(facility.bscFctCd);
|
|
setSelectedRow(index); // 클릭한 행의 index 저장
|
|
}
|
|
}
|
|
|
|
const excelDownload = useCallback(() => {
|
|
searchFcltyList(ref.current, 1, 10000);
|
|
}, [searchFcltyList]);
|
|
|
|
// 모달 닫기
|
|
const closeModal = () => {
|
|
setSelectedRow(null);
|
|
}
|
|
|
|
const total = ProcessFacilityList?.processFacilityCount || 1;
|
|
|
|
return (
|
|
<MainDiv>
|
|
<Title title="처리시설 시설정보" />
|
|
<ContentsDiv>
|
|
<SearchBaseForm
|
|
leftChildren={<>
|
|
<SelectBox className="col-span-3" label={processFacilityLabelArray[3] as string} selectArray={selectUpdownData} onSelectValue={val => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
|
|
<SearchInput className="col-span-3" label={processFacilityLabelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
|
|
<SelectBox className="col-span-3" label={processFacilityLabelArray[5] as string} selectArray={selectOperationData} onSelectValue={val => setOperationValue(val.toString())} value={operationValue} selectClass={undefined} />
|
|
<SelectBox className="col-span-3" label={processFacilityLabelArray[6] as string} selectArray={selectFacilityPartData} onSelectValue={val => setFacilityPartValue(val.toString())} value={facilityPartValue} 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={processFacilityList}
|
|
headlist={upHeadList}
|
|
pageSize={10}
|
|
total={total}
|
|
resetPageNo={resetPage}
|
|
onPageChange={changePage}
|
|
>
|
|
<HeadMakeColSpan upHeadList={upHeadList} layoutNum={partValue}/>
|
|
</UiTable>
|
|
</div>
|
|
</div>
|
|
</ListDiv>
|
|
<span className="text-2xl text-gray-500">※계획유입수질 및 설계유입수질은 해당 BOD를 나타냄</span>
|
|
</ContentsDiv>
|
|
{selectedRow !== null && (
|
|
<UiModal
|
|
body={<ProcessFacilityInfoModal fcltyName={modalFcltyNm} facilityCd={modalFcltyCd} sido={modalSido} gugun={modalGugun} daddr={modalAddr} fctCpc={modalFctCpc} trtFrfNm={modalTrtFrfNm} rnDt={modalRnDt} cmplDt={modalCmplDt} trstOprEtpNm={modalTrstOprEtpNm} bscFctClsNm={modalBscFctClsNm} mnstr={modalMnstr} efflWtrrgn={modalEfflWtrrgn} lgbsn={modalLgbsn} efflWqltStndrdNm={modalEfflWqltStndrdNm} rgnNm={modalRgnNm} rvbsn={modalRvbsn}></ProcessFacilityInfoModal>}
|
|
bodyClass="sm:max-w-[70vw] sm:max-h-[95vh]"
|
|
open={selectedRow !== null}
|
|
onOpenChange={(open) => !open && closeModal()}
|
|
/>
|
|
)}
|
|
</MainDiv>
|
|
);
|
|
} |