ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

빗물 통계 수정

Browse Source
This commit is contained in:
leedj312
2025-07-22 20:55:00 +09:00
parent b4e3d922b1
commit 3b6e8ceedb
2 changed files with 270 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/stats/rainStat/page.tsx
+75 -65
View File
@@ -16,50 +16,44 @@ import {
import ListDiv from "@common/business_components/ui/list_div";
import { Button } from "@common/components/ui";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
export default function RainStat() {
const { code, rainStat, searchRainStatList } = useWrStore((state) => state);
const { rainStatList, excelList, rainDetailList } = rainStat;
const { rainStatList, rainDetailList } = rainStat;
const [searchYear, setSearchYear] = useState<string>(
String(new Date().getFullYear())
);
const [exData, setExData] = useState<Array<Record<string, string | number>>>();
//const [exData, setExData] = useState<Array<Record<string, string | number>>>();
const [bdstTable, setBdstTable] = useState<RainStatProps[]>();
const { t } = useTranslation('base');
useEffect(() => {
searchRainStatList(searchYear);
}, [code.cityCd, code.sggCd, searchRainStatList])
searchRainStatList(searchYear ,code.cityCd);
}, [code.cityCd, searchRainStatList])
const excelDetailDownLoad = () => {
const sidoList = new Set<string>();
const sidoDataMap = new Map<string, (string | number)[]>(); // 시도별 데이터를 저장할 Map
const sidoDetailMap = new Map<string, (string | number)[][]>(); // 시도별 상세 데이터를 저장할 Map
// 먼저 시도별 상세 데이터를 그룹화
rainDetailList.forEach((item: RainStatProps[]) => {
// 복사된 배열을 사용
const transformedRainDetailList = rainDetailList.map((originItem: RainStatProps[]) => {
const item = [...originItem]; // 원본 복사
const sidoVal = item.at(0)?.toString().trim();
const sigunVal = item.at(1)?.toString().trim();
let sidoText = '';
let sigunText = '';
const sido = code.cityCd.find((city) => city.val === sidoVal);
const sigun = code.sggCd.find((sgg) => sgg.val === sigunVal);
sidoText = sido?.text || '';
sigunText = sigun?.text || '';
const sidoText = sido?.text || '';
const sigunText = sigun?.text || '';
// 시도, 시군구 코드를 텍스트로 변환하여 데이터에 할당
if (item.length > 0) {
item[0] = sidoText as unknown as RainStatProps;
}
if (item.length > 1) {
item[1] = sigunText as unknown as RainStatProps;
}
if (item.length > 2) {
item[2] = sidoText + ' ' + sigunText as unknown as RainStatProps;
}
if (item.length > 0) item[0] = sidoText as unknown as RainStatProps;
if (item.length > 1) item[1] = sigunText as unknown as RainStatProps;
if (item.length > 2) item[2] = `${sidoText} ${sigunText}` as unknown as RainStatProps;
// 시도별 상세 데이터 수집
if (sidoText) {
@@ -72,53 +66,40 @@ export default function RainStat() {
// 시도별 합계 데이터 수집
if (sidoText && !sidoList.has(sidoText)) {
sidoList.add(sidoText);
// 시도별 초기 데이터 구조 생성 (예: [시도명, 0, 0, 0, ...])
const initialData: (string | number)[] = [sidoText];
// 데이터의 나머지 컬럼들을 0으로 초기화 (실제 컬럼 수에 맞게 조정 필요)
for (let i = 1; i < item.length; i++) {
initialData.push(0);
}
sidoDataMap.set(sidoText, initialData);
}
return item;
});
// 시도별 합계 계산
rainDetailList.forEach((item: RainStatProps[]) => {
// 이후 합계 계산에서도 transformedRainDetailList 사용
transformedRainDetailList.forEach((item: RainStatProps[]) => {
const sidoText = item[0]?.toString();
if (sidoText && sidoDataMap.has(sidoText)) {
const sidoData = sidoDataMap.get(sidoText)!;
// 각 컬럼의 값을 합계에 더하기 (1번 인덱스부터 시작)
for (let i = 1; i < item.length && i < sidoData.length; i++) {
if (i == 2) {
sidoData[i] = '합계';
} else if (i == 3) {
// 해당 시도의 데이터 개수를 계산
const sidoDataCount = rainDetailList.filter((data: unknown[]) =>
const sidoDataCount = transformedRainDetailList.filter((data: unknown[]) =>
Array.isArray(data) && data.length > 0 && String(data[0]) === sidoText
).length;
sidoData[i] = sidoDataCount;
} else if (i == 4) {
sidoData[i] = '';
} else if (i == 6) {
// 법정 대상 건축물 개수 (인덱스 6이 'Y'인 경우)
const bumCnt = rainDetailList.filter((data: unknown[]) =>
const bumCnt = transformedRainDetailList.filter((data: unknown[]) =>
Array.isArray(data) && data.length > 6 && String(data[0]) === sidoText
).filter((data: unknown[]) => String(data[6]) === '대상').length;
sidoData[i] = bumCnt;
} else if (i == 8) {
const value = Number(item[8]) || 0;
} else if ([8, 11, 12, 14].includes(i)) {
const value = Number(item[i]) || 0;
sidoData[i] = (Number(sidoData[i]) + value) as string | number;
} else if (i == 11) {
const value = Number(item[11]) || 0;
sidoData[i] = (Number(sidoData[i]) + value) as string | number;
} else if (i == 12) {
const value = Number(item[12]) || 0;
sidoData[i] = (Number(sidoData[i]) + value) as string | number;
} else if (i == 14) {
const value = Number(item[14]) || 0;
sidoData[i] = (Number(sidoData[i]) + value) as string | number;
}
else {
} else {
sidoData[i] = '';
}
}
@@ -144,7 +125,7 @@ export default function RainStat() {
});
const sidoSummaryList = Array.from(sidoDataMap.values());
const sidoTotalSummary = [['전체', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '', 0]];
const sidoTotalSummary = [['전국', '', '합계', 0, '', '', 0, '', '', 0, 0, 0, 0, 0, 0, '']];
sidoSummaryList.forEach((item: (string | number)[]) => {
item.forEach((value: string | number, index: number) => {
if (typeof value === 'number') {
@@ -158,31 +139,20 @@ export default function RainStat() {
// sidoSummaryList와 rainDetailList를 합쳐서 엑셀 데이터 생성
const excelData = [...sidoTotalSummary, ...sidoSummaryList, ...summaryExcelData];
console.log(' excelData ', excelData)
excelDownload(
excelData as unknown as [][],
"빗물이용시설 통계",
"sample_rainStats.xlsx",
"A1:V3",
"A1:O3",
4
);
}
const excelClick = () => {
downloadExcel({
data: (exData as unknown as JSON[]) ?? [],
fileName: "재이용통계",
sheetNameArray: ["Sheet1"],
headerRange: "A1:M1"
})
}
useEffect(() => {
const transExcel = Array.isArray(excelList) ? excelList : [excelList];
const excelData = tableData(transExcel, { code });
const tbData = Array.isArray(excelData)
? excelData
.filter((item: RainStatProps) => item.cityText !== '없음')
.map((item: RainStatProps) => {
if(bdstTable){
const tbData = bdstTable .map((item: RainStatProps) => {
return {
"시도": item.cityText,
"개소": item.tmp,
@@ -199,9 +169,47 @@ export default function RainStat() {
"연간운영비(백만원/년)": item.anlOperCst,
};
})
: [];
setExData(tbData);
}, [code, excelList])
downloadExcel({
data: (tbData as unknown as JSON[]) ?? [],
fileName: "재이용통계",
sheetNameArray: ["Sheet1"],
headerRange: "A1:M1"
})
}else{
toast.error(t('excelDownErrMsg'));
}
}
// useEffect(() => {
// if(excelList && excelList.length>0){
// console.log('excelList ', excelList)
// const transExcel = Array.isArray(excelList) ? excelList : [excelList];
// const excelData = tableData(transExcel, { code });
// const tbData = Array.isArray(excelData)
// ? excelData
// .filter((item: RainStatProps) => item.cityText !== '없음')
// .map((item: RainStatProps) => {
// return {
// "시도": item.cityText,
// "개소": item.tmp,
// "설치비(백만원)": item.instlCst,
// "저류조용량(m³/년)": item.dtfcltCpct,
// "연간사용량(m³/년)": item.wtrUsqty,
// "조경용수": item.lndwtr,
// "청소화장실용수": item.cleanToilUswtr,
// "세척살수용수": item.resn,
// "농업용수": item.farmUswtr,
// "공업용수": item.indstUswtr,
// "친수용수": item.hydUswtr,
// "기타": item.ithlEtcUswtr,
// "연간운영비(백만원/년)": item.anlOperCst,
// };
// })
// : [];
// setExData(tbData);
// }
// }, [code, excelList])
useEffect(() => {
const transData = Array.isArray(rainStatList) ? rainStatList : [rainStatList];
@@ -210,11 +218,13 @@ export default function RainStat() {
? data.map((item: RainStatProps) => {
return {
...item,
ctpvCd: item.cityText
ctpvCd: item.cityText==='전체'?'전국': item.cityText,
cityText: item.cityText==='전체'?'전국': item.cityText,
};
}).filter((item: RainStatProps) => item.cityText !== '없음')
: [];
setBdstTable(tbData);
}, [code, rainStatList]);
@@ -239,7 +249,7 @@ export default function RainStat() {
/>
</div>
<div className="flex flex-row space-x-2 items-center">
<Button className="" size={"sm"} onClick={() => { searchRainStatList(searchYear); }}>
<Button className="" size={"sm"} onClick={() => { searchRainStatList(searchYear ,code.cityCd); }}>
조회
</Button>
<Button className="" size={"sm"} onClick={() => excelClick()}>
apps/wr/app/store/stats/rainStat/index.tsx
+195 -133
View File
@@ -2,158 +2,215 @@ import { fetchType, getFetch } from "@/components/lib/api";
import type { TableUpperProps } from "../../common/type/header";
import { excelRainStat } from "./excel";
import { rainStatHeadListExport } from "./headList";
import type { SelectDataType } from "@common/business_components/ui";
export type RainStatProps = {
cityText: string
ctpvCd: string //시도
sggCd: string //시군구
areaNm: string //행정구역명
bdstNm: string //시설명
bdstUsgCd: string //건축물용도코드
daddr: string //주소
lawTrgtYn: string //법적의무대상여부
instlCmptnDt: string //설치완료일자
instlCst: number //설치비용
pntfColKnd: string //접수면종류
filtrTrtmfctYn: string //여과등처리시설유무
archArea: number //건축연면적
dtfcltCpct: number //처리용량(저류조용량)
wtrUsqty: number //연간사용량
utztnUsgCd: string //이용용도코드
anlOperCst: number //연간운영비
annRnwtQty: number //물사용량
jungsudo: number //중수도​이용량
dachae: number //대체수​이용량
lndwtr: number //조경용수
cleanToilUswtr: number //청소화장실용수
resn: number //세척살수용수
farmUswtr: number //농업용수
indstUswtr: number //공업용수
hydUswtr: number //친수용수
ithlEtcUswtr: number //기타
tmp: number //개소
guideStats: GuideStatProps[]
}
cityText: string;
ctpvCd: string; //시도
sggCd: string; //시군구
areaNm: string; //행정구역명
bdstNm: string; //시설명
bdstUsgCd: string; //건축물용도코드
daddr: string; //주소
lawTrgtYn: string; //법적의무대상여부
instlCmptnDt: string; //설치완료일자
instlCst: number; //설치비용
pntfColKnd: string; //접수면종류
filtrTrtmfctYn: string; //여과등처리시설유무
archArea: number; //건축연면적
dtfcltCpct: number; //처리용량(저류조용량)
wtrUsqty: number; //연간사용량
utztnUsgCd: string; //이용용도코드
anlOperCst: number; //연간운영비
annRnwtQty: number; //물사용량
jungsudo: number; //중수도​이용량
dachae: number; //대체수​이용량
lndwtr: number; //조경용수
cleanToilUswtr: number; //청소화장실용수
resn: number; //세척살수용수
farmUswtr: number; //농업용수
indstUswtr: number; //공업용수
hydUswtr: number; //친수용수
ithlEtcUswtr: number; //기타
tmp: number; //개소
guideStats: GuideStatProps[];
};
export type GuideStatProps = {
utztnUsgCd: string
splyUswtrUtztnQnt : number,
ruseFcltUtztnQnt: number
}
utztnUsgCd: string;
splyUswtrUtztnQnt: number;
ruseFcltUtztnQnt: number;
};
type ExcelType = {
[key: string]: string | number | undefined;
[key: string]: string | number | undefined;
};
const excelDownList: ExcelType[] = [];
const fetchRainStatList = async (year: string) => {
const res = await getFetch(fetchType.WR, `/reuseChk/rainy/stat/${year}`)
return res;
}
const res = await getFetch(fetchType.WR, `/reuseChk/rainy/stat/${year}`);
return res;
};
type rainStatActions = {
searchRainStatList: (year: string) => void
}
searchRainStatList: (year: string, city: SelectDataType[]) => void;
};
export type rainStatState = {
rainStat: {
rainStatHeadList: TableUpperProps[],
rainStatList: RainStatProps[],
excelList: ExcelType[]
rainDetailList : [][]
}
}
rainStat: {
rainStatHeadList: TableUpperProps[];
rainStatList: RainStatProps[];
excelList: ExcelType[];
rainDetailList: [][];
};
};
export type rainStatType = rainStatState & rainStatActions;
export const rainStatExport: rainStatState = {
rainStat: {
rainStatHeadList: rainStatHeadListExport,
rainStatList: [],
excelList: [],
rainDetailList : []
}
}
rainStat: {
rainStatHeadList: rainStatHeadListExport,
rainStatList: [],
excelList: [],
rainDetailList: [],
},
};
export const rainStatActionsExport = (
set: (fn: (state: rainStatState) => rainStatState) => void
set: (fn: (state: rainStatState) => rainStatState) => void
) => {
return {
searchRainStatList: async (year: string) => {
const res = await fetchRainStatList(year);
const cityArr: any[] = [];
res.forEach((item: RainStatProps) => {
return {
searchRainStatList: async (year: string, city: SelectDataType[]) => {
const res = await fetchRainStatList(year);
const cityArr: any[] = [];
let obj = cityArr.find((e) => {
return e.ctpvCd == item.ctpvCd
})
res.filter((resFilter: RainStatProps) =>
city.some((cityCd) =>
resFilter.ctpvCd?.trim() === cityCd.val.trim()
)
)
.forEach((item: RainStatProps) => {
let obj = cityArr.find((e) => {
return e.ctpvCd == item.ctpvCd;
});
if (obj) {
obj.instlCst += item.instlCst
obj.dtfcltCpct += item.dtfcltCpct
obj.wtrUsqty += item.wtrUsqty
obj.anlOperCst += item.anlOperCst
obj.tmp += 1
} else {
obj = {};
obj.ctpvCd = item.ctpvCd
obj.instlCst = item.instlCst
obj.tmp = 1
obj.dtfcltCpct = item.dtfcltCpct
obj.wtrUsqty = item.wtrUsqty
obj.anlOperCst = item.anlOperCst
if (obj) {
obj.instlCst += item.instlCst;
obj.dtfcltCpct += item.dtfcltCpct;
obj.wtrUsqty += item.wtrUsqty;
obj.anlOperCst += item.anlOperCst;
obj.tmp += 1;
} else {
obj = {};
obj.ctpvCd = item.ctpvCd;
obj.instlCst = item.instlCst;
obj.tmp = 1;
obj.dtfcltCpct = item.dtfcltCpct;
obj.wtrUsqty = item.wtrUsqty;
obj.anlOperCst = item.anlOperCst;
cityArr.push(obj)
cityArr.push(obj);
}
if (item.guideStats && item.guideStats.length > 0) {
item.guideStats.forEach((guide: GuideStatProps) => {
rainStatHeadListExport.forEach((headItem: TableUpperProps) => {
if (headItem.title == guide.utztnUsgCd) {
if (!obj[headItem.id] || typeof obj[headItem.id] !== "number")
obj[headItem.id] = 0;
if (typeof obj[headItem.id] === "number") {
obj[headItem.id] += guide.ruseFcltUtztnQnt;
}
}
});
});
}
});
if (item.guideStats && item.guideStats.length > 0) {
item.guideStats.forEach((guide: GuideStatProps) => {
rainStatHeadListExport.forEach((headItem: TableUpperProps) => {
const totalObj = {
ctpvCd: "0",
tmp: 0,
instlCst: 0, //설치비
dtfcltCpct: 0, //저류조용량
bdstUsgCd: 0, //연간사용량
lndwtr: 0, //조경용수
cleanToilUswtr: 0, //청소화장실용수
resn: 0, //세척살수용수
farmUswtr: 0, //농업용수
indstUswtr: 0, //공업용수
hydUswtr: 0, //친수용수
ithlEtcUswtr: 0, //기타
anlOperCst: 0, //연간운영비
} as any;
if (headItem.title == guide.utztnUsgCd) {
if (!obj[headItem.id] || typeof obj[headItem.id] !== "number") obj[headItem.id] = 0;
if (typeof obj[headItem.id] === "number") {
cityArr.forEach((item) => {
// if(item.ctpvCd === '0') return; // Skip total object if exists
totalObj.tmp += !isNaN(Number(item.tmp)) ? Number(item.tmp) : 0;
totalObj.instlCst += !isNaN(Number(item.instlCst))
? Number(item.instlCst)
: 0;
totalObj.dtfcltCpct += !isNaN(Number(item.dtfcltCpct))
? Number(item.dtfcltCpct)
: 0;
totalObj.bdstUsgCd += !isNaN(Number(item.bdstUsgCd))
? Number(item.bdstUsgCd)
: 0;
totalObj.lndwtr += !isNaN(Number(item.lndwtr))
? Number(item.lndwtr)
: 0;
totalObj.cleanToilUswtr += !isNaN(Number(item.cleanToilUswtr))
? Number(item.cleanToilUswtr)
: 0;
totalObj.resn += !isNaN(Number(item.resn)) ? Number(item.resn) : 0;
totalObj.farmUswtr += !isNaN(Number(item.farmUswtr))
? Number(item.farmUswtr)
: 0;
totalObj.indstUswtr += !isNaN(Number(item.indstUswtr))
? Number(item.indstUswtr)
: 0;
totalObj.hydUswtr += !isNaN(Number(item.hydUswtr))
? Number(item.hydUswtr)
: 0;
totalObj.ithlEtcUswtr += !isNaN(Number(item.ithlEtcUswtr))
? Number(item.ithlEtcUswtr)
: 0;
totalObj.anlOperCst += !isNaN(Number(item.anlOperCst))
? Number(item.anlOperCst)
: 0;
obj[headItem.id] += guide.ruseFcltUtztnQnt;
}
}
});
})
}
})
excelDownList.push({
ctpvCd: item.ctpvCd,
tmp: item.tmp,
instlCst: item.instlCst, //설치비
dtfcltCpct: item.dtfcltCpct, //저류조용량
bdstUsgCd: item.bdstUsgCd, //연간사용량
lndwtr: item.lndwtr, //조경용수
cleanToilUswtr: item.cleanToilUswtr, //청소화장실용수
resn: item.resn, //세척살수용수
farmUswtr: item.farmUswtr, //농업용수
indstUswtr: item.indstUswtr, //공업용수
hydUswtr: item.hydUswtr, //친수용수
ithlEtcUswtr: item.ithlEtcUswtr, //기타
anlOperCst: item.anlOperCst, //연간운영비
});
});
cityArr.forEach(item => {
excelDownList.push({
ctpvCd: item.ctpvCd,
tmp: item.tmp,
instlCst: item.instlCst, //설치비
dtfcltCpct: item.dtfcltCpct, //저류조용량
bdstUsgCd: item.bdstUsgCd, //연간사용량
lndwtr: item.lndwtr, //조경용수
cleanToilUswtr: item.cleanToilUswtr, //청소화장실용수
resn: item.resn, //세척살수용수
farmUswtr: item.farmUswtr, //농업용수
indstUswtr: item.indstUswtr, //공업용수
hydUswtr: item.hydUswtr, //친수용수
ithlEtcUswtr: item.ithlEtcUswtr, //기타
anlOperCst: item.anlOperCst, //연간운영비
})
})
//상세
const rainDetailList : RainStatProps[] = [];
res.forEach((item:RainStatProps) => {
const utztnUsgArray = new Array<string>();
item.guideStats.forEach((guideStat) => {
utztnUsgArray.push(guideStat.utztnUsgCd);
})
rainDetailList.push({
...item,
utztnUsgCd : utztnUsgArray.join(', '),
})
})
const excelDetailData = excelRainStat(rainDetailList);
/* const rainStatHeadList = data.map((item:RainStatProps) => ({
//상세
const rainDetailList: RainStatProps[] = [];
res.forEach((item: RainStatProps) => {
const utztnUsgArray = new Array<string>();
item.guideStats.forEach((guideStat) => {
utztnUsgArray.push(guideStat.utztnUsgCd);
});
rainDetailList.push({
...item,
utztnUsgCd: utztnUsgArray.join(", "),
});
});
const excelDetailData = excelRainStat(rainDetailList);
/* const rainStatHeadList = data.map((item:RainStatProps) => ({
...item,
ctpvCd:item.ctpvCd,
sggCd:item.sggCd,
@@ -172,14 +229,19 @@ export const rainStatActionsExport = (
way7:item.way7,
yearMoney:item.yearMoney,
})) */
set((state: rainStatState) => ({
rainStat: {
...state.rainStat,
rainDetailList: excelDetailData as [][],
rainStatList: cityArr,
excelList: excelDownList
}
}));
}
}
}
console.log(" cityArr ", cityArr);
console.log(" excelDownList ", excelDownList);
cityArr.unshift(totalObj);
set((state: rainStatState) => ({
rainStat: {
...state.rainStat,
rainDetailList: excelDetailData as [][],
rainStatList: cityArr,
excelList: excelDownList,
},
}));
},
};
};