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

refactor: 05. 펌프장 컬럼 파일로 분리 & footer 적용

Browse Source 
-  PumpingStationMngColumn.ts 파일 새로 생성
- 기존 PumpingStation.tsx 내 컬럼 정의 별도 파일로 분리
- footer 설정 적용 (소수점 3자리, 소수점 1자리, 정수)
- editable 속성 추가 (시도, 시군구, 우수량, 총양수량 = false)
This commit is contained in:
rsone001
2026-01-05 13:18:45 +09:00
parent 8318888f6d
commit 97e448c5c8
2 changed files with 148 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/st/src/components/statistics/management/PumpingStationMng.tsx
+12 -142
View File
@@ -6,139 +6,19 @@ import LastYearDataButton from "@/components/button/LastYearDataButton";
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
import { useState } from "react";
import { PumpingStationMngColumn } from "@/components/util/column/management/PumpingStationMngColumn"
// 하수도 통계 관리 > 05. 펌프장
const PumpingStationMng = () => {
const columns = [
// 행정구역
{ name: 'sido', fieldName: '시도', header: { text: '시도' } },
{ name: 'sgg', fieldName: '시군구', header: { text: '시군구' } },
// 기본 정보
{ name: 'treatmentFacilityName', fieldName: '처리장명', header: { text: '처리장명' } },
{ name: 'facilityName', fieldName: '시설명', header: { text: '시설명' } },
{ name: 'classification', fieldName: '구분(합류식 분류식)', header: { text: '구분(합류식 분류식)' } },
{ name: 'location', fieldName: '위치', header: { text: '위치' } },
{ name: 'operationDate', fieldName: '가동 년월일 yyyy-mm-dd', header: { text: '가동 년월일 yyyy-mm-dd' } },
// 계획 정보
{ name: 'planDrainageArea', fieldName: '계획배수면적(㎢)', header: { text: '계획배수면적(㎢)' } },
{ name: 'fairWeatherFlow', fieldName: '청천시(A)', header: { text: '청천시(A)' } },
{ name: 'rainyWeatherFlow', fieldName: '우천시(B)', header: { text: '우천시(B)' } },
{ name: 'rainwaterFlow', fieldName: '우수량(B-A)', header: { text: '우수량(B-A)' } },
// 배수능력
{ name: 'totalPumpCapacity', fieldName: '총양수량(m³/min)', header: { text: '총양수량(m³/min)' } },
// 배수능력 - 오수펌프(1)
{ name: 'sewagePump1Diameter', fieldName: '오수펌프(1) 구경(mm)', header: { text: '구경(mm)' } },
{ name: 'sewagePump1Capacity', fieldName: '오수펌프(1) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' } },
{ name: 'sewagePump1Count', fieldName: '오수펌프(1) 펌프대수', header: { text: '펌프대수' } },
{ name: 'sewagePump1Reserve', fieldName: '오수펌프(1) 예비펌프대수', header: { text: '예비펌프대수' } },
// 배수능력 - 오수펌프(2)
{ name: 'sewagePump2Diameter', fieldName: '오수펌프(2) 구경(mm)', header: { text: '구경(mm)' } },
{ name: 'sewagePump2Capacity', fieldName: '오수펌프(2) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' } },
{ name: 'sewagePump2Count', fieldName: '오수펌프(2) 펌프대수', header: { text: '펌프대수' } },
{ name: 'sewagePump2Reserve', fieldName: '오수펌프(2) 예비펌프대수', header: { text: '예비펌프대수' } },
// 배수능력 - 오수펌프(3)
{ name: 'sewagePump3Diameter', fieldName: '오수펌프(3) 구경(mm)', header: { text: '구경(mm)' } },
{ name: 'sewagePump3Capacity', fieldName: '오수펌프(3) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' } },
{ name: 'sewagePump3Count', fieldName: '오수펌프(3) 펌프대수', header: { text: '펌프대수' } },
{ name: 'sewagePump3Reserve', fieldName: '오수펌프(3) 예비펌프대수', header: { text: '예비펌프대수' } },
// 배수능력 - 우수펌프(1)
{ name: 'rainwaterPump1Diameter', fieldName: '우수펌프(1) 구경(mm)', header: { text: '구경(mm)' } },
{ name: 'rainwaterPump1Capacity', fieldName: '우수펌프(1) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' } },
{ name: 'rainwaterPump1Count', fieldName: '우수펌프(1) 펌프대수', header: { text: '펌프대수' } },
{ name: 'rainwaterPump1Reserve', fieldName: '우수펌프(1) 예비펌프대수', header: { text: '예비펌프대수' } },
// 배수능력 - 우수펌프(2)
{ name: 'rainwaterPump2Diameter', fieldName: '우수펌프(2) 구경(mm)', header: { text: '구경(mm)' } },
{ name: 'rainwaterPump2Capacity', fieldName: '우수펌프(2) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' } },
{ name: 'rainwaterPump2Count', fieldName: '우수펌프(2) 펌프대수', header: { text: '펌프대수' } },
{ name: 'rainwaterPump2Reserve', fieldName: '우수펌프(2) 예비펌프대수', header: { text: '예비펌프대수' } },
// 배수능력 - 우수펌프(3)
{ name: 'rainwaterPump3Diameter', fieldName: '우수펌프(3) 구경(mm)', header: { text: '구경(mm)' } },
{ name: 'rainwaterPump3Capacity', fieldName: '우수펌프(3) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' } },
{ name: 'rainwaterPump3Count', fieldName: '우수펌프(3) 펌프대수', header: { text: '펌프대수' } },
{ name: 'rainwaterPump3Reserve', fieldName: '우수펌프(3) 예비펌프대수', header: { text: '예비펌프대수' } },
// 기타
{ name: 'annualPowerUsage', fieldName: '연간전력사용량(kWh/년)', header: { text: '연간전력사용량(kWh/년)' } },
{ name: 'remarks', fieldName: '비고', header: { text: '비고' } },
];
const columnLayout = [
{
name: 'administrativeArea',
hideChildHeaders: false,
header: { text: '행정구역' },
items: ['sido', 'sgg'],
},
'treatmentFacilityName',
'facilityName',
'classification',
'location',
'operationDate',
'planDrainageArea',
{
name: 'planFlowGroup',
hideChildHeaders: false,
header: { text: '계획시간대최대배수량(m³/hr)' },
items: ['fairWeatherFlow', 'rainyWeatherFlow', 'rainwaterFlow'],
},
{
name: 'drainageCapability',
hideChildHeaders: false,
header: { text: '배수능력' },
items: [
'totalPumpCapacity',
{
name: 'sewagePump1Group',
hideChildHeaders: false,
header: { text: '오수펌프(1)' },
items: ['sewagePump1Diameter', 'sewagePump1Capacity', 'sewagePump1Count', 'sewagePump1Reserve'],
},
{
name: 'sewagePump2Group',
hideChildHeaders: false,
header: { text: '오수펌프(2)' },
items: ['sewagePump2Diameter', 'sewagePump2Capacity', 'sewagePump2Count', 'sewagePump2Reserve'],
},
{
name: 'sewagePump3Group',
hideChildHeaders: false,
header: { text: '오수펌프(3)' },
items: ['sewagePump3Diameter', 'sewagePump3Capacity', 'sewagePump3Count', 'sewagePump3Reserve'],
},
{
name: 'rainwaterPump1Group',
hideChildHeaders: false,
header: { text: '우수펌프(1)' },
items: ['rainwaterPump1Diameter', 'rainwaterPump1Capacity', 'rainwaterPump1Count', 'rainwaterPump1Reserve'],
},
{
name: 'rainwaterPump2Group',
hideChildHeaders: false,
header: { text: '우수펌프(2)' },
items: ['rainwaterPump2Diameter', 'rainwaterPump2Capacity', 'rainwaterPump2Count', 'rainwaterPump2Reserve'],
},
{
name: 'rainwaterPump3Group',
hideChildHeaders: false,
header: { text: '우수펌프(3)' },
items: ['rainwaterPump3Diameter', 'rainwaterPump3Capacity', 'rainwaterPump3Count', 'rainwaterPump3Reserve'],
},
],
},
'annualPowerUsage',
'remarks',
];
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 지난연도 데이터 가져오기 로직
};
const submitFunc = () => {
console.log('submit');
@@ -150,28 +30,18 @@ const PumpingStationMng = () => {
// 저장 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 지난연도 데이터 가져오기 로직
};
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
const [rowData, setRowData] = useState<Record<string, string | number>[]>([]);
return (
<>
<SearchForm userMenual={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
<SubmitButton submitFunc={submitFunc} />
<SaveButton saveFunc={saveFunc} />
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
</div>
<DataGrid columnInfo={{columns, columnLayout}} rowStartNum={3} isExcelImport={true} fixedColumns={3} rowData={rowData} setRowData={setRowData} />
<DataGrid columnInfo={PumpingStationMngColumn} rowStartNum={3} isExcelImport={true} fixedColumns={3} rowData={rowData} setRowData={setRowData} />
</>
);
};
apps/st/src/components/util/column/management/PumpingStationMngColumn.ts
+136
View File
@@ -0,0 +1,136 @@
import { footerInt, footerDecimal1, footerDecimal3 } from "@/components/util/grid/footerSummary";
/**
* 하수도 통계 관리 > 05. 펌프장
* 단일 Tab
*/
export const PumpingStationMngColumn = {
columns: [
// 행정구역
{ name: 'sido', fieldName: '시도', header: { text: '시도' }, editable: false },
{ name: 'sgg', fieldName: '시군구', header: { text: '시군구' }, editable: false },
// 기본 정보
{ name: 'treatmentFacilityName', fieldName: '처리장명', header: { text: '처리장명' } },
{ name: 'facilityName', fieldName: '시설명', header: { text: '시설명' } },
{ name: 'classification', fieldName: '구분(합류식 분류식)', header: { text: '구분(합류식 분류식)' } },
{ name: 'location', fieldName: '위치', header: { text: '위치' } },
{ name: 'operationDate', fieldName: '가동 년월일 yyyy-mm-dd', header: { text: '가동 년월일 yyyy-mm-dd' } },
// 계획 정보
{ name: 'planDrainageArea', fieldName: '계획배수면적(㎢)', header: { text: '계획배수면적(㎢)' }, footer: footerDecimal3 },
{ name: 'fairWeatherFlow', fieldName: '청천시(A)', header: { text: '청천시(A)' }, footer: footerDecimal1 },
{ name: 'rainyWeatherFlow', fieldName: '우천시(B)', header: { text: '우천시(B)' }, footer: footerDecimal1 },
{ name: 'rainwaterFlow', fieldName: '우수량(B-A)', header: { text: '우수량(B-A)' }, footer: footerDecimal1, editable: false },
// 배수능력
{ name: 'totalPumpCapacity', fieldName: '총양수량(m³/min)', header: { text: '총양수량(m³/min)' }, footer: footerDecimal1, editable: false },
// 배수능력 - 오수펌프(1)
{ name: 'sewagePump1Diameter', fieldName: '오수펌프(1) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt },
{ name: 'sewagePump1Capacity', fieldName: '오수펌프(1) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1 },
{ name: 'sewagePump1Count', fieldName: '오수펌프(1) 펌프대수', header: { text: '펌프대수' }, footer: footerInt },
{ name: 'sewagePump1Reserve', fieldName: '오수펌프(1) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt },
// 배수능력 - 오수펌프(2)
{ name: 'sewagePump2Diameter', fieldName: '오수펌프(2) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt },
{ name: 'sewagePump2Capacity', fieldName: '오수펌프(2) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1 },
{ name: 'sewagePump2Count', fieldName: '오수펌프(2) 펌프대수', header: { text: '펌프대수' }, footer: footerInt },
{ name: 'sewagePump2Reserve', fieldName: '오수펌프(2) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt },
// 배수능력 - 오수펌프(3)
{ name: 'sewagePump3Diameter', fieldName: '오수펌프(3) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt },
{ name: 'sewagePump3Capacity', fieldName: '오수펌프(3) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1 },
{ name: 'sewagePump3Count', fieldName: '오수펌프(3) 펌프대수', header: { text: '펌프대수' }, footer: footerInt },
{ name: 'sewagePump3Reserve', fieldName: '오수펌프(3) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt },
// 배수능력 - 우수펌프(1)
{ name: 'rainwaterPump1Diameter', fieldName: '우수펌프(1) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt },
{ name: 'rainwaterPump1Capacity', fieldName: '우수펌프(1) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1 },
{ name: 'rainwaterPump1Count', fieldName: '우수펌프(1) 펌프대수', header: { text: '펌프대수' }, footer: footerInt },
{ name: 'rainwaterPump1Reserve', fieldName: '우수펌프(1) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt },
// 배수능력 - 우수펌프(2)
{ name: 'rainwaterPump2Diameter', fieldName: '우수펌프(2) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt },
{ name: 'rainwaterPump2Capacity', fieldName: '우수펌프(2) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1 },
{ name: 'rainwaterPump2Count', fieldName: '우수펌프(2) 펌프대수', header: { text: '펌프대수' }, footer: footerInt },
{ name: 'rainwaterPump2Reserve', fieldName: '우수펌프(2) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt },
// 배수능력 - 우수펌프(3)
{ name: 'rainwaterPump3Diameter', fieldName: '우수펌프(3) 구경(mm)', header: { text: '구경(mm)' }, footer: footerInt },
{ name: 'rainwaterPump3Capacity', fieldName: '우수펌프(3) 대당 양수량(m³/min·대)', header: { text: '대당 양수량(m³/min·대)' }, footer: footerDecimal1 },
{ name: 'rainwaterPump3Count', fieldName: '우수펌프(3) 펌프대수', header: { text: '펌프대수' }, footer: footerInt },
{ name: 'rainwaterPump3Reserve', fieldName: '우수펌프(3) 예비펌프대수', header: { text: '예비펌프대수' }, footer: footerInt },
// 기타
{ name: 'annualPowerUsage', fieldName: '연간전력사용량(kWh/년)', header: { text: '연간전력사용량(kWh/년)' }, footer: footerDecimal1 },
{ name: 'remarks', fieldName: '비고', header: { text: '비고' } },
],
columnLayout: [
{
name: 'administrativeArea',
hideChildHeaders: false,
header: { text: '행정구역' },
items: ['sido', 'sgg'],
},
'treatmentFacilityName',
'facilityName',
'classification',
'location',
'operationDate',
'planDrainageArea',
{
name: 'planFlowGroup',
hideChildHeaders: false,
header: { text: '계획시간대최대배수량(m³/hr)' },
items: ['fairWeatherFlow', 'rainyWeatherFlow', 'rainwaterFlow'],
},
{
name: 'drainageCapability',
hideChildHeaders: false,
header: { text: '배수능력' },
items: [
'totalPumpCapacity',
{
name: 'sewagePump1Group',
hideChildHeaders: false,
header: { text: '오수펌프(1)' },
items: ['sewagePump1Diameter', 'sewagePump1Capacity', 'sewagePump1Count', 'sewagePump1Reserve'],
},
{
name: 'sewagePump2Group',
hideChildHeaders: false,
header: { text: '오수펌프(2)' },
items: ['sewagePump2Diameter', 'sewagePump2Capacity', 'sewagePump2Count', 'sewagePump2Reserve'],
},
{
name: 'sewagePump3Group',
hideChildHeaders: false,
header: { text: '오수펌프(3)' },
items: ['sewagePump3Diameter', 'sewagePump3Capacity', 'sewagePump3Count', 'sewagePump3Reserve'],
},
{
name: 'rainwaterPump1Group',
hideChildHeaders: false,
header: { text: '우수펌프(1)' },
items: ['rainwaterPump1Diameter', 'rainwaterPump1Capacity', 'rainwaterPump1Count', 'rainwaterPump1Reserve'],
},
{
name: 'rainwaterPump2Group',
hideChildHeaders: false,
header: { text: '우수펌프(2)' },
items: ['rainwaterPump2Diameter', 'rainwaterPump2Capacity', 'rainwaterPump2Count', 'rainwaterPump2Reserve'],
},
{
name: 'rainwaterPump3Group',
hideChildHeaders: false,
header: { text: '우수펌프(3)' },
items: ['rainwaterPump3Diameter', 'rainwaterPump3Capacity', 'rainwaterPump3Count', 'rainwaterPump3Reserve'],
},
],
},
'annualPowerUsage',
'remarks',
]
};