382 lines
14 KiB
TypeScript
382 lines
14 KiB
TypeScript
import { useWrStore } from "@/app/store";
|
|
import { btnClass } from "@/app/store/common/code";
|
|
import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
|
import { excelDownload } from "@/components/lib/func/commom";
|
|
import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components';
|
|
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
|
import { Button } from "@common/components/ui";
|
|
import React, { useCallback, useState, useEffect } from 'react';
|
|
import NewWindowPortal from '@/app/map/newWindowPortal';
|
|
import PbnstPrfmncSttnPopup from "@/app/map/pbnstPrfmncSttnPopup";
|
|
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
|
|
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
|
|
import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
|
import RainPrfmncSttnPopup from "@/app/map/rainPrfmncSttnPopup";
|
|
import RswtrPrfmncsSttnPopup from "@/app/map/rswtrPrfmncSttnPopup";
|
|
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
|
import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup";
|
|
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
|
|
|
interface NewWindowPopupProps {
|
|
featureData: any;
|
|
checkedLayers?: string[];
|
|
checkedLayersData?: any[];
|
|
onClose: () => void;
|
|
}
|
|
|
|
// 탭
|
|
const TABS = [
|
|
{ val: "0", text: "재이용시설1" },
|
|
{ val: "1", text: "재이용시설2" },
|
|
{ val: "2", text: "재이용시설n" },
|
|
];
|
|
|
|
// 데이터의 속성(key)을 사용자에게 보여줄 한글 이름으로 변환하기 위한 맵
|
|
// 실제 데이터에 맞게 이 부분을 확장해야 합니다.
|
|
const propertyNameMap: { [key: string]: string } = {
|
|
fid: '고유 ID',
|
|
fcltNm: '시설명',
|
|
opertDe: '운영일자',
|
|
addr: '주소',
|
|
// ... 필요한 만큼 속성 매핑 추가
|
|
};
|
|
|
|
const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
|
featureData,
|
|
checkedLayers = [],
|
|
checkedLayersData = [],
|
|
onClose
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0");
|
|
// swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음
|
|
const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가
|
|
|
|
// onClose 함수를 useCallback으로 메모이제이션
|
|
const memoizedOnClose = useCallback(() => {
|
|
onClose();
|
|
}, [onClose]);
|
|
|
|
// 하수재이용시설 변수
|
|
const {
|
|
code,
|
|
pbnstSttn,
|
|
pbnstSttnSearch,
|
|
pbnSttnInit,
|
|
getPbnStnDetail,
|
|
pbnNmSearch,
|
|
} = useWrStore((state) => state);
|
|
const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>();
|
|
const [pageNation, setPageNation] = useState(1);
|
|
const [pbnDetaileData, setPbnDetaileData] = useState<{
|
|
isModal: boolean;
|
|
data: customPbnst;
|
|
}>({ isModal: false, data: {} as customPbnst });
|
|
|
|
// 빗물재이용시설 변수
|
|
const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
|
|
(state) => state
|
|
);
|
|
const { rainSttnRes } = rainSttn;
|
|
const [rainTable, setRainTable] = useState<customRainBdst[]>();
|
|
const [rainBdstChgProps, setRainBdstChgProps] = useState<{
|
|
isOpen: boolean;
|
|
chBuilding: chgBuilding[];
|
|
}>({ isOpen: false, chBuilding: [] });
|
|
const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
|
|
|
|
// 중수도시설 변수
|
|
const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
|
|
(state) => state
|
|
);
|
|
const { rswtSttnRes } = rswtSttn;
|
|
const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
|
|
const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
|
|
const [rswtrBdstChgProps, setRswtrBdstChgProps] = useState<{
|
|
isOpen: boolean;
|
|
chBuilding: chgBuilding[];
|
|
}>({ isOpen: false, chBuilding: [] });
|
|
|
|
// 온배수시설 변수
|
|
const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
|
|
const { htdflSttnRes } = htdflSttn;
|
|
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
|
|
const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
|
|
const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] });
|
|
|
|
if (!featureData) {
|
|
return null;
|
|
}
|
|
|
|
// 2. RuseMngTable에 필요한 tableData를 생성합니다. (단일 행 데이터)
|
|
const tableData = [featureData];
|
|
console.log("tableData", tableData);
|
|
|
|
// 물재이용시설 cellClick 이벤트 (상세정보)
|
|
const pbnstCellClick = (index: number | undefined) => {
|
|
if (
|
|
index !== undefined &&
|
|
pbnstSttn.pbnstSttnRes &&
|
|
pbnstSttn.pbnstSttnRes[index]
|
|
) {
|
|
const pbnstRuseFcltPk = pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk;
|
|
getPbnStnDetail(pbnstRuseFcltPk);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setBdstTable(pbnstSttn.pbnstSttnRes);
|
|
}, [pbnstSttn.pbnstSttnRes]);
|
|
|
|
useEffect(() => {
|
|
if (pbnstSttn.pbnstDetail.pbnstRuseFcltPk) setShowDetailView(true);
|
|
}, [pbnstSttn.pbnstDetail]);
|
|
|
|
|
|
// 빗물재이용시설 cellClick 이벤트 (상세정보)
|
|
const rainCellClick = (index: number | undefined, headId: string) => {
|
|
if (
|
|
index !== undefined &&
|
|
rainTable !== undefined &&
|
|
headId !== 'chBuildingYn') {
|
|
setRainDetailModal({ isOpen: true, data: rainTable[index] })
|
|
} else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) {
|
|
if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null)
|
|
setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding });
|
|
}
|
|
}
|
|
|
|
// 중수도시설 cellClick 이벤트 (상세정보)
|
|
const rswtCellClick = (index: number | undefined, headId: string) => {
|
|
if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
|
|
setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] })
|
|
} else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
|
|
if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') {
|
|
setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding });
|
|
}
|
|
}
|
|
}
|
|
|
|
// 온배수시설 cellClick 이벤트 (상세정보)
|
|
const htdflCellClick = (index: number | undefined, headId: string) => {
|
|
if (
|
|
headId !== "chBuildingYn" &&
|
|
index !== undefined &&
|
|
htdflTable !== undefined
|
|
) {
|
|
setHtdflDetailModal({ isOpen: true, data: htdflTable[index] });
|
|
}
|
|
};
|
|
|
|
const excelClick = useCallback(() => {
|
|
// if (codeData) pbnstSttnSearch(1, "10000", codeData);
|
|
excelDownload(
|
|
[[]],
|
|
"하수재이용시설 현황",
|
|
"sample_pbnstSttn.xlsx",
|
|
"A1:U2"
|
|
);
|
|
}, [pbnstSttnSearch]);
|
|
|
|
// 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
|
|
const renderConditionalContent = () => {
|
|
// 특정 레이어가 체크되었는지 확인
|
|
const hasWaterTreatmentLayer = checkedLayersData.some(layer =>
|
|
layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
|
|
);
|
|
|
|
// swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
|
|
// 재이용시설
|
|
const isPbnst = true;
|
|
// 빗물이용시설
|
|
const isRain = false;
|
|
// 중수도시설
|
|
const isRswt = false;
|
|
// 온배수시설
|
|
const isHtdfl = false;
|
|
|
|
|
|
return (
|
|
<div className="mt-4">
|
|
{/* 체크된 레이어가 없는 경우 (재이용시설 목록) */}
|
|
{isPbnst && (
|
|
<>
|
|
{showDetailView ? (
|
|
// 재이용시설 상세
|
|
<>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<Title title='하수재이용시설 상세정보' />
|
|
</div>
|
|
<div className="flex justify-between items-center mb-8">
|
|
<UITab
|
|
defaultValue={TABS[0]?.val}
|
|
tabList={TABS.map((tab) => ({
|
|
value: tab.val,
|
|
label: tab.text,
|
|
onClick: () => setActiveTab(tab.val),
|
|
}))}
|
|
children={undefined}
|
|
/>
|
|
</div>
|
|
<PbnstSttnModal
|
|
data={pbnDetaileData.data || ({} as customPbnst)}
|
|
titleVisible={false}
|
|
/>
|
|
<PbnstPrfmncSttnPopup isVisible={false} />
|
|
</>
|
|
) : (
|
|
// 재이용시설 목록
|
|
<>
|
|
<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={bdstTable || []}
|
|
children={
|
|
<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
|
|
}
|
|
headlist={pbnstSttn.pbnstSttHeadList}
|
|
pageSize={20}
|
|
total={100000}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
pbnstCellClick(index);
|
|
}}
|
|
onPageChange={setPageNation}
|
|
/>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{/* 빗물이용시설 */}
|
|
{isRain && (
|
|
<>
|
|
{showDetailView ? (
|
|
// 빗물이용시설 상세
|
|
<>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<Title title='빗물이용시설 상세정보' />
|
|
</div>
|
|
<RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} />
|
|
{/* TODO: 지도 점검 결과 현황 추가 할 것 */}
|
|
</>
|
|
) : (
|
|
// 빗물이용시설 목록
|
|
<>
|
|
<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 || []}
|
|
children={
|
|
<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
|
|
}
|
|
headlist={rainSttn.rainSttHeadList}
|
|
pageSize={20}
|
|
total={100000}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
rainCellClick(index ?? undefined, headId)
|
|
}}
|
|
onPageChange={setPageNation}
|
|
/>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{/* 중수도시설 */}
|
|
{isRswt && (
|
|
<>
|
|
{showDetailView ? (
|
|
// 재이용시설 상세
|
|
<>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<Title title='중수도시설 상세정보' />
|
|
</div>
|
|
<RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} />
|
|
{/* TODO: 지도 점검 결과 현황 추가 할 것 */}
|
|
</>
|
|
) : (
|
|
// 재이용시설 목록
|
|
<>
|
|
<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={rswtrTable || []}
|
|
children={
|
|
<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
|
|
}
|
|
headlist={rswtSttn.rswtSttHeadList}
|
|
pageSize={20}
|
|
total={100000}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
rswtCellClick(index, headId);
|
|
}}
|
|
onPageChange={setPageNation}
|
|
/>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{/* 온배수시설 */}
|
|
{isHtdfl && (
|
|
<>
|
|
{showDetailView ? (
|
|
// 재이용시설 상세
|
|
<>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<Title title='온배수시설 상세정보' />
|
|
</div>
|
|
{/* <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> */}
|
|
<HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} />
|
|
</>
|
|
) : (
|
|
// 재이용시설 목록
|
|
<>
|
|
<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={bdstTable || []}
|
|
children={
|
|
<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
|
|
}
|
|
headlist={htdflSttn.htdflSttHeadList}
|
|
pageSize={20}
|
|
total={100000}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
htdflCellClick(index ?? undefined, headId);
|
|
}}
|
|
onPageChange={setPageNation}
|
|
/>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보">
|
|
{/* 체크된 레이어에 따른 조건부 렌더링 */}
|
|
{renderConditionalContent()}
|
|
</NewWindowPortal>
|
|
);
|
|
};
|
|
|
|
export default NewWindowPopup; |