Merge commit '04d44cbc70949fd1cd62e30c993b26bc455493df' into iipbs/wr/stats

apps/wr/app/stats/rainStat/page.tsx

@@ -2,7 +2,8 @@
 
 import { useWrStore } from "@/app/store";
 import type { RainStatProps } from "@/app/store/stats/rainStat";
-import { yearOptions } from "@/components/lib/func/commom";
+import { tableData, yearOptions } from "@/components/lib/func/commom";
+import { downloadExcel } from "@common/business_components";
 import {
   ContentsDiv,
   SearchDiv,
@@ -12,22 +13,72 @@ import {
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components/ui";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function RainStat() {
-  const { rainStat, searchRainStatList } = useWrStore((state) => state);
-  const { rainStatHeadList, rainStatList } = rainStat;
+  const { code, rainStat, searchRainStatList } = useWrStore((state) => state);
+  const { rainStatHeadList, rainStatList, excelList } = rainStat;
 
-  const [ pageNation, setPageNation] = useState(1);
+  const [pageNation, setPageNation] = useState(1);
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
   );
+  const [exData, setExData] = useState<Array<Record<string, string | number>>>();
+  const [bdstTable, setBdstTable] = useState<RainStatProps[]>();
 
   useEffect(() => {
     searchRainStatList(searchYear);
-    console.log("rainStatList", rainStatList)
   }, [searchRainStatList, searchYear])
 
+  const excelClick = () => {
+    downloadExcel({
+      data: (exData as unknown as JSON[]) ?? [],
+      fileName: "재이용통계",
+      sheetNameArray: ["Sheet1"],
+      headerRange: "A1:M1"
+    })
+  }
+
+
+  useEffect(() => {
+    const transExcel = Array.isArray(excelList) ? excelList : [excelList];
+    const excelData = tableData(transExcel, { code });
+    const tbData = Array.isArray(excelData)
+      ? excelData.map((item: RainStatProps) => {
+        return {
+          "시도": item.cityText,
+          "개소": item.tmp,
+          "설치비(백만원)": item.instlCst,
+          "저류조용량(m³/년)": item.dtfcltCpct,
+          "연간사용량(m³/년)": item.wtrUsqty,
+          "조경용수": item.lndwtr,
+          "청소화장실용수": item.cleanToilUswtr,
+          "세척살수용수": item.resn,
+          "농업용수": item.farmUswtr,
+          "공업용수": item.indstUswtr,
+          "친수용수": item.hydUswtr,
+          "기타": item.ithlEtcUswtr,
+          "연간운영비(백만원/년)": item.anlOperCst,
+        };
+      })
+      : [];
+    setExData(tbData);
+  }, [excelList])
+
+  useEffect(() => {
+    const transData = Array.isArray(rainStatList) ? rainStatList : [rainStatList];
+    const data = tableData(transData, { code });
+    const tbData = Array.isArray(data)
+      ? data.map((item: RainStatProps) => {
+        return {
+          ...item,
+          ctpvCd: item.cityText
+        };
+      })
+      : [];
+    setBdstTable(tbData);
+  }, [rainStatList]);
+
   return (
     <>
       <ContentsDiv>
@@ -49,13 +100,13 @@ export default function RainStat() {
                   />
                 </div>
                 <div className="flex flex-row space-x-2 items-center">
-                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                  <Button className="" size={"sm"} onClick={(e) => { }}>
                     조회
                   </Button>
-                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                  <Button className="" size={"sm"} onClick={() => excelClick()}>
                     다운로드
                   </Button>
-                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                  <Button className="" size={"sm"} onClick={(e) => { }}>
                     전체통계다운로드
                   </Button>
                 </div>
@@ -70,12 +121,12 @@ export default function RainStat() {
             <ListDiv className="min-h-0">
               {/* <ScrollArea className="h-[60vh]"> */}
               <UiTable
-                tableData={rainStatList || []}
+                tableData={bdstTable || []}
                 headlist={rainStat.rainStatHeadList}
                 pageSize={20}
                 total={10000}
                 headName={""}
-                cellClick={(val, headId) => {}}
+                cellClick={(val, headId) => { }}
                 onPageChange={setPageNation}
               ></UiTable>
               {/* </ScrollArea> */}

apps/wr/app/store/stats/rainStat/index.tsx

@@ -38,6 +38,12 @@ export type GuideStatProps = {
     ruseFcltUtztnQnt: number
 }
 
+type ExcelType = {
+    [key: string]: string | number | undefined;
+};
+
+const excelDownList: ExcelType[] = [];
+
 const fetchRainStatList = async (year: string) => {
     const res = await getFetch(fetchType.WR, `/reuseChk/rainy/stat/${year}`)
     return res;
@@ -50,7 +56,8 @@ type rainStatActions = {
 export type rainStatState = {
     rainStat: {
         rainStatHeadList: TableUpperProps[],
-        rainStatList: RainStatProps[]
+        rainStatList: RainStatProps[],
+        excelList: ExcelType[]
     }
 }
 
@@ -59,7 +66,8 @@ export type rainStatType = rainStatState & rainStatActions;
 export const rainStatExport: rainStatState = {
     rainStat: {
         rainStatHeadList: rainStatHeadListExport,
-        rainStatList: []
+        rainStatList: [],
+        excelList: []
     }
 }
 export const rainStatActionsExport = (
@@ -101,20 +109,38 @@ export const rainStatActionsExport = (
                             if (headItem.title == guide.utztnUsgCd) {
                                 if (!obj[headItem.id] || typeof obj[headItem.id] !== "number") obj[headItem.id] = 0;
                                 if (typeof obj[headItem.id] === "number") {
-                                    
+
                                     obj[headItem.id] += guide.ruseFcltUtztnQnt;
-                                    console.log("obj", obj)
                                 }
                             }
                         });
                     })
                 }
-
             })
+
+            cityArr.forEach(item => {
+                excelDownList.push({
+                    ctpvCd: item.ctpvCd,
+                    tmp: item.tmp,
+                    instlCst: item.instlCst,    //설치비
+                    dtfcltCpct: item.dtfcltCpct,    //저류조용량
+                    bdstUsgCd: item.bdstUsgCd,    //연간사용량
+                    lndwtr: item.lndwtr,    //조경용수
+                    cleanToilUswtr: item.cleanToilUswtr,    //청소화장실용수
+                    resn: item.resn,    //세척살수용수
+                    farmUswtr: item.farmUswtr,    //농업용수
+                    indstUswtr: item.indstUswtr,    //공업용수
+                    hydUswtr: item.hydUswtr,    //친수용수
+                    ithlEtcUswtr: item.ithlEtcUswtr,    //기타
+                    anlOperCst: item.anlOperCst,    //연간운영비
+                })
+            })
+
             set((state: rainStatState) => ({
                 rainStat: {
                     ...state.rainStat,
                     rainStatList: cityArr,
+                    excelList: excelDownList
                 }
             }));
         }