From c79b4ca18d59746941c70b6f0122d24393086fd7 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Mon, 7 Jul 2025 09:19:37 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=EC=8B=A4=EC=A0=81=20=ED=98=84=ED=99=A9=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prfmncSttn/pbnstPrfmncSttn/page.tsx | 121 +++++++++--------- .../prfmncSttn/pbnstPrfmncSttn/index.tsx | 34 ++--- 2 files changed, 77 insertions(+), 78 deletions(-) diff --git a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx index f689eb745..3e860d744 100644 --- a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx +++ b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx @@ -68,8 +68,6 @@ export default function PbnstPrfmncSttn() { chartData5: lineChartDataProps[]; chartData6: lineChartDataProps[]; chartData7: lineChartDataProps[]; - chartData8: lineChartDataProps[]; - chartData9: lineChartDataProps[]; }>(); const [outLineData, setOutLineData] = useState<{ chartData1: lineChartDataProps[]; @@ -78,6 +76,8 @@ export default function PbnstPrfmncSttn() { chartData4: lineChartDataProps[]; chartData5: lineChartDataProps[]; chartData6: lineChartDataProps[]; + chartData7: lineChartDataProps[]; + chartData8: lineChartDataProps[]; }>(); type dnChartForm = { label: string, val: number, fill?: string }; @@ -228,16 +228,18 @@ export default function PbnstPrfmncSttn() { indstUswtr += element.indstUswtr; // 월별 합계 - inUsageSum = element.wshwtr + inUsageSum = + element.wshwtr + element.coolUswtr + element.cleanUswtr + element.drwtUswtr + element.dltnUswtr + element.ithlRswtr + element.ithlEtcUswtr - + element.cleanToilUswtr - + element.resn; - outUsageSum = element.lndwtr + outUsageSum = + element.cleanToilUswtr + + element.resn + + element.lndwtr + element.hydUswtr + element.ugwtChr + element.farmUswtr @@ -258,9 +260,10 @@ export default function PbnstPrfmncSttn() { 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" }); @@ -271,22 +274,18 @@ export default function PbnstPrfmncSttn() { } }); + let dnTotalIn = 0; + let dnTotalOut = 0; + inUsageArr.forEach((item) => { + dnTotalIn += item + }) + outUsageArr.forEach((item) => { + dnTotalOut += item + }) + // 도넛차트 데이터 - dnData.push({ label: "세척수", val: wshwtr, fill: "#F7CFD8" }); - dnData.push({ label: "냉각수", val: coolUswtr, fill: "#F4F8D3" }); - dnData.push({ label: "청소수", val: cleanUswtr, fill: "#A6D6D6" }); - dnData.push({ label: "식수대", val: drwtUswtr, fill: "#8E7DBE" }); - dnData.push({ label: "희석용수", val: dltnUswtr, fill: "#FF8383" }); - dnData.push({ label: "중수도", val: ithlRswtr, fill: "#FFF574" }); - dnData.push({ label: "기타", val: ithlEtcUswtr, fill: "#A1D6CB" }); - dnData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "#A19AD3" }); - dnData.push({ label: "세척살수용수", val: resn, fill: "#B1F0F7" }); - dnData.push({ label: "조경용수", val: lndwtr, fill: "#81BFDA" }); - dnData.push({ label: "친수용수", val: hydUswtr, fill: "#F5F0CD" }); - dnData.push({ label: "지하수충전", val: ugwtChr, fill: "#FADA7A" }); - dnData.push({ label: "농업용수", val: farmUswtr, fill: "#A6AEBF" }); - dnData.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "#C5D3E8" }); - dnData.push({ label: "공업용수", val: indstUswtr, fill: "#D0E8C5" }); + dnData.push({ label: "장내용수", val: dnTotalIn, fill: "#8DD8FF" }); + dnData.push({ label: "장외용수", val: dnTotalOut, fill: "#FFF085" }); // 장내용수 도넛 dnInData.push({ label: "세척수", val: wshwtr, fill: "#F7CFD8" }); @@ -296,10 +295,10 @@ export default function PbnstPrfmncSttn() { dnInData.push({ label: "희석용수", val: dltnUswtr, fill: "#FF8383" }); dnInData.push({ label: "중수도", val: ithlRswtr, fill: "#FFF574" }); dnInData.push({ label: "기타", val: ithlEtcUswtr, fill: "#A1D6CB" }); - dnInData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "#A19AD3" }); - dnInData.push({ label: "세척살수용수", val: resn, fill: "#B1F0F7" }); // 장외용수 도넛 + dnOutData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "#A19AD3" }); + dnOutData.push({ label: "세척살수용수", val: resn, fill: "#B1F0F7" }); dnOutData.push({ label: "조경용수", val: lndwtr, fill: "#81BFDA" }); dnOutData.push({ label: "친수용수", val: hydUswtr, fill: "#F5F0CD" }); dnOutData.push({ label: "지하수충전", val: ugwtChr, fill: "#FADA7A" }); @@ -315,17 +314,17 @@ export default function PbnstPrfmncSttn() { chartData4: drwtUswtrData, chartData5: dltnUswtrData, chartData6: ithlRswtrData, - chartData7: ithlEtcUswtrData, - chartData8: cleanToilUswtrData, - chartData9: resnData + chartData7: ithlEtcUswtrData }); setOutLineData({ - chartData1: lndwtrData, - chartData2: hydUswtrData, - chartData3: ugwtChrData, - chartData4: farmUswtrData, - chartData5: rvrKeepUswtrData, - chartData6: indstUswtrData, + chartData1: cleanToilUswtrData, + chartData2: resnData, + chartData3: lndwtrData, + chartData4: hydUswtrData, + chartData5: ugwtChrData, + chartData6: farmUswtrData, + chartData7: rvrKeepUswtrData, + chartData8: indstUswtrData, }); setBarData(barData); setChartData(dnData); @@ -408,15 +407,7 @@ export default function PbnstPrfmncSttn() { chartData7: { label: '기타', color: "blue", - }, - chartData8: { - label: '청소화장실용수', - color: "magenta", - }, - chartData9: { - label: '세척살수용수', - color: "skyblue", - }, + } } satisfies ChartConfig; setLnInChartConfig(newChartConfig); } @@ -427,26 +418,34 @@ export default function PbnstPrfmncSttn() { if (outLineData?.chartData1) { const newChartConfig = { chartData1: { - label: '조경용수', + label: '청소화장실용수', color: "red", }, chartData2: { + label: '세척살수용수', + color: "pink", + }, + chartData3: { + label: '조경용수', + color: "gray", + }, + chartData4: { label: '친수용수', color: "orange", }, - chartData3: { + chartData5: { label: '지하수충전', color: "yellow", }, - chartData4: { + chartData6: { label: '농업용수', color: "green", }, - chartData5: { + chartData7: { label: '하천등유지용수', color: "blue", }, - chartData6: { + chartData8: { label: '공업용수', color: "purple", }, @@ -615,7 +614,7 @@ export default function PbnstPrfmncSttn() {

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

- +
@@ -627,25 +626,25 @@ export default function PbnstPrfmncSttn() {

하수재이용실적 현황

{/* */} - {/*
+ {/*

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

*/} - - + + - {/* + {/*

diff --git a/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx b/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx index b513085ae..db8b6a717 100644 --- a/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx +++ b/apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx @@ -148,7 +148,7 @@ 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에서 추출 @@ -161,26 +161,26 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions item.prfList.forEach((acc) => { 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); + (acc.wshwtr ?? 0) + //조경용수 + (acc.coolUswtr ?? 0) + //냉각수 + (acc.cleanUswtr ?? 0) + //청소수 + (acc.drwtUswtr ?? 0) + //식수대 + (acc.dltnUswtr ?? 0) + //희석용수 + (acc.ithlRswtr ?? 0) + //중수도 + (acc.ithlEtcUswtr ?? 0) //기타 outUsageSum = - (acc.lndwtr ?? 0) + - (acc.hydUswtr ?? 0) + - (acc.ugwtChr ?? 0) + - (acc.farmUswtr ?? 0) + - (acc.rvrKeepUswtr ?? 0) + - (acc.indstUswtr ?? 0); + (acc.cleanToilUswtr ?? 0) + //청소화장실용수 + (acc.resn ?? 0)+ //세척살수용도 + (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 + yearItem.pbnstRuseFcltPk == acc.pbnstRuseFcltFk ); if (yearData) { From 051c158e22777b2cb9c48c10b4f39e7687f9d71d Mon Sep 17 00:00:00 2001 From: truthwing Date: Mon, 7 Jul 2025 10:24:11 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=EB=8F=84=EB=84=9B=20=EB=B0=8F=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B8=20=EC=B0=A8=ED=8A=B8=20=EC=88=98=EC=A0=95=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/chart/DoughnutChart.tsx | 61 ++++++++++++++++++- .../src/ui/chart/LineChart.tsx | 58 +++++++++++++++++- 2 files changed, 115 insertions(+), 4 deletions(-) diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx index 39dee3d9e..99395267a 100644 --- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx +++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx @@ -48,6 +48,7 @@ type LegendProps = { }; /** 차트 기본 스타일 */ +/* const customStyles = { legendContainer: { display: "flex", @@ -58,6 +59,23 @@ const customStyles = { marginTop: "10px", } as CSSProperties, }; +*/ + +/** 차트 기본 스타일 (라인차트와 동일하게) */ +const customStyles = { + legendContainer: { + display: "flex", + flexWrap: "wrap", // 여러 줄로 자동 줄바꿈 + justifyContent: "center", + alignItems: "center", + gap: "12px", // 아이템 간 간격 + fontSize: "13px", + fontWeight: "normal", + marginTop: "16px", + marginBottom: "8px", + minHeight: "32px", // 범례 영역 높이 통일 + } as CSSProperties, +}; // 커스텀 툴팁 const CustomTooltip = ({ active, payload, label }: { @@ -82,6 +100,7 @@ const CustomTooltip = ({ active, payload, label }: { }; // 커스텀 범례 +/* const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; @@ -97,12 +116,52 @@ const CustomLegend = (props: LegendProps) => {

); }; +*/ + +const CustomLegend = (props: LegendProps) => { + const { payload } = props; + if (!payload) return null; + + return ( +
+ {payload.map((entry: LegendEntry, index: number) => ( +
+
+ + {entry.payload?.label || entry.value} + +
+ ))} +
+ ); +}; export default function DoughnutChart(props: { chartConfig: any; chartData: ChartDataItem[] | undefined; chartTitle: string }) { + const legendData = props.chartData?.map(item => ({ + value: item.label, + fill: props.chartConfig?.[item.label]?.fill || 'blue', + })) ?? []; return ( @@ -130,9 +189,9 @@ export default function DoughnutChart(props: { nameKey="label" innerRadius={60} /> - +
diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx index 4014702b6..23570912d 100644 --- a/packages/common/business_components/src/ui/chart/LineChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineChart.tsx @@ -1,11 +1,11 @@ "use client" import type { CSSProperties } from "react"; import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts"; +import type { ContentType } from "recharts/types/component/DefaultLegendContent"; import { ChartContainer, type ChartConfig } from "./lib/chart"; -import type { ContentType } from "recharts/types/component/DefaultLegendContent"; type LineChartProps = { chartConfig: ChartConfig | undefined; @@ -18,6 +18,7 @@ type LineChartProps = { } /** 차트 기본 스타일 */ +/* const customStyles = { legendContainer: { display: "flex", @@ -28,6 +29,23 @@ const customStyles = { marginTop: "10px", } as CSSProperties, }; +*/ + +/** 차트 기본 스타일 */ +const customStyles = { + legendContainer: { + display: "flex", + flexWrap: "wrap", + justifyContent: "center", + alignItems: "center", + gap: "12px", + fontSize: "13px", + fontWeight: "normal", + marginTop: "16px", + marginBottom: "8px", + minHeight: "32px", + } as CSSProperties, +}; type LegendEntry = { value: string; @@ -60,7 +78,7 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: }; // 커스텀 범례 (글씨 크기 키우기 + 스타일 추가) -const CustomLegend = (props: LegendProps) => { +/*const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; @@ -74,6 +92,40 @@ const CustomLegend = (props: LegendProps) => { ))}
); +};*/ + +// 커스텀 범례 (도넛차트와 동일하게) +const CustomLegend = (props: LegendProps) => { + const { payload } = props; + if (!payload) return null; + + return ( +
+ {payload.map((entry: LegendEntry, index: number) => ( +
+
+ {entry.value} +
+ ))} +
+ ); }; type DataType = {label: string; val: string}; @@ -141,7 +193,7 @@ export default function Linechart({ > - + value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} /> } /> {showLegend && } {Object.keys(chartData).map((key) => { From d842ac599e9f16b786e05ab692d8067a8d94a8ff Mon Sep 17 00:00:00 2001 From: truthwing Date: Mon, 7 Jul 2025 10:32:35 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=EB=8F=84=EB=84=9B=20=EB=9D=BC=EC=9D=B8=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20=EB=B3=B5=EA=B5=AC.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ui/chart/DoughnutChart.tsx | 61 ++++++++++++++++++- .../src/ui/chart/LineChart.tsx | 56 ++++++++++++++++- 2 files changed, 114 insertions(+), 3 deletions(-) diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx index 39dee3d9e..99395267a 100644 --- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx +++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx @@ -48,6 +48,7 @@ type LegendProps = { }; /** 차트 기본 스타일 */ +/* const customStyles = { legendContainer: { display: "flex", @@ -58,6 +59,23 @@ const customStyles = { marginTop: "10px", } as CSSProperties, }; +*/ + +/** 차트 기본 스타일 (라인차트와 동일하게) */ +const customStyles = { + legendContainer: { + display: "flex", + flexWrap: "wrap", // 여러 줄로 자동 줄바꿈 + justifyContent: "center", + alignItems: "center", + gap: "12px", // 아이템 간 간격 + fontSize: "13px", + fontWeight: "normal", + marginTop: "16px", + marginBottom: "8px", + minHeight: "32px", // 범례 영역 높이 통일 + } as CSSProperties, +}; // 커스텀 툴팁 const CustomTooltip = ({ active, payload, label }: { @@ -82,6 +100,7 @@ const CustomTooltip = ({ active, payload, label }: { }; // 커스텀 범례 +/* const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; @@ -97,12 +116,52 @@ const CustomLegend = (props: LegendProps) => {
); }; +*/ + +const CustomLegend = (props: LegendProps) => { + const { payload } = props; + if (!payload) return null; + + return ( +
+ {payload.map((entry: LegendEntry, index: number) => ( +
+
+ + {entry.payload?.label || entry.value} + +
+ ))} +
+ ); +}; export default function DoughnutChart(props: { chartConfig: any; chartData: ChartDataItem[] | undefined; chartTitle: string }) { + const legendData = props.chartData?.map(item => ({ + value: item.label, + fill: props.chartConfig?.[item.label]?.fill || 'blue', + })) ?? []; return ( @@ -130,9 +189,9 @@ export default function DoughnutChart(props: { nameKey="label" innerRadius={60} /> - + diff --git a/packages/common/business_components/src/ui/chart/LineChart.tsx b/packages/common/business_components/src/ui/chart/LineChart.tsx index 74d17f784..23570912d 100644 --- a/packages/common/business_components/src/ui/chart/LineChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineChart.tsx @@ -18,6 +18,7 @@ type LineChartProps = { } /** 차트 기본 스타일 */ +/* const customStyles = { legendContainer: { display: "flex", @@ -28,6 +29,23 @@ const customStyles = { marginTop: "10px", } as CSSProperties, }; +*/ + +/** 차트 기본 스타일 */ +const customStyles = { + legendContainer: { + display: "flex", + flexWrap: "wrap", + justifyContent: "center", + alignItems: "center", + gap: "12px", + fontSize: "13px", + fontWeight: "normal", + marginTop: "16px", + marginBottom: "8px", + minHeight: "32px", + } as CSSProperties, +}; type LegendEntry = { value: string; @@ -60,7 +78,7 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: }; // 커스텀 범례 (글씨 크기 키우기 + 스타일 추가) -const CustomLegend = (props: LegendProps) => { +/*const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; @@ -74,6 +92,40 @@ const CustomLegend = (props: LegendProps) => { ))} ); +};*/ + +// 커스텀 범례 (도넛차트와 동일하게) +const CustomLegend = (props: LegendProps) => { + const { payload } = props; + if (!payload) return null; + + return ( +
+ {payload.map((entry: LegendEntry, index: number) => ( +
+
+ {entry.value} +
+ ))} +
+ ); }; type DataType = {label: string; val: string}; @@ -141,7 +193,7 @@ export default function Linechart({ > - + value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} /> } /> {showLegend && } {Object.keys(chartData).map((key) => { From 02ada9925a2b25ab182ba70233db4c1fa3a17a99 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Mon, 7 Jul 2025 13:12:20 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=EC=8B=A4=EC=A0=81=20=ED=98=84=ED=99=A9=20=EC=9B=94?= =?UTF-8?q?=EB=B3=84=20=EC=98=A4=EB=A6=84=EC=B0=A8=EC=88=9C=20=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=20=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prfmncSttn/pbnstPrfmncSttn/page.tsx | 27 ++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx index 3e860d744..da0b7871d 100644 --- a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx +++ b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx @@ -306,6 +306,24 @@ export default function PbnstPrfmncSttn() { dnOutData.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "#C5D3E8" }); dnOutData.push({ label: "공업용수", val: indstUswtr, fill: "#D0E8C5" }); + // 라인차트 데이터 월별 오름차순 정렬 + const sortFn = (a: { label: string }, b: { label: string }) => parseInt(a.label) - parseInt(b.label); + wshwtrData.sort(sortFn); + coolUswtrData.sort(sortFn); + cleanUswtrData.sort(sortFn); + drwtUswtrData.sort(sortFn); + dltnUswtrData.sort(sortFn); + ithlRswtrData.sort(sortFn); + ithlEtcUswtrData.sort(sortFn); + cleanToilUswtrData.sort(sortFn); + resnData.sort(sortFn); + lndwtrData.sort(sortFn); + hydUswtrData.sort(sortFn); + ugwtChrData.sort(sortFn); + farmUswtrData.sort(sortFn); + rvrKeepUswtrData.sort(sortFn); + indstUswtrData.sort(sortFn); + // 라인차트 데이터 setInLineData({ chartData1: wshwtrData, @@ -326,6 +344,7 @@ export default function PbnstPrfmncSttn() { chartData7: rvrKeepUswtrData, chartData8: indstUswtrData, }); + barData.sort((a, b) => parseInt(a.label) - parseInt(b.label)); setBarData(barData); setChartData(dnData); setDnInUsage(dnInData); @@ -471,7 +490,13 @@ export default function PbnstPrfmncSttn() { }, []); useEffect(() => { - setbdstTable(prfmncRes); + setbdstTable(prfmncRes.map((e, idx) => { + + return ({ + ...e, + number: String(idx + 1) + }) + })) if (prfmncRes?.[0]?.pbnstRuseFcltPk) setChartId(prfmncRes[0].pbnstRuseFcltPk) }, [prfmncRes]); From 37eb11f303233b054afcd80af6a7726596616073 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Mon, 7 Jul 2025 16:25:26 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=EC=8B=9C=EC=84=A4=EB=93=B1=EB=A1=9D=20=EA=B2=B0?= =?UTF-8?q?=ED=95=A8=20=EC=88=98=EC=A0=95=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ruseFcltMng/fcltReg/pbnstReg/headList.tsx | 2 +- .../ruseFcltMng/fcltReg/pbnstReg/index.tsx | 2 + .../fcltReg/pbnstReg/mngReg/mngRegForm.tsx | 69 ++++++++++--------- .../ui/form/fcltReg/rainReg/rainRegForm.tsx | 4 +- .../fcltReg/bdstRegModal/bdstRegModal.tsx | 6 +- .../ruseMngTableForm/ruseMngTableForm.tsx | 12 ++-- 6 files changed, 50 insertions(+), 45 deletions(-) diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx index d77f4d7f0..bb1cade10 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx @@ -50,7 +50,7 @@ export const pbnstOrgwtHeadListRxport: TableUpperProps[] = [ { id: "orgwtWtritQnt", title: "원수취수량" }, { id: "tmsYn", title: "하수처리량TMS 전후" }, { id: "dschgFmYn", title: "하수처리장 방류 유량계 전·후​" }, - { id: "dtlPstnExpln", title: "상세위치 설명" }, + { id: "dtlPstnExpln", title: "상세위치", edit: true }, ]; export const fcOrgwtsHeadListExport: TableUpperProps[] = [ { id: "choose", title: "선택", type: "checkbox" }, diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx index e4bedff60..66c8c4dc8 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx @@ -124,6 +124,7 @@ if(searchTxt){ const hasuList = rainRes.data.map((item: any) => { return { ...item, + fctCpc: Number(item.fctCpc) || 0, ruse: item.ruse === false ? "N" : "Y", }; }); @@ -181,6 +182,7 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => { const pbnstHasuRes = await hasuListFetch(page, sggOrCity); + return set((state: pubFacState) => ({ ...state, pbnst: { diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx index e1454342b..b1bbffc34 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx +++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx @@ -64,7 +64,7 @@ export function PbnstMngForm({ const { fields: fcOpersField, - append, + prepend, remove, } = useFieldArray({ control: form.control, @@ -77,7 +77,7 @@ export function PbnstMngForm({ }); const plusHist = () => { - append({ + prepend({ choose: false, pbnstRuseFcltFk: form.getValues(`items.${indexMng}.pbnstRuseFcltPk`) ?? "", @@ -310,42 +310,43 @@ export function PbnstMngForm({
+ {/*
*/} +
+ 재이용시설 운영정보 + {formType === "sttn" ? ( + <> + ) : ( +
+ + +
+ )} +
-
- 재이용시설 운영정보 - {formType === "sttn" ? ( - <> - ) : ( -
- - -
- )} -
{ - return { - ...item, - readonly: true, - }; - }) + return { + ...item, + readonly: true, + }; + }) : pbnst.pbnstMngUpHeadList } upHeadList={pbnst.pbnstMngNm} @@ -356,7 +357,7 @@ export function PbnstMngForm({ indexMng={indexMng} form={form} formNm={"fcOpers"} - // ref={ref} + // ref={ref} >
diff --git a/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx b/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx index 7333f6091..bc3a6a74d 100644 --- a/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx +++ b/apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx @@ -13,7 +13,7 @@ import { } from "@/components/lib/func/commom"; import { DatePicker, FormUi } from "@common/business_components"; import { Form, FormField, SelectBox } from "@common/business_components/ui"; -import { Button, Checkbox, Input, Label } from "@common/components/ui"; +import { Button, Checkbox, Input, Label, ScrollArea } from "@common/components/ui"; import { zodResolver } from "@hookform/resolvers/zod"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; @@ -158,6 +158,7 @@ export default function RainRegForm({ )}
+ {isModal && rainForm != undefined ? : <>} {isModal ? (

@@ -583,6 +584,7 @@ export default function RainRegForm({ /> + diff --git a/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx index c534c38af..25e5ef976 100644 --- a/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx +++ b/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx @@ -114,7 +114,7 @@ export function BdstReg({ moType,setIsModal,isModal }: BdstReg > {" "} - + setSearchTxt(e.target.value)}/> @@ -142,7 +142,7 @@ export function BdstReg({ moType,setIsModal,isModal }: BdstReg
- + {/* */}
{ moType === 'RNB'? @@ -152,7 +152,7 @@ export function BdstReg({ moType,setIsModal,isModal }: BdstReg }
- + {/* */} ); diff --git a/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx b/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx index 6f4832c68..e746ab1f5 100644 --- a/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx +++ b/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx @@ -76,20 +76,20 @@ const RuseMngTableForm = React.forwardRef( {tableData.map((item, i) => ( - + {headList.map((head, j) => ( {}} + onClick={() => { }} > = 0 && - typeof indexBiz === "number" && - indexBiz >= 0 + indexMng >= 0 && + typeof indexBiz === "number" && + indexBiz >= 0 ? `items.${indexMng}.fcBizs.${indexBiz}.${formNm}.${i}.${head.id}` : typeof indexMng === "number" && indexMng >= 0 ? `items.${indexMng}.${formNm}.${i}.${head.id}` @@ -134,7 +134,7 @@ const RuseMngTableForm = React.forwardRef( } }} readOnly={head.readonly ? true : false} - // Disabled prop removed as SelectBox does not support it + // Disabled prop removed as SelectBox does not support it > ) : head.type === "date" ? (