278 lines
18 KiB
TypeScript
278 lines
18 KiB
TypeScript
"use client"
|
|
import { useFoStore } from "@/app/store";
|
|
import type { TableUpperProps } from "@/app/store/processFacility";
|
|
import { ContentsDiv, UiModal, UiTable } from "@common/business_components";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
|
|
import { useEffect, useState } from "react";
|
|
import DashBoardChartModal from "./modal/page";
|
|
|
|
export type facilityInfoProps = {
|
|
searchYear?: string;
|
|
fcltyList?: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string, efflWqltStndrdNm: string }[];
|
|
};
|
|
|
|
// 시설계획 table header 변경
|
|
const headMakeColSpanPlanFclty = (upHeadList: TableUpperProps[], planYearList: string[]) => {
|
|
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={7} style={{ whiteSpace: 'pre-line' }}>{'시설계획\n(금회)'}</TableHead>:null))}
|
|
</TableRow>
|
|
<TableRow>
|
|
{upHeadList.map((head: TableUpperProps, index: number) =>
|
|
(head.upName === 'upChangeRe'?<TableHead key={head.id} style={{ whiteSpace: 'pre-line' }}>{index===0?head.title:head.title+'\n('+planYearList[index-1]+')'}</TableHead>:null))}
|
|
</TableRow>
|
|
</> )
|
|
}
|
|
|
|
// 시설계획 table header 변경
|
|
const headMakeColSpanOperationStatus = (upHeadList: TableUpperProps[], searchYear: string) => {
|
|
return ( <>
|
|
<TableRow>
|
|
<TableHead rowSpan={1} colSpan={17} style={{ whiteSpace: 'pre-line' }}>{searchYear+'년도 운영실태'}</TableHead>
|
|
</TableRow>
|
|
<TableRow>{
|
|
upHeadList.map((head: TableUpperProps) =>
|
|
(head.upName === 'upChangeRe1'&&head.upSequnce===1?<TableHead key={head.id} rowSpan={2}colSpan={2} style={{ whiteSpace: 'pre-line' }}>{head.title}</TableHead>:
|
|
!head.upSequnce?<TableHead style={{ whiteSpace: 'pre-line' }} rowSpan={2}key={head.id}>{head.title}</TableHead>:
|
|
head.upName === 'upChangeRe2'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'연간 운영실태'}</TableHead>:
|
|
head.upName === 'upChangeRe3'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'하절기 운영실태\n(6~8월)'}</TableHead>:
|
|
head.upName === 'upChangeRe4'&&head.upSequnce===1?<TableHead key={head.id} colSpan={4} style={{ whiteSpace: 'pre-line' }}>{'동절기 운영실태\n(1~2월)'}</TableHead>:
|
|
head.upName === 'upChangeRe5'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'지하수 유입량 추정'}</TableHead>:null))}
|
|
</TableRow>
|
|
<TableRow>
|
|
{upHeadList.map((head: TableUpperProps) =>
|
|
(head.upName === 'upChangeRe2'||head.upName === 'upChangeRe3'||head.upName === 'upChangeRe4'||head.upName === 'upChangeRe5'?<TableHead style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>:null))}
|
|
</TableRow>
|
|
</> )
|
|
}
|
|
|
|
export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}: facilityInfoProps & { onFacilityChange: (facility: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string, efflWqltStndrdNm: string }) => void }) {
|
|
// 입력값 상태 관리
|
|
const {
|
|
Common,
|
|
FcltyMain,
|
|
PlanFclty,
|
|
OperationStatus,
|
|
searchOperationStatus,
|
|
searchPlanInfo
|
|
} = useFoStore((state) => state);
|
|
|
|
const [modalItem, setModalItem] = useState<{item: string, period: string, title: string, waterQlty: string} | null>(null);
|
|
const [hasSearched, setHasSearched] = useState(false);
|
|
const [prevFacilityCode, setPrevFacilityCode] = useState<string>('');
|
|
|
|
const {
|
|
isInit,
|
|
} = Common;
|
|
|
|
// Tab1
|
|
// fclty 관련
|
|
const {
|
|
upHeadListFclty,
|
|
} = FcltyMain;
|
|
|
|
// 시설계획 관련
|
|
const {
|
|
upHeadListPlanFclty,
|
|
planFcltyList,
|
|
planYearList
|
|
} = PlanFclty;
|
|
|
|
// 그리드 관련
|
|
const {
|
|
upHeadListOperationStatus,
|
|
operationalStatusList
|
|
} = OperationStatus;
|
|
|
|
const closeModal = () => {
|
|
setModalItem(null);
|
|
};
|
|
|
|
// const fcltyListArr = useMemo(() => [fcltyList], [fcltyList]);
|
|
|
|
const tableData = fcltyList;
|
|
|
|
// key 변환
|
|
const mappedTableData = tableData.map(item => ({
|
|
fcltyNm: item.bscFctNm,
|
|
facilityCapacity: item.fcltyCpc,
|
|
publicMethod: item.trtFrfNm,
|
|
location: item.efflWqltStndrdNm,
|
|
}));
|
|
|
|
const fncLoadModal = (item: string, period: string, waterQlty: string) => {
|
|
// 유량
|
|
if(item === 'flowRate'){
|
|
if(period === 'year'){
|
|
setModalItem({item: 'flowRate', period: 'year', title: '연간 유량', waterQlty: waterQlty});
|
|
}
|
|
else if(period === 'summer'){
|
|
setModalItem({item: 'flowRate', period: 'summer', title: '하절기 유량', waterQlty: waterQlty});
|
|
}
|
|
else if(period === 'winter'){
|
|
setModalItem({item: 'flowRate', period: 'winter', title: '동절기 유량', waterQlty: waterQlty});
|
|
}
|
|
}
|
|
// 수질
|
|
else if (item == 'waterQlty'){
|
|
if(period === 'year'){
|
|
setModalItem({item: 'waterQlty', period: 'year', title: '연간 수질', waterQlty: waterQlty});
|
|
}
|
|
else if(period === 'summer'){
|
|
setModalItem({item: 'waterQlty', period: 'summer', title: '하절기 수질', waterQlty: waterQlty});
|
|
}
|
|
else if(period === 'winter'){
|
|
setModalItem({item: 'waterQlty', period: 'winter', title: '동절기 수질', waterQlty: waterQlty});
|
|
}
|
|
}
|
|
// 총인
|
|
else {
|
|
if(period === 'year'){
|
|
setModalItem({item: 'chongin', period: 'year', title: '총인설비 연간 수질', waterQlty: waterQlty});
|
|
}
|
|
else if(period === 'summer'){
|
|
setModalItem({item: 'chongin', period: 'summer', title: '총인설비 하절기 수질', waterQlty: waterQlty});
|
|
}
|
|
else if(period === 'winter'){
|
|
setModalItem({item: 'chongin', period: 'winter', title: '총인설비 동절기 수질', waterQlty: waterQlty});
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isInit && fcltyList[0]?.bscFctCd && (fcltyList[0].bscFctCd !== prevFacilityCode || !hasSearched)) {
|
|
searchOperationStatus(false, searchYear, fcltyList[0].bscFctCd);
|
|
searchPlanInfo(searchYear, fcltyList[0].bscFctCd);
|
|
setHasSearched(true);
|
|
setPrevFacilityCode(fcltyList[0].bscFctCd);
|
|
planFcltyList.forEach((el: { [key: string]: string | number | boolean }, index) => {
|
|
if (index === 6) {
|
|
el['item'] = (Number(searchYear)-2).toString();
|
|
el['provisionalApproval'] = Number(fcltyList[0]?.fcltyCpc)* 0.6 - 2054.3;
|
|
} else if (index === 7) {
|
|
el['item'] = (Number(searchYear)-1).toString();
|
|
el['provisionalApproval'] = Number(fcltyList[0]?.fcltyCpc)* 0.6 + 523.1;
|
|
} else if (index === 8) {
|
|
el['item'] = (Number(searchYear)-0).toString();
|
|
el['provisionalApproval'] = Number(fcltyList[0]?.fcltyCpc)* 0.6 + 1521.2;
|
|
}
|
|
});
|
|
}
|
|
}, [isInit, searchOperationStatus, searchYear, fcltyList, hasSearched, prevFacilityCode, searchPlanInfo, planFcltyList]);
|
|
// 연도가 바뀌면 hasSearched를 false로 리셋
|
|
useEffect(() => {
|
|
setHasSearched(false);
|
|
}, [searchYear]);
|
|
|
|
useEffect(() => {
|
|
operationalStatusList.map((item: { [key: string]: string | number | boolean },index) => {
|
|
if(index===8 || index===9 || index===10 || index===11 || index===12 || index===13 || index===14 || index===15){
|
|
item['yearAvg'] = Number(item['yearAvg']).toFixed(3);
|
|
item['yearMax'] = item['yearMax']+'%';
|
|
item['yearMin'] = item['yearMin']+'%';
|
|
item['summerAll'] = item['summerAll']+'%';
|
|
item['summerThree'] = item['summerThree']+'%';
|
|
item['summerRain'] = item['summerRain']+'%';
|
|
item['winterAll'] = item['winterAll']+'%';
|
|
item['winterSunnyAvg'] = item['winterSunnyAvg']+'%';
|
|
item['winterSunnyMax'] = item['winterSunnyMax']+'%';
|
|
item['winterSunnyMin'] = item['winterSunnyMin']+'%';
|
|
}
|
|
|
|
});
|
|
}, [operationalStatusList]);
|
|
|
|
const upChangeRePlanFclty = headMakeColSpanPlanFclty(upHeadListPlanFclty, planYearList);
|
|
const upChangeHeadListOperationStatus = headMakeColSpanOperationStatus(upHeadListOperationStatus, searchYear);
|
|
return (
|
|
<>
|
|
<UiTable headName={""} tableData={mappedTableData} headlist={upHeadListFclty} pageSize={0} total={0} cellClick={ undefined } onPageChange={() => { } } />
|
|
<ContentsDiv>
|
|
<div className="grid grid-cols-12 gap-1">
|
|
<div className="col-span-5">
|
|
<Table variant="secondary">
|
|
<TableHeader>
|
|
{upChangeRePlanFclty}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{planFcltyList.map((el: { [key: string]: string | number | boolean },index) => (
|
|
<TableRow key={index+"row"} >
|
|
{upHeadListPlanFclty.map((head) => (
|
|
((index === 6 || index === 7 || index === 8) && (head.id === 'provisionalApproval' || head.id === 'stepTwo'))?
|
|
<TableCell className="text-right" colSpan={3} style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
|
|
:((index === 6 || index === 7 || index === 8) && (head.id === 'now' || head.id === 'stepOne' || head.id === 'stepThree' || head.id === 'stepFour'))?
|
|
null
|
|
:((index === 5) && (head.id === 'provisionalApproval' || head.id === 'stepTwo'))?
|
|
<TableCell colSpan={3} className="text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
|
|
:((index === 5) && (head.id === 'now' || head.id === 'stepOne' || head.id === 'stepThree'|| head.id === 'stepFour'))?
|
|
null
|
|
:(index < 5 || index > 5)&& (index!= 4) && (head.id ==='provisionalApproval'||head.id ==='now'||head.id ==='stepOne'||head.id ==='stepTwo'||head.id ==='stepThree'||head.id ==='stepFour')
|
|
?<TableCell className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
|
|
:(head.id === "provisionalApproval" && index === 4)
|
|
?<TableCell colSpan={6} className="text-right border border-[var(--border)] text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{(Number(fcltyList[0]?.fcltyCpc)* 0.6).toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 })} </TableCell>
|
|
:((head.id ==='now'||head.id ==='stepOne'||head.id ==='stepTwo'||head.id ==='stepThree'||head.id ==='stepFour') && index === 4)
|
|
?null
|
|
:(head.id === 'item' && index != 5)?
|
|
<TableCell className="text-center text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
|
|
:<TableCell className="text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="col-span-7 h-[600px] overflow-x-auto">
|
|
<div className="w-[200%]">
|
|
<Table variant="secondary">
|
|
<TableHeader>
|
|
{upChangeHeadListOperationStatus}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{operationalStatusList.map((el: { [key: string]: string | number | boolean },index) => (
|
|
<TableRow key={index+"row"} >
|
|
{upHeadListOperationStatus.map((head) => (
|
|
(head.id === 'flowRate' && index === 0)?<TableCell rowSpan={5} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'flowRate' && index === 5)?<TableCell rowSpan={6} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'flowRate' && index === 11)?<TableCell rowSpan={2} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'rdi'&&index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'rdi'&&index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
(head.id === 'rdiRain'&&index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el['rdiRain']}</TableCell>:
|
|
(head.id === 'rdiRain'&&index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}></TableCell>:
|
|
(head.id === 'waterQlty')?<TableCell className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
|
|
((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=0 && index<=4))?<TableCell className="bg-yellow-50 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('flowRate', 'year', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=5 && index<=10))?<TableCell className="bg-green-50 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('waterQlty', 'year', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=11 && index<=12))?<TableCell className="bg-blue-50 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('chongin', 'year', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=0 && index<=4))?<TableCell className="bg-yellow-100 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('flowRate', 'summer', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=5 && index<=10))?<TableCell className="bg-green-100 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('waterQlty', 'summer', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'summerAll' || head.id === 'summerThree' || head.id === 'summerRain') && (index>=11 && index<=12))?<TableCell className="bg-blue-100 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('chongin', 'summer', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=0 && index<=4))?<TableCell className="bg-yellow-200 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('flowRate', 'winter', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=5 && index<=10))?<TableCell className="bg-green-200 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('waterQlty', 'winter', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
((head.id === 'winterAll' || head.id === 'winterSunnyAvg' || head.id === 'winterSunnyMax' || head.id === 'winterSunnyMin') && (index>=11 && index<=12))?<TableCell className="bg-blue-200 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('chongin', 'winter', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
|
|
null
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentsDiv>
|
|
{modalItem && (modalItem.item === 'flowRate' || modalItem.item === 'waterQlty' || modalItem.item === 'chongin') && (
|
|
<UiModal
|
|
body={<DashBoardChartModal item={modalItem.item} period={modalItem.period} title={modalItem.title} modalData={operationalStatusList} waterQlty={modalItem.waterQlty}></DashBoardChartModal>}
|
|
bodyClass="sm:max-w-[80%] h-[88%]"
|
|
open={true}
|
|
onOpenChange={(open) => !open && closeModal()}
|
|
noHeaderYn="Y"
|
|
noFooterYn="Y"
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|