diff --git a/apps/wr/app/stats/rainStat/page.tsx b/apps/wr/app/stats/rainStat/page.tsx index 26fc6340a..b2f2006bf 100644 --- a/apps/wr/app/stats/rainStat/page.tsx +++ b/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(new Date().getFullYear()) ); + const [exData, setExData] = useState>>(); + const [bdstTable, setBdstTable] = useState(); 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 ( <> @@ -49,13 +100,13 @@ export default function RainStat() { />
- - -
@@ -70,12 +121,12 @@ export default function RainStat() { {/* */} {}} + cellClick={(val, headId) => { }} onPageChange={setPageNation} > {/* */} diff --git a/apps/wr/app/store/stats/rainStat/index.tsx b/apps/wr/app/store/stats/rainStat/index.tsx index 4b2934ecf..edb5ab0d5 100644 --- a/apps/wr/app/store/stats/rainStat/index.tsx +++ b/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 } })); }