From a3e46f3230b5e50748c38bf270fec3457e3b064a Mon Sep 17 00:00:00 2001 From: jyha00 Date: Tue, 10 Jun 2025 19:53:04 +0900 Subject: [PATCH] =?UTF-8?q?=EC=8B=A4=EC=A0=81=20=EC=B0=A8=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=8F=20=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/matMng/matDmd/coMatRvw/page.tsx | 41 +- .../prfmncSttn/pbnstPrfmncSttn/page.tsx | 553 +++++++++++++++++- .../prfmncSttn/pbnstPrfmncSttn/index.tsx | 40 +- 3 files changed, 596 insertions(+), 38 deletions(-) diff --git a/apps/wr/app/matMng/matDmd/coMatRvw/page.tsx b/apps/wr/app/matMng/matDmd/coMatRvw/page.tsx index 9ab1414c0..01f3cef8a 100644 --- a/apps/wr/app/matMng/matDmd/coMatRvw/page.tsx +++ b/apps/wr/app/matMng/matDmd/coMatRvw/page.tsx @@ -4,7 +4,7 @@ import { useWrStore } from "@/app/store"; import { formH1Class, formTableName } from "@/components/lib/class/comClass"; import { getCity } from "@/components/lib/func/commom"; import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; -import { ContentsDiv, Form, FormField, FormUi, ScrollArea, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, SelectBox, Title, UiTable, type SelectDataType } from "@common/business_components/ui"; +import { ContentsDiv, Form, FormField, FormUi, ScrollArea, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, SelectBox, Title, UiModal, UiTable, type SelectDataType } from "@common/business_components/ui"; import ListDiv from "@common/business_components/ui/list_div"; import { Button, DatePicker, Input, Label } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; @@ -20,6 +20,9 @@ export default function CoMatRvw() { const [toDate, setToDate] = useState(new Date()); const [selectSgg, setSelectSgg] = useState() const [objSearch, setObjSearch] = useState({ sgg: "", city: "" }); + const [isPrcsMo, setIsPrcsMo] = useState<{ + isModal: boolean; + }>({ isModal: false }); const schema = z.object({ @@ -566,7 +569,7 @@ export default function CoMatRvw() { />
- +
+ + { }} + onPageChange={() => { }} + /> + + } + bodyClass="w-[25vw] max-w-none h-[60vh]" + open={isPrcsMo.isModal} + onOpenChange={(open) => { + setIsPrcsMo({ isModal: open }); + }} + /> diff --git a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx index 6a49580ad..f2040f023 100644 --- a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx +++ b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx @@ -2,54 +2,528 @@ import { useWrStore } from "@/app/store"; import { btnClass } from "@/app/store/common/code"; -import type { FcPrfType, PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type"; -import type { prfmncType } from "@/app/store/prfmncSttn/pbnstPrfmncSttn/headList"; +import { initValInUsage, initValOutUsage, subTotalObj, totalObj, type FcPrfType, type PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type"; import { yearOptions } from "@/components/lib/func/commom"; -import { ContentsDiv, Title, SearchBaseForm, SelectBox, SearchInput, UiTable, type ReturnType, MainChart, type ChartConfig } from "@common/business_components"; +import { InputTableBody } from "@/components/lib/func/TableData"; +import { ContentsDiv, Title, SearchBaseForm, SelectBox, SearchInput, UiTable, type ReturnType, MainChart, type ChartConfig, CHART_FORM, ScrollArea } from "@common/business_components"; import DoughnutChart from "@common/business_components/ui/chart/DoughnutChart"; import ListDiv from "@common/business_components/ui/list_div"; -import { Button, Label } from "@common/components/ui"; +import { Button, Label, Table, TableBody, TableHeader } from "@common/components/ui"; import { useEffect, useRef, useState } from "react"; +import { headMakeprfmnc } from "../../prfmncReg/chkgdnReg/TableHead"; export default function PbnstPrfmncSttn() { - const { code, tableHeadMaker, pbnstPrfmncSttn, pbnstPrfmncInit, pbnstPrfmncSearch } = useWrStore((state) => state); - const { pbnstPrfHeadList, pbnstPrfmncRes, prfmncRes, rawData } = pbnstPrfmncSttn; + const { code, tableHeadMaker, pbnstPrfmncSttn, pbnstPrfmncInit, pbnstPrfmncSearch, prfmnc } = useWrStore((state) => state); + const { monthHeadList } = prfmnc + const { pbnstPrfHeadList, pbnstPrfmncRes, prfmncRes, rawData, selectYearList } = pbnstPrfmncSttn; const [isChHead, setIsChHead] = useState(false); const [fromDate, setFromDate] = useState(String(new Date().getFullYear())); const [toDate, setToDate] = useState(String(new Date().getFullYear())); const [year, setYear] = useState(String(new Date().getFullYear())); - const [pbnstTable, setPbnstTable] = useState(); const [bdstTable, setbdstTable] = useState(); const ref = useRef({} as ReturnType); const [swtrmtFcltNm, setSwtrmtFcltNm] = useState(); - const [chartConfig, setChartConfig] = useState(); - + const [chartConfig, setChartConfig] = useState({}); + const [chartData, setChartData] = useState([]); + const [dnInUsage, setDnInUsage] = useState([]); + const [dnInChartConfig, setDnInChartConfig] = useState({}); + const [dnOutUsage, setDnOutUsage] = useState([]); + const [dnOutChartConfig, setDnOutChartConfig] = useState({}); + const [barData, setBarData] = useState([]); + const [barChartConfig, setBarChartConfig] = useState({}); + const [prfData, setPrfData] = useState(); + const [lnInChartConfig, setLnInChartConfig] = useState({}); + const [lnOutChartConfig, setLnOutChartConfig] = useState({}); + const [inLineData, setInLineData] = useState<{ + chartData1: lineChartDataProps[]; + chartData2: lineChartDataProps[]; + chartData3: lineChartDataProps[]; + chartData4: lineChartDataProps[]; + chartData5: lineChartDataProps[]; + chartData6: lineChartDataProps[]; + chartData7: lineChartDataProps[]; + chartData8: lineChartDataProps[]; + chartData9: lineChartDataProps[]; + }>(); + // const [lnInChartConfig, setLnInChartConfig] = useState({}); + const [outLineData, setOutLineData] = useState<{ + chartData1: lineChartDataProps[]; + chartData2: lineChartDataProps[]; + chartData3: lineChartDataProps[]; + chartData4: lineChartDataProps[]; + chartData5: lineChartDataProps[]; + chartData6: lineChartDataProps[]; + }>(); + + + + type dnChartForm = { label: string, val: number, fill?: string }; + type barChartForm = { label: string, inUsage: number, outUsage: number }; + type lineChartDataProps = { label: string, val: number, color: string }; + + const prfTableData = (prfList: PrfType[], year:string) => { + const inUsageData = initValInUsage; + const outUsageData = initValOutUsage; + + const inSubtotal = subTotalObj; + const outSubtotal = subTotalObj; + + + const prfFilter = prfList?.filter((e) => e.ym.slice(0, 4) === year) + if (prfList && prfFilter.length > 0) { + prfList?.forEach((prfItem) => { + const month = Number(prfItem?.ym?.slice(4)); // "MM" + const monthKey = `${month}월`; + + inUsageData.forEach((inData: any) => { + const usageKey = inData.usage; + const value = (prfItem as any)[usageKey] ?? 0; + + inData[monthKey] = value; + inData.total += value; + + if (inSubtotal && usageKey !== "subtotal") { + (inSubtotal as any)[monthKey] = + ((inSubtotal as any)[monthKey] ?? 0) + value; + inSubtotal.total += value; + } + }); + + outUsageData.forEach((outData: any) => { + const usageKey = outData.usage; + const value = (prfItem as any)[usageKey] ?? 0; + + outData[monthKey] = value; + outData.total += value; + + if (usageKey !== "subtotal") { + (outSubtotal as any)[monthKey] = + ((outSubtotal as any)[monthKey] ?? 0) + value; + outSubtotal.total += value; + } + }); + }); + inUsageData.push(inSubtotal); + outUsageData.push(outSubtotal); + const usageTotalObj: { [key: string]: any } = totalObj; + for (const key in usageTotalObj) { + if (["usage", "gubun", "edit"].includes(key)) continue; + const val = + (Number((inSubtotal as any)[key]) || 0) + + (Number((outSubtotal as any)[key]) || 0); + + (usageTotalObj as any)[key] = val; + } + const tableData = [...inUsageData, ...outUsageData, usageTotalObj]; + setPrfData(tableData); + + } else { + setPrfData([]); + } + } useEffect(() => { - console.log("ㅇㅇ", rawData) + let wshwtr = 0; + let coolUswtr = 0; + let cleanUswtr = 0; + let drwtUswtr = 0; + let dltnUswtr = 0; + let ithlRswtr = 0; + let ithlEtcUswtr = 0; + let cleanToilUswtr = 0; + let resn = 0; + let lndwtr = 0; + let hydUswtr = 0; + let ugwtChr = 0; + let farmUswtr = 0; + let rvrKeepUswtr = 0; + let indstUswtr = 0; if (rawData) { rawData.forEach((item) => { - item.prfList.forEach((element) => { + prfTableData(item.prfList, year); + item.prfList.filter((e) => e.ym.slice(0, 4) === year) .forEach((element) => { + + wshwtr += element.wshwtr; //세척수 + coolUswtr += element.coolUswtr; //냉각수 + cleanUswtr += element.cleanUswtr; //청소수 + drwtUswtr += element.drwtUswtr; //식수대 + dltnUswtr += element.dltnUswtr //희석용수 + ithlRswtr += element.ithlRswtr //중수도 + ithlEtcUswtr += element.ithlEtcUswtr //기타 + cleanToilUswtr += element.cleanToilUswtr //청소화장실용수 + resn += element.resn //세척살수용수 + + lndwtr += element.lndwtr; //조경용수 + hydUswtr += element.hydUswtr; //친수용수 + ugwtChr += element.ugwtChr; //지하수충전 + farmUswtr += element.farmUswtr //농업용수 + rvrKeepUswtr += element.rvrKeepUswtr //하천등유지용수 + indstUswtr += element.indstUswtr //공업용수 }); }) + const data: dnChartForm[] = [] + data?.push({ label: "세척수", val: wshwtr, fill: "red" }) + data?.push({ label: "냉각수", val: coolUswtr, fill: "orange" }) + data?.push({ label: "청소수", val: cleanUswtr, fill: "yellow" }) + data?.push({ label: "식수대", val: drwtUswtr, fill: "green" }) + data?.push({ label: "희석용수", val: dltnUswtr, fill: "skyblue" }) + data?.push({ label: "중수도", val: ithlRswtr, fill: "blue" }) + data?.push({ label: "기타", val: ithlEtcUswtr, fill: "purple" }) + data?.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "red" }) + data?.push({ label: "세척살수용수", val: resn, fill: "orange" }) + data?.push({ label: "조경용수", val: lndwtr, fill: "yellow" }) + data?.push({ label: "친수용수", val: hydUswtr, fill: "green" }) + data?.push({ label: "지하수충전", val: ugwtChr, fill: "skyblue" }) + data?.push({ label: "농업용수", val: farmUswtr, fill: "blue" }) + data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "purple" }) + data?.push({ label: "공업용수", val: indstUswtr, fill: "black" }) + setChartData(data); } - }, [rawData]) + }, [rawData, year]) + + + useEffect(() => { + const newChartConfig = chartData.reduce((config, element) => { + config[element.label] = { + label: element.label, + fill: element.fill + }; + return config; + }, {} as Record) satisfies ChartConfig; + setChartConfig(newChartConfig); + }, [chartData]); + + // 장내용수 도넛차트 + useEffect(() => { + let wshwtr = 0; + let coolUswtr = 0; + let cleanUswtr = 0; + let drwtUswtr = 0; + let dltnUswtr = 0; + let ithlRswtr = 0; + let ithlEtcUswtr = 0; + let cleanToilUswtr = 0; + let resn = 0; + if (rawData) { + rawData.forEach((item) => { + item.prfList.filter((e) => e.ym.slice(0, 4) === year) .forEach((element) => { + wshwtr += element.wshwtr; //세척수 + coolUswtr += element.coolUswtr; //냉각수 + cleanUswtr += element.cleanUswtr; //청소수 + drwtUswtr += element.drwtUswtr; //식수대 + dltnUswtr += element.dltnUswtr //희석용수 + ithlRswtr += element.ithlRswtr //중수도 + ithlEtcUswtr += element.ithlEtcUswtr //기타 + cleanToilUswtr += element.cleanToilUswtr //청소화장실용수 + resn += element.resn //세척살수용수 + }); + }) + const data: dnChartForm[] = [] + data?.push({ label: "세척수", val: wshwtr, fill: "yellow" }) + data?.push({ label: "냉각수", val: coolUswtr, fill: "green" }) + data?.push({ label: "청소수", val: cleanUswtr, fill: "yellow" }) + data?.push({ label: "식수대", val: drwtUswtr, fill: "green" }) + data?.push({ label: "희석용수", val: dltnUswtr, fill: "yellow" }) + data?.push({ label: "중수도", val: ithlRswtr, fill: "green" }) + data?.push({ label: "기타", val: ithlEtcUswtr, fill: "yellow" }) + data?.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "green" }) + data?.push({ label: "세척살수용수", val: resn, fill: "yellow" }) + setDnInUsage(data); + } + }, [rawData, year]) + + useEffect(() => { + const newChartConfig = dnInUsage.reduce((config, element) => { + config[element.label] = { + label: element.label, + fill: element.fill + }; + return config; + }, {} as Record) satisfies ChartConfig; + setDnInChartConfig(newChartConfig); + }, [dnInUsage]); + + // 장외용수 도넛차트 + useEffect(() => { + let lndwtr = 0; + let hydUswtr = 0; + let ugwtChr = 0; + let farmUswtr = 0; + let rvrKeepUswtr = 0; + let indstUswtr = 0; + if (rawData) { + rawData.forEach((item) => { + item.prfList.filter((e) => e.ym.slice(0, 4) === year) .forEach((element) => { + lndwtr += element.lndwtr; //조경용수 + hydUswtr += element.hydUswtr; //친수용수 + ugwtChr += element.ugwtChr; //지하수충전 + farmUswtr += element.farmUswtr //농업용수 + rvrKeepUswtr += element.rvrKeepUswtr //하천등유지용수 + indstUswtr += element.indstUswtr //공업용수 + + }); + }) + const data: dnChartForm[] = [] + data?.push({ label: "조경용수", val: lndwtr, fill: "white" }) + data?.push({ label: "친수용수", val: hydUswtr, fill: "red" }) + data?.push({ label: "지하수충전", val: ugwtChr, fill: "white" }) + data?.push({ label: "농업용수", val: farmUswtr, fill: "orange" }) + data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "white" }) + data?.push({ label: "공업용수", val: indstUswtr, fill: "yellow" }) + setDnOutUsage(data); + } + }, [rawData, year]) + + useEffect(() => { + const newChartConfig = dnOutUsage.reduce((config, element) => { + config[element.label] = { + label: element.label, + fill: element.fill + }; + return config; + }, {} as Record) satisfies ChartConfig; + setDnOutChartConfig(newChartConfig); + }, [dnOutUsage]); + + //월별 장내외 용수 총 실적 막대차트 + useEffect(() => { + let wshwtr = 0; + let coolUswtr = 0; + let cleanUswtr = 0; + let drwtUswtr = 0; + let dltnUswtr = 0; + let ithlRswtr = 0; + let ithlEtcUswtr = 0; + let cleanToilUswtr = 0; + let resn = 0; + let lndwtr = 0; + let hydUswtr = 0; + let ugwtChr = 0; + let farmUswtr = 0; + let rvrKeepUswtr = 0; + let indstUswtr = 0; + let inUsageSum = 0; + let outUsageSum = 0; + let inUsageArr = []; + let outUsageArr = []; + + + if (rawData) { + const data: barChartForm[] = [] + rawData.forEach((item) => { + item.prfList + .filter((e) => e.ym.slice(0, 4) === year) .forEach((element) => { + + wshwtr = element.wshwtr; //세척수 + coolUswtr = element.coolUswtr; //냉각수 + cleanUswtr = element.cleanUswtr; //청소수 + drwtUswtr = element.drwtUswtr; //식수대 + dltnUswtr = element.dltnUswtr //희석용수 + ithlRswtr = element.ithlRswtr //중수도 + ithlEtcUswtr = element.ithlEtcUswtr //기타 + cleanToilUswtr = element.cleanToilUswtr //청소화장실용수 + resn = element.resn //세척살수용수 + + lndwtr = element.lndwtr; //조경용수 + hydUswtr = element.hydUswtr; //친수용수 + ugwtChr = element.ugwtChr; //지하수충전 + farmUswtr = element.farmUswtr //농업용수 + rvrKeepUswtr = element.rvrKeepUswtr //하천등유지용수 + indstUswtr = element.indstUswtr //공업용수 + + inUsageSum = wshwtr + coolUswtr + cleanUswtr + drwtUswtr + dltnUswtr + ithlRswtr + ithlEtcUswtr + cleanToilUswtr + resn; + inUsageArr.push(inUsageSum) + outUsageSum = lndwtr + hydUswtr + ugwtChr + farmUswtr + rvrKeepUswtr + indstUswtr; + outUsageArr.push(outUsageSum) + + const month = Number(element.ym.slice(4, 6)) + data.push({ label: `${month}월`, inUsage: inUsageSum, outUsage: outUsageSum }) + + }, + ); + + }) + + setBarData(data); + } + }, [rawData, year]) + + useEffect(() => { + const newChartConfig = barData.reduce((config, element) => { + config[element.label] = { + label: element.label, + }; + return config; + + }, {} as Record) satisfies ChartConfig; + setBarChartConfig(newChartConfig); + }, [barData]); + + //월별 장내 용수 실적 라인차트 + useEffect(() => { + + if (rawData) { + const wshwtrData: lineChartDataProps[] = [] + const coolUswtrData: lineChartDataProps[] = [] + const cleanUswtrData: lineChartDataProps[] = [] + const drwtUswtrData: lineChartDataProps[] = [] + const dltnUswtrData: lineChartDataProps[] = [] + const ithlRswtrData: lineChartDataProps[] = [] + const ithlEtcUswtrData: lineChartDataProps[] = [] + const cleanToilUswtrData: lineChartDataProps[] = [] + const resnData: lineChartDataProps[] = [] + rawData.forEach((item) => { + item.prfList.filter((e) => e.ym.slice(0, 4) === year) .forEach((element) => { + const month = Number(element.ym.slice(4, 6)) + wshwtrData.push({ label: `${month}월`, val: element.wshwtr, color: "red" }) + coolUswtrData.push({ label: `${month}월`, val: element.coolUswtr, color: "red" }) + cleanUswtrData.push({ label: `${month}월`, val: element.cleanUswtr, color: "red" }) + drwtUswtrData.push({ label: `${month}월`, val: element.drwtUswtr, color: "red" }) + dltnUswtrData.push({ label: `${month}월`, val: element.dltnUswtr, color: "red" }) + ithlRswtrData.push({ label: `${month}월`, val: element.ithlRswtr, color: "red" }) + ithlEtcUswtrData.push({ label: `${month}월`, val: element.ithlEtcUswtr, color: "red" }) + cleanToilUswtrData.push({ label: `${month}월`, val: element.cleanToilUswtr, color: "red" }) + resnData.push({ label: `${month}월`, val: element.resn, color: "red" }) + + }, + ); + }) + const rtndata = { + chartData1: wshwtrData, + chartData2: coolUswtrData, + chartData3: cleanUswtrData, + chartData4: drwtUswtrData, + chartData5: dltnUswtrData, + chartData6: ithlRswtrData, + chartData7: ithlEtcUswtrData, + chartData8: cleanToilUswtrData, + chartData9: resnData + } + + setInLineData(rtndata) + } + }, [rawData, year]) + + useEffect(() => { + if (inLineData?.chartData1) { + const newChartConfig = { + chartData1: { + label: '세척수', + color: "red", + }, + chartData2: { + label: '냉각수', + color: "orange", + }, + chartData3: { + label: '청소수', + color: "yellow", + }, + chartData4: { + label: '식수대', + color: "pink", + }, + chartData5: { + label: '희석용수', + color: "purple", + }, + chartData6: { + label: '중수도', + color: "green", + }, + chartData7: { + label: '기타', + color: "blue", + }, + chartData8: { + label: '청소화장실용수', + color: "black", + }, + chartData9: { + label: '세척살수용수', + color: "skyblue", + }, + } satisfies ChartConfig; + setLnInChartConfig(newChartConfig); + } + }, [inLineData]); + + //월별 장외 용수 실적 라인차트 + useEffect(() => { + if (rawData) { + const lndwtrData: lineChartDataProps[] = [] + const hydUswtrData: lineChartDataProps[] = [] + const ugwtChrData: lineChartDataProps[] = [] + const farmUswtrData: lineChartDataProps[] = [] + const rvrKeepUswtrData: lineChartDataProps[] = [] + const indstUswtrData: lineChartDataProps[] = [] + rawData.forEach((item) => { + item.prfList.filter((e) => e.ym.slice(0, 4) === year) .forEach((element) => { + const month = Number(element.ym.slice(4, 6)) + lndwtrData.push({ label: `${month}월`, val: element.lndwtr, color: "red" }) + hydUswtrData.push({ label: `${month}월`, val: element.hydUswtr, color: "red" }) + ugwtChrData.push({ label: `${month}월`, val: element.ugwtChr, color: "red" }) + farmUswtrData.push({ label: `${month}월`, val: element.farmUswtr, color: "red" }) + rvrKeepUswtrData.push({ label: `${month}월`, val: element.rvrKeepUswtr, color: "red" }) + indstUswtrData.push({ label: `${month}월`, val: element.indstUswtr, color: "red" }) + }, + ); + }) + setOutLineData({ + chartData1: lndwtrData, + chartData2: hydUswtrData, + chartData3: ugwtChrData, + chartData4: farmUswtrData, + chartData5: rvrKeepUswtrData, + chartData6: indstUswtrData, + }) + } + }, [rawData, year]) + + useEffect(() => { + if (outLineData?.chartData1) { + const newChartConfig = { + chartData1: { + label: '조경용수', + color: "red", + }, + chartData2: { + label: '친수용수', + color: "orange", + }, + chartData3: { + label: '지하수충전', + color: "yellow", + }, + chartData4: { + label: '농업용수', + color: "pink", + }, + chartData5: { + label: '하천등유지용수', + color: "purple", + }, + chartData6: { + label: '공업용수', + color: "green", + }, + } satisfies ChartConfig; + setLnOutChartConfig(newChartConfig); + } + }, [outLineData]); useEffect(() => { if (!pbnstPrfmncSttn.isInit) { pbnstPrfmncInit("1", "11"); } }, [pbnstPrfmncSttn.isInit, pbnstPrfmncInit]); + useEffect(() => { - console.log("prfmncRes", prfmncRes) setbdstTable(prfmncRes); }, [prfmncRes]); - - useEffect(() => { - }, [ref.current]); return ( <> @@ -118,6 +592,7 @@ export default function PbnstPrfmncSttn() { alert("최대 5년까지 선택 가능합니다."); } else { tableHeadMaker(fromNum, toNum); + } } } @@ -148,23 +623,57 @@ export default function PbnstPrfmncSttn() { className="h-full w-1/12 text-2xl" label="" selectClass={""} - selectArray={yearOptions} + selectArray={selectYearList} value={year} onSelectValue={(val: string | number) => setYear(String(val))} />

장내·외 용도별 하수재이용실적 현황(계)

- { }} chartData={[]} chartTitle={"장내·외 용수 총 실적"} chartForm={"daughnut"} /> -
-
\ - { }} chartData={[]} chartTitle={"장내용수 실적"} chartForm={"daughnut"} /> +
- { }} chartData={[]} chartTitle={"장외용수 실적"} chartForm={"daughnut"} /> + +
+
+

장내·외 월별 하수재이용실적 현황

+
+
+ +
+
+ +
+
+ +
+
+

하수재이용실적 현황

+ + +
+

+ {"하수처리수재이용 실적(m3) 등록결과"} +

+
+ + + + + + diff --git a/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx b/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx index 581b56fa0..e47301b48 100644 --- a/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx +++ b/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx @@ -1,8 +1,8 @@ -import { fetchType, getFetch } from "@/components/lib/api"; +import { fetchType, getFetch, postFectch } from "@/components/lib/api"; import type { TableUpperProps } from "../../common/type/header"; import { pbnstPrfmncSttnHeadListExport, pbnstYearHeadListExport } from "./headList"; import type { FcPrfType, PrfType } from "../../prfmncReg/pbnstPrfmncReg/type"; -import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type"; +import type { pubHasuType, selectLabel } from "../../ruseFcltMng/fcltReg/pbnstReg/type"; import type { ReturnType } from "@common/business_components"; type pbnstPrfmncSttnActions = { @@ -20,7 +20,8 @@ export type pbnstPrfmncSttnState = { pbnstPrfmncRes: PrfType[]; prfmncRes: any[]; isInit: boolean; - rawData:any[]; + rawData: any[]; + selectYearList: selectLabel[] } } @@ -32,7 +33,8 @@ export const pbnstPrfmncSttnExport: pbnstPrfmncSttnState = { pbnstPrfmncRes: pbnstPrfmncRes, prfmncRes: prfmncRes, isInit: false, - rawData:[] + rawData: [], + selectYearList: [] } } @@ -69,20 +71,29 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions return { tableHeadMaker: (startYear: number, endYear: number) => { let yearHeader: TableUpperProps[] = [...pbnstPrfmncSttnHeadListExport]; + const selectList = [] as unknown as selectLabel[] for (let i = startYear; i <= endYear; i++) { const yearHead = JSON.parse(JSON.stringify(pbnstYearHeadListExport)); if (yearHead) { - yearHead.forEach((item: { id?: number; }) => {if(item.id)item.id = i + item.id;}) + yearHead.forEach((item: { id?: number; }) => { + if (item.id) { + item.id = i + item.id; + + } + + }) if (yearHead[0]) yearHead[0].title = i + "년도" } yearHeader = [...yearHeader, ...yearHead] + selectList.push({text: i + "년도", val: String(i)} ) } set((state: pbnstPrfmncSttnState) => { return { ...state, pbnstPrfmncSttn: { - pbnstPrfHeadList: [...yearHeader] + pbnstPrfHeadList: [...yearHeader], + selectYearList: selectList }, }; }); @@ -152,27 +163,28 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions const yearVal = { year: year, pbnstRuseFcltPk: acc.pbnstRuseFcltFk } yearVal[year + 'inUsage'] = inUsageSum; yearVal[year + 'outUsage'] = outUsageSum; - yearVal[year + 'total'] = inUsageSum+outUsageSum; + yearVal[year + 'total'] = inUsageSum + outUsageSum; yearsData.push(yearVal); } }) }) - const resData:any[] = [] - pbnstRes.forEach((acc) => { let data = yearsData.find((item) => item.pbnstRuseFcltPk.substring(0, 11) === acc.bscFctCd) - if(data){ - resData.push({...data, ...acc}) + const resData: any[] = [] + pbnstRes.forEach((acc) => { + let data = yearsData.find((item) => item.pbnstRuseFcltPk.substring(0, 11) === acc.bscFctCd) + if (data) { + resData.push({ ...data, ...acc }) } }) - + return set((state: pbnstPrfmncSttnState) => ({ ...state, pbnstPrfmncSttn: { ...state.pbnstPrfmncSttn, - prfmncRes:resData, - rawData:res.data + prfmncRes: resData, + rawData: res.data }, })); }