팝업별 컴포넌트 분리 및 시설 선택시 해당 api만 호출하도록 변경
This commit is contained in:
JIeunhuh
+2
-2
@@ -25,13 +25,13 @@ const HasuFacility = ({ seletectedLayerNm, viewMode, onClose, onFeatureSelect, i
|
||||
}
|
||||
}, [code, pbnstHasuRes]);
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '하수처리시설') return;
|
||||
if (seletectedLayerNm !== '하수처리시설' || viewMode != 'list') return;
|
||||
if (!pbnst.isInit) {
|
||||
pubHasuInit("1", "0");
|
||||
}
|
||||
}, [pbnst.isInit, pubHasuInit]);
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '하수처리시설') return;
|
||||
if (seletectedLayerNm !== '하수처리시설' || viewMode != 'list') return;
|
||||
pubHasuInit(String(hasuPage), "0");
|
||||
}, [hasuPage, pubHasuInit]);
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useWrStore } from '@/app/store';
|
||||
import type { customHtdflBdst } from '@/app/store/ruseFcltMng/fcltReg/htdflReg';
|
||||
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 React, { useEffect, useState } from 'react'
|
||||
interface Props {
|
||||
seletectedLayerNm: string;
|
||||
viewMode: 'list' | 'detail' | 'nothing';
|
||||
onFeatureSelect: (feature: any) => void;
|
||||
onClose: () => void;
|
||||
htdflDetailModal: { isOpen: boolean; data: customHtdflBdst | undefined };
|
||||
}
|
||||
const HtdflFacility = ({ seletectedLayerNm, viewMode, onFeatureSelect, onClose, htdflDetailModal }: Props) => {
|
||||
const { code, htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
|
||||
const { htdflSttnRes, htdflSttnResCount } = htdflSttn;
|
||||
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
|
||||
const [htdflPage, setHtdflPage] = useState(1)
|
||||
// 온배수시설 cellClick 이벤트 (상세정보)
|
||||
const htdflCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && htdflTable !== undefined) {
|
||||
onFeatureSelect(htdflTable[index]);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '온배수시설' || viewMode != 'list') return;
|
||||
if (!htdflSttn.isInit) {
|
||||
initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
}
|
||||
}, [code.cityCd, code.sggCd, htdflSttn.isInit, initHtdfl]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '온배수시설' || viewMode != 'list') return;
|
||||
const data = tableData(htdflSttnRes, { code });
|
||||
const chData = data
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0].htdflObj,
|
||||
chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
|
||||
}))
|
||||
.filter((item: any) => item.htdflObj !== undefined);
|
||||
setHtdflTable(chData);
|
||||
}, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '온배수시설' || viewMode != 'list') return;
|
||||
htdflSttnSearch(true, htdflPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
}, [code.cityCd, code.sggCd, htdflPage, htdflSttnSearch]);
|
||||
return (
|
||||
viewMode == 'detail' ? (
|
||||
<SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst} />
|
||||
) : (
|
||||
<div style={{ overflowY: 'auto' }}>
|
||||
<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={htdflTable || []}
|
||||
headlist={htdflSttn.htdflSttHeadList}
|
||||
pageSize={20}
|
||||
total={htdflSttnResCount || 0}
|
||||
cellClick={(index: number | undefined) => {
|
||||
htdflCellClick(index ?? undefined);
|
||||
}}
|
||||
onPageChange={setHtdflPage}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export default HtdflFacility
|
||||
@@ -0,0 +1,105 @@
|
||||
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;
|
||||
+3
-4
@@ -40,14 +40,13 @@ const ResueFacility = ({ viewMode, seletectedLayerNm, tabData, actTabData, setFc
|
||||
|
||||
// 재이용 현황 초기값
|
||||
useEffect(() => {
|
||||
console.log('재이용시설 초기값 호출', viewMode)
|
||||
if (seletectedLayerNm !== '하수재이용시설') return;
|
||||
if (seletectedLayerNm !== '하수재이용시설' || viewMode !='list') return;
|
||||
if (!pbnstSttn.isInit) {
|
||||
getFlcts()
|
||||
}
|
||||
}, [seletectedLayerNm, pbnstSttn.isInit]);
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '하수재이용시설') return;
|
||||
if (seletectedLayerNm !== '하수재이용시설' || viewMode !='list') return;
|
||||
pbnSttnInit("1", "20", {
|
||||
partValue: "A",
|
||||
sidoValue: '0',
|
||||
@@ -67,7 +66,7 @@ const ResueFacility = ({ viewMode, seletectedLayerNm, tabData, actTabData, setFc
|
||||
// 재이용시설 조회
|
||||
// 재이용시설 페이징처리 관련 함수
|
||||
const onPageChangeHandler = useCallback((page: number) => {
|
||||
if (seletectedLayerNm !== '하수재이용시설') return;
|
||||
if (seletectedLayerNm !== '하수재이용시설' || viewMode !='list') return;
|
||||
pbnstSttnSearch(
|
||||
false,
|
||||
String(page),
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useWrStore } from '@/app/store';
|
||||
import { tableData, formatPhoneNumber } from '@/components/lib/func/commom';
|
||||
import { Title, UiTable } from '@common/business_components/ui';
|
||||
import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
|
||||
import moment from 'moment';
|
||||
import React, { useEffect, useState } from 'react'
|
||||
interface Props {
|
||||
seletectedLayerNm: string;
|
||||
viewMode: 'list' | 'detail' | 'nothing';
|
||||
onFeatureSelect: (feature: any) => void;
|
||||
onClose: () => void;
|
||||
isDmdModal: { data: any | undefined };
|
||||
}
|
||||
const ReuseMngFacility = ({seletectedLayerNm, viewMode, onFeatureSelect, onClose, isDmdModal}:Props) => {
|
||||
const { code,
|
||||
coSttn,
|
||||
coSttnInit,
|
||||
coSttnSearch,
|
||||
} = useWrStore((state) => state);
|
||||
const [mngTable, setMngTable] = useState<DemandCompType[]>();
|
||||
const [mngPage, setMngPage] = useState(1);
|
||||
const { coSttnRes, coSttnResCount, coSttHeadList } = coSttn;
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '수요처' || viewMode != 'list') return;
|
||||
if (!coSttn.isInit) {
|
||||
coSttnInit("1", "20", "0");
|
||||
}
|
||||
}, [coSttn.isInit, coSttnInit]);
|
||||
const coMngCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && mngTable !== undefined) {
|
||||
onFeatureSelect(mngTable[index]);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '수요처' || viewMode!='list') return;
|
||||
if (coSttnRes) {
|
||||
if (coSttnRes?.length > 0 && code.cityCd.length > 0) {
|
||||
const data = tableData(coSttnRes, { code });
|
||||
const chData = data.map((item: any) => ({
|
||||
...item,
|
||||
telno: formatPhoneNumber(item.telno || undefined),
|
||||
regDt: moment(item.regDt).format("YYYY-MM-DD"),
|
||||
dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}`
|
||||
}));
|
||||
// .filter((item: any) => item !== undefined);
|
||||
setMngTable(chData);
|
||||
}
|
||||
}
|
||||
}, [coSttnRes, code]);
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '수요처' || viewMode!='list') return;
|
||||
coSttnSearch(String(mngPage), "20", String(0));
|
||||
}, [coSttnSearch, mngPage]);
|
||||
return (
|
||||
viewMode == 'detail'
|
||||
? (
|
||||
<div style={{ overflowX: 'hidden' }}>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Title title="수요처 상세정보" />
|
||||
</div>
|
||||
{/* 높이 조정 */}
|
||||
<UiTable
|
||||
tableData={isDmdModal?.data || []}
|
||||
headlist={coSttHeadList.slice(0, 3)}
|
||||
pageSize={1}
|
||||
total={0}
|
||||
headName={"위치정보"}
|
||||
cellClick={() => { }}
|
||||
onPageChange={() => { }}
|
||||
/>
|
||||
<UiTable
|
||||
tableData={isDmdModal?.data || []}
|
||||
headlist={coSttHeadList.slice(3)}
|
||||
pageSize={1}
|
||||
total={0}
|
||||
headName={"기본정보"}
|
||||
cellClick={() => { }}
|
||||
onPageChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
) : (<div>
|
||||
<div className="flex justify-between items-center">
|
||||
<Title title="수요처 현황" />
|
||||
</div>
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={mngTable || []}
|
||||
headlist={coSttHeadList}
|
||||
pageSize={20}
|
||||
total={coSttnResCount + 10 || 0}
|
||||
cellClick={(index: number | undefined) => {
|
||||
coMngCellClick(index);
|
||||
// setUpdateData(coSttnRes[index as number]);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
setMngPage(page);
|
||||
}}
|
||||
></UiTable></div>)
|
||||
)
|
||||
}
|
||||
|
||||
export default ReuseMngFacility
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
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;
|
||||
rswtrDetailModal: { isOpen: boolean; data: customRswtBdst | undefined };
|
||||
}
|
||||
const RswtFacility = ({ seletectedLayerNm, viewMode, onFeatureSelect, onClose, rswtrDetailModal }: Props) => {
|
||||
const { code, rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
|
||||
(state) => state
|
||||
);
|
||||
const { rswtSttnRes, rswtSttnResCount } = rswtSttn;
|
||||
const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>()
|
||||
const [rswtrPage, setRswtrPage] = useState(1);
|
||||
// 중수도시설 cellClick 이벤트 (상세정보)
|
||||
const rswtCellClick = (index: number | undefined, headId: string) => {
|
||||
if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
|
||||
// setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] });
|
||||
// setViewMode('detail')
|
||||
onFeatureSelect(rswtrTable[index]);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '중수도시설' || viewMode != 'list') return;
|
||||
if (!rswtSttn.isInit) {
|
||||
rswtSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
}
|
||||
}, [code.cityCd, code.sggCd, rswtSttn.isInit, rswtSttnInit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '중수도시설' || viewMode != 'list') return;
|
||||
const data = tableData(rswtSttnRes, { code });
|
||||
const chData = data
|
||||
.map((item: customRswtBdst) => {
|
||||
return {
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0]?.rswtrObj,
|
||||
chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N',
|
||||
instlCst: item.reuseBuilding[0]?.instlCst === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCst,
|
||||
instlCstSprtAmt: item.reuseBuilding[0]?.instlCstSprtAmt === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCstSprtAmt,
|
||||
archArea: item?.archArea.split('.')[0] !== '-1' ? item?.archArea.split('.')[0] : '확인불가'
|
||||
}
|
||||
})
|
||||
.filter(
|
||||
(item: customRswtBdst) =>
|
||||
item.reuseBuilding[0]?.rswtrObj !== undefined
|
||||
);
|
||||
setRswtrTable(chData);
|
||||
}, [code, rswtSttnRes]);
|
||||
// FIXME: 윤선화 차장님 요구사항으로 엑셀 다운로드 삭제.
|
||||
// const rswtSttnExcelDownload = useCallback(() => {
|
||||
// if (rswtSttn.excelList.length > 0) {
|
||||
// if (rswtSttn.excelList.length === 0) return;
|
||||
// excelDownload(
|
||||
// rswtSttn.excelList,
|
||||
// "중수도시설 현황",
|
||||
// "sample_rswtSttn.xlsx",
|
||||
// "A1:W3",
|
||||
// );
|
||||
// }
|
||||
// }, [rswtSttn.excelList])
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '중수도시설' || viewMode != 'list') return;
|
||||
rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
}, [code.cityCd, code.sggCd, rswtSttnSearch, rswtrPage]);
|
||||
return (
|
||||
viewMode == 'detail' ?
|
||||
// 중수도시설 상세
|
||||
(
|
||||
<SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst} />
|
||||
) : (
|
||||
<div style={{ overflowY: 'auto' }}>
|
||||
<div className="flex justify-between items-center">
|
||||
<Title title="중수도시설 현황" />
|
||||
{/* <div className="flex gap-2 mt-8">
|
||||
<Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}>
|
||||
엑셀다운로드
|
||||
</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={rswtrTable || []}
|
||||
headlist={rswtSttn.rswtSttHeadList}
|
||||
pageSize={20}
|
||||
total={rswtSttnResCount}
|
||||
cellClick={(index: number | undefined, headId: string) => {
|
||||
rswtCellClick(index, headId);
|
||||
}}
|
||||
onPageChange={setRswtrPage}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
export default RswtFacility;
|
||||
@@ -0,0 +1,186 @@
|
||||
"use client"
|
||||
import NewWindowPortal from '@/app/map/components/newWindowPortal';
|
||||
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
||||
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
||||
import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import ResueFacility from './layerPopup/reuseFacility';
|
||||
import { detainSttn, fetchHasuDetail, fetchpbnstDetail } from '../util';
|
||||
import HasuFacility from './layerPopup/hasuFacility';
|
||||
import RainFacility from './layerPopup/rainFacility';
|
||||
import RswtFacility from './layerPopup/rswtFacility';
|
||||
import HtdflFacility from './layerPopup/htdflFacility';
|
||||
import ReuseMngFacility from './layerPopup/reuseMngFacility';
|
||||
|
||||
interface NewWindowPopupProps {
|
||||
featureData: any;
|
||||
seletectedLayerNm?: string
|
||||
viewMode?: 'list' | 'detail' | 'nothing'
|
||||
onFeatureSelect: (data: any) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
featureData,
|
||||
seletectedLayerNm,
|
||||
onFeatureSelect,
|
||||
onClose
|
||||
}) => {
|
||||
const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
|
||||
const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<string>('0');
|
||||
const [viewMode, setViewMode] = useState<'list' | 'detail' | 'nothing'>('list');
|
||||
const [fcltPk, setFcltPk] = useState<string>('');
|
||||
|
||||
|
||||
// onClose 함수를 useCallback으로 메모이제이션
|
||||
const memoizedOnClose = useCallback(() => {
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
// 빗물재이용시설 변수
|
||||
const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [rainList, setRainList] = useState<customRainBdst[]>([]);
|
||||
|
||||
// 중수도시설 변수
|
||||
const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [rswtrList, setRswtrList] = useState<customRswtBdst[]>([]);
|
||||
|
||||
// 온배수시설 변수
|
||||
const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [htdflList, setHtdflList] = useState<customHtdflBdst[]>([]);
|
||||
|
||||
// 하수처리시설 변수
|
||||
const [hasuList, setHasuList] = useState<pubHasuType[]>([]);
|
||||
const [isRuseReg, setIsRuseReg] = useState<{
|
||||
data: any | undefined;
|
||||
}>({ data: undefined });
|
||||
|
||||
// 수요처관리 변수
|
||||
const [isDmdModal, setIsDmdModal] = useState<{
|
||||
isMoal: boolean;
|
||||
data: any | undefined;
|
||||
}>({ isMoal: false, data: undefined });
|
||||
const [mngList, setMngList] = useState<DemandCompType[]>([]);
|
||||
|
||||
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
|
||||
const getSelectedLayers = () => {
|
||||
console.trace('호출확인', 1)
|
||||
let result = null;
|
||||
const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
|
||||
let featureLayer: { get: (key: string) => any } = { get: () => null };
|
||||
layers.forEach((layer: any) => {
|
||||
const source = layer.getSource();
|
||||
if (source && source.hasFeature && featureData
|
||||
&& typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
|
||||
featureLayer = layer; // 피처가 속한 레이어 찾기)
|
||||
}
|
||||
});
|
||||
result = featureLayer.get('lyrNm');
|
||||
return result;
|
||||
};
|
||||
// 상세 목록 데이터 상태 처리
|
||||
useEffect(() => {
|
||||
if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
|
||||
}, [hasuList])
|
||||
useEffect(() => {
|
||||
if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] });
|
||||
}, [rainList])
|
||||
useEffect(() => {
|
||||
if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] });
|
||||
}, [rswtrList])
|
||||
useEffect(() => {
|
||||
if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] });
|
||||
}, [htdflList])
|
||||
useEffect(() => {
|
||||
if (mngList.length > 0) setIsDmdModal({ isMoal: true, data: [mngList[0]] });
|
||||
}, [mngList])
|
||||
|
||||
const lastCalledIdRef = useRef<string | null>(null);
|
||||
const [layerId, setLayerId] = useState<string | null>();
|
||||
|
||||
useEffect(() => {
|
||||
const layers = getSelectedLayers();
|
||||
setLayerId(layers);
|
||||
}, []); // 최초 렌더링 시 호출
|
||||
|
||||
// 피쳐 데이터가 변경될 때마다 호출
|
||||
useEffect(() => {
|
||||
if (!featureData || typeof featureData.getProperties !== "function" || featureData.getProperties() == '') return;
|
||||
const selectedProps = featureData.getProperties();
|
||||
const currentId = featureData.getId?.() || selectedProps?.id || selectedProps?.fid;
|
||||
// 유효하지 않은 ID는 아예 무시
|
||||
if (!currentId || typeof currentId !== 'string') return;
|
||||
// 이전과 동일하면 무시
|
||||
if (!currentId || currentId === lastCalledIdRef.current) return;
|
||||
lastCalledIdRef.current = currentId // 새로운 피처일 때만 API 호출
|
||||
const layerId = getSelectedLayers?.();
|
||||
if (!layerId || typeof layerId !== 'string') return;
|
||||
const featureCd =
|
||||
layerId === '하수재이용시설' ? selectedProps?.swtrmt_fclt_cd :
|
||||
['빗물이용시설', '중수도시설', '온배수시설', '수요처'].includes(layerId) ? selectedProps?.bdst_nm :
|
||||
layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm :
|
||||
null;
|
||||
if (!featureCd || featureCd === fcltPk) return;
|
||||
setFcltPk(featureCd);
|
||||
setActiveTab(featureCd);
|
||||
setViewMode("detail");
|
||||
if (layerId === '하수재이용시설') {
|
||||
fetchpbnstDetail(featureCd, setTabData);
|
||||
} else if (layerId === '하수처리시설') {
|
||||
fetchHasuDetail(featureCd, selectedProps?.swtrmt_fclt_cd).then((data) => { setHasuList(data) })
|
||||
} else {
|
||||
detainSttn(featureCd, layerId).then((res) => {
|
||||
if (layerId === '빗물이용시설') setRainList(res);
|
||||
else if (layerId === '중수도시설') setRswtrList(res);
|
||||
else if (layerId === '온배수시설') { setHtdflList(res); setHtdflDetailModal({ isOpen: true, data: res[0] }); }
|
||||
else if (layerId === '수요처') setMngList(res);
|
||||
});
|
||||
}
|
||||
}, [featureData]);
|
||||
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
|
||||
|
||||
// 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
|
||||
const renderConditionalContent = () => {
|
||||
const actTabData = tabData.find((tab) => tab.id === activeTab);
|
||||
if (layerId === null || layerId === undefined) {
|
||||
setLayerId(seletectedLayerNm || '');
|
||||
}
|
||||
switch (layerId) {
|
||||
case '하수재이용시설':
|
||||
return (<ResueFacility viewMode={viewMode} seletectedLayerNm={layerId} tabData={tabData} actTabData={actTabData} setFcltPk={setFcltPk} onFeatureSelect={onFeatureSelect} onClose={onClose} />)
|
||||
case '하수처리시설':
|
||||
return (<HasuFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} isRuseReg={isRuseReg} />)
|
||||
case '빗물이용시설':
|
||||
return (<RainFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} rainDetailModal={rainDetailModal} />)
|
||||
case '중수도시설':
|
||||
return (<RswtFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} rswtrDetailModal={rswtrDetailModal} />)
|
||||
case '온배수시설':
|
||||
return (<HtdflFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} htdflDetailModal={htdflDetailModal} />)
|
||||
case '수요처':
|
||||
return(<ReuseMngFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} isDmdModal={isDmdModal} />)
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return null; // 조건에 맞는 콘텐츠가 없을 경우
|
||||
};
|
||||
|
||||
return (
|
||||
viewMode == 'nothing' ? <></> :
|
||||
<NewWindowPortal
|
||||
onClose={memoizedOnClose}
|
||||
title="시설 상세 정보"
|
||||
width={viewMode == 'list' ? window.screen.availWidth : 1100}
|
||||
height={viewMode == 'list' ? window.screen.availHeight : layerId == '하수처리시설' && viewMode == 'detail' ? 450 : 900}
|
||||
scrollbars='yes'
|
||||
resizable='no'>
|
||||
{/* 체크된 레이어에 따른 조건부 렌더링 */}
|
||||
{renderConditionalContent()}
|
||||
</NewWindowPortal>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewWindowPopup;
|
||||
@@ -3,7 +3,7 @@
|
||||
import Gis from "@common/business_components/ui/map/Gis";
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { mapService } from "../service";
|
||||
import NewWindowPopup from "../newWindowPopup";
|
||||
import NewWindowPopup from "../components/newWindowPopup";
|
||||
import GisApp from "@common/business_components/ui/map/lib/gis.core";
|
||||
|
||||
const Map = () => {
|
||||
@@ -61,30 +61,27 @@ const Map = () => {
|
||||
|
||||
// 2. data가 OpenLayers Feature 인스턴스인지 확인
|
||||
let foundFeature: any = null;
|
||||
console.log(data)
|
||||
//console.log(data.getId())
|
||||
let featureId = data.fid;
|
||||
const layerName = data.layerNm;
|
||||
|
||||
if (layerName === "재이용시설") {
|
||||
console.log("선택된 레이어 이름:", data, layerName);
|
||||
if (layerName === "하수재이용시설") {
|
||||
// 재이용시설
|
||||
featureId = `${layerName}.${data.searchPk}`;
|
||||
} else if ( //빗물이용시설, 중수도시설
|
||||
layerName === "빗물이용시설" ||
|
||||
layerName == "tb_wr_rswtr_fclt"
|
||||
layerName == "중수도시설"
|
||||
) {
|
||||
featureId = `${layerName}.${data.bdstInfoSn}`;
|
||||
} else if (layerName === "tb_il_swage_prcs_fclt") { //하수처리시설
|
||||
} else if (layerName === "하수처리시설") { //하수처리시설
|
||||
featureId = `${layerName}.${data.bscFctCd}`;
|
||||
} else if (layerName === "tb_wr_htdfl_fclt") { //온배수시설
|
||||
} else if (layerName === "온배수시설") { //온배수시설
|
||||
featureId = `${layerName}.${data.bdstRuseFcltSn}`;
|
||||
} else if (layerName == "tb_wr_ruse_fclt_dmd_co") { //수요처
|
||||
} else if (layerName == "수요처") { //수요처
|
||||
featureId = `${layerName}.${data.dmdInfoId.replaceAll("-", "")}`;
|
||||
} else {
|
||||
console.warn("해당 레이어에 대한 featureId 매핑 없음", layerName);
|
||||
featureId = `${layerName}.${data.fid || data.id || data.ftrIdn}`;
|
||||
}
|
||||
|
||||
map
|
||||
.getLayers()
|
||||
.getArray()
|
||||
|
||||
@@ -1,552 +0,0 @@
|
||||
"use client"
|
||||
import NewWindowPortal from '@/app/map/newWindowPortal';
|
||||
import { useWrStore } from "@/app/store";
|
||||
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
||||
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import { formatPhoneNumber, tableData } from "@/components/lib/func/commom";
|
||||
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
|
||||
import { Title, UiTable } from '@common/business_components';
|
||||
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
||||
import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
|
||||
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
||||
import moment from 'moment';
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import ResueFacility from './components/reuseFacility';
|
||||
import { detainSttn, fetchHasuDetail, fetchpbnstDetail } from './util';
|
||||
import HasuFacility from './components/hasuFacility';
|
||||
|
||||
interface NewWindowPopupProps {
|
||||
featureData: any;
|
||||
seletectedLayerNm?: string
|
||||
viewMode?: 'list' | 'detail' | 'nothing'
|
||||
onFeatureSelect: (data: any) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
featureData,
|
||||
seletectedLayerNm,
|
||||
onFeatureSelect,
|
||||
onClose
|
||||
}) => {
|
||||
const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
|
||||
const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]);
|
||||
const [activeTab, setActiveTab] = useState<string>('0');
|
||||
const [viewMode, setViewMode] = useState<'list' | 'detail' | 'nothing'>('list');
|
||||
const [fcltPk, setFcltPk] = useState<string>('');
|
||||
|
||||
|
||||
// onClose 함수를 useCallback으로 메모이제이션
|
||||
const memoizedOnClose = useCallback(() => {
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
// 하수재이용시설 변수
|
||||
const {code} = useWrStore((state) => state);
|
||||
|
||||
// 빗물재이용시설 변수
|
||||
const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
|
||||
(state) => state
|
||||
);
|
||||
const { rainSttnRes, rainSttnResCount } = rainSttn;
|
||||
const [rainTable, setRainTable] = useState<customRainBdst[]>();
|
||||
const [rainPage, setRainPage] = useState(1)
|
||||
const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [rainList, setRainList] = useState<customRainBdst[]>(rainSttnRes || []);
|
||||
|
||||
// 중수도시설 변수
|
||||
const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
|
||||
(state) => state
|
||||
);
|
||||
const { rswtSttnRes, rswtSttnResCount } = rswtSttn;
|
||||
const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
|
||||
const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [rswtrPage, setRswtrPage] = useState(1);
|
||||
const [rswtrList, setRswtrList] = useState<customRswtBdst[]>(rswtSttnRes || []);
|
||||
|
||||
// 온배수시설 변수
|
||||
const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
|
||||
const { htdflSttnRes, htdflSttnResCount } = htdflSttn;
|
||||
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
|
||||
const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [htdflPage, setHtdflPage] = useState(1)
|
||||
const [htdflList, setHtdflList] = useState<customHtdflBdst[]>(htdflSttnRes || []);
|
||||
|
||||
// 하수처리시설 변수
|
||||
const [hasuList, setHasuList] = useState<pubHasuType[]>([]);
|
||||
const [isRuseReg, setIsRuseReg] = useState<{
|
||||
data: any | undefined;
|
||||
}>({ data: undefined });
|
||||
|
||||
// 수요처관리 변수
|
||||
const {
|
||||
coSttn,
|
||||
coSttnInit,
|
||||
coSttnSearch,
|
||||
} = useWrStore((state) => state);
|
||||
const [mngTable, setMngTable] = useState<DemandCompType[]>();
|
||||
const [mngPage, setMngPage] = useState(1);
|
||||
const { coSttnRes, coSttnResCount, coSttHeadList } = coSttn;
|
||||
const [isDmdModal, setIsDmdModal] = useState<{
|
||||
isMoal: boolean;
|
||||
data: any | undefined;
|
||||
}>({ isMoal: false, data: undefined });
|
||||
const [mngList, setMngList] = useState<DemandCompType[]>(coSttnRes || []);
|
||||
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
|
||||
const getSelectedLayers = () => {
|
||||
console.trace('호출확인', 1)
|
||||
let result = null;
|
||||
const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
|
||||
let featureLayer: { get: (key: string) => any } = { get: () => null };
|
||||
layers.forEach((layer: any) => {
|
||||
const source = layer.getSource();
|
||||
if (source && source.hasFeature && featureData
|
||||
&& typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
|
||||
featureLayer = layer; // 피처가 속한 레이어 찾기)
|
||||
}
|
||||
});
|
||||
result = featureLayer.get('lyrNm');
|
||||
return result;
|
||||
};
|
||||
// 상세 목록 데이터 상태 처리
|
||||
useEffect(() => {
|
||||
if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
|
||||
}, [hasuList])
|
||||
useEffect(() => {
|
||||
if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] });
|
||||
}, [rainList])
|
||||
useEffect(() => {
|
||||
if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] });
|
||||
}, [rswtrList])
|
||||
useEffect(() => {
|
||||
if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] });
|
||||
}, [htdflList])
|
||||
useEffect(() => {
|
||||
if (mngList.length > 0) setIsDmdModal({ isMoal: true, data: [mngList[0]] });
|
||||
}, [mngList])
|
||||
const lastCalledIdRef = useRef<string | null>(null);
|
||||
const [layerId, setLayerId] = useState<string | null>();
|
||||
useEffect(() => {
|
||||
const layers = getSelectedLayers();
|
||||
setLayerId(layers);
|
||||
}, []); // 최초 렌더링 시 호출
|
||||
useEffect(() => {
|
||||
if (!featureData || typeof featureData.getProperties !== "function" || featureData.getProperties() == '') return;
|
||||
const selectedProps = featureData.getProperties();
|
||||
const currentId = featureData.getId?.() || selectedProps?.id || selectedProps?.fid;
|
||||
// 유효하지 않은 ID는 아예 무시
|
||||
if (!currentId || typeof currentId !== 'string') return;
|
||||
// 이전과 동일하면 무시
|
||||
if (!currentId || currentId === lastCalledIdRef.current) return;
|
||||
lastCalledIdRef.current = currentId // 새로운 피처일 때만 API 호출
|
||||
const layerId = getSelectedLayers?.();
|
||||
if (!layerId || typeof layerId !== 'string') return;
|
||||
const featureCd =
|
||||
layerId === '하수재이용시설' ? selectedProps?.swtrmt_fclt_cd :
|
||||
['빗물이용시설', '중수도시설', '온배수시설', '수요처'].includes(layerId) ? selectedProps?.bdst_nm :
|
||||
layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm :
|
||||
null;
|
||||
if (!featureCd || featureCd === fcltPk) return;
|
||||
setFcltPk(featureCd);
|
||||
setActiveTab(featureCd);
|
||||
setViewMode("detail");
|
||||
if (layerId === '하수재이용시설') {
|
||||
fetchpbnstDetail(featureCd, setTabData);
|
||||
} else if (layerId === '하수처리시설') {
|
||||
fetchHasuDetail(featureCd, selectedProps?.swtrmt_fclt_cd).then((data) => { setHasuList(data) })
|
||||
} else {
|
||||
detainSttn(featureCd, layerId).then((res) => {
|
||||
if (layerId === '빗물이용시설') setRainList(res);
|
||||
else if (layerId === '중수도시설') setRswtrList(res);
|
||||
else if (layerId === '온배수시설'){ setHtdflList(res); setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });}
|
||||
else if (layerId === '수요처') setMngList(res);
|
||||
});
|
||||
}
|
||||
}, [featureData]);
|
||||
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
|
||||
|
||||
///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
|
||||
// 빗물재이용시설 cellClick 이벤트 (상세정보)
|
||||
const rainCellClick = (index: number | undefined, headId: string) => {
|
||||
if (
|
||||
index !== undefined &&
|
||||
rainTable !== undefined &&
|
||||
headId !== 'chBuildingYn') {
|
||||
// setRainDetailModal({ isOpen: true, data: rainTable[index] })
|
||||
// setViewMode('detail')
|
||||
onFeatureSelect(rainTable[index]);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '빗물이용시설') return;
|
||||
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 !== '빗물이용시설') return;
|
||||
rainSttnSearch(false, rainPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
}, [code.cityCd, code.sggCd, rainPage, rainSttnSearch]);
|
||||
///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
|
||||
|
||||
///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////
|
||||
// 중수도시설 cellClick 이벤트 (상세정보)
|
||||
const rswtCellClick = (index: number | undefined, headId: string) => {
|
||||
if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
|
||||
// setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] });
|
||||
// setViewMode('detail')
|
||||
onFeatureSelect(rswtrTable[index]);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '중수도시설') return;
|
||||
if (!rswtSttn.isInit) {
|
||||
rswtSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
}
|
||||
}, [code.cityCd, code.sggCd, rswtSttn.isInit, rswtSttnInit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '중수도시설') return;
|
||||
const data = tableData(rswtSttnRes, { code });
|
||||
const chData = data
|
||||
.map((item: customRswtBdst) => {
|
||||
return {
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0]?.rswtrObj,
|
||||
chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N',
|
||||
instlCst: item.reuseBuilding[0]?.instlCst === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCst,
|
||||
instlCstSprtAmt: item.reuseBuilding[0]?.instlCstSprtAmt === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCstSprtAmt,
|
||||
archArea: item?.archArea.split('.')[0] !== '-1' ? item?.archArea.split('.')[0] : '확인불가'
|
||||
}
|
||||
})
|
||||
.filter(
|
||||
(item: customRswtBdst) =>
|
||||
item.reuseBuilding[0]?.rswtrObj !== undefined
|
||||
);
|
||||
setRswtrTable(chData);
|
||||
}, [code, rswtSttnRes]);
|
||||
// FIXME: 윤선화 차장님 요구사항으로 엑셀 다운로드 삭제.
|
||||
// const rswtSttnExcelDownload = useCallback(() => {
|
||||
// if (rswtSttn.excelList.length > 0) {
|
||||
// if (rswtSttn.excelList.length === 0) return;
|
||||
// excelDownload(
|
||||
// rswtSttn.excelList,
|
||||
// "중수도시설 현황",
|
||||
// "sample_rswtSttn.xlsx",
|
||||
// "A1:W3",
|
||||
// );
|
||||
// }
|
||||
// }, [rswtSttn.excelList])
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '중수도시설') return;
|
||||
rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
}, [code.cityCd, code.sggCd, rswtSttnSearch, rswtrPage]);
|
||||
///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////
|
||||
|
||||
///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
|
||||
// 온배수시설 cellClick 이벤트 (상세정보)
|
||||
const htdflCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && htdflTable !== undefined) {
|
||||
onFeatureSelect(htdflTable[index]);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '온배수시설') return;
|
||||
if (!htdflSttn.isInit) {
|
||||
initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
}
|
||||
}, [code.cityCd, code.sggCd, htdflSttn.isInit, initHtdfl]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '온배수시설') return;
|
||||
const data = tableData(htdflSttnRes, { code });
|
||||
const chData = data
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0].htdflObj,
|
||||
chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
|
||||
}))
|
||||
.filter((item: any) => item.htdflObj !== undefined);
|
||||
setHtdflTable(chData);
|
||||
}, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '온배수시설') return;
|
||||
htdflSttnSearch(true, htdflPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
}, [code.cityCd, code.sggCd, htdflPage, htdflSttnSearch]);
|
||||
///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
|
||||
|
||||
///////////////////////////////////////////// 수요처 관리 //////////////////////////////////////////////////
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '수요처') return;
|
||||
if (!coSttn.isInit) {
|
||||
coSttnInit("1", "20", "0");
|
||||
}
|
||||
}, [coSttn.isInit, coSttnInit]);
|
||||
const coMngCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && mngTable !== undefined) {
|
||||
onFeatureSelect(mngTable[index]);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '수요처') return;
|
||||
if (coSttnRes) {
|
||||
if (coSttnRes?.length > 0 && code.cityCd.length > 0) {
|
||||
const data = tableData(coSttnRes, { code });
|
||||
const chData = data.map((item: any) => ({
|
||||
...item,
|
||||
telno: formatPhoneNumber(item.telno || undefined),
|
||||
regDt: moment(item.regDt).format("YYYY-MM-DD"),
|
||||
dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}`
|
||||
}));
|
||||
// .filter((item: any) => item !== undefined);
|
||||
setMngTable(chData);
|
||||
}
|
||||
}
|
||||
}, [coSttnRes, code]);
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm !== '수요처') return;
|
||||
coSttnSearch(String(mngPage), "20", String(0));
|
||||
}, [coSttnSearch, mngPage]);
|
||||
///////////////////////////////////////////// 수요처 관리 //////////////////////////////////////////////////
|
||||
|
||||
// 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
|
||||
const renderConditionalContent = () => {
|
||||
const actTabData = tabData.find((tab) => tab.id === activeTab);
|
||||
if (layerId === null || layerId === undefined) {
|
||||
setLayerId(seletectedLayerNm || '');
|
||||
}
|
||||
// 빗물이용시설
|
||||
const isRain = layerId == '빗물이용시설';
|
||||
// 중수도시설
|
||||
const isRswt = layerId == '중수도시설';
|
||||
// 온배수시설
|
||||
const isHtdfl = layerId == '온배수시설';
|
||||
// 수요처관리
|
||||
const isReuseMng = layerId == '수요처';
|
||||
switch (layerId) {
|
||||
case '하수재이용시설':
|
||||
return (<ResueFacility viewMode={viewMode} seletectedLayerNm={layerId} tabData={tabData} actTabData={actTabData} setFcltPk={setFcltPk} onFeatureSelect={onFeatureSelect} onClose={onClose} />)
|
||||
case '하수처리시설':
|
||||
return(<HasuFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} isRuseReg={isRuseReg}/>)
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (isRain) {
|
||||
if (viewMode == 'detail') {
|
||||
// 빗물이용시설 상세
|
||||
return (
|
||||
<SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} />
|
||||
);
|
||||
} else {
|
||||
// 빗물이용시설 목록
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (isRswt) {
|
||||
if (viewMode == 'detail') {
|
||||
// 중수도시설 상세
|
||||
return (
|
||||
<SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst} />
|
||||
);
|
||||
} else {
|
||||
// 중수도시설 목록
|
||||
return (
|
||||
<div style={{ overflowY: 'auto' }}>
|
||||
<div className="flex justify-between items-center">
|
||||
<Title title="중수도시설 현황" />
|
||||
{/* <div className="flex gap-2 mt-8">
|
||||
<Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}>
|
||||
엑셀다운로드
|
||||
</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={rswtrTable || []}
|
||||
headlist={rswtSttn.rswtSttHeadList}
|
||||
pageSize={20}
|
||||
total={rswtSttnResCount}
|
||||
cellClick={(index: number | undefined, headId: string) => {
|
||||
rswtCellClick(index, headId);
|
||||
}}
|
||||
onPageChange={setRswtrPage}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (isHtdfl) {
|
||||
if (viewMode == 'detail') {
|
||||
// 온배수시설 상세
|
||||
return (
|
||||
<SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst} />
|
||||
);
|
||||
} else {
|
||||
// 온배수시설 목록
|
||||
return (
|
||||
<div style={{ overflowY: 'auto' }}>
|
||||
<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={htdflTable || []}
|
||||
headlist={htdflSttn.htdflSttHeadList}
|
||||
pageSize={20}
|
||||
total={htdflSttnResCount || 0}
|
||||
cellClick={(index: number | undefined) => {
|
||||
htdflCellClick(index ?? undefined);
|
||||
}}
|
||||
onPageChange={setHtdflPage}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
if (isReuseMng) {
|
||||
if (viewMode == 'detail') {
|
||||
return (
|
||||
<div style={{ overflowX: 'hidden' }}>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<Title title="수요처 상세정보" />
|
||||
</div>
|
||||
{/* 높이 조정 */}
|
||||
<UiTable
|
||||
tableData={isDmdModal?.data || []}
|
||||
headlist={coSttHeadList.slice(0, 3)}
|
||||
pageSize={1}
|
||||
total={0}
|
||||
headName={"위치정보"}
|
||||
cellClick={() => { }}
|
||||
onPageChange={() => { }}
|
||||
/>
|
||||
<UiTable
|
||||
tableData={isDmdModal?.data || []}
|
||||
headlist={coSttHeadList.slice(3)}
|
||||
pageSize={1}
|
||||
total={0}
|
||||
headName={"기본정보"}
|
||||
cellClick={() => { }}
|
||||
onPageChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
} else if (viewMode == 'list') {
|
||||
return (<div>
|
||||
<div className="flex justify-between items-center">
|
||||
<Title title="수요처 현황" />
|
||||
</div>
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={mngTable || []}
|
||||
headlist={coSttHeadList}
|
||||
pageSize={20}
|
||||
total={coSttnResCount + 10 || 0}
|
||||
cellClick={(index: number | undefined) => {
|
||||
coMngCellClick(index);
|
||||
// setUpdateData(coSttnRes[index as number]);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
setMngPage(page);
|
||||
}}
|
||||
></UiTable></div>)
|
||||
}
|
||||
}
|
||||
return null; // 조건에 맞는 콘텐츠가 없을 경우
|
||||
};
|
||||
|
||||
return (
|
||||
viewMode == 'nothing' ? <></> :
|
||||
<NewWindowPortal
|
||||
onClose={memoizedOnClose}
|
||||
title="시설 상세 정보"
|
||||
width={viewMode == 'list' ? window.screen.availWidth : 1100}
|
||||
height={viewMode == 'list' ? window.screen.availHeight : layerId == '하수처리시설' && viewMode == 'detail' ? 450 : 900}
|
||||
scrollbars='yes'
|
||||
resizable='no'>
|
||||
{/* 체크된 레이어에 따른 조건부 렌더링 */}
|
||||
{renderConditionalContent()}
|
||||
</NewWindowPortal>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewWindowPopup;
|
||||
@@ -3,7 +3,7 @@
|
||||
import Gis from "@common/business_components/ui/map/Gis";
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { mapService } from "../service";
|
||||
import NewWindowPopup from "../newWindowPopup";
|
||||
import NewWindowPopup from "../components/newWindowPopup";
|
||||
import GisApp from "@common/business_components/ui/map/lib/gis.core";
|
||||
|
||||
const Map = () => {
|
||||
|
||||
Reference in New Issue
Block a user