diff --git a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
index f689eb745..da0b7871d 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" });
@@ -307,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,
@@ -315,18 +332,19 @@ 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,
});
+ barData.sort((a, b) => parseInt(a.label) - parseInt(b.label));
setBarData(barData);
setChartData(dnData);
setDnInUsage(dnInData);
@@ -408,15 +426,7 @@ export default function PbnstPrfmncSttn() {
chartData7: {
label: '기타',
color: "blue",
- },
- chartData8: {
- label: '청소화장실용수',
- color: "magenta",
- },
- chartData9: {
- label: '세척살수용수',
- color: "skyblue",
- },
+ }
} satisfies ChartConfig;
setLnInChartConfig(newChartConfig);
}
@@ -427,26 +437,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",
},
@@ -472,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]);
@@ -615,7 +639,7 @@ export default function PbnstPrfmncSttn() {
장내·외 월별 하수재이용실적 현황
-
+
@@ -627,25 +651,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) {
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" ? (
{
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) => (
+
+ ))}
+
+ );
};
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) => {