Merge remote-tracking branch 'origin/iipbs/sn/dev' into iipbs/sn/map
This commit is contained in:
yschoi
@@ -0,0 +1,18 @@
|
||||
import { ContentsDiv, MainDiv, Title } from '@common/business_components/ui'
|
||||
import React, { type ReactNode } from 'react'
|
||||
type LayoutNode = {
|
||||
children : ReactNode
|
||||
title : string
|
||||
}
|
||||
const ContentLayout = ({children, title} : LayoutNode) => {
|
||||
return (
|
||||
<MainDiv>
|
||||
<Title title={title} />
|
||||
<ContentsDiv>
|
||||
{children}
|
||||
</ContentsDiv>
|
||||
</MainDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContentLayout
|
||||
@@ -0,0 +1,58 @@
|
||||
"use client"
|
||||
import { FileUpload, SelectBox } from '@common/business_components/ui';
|
||||
|
||||
import { Button } from '@common/components/ui';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const FileUploadForm = ({title}:{title:string}) => {
|
||||
const [files, setFiles] = useState<File[] | null>(null);
|
||||
const [selectedYear, setSelectedYear] = useState<string>('');
|
||||
|
||||
// 현재 년도부터 10년 전까지의 년도 옵션 생성
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => {
|
||||
const year = new Date().getFullYear() - i;
|
||||
return { text: `${year}년`, val: year.toString() };
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='card-header'>
|
||||
<h3 className="text-2xl font-medium">{title}</h3>
|
||||
</div>
|
||||
<div className="card p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-[400px]">
|
||||
<FileUpload
|
||||
files={files}
|
||||
setFiles={setFiles}
|
||||
fileTypes=".xlsx,.xls"
|
||||
/>
|
||||
</div>
|
||||
<SelectBox
|
||||
className="w-50"
|
||||
selectClass="w-50 rounded-lg bg-white"
|
||||
label="관리년도"
|
||||
selectArray={yearOptions}
|
||||
onSelectValue={(value: string | number) => setSelectedYear(String(value))}
|
||||
/>
|
||||
<Button
|
||||
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) {
|
||||
alert('파일과 등록년도를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
// TODO: 파일 업로드 처리
|
||||
console.log('Upload file:', files[0], 'Year:', selectedYear);
|
||||
}}
|
||||
>
|
||||
등록
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileUploadForm
|
||||
@@ -0,0 +1,24 @@
|
||||
import { FormField } from '@common/business_components/ui'
|
||||
import React, { type ReactElement } from 'react'
|
||||
|
||||
interface FormSectionProps {
|
||||
children: ReactElement
|
||||
titleNm: string
|
||||
form: any
|
||||
name: string
|
||||
}
|
||||
|
||||
const FormSection = ({ children, titleNm, form, name }: FormSectionProps) => {
|
||||
return (
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">{titleNm}</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={name}
|
||||
render={({ field }) => children}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormSection
|
||||
@@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
import ContentLayout from '@/components/ui/contentLayout'
|
||||
import { SearchDiv, SearchFormLeft, SelectBox, SearchFormRight, Form, UiTable } from '@common/business_components/ui'
|
||||
import ListDiv from '@common/business_components/ui/list_div'
|
||||
import { Button } from '@common/components/ui'
|
||||
import React, { type ReactNode } from 'react'
|
||||
type TitleName = {
|
||||
mainTitle: string
|
||||
firstCardTitle: string
|
||||
secondCardTitle: string
|
||||
}
|
||||
type TableInfoData = {
|
||||
headList: { id: string; title: string; align?: string; }[]
|
||||
tableData: { [key: string]: string | number | boolean | object }[];
|
||||
cellClickFunc: Function
|
||||
onPageChangeFunc: Function
|
||||
}
|
||||
type BaseLayout = {
|
||||
children: ReactNode
|
||||
titleName: TitleName
|
||||
form: any
|
||||
onSubmitEvent: Function
|
||||
graphBtn: boolean
|
||||
tableInfoData: TableInfoData
|
||||
}
|
||||
// TODO: 나중에 이벤트 추가되면 파라미터 추가 필요 ?
|
||||
/**
|
||||
*
|
||||
* @param children
|
||||
* @param titleName : 메인 타이틀, 첫번째 요소 타이틀, 두번째 요소 타이틀
|
||||
* @param form : zod 스키마
|
||||
* @param onSubmitEvent : 폼 이벤트 처리
|
||||
* @param graphBtn : 하단에 그래프 버튼 유무 처리
|
||||
* @param tableInfoData : 하단 테이블 관련 props 항목
|
||||
* @returns
|
||||
*/
|
||||
const BaseLayout = ({ children, titleName, form, onSubmitEvent, graphBtn, tableInfoData }: BaseLayout) => {
|
||||
return (
|
||||
<ContentLayout title={titleName.mainTitle}>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<SelectBox className="col-span-3" label='시설검색' selectArray={[{ text: '한강 유역청', val: '1' }]} onSelectValue={(val) => { }} selectClass={undefined} />
|
||||
<SelectBox label='' selectArray={[{ text: '경기도', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
||||
<SelectBox label='' selectArray={[{ text: '양평군', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
||||
<SelectBox label='' selectArray={[{ text: '양평하수처리장', val: '1' }]} className="col-span-3" onSelectValue={() => { }} selectClass='' />
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button>조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv>
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium">{titleName.firstCardTitle}</h3>
|
||||
</div>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmitEvent)}>
|
||||
<div className="card !m-[1.2rem]">
|
||||
{/* 폼 정보 입력 칸 */}
|
||||
{children}
|
||||
<div className="flex justify-end mt-1">
|
||||
<Button type="submit">자료업로드</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</ListDiv>
|
||||
<ListDiv>
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">{titleName.secondCardTitle}</h3>
|
||||
<div>
|
||||
<Button className="!mr-[1.2rem]">삭제</Button>
|
||||
{/* 그래프 있을 시 */}
|
||||
{graphBtn ? <Button className="!mr-[1.2rem]">그래프</Button> : null}
|
||||
</div>
|
||||
</div>
|
||||
<UiTable
|
||||
headName=''
|
||||
headlist={tableInfoData.headList}
|
||||
tableData={tableInfoData.tableData}
|
||||
total={0}
|
||||
pageSize={10}
|
||||
children={undefined}
|
||||
cellClick={(e) => { tableInfoData.cellClickFunc(e) }}
|
||||
onPageChange={(e) => { tableInfoData.onPageChangeFunc(e) }}
|
||||
/>
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default BaseLayout
|
||||
@@ -0,0 +1,175 @@
|
||||
"use client"
|
||||
|
||||
import { z } from "zod"
|
||||
import { useForm, useFieldArray } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormUi, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox } from "@common/business_components/ui"
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Button } from "@common/components/ui"
|
||||
import { UiTable } from "@common/business_components/ui"
|
||||
import React from "react"
|
||||
import ContentLayout from "@/components/ui/contentLayout"
|
||||
import ListDiv from "@common/business_components/ui/list_div"
|
||||
import BaseLayout from "@/ii/BaseLayout"
|
||||
// TODO: 컴포넌트 호출 ~ 필요 코드 수정해야댐
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
rdiiArea: z.string(),
|
||||
rtkSource: z.string(),
|
||||
unitFactors: z.array(z.object({
|
||||
response: z.string(),
|
||||
R: z.string(),
|
||||
T: z.string(),
|
||||
K: z.string(),
|
||||
})),
|
||||
initialDepths: z.array(z.object({
|
||||
response: z.string(),
|
||||
Dmax: z.string(),
|
||||
Drec: z.string(),
|
||||
Do: z.string(),
|
||||
}))
|
||||
})
|
||||
|
||||
export default function RTKForm() {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
rdiiArea: "",
|
||||
rtkSource: "",
|
||||
unitFactors: [
|
||||
{ response: "Short-Term", R: "", T: "", K: "" },
|
||||
{ response: "Medium-Term", R: "", T: "", K: "" },
|
||||
{ response: "Long-Term", R: "", T: "", K: "" },
|
||||
],
|
||||
initialDepths: [
|
||||
{ response: "Short-Term", Dmax: "", Drec: "", Do: "" },
|
||||
{ response: "Medium-Term", Dmax: "", Drec: "", Do: "" },
|
||||
{ response: "Long-Term", Dmax: "", Drec: "", Do: "" },
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const { fields: unitFactorFields } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "unitFactors"
|
||||
})
|
||||
|
||||
const { fields: initialDepthFields } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "initialDepths"
|
||||
})
|
||||
|
||||
const onSubmit = (data: z.infer<typeof formSchema>) => {
|
||||
console.log("✅ 제출 데이터:", data)
|
||||
}
|
||||
|
||||
// 단위도 계수 테이블 설정
|
||||
const unitFactorHeadlist = [
|
||||
{ id: 'response', title: 'Response' },
|
||||
{ id: 'R', title: 'R' },
|
||||
{ id: 'T', title: 'T' },
|
||||
{ id: 'K', title: 'K' }
|
||||
]
|
||||
|
||||
// 초기 차단 깊이 테이블 설정
|
||||
const initialDepthHeadlist = [
|
||||
{ id: 'response', title: 'Response' },
|
||||
{ id: 'Dmax', title: 'Dmax' },
|
||||
{ id: 'Drec', title: 'Drec' },
|
||||
{ id: 'Do', title: 'Do' }
|
||||
]
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'cnfcj', title: '출처' },
|
||||
{ id: 'time', title: '입력시간' }
|
||||
]
|
||||
// 테이블 페이지 변경 핸들러
|
||||
const handlePageChange = (page: number) => {
|
||||
console.log('Page changed:', page)
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: '모의정보 설정', firstCardTitle: '모의정보 설정', secondCardTitle: 'RTX계수 입력현황' }} form={form} onSubmitEvent={() => { }} graphBtn={false} tableInfoData={{ headList: rtxNmHeadlist, tableData: [{}], cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<SelectBox label="" selectArray={[{ text: '양평', val: 1 }]} onSelectValue={() => { }} selectClass="" className="w-[150px]" />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ RDII 기여면적(ha)</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rdiiArea"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-10 text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
type=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ RTK계수 출처</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-10 text-center text-xl w-[250px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 컨테이너 */}
|
||||
<div className="mt-[1.2rem]">
|
||||
<div className="grid grid-cols-2">
|
||||
<div>
|
||||
<div className="mb-[1.2rem] text-xl font-medium">○ 단위도 계수</div>
|
||||
<UiTable
|
||||
headName=""
|
||||
className="w-[400px]"
|
||||
tableData={unitFactorFields}
|
||||
headlist={unitFactorHeadlist}
|
||||
pageSize={10}
|
||||
total={0}
|
||||
onPageChange={handlePageChange}
|
||||
cellClick={undefined}
|
||||
>
|
||||
{null}
|
||||
</UiTable>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-[1.2rem] text-xl font-medium">○ 초기 차단 깊이</div>
|
||||
<UiTable
|
||||
headName=""
|
||||
className="w-[400px]"
|
||||
tableData={initialDepthFields}
|
||||
headlist={initialDepthHeadlist}
|
||||
pageSize={10}
|
||||
total={0}
|
||||
onPageChange={handlePageChange}
|
||||
cellClick={undefined}
|
||||
>
|
||||
{null}
|
||||
</UiTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout >
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
"use client"
|
||||
|
||||
import { z } from "zod"
|
||||
import { useForm, useFieldArray } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { FormField, SelectBox } from "@common/business_components/ui"
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, DatePicker } from "@common/components/ui"
|
||||
import React, { useState } from "react"
|
||||
import BaseLayout from "@/ii/BaseLayout"
|
||||
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
inputdate: z.coerce.date(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
const region:{text:string,val:number}[] = [{text:'양평', val:1},{text:'강남',val:2},{text:'test',val:3}]
|
||||
export default function RTKForm() {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
inputdate: new Date(),
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'time', title: '입력시간' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "no": '1', 'hasu': '하수처리장', 'guyeok': '처리구역', 'fileNm': '파일', 'time': '2025-04-18' }
|
||||
]
|
||||
const handlePageChange = (page: number) => {
|
||||
console.log('Page changed:', page)
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseLayout titleName={{mainTitle: "관망도 등록",firstCardTitle: "SWMM5 파일 업로드",secondCardTitle: "SWMM 파일 업로드현황"}} form={form} onSubmitEvent={()=>{}} graphBtn={false} tableInfoData={{headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: ()=>{}, onPageChangeFunc: ()=>{}}} >
|
||||
{/* 기본 정보 입력 폼 */}
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={region} onSelectValue={()=>{}} selectClass="" className="w-[150px]"/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 입력일</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 파일위치</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file"/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 비고</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-17 text-center text-xl w-[200px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { FormField, SelectBox } from '@common/business_components/ui'
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DatePicker, Input } from '@common/components/ui'
|
||||
import BaseLayout from '@/ii/BaseLayout'
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
inputdate: z.coerce.date(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
const region:{text:string,val:number}[] = [{text:'양평', val:1},{text:'강남',val:2},{text:'test',val:3}]
|
||||
const Page = () => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
inputdate: new Date(),
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'time', title: '입력시간' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "no": '1', 'hasu': '하수처리장', 'guyeok': '처리구역', 'fileNm': '파일', 'time': '2025-04-18' }
|
||||
]
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: '티센 폴리곤 등록', firstCardTitle: '맨홀별 티센 폴리곤(shape파일) 업로드', secondCardTitle: '수용가-맨홀 매칭 파일 업로드 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={false} tableInfoData={{ headList:rtxNmHeadlist, tableData:rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={region} onSelectValue={() => { } } selectClass={undefined} className='w-[150px]'/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 입력일</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 파일위치</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 비고</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-17 text-center text-xl w-[200px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client"
|
||||
import { z } from "zod"
|
||||
import { FormField} from '@common/business_components/ui'
|
||||
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DatePicker, Input } from '@common/components/ui'
|
||||
import React, { useState } from 'react'
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
import BaseLayout from "@/ii/BaseLayout"
|
||||
|
||||
// zod 스키마 정의
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
inputdate: z.coerce.date(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
|
||||
function RegistForm() {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
inputdate: new Date(),
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
const onSubmit = (data: z.infer<typeof formSchema>) => {
|
||||
console.log("✅ 제출 데이터:", data)
|
||||
}
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'no', title: '번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'guyeok', title: '처리구역' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'time', title: '입력시간' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "no": '1', 'hasu': '하수처리장', 'guyeok': '처리구역', 'fileNm': '파일', 'time': '2025-04-18' }
|
||||
]
|
||||
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: "수용가-맨홀 등록", firstCardTitle: "수용가-맨홀 매칭 Shape파일 업로드", secondCardTitle: "수용가-맨홀 매칭 Shape파일 업로드 현황" }} form={form} onSubmitEvent={onSubmit} graphBtn={false} tableInfoData={{
|
||||
headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { }
|
||||
}}>
|
||||
{/* 기본 정보 입력 폼 */}
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="양평">양평</SelectItem>
|
||||
<SelectItem value="강남">강남</SelectItem>
|
||||
<SelectItem value="마포">마포</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 입력일</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 파일위치</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default RegistForm
|
||||
@@ -0,0 +1,114 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import BaseLayout from '../../BaseLayout'
|
||||
import { FormField, SelectBox } from '@common/business_components/ui'
|
||||
import { DatePicker, Input } from '@common/components/ui'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import FormSection from '@/components/ui/formSection'
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
suyeonga: z.number(),
|
||||
inputdate: z.coerce.date(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }]
|
||||
const IrSetting = () => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
suyeonga: 0,
|
||||
inputdate: new Date(),
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
console.log('test')
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'nm', title: '분석번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'region', title: '처리구역' },
|
||||
{ id: 'sangsu', title: '상수사용량' },
|
||||
{ id: 'wjsghks', title: '오수 전환율' },
|
||||
{ id: 'tnsdhtn', title: '순오수량' },
|
||||
{ id: 'rkddn', title: '강우 유출량' },
|
||||
{ id: 'rdii', title: 'RDII' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "nm": '1', 'hasu': '', 'region': '처리', 'sangsu': '파일', 'wjsghks': '', 'tnsdhtn': '', 'rkddn': '', 'rdii': '' }
|
||||
]
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: '침입수 산정', firstCardTitle: '침입수 산정 기초자료 설정', secondCardTitle: '침입수 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormSection name='region' form={form} titleNm='○ 처리구역'><SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' /></FormSection>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 오수 전환율</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-[3.2rem] text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 수용가 수</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="suyeonga"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 수용가-맨홀 매칭</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 상수사용량 정보</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"} className='w-[150px]'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 관망도 자료</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default IrSetting
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import BaseLayout from '../../BaseLayout'
|
||||
import { FormField, SelectBox } from '@common/business_components/ui'
|
||||
import { DatePicker, Input } from '@common/components/ui'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
inputdate: z.coerce.date(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }]
|
||||
const MeasureDataUpload = () => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
inputdate: new Date(),
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'status', title: '상태' },
|
||||
{ id: 'code', title: '지정코드' },
|
||||
{ id: 'cjfl', title: '처리' },
|
||||
{ id: 'add', title: '추가' },
|
||||
{ id: 'update', title: '변경' },
|
||||
{ id: 'error', title: '오류' },
|
||||
{ id: 'skip', title: 'Skip' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "status": '상태', 'code': '123824', 'cjfl': '처리', 'fileNm': '파일', 'add': '', 'update': '', 'error': '', 'skip': '' }
|
||||
]
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: '측정자료 등록', firstCardTitle: '하수측정자료 업로드', secondCardTitle: '하수측정자료 파일 업로드 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 입력일</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"} className='w-[150px]'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 관로 관리번호</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-[3.2rem] text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 파일위치</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default MeasureDataUpload
|
||||
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import BaseLayout from '../../BaseLayout'
|
||||
import { FormField, SelectBox } from '@common/business_components/ui'
|
||||
import { DatePicker, Input } from '@common/components/ui'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
})
|
||||
const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }]
|
||||
const RainDataUpload = () => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
}
|
||||
})
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'status', title: '상태' },
|
||||
{ id: 'code', title: '지정코드' },
|
||||
{ id: 'cjfl', title: '처리' },
|
||||
{ id: 'add', title: '추가' },
|
||||
{ id: 'update', title: '변경' },
|
||||
{ id: 'error', title: '오류' },
|
||||
{ id: 'skip', title: 'Skip' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "status": '상태', 'code': '123824', 'cjfl': '처리', 'fileNm': '파일', 'add': '', 'update': '', 'error': '', 'skip': '' }
|
||||
]
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: '강우자료 등록', firstCardTitle: '강우자료 업로드', secondCardTitle: '강우자료 파일 업로드 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<div className="space-y-[1.2rem]">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 파일위치</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default RainDataUpload
|
||||
@@ -0,0 +1,149 @@
|
||||
'use client'
|
||||
import BaseLayout from '@/ii/BaseLayout'
|
||||
import { FormField, SelectBox } from '@common/business_components/ui'
|
||||
import { DatePicker, Input } from '@common/components/ui'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import React, { useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
const formSchema = z.object({
|
||||
region: z.string(),
|
||||
suyeonga:z.number(),
|
||||
meter:z.string(),
|
||||
inputdate: z.coerce.date(),
|
||||
inpSource:z.string(),
|
||||
rtkSource: z.string(),
|
||||
})
|
||||
const region: { text: string, val: number }[] = [{ text: '양평', val: 1 }, { text: '강남', val: 2 }, { text: 'test', val: 3 }]
|
||||
const RdiiSetting = () => {
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
region: "",
|
||||
meter:"",
|
||||
suyeonga:0,
|
||||
inputdate: new Date(),
|
||||
inpSource:"",
|
||||
rtkSource: "",
|
||||
}
|
||||
})
|
||||
// TODO: 임시 데이터
|
||||
const rtxNmHeadlist = [
|
||||
{ id: 'nm', title: '분석번호' },
|
||||
{ id: 'hasu', title: '하수처리장' },
|
||||
{ id: 'region', title: '처리구역' },
|
||||
{ id: 'sangsu', title: '상수사용량' },
|
||||
{ id: 'wjsghks', title: '오수 전환율' },
|
||||
{ id: 'tnsdhtn', title: '순오수량' },
|
||||
{ id: 'rkddn', title: '강우 유출량' },
|
||||
{ id: 'rdii', title: 'RDII' }
|
||||
]
|
||||
const rtxNmDataList = [
|
||||
{ "nm": '1', 'hasu': '', 'region': '처리', 'sangsu': '파일', 'wjsghks': '', 'tnsdhtn': '', 'rkddn': '', 'rdii': '' }
|
||||
]
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
return (
|
||||
<BaseLayout titleName={{ mainTitle: 'RDII 산정', firstCardTitle: 'RDII산정 기초자료 설정', secondCardTitle: 'RDII 산정결과 현황' }} form={form} onSubmitEvent={() => { }} graphBtn={true} tableInfoData={{ headList: rtxNmHeadlist, tableData: rtxNmDataList, cellClickFunc: () => { }, onPageChangeFunc: () => { } }}>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 처리구역</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="region"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={region} onSelectValue={() => { }} selectClass={undefined} className='w-[150px]' />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 상수사용량 정보</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inputdate"
|
||||
render={({ field }) => (
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }}
|
||||
mode={"single"} className='w-[150px]'
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 관망도자료</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rtkSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ RDII 기여면적(ha)</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="meter"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-[3.2rem] text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 오수 전환율</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inpSource"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="h-[3.2rem] text-center text-xl w-[150px]"
|
||||
placeholder=""
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 강우자료</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inpSource"
|
||||
render={({ field }) => (
|
||||
<div className="w-[150px]">
|
||||
<Input id="picture" type="file" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 수용가 수</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="suyeonga"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={[]} onSelectValue={() => { }} selectClass={undefined} className='w-[150px] h-[3.2rem]' />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-[120px_1fr] items-center">
|
||||
<div className="text-xl font-medium">○ 수용가-맨홀 매칭</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="inpSource"
|
||||
render={({ field }) => (
|
||||
<SelectBox label='' selectArray={[{'text':'매칭(양평).shp','val':'1'}]} onSelectValue={() => { }} selectClass={undefined} className='h-[3.2rem] w-[150px]' />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default RdiiSetting
|
||||
@@ -0,0 +1,81 @@
|
||||
'use client'
|
||||
import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, Title, UiTable } from '@common/business_components/ui'
|
||||
import { Button, DatePicker, Input, Label } from '@common/components/ui'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import FileUploadForm from '../../components/ui/fileUploadForm'
|
||||
import ListDiv from '@common/business_components/ui/list_div'
|
||||
import ContentLayout from '@/components/ui/contentLayout'
|
||||
const tableHeadlist = [
|
||||
{ id: 'no', title: 'NO' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'manageYear', title: '기준년도' },
|
||||
{ id: 'registDt', title: '등록 일자' },
|
||||
{ id: 'registUsr', title: '등록자' }
|
||||
|
||||
]
|
||||
const tableData = [
|
||||
{ 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me' },
|
||||
{ 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2' },
|
||||
{ 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3' }
|
||||
]
|
||||
const Page = () => {
|
||||
const [selectedDate, setSelectedDate] = useState(new Date())
|
||||
const [company, setCompany] = useState('')
|
||||
const [pjNm, setpjNm] = useState('')
|
||||
return (
|
||||
<ContentLayout title='도시침수 예방사업'>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Label className="w-20 text-xl text-gray-600">수행기간</Label>
|
||||
<DatePicker mode={'single'}
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
|
||||
<span>~</span>
|
||||
<DatePicker mode={'single'}
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">수행사</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={company}
|
||||
onChange={(e) => setCompany(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<Label className="w-20 text-xl text-gray-600">사업명</Label>
|
||||
<Input
|
||||
className='w-[100px]'
|
||||
value={pjNm}
|
||||
onChange={(e) => setpjNm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm">조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
|
||||
<div>
|
||||
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button>
|
||||
</div>
|
||||
</div>
|
||||
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
|
||||
throw new Error('Function not implemented.')
|
||||
}}></UiTable>
|
||||
</ListDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='도시침수 예방사업 사업추진현황 등록' />
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const ExcelDown = () => {
|
||||
return (
|
||||
<div>excelDown</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExcelDown
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client'
|
||||
import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable } from '@common/business_components/ui'
|
||||
import { Button, DatePicker, Label } from '@common/components/ui'
|
||||
import React, { useState } from 'react'
|
||||
import FileUploadForm from '../../components/ui/fileUploadForm'
|
||||
import ListDiv from '@common/business_components/ui/list_div'
|
||||
import ContentLayout from '@/components/ui/contentLayout'
|
||||
// TODO: 임시 id
|
||||
const tableHeadlist = [
|
||||
{ id: 'no', title: 'NO' },
|
||||
{ id: 'fileNm', title: '파일명' },
|
||||
{ id: 'manageYear', title: '관리년도' },
|
||||
{ id: 'registDt', title: '등록 일자' },
|
||||
{ id: 'registUsr', title: '등록자' }
|
||||
|
||||
]
|
||||
const tableData = [
|
||||
{ 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me' },
|
||||
{ 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2' },
|
||||
{ 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3' }
|
||||
]
|
||||
const Page = () => {
|
||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
||||
return (
|
||||
<ContentLayout title='노후 하수관로 정비사업'>
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='flex items-center space-x-2'>
|
||||
<Label className="w-20 text-xl text-gray-600">등록기간</Label>
|
||||
<DatePicker mode={'single'}
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
|
||||
<span>~</span>
|
||||
<DatePicker mode={'single'}
|
||||
selected={selectedDate}
|
||||
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
|
||||
</div>
|
||||
</div>
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 mr-2" size="sm" >조회</Button>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<div className="card-header flex items-center justify-between">
|
||||
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
|
||||
<div>
|
||||
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button>
|
||||
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button>
|
||||
</div>
|
||||
</div>
|
||||
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
|
||||
throw new Error('Function not implemented.')
|
||||
}}></UiTable>
|
||||
</ListDiv>
|
||||
<ListDiv className="mt-4">
|
||||
<FileUploadForm title='노후 하수관로 정비사업 주진현황 등록' />
|
||||
</ListDiv>
|
||||
</ContentLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
+30
-4
@@ -4,10 +4,36 @@ import { Button } from "@common/components/ui";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="grid grid-cols-12 gap-2">
|
||||
<div className="col-span-2">
|
||||
<Link href={"/oper/pplines"}><Button>관로시설</Button></Link>
|
||||
</div>
|
||||
<div>
|
||||
<div><h3 className="text-2xl text-bold gap-4 mx-4">운영정보 관리</h3>
|
||||
<div className="flex flex-row gap-4 p-4">
|
||||
<Link href={"/oper/pplines"}><Button>관로시설</Button></Link>
|
||||
<Link href={"/oper/floodPre"}><Button>도시침수 예방사업</Button></Link>
|
||||
<Link href={"/oper/oldPp"}><Button>노후 하수관로 정비사업</Button></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div><h3 className="text-2xl text-bold gap-4 mx-4">I/I 분석(기초정보 설정)</h3>
|
||||
<div className="flex flex-row gap-4 p-4">
|
||||
<Link href={"/ii/baseinfo/mock"}><Button>모의정보 설정</Button></Link>
|
||||
<Link href={"/ii/baseinfo/observe"}><Button>관망도 등록</Button></Link>
|
||||
<Link href={"/ii/baseinfo/polygon"}><Button>티센 폴리곤 등록</Button></Link>
|
||||
<Link href={"/ii/baseinfo/regist"}><Button>수용가-맨홀 등록</Button></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl text-bold gap-4 mx-4">I/I 분석(침입수 분석)</h3>
|
||||
<div className="flex flex-row gap-4 p-4">
|
||||
<Link href={"/ii/ir/measureDataUpload"}><Button>하수측정자료 업로드</Button></Link>
|
||||
<Link href={"/ii/ir/irsetting"}><Button>침입수 산정</Button></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl text-bold gap-4 mx-4">I/I 분석(RDII 분석)</h3>
|
||||
<div className="flex flex-row gap-4 p-4">
|
||||
<Link href={"/ii/rdii/rain"}><Button>강우자료 등록</Button></Link>
|
||||
<Link href={"/ii/rdii/rdiisetting"}><Button>rdii 산정</Button></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user