ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

state 처리 필요

Browse Source
This commit is contained in:
truthwing
2025-07-14 13:52:13 +09:00
parent 8a4f7d17aa
commit bde20e9a70
1 changed files with 112 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/map/newWindowPopup.tsx
+112 -143
View File
@@ -1,19 +1,18 @@
import { useWrStore } from "@/app/store";
import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import { excelDownload, tableData } from "@/components/lib/func/commom";
import { Title, UiTable, UITab, ContentsDiv, ScrollArea } from '@common/business_components';
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import React, { useCallback, useState, useEffect } from 'react';
import NewWindowPortal from '@/app/map/newWindowPortal';
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 type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import { useWrStore } from "@/app/store";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
import type { customPbnst, 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 type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import { fetchType, getFetch, postFectch } from "@/components/lib/api";
import { useGisContext } from "@common/business_components/ui/map/Gis";
import { tableData } from "@/components/lib/func/commom";
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import { set } from "react-hook-form";
import { Title, UITab, UiTable } from '@common/business_components';
import { useGisContext } from "@common/business_components/ui/map/Gis";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import React, { useCallback, useEffect, useState } from 'react';
interface NewWindowPopupProps {
featureData: any;
@@ -25,27 +24,8 @@ interface NewWindowPopupProps {
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 = [],
seletectedLayerNm,
onFeatureSelect,
onClose
@@ -77,12 +57,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
(state) => state
);
let { rainSttnRes, rainSttnResCount } = rainSttn;
const { rainSttnRes, rainSttnResCount } = rainSttn;
const [rainTable, setRainTable] = useState<customRainBdst[]>();
const [rainBdstChgProps, setRainBdstChgProps] = useState<{
isOpen: boolean;
chBuilding: chgBuilding[];
}>({ isOpen: false, chBuilding: [] });
const [rainPage, setRainPage] = useState(1)
const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
@@ -90,18 +66,14 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
(state) => state
);
let { rswtSttnRes, rswtSttnResCount } = rswtSttn;
const { rswtSttnRes, rswtSttnResCount } = 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 [rswtrPage, setRswtrPage] = useState(1);
// 온배수시설 변수
const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
let { htdflSttnRes,htdflSttnResCount } = htdflSttn;
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)
@@ -111,19 +83,19 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
pbnst,
pubHasuInit,
} = useWrStore((state) => state);
let { pubFacHeadList, pbnstHasuRes } = pbnst;
const { pubFacHeadList, pbnstHasuRes } = pbnst;
const [hasuList, setHasuList] = useState<pubHasuType[]>(pbnstHasuRes || []);
const [isRuseReg, setIsRuseReg] = useState<{
data: any | undefined;
}>({ data: undefined });
const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
const [hasuPage, setHasuPage] = useState<number>(1);
const [hasuRes,setHasuRes] = useState<number>()
if (!featureData) return;
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
const getSelectedLayers = () => {
let result = null;
const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
let featureLayer: { get: (key: string) => any } = {get:()=> null};
layers.forEach((layer: any) => {
const source = layer.getSource();
if (source && source.hasFeature && featureData
@@ -135,8 +107,55 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
return result;
};
useEffect(() => {
const layerId = getSelectedLayers();
const fetchpbnstDetail = async (featureCd: string) => {
try {
const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
// 중복 데이터 추가 방지
setTabDataFunc(response, featureCd);
} catch (error) {
console.error("Error fetching data:", error);
}
};
const fetchHasuDetail = async (featureCd: string, data: string) => {
try {
const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON);
//TODO : state 처리.
setHasuList(
rainRes.data.map((item: any) => {
return {
...item,
fctCpc: Number(item.fctCpc) || 0,
ruse: item.ruse === false ? "N" : "Y",
};
});
)
pbnstHasuRes = hasuList
if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
} catch (error) {
console.error("Error fetching data:", error);
}
};
const detainSttn = async (featureCd: string, layerNm: string) => {
if (layerNm == '빗물이용시설') {
const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
rainSttnRes = res
setRainDetailModal({ isOpen: true, data: rainSttnRes[0] });
}
else if(layerNm == '중수도시설'){
const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
rswtSttnRes = res
console.log('중수도', res, featureCd)
setRswtrDetailModal({isOpen:true,data:rswtSttnRes[0]})
}
else{
const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
htdflSttnRes = res
setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
}
}
const layerId = getSelectedLayers();
if (featureData && typeof featureData.getProperties === "function") {
const selectedVal = featureData.getProperties();
let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null;
@@ -160,7 +179,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
setViewMode("detail")
}
} else if (layerId === null && seletectedLayerNm) { setViewMode("list") }
}, [featureData]);
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
@@ -182,7 +200,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
if (!pbnstSttn.isInit) {
getFlcts()
}
}, [seletectedLayerNm, pbnstSttn.isInit]);
}, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]);
useEffect(()=>{
pbnSttnInit("1", "15", {
partValue: "A",
@@ -210,15 +228,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
});
}
// 재이용시설 조회
const fetchpbnstDetail = async (featureCd: string) => {
try {
const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
// 중복 데이터 추가 방지
setTabDataFunc(response, featureCd);
} catch (error) {
console.error("Error fetching data:", error);
}
};
// 재이용시설 페이징처리 관련 함수
const onPageChangeHandler = useCallback((page: number) => {
pbnstSttnSearch(
@@ -240,18 +249,18 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
String(new Date().getFullYear()),fclts
);
}, []);
const excelClick = useCallback(() => {
// if (codeData) pbnstSttnSearch(1, "10000", codeData);
excelDownload(
[[]],
"하수재이용시설 현황",
"sample_pbnstSttn.xlsx",
"A1:U2"
);
}, [pbnstSttnSearch]);
// FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
// const excelClick = useCallback(() => {
// // if (codeData) pbnstSttnSearch(1, "10000", codeData);
// excelDownload(
// [[]],
// "하수재이용시설 현황",
// "sample_pbnstSttn.xlsx",
// "A1:U2"
// );
// }, [pbnstSttnSearch]);
///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
// 빗물재이용시설 cellClick 이벤트 (상세정보)
const rainCellClick = (index: number | undefined, headId: string) => {
@@ -263,29 +272,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
// setViewMode('detail')
onFeatureSelect(rainTable[index]);
onClose();
} else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) {
if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null)
setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding });
}
}
const detainSttn = async (featureCd: string, layerNm: string) => {
if (layerNm == '빗물이용시설') {
const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
rainSttnRes = res
setRainDetailModal({ isOpen: true, data: rainSttnRes[0] });
}
else if(layerNm == '중수도시설'){
const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
rswtSttnRes = res
console.log('중수도', res, featureCd)
setRswtrDetailModal({isOpen:true,data:rswtSttnRes[0]})
}
else{
const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
htdflSttnRes = res
setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
}
}
useEffect(() => {
if (!rainSttn.isInit) {
@@ -337,10 +326,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
// setViewMode('detail')
onFeatureSelect(rswtrTable[index]);
onClose();
} else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') {
setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding });
}
}
}
useEffect(() => {
@@ -369,18 +354,18 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
);
setRswtrTable(chData);
}, [code, rswtSttnRes]);
// 엑셀 관련
const rswtSttnExcelDownload = useCallback(() => {
if (rswtSttn.excelList.length > 0) {
if (rswtSttn.excelList.length === 0) return;
excelDownload(
rswtSttn.excelList,
"중수도시설 현황",
"sample_rswtSttn.xlsx",
"A1:W3",
);
}
}, [rswtSttn.excelList])
// 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(() => {
rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd);
@@ -433,24 +418,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
useEffect(() => {
pubHasuInit(String(hasuPage), "0");
}, [hasuPage]);
const fetchHasuDetail = async (featureCd: string, data: string) => {
try {
const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON);
const hasuList = rainRes.data.map((item: any) => {
return {
...item,
fctCpc: Number(item.fctCpc) || 0,
ruse: item.ruse === false ? "N" : "Y",
};
});
pbnstHasuRes = hasuList
if (pbnstHasuRes.length > 0) setIsRuseReg({ data: [pbnstHasuRes[0]] });
} catch (error) {
console.error("Error fetching data:", error);
}
};
const hasuCellClick = (index: number | undefined, headId: string) => {
const hasuCellClick = (index: number | undefined) => {
if (index !== undefined && pbnstHasuRes !== undefined) {
onFeatureSelect(pbnstHasuRes[index]);
onClose();
@@ -466,15 +435,15 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
layerId = seletectedLayerNm || '';
}
//하수처리시설
let isPrcsFclt = layerId == '하수처리시설'
const isPrcsFclt = layerId == '하수처리시설'
// 재이용시설
let isPbnst = layerId == '하수재이용시설';
const isPbnst = layerId == '하수재이용시설';
// 빗물이용시설
let isRain = layerId == '빗물이용시설';
const isRain = layerId == '빗물이용시설';
// 중수도시설
let isRswt = layerId == '중수도시설';
const isRswt = layerId == '중수도시설';
// 온배수시설
let isHtdfl = layerId == '온배수시설';
const isHtdfl = layerId == '온배수시설';
if (isPrcsFclt) {
if (viewMode == 'list') {
return (
@@ -491,7 +460,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
headName={""}
cellClick={hasuCellClick}
onPageChange={setHasuPage}
children={undefined}
/>
</>
)
@@ -506,21 +474,19 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
tableData={isRuseReg?.data || []}
headlist={pubFacHeadList.slice(0, 4)}
pageSize={1}
total={null}
total={0}
headName={"위치정보"}
cellClick={() => { }}
onPageChange={() => { }}
children={undefined}
/>
<UiTable
tableData={isRuseReg?.data || []}
headlist={pubFacHeadList.slice(4)}
pageSize={1}
total={null}
total={0}
headName={"기본정보"}
cellClick={() => { }}
onPageChange={() => { }}
children={undefined}
/>
</>
)
@@ -542,7 +508,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
label: tab.name,
onClick: () => setActiveTab(tab.id),
}))}
children={undefined}
/>
</div>
<PbnstSttnModal
@@ -566,15 +531,16 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={bdstTable || []}
children={<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />}
headlist={pbnstSttn.pbnstSttHeadList}
pageSize={20}
total={pbnstSttnResCount || 0}
cellClick={(index: number | undefined, headId: string) => {
cellClick={(index: number | undefined) => {
pbnstCellClick(index);
}}
onPageChange={onPageChangeHandler}
/>
>
<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
</UiTable>
</>
);
}
@@ -601,7 +567,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={rainTable || []}
children={<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />}
headlist={rainSttn.rainSttHeadList}
pageSize={20}
total={rainSttnResCount}
@@ -609,7 +574,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
rainCellClick(index ?? undefined, headId);
}}
onPageChange={setRainPage}
/>
>
<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
</UiTable>
</>
);
}
@@ -636,7 +603,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={rswtrTable || []}
children={<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />}
headlist={rswtSttn.rswtSttHeadList}
pageSize={20}
total={rswtSttnResCount}
@@ -644,7 +610,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
rswtCellClick(index, headId);
}}
onPageChange={setRswtrPage}
/>
>
<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
</UiTable>
</>
);
}
@@ -671,7 +639,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
<UiTable
headName={[]}
tableData={htdflTable || []}
children={<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />}
headlist={htdflSttn.htdflSttHeadList}
pageSize={20}
total={htdflSttnResCount || 0}
@@ -679,7 +646,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
htdflCellClick(index ?? undefined, headId);
}}
onPageChange={setHtdflPage}
/>
>
<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
</UiTable>
</>
);
}