재이용실적현황 차트 데이터 수정 완료

2025-06-25 11:24:44 +09:00
parent 41201f0af7
commit 3a17089838
3 changed files with 148 additions and 89 deletions
@@ -33,6 +33,10 @@ export default function PbnstPrfmncSttn() {
    const ref = useRef<ReturnType>({} as ReturnType);
    const [swtrmtFcltNm, setSwtrmtFcltNm] = useState<string>();
    const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
+
+     const [searchYear, setSearchYear] = useState<string>(
+            String(new Date().getFullYear())
+        );
    const [excelData, setExcelData] = useState<any[]>([]);
    const excelClick = useCallback(() => {
        excelDownload(
@@ -43,7 +47,6 @@ export default function PbnstPrfmncSttn() {
            2
        );
    }, [excelData]);
-
    const [chartConfig, setChartConfig] = useState<ChartConfig>({});
    const [chartData, setChartData] = useState<dnChartForm[]>([]);
    const [dnInUsage, setDnInUsage] = useState<dnChartForm[]>([]);
@@ -138,7 +141,8 @@ export default function PbnstPrfmncSttn() {
            setPrfData([]);
        }
    }
-
+    
+    const [chartId, setChartId] = useState<string>();
    useEffect(() => {
        // 누적 변수 초기화
        let wshwtr = 0,
@@ -192,67 +196,69 @@ export default function PbnstPrfmncSttn() {
        if (rawData) {
            rawData.forEach((item) => {
                // 실적 테이블 데이터
-                prfTableData(item.prfList, year);
+                if (chartId){
+                    if(item.prfList?.[0]?.ym.slice(0, 4) === year && item.prfList?.[0]?.pbnstRuseFcltFk === chartId)
+                    prfTableData(item.prfList, year);
+                    item.prfList.filter((e) => e.ym.slice(0, 4) === year && e.pbnstRuseFcltFk === chartId).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);

-                    // 월별 합계
-                    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 });

-                    // 막대차트
-                    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" });

-                    // 라인차트
-                    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" });
-                });
+                        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" });
+                    });
+                }
            });

            // 도넛차트 데이터
@@ -316,7 +322,7 @@ export default function PbnstPrfmncSttn() {
            setDnInUsage(dnInData);
            setDnOutUsage(dnOutData);
        }
-    }, [rawData, year]);
+    }, [rawData, year, chartId]);

    useEffect(() => {
        const newChartConfig = chartData.reduce((config, element) => {
@@ -440,24 +446,37 @@ export default function PbnstPrfmncSttn() {
    }, [outLineData]);

    useEffect(() => {
-        if (!pbnstPrfmncSttn.isInit) {
-            pbnstPrfmncInit("1", "11");
+        const returnType: ReturnType = {
+            sidoValue: "0",
+            sigunValue: "0",
+            partValue: "A",
+            regionValue: "0",
+            unitWaterShedValue: "",
+            middleRegionValue: "",
+            envPartValue: "",
+            sidoText: "",
+            sigunText: ""
        }
-    }, [pbnstPrfmncSttn.isInit, pbnstPrfmncInit]);
+        tableHeadMaker(Number(searchYear), Number(searchYear));
+        pbnstPrfmncSearch(returnType, "", searchYear, searchYear)
+    }, []);

    useEffect(() => {
        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]);

+    const cellClick = (index: number | undefined, headId: string) => {
+        if (index !== undefined && headId !== undefined) {
+            setChartId(prfmncRes[index].pbnstRuseFcltPk)
+        }
+    }

    return (
        <>
@@ -551,7 +570,9 @@ export default function PbnstPrfmncSttn() {
                                headlist={pbnstPrfHeadList}
                                pageSize={20}
                                total={10000}
-                                cellClick={() => { }}
+                                cellClick={(index: number | undefined, headId: string) => {
+                                    cellClick(index ?? undefined, headId);
+                                }}
                                onPageChange={() => { }}
                            />

@@ -181,10 +181,20 @@ export type comCodeType = comCodeState & comCodeActions;

 export const getSggCd = async (set: any) => {
  const sgg = await getFetch("common", "/addr/sgg");
-  const sggCd = sgg.map((item: any) => ({
+  /* const sggCd = sgg.map((item: any) => ({
    val: item.adstDstrCd,
    text: item.gugun,
-  }));
+  })); */
+
+  const sggCd  = [
+    { text: "전체", val: '0' },
+    ...sgg
+      .map((item: any) => ({
+        text: item.gugun || '',
+        val: String(item.adstDstrCd) || ''
+      }))
+  ];
+  
  set((state: comCodeState) => ({
    code: {
      ...state.code,
@@ -332,7 +342,7 @@ export const codeActionExport: (set: any) => comCodeActions = (set: any) => {
        val: item.adstDstrCd,
        text: item.gugun,
      }));
-
+      
      const city = await getFetch("common", "/addr/city");
      const cityCd = city.map((item: any) => ({
        val: item.adstDstrCd,
@@ -75,7 +75,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
            for (let i = startYear; i <= endYear; i++) {
                const yearHead = JSON.parse(JSON.stringify(pbnstYearHeadListExport));
                if (yearHead) {
-                    yearHead.forEach((item: { id?: number; }) => {
+                    yearHead.forEach((item: { id?: string; }) => {
                        if (item.id) {
                            item.id = i + item.id;

@@ -92,6 +92,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
                return {
                    ...state,
                    pbnstPrfmncSttn: {
+                        ...state.pbnstPrfmncSttn,
                        pbnstPrfHeadList: [...yearHeader],
                        selectYearList: selectList
                    },
@@ -106,7 +107,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
                    pbnstPrfmncSttn: {
                        ...state.pbnstPrfmncSttn,
                        prfmncRes: prfmncRes,
-                        isInit: false,
+                        isInit: true,
                    },
                }));
            } catch (e) {
@@ -115,8 +116,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
        },
        pbnstPrfmncSearch: async (returnType: ReturnType, swtrmtFcltNm: string, fromDate: string, toDate: string) => {
            let searchUrl = "";
-
-            if (returnType.sigunValue !== undefined) {
+            if (returnType.sigunValue !== "0") {
                if (swtrmtFcltNm !== "") {
                    searchUrl = `/prcsFclt/info/1/20/${returnType.partValue}/${returnType.sigunValue}/0/1/SW${'/' + swtrmtFcltNm}`;
                } else {
@@ -134,6 +134,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
                fetchType.COMMON,
                searchUrl
            );
+
            const bscFctCdList = pbnstRes.map((item: any) => {
                return item.bscFctCd;
            })
@@ -147,32 +148,59 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
            let usageSum = 0;
            let year = "";
            const yearsData = []
+
            res.data.forEach((item) => {
+                if (item.prfList.length === 0) {
+                    const year = ""; // 연도 정보가 없으면 빈 문자열, 필요시 item에서 추출
+                    const yearVal = { year: year, pbnstRuseFcltPk: item.pbnstRuseFcltPk ?? "" };
+                    yearVal[year + "inUsage"] = 0;
+                    yearVal[year + "outUsage"] = 0;
+                    yearVal[year + "total"] = 0;
+                    yearsData.push(yearVal);
+                }
                item.prfList.forEach((acc) => {
-                    year = acc.ym.substring(0, 4);
-                    inUsageSum = acc.wshwtr + acc.coolUswtr + acc.cleanUswtr + acc.drwtUswtr +
-                        acc.dltnUswtr + acc.ithlRswtr + acc.ithlEtcUswtr + acc.cleanToilUswtr + acc.resn;
-                    outUsageSum = acc.lndwtr + acc.hydUswtr + acc.ugwtChr + acc.farmUswtr + acc.rvrKeepUswtr + acc.indstUswtr;
-                    const yearData = yearsData.find(yearItem => yearItem.year === year && yearItem.pbnstRuseFcltPk == acc.pbnstRuseFcltPk)
+                    year = acc.ym?.substring(0, 4) ?? "";
+                    inUsageSum =
+                        (acc.wshwtr ?? 0) +
+                        (acc.coolUswtr ?? 0) +
+                        (acc.cleanUswtr ?? 0) +
+                        (acc.drwtUswtr ?? 0) +
+                        (acc.dltnUswtr ?? 0) +
+                        (acc.ithlRswtr ?? 0) +
+                        (acc.ithlEtcUswtr ?? 0) +
+                        (acc.cleanToilUswtr ?? 0) +
+                        (acc.resn ?? 0);
+                    outUsageSum =
+                        (acc.lndwtr ?? 0) +
+                        (acc.hydUswtr ?? 0) +
+                        (acc.ugwtChr ?? 0) +
+                        (acc.farmUswtr ?? 0) +
+                        (acc.rvrKeepUswtr ?? 0) +
+                        (acc.indstUswtr ?? 0);
+                    const yearData = yearsData.find(
+                        (yearItem) =>
+                            yearItem.year === year &&
+                            yearItem.pbnstRuseFcltPk == acc.pbnstRuseFcltPk
+                    );

                    if (yearData) {
-                        yearData.inUsageSum += inUsageSum;
-                        yearData.outUsageSum += outUsageSum;
+                        yearData[year + "inUsage"] += inUsageSum;
+                        yearData[year + "outUsage"] += outUsageSum;
+                        yearData[year + "total"] += (inUsageSum + outUsageSum);
                    } else {
-                        const yearVal = { year: year, pbnstRuseFcltPk: acc.pbnstRuseFcltFk }
-                        yearVal[year + 'inUsage'] = inUsageSum;
-                        yearVal[year + 'outUsage'] = outUsageSum;
-                        yearVal[year + 'total'] = inUsageSum + outUsageSum;
+                        const yearVal = { year: year, pbnstRuseFcltPk: acc.pbnstRuseFcltFk };
+                        yearVal[year + "inUsage"] = inUsageSum;
+                        yearVal[year + "outUsage"] = 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 })
+                    resData.push({ ...acc, ...data })
                }
            })
            return set((state: pbnstPrfmncSttnState) => ({