318 lines
10 KiB
TypeScript
318 lines
10 KiB
TypeScript
"use client";
|
|
import { useWrStore } from "@/app/store";
|
|
import { btnClass } from "@/app/store/common/code";
|
|
import type {
|
|
customRainBdst,
|
|
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
|
import { rainSttnSize } from "@/app/store/ruseFcltMng/fcltSttn/rainSttn";
|
|
import {
|
|
excelDownload,
|
|
getCity,
|
|
tableData,
|
|
} from "@/components/lib/func/commom";
|
|
import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
|
|
import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
|
|
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
|
|
import {
|
|
ContentsDiv,
|
|
SearchDiv,
|
|
SearchFormLeft,
|
|
SearchFormRight,
|
|
SearchInput,
|
|
SelectBox,
|
|
Title,
|
|
UiModal,
|
|
UiTable,
|
|
type SelectDataType,
|
|
} from "@common/business_components/ui";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
|
import { Button, Label } from "@common/components/ui";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function RainSttn() {
|
|
const { code, rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
|
|
(state) => state
|
|
);
|
|
const { rainSttnRes, rainSttnResCount } = rainSttn;
|
|
|
|
const [pageNation, setPageNation] = useState(1);
|
|
const [isChHead, setIsChHead] = useState(false);
|
|
const [bdstTable, setBdstTable] = useState<customRainBdst[]>();
|
|
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
|
|
const [resetPage, isResetPage] = useState(false);
|
|
const isDownloadTriggered = useRef(false);
|
|
const [objSearch, setObjSearch] = useState<objSearchType>({
|
|
sgg: "",
|
|
city: "",
|
|
});
|
|
const [detailModal, setDetailModal] = useState<{
|
|
isOpen: boolean;
|
|
data: customRainBdst | undefined;
|
|
}>({ data: undefined, isOpen: false });
|
|
|
|
const [fcltNm, setFcltNm] = useState<string>("");
|
|
const { t } = useTranslation("base");
|
|
|
|
const cellClick = (index: number | undefined) => {
|
|
if (index !== undefined && bdstTable !== undefined) {
|
|
setDetailModal({ isOpen: true, data: bdstTable[index] });
|
|
}
|
|
};
|
|
|
|
const getSelCity = (val: string | number) => {
|
|
const cityValue = String(val);
|
|
if (cityValue === "0") {
|
|
setSelectSgg([]);
|
|
setObjSearch({ city: cityValue, sgg: "" });
|
|
} else {
|
|
const data = getCity(cityValue, code.sggCd);
|
|
setSelectSgg(data);
|
|
const firstSggVal =
|
|
data.find((item) => item.val === "0")?.val || (data[0]?.val ?? "");
|
|
setObjSearch({ city: cityValue, sgg: firstSggVal });
|
|
}
|
|
};
|
|
|
|
const getSgg = (val: string | number) => {
|
|
setObjSearch({ ...objSearch, sgg: String(val) });
|
|
};
|
|
|
|
const getConValue = () => {
|
|
if (!objSearch.city || objSearch.city === "0") {
|
|
return "0";
|
|
}
|
|
if (objSearch.sgg && objSearch.sgg !== "0") {
|
|
return objSearch.sgg;
|
|
}
|
|
return objSearch.city;
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!rainSttn.isInit) {
|
|
rainSttnInit(false, 1, rainSttnSize, "0", fcltNm, code.cityCd, code.sggCd);
|
|
}
|
|
}, [rainSttn.isInit, rainSttnInit]);
|
|
|
|
useEffect(() => {
|
|
const data = tableData(rainSttnRes, { code });
|
|
const chData = data
|
|
.map((item: any) => {
|
|
return {
|
|
...item,
|
|
...item.reuseBuilding[0],
|
|
...item.reuseBuilding[0].rainyObj,
|
|
dtfcltCpct:
|
|
item.reuseBuilding[0].rainyObj.dtfcltCpct === -1
|
|
? "확인불가"
|
|
: item.reuseBuilding[0].rainyObj.dtfcltCpct,
|
|
instlCst:
|
|
item.reuseBuilding[0].instlCst === -1
|
|
? "확인불가"
|
|
: item.reuseBuilding[0].instlCst,
|
|
instlCstSprtAmt:
|
|
item.reuseBuilding[0].instlCstSprtAmt === -1
|
|
? "확인불가"
|
|
: item.reuseBuilding[0].instlCstSprtAmt,
|
|
chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N',
|
|
pntfColArea:
|
|
item.reuseBuilding[0].rainyObj.pntfColArea === -1
|
|
? "확인불가"
|
|
: item.reuseBuilding[0].rainyObj.pntfColArea,
|
|
filtrTrtmfctCpct:
|
|
item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct === -1
|
|
? "확인불가"
|
|
: item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct,
|
|
// archArea:
|
|
// Math.floor(item.archArea) === -1 ? "확인불가" : Math.trunc(item.archArea) ? item.archArea,
|
|
archArea: isNaN(Number(item.archArea))
|
|
? item.archArea
|
|
: Math.floor(Number(item.archArea)) === -1
|
|
? '확인불가'
|
|
: Math.trunc(Number(item.archArea)),
|
|
pntfColKnd: code.rainFcltCd.find((pnt) => pnt.val === item.reuseBuilding[0].rainyObj?.pntfColKnd)?.text ??''
|
|
};
|
|
})
|
|
.filter((item: any) => item.rainyObj !== undefined);
|
|
setBdstTable(chData);
|
|
}, [code, rainSttnRes]);
|
|
|
|
useEffect(() => {
|
|
rainSttnSearch(
|
|
false,
|
|
pageNation,
|
|
rainSttnSize,
|
|
String(getConValue()),
|
|
fcltNm,
|
|
code.cityCd,
|
|
code.sggCd
|
|
);
|
|
isResetPage(false);
|
|
}, [pageNation]);
|
|
|
|
useEffect(() => {
|
|
if (!isDownloadTriggered.current) {
|
|
return;
|
|
}
|
|
if (rainSttn.excelList.length > 0) {
|
|
excelDownload(
|
|
rainSttn.excelList,
|
|
"빗물재이용시설 현황",
|
|
"sample_rainSttn.xlsx",
|
|
"A1:W3"
|
|
);
|
|
} else {
|
|
toast.error(t("excelDownErrMsg"));
|
|
}
|
|
isDownloadTriggered.current = false;
|
|
}, [rainSttn.excelList]);
|
|
|
|
const excelClick = useCallback(() => {
|
|
isDownloadTriggered.current = true;
|
|
rainSttnSearch(
|
|
true,
|
|
1,
|
|
rainSttnResCount,
|
|
String(getConValue()),
|
|
fcltNm,
|
|
code.cityCd,
|
|
code.sggCd
|
|
);
|
|
}, [
|
|
rainSttnSearch,
|
|
objSearch,
|
|
code.cityCd,
|
|
code.sggCd,
|
|
fcltNm,
|
|
rainSttnResCount,
|
|
]);
|
|
|
|
return (
|
|
<>
|
|
<ContentsDiv>
|
|
<div className="grid grid-cols-4 gap-4 ">
|
|
<div className="col-span-4">
|
|
<Title title={"빗물재이용 시설 현황"} />
|
|
<SearchDiv>
|
|
<SearchFormLeft>
|
|
<div className="col-span-10 flex flex-row">
|
|
<SelectBox
|
|
className="col-span-2 w-1/6 h-full text-2xl"
|
|
label="시도"
|
|
selectClass={""}
|
|
selectArray={code.cityCd}
|
|
onSelectValue={getSelCity}
|
|
/>
|
|
<SelectBox
|
|
className="col-span-2 w-1/6 h-full text-2xl ml-4"
|
|
label="시군구"
|
|
selectClass={""}
|
|
selectArray={selectSgg || []}
|
|
value={objSearch.sgg} // value props 추가
|
|
onSelectValue={getSgg}
|
|
/>
|
|
<div className="col-span-2 flex flex-row space-x-2 ml-3 mt-2">
|
|
<Label className="w-28 mt-2 text-xl">
|
|
{"시설명"}
|
|
</Label>
|
|
<SearchInput
|
|
className={"w-full text-2xl"}
|
|
label={""}
|
|
textValue={fcltNm || ""}
|
|
setText={setFcltNm}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</SearchFormLeft>
|
|
<SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
|
|
<div className="flex flex-row space-x-2 items-center">
|
|
<Button
|
|
size={"sm"}
|
|
onClick={() => {
|
|
rainSttnSearch(
|
|
false,
|
|
1,
|
|
rainSttnSize,
|
|
String(getConValue()),
|
|
fcltNm,
|
|
code.cityCd,
|
|
code.sggCd
|
|
);
|
|
isResetPage(true);
|
|
}}
|
|
>
|
|
조회
|
|
</Button>
|
|
<Button
|
|
size={"sm"}
|
|
className={`${btnClass} green`}
|
|
onClick={excelClick}
|
|
>
|
|
다운로드
|
|
</Button>
|
|
<Button
|
|
size={"sm"}
|
|
className={btnClass}
|
|
onClick={() => {
|
|
setIsChHead(true);
|
|
}}
|
|
>
|
|
조회항목설정
|
|
</Button>
|
|
</div>
|
|
</SearchFormRight>
|
|
</SearchDiv>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-6 gap-4 ">
|
|
<div className="col-span-6">
|
|
<ListDiv>
|
|
<UiTable
|
|
headName={undefined}
|
|
tableData={bdstTable || []}
|
|
headlist={rainSttn.rainSttHeadList}
|
|
pageSize={rainSttnSize}
|
|
total={rainSttnResCount || 0}
|
|
cellClick={(index: number | undefined) => {
|
|
cellClick(index ?? undefined);
|
|
}}
|
|
onPageChange={setPageNation}
|
|
resetPageNo={resetPage}
|
|
>
|
|
<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
|
|
</UiTable>
|
|
</ListDiv>
|
|
</div>
|
|
</div>
|
|
<UiModal
|
|
open={isChHead}
|
|
onOpenChange={() => {
|
|
setIsChHead(!isChHead);
|
|
}}
|
|
bodyClass={""}
|
|
body={
|
|
<HeadChModal
|
|
type={"RNB"}
|
|
headList={rainSttn.rainSttHeadList.map((item) => ({
|
|
...item,
|
|
visible: item.visible ?? false,
|
|
}))}
|
|
/>
|
|
}
|
|
/>
|
|
<UiModal
|
|
open={detailModal.isOpen}
|
|
onOpenChange={() => {
|
|
setDetailModal({ ...detailModal, isOpen: !detailModal.isOpen });
|
|
}}
|
|
bodyClass={"w-[40vw] max-w-none max-h-[calc(100%-70px)]"}
|
|
body={<SttnDetailModal type={"RNB"} formObj={detailModal.data} />}
|
|
/>
|
|
</ContentsDiv>
|
|
<Toaster position="top-center" />
|
|
</>
|
|
);
|
|
}
|