페이지 수정 요청사항 반영
This commit is contained in:
JIeunhuh
@@ -7,13 +7,14 @@ import React, { useState } from 'react'
|
||||
const FileUploadForm = ({ title }: { title: string }) => {
|
||||
const [files, setFiles] = useState<File[] | null>(null);
|
||||
const [selectedYear, setSelectedYear] = useState<string>('');
|
||||
const [selectedQuarter, setSelectedQuarter] = useState<string>('');
|
||||
|
||||
// 현재 년도부터 10년 전까지의 년도 옵션 생성
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => {
|
||||
const year = new Date().getFullYear() - i;
|
||||
return { text: `${year}년`, val: year.toString() };
|
||||
});
|
||||
|
||||
const quater = [{text: '1분기', val: '1'}, {text: '2분기', val: '2'}, {text: '3분기', val: '3'}, {text: '4분기', val: '4'}]
|
||||
return (
|
||||
<div>
|
||||
<div className='card-header'>
|
||||
@@ -32,8 +33,8 @@ const FileUploadForm = ({ title }: { title: string }) => {
|
||||
className="w-50"
|
||||
selectClass="rounded-lg bg-white"
|
||||
label="분기"
|
||||
selectArray={yearOptions}
|
||||
onSelectValue={(value: string | number) => setSelectedYear(String(value))}
|
||||
selectArray={quater}
|
||||
onSelectValue={(value: string | number) => setSelectedQuarter(String(value))}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex mt-5 items-center'>
|
||||
@@ -44,7 +45,7 @@ const FileUploadForm = ({ title }: { title: string }) => {
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (!files?.[0] || !selectedYear) {
|
||||
if (!files?.[0] || !selectedYear || !selectedQuarter) {
|
||||
alert('파일과 등록년도를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -10,14 +10,14 @@ type TitleName = {
|
||||
secondCardTitle?: string
|
||||
}
|
||||
type SelectBox = {
|
||||
labelNm?:Label
|
||||
searchChk?:boolean
|
||||
labelNm?: Label
|
||||
searchChk?: boolean
|
||||
}
|
||||
type Label= {
|
||||
type Label = {
|
||||
first: string
|
||||
second: string
|
||||
third:string
|
||||
fourth:string
|
||||
third: string
|
||||
fourth: string
|
||||
}
|
||||
type BaseLayout = {
|
||||
children?: ReactNode[]
|
||||
@@ -25,8 +25,8 @@ type BaseLayout = {
|
||||
form: any
|
||||
onSubmitEvent: Function
|
||||
graphBtn?: boolean
|
||||
firstDivBtn?:boolean
|
||||
searchBox?:SelectBox
|
||||
firstDivBtn?: boolean
|
||||
searchBox?: SelectBox
|
||||
}
|
||||
// TODO: 나중에 이벤트 추가되면 파라미터 추가 필요 ?
|
||||
/**
|
||||
@@ -38,7 +38,7 @@ type BaseLayout = {
|
||||
* @param graphBtn : 하단에 그래프 버튼 유무 처리
|
||||
* @returns
|
||||
*/
|
||||
const BaseLayout = ({ children,titleName, form, onSubmitEvent, graphBtn=false, searchBox }: BaseLayout) => {
|
||||
const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn = false, searchBox }: BaseLayout) => {
|
||||
return (
|
||||
<ContentLayout title={titleName.mainTitle}>
|
||||
<SearchDiv>
|
||||
@@ -70,7 +70,12 @@ const BaseLayout = ({ children,titleName, form, onSubmitEvent, graphBtn=false, s
|
||||
</ListDiv>
|
||||
{children?.[1] != null ? <ListDiv>
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">{titleName.secondCardTitle}</h3>
|
||||
<h3 className="text-2xl font-medium">{titleName?.secondCardTitle}</h3>
|
||||
<div>
|
||||
{graphBtn ? <Button className="!mr-[1.2rem]">다운로드</Button> : null}
|
||||
{/* 그래프 있을 시 */}
|
||||
{graphBtn ? <Button className="!mr-[1.2rem]">삭제</Button> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="card !m-[1.2rem]">{children?.[1]}</div>
|
||||
</ListDiv> : null}
|
||||
|
||||
@@ -33,7 +33,7 @@ const IrSetting = () => {
|
||||
<BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '실측자료 등록', secondCardTitle: '침입수 분석자료 입력' }} form={form} onSubmitEvent={() => { }} graphBtn={false}>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormSection name='managenm' form={form} titleNm='○ 관로 관리번호'>
|
||||
<DatePicker selected={selectedDate} onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date);}} mode={"single"} />
|
||||
<Input id="managenm" className="h-[3.2rem] text-center text-xl w-[150px]" />
|
||||
</FormSection>
|
||||
<FormSection name='region' form={form} titleNm='○ 파일위치'>
|
||||
<div className="w-[150px]">
|
||||
@@ -48,7 +48,7 @@ const IrSetting = () => {
|
||||
<FormSection name='suyeonga' form={form} titleNm='○ 수용가-맨홀 매칭결과'><div className="w-[150px]">
|
||||
<Input id="fileNm" type="file" />
|
||||
</div></FormSection>
|
||||
<FormSection name='inputdate' form={form} titleNm='○ 실수사용량 적용기간'>
|
||||
<FormSection name='inputdate' form={form} titleNm='○ 상수사용량 적용기간'>
|
||||
<DatePicker selected={selectedDate} onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} mode={"single"} />
|
||||
</FormSection>
|
||||
<FormSection name='rtkSource' form={form} titleNm='○ 오수전환율'><Input className="h-[3.2rem] text-center text-xl w-[150px]" /></FormSection>
|
||||
|
||||
@@ -138,7 +138,7 @@ export default function RTKForm() {
|
||||
<FormSection name="regopm" form={form} titleNm="○ 수용가-맨홀 매칭결과"><div className="w-[150px]">
|
||||
<Input id="fileNm2" type="file" />
|
||||
</div></FormSection>
|
||||
<FormSection name='date' form={form} titleNm='○ 실수사용량 적용기간'>
|
||||
<FormSection name='date' form={form} titleNm='○ 상수사용량 적용기간'>
|
||||
<DatePicker selected={selectedDate} onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} mode={"single"} />
|
||||
</FormSection>
|
||||
<FormSection name='rate' form={form} titleNm='○ 오수전환율'><Input className="h-[3.2rem] text-center text-xl w-[150px]" /></FormSection>
|
||||
|
||||
@@ -29,6 +29,20 @@ const tableColumn = [
|
||||
{ id: 'date', title: '분석일자' },
|
||||
{ id: 'usr', title: '분석자' }
|
||||
]
|
||||
const tableColumn2 = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'sangsu', title: '상수 사용량' },
|
||||
{ id: 'rate', title: '오수 전환율' },
|
||||
{ id: 'rtx', title: 'RTX계수출처' },
|
||||
{ id: 'rdii', title: 'RDII 기여면적' },
|
||||
{ id: 'water', title: '순오수량' },
|
||||
{ id: 'measureWater', title: '강우유출량' },
|
||||
{ id: 'ii', title: 'RDII(m2/d)' },
|
||||
{ id: 'date', title: '분석일자' },
|
||||
{ id: 'usr', title: '분석자' }
|
||||
]
|
||||
const tableInfoData = [{ 'no': '1', 'hasu': '양평하수처리장', 'guyeok': '양평', 'sangsu': '1000', 'rate': '0.5', 'water': '500', 'measureWater': '1000', 'ii': '500', 'date': '2023-10-01', 'usr': '홍길동' }]
|
||||
const Result = () => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
@@ -43,7 +57,7 @@ const Result = () => {
|
||||
}
|
||||
})
|
||||
return (
|
||||
<BaseLayout searchBox={{labelNm: {first: "분석기간",second: "침입수",third: "처리장",fourth: "처리구역",},searchChk: true,}} titleName={{ mainTitle: '분석결과', firstCardTitle: '분석이력' }} form={form} onSubmitEvent={() => { }} graphBtn={true}>
|
||||
<BaseLayout searchBox={{labelNm: {first: "분석기간",second: "침입수",third: "처리장",fourth: "처리구역",},searchChk: true,}} titleName={{ mainTitle: '분석결과', firstCardTitle: '분석이력', secondCardTitle:'RDII 산정결과 현황'}} form={form} onSubmitEvent={() => { }} graphBtn={true}>
|
||||
{[<div key='table1'>
|
||||
<div className="mb-[1.2rem] text-xl font-medium">○ 침입수 산정결과 현황</div>
|
||||
<UiTable
|
||||
@@ -56,7 +70,20 @@ const Result = () => {
|
||||
cellClick={(e) => { }}
|
||||
onPageChange={(e) => { }}
|
||||
/>
|
||||
</div>]}
|
||||
</div>,
|
||||
<div key='table2'>
|
||||
<UiTable
|
||||
headName=''
|
||||
headlist={tableColumn2}
|
||||
tableData={[]}
|
||||
total={0}
|
||||
pageSize={10}
|
||||
children={undefined}
|
||||
cellClick={(e) => { }}
|
||||
onPageChange={(e) => { }}
|
||||
/>
|
||||
</div>
|
||||
]}
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user