139 lines
4.4 KiB
TypeScript
139 lines
4.4 KiB
TypeScript
// 우수토실
|
|
import { UiModal, UiTable } from '@common/business_components/ui';
|
|
import { Button, TableHead, TableRow } from '@common/components/ui';
|
|
import React from 'react';
|
|
import { untrtSwgRainCol3, untrtSwgRainCol4, untrtSwgRainCol5 } from '../common/table';
|
|
|
|
const Ssc = ({ featureData, chkMainSsc, additionalData }: {
|
|
featureData: any,
|
|
chkMainSsc?: boolean,
|
|
additionalData?: any
|
|
}) => {
|
|
console.log('Additional data received:', additionalData); // 추가 데이터 확인용
|
|
|
|
const [isModalOpen, setIsModalOpen] = React.useState(false);
|
|
const openModal = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
const closeModal = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
// 데이터 전처리: 합쳐진 필드 추가
|
|
const preprocessedData = featureData ? [{
|
|
...featureData,
|
|
flwmtr_combined: `${featureData.flwmtr_mesure_tp_etc || '-'} / ${featureData.flwmtr_knd || '-'}`
|
|
}] : [];
|
|
|
|
const renderModalBody = () => (
|
|
<div className='grid grid-cols-1 gap-4 p-4'>
|
|
{/* 강우정보 테이블 */}
|
|
<UiTable
|
|
headName='강우정보'
|
|
tableData={preprocessedData}
|
|
headlist={untrtSwgRainCol3}
|
|
pageSize={10}
|
|
total={0}
|
|
children={undefined}
|
|
cellClick={undefined}
|
|
onPageChange={function (page: number): void {
|
|
console.log('Rain data page change:', page);
|
|
}}
|
|
/>
|
|
|
|
{/* 측정정보 테이블 */}
|
|
<UiTable
|
|
headName='측정정보'
|
|
tableData={preprocessedData}
|
|
headlist={untrtSwgRainCol4}
|
|
pageSize={10}
|
|
total={0}
|
|
cellClick={undefined}
|
|
onPageChange={function (page: number): void {
|
|
console.log('Measure data page change:', page);
|
|
}}
|
|
>
|
|
{/* 커스텀 헤더 */}
|
|
<TableRow>
|
|
<TableHead colSpan={5} className="text-center bg-blue-100 font-bold">수량</TableHead>
|
|
<TableHead colSpan={3} className="text-center bg-blue-100 font-bold">수질</TableHead>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableHead className="text-center">측정시작일시</TableHead>
|
|
<TableHead className="text-center">측정종료일시</TableHead>
|
|
<TableHead className="text-center">측정간격(분)</TableHead>
|
|
<TableHead className="text-center">측정기기설치위치</TableHead>
|
|
<TableHead className="text-center">유량계 종류 및 모델명</TableHead>
|
|
<TableHead className="text-center">채수시작일시</TableHead>
|
|
<TableHead className="text-center">채수종료일시</TableHead>
|
|
<TableHead className="text-center">채수횟수</TableHead>
|
|
</TableRow>
|
|
</UiTable>
|
|
|
|
{/* 수량/수질측정 정보 테이블 */}
|
|
<UiTable
|
|
headName='수량/수질측정 정보'
|
|
tableData={additionalData}
|
|
headlist={untrtSwgRainCol5}
|
|
pageSize={10}
|
|
total={additionalData.length}
|
|
children={undefined}
|
|
cellClick={undefined}
|
|
onPageChange={function (page: number): void {
|
|
console.log('Quality data page change:', page);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{/* <VerticalTable
|
|
headName='자체 입력정보'
|
|
tableData={[]}
|
|
headlist={inputColumn}
|
|
pageSize={0}
|
|
total={0}
|
|
children={undefined}
|
|
cellClick={undefined}
|
|
isEditable={true}
|
|
onPageChange={function (page: number): void {
|
|
throw new Error('Function not implemented.');
|
|
}}
|
|
/> */}
|
|
|
|
{!chkMainSsc ? null :
|
|
<div>
|
|
<div className="card-header">
|
|
<h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
|
|
</div>
|
|
<Button
|
|
className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600'
|
|
onClick={openModal}
|
|
>
|
|
상세보기
|
|
</Button>
|
|
|
|
<UiModal
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
bodyClass={`
|
|
h-[100vh]
|
|
w-[60vw]
|
|
max-w-none
|
|
max-h-none
|
|
overflow-visible
|
|
z-[101]
|
|
`}
|
|
body={renderModalBody()}
|
|
noHeaderYn='Y'
|
|
noFooterYn='N'
|
|
// footerContent={renderFooterContent()}
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Ssc |