211 lines
9.7 KiB
TypeScript
211 lines
9.7 KiB
TypeScript
"use client"
|
|
import { useFoStore } from "@/app/store";
|
|
import type { TableUpperProps } from "@/app/store/dashboard";
|
|
import { UITab, UiTable } from "@common/business_components/ui";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import {
|
|
TabsContent
|
|
} from "@common/components";
|
|
import { Table, TableCell, TableHead, TableRow } from "@common/components/ui";
|
|
|
|
type ModalType = {
|
|
fcltyName: string;
|
|
facilityCd : string;
|
|
sido : string;
|
|
gugun : string;
|
|
daddr : string;
|
|
fctCpc : number | '';
|
|
trtFrfNm : string;
|
|
rnDt : string;
|
|
cmplDt : string;
|
|
trstOprEtpNm : string;
|
|
bscFctClsNm : string;
|
|
mnstr : string;
|
|
efflWtrrgn : string;
|
|
lgbsn : string;
|
|
efflWqltStndrdNm : string;
|
|
rgnNm : string;
|
|
rvbsn : string;
|
|
}
|
|
|
|
// 시설계획 table header 변경
|
|
const headMakeList = (upHeadList: TableUpperProps[], gridNum:number) => {
|
|
if(gridNum===1){
|
|
return ( <>
|
|
<TableRow>{
|
|
upHeadList.map((head: TableUpperProps) =>
|
|
(!head.upSequnce?<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>:
|
|
head.upName === 'upChangeRe'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={6} style={{ whiteSpace: 'pre-line' }}>{'증설계획(m³/일)'}</TableHead>:null))}
|
|
</TableRow>
|
|
<TableRow>
|
|
{upHeadList.map((head: TableUpperProps) =>
|
|
(head.upName === 'upChangeRe'?<TableHead className="w-150" key={head.id}>{head.title}</TableHead>:null))}
|
|
</TableRow>
|
|
</> )
|
|
} else if(gridNum===2){
|
|
return ( <>
|
|
<TableRow>{
|
|
upHeadList.map((head: TableUpperProps) =>
|
|
(!head.upSequnce?<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>:
|
|
head.upName === 'upChangeRe1'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={6} style={{ whiteSpace: 'pre-line' }}>{'계획유입수질(mg/L)'}</TableHead>:
|
|
head.upName === 'upChangeRe2'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={6} style={{ whiteSpace: 'pre-line' }}>{'설계유입수질(mg/L)'}</TableHead>:null))}
|
|
</TableRow>
|
|
<TableRow>
|
|
{upHeadList.map((head: TableUpperProps) =>
|
|
(head.upName === 'upChangeRe1'||head.upName === 'upChangeRe2'?<TableHead style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>:null))}
|
|
</TableRow>
|
|
</> )
|
|
} else if(gridNum===3){
|
|
return ( <>
|
|
<TableRow>{
|
|
upHeadList.map((head: TableUpperProps) =>
|
|
(!head.upSequnce?<TableHead key={head.id}>{head.title}</TableHead>:
|
|
head.upName === 'upChangeRe1'&& head.upSequnce=== 1?<TableHead key={head.id} colSpan={2} style={{ whiteSpace: 'pre-line' }}>{'사업기간'}</TableHead>:null))}
|
|
</TableRow>
|
|
</> )
|
|
} else if(gridNum===4){
|
|
return ( <>
|
|
<TableRow>{
|
|
upHeadList.map((head: TableUpperProps) =>
|
|
(!head.upSequnce?<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>:
|
|
head.upName === 'upChangeRe1'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={6} style={{ whiteSpace: 'pre-line' }}>{'계획유입수질(mg/L)'}</TableHead>:
|
|
head.upName === 'upChangeRe2'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={6} style={{ whiteSpace: 'pre-line' }}>{'설계유입수질(mg/L)'}</TableHead>:
|
|
head.upName === 'upChangeRe3'&& head.upSequnce=== 1?<TableHead key={head.id} rowSpan={1} colSpan={6} style={{ whiteSpace: 'pre-line' }}>{'계획방류수질(mg/L)'}</TableHead>:null))}
|
|
</TableRow>
|
|
<TableRow>
|
|
{upHeadList.map((head: TableUpperProps) =>
|
|
(head.upName === 'upChangeRe1'||head.upName === 'upChangeRe2'||head.upName === 'upChangeRe3'?<TableHead style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>:null))}
|
|
</TableRow>
|
|
</> )
|
|
}
|
|
}
|
|
|
|
export default function ProcessFacilityInfoModal(props: ModalType) {
|
|
// 그리드 관련
|
|
const {ProcessFacilityDetail} = useFoStore((state) => state);
|
|
|
|
const {
|
|
upHeadListPlanInfo,
|
|
gridListPlanInfo,
|
|
upHeadListFcltyAreaInfo,
|
|
gridListFcltyAreaInfo,
|
|
|
|
upHeadListFcltyHistInfo,
|
|
gridListFcltyHistInfo,
|
|
upHeadListFcltyWaterQltyInfo,
|
|
gridListFcltyWaterQltyInfo,
|
|
|
|
upHeadListLegalWaterQlty,
|
|
gridListLegalWaterQlty,
|
|
} = ProcessFacilityDetail;
|
|
|
|
gridListFcltyAreaInfo.map((item) => {
|
|
item.efflWtrrgn = props.efflWtrrgn;
|
|
item.lgbsn = props.lgbsn;
|
|
item.efflWqltStndrdNm = props.efflWqltStndrdNm;
|
|
item.rgnNm = props.rgnNm;
|
|
item.rvbsn = props.rvbsn;
|
|
})
|
|
|
|
const tabList = [
|
|
{ value: 'common_info', label: '기본정보' },
|
|
{ value: 'history_info', label: '이력정보' },
|
|
];
|
|
const fctCpc = props.fctCpc ? props.fctCpc.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '';
|
|
const upHeadListPlanInfoChange = headMakeList(upHeadListPlanInfo, 2);
|
|
const upHeadListFcltyHistInfoChange = headMakeList(upHeadListFcltyHistInfo, 3);
|
|
const upHeadListFcltyWaterQltyInfoChange = headMakeList(upHeadListFcltyWaterQltyInfo, 4);
|
|
return (
|
|
<>
|
|
<ListDiv className="!h-[80px]">
|
|
<div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
|
|
<Table>
|
|
<thead>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'시설명'}</TableHead>
|
|
<TableCell className="w-1/3">{props.fcltyName}</TableCell>
|
|
<TableHead className="w-1/6">{'시설코드'}</TableHead>
|
|
<TableCell className="w-1/3">{props.facilityCd}</TableCell>
|
|
</TableRow>
|
|
</thead>
|
|
</Table>
|
|
</div>
|
|
</ListDiv>
|
|
<div className="overflow-y-auto">
|
|
<div className="h-[550px]">
|
|
<ListDiv className="">
|
|
<UITab tabList={tabList} defaultValue="common_info">
|
|
<TabsContent value="common_info">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">시설 기본정보</h3>
|
|
</div>
|
|
<div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
|
|
<Table>
|
|
<thead>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'시설명'}</TableHead>
|
|
<TableCell className="w-1/6">{props.fcltyName}</TableCell>
|
|
<TableHead className="w-1/6">{'시설구분'}</TableHead>
|
|
<TableCell className="w-1/6">{props.bscFctClsNm}</TableCell>
|
|
<TableHead className="w-1/6">{'시설용량(m³/일)'}</TableHead>
|
|
<TableCell className="w-1/6">{fctCpc}</TableCell>
|
|
</TableRow>
|
|
</thead>
|
|
<tbody>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'시도'}</TableHead>
|
|
<TableCell className="w-1/6">{props.sido}</TableCell>
|
|
<TableHead className="w-1/6">{'시군구'}</TableHead>
|
|
<TableCell className="w-1/6">{props.gugun}</TableCell>
|
|
<TableHead className="w-1/6">{'가동개시일'}</TableHead>
|
|
<TableCell className="w-1/6">{props.rnDt}</TableCell>
|
|
</TableRow>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'주소'}</TableHead>
|
|
<TableCell className="w-1/6" colSpan={3}>{props.daddr}</TableCell>
|
|
<TableHead className="w-1/6">{'준공일'}</TableHead>
|
|
<TableCell className="w-1/6">{props.cmplDt}</TableCell>
|
|
</TableRow>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'공법'}</TableHead>
|
|
<TableCell className="w-1/6" colSpan={3}>{props.trtFrfNm}</TableCell>
|
|
<TableHead className="w-1/6">{'관리대행업자'}</TableHead>
|
|
<TableCell className="w-1/6">{props.trstOprEtpNm}</TableCell>
|
|
</TableRow>
|
|
</tbody>
|
|
</Table>
|
|
</div>
|
|
<UiTable headName={"시설 계획정보"} tableData={gridListPlanInfo} headlist={upHeadListPlanInfo} pageSize={0} total={0} cellClick={undefined} onPageChange={()=>{}}>
|
|
{upHeadListPlanInfoChange}
|
|
</UiTable>
|
|
<UiTable headName={"시설 법적방류수질"} tableData={gridListLegalWaterQlty} headlist={upHeadListLegalWaterQlty} pageSize={0} total={0} cellClick={undefined} onPageChange={()=>{}} />
|
|
<UiTable headName={"시설 수역 및 구역정보"} tableData={gridListFcltyAreaInfo} headlist={upHeadListFcltyAreaInfo} pageSize={0} total={0} cellClick={undefined} onPageChange={()=>{}} />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="history_info">
|
|
<ListDiv>
|
|
<div className="h-[250px] w-full overflow-y-auto overflow-x-hidden">
|
|
<div className="h-[120%]">
|
|
<UiTable headName={"시설 이력관리"} tableData={gridListFcltyHistInfo} headlist={upHeadListFcltyHistInfo} pageSize={0} total={0} cellClick={undefined} onPageChange={()=>{}}>
|
|
{upHeadListFcltyHistInfoChange}
|
|
</UiTable>
|
|
</div>
|
|
</div>
|
|
</ListDiv>
|
|
<ListDiv>
|
|
<div className="h-[250px] w-full overflow-y-auto overflow-x-hidden">
|
|
<div className="h-[120%]">
|
|
<UiTable headName={"시설 수질정보"} tableData={gridListFcltyWaterQltyInfo} headlist={upHeadListFcltyWaterQltyInfo} pageSize={0} total={0} cellClick={undefined} onPageChange={()=>{}}>
|
|
{upHeadListFcltyWaterQltyInfoChange}
|
|
</UiTable>
|
|
</div>
|
|
</div>
|
|
</ListDiv>
|
|
</TabsContent>
|
|
</UITab>
|
|
</ListDiv>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} |