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

[feat]05. 펌프장 단일 탭 column폴더 분리

Browse Source
This commit is contained in:
rsone001
2026-01-02 13:41:10 +09:00
parent 28f841adc8
commit 877a548c6f
2 changed files with 106 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/st/src/components/statistics/review/PumpingStationRvw.tsx
+5 -140
View File
@@ -1,149 +1,14 @@
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import TabDataGrid from "@/components/module/TabDataGrid";
import SaveButton from "@/components/button/SaveButton";
import ApproveButton from "@/components/button/ApproveButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
import ReturnButton from "@/components/button/ReturnButton";
import { PumpingStationInfoList } from "@/components/util/column/review/PumpingStationColumnRvw";
const PumpingStationRvw = () => {
const rawColumns = [
// 행정구역
{ name: 'sido', fieldName: '시도', header: { text: '시도' } },
{ name: 'sgg', fieldName: '구군', header: { text: '구군' } },
// 기본 정보
{ name: '펌프장명', fieldName: '펌프장명', header: { text: '펌프장명' } },
{ name: '구분', fieldName: '구분', header: { text: '구분' } },
{ name: '처리장명', fieldName: '처리장명', header: { text: '처리장명' } },
{ name: '구분(합류식분류식)', fieldName: '구분(합류식분류식)', header: { text: '구분(합류식분류식)' } },
{ name: '위치', fieldName: '위치', header: { text: '위치' } },
{ name: '가동년월일 yyyy-mm-dd', fieldName: '가동년월일 yyyy-mm-dd', header: { text: '가동년월일 yyyy-mm-dd' } },
{ name: '계획배수면적(km2)', fieldName: '계획배수면적(km2)', header: { text: '계획배수면적(km2)' } },
// 계획배수량
{ name: '청천시(A)', fieldName: '청천시(A)', header: { text: '청천시(A)' } },
{ name: '우천시(B)', fieldName: '우천시(B)', header: { text: '우천시(B)' } },
{ name: '우수량(B-A)', fieldName: '우수량(B-A)', header: { text: '우수량(B-A)' } },
// 총양수량
{ name: '오수펌프_총양수량(m3/min)', fieldName: '오수펌프_총양수량(m3/min)', header: { text: '총양수량(m3/min)' } },
{ name: '우수펌프_총양수량(m3/min)', fieldName: '우수펌프_총양수량(m3/min)', header: { text: '총양수량(m3/min)' } },
// 오수펌프(1)
{ name: '오수펌프(1)구경(mm)', fieldName: '오수펌프(1)구경(mm)', header: { text: '구경(mm)' } },
{ name: '오수펌프(1)양수량(m3/min)', fieldName: '오수펌프(1)양수량(m3/min)', header: { text: '양수량(m3/min)' } },
{ name: '오수펌프(1)펌프대수', fieldName: '오수펌프(1)펌프대수', header: { text: '펌프대수' } },
{ name: '오수펌프(1)예비대수', fieldName: '오수펌프(1)예비대수', header: { text: '예비대수' } },
// 오수펌프(2)
{ name: '오수펌프(2)구경(mm)', fieldName: '오수펌프(2)구경(mm)', header: { text: '구경(mm)' } },
{ name: '오수펌프(2)양수량(m3/min)', fieldName: '오수펌프(2)양수량(m3/min)', header: { text: '양수량(m3/min)' } },
{ name: '오수펌프(2)펌프대수', fieldName: '오수펌프(2)펌프대수', header: { text: '펌프대수' } },
{ name: '오수펌프(2)예비대수', fieldName: '오수펌프(2)예비대수', header: { text: '예비대수' } },
// 오수펌프(3)
{ name: '오수펌프(3)구경(mm)', fieldName: '오수펌프(3)구경(mm)', header: { text: '구경(mm)' } },
{ name: '오수펌프(3)양수량(m3/min)', fieldName: '오수펌프(3)양수량(m3/min)', header: { text: '양수량(m3/min)' } },
{ name: '오수펌프(3)펌프대수', fieldName: '오수펌프(3)펌프대수', header: { text: '펌프대수' } },
{ name: '오수펌프(3)예비대수', fieldName: '오수펌프(3)예비대수', header: { text: '예비대수' } },
// 우수펌프(1)
{ name: '우수펌프(1)구경(mm)', fieldName: '우수펌프(1)구경(mm)', header: { text: '구경(mm)' } },
{ name: '우수펌프(1)양수량(m3/min)', fieldName: '우수펌프(1)양수량(m3/min)', header: { text: '양수량(m3/min)' } },
{ name: '우수펌프(1)펌프대수', fieldName: '우수펌프(1)펌프대수', header: { text: '펌프대수' } },
{ name: '우수펌프(1)예비대수', fieldName: '우수펌프(1)예비대수', header: { text: '예비대수' } },
// 우수펌프(2)
{ name: '우수펌프(2)구경(mm)', fieldName: '우수펌프(2)구경(mm)', header: { text: '구경(mm)' } },
{ name: '우수펌프(2)양수량(m3/min)', fieldName: '우수펌프(2)양수량(m3/min)', header: { text: '양수량(m3/min)' } },
{ name: '우수펌프(2)펌프대수', fieldName: '우수펌프(2)펌프대수', header: { text: '펌프대수' } },
{ name: '우수펌프(2)예비대수', fieldName: '우수펌프(2)예비대수', header: { text: '예비대수' } },
// 우수펌프(3)
{ name: '우수펌프(3)구경(mm)', fieldName: '우수펌프(3)구경(mm)', header: { text: '구경(mm)' } },
{ name: '우수펌프(3)양수량(m3/min)', fieldName: '우수펌프(3)양수량(m3/min)', header: { text: '양수량(m3/min)' } },
{ name: '우수펌프(3)펌프대수', fieldName: '우수펌프(3)펌프대수', header: { text: '펌프대수' } },
{ name: '우수펌프(3)예비대수', fieldName: '우수펌프(3)예비대수', header: { text: '예비대수' } },
// 운영 및 비고
{ name: '연간전력사용량(kWh/년)', fieldName: '연간전력사용량(kWh/년)', header: { text: '연간전력사용량(kWh/년)' } },
{ name: 'rmk', fieldName: '비고', header: { text: '비고' } },
];
const columns = rawColumns.map(col => ({
...col,
editable: false
}));
const columnLayout = [
{
name: 'groupA',
hideChildHeaders: false,
header: { text: '행정구역' },
items: ['sido', 'sgg'],
},
'펌프장명',
'구분',
'처리장명',
'구분(합류식분류식)',
'위치',
'가동년월일 yyyy-mm-dd',
'계획배수면적(km2)',
{
name: 'groupB',
hideChildHeaders: false,
header: { text: '계획시간대최대배수량(m3/hr)' },
items: ['청천시(A)', '우천시(B)', '우수량(B-A)'],
},
{
name: 'groupC',
hideChildHeaders: false,
header: { text: '배수능력' },
items: [
'오수펌프_총양수량(m3/min)',
{
name: '오수펌프(1)',
hideChildHeaders: false,
header: { text: '오수펌프(1)' },
items: ['오수펌프(1)구경(mm)', '오수펌프(1)양수량(m3/min)', '오수펌프(1)펌프대수', '오수펌프(1)예비대수'],
},
{
name: '오수펌프(2)',
hideChildHeaders: false,
header: { text: '오수펌프(2)' },
items: ['오수펌프(2)구경(mm)', '오수펌프(2)양수량(m3/min)', '오수펌프(2)펌프대수', '오수펌프(2)예비대수'],
},
{
name: '오수펌프(3)',
hideChildHeaders: false,
header: { text: '오수펌프(3)' },
items: ['오수펌프(3)구경(mm)', '오수펌프(3)양수량(m3/min)', '오수펌프(3)펌프대수', '오수펌프(3)예비대수'],
},
'우수펌프_총양수량(m3/min)',
{
name: '우수펌프(1)',
hideChildHeaders: false,
header: { text: '우수펌프(1)' },
items: ['우수펌프(1)구경(mm)', '우수펌프(1)양수량(m3/min)', '우수펌프(1)펌프대수', '우수펌프(1)예비대수'],
},
{
name: '우수펌프(2)',
hideChildHeaders: false,
header: { text: '우수펌프(2)' },
items: ['우수펌프(2)구경(mm)', '우수펌프(2)양수량(m3/min)', '우수펌프(2)펌프대수', '우수펌프(2)예비대수'],
},
{
name: '우수펌프(3)',
hideChildHeaders: false,
header: { text: '우수펌프(3)' },
items: ['우수펌프(3)구경(mm)', '우수펌프(3)양수량(m3/min)', '우수펌프(3)펌프대수', '우수펌프(3)예비대수'],
},
],
},
'연간전력사용량(kWh/년)',
'rmk',
];
const approveFunc = () => { console.log('approveFunc'); };
const saveFunc = () => { console.log('submit'); };
@@ -159,7 +24,7 @@ const PumpingStationRvw = () => {
<ReturnButton returnFunc={returnFunc} />
<SaveButton saveFunc={saveFunc} />
</div>
<DataGrid columnInfo={{ columns, columnLayout }} rowStartNum={2} isExcelImport={false} fixedColumns={3} />
<TabDataGrid columnInfo={PumpingStationInfoList} isExcelImport={false} />
</>
);
};
apps/st/src/components/util/column/review/PumpingStationColumnRvw.ts
+101
View File
@@ -0,0 +1,101 @@
export const PumpingStationInfoList = [
{
tabKey: 'a',
tabLabel: '펌프장 현황',
rowStartNum: 3,
fixedColumns: 3,
columns: [
/* 1. 행정구역 및 기본정보 */
{ name: 'sido', fieldName: 'SIDO', header: { text: '시도' } },
{ name: 'sgg', fieldName: 'GUGUN', header: { text: '구군' } },
{ name: 'PUMP_NM', fieldName: 'PUMP_NM', header: { text: '펌프장명' } },
{ name: 'GBN', fieldName: 'GBN', header: { text: '구분' } },
{ name: 'TRT_FCT_NM', fieldName: 'TRT_FCT_NM', header: { text: '처리장명' } },
{ name: 'TYPE_GBN', fieldName: 'TYPE_GBN', header: { text: '구분(합류식분류식)' } },
{ name: 'ADDR', fieldName: 'ADDR', header: { text: '위치' } },
{ name: 'RN_DT', fieldName: 'RN_DT', header: { text: '가동년월일\nyyyy-mm-dd' } },
{ name: 'DSN_AR', fieldName: 'DSN_AR', header: { text: '계획배수면적\n(km2)' } },
/* 2. 계획배수량 (m3/hr) */
{ name: 'DSN_QTY_A', fieldName: 'DSN_QTY_A', header: { text: '청천시(A)' } },
{ name: 'DSN_QTY_B', fieldName: 'DSN_QTY_B', header: { text: '우천시(B)' } },
{ name: 'DSN_QTY_DIFF', fieldName: 'DSN_QTY_DIFF', header: { text: '우수량(B-A)' } },
/* 3. 총 양수량 (m3/min) */
{ name: 'TOT_PUMP_QTY_O', fieldName: 'TOT_PUMP_QTY_O', header: { text: '오수펌프\n총양수량' } },
{ name: 'TOT_PUMP_QTY_W', fieldName: 'TOT_PUMP_QTY_W', header: { text: '우수펌프\n총양수량' } },
/* 4. 오수펌프 상세 (1, 2, 3) */
{ name: 'PUMP_O1_D', fieldName: 'PUMP_O1_D', header: { text: '구경(mm)' } },
{ name: 'PUMP_O1_Q', fieldName: 'PUMP_O1_Q', header: { text: '양수량\n(m3/min)' } },
{ name: 'PUMP_O1_C', fieldName: 'PUMP_O1_C', header: { text: '펌프대수' } },
{ name: 'PUMP_O1_S', fieldName: 'PUMP_O1_S', header: { text: '예비대수' } },
{ name: 'PUMP_O2_D', fieldName: 'PUMP_O2_D', header: { text: '구경(mm)' } },
{ name: 'PUMP_O2_Q', fieldName: 'PUMP_O2_Q', header: { text: '양수량\n(m3/min)' } },
{ name: 'PUMP_O2_C', fieldName: 'PUMP_O2_C', header: { text: '펌프대수' } },
{ name: 'PUMP_O2_S', fieldName: 'PUMP_O2_S', header: { text: '예비대수' } },
{ name: 'PUMP_O3_D', fieldName: 'PUMP_O3_D', header: { text: '구경(mm)' } },
{ name: 'PUMP_O3_Q', fieldName: 'PUMP_O3_Q', header: { text: '양수량\n(m3/min)' } },
{ name: 'PUMP_O3_C', fieldName: 'PUMP_O3_C', header: { text: '펌프대수' } },
{ name: 'PUMP_O3_S', fieldName: 'PUMP_O3_S', header: { text: '예비대수' } },
/* 5. 우수펌프 상세 (1, 2, 3) */
{ name: 'PUMP_W1_D', fieldName: 'PUMP_W1_D', header: { text: '구경(mm)' } },
{ name: 'PUMP_W1_Q', fieldName: 'PUMP_W1_Q', header: { text: '양수량\n(m3/min)' } },
{ name: 'PUMP_W1_C', fieldName: 'PUMP_W1_C', header: { text: '펌프대수' } },
{ name: 'PUMP_W1_S', fieldName: 'PUMP_W1_S', header: { text: '예비대수' } },
{ name: 'PUMP_W2_D', fieldName: 'PUMP_W2_D', header: { text: '구경(mm)' } },
{ name: 'PUMP_W2_Q', fieldName: 'PUMP_W2_Q', header: { text: '양수량\n(m3/min)' } },
{ name: 'PUMP_W2_C', fieldName: 'PUMP_W2_C', header: { text: '펌프대수' } },
{ name: 'PUMP_W2_S', fieldName: 'PUMP_W2_S', header: { text: '예비대수' } },
{ name: 'PUMP_W3_D', fieldName: 'PUMP_W3_D', header: { text: '구경(mm)' } },
{ name: 'PUMP_W3_Q', fieldName: 'PUMP_W3_Q', header: { text: '양수량\n(m3/min)' } },
{ name: 'PUMP_W3_C', fieldName: 'PUMP_W3_C', header: { text: '펌프대수' } },
{ name: 'PUMP_W3_S', fieldName: 'PUMP_W3_S', header: { text: '예비대수' } },
/* 6. 운영 정보 */
{ name: 'PWR_USAGE', fieldName: 'PWR_USAGE', header: { text: '연간전력사용량\n(kWh/년)' } },
{ name: 'RMK', fieldName: 'RMK', header: { text: '비고' } },
],
columnLayout: [
{ name: 'groupA', header: { text: '행정구역' }, items: ['sido', 'sgg'] },
'PUMP_NM', 'GBN', 'TRT_FCT_NM', 'TYPE_GBN', 'ADDR', 'RN_DT', 'DSN_AR',
{
name: 'groupB',
header: { text: '계획시간대최대배수량(m3/hr)' },
items: ['DSN_QTY_A', 'DSN_QTY_B', 'DSN_QTY_DIFF'],
},
{
name: 'groupC',
header: { text: '배수능력' },
items: [
'TOT_PUMP_QTY_O',
{
name: 'pumpO_Detail',
header: { text: '오수펌프 상세' },
items: [
{ name: 'O1', header: { text: '오수펌프(1)' }, items: ['PUMP_O1_D', 'PUMP_O1_Q', 'PUMP_O1_C', 'PUMP_O1_S'] },
{ name: 'O2', header: { text: '오수펌프(2)' }, items: ['PUMP_O2_D', 'PUMP_O2_Q', 'PUMP_O2_C', 'PUMP_O2_S'] },
{ name: 'O3', header: { text: '오수펌프(3)' }, items: ['PUMP_O3_D', 'PUMP_O3_Q', 'PUMP_O3_C', 'PUMP_O3_S'] }
]
},
'TOT_PUMP_QTY_W',
{
name: 'pumpW_Detail',
header: { text: '우수펌프 상세' },
items: [
{ name: 'W1', header: { text: '우수펌프(1)' }, items: ['PUMP_W1_D', 'PUMP_W1_Q', 'PUMP_W1_C', 'PUMP_W1_S'] },
{ name: 'W2', header: { text: '우수펌프(2)' }, items: ['PUMP_W2_D', 'PUMP_W2_Q', 'PUMP_W2_C', 'PUMP_W2_S'] },
{ name: 'W3', header: { text: '우수펌프(3)' }, items: ['PUMP_W3_D', 'PUMP_W3_Q', 'PUMP_W3_C', 'PUMP_W3_S'] }
]
}
],
},
'PWR_USAGE', 'RMK',
]
}
];