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

cm: 유역별 정보

Browse Source
This commit is contained in:
mind-one005
2026-09-28 16:07:52 +09:00
parent 7b506320b4
commit f32fe0ec5b
4 changed files with 67 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cm/src/pages/dashboard/api/sn-service.ts
+32 -10
View File
@@ -2,7 +2,7 @@
import { client } from "@/shared/api";
import { create } from "zustand";
import { ENDPOINT } from "@/shared/config";
import type { PplLengthContent, SewerageService } from "../model/sn-interface";
import type { BasinStofcbrCountContent, PplLengthContent, SewerageService } from "../model/sn-interface";
import type { OldPplChartData, mapPplOldType, mapPplOldItem } from "../model/sn-interface";
export type SnState = {
@@ -70,21 +70,33 @@ export const useUsePplStore = create<OldPplStoreState>((set) => ({
}));
export const initailMapOldPplData: mapPplOldType = {
colTitle: { totalLen: "총길이", pplLen2025: "20~25년", pplLen2530: "25~30년", pplLen30: "30년 이상" }, //헤더 영역
colTitle: { stofcbrCount: "우수토실개소수", totalLen: "총연장" },
data: [
{ name: "금강", totalLen: 4545, pplLen2025: 1140, pplLen2530: 1391, pplLen30: 2014 },
{ name: "한강", totalLen: 17099, pplLen2025: 3181, pplLen2530: 3615, pplLen30: 10303 },
{ name: "낙동강", totalLen: 14745, pplLen2025: 3100, pplLen2530: 1814, pplLen30: 9831 },
{ name: "영산강", totalLen: 5073, pplLen2025: 1662, pplLen2530: 1411, pplLen30: 2000 },
{ name: "금강", totalLen: 4545, stofcbrCount: 0 },
{ name: "한강", totalLen: 17099, stofcbrCount: 0 },
{ name: "낙동강", totalLen: 14745, stofcbrCount: 0 },
{ name: "영산강", totalLen: 5073, stofcbrCount: 0 },
]
};
type mapPplOldState = {
mapData: mapPplOldItem[];
setMapData: (mapData: mapPplOldItem[]) => void;
setStofcbrCounts: (counts: BasinStofcbrCountContent[]) => void;
};
export const useMapOldPplStore = create<mapPplOldState>((set) => ({
mapData: initailMapOldPplData.data,
setMapData: (newMapData) => set({ mapData: newMapData }),
setMapData: (newMapData) => set((state) => ({
mapData: newMapData.map((item) => ({
...item,
stofcbrCount: state.mapData.find((current) => current.name === item.name)?.stofcbrCount ?? item.stofcbrCount,
})),
})),
setStofcbrCounts: (counts) => set((state) => ({
mapData: state.mapData.map((item) => ({
...item,
stofcbrCount: counts.find((count) => count.zoneNm === item.name)?.stofcbrCount ?? item.stofcbrCount,
})),
})),
}));
/**
@@ -109,9 +121,7 @@ export function transformChartDataToMapData(chartData: OldPplChartData): mapPplO
mapData.push({
name: label,
totalLen,
pplLen2025,
pplLen2530,
pplLen30,
stofcbrCount: 0,
});
});
@@ -184,6 +194,18 @@ export class SewerageApiService implements SewerageService {
return list;
}
// CM 대시보드 유역별 우수토실 개소수 조회
public async getBasinStofcbrCount(): Promise<BasinStofcbrCountContent[]> {
const response = await client.get<{
basinStofcbrCountList: BasinStofcbrCountContent[];
}>(ENDPOINT.SEWERAGE_SERVICE.BASIN_STOFCBR_COUNT);
return (response.data.basinStofcbrCountList ?? []).map((item) => ({
...item,
stofcbrCount: Number(item.stofcbrCount),
}));
}
}
export const SewerageApi = new SewerageApiService();
apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx
+24 -25
View File
@@ -12,7 +12,7 @@ import { svcInfo } from "../model/map-data";
import type { mapOperFcltType, mapReuseMapType} from "../model/fo-interface";
import type { mapPplOldType } from "../model/sn-interface";
import { useMapOperFcltStore, OperationApi, useMapReuseMapStore } from "../api/fo-service";
import { useMapOldPplStore } from "../api/sn-service";
import { SewerageApi, useMapOldPplStore } from "../api/sn-service";
import {Button} from "@common/components";
const SVG_URL = "/images/region_map.svg"; // public 폴더에 region_map.svg 위치 필요
@@ -31,12 +31,12 @@ const mapOperFcltData: mapOperFcltType = {
]
};
const mapPplOldData: mapPplOldType = {
colTitle: {totalLen: "총길이",pplLen2025: "20~25년",pplLen2530: "25~30년",pplLen30 : "30년 이상" }, //헤더 영역
colTitle: {stofcbrCount: "우수토실개소수", totalLen: "총연장" },
data: [
{name: "금강", totalLen: 4545, pplLen2025: 1140, pplLen2530: 1391, pplLen30 : 2014},
{name: "한강", totalLen: 17099, pplLen2025: 3181, pplLen2530: 3615, pplLen30 : 10303},
{name: "낙동강", totalLen: 14745, pplLen2025: 3100, pplLen2530: 1814, pplLen30 : 9831},
{name: "영산강", totalLen: 5073, pplLen2025: 1662, pplLen2530: 1411, pplLen30 : 2000},
{name: "금강", totalLen: 4545, stofcbrCount: 0},
{name: "한강", totalLen: 17099, stofcbrCount: 0},
{name: "낙동강", totalLen: 14745, stofcbrCount: 0},
{name: "영산강", totalLen: 5073, stofcbrCount: 0},
]
};
const mapReuseMapData: mapReuseMapType = {
@@ -62,17 +62,18 @@ export function KoreaBasinMap() {
const { selectedBasin, setSelectedBasin } = useStore(basinStore);
const selectedBasinKey = basinKeyMap[selectedBasin];
const {mapOperFclt} = useMapOperFcltStore();
const {mapData: mapPplOld} = useMapOldPplStore();
const {mapData: mapPplOld, setStofcbrCounts} = useMapOldPplStore();
const {setMapData: setMapReuseMapData} = useMapReuseMapStore();
mapOperFcltData.data = mapOperFclt;
mapPplOldData.data = mapPplOld;
// mapReuseMapData.data = mapReuseMap;
let standardYear = '2024';
const [standardYear, setStandardYear] = useState('2024');
useEffect(() => {
const fetchData = async () => {
try {
standardYear = await OperationApi.getStandardYear();
const mapReuseMapRslt = await OperationApi.getReuseMap(standardYear);
const fetchedStandardYear = await OperationApi.getStandardYear();
setStandardYear(fetchedStandardYear);
const mapReuseMapRslt = await OperationApi.getReuseMap(fetchedStandardYear);
setMapReuseMapData(mapReuseMapRslt);
mapReuseMapData.data = mapReuseMapRslt;
} catch (e) {
@@ -80,7 +81,13 @@ export function KoreaBasinMap() {
}
};
fetchData();
}, []);
}, [setMapReuseMapData]);
useEffect(() => {
SewerageApi.getBasinStofcbrCount()
.then(setStofcbrCounts)
.catch((e) => console.error("유역별 우수토실 개소수 조회 실패", e));
}, [setStofcbrCounts]);
// 유역정보
const showFor = useCallback((g: SVGGElement) => {
const activeService = services.find(s => s.active);
@@ -104,24 +111,16 @@ export function KoreaBasinMap() {
});
} else if (activeService.svcId === 'sn') { // 하수관로
const item = mapPplOldData.data.find(d => d.name === basinName);
newPopupContent.title = `${standardYear}년도 ${basinName}유역 노후하수관로 현황`;
newPopupContent.title = `${standardYear}년도 ${basinName}유역 하수관로 현황`;
const colTitles = mapPplOldData.colTitle;
newPopupContent.items.push({
header: colTitles.stofcbrCount,
data: item ? `${fmt(item.stofcbrCount)}개소` : '-',
});
newPopupContent.items.push({
header: colTitles.totalLen,
data: item ? `${fmt(item.totalLen)}km` : '-',
});
newPopupContent.items.push({
header: colTitles.pplLen2025,
data: item ? `${fmt(item.pplLen2025)}km` : '-',
});
newPopupContent.items.push({
header: colTitles.pplLen2530,
data: item ? `${fmt(item.pplLen2530)}km` : '-',
});
newPopupContent.items.push({
header: colTitles.pplLen30,
data: item ? `${fmt(item.pplLen30)}km` : '-',
});
} else if (activeService.svcId === 'wr') { // 물재이용
const item = mapReuseMapData.data.find(d => d.name === basinName);
newPopupContent.title = `${standardYear}년도 ${basinName}유역 물재이용 현황`;
@@ -160,7 +159,7 @@ export function KoreaBasinMap() {
);
popupRef.current.style.left = x + "px";
}
}, [services, mapOperFclt]);
}, [services, mapOperFclt, mapPplOld, standardYear]);
// selectedBasinKey prop이 변경될 때 지도를 업데이트하는 useEffect
useEffect(() => {
apps/cm/src/pages/dashboard/model/sn-interface.ts
+10 -8
View File
@@ -6,11 +6,17 @@ export interface PplLengthContent {
yearGroup?: string;
}
export interface BasinStofcbrCountContent {
zoneNm: string;
stofcbrCount: number;
}
export interface SewerageService {
getPplLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
getPplUseLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
getMvUsgPplLength(): Promise<PplLengthContent[]>;
getMvOldPplLength(): Promise<PplLengthContent[]>;
getBasinStofcbrCount(): Promise<BasinStofcbrCountContent[]>;
}
export interface ChartDataSet {
@@ -37,17 +43,13 @@ type SnOldPplLength = {
export type mapPplOldItem = {
name: string;
totalLen: number;
pplLen2025: number;
pplLen2530: number;
pplLen30: number;
stofcbrCount: number;
};
export type mapPplOldType = {
colTitle: {
totalLen: string; // 총길이
pplLen2025: string; // 20~25년
pplLen2530: string; // 25~30년
pplLen30: string; // 30년 이상
stofcbrCount: string; // 우수토실개소수
totalLen: string; // 총연장
};
data: mapPplOldItem[];
};
@@ -82,4 +84,4 @@ export function buildSnOldPplLength(
});
return result;
}
}
apps/cm/src/shared/config/api.ts
+1
View File
@@ -80,6 +80,7 @@ export const ENDPOINT = {
OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
MV_USG_PPL_LENGTH: "/sewerage-service/api/v1/ms/mvUsgPplLength",
MV_OLD_PPL_LENGTH: "/sewerage-service/api/v1/ms/mvOldPplLength",
BASIN_STOFCBR_COUNT: "/sewerage-service/api/v1/ms/basinStofcbrCount",
},
OPERATION_SERVICE: {
MAIN_YEAR: "/operation-service/api/v1/dashBoard/main/year",