701 lines
32 KiB
TypeScript
701 lines
32 KiB
TypeScript
"use client";
|
|
|
|
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 { excelPrfmncSttnParsing } from "@/app/store/prfmncSttn/pbnstPrfmncSttn/excel";
|
|
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 { useCallback, useEffect, useRef, useState } from "react";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
import { headMakeprfmnc } from "../../prfmncReg/chkgdnReg/TableHead";
|
|
import { InputTableBody } from "@/components/lib/func/TableData";
|
|
|
|
export default function PbnstPrfmncSttn() {
|
|
const {
|
|
code,
|
|
tableHeadMaker,
|
|
pbnstPrfmncSttn,
|
|
pbnstPrfmncInit,
|
|
pbnstPrfmncSearch,
|
|
prfmnc,
|
|
pbnstSttn,
|
|
pbnNmSearch
|
|
} = useWrStore((state) => state);
|
|
const { monthHeadList } = prfmnc
|
|
const { pbnstPrfHeadList, prfmncRes, rawData, selectYearList } = pbnstPrfmncSttn;
|
|
const [isChHead, setIsChHead] = useState(false);
|
|
const [fromDate, setFromDate] = useState<string>(String(new Date().getFullYear()));
|
|
const [toDate, setToDate] = useState<string>(String(new Date().getFullYear()));
|
|
const [year, setYear] = useState<string>(String(new Date().getFullYear()));
|
|
const [bdstTable, setbdstTable] = useState<FcPrfType[]>();
|
|
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(
|
|
excelData,
|
|
"하수재이용실적 현황",
|
|
"sample_pbnstPrfmncSttn.xlsx",
|
|
"A1:N1",
|
|
2
|
|
);
|
|
}, [excelData]);
|
|
const [chartConfig, setChartConfig] = useState<ChartConfig>({});
|
|
const [chartData, setChartData] = useState<dnChartForm[]>([]);
|
|
const [dnInUsage, setDnInUsage] = useState<dnChartForm[]>([]);
|
|
const [dnInChartConfig, setDnInChartConfig] = useState<ChartConfig>({});
|
|
const [dnOutUsage, setDnOutUsage] = useState<dnChartForm[]>([]);
|
|
const [dnOutChartConfig, setDnOutChartConfig] = useState<ChartConfig>({});
|
|
const [barData, setBarData] = useState<barChartForm[]>([]);
|
|
const [barChartConfig, setBarChartConfig] = useState<ChartConfig>({});
|
|
const [prfData, setPrfData] = useState<any[]>();
|
|
const [lnInChartConfig, setLnInChartConfig] = useState<ChartConfig>({});
|
|
const [lnOutChartConfig, setLnOutChartConfig] = useState<ChartConfig>({});
|
|
const [inLineData, setInLineData] = useState<{
|
|
chartData1: lineChartDataProps[];
|
|
chartData2: lineChartDataProps[];
|
|
chartData3: lineChartDataProps[];
|
|
chartData4: lineChartDataProps[];
|
|
chartData5: lineChartDataProps[];
|
|
chartData6: lineChartDataProps[];
|
|
chartData7: lineChartDataProps[];
|
|
}>();
|
|
const [outLineData, setOutLineData] = useState<{
|
|
chartData1: lineChartDataProps[];
|
|
chartData2: lineChartDataProps[];
|
|
chartData3: lineChartDataProps[];
|
|
chartData4: lineChartDataProps[];
|
|
chartData5: lineChartDataProps[];
|
|
chartData6: lineChartDataProps[];
|
|
chartData7: lineChartDataProps[];
|
|
chartData8: lineChartDataProps[];
|
|
}>();
|
|
|
|
type dnChartForm = { label: string, val: number, fill?: string };
|
|
type barChartForm = { label: string, "장내용수": number, "장외용수": number };
|
|
type lineChartDataProps = { label: string, val: number, color: string };
|
|
|
|
const prfTableData = (prfList: PrfType[], year: string) => {
|
|
const inUsageData = structuredClone(initValInUsage).map(row => ({
|
|
...row,
|
|
구분: "장내용수",
|
|
}));
|
|
const outUsageData = structuredClone(initValOutUsage).map(row => ({
|
|
...row,
|
|
구분: "장외용수",
|
|
}));
|
|
const inSubtotal = { ...structuredClone(subTotalObj), 구분: "장내용수" };
|
|
const outSubtotal = { ...structuredClone(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 } = structuredClone(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);
|
|
setExcelData(excelPrfmncSttnParsing(prfData ?? []))
|
|
} else {
|
|
setPrfData([]);
|
|
}
|
|
}
|
|
|
|
const [chartId, setChartId] = useState<string>();
|
|
useEffect(() => {
|
|
// 누적 변수 초기화
|
|
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) {
|
|
prfTableData([], year)
|
|
rawData.forEach((item) => {
|
|
// 실적 테이블 데이터
|
|
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;
|
|
|
|
// 월별 합계
|
|
inUsageSum =
|
|
element.wshwtr
|
|
+ element.coolUswtr
|
|
+ element.cleanUswtr
|
|
+ element.drwtUswtr
|
|
+ element.dltnUswtr
|
|
+ element.ithlRswtr
|
|
+ element.ithlEtcUswtr
|
|
outUsageSum =
|
|
element.cleanToilUswtr
|
|
+ element.resn
|
|
+ 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" });
|
|
});
|
|
}
|
|
});
|
|
|
|
let dnTotalIn = 0;
|
|
let dnTotalOut = 0;
|
|
inUsageArr.forEach((item) => {
|
|
dnTotalIn += item
|
|
})
|
|
outUsageArr.forEach((item) => {
|
|
dnTotalOut += item
|
|
})
|
|
|
|
// 도넛차트 데이터
|
|
dnData.push({ label: "장내용수", val: dnTotalIn, fill: "#8DD8FF" });
|
|
dnData.push({ label: "장외용수", val: dnTotalOut, fill: "#FFF085" });
|
|
|
|
// 장내용수 도넛
|
|
dnInData.push({ label: "세척수", val: wshwtr, fill: "#F7CFD8" });
|
|
dnInData.push({ label: "냉각수", val: coolUswtr, fill: "#F4F8D3" });
|
|
dnInData.push({ label: "청소수", val: cleanUswtr, fill: "#A6D6D6" });
|
|
dnInData.push({ label: "식수대", val: drwtUswtr, fill: "#8E7DBE" });
|
|
dnInData.push({ label: "희석용수", val: dltnUswtr, fill: "#FF8383" });
|
|
dnInData.push({ label: "중수도", val: ithlRswtr, fill: "#FFF574" });
|
|
dnInData.push({ label: "기타", val: ithlEtcUswtr, fill: "#A1D6CB" });
|
|
|
|
// 장외용수 도넛
|
|
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" });
|
|
dnOutData.push({ label: "농업용수", val: farmUswtr, fill: "#A6AEBF" });
|
|
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,
|
|
chartData2: coolUswtrData,
|
|
chartData3: cleanUswtrData,
|
|
chartData4: drwtUswtrData,
|
|
chartData5: dltnUswtrData,
|
|
chartData6: ithlRswtrData,
|
|
chartData7: ithlEtcUswtrData
|
|
});
|
|
setOutLineData({
|
|
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);
|
|
setDnOutUsage(dnOutData);
|
|
}
|
|
}, [rawData, year, chartId]);
|
|
|
|
useEffect(() => {
|
|
const newChartConfig = chartData.reduce((config, element) => {
|
|
config[element.label] = {
|
|
label: element.label,
|
|
fill: element.fill
|
|
};
|
|
return config;
|
|
}, {} as Record<string, { label: string; fill?: string }>) satisfies ChartConfig;
|
|
setChartConfig(newChartConfig);
|
|
}, [chartData]);
|
|
|
|
useEffect(() => {
|
|
const newChartConfig = dnInUsage.reduce((config, element) => {
|
|
config[element.label] = {
|
|
label: element.label,
|
|
fill: element.fill
|
|
};
|
|
return config;
|
|
}, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
|
|
setDnInChartConfig(newChartConfig);
|
|
}, [dnInUsage]);
|
|
|
|
useEffect(() => {
|
|
const newChartConfig = dnOutUsage.reduce((config, element) => {
|
|
config[element.label] = {
|
|
label: element.label,
|
|
fill: element.fill
|
|
};
|
|
return config;
|
|
}, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
|
|
setDnOutChartConfig(newChartConfig);
|
|
}, [dnOutUsage]);
|
|
|
|
useEffect(() => {
|
|
const newChartConfig = barData.reduce((config, element) => {
|
|
config[element.label] = {
|
|
label: element.label,
|
|
};
|
|
return config;
|
|
|
|
}, {} as Record<string, { label: string }>) satisfies ChartConfig;
|
|
setBarChartConfig(newChartConfig);
|
|
}, [barData]);
|
|
|
|
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",
|
|
}
|
|
} satisfies ChartConfig;
|
|
setLnInChartConfig(newChartConfig);
|
|
}
|
|
}, [inLineData]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (outLineData?.chartData1) {
|
|
const newChartConfig = {
|
|
chartData1: {
|
|
label: '청소화장실용수',
|
|
color: "red",
|
|
},
|
|
chartData2: {
|
|
label: '세척살수용수',
|
|
color: "pink",
|
|
},
|
|
chartData3: {
|
|
label: '조경용수',
|
|
color: "gray",
|
|
},
|
|
chartData4: {
|
|
label: '친수용수',
|
|
color: "orange",
|
|
},
|
|
chartData5: {
|
|
label: '지하수충전',
|
|
color: "yellow",
|
|
},
|
|
chartData6: {
|
|
label: '농업용수',
|
|
color: "green",
|
|
},
|
|
chartData7: {
|
|
label: '하천등유지용수',
|
|
color: "blue",
|
|
},
|
|
chartData8: {
|
|
label: '공업용수',
|
|
color: "purple",
|
|
},
|
|
} satisfies ChartConfig;
|
|
setLnOutChartConfig(newChartConfig);
|
|
}
|
|
}, [outLineData]);
|
|
|
|
useEffect(() => {
|
|
const returnType: ReturnType = {
|
|
sidoValue: "0",
|
|
sigunValue: "0",
|
|
partValue: "A",
|
|
regionValue: "0",
|
|
unitWaterShedValue: "",
|
|
middleRegionValue: "",
|
|
envPartValue: "",
|
|
sidoText: "",
|
|
sigunText: ""
|
|
}
|
|
tableHeadMaker(Number(searchYear), Number(searchYear));
|
|
pbnstPrfmncSearch(returnType, "", searchYear, searchYear)
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setbdstTable(prfmncRes.map((e, idx) => {
|
|
|
|
return ({
|
|
...e,
|
|
number: String(idx + 1)
|
|
})
|
|
}))
|
|
if (prfmncRes?.[0]?.pbnstRuseFcltPk) setChartId(prfmncRes[0].pbnstRuseFcltPk)
|
|
}, [prfmncRes]);
|
|
|
|
|
|
|
|
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 (
|
|
<>
|
|
<ContentsDiv>
|
|
<div className="grid grid-cols-4 gap-4 ">
|
|
<div className="col-span-4">
|
|
<Title title={"하수재이용실적 현황"} />
|
|
<SearchBaseForm
|
|
selectSidoData={code.cityCd}
|
|
selectSigunData={code.sggCd}
|
|
selectRegionData={code.rvbsnCd}
|
|
selectUnitWaterShedData={code.lgbsnCd}
|
|
selectMiddleRegionData={code.mdmbsnCd}
|
|
selectEnvPartData={code.lclgvrnmntCd}
|
|
rightChildren={<Button
|
|
className={btnClass}
|
|
onClick={() => {
|
|
setIsChHead(true);
|
|
}}
|
|
>
|
|
조회항목설정
|
|
</Button>}
|
|
leftChildren={<div className="col-span-5">
|
|
<div className="flex flex-row">
|
|
<div className="flex flex-row items-center">
|
|
<Label className="text-xl text-gray-600">하수 재이용년도</Label>
|
|
<SelectBox
|
|
className="h-full text-2xl"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={yearOptions}
|
|
value={fromDate}
|
|
onSelectValue={(val: string | number) => setFromDate(String(val))} />
|
|
<SelectBox
|
|
className="h-full text-2xl"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={yearOptions}
|
|
value={toDate}
|
|
onSelectValue={(val: string | number) => setToDate(String(val))} />
|
|
</div>
|
|
<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="재이용시설명"
|
|
selectClass={""}
|
|
selectArray={[]}
|
|
value={""}
|
|
onSelectValue={() => { }} /> */}
|
|
</div>
|
|
</div>}
|
|
queryClick={function (returnType: ReturnType): void {
|
|
pbnstPrfmncSearch(returnType, pbnRuseNm ?? "", fromDate, toDate);
|
|
if (fromDate && toDate) {
|
|
const fromNum = Number(fromDate);
|
|
const toNum = Number(toDate);
|
|
if (fromNum > toNum) {
|
|
toast.error("시작년도가 종료년도 이후로 설정할 수 없습니다.");
|
|
} else {
|
|
if (toNum - fromNum > 5) {
|
|
toast.error("최대 5년까지 선택 가능합니다.");
|
|
} else {
|
|
tableHeadMaker(fromNum, toNum);
|
|
|
|
}
|
|
}
|
|
}
|
|
}}
|
|
excelClick={excelClick}
|
|
initClick={function (): void { }}
|
|
btnClass={btnClass}
|
|
ref={ref} isAdmin={false} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-6 gap-4 ">
|
|
<div className="col-span-6">
|
|
<ListDiv>
|
|
<UiTable
|
|
headName={[]}
|
|
tableData={bdstTable || []}
|
|
headlist={pbnstPrfHeadList}
|
|
pageSize={20}
|
|
total={10000}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
cellClick(index ?? undefined, headId);
|
|
}}
|
|
onPageChange={() => { }
|
|
}
|
|
index={0}
|
|
/>
|
|
|
|
<hr />
|
|
<h3 className="mt-4 ml-2 text-2xl font-medium text-label">하수재이용실적 상세현황</h3>
|
|
|
|
<SelectBox
|
|
className="h-full w-1/12 text-2xl"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={selectYearList}
|
|
value={year}
|
|
onSelectValue={(val: string | number) => setYear(String(val))} />
|
|
<h1 className="">장내·외 용도별 하수재이용실적 현황(계)</h1>
|
|
|
|
<div className="flex">
|
|
<div className="w-1/3">
|
|
<MainChart chartConfig={chartConfig} chartData={chartData} chartTitle={"장내·외 용수 총 실적"} chartForm={CHART_FORM.DN} />
|
|
</div>
|
|
<div className="w-1/3">
|
|
<MainChart chartConfig={dnInChartConfig} chartData={dnInUsage} chartTitle={"장내용수 실적"} chartForm={CHART_FORM.DN} />
|
|
</div>
|
|
<div className="w-1/3">
|
|
<MainChart chartConfig={dnOutChartConfig} chartData={dnOutUsage} chartTitle={"장외용수 실적"} chartForm={CHART_FORM.DN} />
|
|
</div>
|
|
</div>
|
|
<h1 className="">장내·외 월별 하수재이용실적 현황</h1>
|
|
<div className="flex">
|
|
<div className="w-1/3">
|
|
<MainChart chartConfig={barChartConfig} chartData={barData} chartTitle={"월별 장내·외 용수 총 실적"} chartForm={CHART_FORM.DOUBLEBAR} showLegend={true} />
|
|
</div>
|
|
<div className="w-1/3">
|
|
<MainChart chartConfig={lnInChartConfig} chartData={inLineData} chartTitle={"월별 장내 용수 실적"} chartForm={CHART_FORM.LINE} />
|
|
</div>
|
|
<div className="w-1/3">
|
|
<MainChart chartConfig={lnOutChartConfig} chartData={outLineData} chartTitle={"월별 장외 용수 총 실적"} chartForm={CHART_FORM.LINE} />
|
|
</div>
|
|
</div>
|
|
<h1 className="">하수재이용실적 현황</h1>
|
|
<ListDiv className="col-span-8 pr-6 ">
|
|
{/* <ScrollArea className="h-[60vh]"> */}
|
|
{/* <div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">
|
|
{"하수처리수재이용 실적(m3) 등록결과"}
|
|
</h3>
|
|
</div> */}
|
|
|
|
<UiTable
|
|
headName={undefined}
|
|
tableData={prfData || []}
|
|
headlist={monthHeadList}
|
|
pageSize={0}
|
|
total={0}
|
|
cellClick={undefined}
|
|
onPageChange={function (page: number): void {
|
|
throw new Error("Function not implemented.");
|
|
}}>
|
|
</UiTable>
|
|
|
|
{/* <ListDiv className="col-span-8 pr-6 ">
|
|
<ScrollArea className="h-[60vh]">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">
|
|
{"하수처리수재이용 실적(m3) 등록결과"}
|
|
</h3>
|
|
</div>
|
|
|
|
<Table variant="secondary">
|
|
<TableHeader className="font-bold">
|
|
{headMakeprfmnc(monthHeadList, [])}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{InputTableBody(prfData ?? [], monthHeadList, setPrfData)}
|
|
</TableBody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</ListDiv> */}
|
|
{/* </ScrollArea> */}
|
|
</ListDiv>
|
|
|
|
</ListDiv>
|
|
</div>
|
|
</div>
|
|
</ContentsDiv>
|
|
<Toaster position="top-center" />
|
|
</>
|
|
)
|
|
}
|