재이용실적 현황 effect 수정

apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx

@@ -3,20 +3,25 @@
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import { initValInUsage, initValOutUsage, subTotalObj, totalObj, type FcPrfType, type PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
-import { yearOptions } from "@/components/lib/func/commom";
-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 { excelDownload, yearOptions } from "@/components/lib/func/commom";
+import SearchInputText from "@/components/ui/searchInput/searchInput";
+import { CHART_FORM, ContentsDiv, MainChart, ScrollArea, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ChartConfig, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
-import { Button, Label, Table, TableBody, TableHeader } from "@common/components/ui";
-import { useEffect, useRef, useState } from "react";
-import { headMakeprfmnc } from "../../prfmncReg/chkgdnReg/TableHead";
+import { Button, Label } from "@common/components/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
 
-
-
 export default function PbnstPrfmncSttn() {
-    const { code, tableHeadMaker, pbnstPrfmncSttn, pbnstPrfmncInit, pbnstPrfmncSearch, prfmnc } = useWrStore((state) => state);
+    const {
+        code,
+        tableHeadMaker,
+        pbnstPrfmncSttn,
+        pbnstPrfmncInit,
+        pbnstPrfmncSearch,
+        prfmnc,
+        pbnstSttn,
+        pbnNmSearch
+    } = useWrStore((state) => state);
     const { monthHeadList } = prfmnc
     const { pbnstPrfHeadList, pbnstPrfmncRes, prfmncRes, rawData, selectYearList } = pbnstPrfmncSttn;
     const [isChHead, setIsChHead] = useState(false);
@@ -26,6 +31,16 @@ export default function PbnstPrfmncSttn() {
     const [bdstTable, setbdstTable] = useState<FcPrfType[]>();
     const ref = useRef<ReturnType>({} as ReturnType);
     const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>();
+    const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
+    const excelClick = useCallback(() => {
+        excelDownload(
+          [[]],
+          "하수재이용실적 현황",
+          "sample_pbnstPrfmncReg.xlsx",
+          "A1:O1"
+        );
+      }, [prfmnc.excelList]);
+
     const [chartConfig, setChartConfig] = useState<ChartConfig>({});
     const [chartData, setChartData] = useState<dnChartForm[]>([]);
     const [dnInUsage, setDnInUsage] = useState<dnChartForm[]>([]);
@@ -48,7 +63,6 @@ export default function PbnstPrfmncSttn() {
         chartData8: lineChartDataProps[];
         chartData9: lineChartDataProps[];
     }>();
-    // const [lnInChartConfig, setLnInChartConfig] = useState<ChartConfig>({});
     const [outLineData, setOutLineData] = useState<{
         chartData1: lineChartDataProps[];
         chartData2: lineChartDataProps[];
@@ -64,15 +78,14 @@ export default function PbnstPrfmncSttn() {
     type barChartForm = { label: string, "장내용수": number, "장외용수": number };
     type lineChartDataProps = { label: string, val: number, color: string };
 
-    const prfTableData = (prfList: PrfType[], year:string) => {
+    const prfTableData = (prfList: PrfType[], year: string) => {
         const inUsageData = initValInUsage;
         const outUsageData = initValOutUsage;
 
         const inSubtotal = subTotalObj;
         const outSubtotal = subTotalObj;
 
-        console.log(' prfList ', prfList)
-        const prfFilter =  prfList?.filter((e) => e.ym.slice(0, 4) === year)
+        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"
@@ -119,71 +132,190 @@ export default function PbnstPrfmncSttn() {
             }
             const tableData = [...inUsageData, ...outUsageData, usageTotalObj];
             setPrfData(tableData);
-            
+
         } else {
             setPrfData([]);
         }
     }
+
     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 wshwtr = 0,
+            coolUswtr = 0,
+            cleanUswtr = 0,
+            drwtUswtr = 0,
+            dltnUswtr = 0,
+            ithlRswtr = 0,
+            ithlEtcUswtr = 0,
+            cleanToilUswtr = 0,
+            resn = 0;
+
+        let lndwtr = 0,
+            hydUswtr = 0,
+            ugwtChr = 0,
+            farmUswtr = 0,
+            rvrKeepUswtr = 0,
+            indstUswtr = 0;
+
+        let inUsageSum = 0,
+            outUsageSum = 0;
+
+        let inUsageArr: number[] = [],
+            outUsageArr: number[] = [];
+
+        // 라인차트용 데이터
+        const wshwtrData: lineChartDataProps[] = [],
+            coolUswtrData: lineChartDataProps[] = [],
+            cleanUswtrData: lineChartDataProps[] = [],
+            drwtUswtrData: lineChartDataProps[] = [],
+            dltnUswtrData: lineChartDataProps[] = [],
+            ithlRswtrData: lineChartDataProps[] = [],
+            ithlEtcUswtrData: lineChartDataProps[] = [],
+            cleanToilUswtrData: lineChartDataProps[] = [],
+            resnData: lineChartDataProps[] = [];
+        const lndwtrData: lineChartDataProps[] = [],
+            hydUswtrData: lineChartDataProps[] = [],
+            ugwtChrData: lineChartDataProps[] = [],
+            farmUswtrData: lineChartDataProps[] = [],
+            rvrKeepUswtrData: lineChartDataProps[] = [],
+            indstUswtrData: lineChartDataProps[] = [];
+
+        // 막대차트 데이터
+        const barData: barChartForm[] = [];
+
+        // 도넛차트 데이터
+        const dnData: dnChartForm[] = [];
+        const dnInData: dnChartForm[] = [];
+        const dnOutData: dnChartForm[] = [];
+
         if (rawData) {
             rawData.forEach((item) => {
+                // 실적 테이블 데이터
                 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 //공업용수
+                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 = element.wshwtr
+                        + element.coolUswtr
+                        + element.cleanUswtr
+                        + element.drwtUswtr
+                        + element.dltnUswtr
+                        + element.ithlRswtr
+                        + element.ithlEtcUswtr
+                        + element.cleanToilUswtr
+                        + element.resn;
+                    outUsageSum = element.lndwtr
+                        + element.hydUswtr
+                        + element.ugwtChr
+                        + element.farmUswtr
+                        + element.rvrKeepUswtr
+                        + element.indstUswtr;
+                    inUsageArr.push(inUsageSum);
+                    outUsageArr.push(outUsageSum);
+
+                    // 막대차트
+                    const month = Number(element.ym.slice(4, 6));
+                    barData.push({ label: `${month}월`, "장내용수": inUsageSum, "장외용수": outUsageSum });
+
+                    // 라인차트
+                    wshwtrData.push({ label: `${month}월`, val: element.wshwtr, color: "red" });
+                    coolUswtrData.push({ label: `${month}월`, val: element.coolUswtr, color: "orange" });
+                    cleanUswtrData.push({ label: `${month}월`, val: element.cleanUswtr, color: "yellow" });
+                    drwtUswtrData.push({ label: `${month}월`, val: element.drwtUswtr, color: "pink" });
+                    dltnUswtrData.push({ label: `${month}월`, val: element.dltnUswtr, color: "purple" });
+                    ithlRswtrData.push({ label: `${month}월`, val: element.ithlRswtr, color: "green" });
+                    ithlEtcUswtrData.push({ label: `${month}월`, val: element.ithlEtcUswtr, color: "blue" });
+                    cleanToilUswtrData.push({ label: `${month}월`, val: element.cleanToilUswtr, color: "magenta" });
+                    resnData.push({ label: `${month}월`, val: element.resn, color: "skyblue" });
+
+                    lndwtrData.push({ label: `${month}월`, val: element.lndwtr, color: "red" });
+                    hydUswtrData.push({ label: `${month}월`, val: element.hydUswtr, color: "orange" });
+                    ugwtChrData.push({ label: `${month}월`, val: element.ugwtChr, color: "yellow" });
+                    farmUswtrData.push({ label: `${month}월`, val: element.farmUswtr, color: "green" });
+                    rvrKeepUswtrData.push({ label: `${month}월`, val: element.rvrKeepUswtr, color: "blue" });
+                    indstUswtrData.push({ label: `${month}월`, val: element.indstUswtr, color: "purple" });
                 });
-            })
-            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, year])
+            });
 
+            // 도넛차트 데이터
+            dnData.push({ label: "세척수", val: wshwtr, fill: "red" });
+            dnData.push({ label: "냉각수", val: coolUswtr, fill: "orange" });
+            dnData.push({ label: "청소수", val: cleanUswtr, fill: "yellow" });
+            dnData.push({ label: "식수대", val: drwtUswtr, fill: "green" });
+            dnData.push({ label: "희석용수", val: dltnUswtr, fill: "skyblue" });
+            dnData.push({ label: "중수도", val: ithlRswtr, fill: "blue" });
+            dnData.push({ label: "기타", val: ithlEtcUswtr, fill: "purple" });
+            dnData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "red" });
+            dnData.push({ label: "세척살수용수", val: resn, fill: "orange" });
+            dnData.push({ label: "조경용수", val: lndwtr, fill: "yellow" });
+            dnData.push({ label: "친수용수", val: hydUswtr, fill: "green" });
+            dnData.push({ label: "지하수충전", val: ugwtChr, fill: "skyblue" });
+            dnData.push({ label: "농업용수", val: farmUswtr, fill: "blue" });
+            dnData.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "purple" });
+            dnData.push({ label: "공업용수", val: indstUswtr, fill: "black" });
+
+            // 장내용수 도넛
+            dnInData.push({ label: "세척수", val: wshwtr, fill: "yellow" });
+            dnInData.push({ label: "냉각수", val: coolUswtr, fill: "green" });
+            dnInData.push({ label: "청소수", val: cleanUswtr, fill: "yellow" });
+            dnInData.push({ label: "식수대", val: drwtUswtr, fill: "green" });
+            dnInData.push({ label: "희석용수", val: dltnUswtr, fill: "yellow" });
+            dnInData.push({ label: "중수도", val: ithlRswtr, fill: "green" });
+            dnInData.push({ label: "기타", val: ithlEtcUswtr, fill: "yellow" });
+            dnInData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "green" });
+            dnInData.push({ label: "세척살수용수", val: resn, fill: "yellow" });
+
+            // 장외용수 도넛
+            dnOutData.push({ label: "조경용수", val: lndwtr, fill: "yellow" });
+            dnOutData.push({ label: "친수용수", val: hydUswtr, fill: "black" });
+            dnOutData.push({ label: "지하수충전", val: ugwtChr, fill: "yellow" });
+            dnOutData.push({ label: "농업용수", val: farmUswtr, fill: "black" });
+            dnOutData.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "yellow" });
+            dnOutData.push({ label: "공업용수", val: indstUswtr, fill: "black" });
+
+            // 라인차트 데이터
+            setInLineData({
+                chartData1: wshwtrData,
+                chartData2: coolUswtrData,
+                chartData3: cleanUswtrData,
+                chartData4: drwtUswtrData,
+                chartData5: dltnUswtrData,
+                chartData6: ithlRswtrData,
+                chartData7: ithlEtcUswtrData,
+                chartData8: cleanToilUswtrData,
+                chartData9: resnData
+            });
+            setOutLineData({
+                chartData1: lndwtrData,
+                chartData2: hydUswtrData,
+                chartData3: ugwtChrData,
+                chartData4: farmUswtrData,
+                chartData5: rvrKeepUswtrData,
+                chartData6: indstUswtrData,
+            });
+            setBarData(barData);
+            setChartData(dnData);
+            setDnInUsage(dnInData);
+            setDnOutUsage(dnOutData);
+        }
+    }, [rawData, year]);
 
     useEffect(() => {
         const newChartConfig = chartData.reduce((config, element) => {
@@ -196,46 +328,6 @@ export default function PbnstPrfmncSttn() {
         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] = {
@@ -247,37 +339,6 @@ export default function PbnstPrfmncSttn() {
         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: "yellow" })
-            data?.push({ label: "친수용수", val: hydUswtr, fill: "black" })
-            data?.push({ label: "지하수충전", val: ugwtChr, fill: "yellow" })
-            data?.push({ label: "농업용수", val: farmUswtr, fill: "black" })
-            data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "yellow" })
-            data?.push({ label: "공업용수", val: indstUswtr, fill: "black" })
-            setDnOutUsage(data);
-        }
-    }, [rawData, year])
-
     useEffect(() => {
         const newChartConfig = dnOutUsage.reduce((config, element) => {
             config[element.label] = {
@@ -289,69 +350,6 @@ export default function PbnstPrfmncSttn() {
         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}월`, "장내용수": inUsageSum, "장외용수": outUsageSum })
-
-                },
-                );
-
-            })
-
-            setBarData(data);
-        }
-    }, [rawData, year])
-
     useEffect(() => {
         const newChartConfig = barData.reduce((config, element) => {
             config[element.label] = {
@@ -363,51 +361,6 @@ export default function PbnstPrfmncSttn() {
         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 = {
@@ -452,37 +405,6 @@ export default function PbnstPrfmncSttn() {
         }
     }, [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) {
@@ -526,6 +448,16 @@ export default function PbnstPrfmncSttn() {
         setbdstTable(prfmncRes);
     }, [prfmncRes]);
 
+    const [searchYear, setSearchYear] = useState<string>(
+        String(new Date().getFullYear())
+    );
+
+    useEffect(() => {
+        if (pbnRuseNm.length > 1)
+            pbnNmSearch("1", "23", ref.current, pbnRuseNm, searchYear);
+    }, [pbnRuseNm]);
+
+
     return (
         <>
             <ContentsDiv>
@@ -566,13 +498,17 @@ export default function PbnstPrfmncSttn() {
                                             value={toDate}
                                             onSelectValue={(val: string | number) => setToDate(String(val))} />
                                     </div>
-                                    <SearchInput
-                                        className={"text-2xl"}
-                                        label="시설명"
-                                        textValue={swtrmtFcltNm ?? ""}
-                                        setText={(e) => {
-                                            setSwtrmtFcltNm(e);
-                                        }} />
+                                    <SearchInputText
+                                        label={"하수처리시설"}
+                                        initValue={pbnRuseNm ?? ""}
+                                        setValue={(searchNm?: string) => {
+                                            setPbnRuseNm(searchNm || "");
+                                        }}
+                                        setRtnData={function (rtnData: any[]): void {
+                                            setbdstTable(rtnData);
+                                        }}
+                                        searchList={pbnstSttn.pbnstSearchData || []}
+                                    ></SearchInputText>
                                     <SelectBox
                                         className="h-full text-2xl"
                                         label="재이용시설명"
@@ -599,7 +535,7 @@ export default function PbnstPrfmncSttn() {
                                     }
                                 }
                             }}
-                            excelClick={() => { }}
+                            excelClick={excelClick}
                             initClick={function (): void { }}
                             btnClass={btnClass}
                             ref={ref} isAdmin={false} />
@@ -680,7 +616,7 @@ export default function PbnstPrfmncSttn() {
                     </div>
                 </div>
             </ContentsDiv>
-            <Toaster position="top-center"/>
+            <Toaster position="top-center" />
         </>
     )
 }

apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx

@@ -49,6 +49,7 @@ const hasuListFetch = async (page: string, sggOrCity: string) => {
         checkWrRegListRes?.fcltCds,
         fetchType.COMMON
     );
+    console.log("api 호출", rainRes)
     const data = checkWrRegListRes.fcPrfList.map((item: FcPrfType) => {
         const findData = rainRes.data.find(
             (fclt: pubHasuType) =>
@@ -142,7 +143,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
                 bscFctCdList,
                 `wr`,
             )
-
+            console.log("res", res)
             let inUsageSum = 0;
             let outUsageSum = 0;
             let usageSum = 0;