105 lines
4.6 KiB
TypeScript
105 lines
4.6 KiB
TypeScript
import { useWrStore } from "@/app/store";
|
|
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
|
import { tableData } from "@/components/lib/func/commom";
|
|
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
|
|
import { Title, UiTable } from "@common/business_components/ui";
|
|
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
|
import { useEffect, useState } from "react";
|
|
interface Props {
|
|
seletectedLayerNm: string;
|
|
viewMode: 'list' | 'detail' | 'nothing';
|
|
onFeatureSelect: (feature: any) => void;
|
|
onClose: () => void;
|
|
rainDetailModal: { isOpen: boolean; data: customRainBdst | undefined };
|
|
}
|
|
const RainFacility = ({seletectedLayerNm,viewMode,onFeatureSelect,onClose,rainDetailModal}:Props) => {
|
|
// 빗물재이용시설 변수
|
|
const { code, rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
|
|
(state) => state
|
|
);
|
|
const { rainSttnRes, rainSttnResCount } = rainSttn;
|
|
const [rainTable, setRainTable] = useState<customRainBdst[]>();
|
|
const [rainPage, setRainPage] = useState(1)
|
|
|
|
// 빗물재이용시설 cellClick 이벤트 (상세정보)
|
|
const rainCellClick = (index: number | undefined, headId: string) => {
|
|
if (
|
|
index !== undefined &&
|
|
rainTable !== undefined &&
|
|
headId !== 'chBuildingYn') {
|
|
onFeatureSelect(rainTable[index]);
|
|
onClose();
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
if (seletectedLayerNm !== '빗물이용시설' || viewMode != 'list') return;
|
|
console.log('빗물이용시설 초기값 호출', viewMode)
|
|
if (!rainSttn.isInit) {
|
|
rainSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
|
}
|
|
}, [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 ? "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 ? "확인불가" : item.archArea,
|
|
};
|
|
})
|
|
.filter((item: any) => item.rainyObj !== undefined);
|
|
setRainTable(chData);
|
|
}, [code, rainSttnRes, rainSttn.rainSttHeadList]);
|
|
|
|
useEffect(() => {
|
|
if (seletectedLayerNm !== '빗물이용시설' || viewMode != 'list') return;
|
|
rainSttnSearch(false, rainPage, "20", '', '', code.cityCd, code.sggCd);
|
|
}, [code.cityCd, code.sggCd, rainPage, rainSttnSearch]);
|
|
return (viewMode == 'detail' ?
|
|
(<SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} />)
|
|
: (
|
|
<>
|
|
<div className="flex justify-between items-center">
|
|
<Title title="빗물이용시설 현황" />
|
|
{/* <div className="flex gap-2 mt-8">
|
|
<Button className={btnClass} color="primary" onClick={excelClick}>
|
|
엑셀다운로드
|
|
</Button>
|
|
</div> */}
|
|
</div>
|
|
<UiTable
|
|
headName={[]}
|
|
tableData={rainTable || []}
|
|
headlist={rainSttn.rainSttHeadList}
|
|
pageSize={20}
|
|
total={rainSttnResCount}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
rainCellClick(index ?? undefined, headId);
|
|
}}
|
|
onPageChange={setRainPage}
|
|
>
|
|
<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
|
|
</UiTable>
|
|
</>
|
|
))
|
|
}
|
|
export default RainFacility; |