723 lines
34 KiB
TypeScript
723 lines
34 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 { InputTableBody } from "@/components/lib/func/TableData";
|
|
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 { Label, Table, TableBody, TableHeader } from "@common/components/ui";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import toast, { Toaster } from "react-hot-toast";
|
|
import { useTranslation } from "react-i18next";
|
|
import { headMakeprfmnc } from "../../prfmncReg/chkgdnReg/TableHead";
|
|
|
|
export default function PbnstPrfmncSttn() {
|
|
const {
|
|
code,
|
|
tableHeadMaker,
|
|
pbnstPrfmncSttn,
|
|
// pbnstPrfmncInit,
|
|
pbnstPrfmncSearch,
|
|
getFlctsSttn,
|
|
prfmnc,
|
|
pbnNmSearch
|
|
} = useWrStore((state) => state);
|
|
const { monthHeadList } = prfmnc
|
|
const { pbnstPrfHeadList, prfmncResCount, prfmncRes, rawData, selectYearList, fclts } = 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 { t } = useTranslation('base');
|
|
const searchYear = String(new Date().getFullYear());
|
|
const [excelData, setExcelData] = useState<any[]>([]);
|
|
const [pageNation, setPageNation] = useState(1);
|
|
const [resetPage, isResetPage] = useState(false);
|
|
|
|
const excelClick = useCallback(() => {
|
|
if (!excelData || excelData.length === 0) {
|
|
toast.error(t('excelDownErrMsg'));
|
|
return;
|
|
}
|
|
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, color?: 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) {
|
|
|
|
prfFilter.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(tableData ?? []))
|
|
} else {
|
|
setExcelData(excelPrfmncSttnParsing([]))
|
|
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;
|
|
|
|
const 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.find((e) => e.ym.slice(0, 4) === year) && item.prfList?.[0]?.pbnstRuseFcltId === chartId) {
|
|
prfTableData(item.prfList, year);
|
|
}
|
|
|
|
item.prfList.filter((e) => e.ym.slice(0, 4) === year && e.pbnstRuseFcltId === 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, color: "#8DD8FF" });
|
|
dnData.push({ label: "장외용수", val: dnTotalOut, color: "#FFF085" });
|
|
|
|
// 장내용수 도넛
|
|
dnInData.push({ label: "세척수", val: wshwtr, color: "#F7CFD8" });
|
|
dnInData.push({ label: "냉각수", val: coolUswtr, color: "#F4F8D3" });
|
|
dnInData.push({ label: "청소수", val: cleanUswtr, color: "#A6D6D6" });
|
|
dnInData.push({ label: "식수대", val: drwtUswtr, color: "#8E7DBE" });
|
|
dnInData.push({ label: "희석용수", val: dltnUswtr, color: "#FF8383" });
|
|
dnInData.push({ label: "중수도", val: ithlRswtr, color: "#FFF574" });
|
|
dnInData.push({ label: "기타", val: ithlEtcUswtr, color: "#A1D6CB" });
|
|
|
|
// 장외용수 도넛
|
|
dnOutData.push({ label: "청소화장실용수", val: cleanToilUswtr, color: "#A19AD3" });
|
|
dnOutData.push({ label: "세척살수용수", val: resn, color: "#B1F0F7" });
|
|
dnOutData.push({ label: "조경용수", val: lndwtr, color: "#81BFDA" });
|
|
dnOutData.push({ label: "친수용수", val: hydUswtr, color: "#F5F0CD" });
|
|
dnOutData.push({ label: "지하수충전", val: ugwtChr, color: "#FADA7A" });
|
|
dnOutData.push({ label: "농업용수", val: farmUswtr, color: "#A6AEBF" });
|
|
dnOutData.push({ label: "하천등유지용수", val: rvrKeepUswtr, color: "#C5D3E8" });
|
|
dnOutData.push({ label: "공업용수", val: indstUswtr, color: "#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,
|
|
color: element.color
|
|
};
|
|
return config;
|
|
}, {} as Record<string, { label: string; color?: string }>) satisfies ChartConfig;
|
|
setChartConfig(newChartConfig);
|
|
}, [chartData]);
|
|
|
|
useEffect(() => {
|
|
const newChartConfig = dnInUsage.reduce((config, element) => {
|
|
config[element.label] = {
|
|
label: element.label,
|
|
color: element.color ?? "gray"
|
|
};
|
|
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,
|
|
color: element.color ?? "gray"
|
|
};
|
|
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));
|
|
getFlctsSttn();
|
|
pbnstPrfmncSearch(1, returnType, "", searchYear, searchYear, fclts)
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
pbnstPrfmncSearch(pageNation, ref.current, pbnRuseNm, fromDate, toDate, pbnstPrfmncSttn.fclts);
|
|
isResetPage(false)
|
|
}, [fclts, pageNation]);
|
|
|
|
useEffect(() => {
|
|
const tableData = prfmncRes.map((e, idx) => {
|
|
|
|
return ({
|
|
...e,
|
|
number: String(idx + 1)
|
|
})
|
|
})
|
|
setbdstTable(tableData)
|
|
|
|
if (prfmncRes?.[0]?.pbnstRuseFcltId) setChartId(prfmncRes[0].pbnstRuseFcltId)
|
|
}, [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].pbnstRuseFcltId)
|
|
}
|
|
}
|
|
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={undefined}
|
|
rightClassName="ml-auto mr-6 flex items-center space-x-1"
|
|
leftClassName="flex gap-5 w-9/12 m-4"
|
|
leftSelectClassName="w-1/6"
|
|
buttonOrder={["query", "init", "excel"]}
|
|
leftChildren={<div className="col-span-5">
|
|
<div className="flex flex-row">
|
|
{/* <div className="flex flex-row items-center"> */}
|
|
<div className="flex flex-row items-center gap-x-4 flex-nowrap">
|
|
{/* <Label className="w-full text-xl text-gray-600"> */}
|
|
<Label className="flex-none whitespace-nowrap text-xl text-gray-600">
|
|
하수 재이용년도</Label>
|
|
<SelectBox
|
|
// className="w-full h-full text-2xl mx-4"
|
|
className="flex-none w-32 h-full text-2xl"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={yearOptions}
|
|
value={fromDate}
|
|
onSelectValue={(val: string | number) => setFromDate(String(val))} />
|
|
<span> ~</span>
|
|
<SelectBox
|
|
// className="w-full h-full text-2xl mx-4"
|
|
className="flex-none w-32 h-full text-2xl mr-4"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={yearOptions}
|
|
value={toDate}
|
|
onSelectValue={(val: string | number) => setToDate(String(val))} />
|
|
<Label className="w-28 mt-2 text-xl">
|
|
{"시설명"}
|
|
</Label>
|
|
<SearchInput
|
|
className={" h-full text-2xl"}
|
|
label={""}
|
|
textValue={pbnRuseNm || ""}
|
|
setText={setPbnRuseNm}
|
|
/>
|
|
</div>
|
|
{/* <SelectBox
|
|
className="h-full text-2xl"
|
|
label="재이용시설명"
|
|
selectClass={""}
|
|
selectArray={[]}
|
|
value={""}
|
|
onSelectValue={() => { }} /> */}
|
|
</div>
|
|
</div>}
|
|
queryClick={function (returnType: ReturnType): void {
|
|
pbnstPrfmncSearch(1, returnType, pbnRuseNm ?? "", fromDate, toDate, fclts);
|
|
if (fromDate && toDate) {
|
|
const fromNum = Number(fromDate);
|
|
const toNum = Number(toDate);
|
|
if (fromNum > toNum) {
|
|
toast.error("시작년도가 종료년도 이후로 설정할 수 없습니다.");
|
|
} else {
|
|
if (toNum - fromNum > 4) {
|
|
toast.error("최대 5년까지 선택 가능합니다.");
|
|
} else {
|
|
tableHeadMaker(fromNum, toNum);
|
|
|
|
}
|
|
}
|
|
}
|
|
isResetPage(true)
|
|
}}
|
|
excelClick={excelClick}
|
|
initClick={function (): void {
|
|
setPbnRuseNm("");
|
|
setFromDate(String(new Date().getFullYear()));
|
|
setToDate(String(new Date().getFullYear()))
|
|
}}
|
|
btnClass={btnClass}
|
|
ref={ref} isAdmin={false} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-6 gap-4 ">
|
|
<div className="col-span-6">
|
|
<ListDiv>
|
|
<UiTable
|
|
headName={undefined}
|
|
tableData={bdstTable || []}
|
|
headlist={pbnstPrfHeadList}
|
|
pageSize={5}
|
|
total={prfmncResCount}
|
|
cellClick={(index: number | undefined, headId: string) => {
|
|
cellClick(index ?? undefined, headId);
|
|
}}
|
|
onPageChange={setPageNation}
|
|
index={0}
|
|
resetPageNo={resetPage}
|
|
/>
|
|
|
|
<hr />
|
|
<h3 className="mt-4 ml-2 text-2xl font-medium text-label">하수재이용실적 상세현황</h3>
|
|
|
|
<SelectBox
|
|
className="h-full w-1/12 text-2xl mt-2"
|
|
label=""
|
|
selectClass={""}
|
|
selectArray={selectYearList}
|
|
value={year}
|
|
onSelectValue={(val: string | number) => setYear(String(val))} />
|
|
<h1 className="my-2">장내·외 용도별 하수재이용실적 현황(계)</h1>
|
|
|
|
<div className="flex">
|
|
<div className="w-1/3">
|
|
{chartData.find((e) => e.val > 0) ?
|
|
<MainChart chartConfig={chartConfig} chartData={chartData} chartTitle={"장내·외 용수 총 실적(m³)"} chartForm={CHART_FORM.DN} />
|
|
:
|
|
<div className="flex items-center justify-center text-2xl">
|
|
조회된 장내·외 용수 총 실적(m³) 데이터가 없습니다.
|
|
</div>}
|
|
</div>
|
|
<div className="w-1/3">
|
|
{dnInUsage.find((e) => e.val > 0) ?
|
|
<MainChart chartConfig={dnInChartConfig} chartData={dnInUsage} chartTitle={"장내용수 실적(m³)"} chartForm={CHART_FORM.DN} />
|
|
:
|
|
<div className="flex items-center justify-center text-2xl">
|
|
조회된 장내용수 실적(m³) 데이터가 없습니다.
|
|
</div>}
|
|
</div>
|
|
<div className="w-1/3">
|
|
{dnOutUsage.find((e) => e.val > 0) ?
|
|
<MainChart chartConfig={dnOutChartConfig} chartData={dnOutUsage} chartTitle={"장외용수 실적(m³)"} chartForm={CHART_FORM.DN} />
|
|
:
|
|
<div className="flex items-center justify-center text-2xl">
|
|
조회된 장외용수 실적(m³) 데이터가 없습니다.
|
|
</div>}
|
|
</div>
|
|
|
|
</div>
|
|
<h1 className="">장내·외 월별 하수재이용실적 현황</h1>
|
|
<div className="flex">
|
|
<div className="w-1/3">
|
|
{barData.length > 0 ?
|
|
<MainChart chartConfig={barChartConfig} chartData={barData} chartTitle={"월별 장내·외 용수 총 실적(m³)"} chartForm={CHART_FORM.DOUBLEBAR} showLegend={true} />
|
|
:
|
|
<div className="flex items-center justify-center text-2xl">
|
|
조회된 월별 장내·외 용수 총 실적(m³) 데이터가 없습니다.
|
|
</div>}
|
|
</div>
|
|
<div className="w-1/3">
|
|
{inLineData && Object.values(inLineData).every(arr => Array.isArray(arr) && arr.length === 0) ?
|
|
<div className="flex items-center justify-center text-2xl">
|
|
조회된 월별 장내 용수 실적(m³) 데이터가 없습니다.
|
|
</div>
|
|
:
|
|
<MainChart chartConfig={lnInChartConfig} chartData={inLineData} chartTitle={"월별 장내 용수 실적(m³)"} chartForm={CHART_FORM.LINE} />
|
|
}
|
|
</div>
|
|
<div className="w-1/3">
|
|
{outLineData && Object.values(outLineData).every(arr => Array.isArray(arr) && arr.length === 0) ?
|
|
<div className="flex items-center justify-center text-2xl">
|
|
조회된 월별 장외 용수 총 실적(m³) 데이터가 없습니다.
|
|
</div>
|
|
:
|
|
<MainChart chartConfig={lnOutChartConfig} chartData={outLineData} chartTitle={"월별 장외 용수 총 실적(m³)"} chartForm={CHART_FORM.LINE} />
|
|
}</div>
|
|
</div>
|
|
<h1 className="">하수재이용실적 현황 (단위: m³)</h1>
|
|
<ListDiv className="col-span-8 pr-6 ">
|
|
<ScrollArea className={prfData && prfData.length > 0 ? "h-[60vh]" : ""}>
|
|
<Table variant="secondary">
|
|
<TableHeader className="font-bold">
|
|
{headMakeprfmnc(monthHeadList, [])}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{/* {InputTableBody(prfData ?? [], monthHeadList, setPrfData)} */}
|
|
{InputTableBody(prfData ?? [], monthHeadList, setPrfData, false)}
|
|
</TableBody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</ListDiv>
|
|
</ListDiv>
|
|
</div>
|
|
</div>
|
|
</ContentsDiv>
|
|
<Toaster position="top-center" />
|
|
</>
|
|
)
|
|
}
|