diff --git a/apps/wr/app/stats/rswtStat/page.tsx b/apps/wr/app/stats/rswtStat/page.tsx index de96b29ea..74a8a3c82 100644 --- a/apps/wr/app/stats/rswtStat/page.tsx +++ b/apps/wr/app/stats/rswtStat/page.tsx @@ -1,6 +1,7 @@ "use client"; import { useWrStore } from "@/app/store"; -import { yearOptions } from "@/components/lib/func/commom"; +import type { ExcelType, RswtStatProps } from "@/app/store/stats/rswtStat"; +import { tableData, yearOptions } from "@/components/lib/func/commom"; import { ContentsDiv, SearchDiv, @@ -10,58 +11,81 @@ import { } from "@common/business_components/ui"; import ListDiv from "@common/business_components/ui/list_div"; import { Button } from "@common/components/ui"; -import { useState } from "react"; +import { useEffect, useState } from "react"; export default function RswtStat() { const { code, rswtStat, searchRswtStatList } = useWrStore((state) => state); + const { rswtStatList, excelList } = rswtStat; + const [rswtTable, setRswtTable] = useState(); const [pageNation, setPageNation] = useState(1); const [searchYear, setSearchYear] = useState( String(new Date().getFullYear()) ); + const [excelData, setExceData] = useState(); - return ( <> - -
-
+ useEffect(() => { + const transData = Array.isArray(rswtStatList) ? rswtStatList : [rswtStatList]; + const data = tableData(transData, { code }); + const tbData = Array.isArray(data) + ? data.map((item: RswtStatProps) => { + return { + ...item, + ctpvCd: item.cityText + }; + }) + : []; + setRswtTable(tbData); + }, [rswtStatList]) + + useEffect(() => { + const transExcel = Array.isArray(excelList) ? excelList : [excelList]; + const exData = tableData(transExcel, { code }); + const tbData = Array.isArray(excelData) + }, [excelList]) + + return (<> + +
+
<SearchDiv> <div className="grid grid-cols-12 gap-5 m-4"> <div className="col-span-2"> <SelectBox - className="w-full h-full text-2xl" - label="통계년도" - selectClass="" - selectArray={yearOptions} - value={searchYear} - onSelectValue={(val: string | number) => setSearchYear(String(val))} - /> - </div> - <div className="flex flex-row space-x-2 items-center"> - <Button - className="" - size="sm" - onClick={() => { - console.log('searchYear', searchYear ); - searchRswtStatList(searchYear) - }} - > - 조회 - </Button> - <Button - className="" - size="sm" - onClick={() => {}} - > - 다운로드 - </Button> - <Button - className="" - size="sm" - onClick={() => {}} - > - 전체통계다운로드 - </Button> - </div> + className="w-full h-full text-2xl" + label="통계년도" + selectClass="" + selectArray={yearOptions} + value={searchYear} + onSelectValue={(val: string | number) => setSearchYear(String(val))} + /> + </div> + <div className="flex flex-row space-x-2 items-center"> + <Button + className="" + size="sm" + onClick={() => { + console.log("searchYear", searchYear) + searchRswtStatList(searchYear) + }} + > + 조회 + </Button> + <Button + className="" + size="sm" + onClick={() => { }} + > + 다운로드 + </Button> + <Button + className="" + size="sm" + onClick={() => { }} + > + 전체통계다운로드 + </Button> + </div> </div> </SearchDiv> </div> @@ -70,18 +94,18 @@ export default function RswtStat() { <div className="col-span-6 h-full min-h-0"> <ListDiv className="min-h-0"> <UiTable - tableData={[]} + tableData={rswtTable || []} headlist={rswtStat.rswtStatHeadList} pageSize={20} total={10000} headName="건축물 목록" - cellClick={() => {}} + cellClick={() => { }} onPageChange={setPageNation} /> </ListDiv> </div> </div> </ContentsDiv> - </> + </> ); } diff --git a/apps/wr/app/store/stats/rswtStat/headList.tsx b/apps/wr/app/store/stats/rswtStat/headList.tsx index 2ed9f6bad..877089092 100644 --- a/apps/wr/app/store/stats/rswtStat/headList.tsx +++ b/apps/wr/app/store/stats/rswtStat/headList.tsx @@ -14,7 +14,7 @@ export const rswtStatHeadListExport :TableUpperProps[]=[ rowSpan:2 }, { - id: "시설현황", + id: "a", title: "시설현황", row:0, colSpan:2 @@ -36,7 +36,7 @@ export const rswtStatHeadListExport :TableUpperProps[]=[ rowSpan:2 }, { - id: "청소화장실용수", + id: "rswtAltSum", title: "중수도+대체수이용량(m³/년)", row:0, rowSpan:2 @@ -55,7 +55,7 @@ export const rswtStatHeadListExport :TableUpperProps[]=[ }, { - id: "용도", + id: "b", title: "용도", row:0, colSpan:6 diff --git a/apps/wr/app/store/stats/rswtStat/index.tsx b/apps/wr/app/store/stats/rswtStat/index.tsx index b4d58a448..f1b09354e 100644 --- a/apps/wr/app/store/stats/rswtStat/index.tsx +++ b/apps/wr/app/store/stats/rswtStat/index.tsx @@ -2,15 +2,47 @@ import { fetchType, getFetch } from "@/components/lib/api"; import type { TableUpperProps } from "../../common/type/header"; import { rswtStatHeadListExport } from "./headList"; +export type RswtStatProps = { + ctpvCd: string //시도 + ctpvCnt: string //개소 + archArea: number //건축연면적 + filtrTrtmfctCpct: number //처리용량 + wtrUsqty: number //물사용량 + rswtAltSum: number //중수도+대체수이용량 + rswtrUsqty: number //중수도이용량 + altUswtrUtztnQnt: number //대체수이용량 + lndwtr: number //조경용수 + cleanToilUswtr: number //청소화장실용수 + resn: number //세척살수용수 + farmUswtr: number //농업용수 + indstUswtr: number //공업용수 + hydUswtr: number //친수용수 + ithlEtcUswtr: number //기타 + anlOperCst: number //연간운영비 + guideStats: GuideStatProps[] +} + +export type GuideStatProps = { + utztnUsgCd: string + ruseFcltUtztnQnt: number +} + type rswtStatActions = { searchRswtStatList: (year: string) => void; } +export type ExcelType = { + [key: string]: string | number | undefined; +}; + +const excelDownList: ExcelType[] = []; + export type rswtStatState = { rswtStat: { - rswtStatHeadList:TableUpperProps[] - rswtStatList: never[]; // Replace with actual type when available + rswtStatHeadList: TableUpperProps[] + rswtStatList: RswtStatProps[]; + excelList: ExcelType[] } } @@ -18,7 +50,9 @@ export type rswtStatType = rswtStatState & rswtStatActions; export const rswtStatExport: rswtStatState = { rswtStat: { - rswtStatHeadList:rswtStatHeadListExport + rswtStatHeadList: rswtStatHeadListExport, + rswtStatList: [], + excelList: [] } } @@ -26,15 +60,82 @@ export const rswtStatActionsExport: (set: any) => rswtStatActions = ( set: any ) => { return { - searchRswtStatList: async (year: string) => { - const res = await getFetch(fetchType.WR,`/reuseChk/reuseWater/stat/${year}`) - console.log('res', res); - const rswtStatList: never[] = []; + searchRswtStatList: async (year: string) => { + const res = await getFetch(fetchType.WR, `/reuseChk/reuseWater/stat/${year}`) + + const rswtStatList: RswtStatProps[] = []; + + let cityArr: any[] = []; + res.forEach((item: RswtStatProps) => { + let obj = cityArr.find((e) => { + return e.ctpvCd == item.ctpvCd + }) + + if (obj) { + obj.ctpvCnt += 1 + obj.archArea += item.archArea + obj.filtrTrtmfctCpct += item.filtrTrtmfctCpct + obj.wtrUsqty += item.wtrUsqty + obj.rswtAltSum += (item.rswtrUsqty + item.altUswtrUtztnQnt) + obj.rswtrUsqty += item.rswtrUsqty + obj.altUswtrUtztnQnt += item.altUswtrUtztnQnt + obj.anlOperCst += item.anlOperCst + } else { + obj = {}; + obj.ctpvCd = item.ctpvCd + obj.ctpvCnt = 1 + obj.archArea = item.archArea + obj.filtrTrtmfctCpct = item.filtrTrtmfctCpct + obj.wtrUsqty = item.wtrUsqty + obj.rswtAltSum = item.rswtrUsqty + item.altUswtrUtztnQnt + obj.rswtrUsqty = item.rswtrUsqty + obj.altUswtrUtztnQnt = item.altUswtrUtztnQnt + obj.anlOperCst = item.anlOperCst + + cityArr.push(obj) + } + + if (item.guideStats && item.guideStats.length > 0) { + item.guideStats.forEach((guide: GuideStatProps) => { + rswtStatHeadListExport.forEach((headItem: TableUpperProps) => { + + 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; + } + } + }); + }) + } + }); + + cityArr.forEach(item => { + excelDownList.push({ + ctpvCd: item.ctpvCd, + ctpvCnt: item.ctpvCnt, + archArea: item.archArea, + filtrTrtmfctCpct: item.filtrTrtmfctCpct, + wtrUsqty: item.wtrUsqty, + rswtAltSum: item.rswtAltSum, + rswtrUsqty: item.rswtrUsqty, + altUswtrUtztnQnt: item.altUswtrUtztnQnt, + lndwtr: item.lndwtr, + cleanToilUswtr: item.cleanToilUswtr, + farmUswtr: item.farmUswtr, + indstUswtr: item.indstUswtr, + hydUswtr: item.hydUswtr, + ithlEtcUswtr: item.ithlEtcUswtr, + anlOperCst: item.anlOperCst, + }) + }) + set((state: rswtStatState) => ({ rswtStat: { ...state.rswtStat, - rswtStatList, - // rswtStatHeadList + rswtStatList: cityArr, + excelList: excelDownList } })); }