상세 / 현황팝업 분리작업 중
This commit is contained in:
JIeunhuh
@@ -16,11 +16,13 @@ import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup";
|
||||
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import { getFetch } from "@/components/lib/api";
|
||||
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
||||
|
||||
interface NewWindowPopupProps {
|
||||
featureData: any;
|
||||
checkedLayers?: string[];
|
||||
checkedLayersData?: any[];
|
||||
seletectedLayerNm?: string
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
@@ -38,12 +40,16 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
featureData,
|
||||
checkedLayers = [],
|
||||
checkedLayersData = [],
|
||||
seletectedLayerNm,
|
||||
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');
|
||||
// swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음
|
||||
const [showDetailView, setShowDetailView] = useState(false); // 상세정보 화면 표시 상태 추가
|
||||
const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가
|
||||
const [showListView, setShowListView] = useState(false)
|
||||
const [viewMode, setViewMode] = useState<"detail" | "list">("detail"); // "detail" 또는 "list"로 상태 관리
|
||||
|
||||
// onClose 함수를 useCallback으로 메모이제이션
|
||||
const memoizedOnClose = useCallback(() => {
|
||||
@@ -56,8 +62,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
pbnstSttn,
|
||||
pbnstSttnSearch,
|
||||
pbnSttnInit,
|
||||
getPbnStnDetail,
|
||||
pbnNmSearch,
|
||||
} = useWrStore((state) => state);
|
||||
const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>();
|
||||
const [pageNation, setPageNation] = useState(1);
|
||||
@@ -98,11 +102,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
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;
|
||||
}
|
||||
|
||||
// 물재이용시설 cellClick 이벤트 (상세정보)
|
||||
// 재이용시설 cellClick 이벤트 (상세정보)
|
||||
const pbnstCellClick = (index: number | undefined) => {
|
||||
if (
|
||||
index !== undefined &&
|
||||
@@ -112,36 +112,51 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk);
|
||||
fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
|
||||
setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
|
||||
setShowDetailView(true); // 상세정보 화면 표시 상태 변경
|
||||
setViewMode('detail')
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!pbnstSttn.isInit) {
|
||||
pbnSttnInit("1", "13",{
|
||||
partValue: "A",
|
||||
sidoValue: "0",
|
||||
sigunValue: "",
|
||||
regionValue: "",
|
||||
unitWaterShedValue: "",
|
||||
middleRegionValue: "",
|
||||
envPartValue: "",
|
||||
sidoText: "",
|
||||
sigunText: ""
|
||||
}, String(new Date().getFullYear()));
|
||||
const getSelectedLayers = () => {
|
||||
let result = null;
|
||||
const layers = gisMap ? gisMap.getLayers().getArray() : []; // gisMap이 null인지 확인 후 레이어 가져오기
|
||||
let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
|
||||
layers.forEach((layer: any) => {
|
||||
const source = layer.getSource();
|
||||
if (source && source.hasFeature && featureData
|
||||
&& typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
|
||||
featureLayer = layer; // 피처가 속한 레이어 찾기
|
||||
}
|
||||
}, [pbnstSttn.isInit]);
|
||||
});
|
||||
result = featureLayer.get('lyrNm');
|
||||
|
||||
useEffect(() => {
|
||||
setBdstTable(pbnstSttn.pbnstSttnRes);
|
||||
}, [pbnstSttn.pbnstSttnRes]);
|
||||
return result;
|
||||
};
|
||||
// 재이용 현황 초기값
|
||||
useEffect(() => {
|
||||
if (!pbnstSttn.isInit) {
|
||||
pbnSttnInit("1", "13", {
|
||||
partValue: "A",
|
||||
sidoValue: "0",
|
||||
sigunValue: "",
|
||||
regionValue: "",
|
||||
unitWaterShedValue: "",
|
||||
middleRegionValue: "",
|
||||
envPartValue: "",
|
||||
sidoText: "",
|
||||
sigunText: ""
|
||||
}, String(new Date().getFullYear()));
|
||||
}
|
||||
}, [pbnstSttn.isInit]);
|
||||
|
||||
// 재이용시설 상세정보
|
||||
const setTabDataFunc = (res:any, pk:string) => {
|
||||
useEffect(() => {
|
||||
setBdstTable(pbnstSttn.pbnstSttnRes);
|
||||
}, [pbnstSttn.pbnstSttnRes]);
|
||||
|
||||
// 재이용시설 상세정보
|
||||
const setTabDataFunc = (res: any, pk: string) => {
|
||||
setTabData((prev) => {
|
||||
if (prev.some((tab) => tab.id === pk)) {
|
||||
return prev; // 이미 존재하는 탭이면 추가하지 않음
|
||||
}
|
||||
}
|
||||
return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }];
|
||||
});
|
||||
}
|
||||
@@ -175,17 +190,25 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
String(new Date().getFullYear())
|
||||
);
|
||||
}, []);
|
||||
// useEffect(() => {
|
||||
// if (featureData) {
|
||||
// const selectedVal = featureData.getProperties();
|
||||
// const featureCd = selectedVal?.swtrmt_fclt_cd;
|
||||
// if (featureCd && featureCd !== pbnstRuseFcltPk) {
|
||||
// setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장
|
||||
// setActiveTab(featureCd)
|
||||
// fetchpbnstDetail(featureCd); // 상세정보 가져오기
|
||||
// }
|
||||
// }
|
||||
// }, [featureData]);
|
||||
useEffect(() => {
|
||||
if (seletectedLayerNm && seletectedLayerNm === getSelectedLayers()) {
|
||||
console.log('레이어명이 일치하여 상세보기 비활성화'); // 디버깅 로그 추가
|
||||
setViewMode('list')
|
||||
}
|
||||
}, [seletectedLayerNm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (featureData) {
|
||||
const selectedVal = featureData.getProperties();
|
||||
const featureCd = selectedVal?.swtrmt_fclt_cd;
|
||||
if (featureCd && featureCd !== pbnstRuseFcltPk) {
|
||||
setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장
|
||||
setActiveTab(featureCd)
|
||||
fetchpbnstDetail(featureCd); // 상세정보
|
||||
setViewMode("detail"); // 상세 보기 활성화
|
||||
}
|
||||
}
|
||||
}, [featureData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pbnstSttn.pbnstDetail) {
|
||||
@@ -248,18 +271,19 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
|
||||
);
|
||||
const actTabData = tabData.find((tab) => tab.id === activeTab);
|
||||
console.log('tavbData',actTabData)
|
||||
const layerId = getSelectedLayers()
|
||||
// swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
|
||||
// 재이용시설
|
||||
const isPbnst = true;
|
||||
let isPbnst = layerId == '하수처리시설';
|
||||
// 빗물이용시설
|
||||
const isRain = false;
|
||||
let isRain = layerId == '빗물이용시설';
|
||||
// 중수도시설
|
||||
const isRswt = false;
|
||||
let isRswt = layerId == '중수도시설';
|
||||
// 온배수시설
|
||||
const isHtdfl = false;
|
||||
let isHtdfl = layerId == '온배수시설';
|
||||
|
||||
if (isPbnst) {
|
||||
if (showDetailView) {
|
||||
if (viewMode=='detail') {
|
||||
// 재이용시설 상세
|
||||
return (
|
||||
<>
|
||||
@@ -278,7 +302,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
/>
|
||||
</div>
|
||||
<PbnstSttnModal
|
||||
data={tabData.find((tab) => tab.id === activeTab)?.data[0] || ({} as customPbnst)}
|
||||
data={actTabData?.data[0] || ({} as customPbnst)}
|
||||
titleVisible={false}
|
||||
/>
|
||||
</>
|
||||
@@ -311,7 +335,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (isRain) {
|
||||
if (showDetailView) {
|
||||
// 빗물이용시설 상세
|
||||
@@ -351,7 +375,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (isRswt) {
|
||||
if (showDetailView) {
|
||||
// 중수도시설 상세
|
||||
@@ -391,7 +415,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (isHtdfl) {
|
||||
if (showDetailView) {
|
||||
// 온배수시설 상세
|
||||
@@ -431,7 +455,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return null; // 조건에 맞는 콘텐츠가 없을 경우
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user