346 lines
12 KiB
TypeScript
346 lines
12 KiB
TypeScript
import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
|
|
import { useWrStore } from "@/app/store";
|
|
import type { TableUpperProps } from "@/app/store/common/type/header";
|
|
import {
|
|
initValInUsage,
|
|
initValOutUsage,
|
|
subTotalObj,
|
|
totalObj,
|
|
type PrfType,
|
|
} from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
|
|
import {
|
|
pbnstRegArrayZod,
|
|
pbnstRegZod,
|
|
type customPbnst,
|
|
type fcBizType,
|
|
} from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
|
import { formH1Class } from "@/components/lib/class/comClass";
|
|
import { InputTableBody } from "@/components/lib/func/TableData";
|
|
import { PbnstMngForm } from "@/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm";
|
|
import { ScrollArea, Title, UiTable } from "@common/business_components/ui";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableHeader,
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@common/components/ui";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useEffect, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
export function PbnstSttnModal({ data, titleVisible,isMap}: { data: customPbnst; titleVisible?: boolean ,isMap?:boolean}) {
|
|
const { pbnstSttn, prfmnc, pbnstPrfmncSttn } = useWrStore((state) => state);
|
|
const [fcltTab, setFcltTab] = useState<string>("fclt");
|
|
const [ruseTab, setRuseTab] = useState<string>("totalPrf");
|
|
const [ruseHeadList, setRuseHeadList] = useState<TableUpperProps[]>([]);
|
|
const [ruseTableData, setRuseTableData] = useState<TableUpperProps[]>([]);
|
|
const [prfData, setPrfData] = useState<{
|
|
inPrf: any[];
|
|
outPrf: any[];
|
|
totalPrf: any[];
|
|
}>();
|
|
const [indexMng, setIndexMng] = useState<number>(0);
|
|
const form = useForm<{
|
|
items: z.infer<typeof pbnstRegZod>[];
|
|
}>({
|
|
resolver: zodResolver(z.object({ items: pbnstRegArrayZod })),
|
|
defaultValues: { items: pbnstRegArrayZod.parse([]) },
|
|
mode: "onChange",
|
|
});
|
|
|
|
|
|
useEffect(() => {
|
|
let tableData;
|
|
if (fcltTab === "fclt") {
|
|
tableData = data.fcBizs?.map((item: fcBizType) => {
|
|
return {
|
|
cycl: item.cycl + "차",
|
|
seCd: item.seCd,
|
|
gvsbs: item.gvsbs ?? "-",
|
|
lcep: item.lcep ?? "-",
|
|
cusrAlotm: item.cusrAlotm ?? "-",
|
|
etc: item.etc ?? "-",
|
|
totalMoney:
|
|
Number(item.gvsbs) +
|
|
Number(item.lcep) +
|
|
Number(item.cusrAlotm) +
|
|
(isNaN(Number(item.etc)) ? 0 : Number(item.etc)),
|
|
instlAprvSncnDt: item.instlAprvSncnDt?.toISOString ?? "-",
|
|
bizCmcnDay: item.bizCmcnDay?.toISOString ?? "-",
|
|
rprcsFcltCpct: item.rprcsFcltCpct ?? "-",
|
|
rprcsMthdCd: item.rprcsMthdCd ?? "-",
|
|
majorPrcsMsrcCd: item.majorPrcsMsrcCd ?? "-",
|
|
inoutYn: item.inoutYn ?? "-",
|
|
addr: item.addr ?? "-",
|
|
mainSplyPumpCpct: item.mainSplyPumpCpct ?? "-",
|
|
};
|
|
});
|
|
} else if (fcltTab === "sply") {
|
|
tableData = data.fcBizs.flatMap((item: fcBizType) => {
|
|
return item?.fcOrgwts?.map((fcOrgwt) => {
|
|
return {
|
|
cycl: item.cycl + "차",
|
|
orgwtWtritQnt: fcOrgwt.orgwtWtritQnt,
|
|
tmsYn: fcOrgwt.tmsYn,
|
|
dschgFmYn: fcOrgwt.dschgFmYn,
|
|
dtlPstnExpln: fcOrgwt.dtlPstnExpln,
|
|
};
|
|
});
|
|
});
|
|
} else if (fcltTab === "ppi") {
|
|
tableData = data.fcBizs?.flatMap((item: fcBizType) => {
|
|
return item?.pplInstls?.map((ppl) => {
|
|
return {
|
|
cycl: item.cycl + "차",
|
|
ppMqlt: ppl.ppMqlt,
|
|
pdmt: ppl.pdmt,
|
|
cpct: ppl.cpct,
|
|
};
|
|
});
|
|
});
|
|
} else if (fcltTab === "guarantee") {
|
|
tableData = data.fcBizs?.map((item: fcBizType) => {
|
|
return {
|
|
cycl: item.cycl + "차",
|
|
bod: item.bod,
|
|
grssClfg: item.grssClfg,
|
|
combResdch: item.combResdch,
|
|
trbt: item.trbt,
|
|
smll: item.smll,
|
|
crmty: item.crmty,
|
|
tph: item.tph,
|
|
|
|
tn: item.tn,
|
|
ph: item.ph,
|
|
cdtnv: item.cdtnv,
|
|
};
|
|
});
|
|
} else if (fcltTab === "dmdCo") {
|
|
tableData = data.fcBizs?.flatMap((item: fcBizType) => {
|
|
|
|
return item?.fcDemands?.map((dmd) => {
|
|
return {
|
|
cycl: item.cycl + "차",
|
|
dmdCoNm: dmd.dmdCoNm,
|
|
daddr: dmd.daddr,
|
|
useUsgCd: dmd.useUsgCd,
|
|
splyBgngDay: dmd.splyBgngDay?.toISOString,
|
|
splyEndDay: dmd.splyEndDay?.toISOString,
|
|
splyCpct: dmd.splyCpct,
|
|
splyFmYn: dmd.splyFmYn,
|
|
};
|
|
});
|
|
});
|
|
}
|
|
if (tableData && tableData.length > 0) {
|
|
setRuseTableData(tableData as any[]);
|
|
}
|
|
}, [fcltTab, data]);
|
|
useEffect(() => {
|
|
if (fcltTab === "fclt") {
|
|
setRuseHeadList(pbnstSttn.ruseFcltHeadList);
|
|
} else if (fcltTab === "sply") {
|
|
setRuseHeadList(pbnstSttn.ruseSplyHeadList);
|
|
} else if (fcltTab === "ppi") {
|
|
setRuseHeadList(pbnstSttn.rusePplHeadList);
|
|
} else if (fcltTab === "guarantee") {
|
|
setRuseHeadList(pbnstSttn.ruseGuranteeHeadList);
|
|
} else if (fcltTab === "dmdCo") {
|
|
setRuseHeadList(pbnstSttn.ruseDmdHeadList);
|
|
}
|
|
}, [
|
|
fcltTab,
|
|
pbnstSttn.ruseFcltHeadList,
|
|
pbnstSttn.ruseSplyHeadList,
|
|
pbnstSttn.rusePplHeadList,
|
|
pbnstSttn.ruseGuranteeHeadList,
|
|
pbnstSttn.ruseDmdHeadList,
|
|
]);
|
|
|
|
const getTablePrfData = (prfList: PrfType[]) => {
|
|
const inUsageData = structuredClone(initValInUsage);
|
|
const outUsageData = structuredClone(initValOutUsage);
|
|
const inSubtotal = { ...structuredClone(subTotalObj), 구분: "장내용수" };
|
|
const outSubtotal = { ...structuredClone(subTotalObj), 구분: "장외용수" };
|
|
|
|
if (prfList) {
|
|
prfList?.forEach((prfItem) => {
|
|
const month = Number(prfItem?.ym?.slice(4)); // "MM"
|
|
const monthKey = `${month}월`;
|
|
|
|
inUsageData.forEach((inData: any) => {
|
|
const usageKey = inData.usage;
|
|
const value = (prfItem as any)[usageKey] ?? 0;
|
|
|
|
|
|
inData[monthKey] = value;
|
|
inData.total += value;
|
|
|
|
if (inSubtotal && usageKey !== "subtotal") {
|
|
(inSubtotal as any)[monthKey] =
|
|
((inSubtotal as any)[monthKey] ?? 0) + value;
|
|
inSubtotal.total += value;
|
|
}
|
|
});
|
|
|
|
outUsageData.forEach((outData: any) => {
|
|
const usageKey = outData.usage;
|
|
const value = (prfItem as any)[usageKey] ?? 0;
|
|
|
|
outData[monthKey] = value;
|
|
outData.total += value;
|
|
|
|
if (usageKey !== "subtotal") {
|
|
(outSubtotal as any)[monthKey] =
|
|
((outSubtotal as any)[monthKey] ?? 0) + value;
|
|
outSubtotal.total += value;
|
|
}
|
|
});
|
|
});
|
|
inUsageData.push(inSubtotal);
|
|
outUsageData.push(outSubtotal);
|
|
const usageTotalObj: { [key: string]: any } = structuredClone(totalObj);
|
|
for (const key in usageTotalObj) {
|
|
if (["usage", "gubun", "edit"].includes(key)) continue;
|
|
const val =
|
|
(Number((inSubtotal as any)[key]) || 0) +
|
|
(Number((outSubtotal as any)[key]) || 0);
|
|
|
|
(usageTotalObj as any)[key] = val;
|
|
}
|
|
const tableData = [...inUsageData, ...outUsageData, usageTotalObj];
|
|
setPrfData({
|
|
inPrf: inUsageData,
|
|
outPrf: outUsageData,
|
|
totalPrf: tableData,
|
|
});
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
if (pbnstSttn.pbnstSttnRes && data) {
|
|
const prfList = pbnstSttn.pbnstSttnRes.find(
|
|
(item) => item.pbnstRuseFcltId === data.pbnstRuseFcltId
|
|
)?.prfList;
|
|
|
|
if (prfList) {
|
|
|
|
getTablePrfData(prfList);
|
|
}
|
|
}
|
|
}, [pbnstSttn.pbnstSttnRes, data]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (data) {
|
|
form.reset({ items: [data] })
|
|
}
|
|
|
|
}, [data, form])
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
{titleVisible && (
|
|
<>
|
|
<Title title={"하수재이용 시설 상세정보"} />
|
|
</>
|
|
)}
|
|
<ScrollArea className={ isMap==true? "h-[100vh]":"h-[70vh]" }>
|
|
<PbnstMngForm
|
|
form={form}
|
|
formType={"sttn"}
|
|
indexMng={indexMng}
|
|
setIndexMng={setIndexMng}
|
|
readonly={true}
|
|
/>
|
|
<div className="px-6">
|
|
<div className="">
|
|
<h1 className={formH1Class}>하수재이용시설 현황</h1>
|
|
</div>
|
|
<Tabs defaultValue="fclt" onValueChange={setFcltTab}>
|
|
<TabsList className="mt-4">
|
|
<TabsTrigger className="!text-xl" value="fclt">
|
|
하수처리수 재이용시설 현황
|
|
</TabsTrigger>
|
|
<TabsTrigger className="!text-xl" value="sply">
|
|
재이용 원수 취수 현황
|
|
</TabsTrigger>
|
|
<TabsTrigger className="!text-xl" value="ppi">
|
|
재이용 공급관로 현황
|
|
</TabsTrigger>
|
|
<TabsTrigger className="!text-xl" value="guarantee">
|
|
재이용 보증수질 현황
|
|
</TabsTrigger>
|
|
<TabsTrigger className="!text-xl" value="dmdCo">
|
|
재이용 수요처 현황
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent className="max-h-full" value={fcltTab}>
|
|
<UiTable
|
|
headName={undefined}
|
|
tableData={ruseTableData || []}
|
|
headlist={ruseHeadList || []}
|
|
pageSize={0}
|
|
total={0}
|
|
cellClick={undefined}
|
|
onPageChange={function (): void {
|
|
throw new Error("Function not implemented.");
|
|
}}
|
|
>
|
|
{fcltTab === "fclt" ? (
|
|
<HeadMakeColSpan upHeadList={pbnstSttn.ruseFcltNodeList} />
|
|
) : undefined}
|
|
</UiTable>
|
|
</TabsContent>
|
|
</Tabs>
|
|
<div className="">
|
|
<h1 className={formH1Class}>하수재이용실적</h1>
|
|
</div>
|
|
<Tabs defaultValue="totalPrf" onValueChange={setRuseTab}>
|
|
<TabsList className="mt-4">
|
|
<TabsTrigger className="!text-xl" value="totalPrf">
|
|
장내외합계
|
|
</TabsTrigger>
|
|
<TabsTrigger className="!text-xl" value="inPrf">
|
|
장내용수
|
|
</TabsTrigger>
|
|
<TabsTrigger className="!text-xl" value="outPrf">
|
|
장외용수
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent className="max-h-full" value={ruseTab}>
|
|
{prfData && (
|
|
<ListDiv className="col-span-8 pr-6 ">
|
|
<ScrollArea className="h-[60vh]">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">
|
|
{"하수처리수재이용 실적(m³) 등록결과"}
|
|
</h3>
|
|
</div>
|
|
<Table variant="secondary">
|
|
<TableHeader className="font-bold">
|
|
{headMakeprfmnc(pbnstPrfmncSttn.monthSttnHeadList, [])}
|
|
</TableHeader>
|
|
<TableBody key={prfmnc.pageKey + 'pageKey'}>
|
|
{InputTableBody(prfData[ruseTab as keyof typeof prfData] || [], pbnstPrfmncSttn.monthSttnHeadList, setPrfData as any)}
|
|
</TableBody>
|
|
</Table>
|
|
</ScrollArea>
|
|
</ListDiv>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|