하수처리시설 현황 추가

2025-07-07 19:56:56 +09:00
parent af9c36527d
commit 8e7d32a48b
1 changed files with 97 additions and 42 deletions
@@ -1,8 +1,8 @@
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
-import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import { excelDownload, tableData } from "@/components/lib/func/commom";
-import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components';
+import { Title, UiTable, UITab, ContentsDiv, ScrollArea } 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';
@@ -18,13 +18,14 @@ 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";
+import ListDiv from "@common/business_components/ui/list_div";

 interface NewWindowPopupProps {
  featureData: any;
  checkedLayers?: string[];
  checkedLayersData?: any[];
  seletectedLayerNm?: string
-  viewMode?: 'list' | 'detail'
+  viewMode?: 'list' | 'detail' | 'nothing'
  onClose: () => void;
 }

@@ -55,7 +56,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  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'>('list');
+  const [viewMode, setViewMode] = useState<'list' | 'detail' | 'nothing'>('list');
  const [fcltPk, setFcltPk] = useState<string>('');


@@ -105,14 +106,27 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  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: [] });
-  const [htdflPage,setHtdflPage] = useState(1)
-  if(!featureData) return ;
+  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);
+  if (!featureData) return;
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
  useEffect(() => {
    if (featureData && typeof featureData.getProperties === "function") {
      const selectedVal = featureData.getProperties();
      const layerId = getSelectedLayers();
-      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : '';
+      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? 'a' : null;
      if (featureCd && featureCd !== fcltPk) {
        if (layerId == '하수재이용시설') {
          featureCd = selectedVal?.swtrmt_fclt_cd;
@@ -125,6 +139,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          setFcltPk(featureCd)
          rainSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
          setRainDetailModal({ isOpen: true, data: rainSttn.rainSttnRes[0] });
+          setViewMode("detail")
        }
        else if (layerId == '중수도시설') {
          featureCd = selectedVal?.bdst_nm;
@@ -132,14 +147,16 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          setFcltPk(featureCd)
          rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
          setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] });
+          setViewMode("detail")
        }
-        else if(layerId == '온배수시설'){
+        else if (layerId == '온배수시설') {
          featureCd = selectedVal?.bdst_nm;
          setFcltPk(featureCd)
          htdflSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
          setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
+          setViewMode("detail")
        }
-        setViewMode("detail")
+        else if(layerId =='하수처리시설') setViewMode('nothing')
      }
    } else if (seletectedLayerNm) { setViewMode("list") }
  }, [featureData]);
@@ -342,8 +359,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({

    setRswtrTable(chData);
  }, [code, rswtSttnRes]);
-// 엑셀 관련 
-  const rswtSttnExcelDownload = useCallback(()=>{
+  // 엑셀 관련 
+  const rswtSttnExcelDownload = useCallback(() => {
    console.log('excel', rswtSttn.excelList, rswtrTable)
    if (rswtSttn.excelList.length > 0) {
      if (rswtSttn.excelList.length === 0) return;
@@ -354,14 +371,14 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
        "A1:W3",
      );
    }
-  },[rswtSttn.excelList])
+  }, [rswtSttn.excelList])

  useEffect(() => {
    rswtSttnSearch(rswtrPage, "20", '', '', code.cityCd, code.sggCd);
  }, [rswtrPage]);
  ///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////

-    ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
+  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
  // 온배수시설 cellClick 이벤트 (상세정보)
  const htdflCellClick = (index: number | undefined, headId: string) => {
    if (
@@ -374,29 +391,43 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
    }
  };
  useEffect(() => {
-      if (!htdflSttn.isInit) {
-        initHtdfl(1, "20", "0", '', code.cityCd, code.sggCd);
-      }
-    }, [htdflSttn.isInit, initHtdfl]);
-  
-    useEffect(() => {
-      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]);
+    if (!htdflSttn.isInit) {
+      initHtdfl(1, "20", "0", '', code.cityCd, code.sggCd);
+    }
+  }, [htdflSttn.isInit, initHtdfl]);

-    useEffect(() => {
-        htdflSttnSearch(htdflPage, "20", '', '', code.cityCd, code.sggCd);
-      }, [htdflPage]);
+  useEffect(() => {
+    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(() => {
+    htdflSttnSearch(htdflPage, "20", '', '', code.cityCd, code.sggCd);
+  }, [htdflPage]);
  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////

+   useEffect(() => {
+      if (code.sggCd.length && pbnstHasuRes.length > 0) {
+        setHasuTable(tableData(pbnstHasuRes, { code }));
+      }
+    }, [code, pbnstHasuRes]);
+    useEffect(() => {
+      if (!pbnst.isInit) {
+        pubHasuInit("1", "41");
+      }
+    }, [pbnst.isInit, pubHasuInit]);
+    useEffect(() => {
+      pubHasuInit(String(hasuPage), "41");
+    }, [hasuPage, pubHasuInit]);
+
  // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
  const renderConditionalContent = () => {
    // 특정 레이어가 체크되었는지 확인
@@ -408,6 +439,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
    if (layerId === null || layerId === undefined) {
      layerId = seletectedLayerNm || '';
    }
+    //하수처리시설
+    let isPrcsFclt = layerId == '하수처리시설'
    // 재이용시설
    let isPbnst = layerId == '하수재이용시설';
    // 빗물이용시설
@@ -416,7 +449,28 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
    let isRswt = layerId == '중수도시설';
    // 온배수시설
    let isHtdfl = layerId == '온배수시설';
-
+    if (isPrcsFclt) {
+      if (viewMode == 'list') {
+        return (
+          <>
+            <div className="flex justify-between items-center mb-4">
+              <Title title="하수처리시설 현황" />
+            </div>
+              {/* 높이 조정 */}
+              <UiTable
+                tableData={bdstTable || []}
+                headlist={pubFacHeadList}
+                pageSize={10}
+                total={100000}
+                headName={""}
+                cellClick={()=>{}}
+                onPageChange={setHasuPage}
+                children={undefined}
+              />
+          </>
+        )
+      }
+    }
    if (isPbnst) {
      if (viewMode == 'detail') {
        // 재이용시설 상세
@@ -448,11 +502,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          <>
            <div className="flex justify-between items-center">
              <Title title="하수재이용시설 현황" />
-              <div className="flex gap-2 mt-8">
+              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={excelClick}>
                  엑셀다운로드
                </Button>
-              </div>
+              </div> */}
            </div>
            <UiTable
              headName={[]}
@@ -488,11 +542,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          <>
            <div className="flex justify-between items-center">
              <Title title="빗물이용시설 현황" />
-              <div className="flex gap-2 mt-8">
+              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={excelClick}>
                  엑셀다운로드
                </Button>
-              </div>
+              </div> */}
            </div>
            <UiTable
              headName={[]}
@@ -528,11 +582,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          <>
            <div className="flex justify-between items-center">
              <Title title="중수도시설 현황" />
-              <div className="flex gap-2 mt-8">
+              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}>
                  엑셀다운로드
                </Button>
-              </div>
+              </div> */}
            </div>
            <UiTable
              headName={[]}
@@ -568,11 +622,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
          <>
            <div className="flex justify-between items-center">
              <Title title="온배수시설 현황" />
-              <div className="flex gap-2 mt-8">
+              {/* <div className="flex gap-2 mt-8">
                <Button className={btnClass} color="primary" onClick={excelClick}>
                  엑셀다운로드
                </Button>
-              </div>
+              </div> */}
            </div>
            <UiTable
              headName={[]}
@@ -595,6 +649,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  };

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