물재이용 맵 시설 현황 팝업 검색 조건 추가

2025-08-06 09:36:13 +09:00
parent 24a55142fb
commit bb6bba4497
6 changed files with 463 additions and 75 deletions
@@ -16,6 +16,7 @@ export type htdfMapState = {

 type htdfMapActions = {
  htdfMapInit: (page: number, total: number, cityOrSgg: string) => void;
+  htdfMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void
 };

 export type htdfMapType = htdfMapState & htdfMapActions;
@@ -59,5 +60,30 @@ export const htdfMapActionsExport: (set: any) => htdfMapActions = (
        console.log(e);
      }
    },
+    htdfMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => {
+          try {
+            const htdfMapRes = await getFetchWithCount(
+              fetchType.WR,
+              `/drain/facilityList` +
+                (page ? `/${page}` : "/1") +
+                (total ? `/${total}` : "/20") +
+                (cityOrSgg ? `/${cityOrSgg}` : "/0") +
+                (searchTxt ? `/${searchTxt}` : "") 
+            );
+    
+            set((state: htdfMapState) => {
+              return {
+                ...state,
+                htdfMap: {
+                  ...state.htdfMap,
+                  htdfMapRes: htdfMapRes.data,
+                  htdfMapCount: htdfMapRes.count,
+                },
+              };
+            });
+          } catch (e) {
+            console.log(e);
+          }
+        },
  };
 };
@@ -20,6 +20,7 @@ export type rainMapState = {

 type rainMapActions = {
  rainMapInit: (page: number, total: number, cityOrSgg:string) => void;
+  rainMapSearch:  (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void
 };

 export type rainMapType = rainMapState & rainMapActions;
@@ -63,5 +64,30 @@ export const rainMapActionsExport: (set: any) => rainMapActions = (
        console.log(e);
      }
    },
+    rainMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => {
+      try {
+        const rainMapRes = await getFetchWithCount(
+          fetchType.WR,
+          `/reuseFc/rainyInfoList` +
+            (page ? `/${page}` : "/1") +
+            (total ? `/${total}` : "/20") +
+            (cityOrSgg ? `/${cityOrSgg}` : "/0") +
+            (searchTxt ? `/${searchTxt}` : "") 
+        );
+
+        set((state: rainMapState) => {
+          return {
+            ...state,
+            rainMap: {
+              ...state.rainMap,
+              rainMapRes: rainMapRes.data,
+              rainMapCount: rainMapRes.count,
+            },
+          };
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
  };
 };
@@ -17,6 +17,7 @@ export type rswtMapState = {

 type rswtMapActions = {
  rswtMapInit: (page: number, total: number, cityOrSgg:string) => void;
+  rswtMapSearch:  (page: number, total: number, cityOrSgg:string, searchTxt?:string) => void
 };

 export type rswtMapType = rswtMapState & rswtMapActions;
@@ -60,5 +61,31 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = (
        console.log(e);
      }
    },
+    rswtMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => {
+      try {
+        const rswtMapRes = await getFetchWithCount(
+          fetchType.WR,
+          `/reuseFc/waterreuseFc` +
+            (page ? `/${page}` : "/1") +
+            (total ? `/${total}` : "/20") +
+            (cityOrSgg ? `/${cityOrSgg}` : "/0") +
+            (searchTxt ? `/${searchTxt}` : "") 
+        );
+
+        set((state: rswtMapState) => {
+          return {
+            ...state,
+            rswtMap: {
+              ...state.rswtMap,
+              rswtMapRes: rswtMapRes.data,
+              rswtMapCount: rswtMapRes.count,
+            },
+          };
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+
  };
 };
@@ -1,26 +1,69 @@
 import { useWrStore } from "@/app/store";
 import { rainMapSize } from "@/app/store/map/rainMap";
 import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
-import { tableData } from "@/components/lib/func/commom";
-import { Title, UiTable } from "@common/business_components/ui";
+import { getCity, tableData } from "@/components/lib/func/commom";
+import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import {
+  ContentsDiv,
+  SearchDiv,
+  SearchFormLeft,
+  SearchFormRight,
+  SearchInput,
+  SelectBox,
+  Title,
+  UiTable,
+  type SelectDataType,
+} from "@common/business_components/ui";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
-import { useEffect, useState } from "react";
+import { Button } from "@common/components/ui";
+import { useCallback, useEffect, useState } from "react";

 export function HtdflFacility({
-    rtnFeature,
-  }: {
-    rtnFeature: (feature: any) => void;
-  }) {
-  const { code, htdfMap, htdfMapInit } = useWrStore((state) => state);
+  rtnFeature,
+}: {
+  rtnFeature: (feature: any) => void;
+}) {
+  const { code, htdfMap, htdfMapInit,htdfMapSearch } = useWrStore((state) => state);
  const { htdfMapCount, htdfMapRes, htdfSttHeadList, htdfSttNodeList } =
    htdfMap;
  const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
  const [isReset, setIsReset] = useState(false);
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+  const [objSearch, setObjSearch] = useState<objSearchType>({
+    sgg: "",
+    city: "",
+  });
+
+  const [seartchTxt, setSearchTxt] = useState<string>();
+
+  const getSelCity = useCallback(
+    (val: string | number) => {
+      const cityValue = String(val);
+      const data = getCity(cityValue, code.sggCd);
+      setSelectSgg(data);
+      setObjSearch({ city: cityValue, sgg: "0" });
+    },
+    [code.sggCd]
+  );
+
+  const getSgg = useCallback((val: string | number) => {
+    setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
+  }, []);
+
+  useEffect(() => {
+    // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행
+    if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) {
+      const firstCityVal = code.cityCd[0]?.val;
+      if (firstCityVal) {
+        // 첫 번째 시/도 값으로 상태를 초기화합니다.
+        getSelCity(firstCityVal);
+      }
+    }
+  }, [code.cityCd, objSearch.city, getSelCity]);

  const htdflCellClick = (index: number | undefined) => {
    if (index !== undefined && htdflTable !== undefined) {
-        rtnFeature(htdflTable[index]);
-
+      rtnFeature(htdflTable[index]);
    }
  };

@@ -45,33 +88,94 @@ export function HtdflFacility({

  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> */}
+      <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4 ">
+          <div className="col-span-4">
+            <Title title="온배수시설 현황" />
+            <SearchDiv>
+              <SearchFormLeft>
+                <div className="col-span-10 flex flex-row">
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl"
+                    label="시도"
+                    selectClass={""}
+                    selectArray={code.cityCd || []}
+                    onSelectValue={(val) => {
+                      getSelCity(val);
+                    }}
+                    value={objSearch.city}
+                  />
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl ml-4"
+                    label="시군구"
+                    selectClass={""}
+                    selectArray={selectSgg || []}
+                    onSelectValue={getSgg}
+                    value={objSearch.sgg}
+                  />
+                  <SearchInput
+                    className={"!text-3xl ml-4"}
+                    label="회사명"
+                    textValue={seartchTxt ?? ""}
+                    setText={(e) => {
+                      setSearchTxt(e);
+                    }}
+                  />
+                </div>
+              </SearchFormLeft>
+              <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
+                <div className="flex flex-row space-x-2">
+                  <Button
+                    className="mt-2"
+                    size={"sm"}
+                    onClick={() => {
+                      setIsReset(true);
+                    }}
+                  >
+                    조회
+                  </Button>
+                </div>
+              </SearchFormRight>
+            </SearchDiv>
+          </div>
        </div>
-        <UiTable
-          headName={[]}
-          tableData={htdflTable || []}
-          headlist={htdfSttHeadList}
-          pageSize={rainMapSize}
-          total={htdfMapCount}
-          cellClick={(index: number | undefined) => {
-            htdflCellClick(index ?? undefined);
-          }}
-          onPageChange={(page) => {
-            htdfMapInit(page, rainMapSize, "0");
-            setIsReset(false);
-          }}
-          resetPageNo={isReset}
-        >
-          <HeadMakeColSpan upHeadList={htdfSttNodeList} />
-        </UiTable>
-      </div>
+        <div className="grid grid-cols-2 gap-4 ">
+        <div className="col-span-2">
+            <UiTable
+              headName={[]}
+              tableData={htdflTable || []}
+              headlist={htdfSttHeadList}
+              pageSize={rainMapSize}
+              total={htdfMapCount}
+              cellClick={(index: number | undefined) => {
+                htdflCellClick(index ?? undefined);
+              }}
+              onPageChange={(page) => {
+                const con =
+                  objSearch.sgg && objSearch.sgg !== "0"
+                    ? objSearch.sgg
+                    : objSearch.city;
+                if (con) {
+                  if (seartchTxt && seartchTxt?.length > 0) {
+                    htdfMapSearch(
+                      page,
+                      rainMapSize,
+                      String(con),
+                      seartchTxt ?? ""
+                    );
+                  } else {
+                    htdfMapSearch(page, rainMapSize, String(con));
+                  }
+                  setIsReset(false);
+                }
+              }}
+              resetPageNo={isReset}
+            >
+              <HeadMakeColSpan upHeadList={htdfSttNodeList} />
+            </UiTable>
+          </div>
+        </div>
+      </ContentsDiv>
    </>
  );
 }
@@ -1,24 +1,71 @@
 import { useWrStore } from "@/app/store";
 import { rainMapSize } from "@/app/store/map/rainMap";
 import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
-import { tableData } from "@/components/lib/func/commom";
-import { ContentsDiv, Title, UiTable } from "@common/business_components/ui";
+import { getCity, tableData } from "@/components/lib/func/commom";
+import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import {
+  ContentsDiv,
+  SearchDiv,
+  SearchFormLeft,
+  SearchFormRight,
+  SearchInput,
+  SelectBox,
+  Title,
+  UiTable,
+  type SelectDataType,
+} from "@common/business_components/ui";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
-import { useEffect, useState } from "react";
+import { Button } from "@common/components/ui";
+import { useCallback, useEffect, useState } from "react";

 export function RainFacility({
  rtnFeature,
 }: {
  rtnFeature: (feature: any) => void;
 }) {
-  const { code, rainMap, rainMapInit } = useWrStore((state) => state);
+  const { code, rainMap, rainMapInit, rainMapSearch } = useWrStore(
+    (state) => state
+  );
  const { rainMapRes, rainMapCount, rainSttHeadList, rainSttNodeList } =
    rainMap;
  const [rainTable, setRainTable] = useState<customRainBdst[]>();
  const [isReset, setIsReset] = useState(false);
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+  const [objSearch, setObjSearch] = useState<objSearchType>({
+    sgg: "",
+    city: "",
+  });
+
+  const [seartchTxt, setSearchTxt] = useState<string>();
+
+  const getSelCity = useCallback(
+    (val: string | number) => {
+      const cityValue = String(val);
+      const data = getCity(cityValue, code.sggCd);
+      setSelectSgg(data);
+      setObjSearch({ city: cityValue, sgg: "0" });
+    },
+    [code.sggCd]
+  );
+
+  const getSgg = useCallback((val: string | number) => {
+    setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
+  }, []);
+
+  useEffect(() => {
+    // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행
+    if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) {
+      const firstCityVal = code.cityCd[0]?.val;
+      if (firstCityVal) {
+        // 첫 번째 시/도 값으로 상태를 초기화합니다.
+        getSelCity(firstCityVal);
+      }
+    }
+  }, [code.cityCd, objSearch.city, getSelCity]);

  useEffect(() => {
    if (!rainMap.isInit) {
+      console.log("  init ");
      rainMapInit(1, rainMapSize, "0");
    }
  }, [rainMapInit, rainMap.isInit]);
@@ -34,7 +81,6 @@ export function RainFacility({
  };

  useEffect(() => {
-
    const data = tableData(rainMapRes, { code });
    const chData = data
      .map((item: any) => {
@@ -74,9 +120,58 @@ export function RainFacility({
  return (
    <>
      <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4 ">
+          <div className="col-span-4">
+            <Title title="빗물이용시설 현황" />
+            <SearchDiv>
+              <SearchFormLeft>
+                <div className="col-span-10 flex flex-row">
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl"
+                    label="시도"
+                    selectClass={""}
+                    selectArray={code.cityCd || []}
+                    onSelectValue={(val) => {
+                      getSelCity(val);
+                    }}
+                    value={objSearch.city}
+                  />
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl ml-4"
+                    label="시군구"
+                    selectClass={""}
+                    selectArray={selectSgg || []}
+                    onSelectValue={getSgg}
+                    value={objSearch.sgg}
+                  />
+                  <SearchInput
+                    className={"!text-3xl ml-4"}
+                    label="회사명"
+                    textValue={seartchTxt ?? ""}
+                    setText={(e) => {
+                      setSearchTxt(e);
+                    }}
+                  />
+                </div>
+              </SearchFormLeft>
+              <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
+                <div className="flex flex-row space-x-2">
+                  <Button
+                    className="mt-2"
+                    size={"sm"}
+                    onClick={() => {
+                      setIsReset(true);
+                    }}
+                  >
+                    조회
+                  </Button>
+                </div>
+              </SearchFormRight>
+            </SearchDiv>
+          </div>
+        </div>
        <div className="grid grid-cols-2 gap-4 ">
          <div className="col-span-2">
-            <Title title="빗물이용시설 현황" />
            <UiTable
              headName={[]}
              tableData={rainTable || []}
@@ -87,8 +182,23 @@ export function RainFacility({
                rainCellClick(index ?? undefined, headId);
              }}
              onPageChange={(page) => {
-                rainMapInit(page, rainMapSize, "0");
-                setIsReset(false);
+                const con =
+                  objSearch.sgg && objSearch.sgg !== "0"
+                    ? objSearch.sgg
+                    : objSearch.city;
+                if (con) {
+                  if (seartchTxt && seartchTxt?.length > 0) {
+                    rainMapSearch(
+                      page,
+                      rainMapSize,
+                      String(con),
+                      seartchTxt ?? ""
+                    );
+                  } else {
+                    rainMapSearch(page, rainMapSize, String(con));
+                  }
+                  setIsReset(false);
+                }
              }}
              resetPageNo={isReset}
            >
@@ -1,22 +1,57 @@
 import { useWrStore } from "@/app/store";
 import { rainMapSize } from "@/app/store/map/rainMap";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
-import { tableData } from "@/components/lib/func/commom";
-import { Title, UiTable } from "@common/business_components/ui";
+import { getCity, tableData } from "@/components/lib/func/commom";
+import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import { ContentsDiv, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, SelectBox, Title, UiTable, type SelectDataType } from "@common/business_components/ui";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
-import { useEffect, useState } from "react";
+import { Button } from "@common/components/ui";
+import { useCallback, useEffect, useState } from "react";

 export function RswtFacility({
  rtnFeature,
 }: {
  rtnFeature: (feature: any) => void;
 }) {
-  const { code, rswtMap, rswtMapInit } = useWrStore((state) => state);
+  const { code, rswtMap, rswtMapInit,rswtMapSearch } = useWrStore((state) => state);
  const { rswtMapRes, rswtMapCount, rswtSttHeadList, rswtSttNodeList } =
-  rswtMap;
+    rswtMap;
  const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
  const [isReset, setIsReset] = useState(false);

+
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+    const [objSearch, setObjSearch] = useState<objSearchType>({
+      sgg: "",
+      city: "",
+    });
+  
+    const [seartchTxt, setSearchTxt] = useState<string>();
+  
+    const getSelCity = useCallback(
+      (val: string | number) => {
+        const cityValue = String(val);
+        const data = getCity(cityValue, code.sggCd);
+        setSelectSgg(data);
+        setObjSearch({ city: cityValue, sgg: "0" });
+      },
+      [code.sggCd]
+    );
+  
+    const getSgg = useCallback((val: string | number) => {
+      setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
+    }, []);
+  
+    useEffect(() => {
+      // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행
+      if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) {
+        const firstCityVal = code.cityCd[0]?.val;
+        if (firstCityVal) {
+          // 첫 번째 시/도 값으로 상태를 초기화합니다.
+          getSelCity(firstCityVal);
+        }
+      }
+    }, [code.cityCd, objSearch.city, getSelCity]);
  const rswtCellClick = (index: number | undefined, headId: string) => {
    if (
      headId !== "chBuildingYn" &&
@@ -67,33 +102,93 @@ export function RswtFacility({
  }, [code, rswtMapRes]);
  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> */}
+      <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4 ">
+          <div className="col-span-4">
+            <Title title="중수도이용시설 현황" />
+            <SearchDiv>
+              <SearchFormLeft>
+                <div className="col-span-10 flex flex-row">
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl"
+                    label="시도"
+                    selectClass={""}
+                    selectArray={code.cityCd || []}
+                    onSelectValue={(val) => {
+                      getSelCity(val);
+                    }}
+                    value={objSearch.city}
+                  />
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl ml-4"
+                    label="시군구"
+                    selectClass={""}
+                    selectArray={selectSgg || []}
+                    onSelectValue={getSgg}
+                    value={objSearch.sgg}
+                  />
+                  <SearchInput
+                    className={"!text-3xl ml-4"}
+                    label="회사명"
+                    textValue={seartchTxt ?? ""}
+                    setText={(e) => {
+                      setSearchTxt(e);
+                    }}
+                  />
+                </div>
+              </SearchFormLeft>
+              <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
+                <div className="flex flex-row space-x-2">
+                  <Button
+                    className="mt-2"
+                    size={"sm"}
+                    onClick={() => {
+                      setIsReset(true);
+                    }}
+                  >
+                    조회
+                  </Button>
+                </div>
+              </SearchFormRight>
+            </SearchDiv>
+          </div>
        </div>
-        <UiTable
-          headName={[]}
-          tableData={rswtrTable || []}
-          headlist={rswtSttHeadList}
-          pageSize={20}
-          total={rswtMapCount}
-          cellClick={(index: number | undefined, headId: string) => {
-            rswtCellClick(index, headId);
-          }}
-          onPageChange={(page) => {
-            rswtMapInit(page, rainMapSize, "0");
-            setIsReset(false);
-          }}
-          resetPageNo={isReset}
-        >
-          <HeadMakeColSpan upHeadList={rswtSttNodeList} />
-        </UiTable>
-      </div>
+        <div className="grid grid-cols-2 gap-4 ">
+          <div className="col-span-2">
+            <UiTable
+              headName={[]}
+              tableData={rswtrTable || []}
+              headlist={rswtSttHeadList}
+              pageSize={20}
+              total={rswtMapCount}
+              cellClick={(index: number | undefined, headId: string) => {
+                rswtCellClick(index, headId);
+              }}
+              onPageChange={(page) => {
+                const con =
+                objSearch.sgg && objSearch.sgg !== "0"
+                  ? objSearch.sgg
+                  : objSearch.city;
+              if (con) {
+                if (seartchTxt && seartchTxt?.length > 0) {
+                  rswtMapSearch(
+                    page,
+                    rainMapSize,
+                    String(con),
+                    seartchTxt ?? ""
+                  );
+                } else {
+                  rswtMapSearch(page, rainMapSize, String(con));
+                }
+                setIsReset(false);
+              }}}
+              resetPageNo={isReset}
+            >
+              <HeadMakeColSpan upHeadList={rswtSttNodeList} />
+            </UiTable>
+          </div>
+        </div>
+      </ContentsDiv>
    </>
  );
 }