하수처리시설 상세 팝업 구현

2025-07-08 19:42:07 +09:00
parent ef1643e9da
commit 1a4b287b7a
1 changed files with 100 additions and 48 deletions
@@ -10,9 +10,10 @@ import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstS
 import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
 import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
-import { getFetch } from "@/components/lib/api";
+import { fetchType, getFetch, postFectch } from "@/components/lib/api";
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
+import { set } from "react-hook-form";

 interface NewWindowPopupProps {
  featureData: any;
@@ -104,25 +105,26 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] });
  const [htdflPage, setHtdflPage] = useState(1)

+  //하수처리시설 변수
  const {
-      pbnst,
-      pubHasuInit,
-      pubHasuSearch,
-    } = useWrStore((state) => state);
-    const { pubFacHeadList, pbnstHasuRes, pbnstRes } = pbnst;
-    const [isRuseReg, setIsRuseReg] = useState<{
-      isModal: boolean;
-    }>({ isModal: false });
-    const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
-    const [selectRow, setSelectRow] = useState<pubHasuType>();
-    const [hasuPage, setHasuPage] = useState<number>(1);
+    pbnst,
+    pubHasuInit,
+    pubHasuSearch,
+  } = useWrStore((state) => state);
+  let { pubFacHeadList, pbnstHasuRes, pbnstRes } = pbnst;
+  const [isRuseReg, setIsRuseReg] = useState<{
+    data:any | undefined;
+  }>({ data: undefined });
+  const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
+  const [selectRow, setSelectRow] = useState<pubHasuType>();
+  const [hasuPage, setHasuPage] = useState<number>(1);
  if (!featureData) return;
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
  useEffect(() => {
    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 == '하수처리시설' ? 'a' : null;
+      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null;
      if (featureCd && featureCd !== fcltPk) {
        if (layerId == '하수재이용시설') {
          featureCd = selectedVal?.swtrmt_fclt_cd;
@@ -148,8 +150,10 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          htdflSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
          setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
        }
-        else if(layerId =='하수처리시설') {
-
+        else if (layerId == '하수처리시설') {
+          featureCd = selectedVal?.swtrmt_fclt_nm;
+          setFcltPk(featureCd); // 현재 호출된 featureCd 저장
+          const res = fetchHasuDetail(featureCd,selectedVal?.swtrmt_fclt_cd);
        };
        setViewMode("detail")

@@ -176,7 +180,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  };
  const getSelectedLayers = () => {
    let result = null;
-    const layers = gisMap ? gisMap.getLayers().getArray().filter((l:any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
+    const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
    let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
    layers.forEach((layer: any) => {
      const source = layer.getSource();
@@ -414,19 +418,38 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  }, [htdflPage]);
  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////

-   useEffect(() => {
-      if (code.sggCd.length && pbnstHasuRes.length > 0) {
-        setHasuTable(tableData(pbnstHasuRes, { code }));
-      }
-    }, [code, pbnstHasuRes]);
-    useEffect(() => {
-      if (!pbnst.isInit) {
-        pubHasuInit("1", "0");
-      }
-    }, [pbnst.isInit, pubHasuInit]);
-    useEffect(() => {
-      pubHasuInit(String(hasuPage), "0");
-    }, [hasuPage]);
+  useEffect(() => {
+    if (code.sggCd.length && pbnstHasuRes.length > 0) {
+      setHasuTable(tableData(pbnstHasuRes, { code }));
+    }
+  }, [code, pbnstHasuRes]);
+  useEffect(() => {
+    if (!pbnst.isInit) {
+      pubHasuInit("1", "0");
+    }
+  }, [pbnst.isInit, pubHasuInit]);
+  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
+        // console.log(hasuList)
+        if(pbnstHasuRes.length >0)setIsRuseReg({ data:[pbnstHasuRes[0]] });
+        console.log(pbnstHasuRes)
+        
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };

  // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
  const renderConditionalContent = () => {
@@ -452,17 +475,46 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
            <div className="flex justify-between items-center mb-4">
              <Title title="하수처리시설 현황" />
            </div>
-              {/* 높이 조정 */}
-              <UiTable
-                tableData={hasuTable || []}
-                headlist={pubFacHeadList}
-                pageSize={10}
-                total={100000}
-                headName={""}
-                cellClick={()=>{}}
-                onPageChange={setHasuPage}
-                children={undefined}
-              />
+            {/* 높이 조정 */}
+            <UiTable
+              tableData={hasuTable || []}
+              headlist={pubFacHeadList}
+              pageSize={10}
+              total={100000}
+              headName={""}
+              cellClick={() => { }}
+              onPageChange={setHasuPage}
+              children={undefined}
+            />
+          </>
+        )
+      } else {
+        return (
+          <>
+            <div className="flex justify-between items-center mb-4">
+              <Title title="하수처리시설 상세정보" />
+            </div>
+            {/* 높이 조정 */}
+            <UiTable
+              tableData={isRuseReg?.data || []}
+              headlist={pubFacHeadList.slice(0,4)}
+              pageSize={1}
+              total={null}
+              headName={"위치정보"}
+              cellClick={() => { }}
+              onPageChange={() => { }}
+              children={undefined}
+            />
+            <UiTable
+              tableData={isRuseReg?.data || []}
+              headlist={pubFacHeadList.slice(4)}
+              pageSize={1}
+              total={null}
+              headName={"기본정보"}
+              cellClick={() => { }}
+              onPageChange={() => { }}
+              children={undefined}
+            />
          </>
        )
      }
@@ -525,7 +577,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
      if (viewMode == 'detail') {
        // 빗물이용시설 상세
        return (
-            <SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} />
+          <SttnDetailModal type={"RNB"} formObj={rainDetailModal.data as customRainBdst} />
        );
      } else {
        // 빗물이용시설 목록
@@ -560,7 +612,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
      if (viewMode == 'detail') {
        // 중수도시설 상세
        return (
-            <SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst}/>
+          <SttnDetailModal type={"RST"} formObj={rswtrDetailModal.data as customRswtBdst} />
        );
      } else {
        // 중수도시설 목록
@@ -595,7 +647,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
      if (viewMode == 'detail') {
        // 온배수시설 상세
        return (
-            <SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst}/>
+          <SttnDetailModal type={"HTB"} formObj={htdflDetailModal.data as customHtdflBdst} />
        );
      } else {
        // 온배수시설 목록
@@ -630,11 +682,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  };

  return (
-    viewMode == 'nothing' ? <></> : 
-    <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보">
-      {/* 체크된 레이어에 따른 조건부 렌더링 */}
-      {renderConditionalContent()}
-    </NewWindowPortal>
+    viewMode == 'nothing' ? <></> :
+      <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보">
+        {/* 체크된 레이어에 따른 조건부 렌더링 */}
+        {renderConditionalContent()}
+      </NewWindowPortal>
  );
 };