feat: map
- 폴더 내부 빌드 에러 수정 - SearchBar 관련 파일 주석 처리
This commit is contained in:
swcho
@@ -1,200 +0,0 @@
|
||||
'use client'
|
||||
import { getData, putData } from "../../../sn/app/components/lib/api";
|
||||
import Modal from "../../../sn/app/components/ui/modal";
|
||||
import { VerticalTable } from "../../../sn/app/components/ui/verticalTable";
|
||||
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
||||
import { Button } from "@common/components/ui";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { getLayerContentComponent } from "../../../sn/app/map/components/common";
|
||||
// TODO:
|
||||
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
|
||||
const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
|
||||
// const featureId = featureData.getId(); // 피처의 id 가져오기
|
||||
const featureId = typeof featureData.getId === 'function'
|
||||
? featureData.getId()
|
||||
: featureData.fid;
|
||||
const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
|
||||
const [tableData, setTableData] = useState<any>(null); // 피처 데이터
|
||||
const [mntrngsData, setMntrngsData] = useState(false); // 수량/수질 측정 정보
|
||||
const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
|
||||
const [buttonChk, setButtonChk] = useState(true)
|
||||
const [fetchData, setfetchData] = useState<any>(); // api 호출여부
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false); // 모달 열기 상태
|
||||
const [chkMainSsc, setChkMainSsc] = useState(false); // 중점우수토실 여부
|
||||
|
||||
// 피쳐데이터의 현재 레이어 이름 가져오는 함수
|
||||
const getSelectedLayers = () => {
|
||||
let result = null;
|
||||
const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
|
||||
let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
|
||||
layers.forEach((layer: any) => {
|
||||
const source = layer.getSource();
|
||||
if (source && source.hasFeature && featureData
|
||||
&& typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
|
||||
featureLayer = layer; // 피처가 속한 레이어 찾기
|
||||
}
|
||||
});
|
||||
// SearchModal 클릭 이벤트와 Gis 클릭 이벤트 구분하기
|
||||
if (featureLayer.get('lyrNm') === null) {
|
||||
if (featureData.lyrTypeNm === 'tb_il_swage_prcs_fclt') result = '하수처리시설';
|
||||
else if (featureData.lyrTypeNm === 'tb_ms_swage_prcs_zone') result = '하수처리구역';
|
||||
else if (featureData.lyrTypeNm === 'om_dt_untrt_swg_rain') result = '중점우수토실';
|
||||
}
|
||||
else result = featureLayer.get('lyrNm');
|
||||
|
||||
return result;
|
||||
// return featureLayer.get('lyrNm'); // 레이어 이름 출력
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
if (featureId) {
|
||||
const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
|
||||
setLayerNm(selectedLayerName); // 상태 업데이트
|
||||
const layerId = featureId.split('.')[0]
|
||||
let data = await getData(`v1/fclts/${featureId}?lyrTypeNm=${layerId}`);
|
||||
setfetchData(data)
|
||||
switch (selectedLayerName) {
|
||||
case '하수처리시설':
|
||||
setButtonChk(false)
|
||||
break;
|
||||
case '하수처리구역':
|
||||
setButtonChk(false)
|
||||
break;
|
||||
case '중점우수토실':
|
||||
setButtonChk(false)
|
||||
setChkMainSsc(true)
|
||||
|
||||
// 데이터 전처리: 합쳐진 필드 추가
|
||||
data = data ? {
|
||||
...data,
|
||||
discharge_pipe_spec: `직경: ${data.pipe_diameter || '-'} / 높이: ${data.pipe_hg || '-'} / 길이: ${data.pipe_lt || '-'}`
|
||||
} : {};
|
||||
|
||||
// 수량/수질측정 정보 데이터 호출
|
||||
const additionalResponse = await getData(`v1/onsemiro/swgRain/${data.adst_dstr_cd}/${data.manage_no}/mntrngs`);
|
||||
setMntrngsData(additionalResponse.content);
|
||||
break;
|
||||
case '우수토실':
|
||||
setButtonChk(true)
|
||||
break;
|
||||
case '하수관로':
|
||||
setButtonChk(true)
|
||||
break;
|
||||
case '오수펌프':
|
||||
setButtonChk(true)
|
||||
break;
|
||||
case '빗물펌프':
|
||||
setButtonChk(true)
|
||||
break;
|
||||
case '하수맨홀':
|
||||
setButtonChk(true)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setTableData(data);
|
||||
};
|
||||
}
|
||||
fetchData();
|
||||
}, [featureId]);
|
||||
|
||||
// 저장 시 모달 띄우기
|
||||
const handleSaveClick = () => {
|
||||
setIsModalOpen(true); // 모달 열기
|
||||
};
|
||||
|
||||
const handleModalSave = () => {
|
||||
setIsModalOpen(false); // 모달 닫기
|
||||
btnClickEvent(); // 저장 이벤트 실행
|
||||
};
|
||||
|
||||
const handleModalClose = () => {
|
||||
setIsModalOpen(false); // 모달 닫기
|
||||
};
|
||||
|
||||
const btnClickEvent = async () => {
|
||||
const bodyData: Record<string, any> = {}
|
||||
if (buttonChk && contentRef.current) {
|
||||
const inputElements = contentRef.current.querySelectorAll('input');
|
||||
const selectElements = contentRef.current.querySelectorAll('select');
|
||||
// 카멜케이스 변환 함수
|
||||
const toCamelCase = (str: string) =>
|
||||
str.replace(/_([a-z])/g, (_, char) => char.toUpperCase());
|
||||
// select 태그의 값 가져오기
|
||||
selectElements.forEach((select) => {
|
||||
const camelCaseId = toCamelCase(select.id);
|
||||
bodyData[camelCaseId] = select.value;
|
||||
});
|
||||
// input 태그의 값 가져오기
|
||||
inputElements.forEach((input) => {
|
||||
const camelCaseId = toCamelCase(input.id);
|
||||
bodyData[camelCaseId] = input.value;
|
||||
});
|
||||
if (layerNm === '하수관로') bodyData['lyrTypeNm'] = 'tb_ms_swage_ppl'
|
||||
else if (layerNm === '우수토실') bodyData['lyrTypeNm'] = 'tb_ms_stofcbr'
|
||||
else if (layerNm === '오수펌프') bodyData['lyrTypeNm'] = 'tb_ms_swage_pmstn'
|
||||
else if (layerNm === '빗물펌프') bodyData['lyrTypeNm'] = 'tb_ms_swage_pmstn'
|
||||
else if (layerNm === '하수맨홀') bodyData['lyrTypeNm'] = 'tb_ms_swage_mnhl'
|
||||
bodyData['fid'] = featureId
|
||||
const data = await putData(`v1/fclts/${featureId}`, bodyData);
|
||||
if (data.status == 200) {
|
||||
alert('저장되었습니다')
|
||||
setTableData(data)
|
||||
setfetchData(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
type ContentComponentProps = {
|
||||
featureData: any;
|
||||
chkMainSsc: boolean;
|
||||
additionalData: any;
|
||||
};
|
||||
const ContentComponent = layerNm ? getLayerContentComponent(layerNm) as React.ComponentType<ContentComponentProps> : null;
|
||||
return (
|
||||
<div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[102]">
|
||||
<div className="card-header bg-primary flex items-center justify-between p-4">
|
||||
<div className="flex mx-3 flex-col">
|
||||
<h3 className="text-2xl font-medium text-white text-label">{layerNm} 정보</h3>
|
||||
<div className="font-medium text-white text-label">(00구 00리 하수관로)</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white hover:text-gray-700 focus:outline-none"
|
||||
aria-label="닫기"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden flex-1" ref={contentRef}>
|
||||
<VerticalTable
|
||||
headName='LX 연계정보'
|
||||
tableData={[tableData]}
|
||||
headlist={headlist}
|
||||
pageSize={20}
|
||||
total={0}
|
||||
children={undefined}
|
||||
cellClick={undefined}
|
||||
onPageChange={function (page: number): void {
|
||||
throw new Error("Function not implemented.");
|
||||
}}
|
||||
/>
|
||||
<div className="w-full mx-5 flex items-center justify-end space-x-2">
|
||||
{buttonChk ? <Button onClick={handleSaveClick} className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
|
||||
저장
|
||||
</Button> : null}
|
||||
</div>
|
||||
<Modal isModalOpen={isModalOpen} title="자체입력정보 저장" setIsModalOpen={setIsModalOpen} closeModal={handleModalClose} saveModal={handleModalSave}><div className="text-lg">정보를 저장하시겠습니까?</div></Modal>
|
||||
{ContentComponent &&
|
||||
<ContentComponent
|
||||
featureData={fetchData}
|
||||
chkMainSsc={chkMainSsc}
|
||||
additionalData={mntrngsData}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default FeatureClickEventPopup;
|
||||
@@ -1,621 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Form,
|
||||
FormField,
|
||||
FormUi,
|
||||
SelectBox,
|
||||
} from "@common/business_components/ui";
|
||||
import { Button, Input } from "@common/components/ui";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import {
|
||||
hdtflZod,
|
||||
type customHtdflBdst,
|
||||
} from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import { useEffect } from "react";
|
||||
import BdstReg from "@/components/ui/form/fcltReg/bdstReg/bdstReg";
|
||||
import {
|
||||
formatCommaNumber,
|
||||
handleCommaNumberChange,
|
||||
} from "@/components/lib/func/commom";
|
||||
import { formH1Class } from "@/components/lib/class/comClass";
|
||||
|
||||
export default function HtdflPrfmncSttnPopup({
|
||||
htdflForm,
|
||||
isModal,
|
||||
}: {
|
||||
htdflForm: customHtdflBdst;
|
||||
isModal: boolean;
|
||||
}) {
|
||||
const { code, htdflBdstUpdate, htdflBdstReg } = useWrStore((state) => state);
|
||||
|
||||
const defaultValues: z.infer<typeof hdtflZod> = hdtflZod.parse({});
|
||||
|
||||
const form = useForm<z.infer<typeof hdtflZod>>({
|
||||
resolver: zodResolver(hdtflZod),
|
||||
defaultValues: defaultValues,
|
||||
});
|
||||
|
||||
const onSubmit = (values: z.infer<typeof hdtflZod>) => {
|
||||
if (isModal) {
|
||||
htdflBdstReg(values, '41');
|
||||
} else {
|
||||
htdflBdstUpdate(values, '41');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const cleanHtdflData = (raw: any): z.infer<typeof hdtflZod> => {
|
||||
return {
|
||||
...raw,
|
||||
frstArchPrmsnDt: new Date(raw?.frstArchPrmsnDt || null),
|
||||
archChgPrmsnDt: raw?.archChgPrmsnDt
|
||||
? new Date(raw?.archChgPrmsnDt)
|
||||
: null,
|
||||
chgBuilding: (raw?.chgBuilding || []).map((item: any) => ({
|
||||
...item,
|
||||
archChgPrmsnDt:
|
||||
item?.archChgPrmsnDt === null
|
||||
? new Date()
|
||||
: new Date(item?.archChgPrmsnDt),
|
||||
bdstChgNm: item?.bdstChgNm ?? "", // null → ""
|
||||
})),
|
||||
reuseBuilding: (raw?.reuseBuilding || []).map((item: any) => ({
|
||||
...item,
|
||||
instlCmptnDt: new Date(item?.instlCmptnDt),
|
||||
htdflObj: {
|
||||
...item?.htdflObj,
|
||||
},
|
||||
})),
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("form errors:", form.formState.errors);
|
||||
}, [form.formState.errors]);
|
||||
|
||||
useEffect(() => {
|
||||
if (hdtflZod) form.reset(cleanHtdflData(htdflForm));
|
||||
}, [htdflForm]);
|
||||
|
||||
return (
|
||||
<div className="!mx-[1.6rem] !p-0r">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
{/* <div className="flex justify-between items-center mx-3"> */}
|
||||
<div>
|
||||
<div className="grid grid-cols-12 flex items-center card-header">
|
||||
<h1 className="text-2xl font-medium text-label col-span-10">온배수 시설 정보</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isModal && htdflForm != undefined ? <BdstReg form={form} /> : <></>}
|
||||
{isModal ? (
|
||||
<h1 className="text-xl col-span-10 mt-4">
|
||||
온배수 시설 정보{" "}
|
||||
</h1>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-6 gap-2 mt-4">
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.etgtType"
|
||||
render={({ field }) => (
|
||||
<FormUi label="발전유형(코드정비후 수정)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.fclCpct" // 이름 이상함.
|
||||
render={({ field }) => (
|
||||
<FormUi label="설비용량">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.plwtYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="담수화 여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
label={""}
|
||||
selectClass={selectClass}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" my-4">
|
||||
<h1 className={formH1Class}>
|
||||
온배수 시설 운영현황
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-10 gap-1 mt-4">
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.orgwtWtritSpt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="원수취수 지점(코드정비후 수정)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
value={field.value ?? 0}
|
||||
onChange={(e) => {
|
||||
field.onChange(Number(e.target.value));
|
||||
}}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.orgwtOcrnProcs"
|
||||
render={({ field }) => (
|
||||
<FormUi label="원수발생 공정">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.wtritEntrcTp"
|
||||
render={({ field }) => (
|
||||
<FormUi label="취수구 온도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.amtgnr"
|
||||
render={({ field }) => (
|
||||
<FormUi label="발생량(m³/년)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.prcsProcsYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="처리공정">
|
||||
<SelectBox
|
||||
className={""}
|
||||
label={""}
|
||||
selectClass={selectClass}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.prcsFcltCpct"
|
||||
render={({ field }) => (
|
||||
<FormUi label="처리시설 용량(m³/년)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.fmYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="유량계유무">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.utztnCpct"
|
||||
render={({ field }) => (
|
||||
<FormUi label="이용량(m³/년)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.utztnUsg"
|
||||
render={({ field }) => (
|
||||
<FormUi label="이용용도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" my-2">
|
||||
<h1 className={formH1Class}>
|
||||
요구수질
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.grssClfg"
|
||||
render={({ field }) => (
|
||||
<FormUi label="총대장균군">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.tn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="총질소">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.combResdch"
|
||||
render={({ field }) => (
|
||||
<FormUi label="결합잔류염소">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6 ">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.tph"
|
||||
render={({ field }) => (
|
||||
<FormUi label="총인">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.trbt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="탁도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.ph"
|
||||
render={({ field }) => (
|
||||
<FormUi label="수소이온농도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.bod"
|
||||
render={({ field }) => (
|
||||
<FormUi label="생물학적 산소요구량">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.clIonQnt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="염화물">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.smll"
|
||||
render={({ field }) => (
|
||||
<FormUi label="냄새">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.cdtnv"
|
||||
render={({ field }) => (
|
||||
<FormUi label="전기전도도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.crmty"
|
||||
render={({ field }) => (
|
||||
<FormUi label="색도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.htdflObj.emsnExitTp"
|
||||
render={({ field }) => (
|
||||
<FormUi label="배출구온도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="10"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
import Gis from "@common/business_components/ui/map/Gis";
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import FeatureClickEventPopup from "../featureClickEventPopup";
|
||||
import { mapService } from "../service";
|
||||
// import { MapSearchBar } from "../mapSearchBar";
|
||||
import NewWindowPopup from "../newWindowPopup";
|
||||
@@ -10,7 +9,6 @@ import GisApp from "@common/business_components/ui/map/lib/gis.core";
|
||||
|
||||
const Map = () => {
|
||||
const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
|
||||
const [selectedFeature, setSelectedFeature] = useState(null); // 선택된 피처 상태
|
||||
const gisMaps = useRef<any | null>(null);
|
||||
const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
|
||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(true); // SearchModal 열림 상태
|
||||
@@ -46,7 +44,7 @@ const Map = () => {
|
||||
|
||||
// SearchModal, GisContent 등에서 호출
|
||||
const onFeatureSelect = (data: any) => {
|
||||
let map = gisMaps.current;
|
||||
const map = gisMaps.current;
|
||||
if (!map) {
|
||||
console.warn("지도가 초기화되지 않았습니다.");
|
||||
return;
|
||||
@@ -60,7 +58,7 @@ const Map = () => {
|
||||
select.resetSelectedFeature();
|
||||
|
||||
// 2. data가 OpenLayers Feature 인스턴스인지 확인
|
||||
let foundFeature = null;
|
||||
let foundFeature: any = null;
|
||||
if (
|
||||
data &&
|
||||
typeof data.getGeometry === "function" &&
|
||||
@@ -85,9 +83,9 @@ const Map = () => {
|
||||
|
||||
// 3. 피처 선택
|
||||
if (foundFeature) {
|
||||
let geometry = foundFeature.getGeometry();
|
||||
const geometry = foundFeature.getGeometry();
|
||||
if (geometry) {
|
||||
let extent = geometry.getExtent();
|
||||
const extent = geometry.getExtent();
|
||||
|
||||
map.getView().fit(extent, {
|
||||
duration: 300,
|
||||
|
||||
+314
-314
@@ -1,340 +1,340 @@
|
||||
"use client"
|
||||
// "use client"
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { SelectDataType } from '@common/business_components/ui/search_input_select';
|
||||
import { SelectBox } from '@common/business_components/ui/select';
|
||||
// import React, { useEffect, useState } from 'react';
|
||||
// import type { SelectDataType } from '@common/business_components/ui/search_input_select';
|
||||
// import { SelectBox } from '@common/business_components/ui/select';
|
||||
|
||||
/**
|
||||
* 검색 폼 왼쪽 컴포넌트 타입
|
||||
*
|
||||
* @param isShowPart 구분 조회 여부
|
||||
* @param children 자식 컴포넌트
|
||||
* @param selectSidoData 시도 데이터
|
||||
* @param selectSigunData 시군구 데이터
|
||||
* @param selectRegionData 유역 데이터
|
||||
* @param selectUnitWaterShedData 단위유역 데이터
|
||||
* @param selectMiddleRegionData 중권역 데이터
|
||||
* @param selectEnvPartData 환경청 데이터
|
||||
* @param selectEnvPartSidoData 환경청 시도 데이터
|
||||
* @param selectEnvPartSigunData 환경청 시군구 데이터
|
||||
* @param setRtnPartValue 부분 값 변경 핸들러
|
||||
*/
|
||||
type SearchFormLeftProps = {
|
||||
isShowPart?: boolean | undefined;
|
||||
children: React.ReactNode;
|
||||
selectSidoData?: SelectDataType[] | [];
|
||||
selectSigunData?: SelectDataType[] | [];
|
||||
selectRegionData?: SelectDataType[] | [];
|
||||
selectUnitWaterShedData?: SelectDataType[] | [];
|
||||
selectMiddleRegionData?: SelectDataType[] | [];
|
||||
selectEnvPartData?: EnvPartSelectDataType[] | [];
|
||||
selectEnvPartSidoData?: SelectDataType[] | [];
|
||||
selectEnvPartSigunData?: SelectDataType[] | [];
|
||||
// /**
|
||||
// * 검색 폼 왼쪽 컴포넌트 타입
|
||||
// *
|
||||
// * @param isShowPart 구분 조회 여부
|
||||
// * @param children 자식 컴포넌트
|
||||
// * @param selectSidoData 시도 데이터
|
||||
// * @param selectSigunData 시군구 데이터
|
||||
// * @param selectRegionData 유역 데이터
|
||||
// * @param selectUnitWaterShedData 단위유역 데이터
|
||||
// * @param selectMiddleRegionData 중권역 데이터
|
||||
// * @param selectEnvPartData 환경청 데이터
|
||||
// * @param selectEnvPartSidoData 환경청 시도 데이터
|
||||
// * @param selectEnvPartSigunData 환경청 시군구 데이터
|
||||
// * @param setRtnPartValue 부분 값 변경 핸들러
|
||||
// */
|
||||
// type SearchFormLeftProps = {
|
||||
// isShowPart?: boolean | undefined;
|
||||
// children: React.ReactNode;
|
||||
// selectSidoData?: SelectDataType[] | [];
|
||||
// selectSigunData?: SelectDataType[] | [];
|
||||
// selectRegionData?: SelectDataType[] | [];
|
||||
// selectUnitWaterShedData?: SelectDataType[] | [];
|
||||
// selectMiddleRegionData?: SelectDataType[] | [];
|
||||
// selectEnvPartData?: EnvPartSelectDataType[] | [];
|
||||
// selectEnvPartSidoData?: SelectDataType[] | [];
|
||||
// selectEnvPartSigunData?: SelectDataType[] | [];
|
||||
|
||||
setRtnPartValue?: (value: string) => void;
|
||||
setRtnSidoValue?: (value: string) => void;
|
||||
setRtnSigunValue?: (value: string) => void;
|
||||
setRtnRegionValue?: (value: string) => void;
|
||||
setRtnUnitWaterShedValue?: (value: string) => void;
|
||||
setRtnMiddleRegionValue?: (value: string) => void;
|
||||
setRtnEnvPartValue?: (value: string) => void;
|
||||
setRtnEnvPartSidoValue?: (value: string) => void;
|
||||
setRtnEnvPartSigunValue?: (value: string) => void;
|
||||
setRtnSidoText?: (value: string) => void;
|
||||
setRtnSigunText?: (value: string) => void;
|
||||
resetTrigger?: boolean;
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
// setRtnPartValue?: (value: string) => void;
|
||||
// setRtnSidoValue?: (value: string) => void;
|
||||
// setRtnSigunValue?: (value: string) => void;
|
||||
// setRtnRegionValue?: (value: string) => void;
|
||||
// setRtnUnitWaterShedValue?: (value: string) => void;
|
||||
// setRtnMiddleRegionValue?: (value: string) => void;
|
||||
// setRtnEnvPartValue?: (value: string) => void;
|
||||
// setRtnEnvPartSidoValue?: (value: string) => void;
|
||||
// setRtnEnvPartSigunValue?: (value: string) => void;
|
||||
// setRtnSidoText?: (value: string) => void;
|
||||
// setRtnSigunText?: (value: string) => void;
|
||||
// resetTrigger?: boolean;
|
||||
// isAdmin?: boolean;
|
||||
// }
|
||||
|
||||
export type EnvPartSelectDataType = SelectDataType & {
|
||||
adstDliStrCd: string,
|
||||
}
|
||||
// export type EnvPartSelectDataType = SelectDataType & {
|
||||
// adstDliStrCd: string,
|
||||
// }
|
||||
|
||||
const selectPartData: SelectDataType[] = [
|
||||
{ text: "행정별", val: 'A' },
|
||||
{ text: "유역별", val: 'R' },
|
||||
{ text: "환경청별", val: 'G' },
|
||||
];
|
||||
// const selectPartData: SelectDataType[] = [
|
||||
// { text: "행정별", val: 'A' },
|
||||
// { text: "유역별", val: 'R' },
|
||||
// { text: "환경청별", val: 'G' },
|
||||
// ];
|
||||
|
||||
function MapSearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) {
|
||||
/******************선택된 데이터******************/
|
||||
const [partValue, setPartValue] = useState<string>('A');
|
||||
//행정별 시도 시군구
|
||||
const [sidoValue, setSidoValue] = useState<string>('0');
|
||||
const [sigunValue, setSigunValue] = useState<string>('0');
|
||||
const [sidoText, setSidoText] = useState<string>('');
|
||||
const [sigunText, setSigunText] = useState<string>('');
|
||||
//유역별
|
||||
const [regionValue, setRegionValue] = useState<string>('0');
|
||||
const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
|
||||
const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
|
||||
//환경청별 시도 시군구
|
||||
const [envPartValue, setEnvPartValue] = useState<string>('0');
|
||||
// 환경청
|
||||
const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
|
||||
// function MapSearchFormLeft({ isShowPart = false, children, selectSidoData = [], selectSigunData = [], selectRegionData = [], selectUnitWaterShedData = [], selectMiddleRegionData = [], selectEnvPartData = [], setRtnPartValue, setRtnSidoValue, setRtnSidoText, setRtnSigunValue, setRtnSigunText, setRtnRegionValue, setRtnUnitWaterShedValue, setRtnMiddleRegionValue, setRtnEnvPartValue, setRtnEnvPartSidoValue, setRtnEnvPartSigunValue, resetTrigger = false, isAdmin = false }: SearchFormLeftProps) {
|
||||
// /******************선택된 데이터******************/
|
||||
// const [partValue, setPartValue] = useState<string>('A');
|
||||
// //행정별 시도 시군구
|
||||
// const [sidoValue, setSidoValue] = useState<string>('0');
|
||||
// const [sigunValue, setSigunValue] = useState<string>('0');
|
||||
// const [sidoText, setSidoText] = useState<string>('');
|
||||
// const [sigunText, setSigunText] = useState<string>('');
|
||||
// //유역별
|
||||
// const [regionValue, setRegionValue] = useState<string>('0');
|
||||
// const [unitWaterShedValue, setUnitWaterShedValue] = useState<string>('0');
|
||||
// const [middleRegionValue, setMiddleRegionValue] = useState<string>('0');
|
||||
// //환경청별 시도 시군구
|
||||
// const [envPartValue, setEnvPartValue] = useState<string>('0');
|
||||
// // 환경청
|
||||
// const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState<SelectDataType[]>([]);
|
||||
|
||||
/****************** 셀렉트 리스트 데이터. ******************/
|
||||
// 조회된 조건에 맞는 시도 시군 유역
|
||||
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
// 조회된 조건에 맞는 환경청 시도 시군
|
||||
const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
// /****************** 셀렉트 리스트 데이터. ******************/
|
||||
// // 조회된 조건에 맞는 시도 시군 유역
|
||||
// const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
// const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
// const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
// // 조회된 조건에 맞는 환경청 시도 시군
|
||||
// const [filteredEnvPartData, setFilteredEnvPartData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
// const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState<EnvPartSelectDataType[]>([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
// const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
|
||||
|
||||
// 시군구 세팅
|
||||
const initializeSigunData = (sidoCd: string) => {
|
||||
if (sidoCd === '0') {
|
||||
setSigunValue('0');
|
||||
setFilteredSigunData([{ text: "전체", val: '0' }]);
|
||||
} else {
|
||||
const newFilteredData = [
|
||||
{ text: "전체", val: '0' },
|
||||
...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
|
||||
];
|
||||
setSigunValue('0');
|
||||
setFilteredSigunData(newFilteredData);
|
||||
}
|
||||
}
|
||||
// // 시군구 세팅
|
||||
// const initializeSigunData = (sidoCd: string) => {
|
||||
// if (sidoCd === '0') {
|
||||
// setSigunValue('0');
|
||||
// setFilteredSigunData([{ text: "전체", val: '0' }]);
|
||||
// } else {
|
||||
// const newFilteredData = [
|
||||
// { text: "전체", val: '0' },
|
||||
// ...selectSigunData.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd)
|
||||
// ];
|
||||
// setSigunValue('0');
|
||||
// setFilteredSigunData(newFilteredData);
|
||||
// }
|
||||
// }
|
||||
|
||||
// 단위유역 세팅
|
||||
const initializeUnitWaterShedData = (regionCd: string) => {
|
||||
if (regionCd === '0') {
|
||||
setUnitWaterShedValue('0');
|
||||
setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
|
||||
} else {
|
||||
const newFilteredData = [
|
||||
{ text: "전체", val: '0' },
|
||||
...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
|
||||
];
|
||||
setUnitWaterShedValue('0');
|
||||
setFilteredUnitWaterShedData(newFilteredData);
|
||||
}
|
||||
}
|
||||
// // 단위유역 세팅
|
||||
// const initializeUnitWaterShedData = (regionCd: string) => {
|
||||
// if (regionCd === '0') {
|
||||
// setUnitWaterShedValue('0');
|
||||
// setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
|
||||
// } else {
|
||||
// const newFilteredData = [
|
||||
// { text: "전체", val: '0' },
|
||||
// ...selectUnitWaterShedData.filter((item: SelectDataType) => item.val.substring(0, 1) === regionCd)
|
||||
// ];
|
||||
// setUnitWaterShedValue('0');
|
||||
// setFilteredUnitWaterShedData(newFilteredData);
|
||||
// }
|
||||
// }
|
||||
|
||||
// 중권역 세팅
|
||||
const initializeMiddleRegionData = (unitWaterShedCd: string) => {
|
||||
if (unitWaterShedCd === '0') {
|
||||
setMiddleRegionValue('0');
|
||||
setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
|
||||
} else {
|
||||
const newFilteredData = [
|
||||
{ text: "전체", val: '0' },
|
||||
...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
|
||||
];
|
||||
setMiddleRegionValue('0');
|
||||
setFilteredMiddleRegionData(newFilteredData);
|
||||
}
|
||||
}
|
||||
// // 중권역 세팅
|
||||
// const initializeMiddleRegionData = (unitWaterShedCd: string) => {
|
||||
// if (unitWaterShedCd === '0') {
|
||||
// setMiddleRegionValue('0');
|
||||
// setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
|
||||
// } else {
|
||||
// const newFilteredData = [
|
||||
// { text: "전체", val: '0' },
|
||||
// ...selectMiddleRegionData.filter((item: SelectDataType) => item.val.substring(0, 2) === unitWaterShedCd)
|
||||
// ];
|
||||
// setMiddleRegionValue('0');
|
||||
// setFilteredMiddleRegionData(newFilteredData);
|
||||
// }
|
||||
// }
|
||||
|
||||
// 환경청 세팅 - 시도
|
||||
const initializeCityDataByEnvPartSido = (envPartCd: string) => {
|
||||
const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
|
||||
const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
|
||||
// // 환경청 세팅 - 시도
|
||||
// const initializeCityDataByEnvPartSido = (envPartCd: string) => {
|
||||
// const foundEnvPart = selectEnvPartData.find((item: EnvPartSelectDataType) => item.val === envPartCd);
|
||||
// const cityArray = foundEnvPart?.adstDliStrCd.toString().split('|').join('').split(',');
|
||||
|
||||
// 시군구 데이터
|
||||
const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
|
||||
// // 시군구 데이터
|
||||
// const envSigunData = selectSigunData.filter((item: SelectDataType) => cityArray?.includes(item.val));
|
||||
|
||||
// 환경청 시도 데이터
|
||||
const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
|
||||
const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
|
||||
setFilteredEnvPartSigunDataSelected(envSigunData);
|
||||
// // 환경청 시도 데이터
|
||||
// const sidoArray = [...new Set(envSigunData.map((item: SelectDataType) => item.val.substring(0, 2)))];
|
||||
// const envSidoData = selectSidoData.filter((item: SelectDataType) => sidoArray?.includes(item.val));
|
||||
// setFilteredEnvPartSigunDataSelected(envSigunData);
|
||||
|
||||
setFilteredEnvPartSidoData([
|
||||
{ text: "전체", val: '0', adstDliStrCd: '' },
|
||||
...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '' }))
|
||||
]);
|
||||
}
|
||||
// setFilteredEnvPartSidoData([
|
||||
// { text: "전체", val: '0', adstDliStrCd: '' },
|
||||
// ...envSidoData.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '' }))
|
||||
// ]);
|
||||
// }
|
||||
|
||||
// 환경청 세팅 - 시군구
|
||||
const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
|
||||
const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
|
||||
setFilteredEnvPartSigunData([
|
||||
{ text: "전체", val: '0' },
|
||||
...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
|
||||
]);
|
||||
}
|
||||
// // 환경청 세팅 - 시군구
|
||||
// const initializeCityDataByEnvPartSigun = (sidoCd: string) => {
|
||||
// const envSigunData = filteredEnvPartSigunDataSelected.filter((item: SelectDataType) => item.val.substring(0, 2) === sidoCd);
|
||||
// setFilteredEnvPartSigunData([
|
||||
// { text: "전체", val: '0' },
|
||||
// ...envSigunData.map((item: SelectDataType) => ({ text: item.text, val: item.val }))
|
||||
// ]);
|
||||
// }
|
||||
|
||||
const onSelectValue = (val: string, type: string) => {
|
||||
let selectedSido;
|
||||
let selectedSigun;
|
||||
let selectedEnvPartSido;
|
||||
let selectedEnvPartSigun;
|
||||
// const onSelectValue = (val: string, type: string) => {
|
||||
// let selectedSido;
|
||||
// let selectedSigun;
|
||||
// let selectedEnvPartSido;
|
||||
// let selectedEnvPartSigun;
|
||||
|
||||
switch (type) {
|
||||
case 'part':
|
||||
setPartValue(val);
|
||||
if (setRtnPartValue) {
|
||||
setRtnPartValue(val);
|
||||
}
|
||||
// 구분
|
||||
if (val == 'R') {
|
||||
initializeMiddleRegionData('0');
|
||||
initializeUnitWaterShedData('0');
|
||||
} else if (val == 'G') {
|
||||
setFilteredEnvPartData([
|
||||
{ text: "전체", val: '0', adstDliStrCd: '' },
|
||||
...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
|
||||
]);
|
||||
setEnvPartValue('0');
|
||||
initializeCityDataByEnvPartSido('0');
|
||||
} else {
|
||||
initializeSigunData('0');
|
||||
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
}
|
||||
// switch (type) {
|
||||
// case 'part':
|
||||
// setPartValue(val);
|
||||
// if (setRtnPartValue) {
|
||||
// setRtnPartValue(val);
|
||||
// }
|
||||
// // 구분
|
||||
// if (val == 'R') {
|
||||
// initializeMiddleRegionData('0');
|
||||
// initializeUnitWaterShedData('0');
|
||||
// } else if (val == 'G') {
|
||||
// setFilteredEnvPartData([
|
||||
// { text: "전체", val: '0', adstDliStrCd: '' },
|
||||
// ...selectEnvPartData.filter((item: EnvPartSelectDataType) => item.val !== null && item.adstDliStrCd !== '')
|
||||
// ]);
|
||||
// setEnvPartValue('0');
|
||||
// initializeCityDataByEnvPartSido('0');
|
||||
// } else {
|
||||
// initializeSigunData('0');
|
||||
// onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
// }
|
||||
|
||||
// 다른 selectbox 전체로 초기화
|
||||
onSelectValue(selectSidoData[0]?.val || '0', 'sido');
|
||||
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
break;
|
||||
case 'sido':
|
||||
setSidoValue(val);
|
||||
selectedSido = selectSidoData.find(item => item.val === val);
|
||||
setSidoText(selectedSido?.text || '');
|
||||
if (setRtnSidoValue) {
|
||||
setRtnSidoValue(val);
|
||||
}
|
||||
if (setRtnSidoText) {
|
||||
setRtnSidoText(selectedSido?.text || '');
|
||||
}
|
||||
initializeSigunData(val);
|
||||
onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
break;
|
||||
case 'sigun':
|
||||
if (setRtnSigunValue) {
|
||||
setRtnSigunValue(val);
|
||||
}
|
||||
setSigunValue(val);
|
||||
selectedSigun = filteredSigunData.find(item => item.val === val);
|
||||
if (setRtnSigunText) {
|
||||
setRtnSigunText(selectedSigun?.text || '');
|
||||
}
|
||||
setSigunText(selectedSigun?.text || '');
|
||||
break;
|
||||
// // 다른 selectbox 전체로 초기화
|
||||
// onSelectValue(selectSidoData[0]?.val || '0', 'sido');
|
||||
// onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
// break;
|
||||
// case 'sido':
|
||||
// setSidoValue(val);
|
||||
// selectedSido = selectSidoData.find(item => item.val === val);
|
||||
// setSidoText(selectedSido?.text || '');
|
||||
// if (setRtnSidoValue) {
|
||||
// setRtnSidoValue(val);
|
||||
// }
|
||||
// if (setRtnSidoText) {
|
||||
// setRtnSidoText(selectedSido?.text || '');
|
||||
// }
|
||||
// initializeSigunData(val);
|
||||
// onSelectValue(selectSigunData[0]?.val || '0', 'sigun');
|
||||
// break;
|
||||
// case 'sigun':
|
||||
// if (setRtnSigunValue) {
|
||||
// setRtnSigunValue(val);
|
||||
// }
|
||||
// setSigunValue(val);
|
||||
// selectedSigun = filteredSigunData.find(item => item.val === val);
|
||||
// if (setRtnSigunText) {
|
||||
// setRtnSigunText(selectedSigun?.text || '');
|
||||
// }
|
||||
// setSigunText(selectedSigun?.text || '');
|
||||
// break;
|
||||
|
||||
// 유역 세팅
|
||||
case 'region':
|
||||
setRegionValue(val);
|
||||
if (setRtnRegionValue) {
|
||||
setRtnRegionValue(val);
|
||||
}
|
||||
initializeUnitWaterShedData(val);
|
||||
onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
|
||||
break;
|
||||
case 'unitWaterShed':
|
||||
setUnitWaterShedValue(val);
|
||||
if (setRtnUnitWaterShedValue) {
|
||||
setRtnUnitWaterShedValue(val);
|
||||
}
|
||||
initializeMiddleRegionData(val);
|
||||
onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
|
||||
break;
|
||||
case 'middleRegion':
|
||||
setMiddleRegionValue(val);
|
||||
if (setRtnMiddleRegionValue) {
|
||||
setRtnMiddleRegionValue(val);
|
||||
}
|
||||
break;
|
||||
// // 유역 세팅
|
||||
// case 'region':
|
||||
// setRegionValue(val);
|
||||
// if (setRtnRegionValue) {
|
||||
// setRtnRegionValue(val);
|
||||
// }
|
||||
// initializeUnitWaterShedData(val);
|
||||
// onSelectValue(selectUnitWaterShedData[0]?.val || '0', 'unitWaterShed');
|
||||
// break;
|
||||
// case 'unitWaterShed':
|
||||
// setUnitWaterShedValue(val);
|
||||
// if (setRtnUnitWaterShedValue) {
|
||||
// setRtnUnitWaterShedValue(val);
|
||||
// }
|
||||
// initializeMiddleRegionData(val);
|
||||
// onSelectValue(selectMiddleRegionData[0]?.val || '0', 'middleRegion');
|
||||
// break;
|
||||
// case 'middleRegion':
|
||||
// setMiddleRegionValue(val);
|
||||
// if (setRtnMiddleRegionValue) {
|
||||
// setRtnMiddleRegionValue(val);
|
||||
// }
|
||||
// break;
|
||||
|
||||
// 환경청 세팅
|
||||
case 'envPart':
|
||||
setEnvPartValue(val);
|
||||
if (setRtnEnvPartValue) {
|
||||
setRtnEnvPartValue(val);
|
||||
}
|
||||
initializeCityDataByEnvPartSido(val);
|
||||
onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
|
||||
break;
|
||||
case 'envPartSido':
|
||||
setSidoValue(val);
|
||||
selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val);
|
||||
setSidoText(selectedEnvPartSido?.text || '');
|
||||
if (setRtnEnvPartSidoValue) {
|
||||
setRtnEnvPartSidoValue(val);
|
||||
}
|
||||
initializeCityDataByEnvPartSigun(val);
|
||||
onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
|
||||
break;
|
||||
case 'envPartSigun':
|
||||
setSigunValue(val);
|
||||
selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val);
|
||||
setSigunText(selectedEnvPartSigun?.text || '');
|
||||
if (setRtnEnvPartSigunValue) {
|
||||
setRtnEnvPartSigunValue(val);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
// // 환경청 세팅
|
||||
// case 'envPart':
|
||||
// setEnvPartValue(val);
|
||||
// if (setRtnEnvPartValue) {
|
||||
// setRtnEnvPartValue(val);
|
||||
// }
|
||||
// initializeCityDataByEnvPartSido(val);
|
||||
// onSelectValue(filteredEnvPartSidoData[0]?.val || '0', 'envPartSido');
|
||||
// break;
|
||||
// case 'envPartSido':
|
||||
// setSidoValue(val);
|
||||
// selectedEnvPartSido = filteredEnvPartSidoData.find(item => item.val === val);
|
||||
// setSidoText(selectedEnvPartSido?.text || '');
|
||||
// if (setRtnEnvPartSidoValue) {
|
||||
// setRtnEnvPartSidoValue(val);
|
||||
// }
|
||||
// initializeCityDataByEnvPartSigun(val);
|
||||
// onSelectValue(filteredEnvPartSigunData[0]?.val || '0', 'envPartSigun');
|
||||
// break;
|
||||
// case 'envPartSigun':
|
||||
// setSigunValue(val);
|
||||
// selectedEnvPartSigun = filteredEnvPartSigunData.find(item => item.val === val);
|
||||
// setSigunText(selectedEnvPartSigun?.text || '');
|
||||
// if (setRtnEnvPartSigunValue) {
|
||||
// setRtnEnvPartSigunValue(val);
|
||||
// }
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 리셋 함수
|
||||
const resetAllValues = () => {
|
||||
setPartValue('A');
|
||||
setSidoValue('0');
|
||||
setSigunValue('0');
|
||||
setRegionValue('0');
|
||||
setUnitWaterShedValue('0');
|
||||
setMiddleRegionValue('0');
|
||||
setEnvPartValue('0');
|
||||
// // 리셋 함수
|
||||
// const resetAllValues = () => {
|
||||
// setPartValue('A');
|
||||
// setSidoValue('0');
|
||||
// setSigunValue('0');
|
||||
// setRegionValue('0');
|
||||
// setUnitWaterShedValue('0');
|
||||
// setMiddleRegionValue('0');
|
||||
// setEnvPartValue('0');
|
||||
|
||||
setFilteredSigunData([{ text: "전체", val: '0' }]);
|
||||
setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
|
||||
setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
|
||||
setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
|
||||
// setFilteredSigunData([{ text: "전체", val: '0' }]);
|
||||
// setFilteredUnitWaterShedData([{ text: "전체", val: '0' }]);
|
||||
// setFilteredMiddleRegionData([{ text: "전체", val: '0' }]);
|
||||
// setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
// setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '' }]);
|
||||
// setFilteredEnvPartSigunData([{ text: "전체", val: '0' }]);
|
||||
|
||||
if (setRtnPartValue) setRtnPartValue('A');
|
||||
if (setRtnSidoValue) setRtnSidoValue('0');
|
||||
if (setRtnSigunValue) setRtnSigunValue('0');
|
||||
if (setRtnRegionValue) setRtnRegionValue('0');
|
||||
if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
|
||||
if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
|
||||
if (setRtnEnvPartValue) setRtnEnvPartValue('0');
|
||||
if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
|
||||
if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
|
||||
};
|
||||
// if (setRtnPartValue) setRtnPartValue('A');
|
||||
// if (setRtnSidoValue) setRtnSidoValue('0');
|
||||
// if (setRtnSigunValue) setRtnSigunValue('0');
|
||||
// if (setRtnRegionValue) setRtnRegionValue('0');
|
||||
// if (setRtnUnitWaterShedValue) setRtnUnitWaterShedValue('0');
|
||||
// if (setRtnMiddleRegionValue) setRtnMiddleRegionValue('0');
|
||||
// if (setRtnEnvPartValue) setRtnEnvPartValue('0');
|
||||
// if (setRtnEnvPartSidoValue) setRtnEnvPartSidoValue('0');
|
||||
// if (setRtnEnvPartSigunValue) setRtnEnvPartSigunValue('0');
|
||||
// };
|
||||
|
||||
// 리셋 트리거 변경 감지
|
||||
useEffect(() => {
|
||||
if (resetTrigger) {
|
||||
resetAllValues();
|
||||
// 리셋 후 트리거를 false로 설정
|
||||
if (setRtnPartValue) {
|
||||
setRtnPartValue('0');
|
||||
}
|
||||
}
|
||||
}, [resetTrigger]);
|
||||
// // 리셋 트리거 변경 감지
|
||||
// useEffect(() => {
|
||||
// if (resetTrigger) {
|
||||
// resetAllValues();
|
||||
// // 리셋 후 트리거를 false로 설정
|
||||
// if (setRtnPartValue) {
|
||||
// setRtnPartValue('0');
|
||||
// }
|
||||
// }
|
||||
// }, [resetTrigger]);
|
||||
|
||||
return (
|
||||
isShowPart ? (
|
||||
<div className="flex gap-5">
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'구분'} selectArray={isAdmin ? selectPartData.slice(0, 1) : selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={'w-32'} />
|
||||
{partValue === 'R' ? (
|
||||
<>
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={'w-44'} />
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={'w-44'} />
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={'w-44'} />
|
||||
</>
|
||||
) : partValue === 'G' ? (
|
||||
<>
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'w-44'} />
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={'w-44'} />
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={'w-44'} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={'w-44'} />
|
||||
<SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={'w-44'} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-12 gap-5 w-11/12 m-4">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
// return (
|
||||
// isShowPart ? (
|
||||
// <div className="flex gap-5">
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'구분'} selectArray={isAdmin ? selectPartData.slice(0, 1) : selectPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'part')} value={partValue} selectClass={'w-32'} />
|
||||
// {partValue === 'R' ? (
|
||||
// <>
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'유역'} selectArray={selectRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={'w-44'} />
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'단위유역'} selectArray={filteredUnitWaterShedData} onSelectValue={(val) => onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={'w-44'} />
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'중권역'} selectArray={filteredMiddleRegionData} onSelectValue={(val) => onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={'w-44'} />
|
||||
// </>
|
||||
// ) : partValue === 'G' ? (
|
||||
// <>
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'환경청'} selectArray={filteredEnvPartData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'w-44'} />
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={filteredEnvPartSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={'w-44'} />
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredEnvPartSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={'w-44'} />
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={'w-44'} />
|
||||
// <SelectBox className="w-auto whitespace-nowrap" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={'w-44'} />
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// ) : (
|
||||
// <div className="grid grid-cols-12 gap-5 w-11/12 m-4">
|
||||
// {children}
|
||||
// </div>
|
||||
// )
|
||||
// )
|
||||
// }
|
||||
|
||||
export { MapSearchFormLeft };
|
||||
// export { MapSearchFormLeft };
|
||||
|
||||
@@ -1,51 +1,29 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
||||
import { excelDownload, tableData } from "@/components/lib/func/commom";
|
||||
import { Title, UiTable, UITab, ContentsDiv, ScrollArea } from '@common/business_components';
|
||||
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
||||
import React, { useCallback, useState, useEffect } from 'react';
|
||||
import NewWindowPortal from '@/app/map/newWindowPortal';
|
||||
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
|
||||
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
|
||||
import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import { useWrStore } from "@/app/store";
|
||||
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
||||
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
|
||||
import { fetchType, getFetch, postFectch } from "@/components/lib/api";
|
||||
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
||||
import { excelDownload, tableData } from "@/components/lib/func/commom";
|
||||
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
|
||||
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
|
||||
import { set } from "react-hook-form";
|
||||
import { Title, UITab, UiTable } from '@common/business_components';
|
||||
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
||||
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
interface NewWindowPopupProps {
|
||||
featureData: any;
|
||||
checkedLayers?: string[];
|
||||
checkedLayersData?: any[];
|
||||
seletectedLayerNm?: string
|
||||
viewMode?: 'list' | 'detail' | 'nothing'
|
||||
onFeatureSelect: (data: any) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// 탭
|
||||
const TABS = [
|
||||
{ val: "0", text: "재이용시설1" },
|
||||
{ val: "1", text: "재이용시설2" },
|
||||
{ val: "2", text: "재이용시설n" },
|
||||
];
|
||||
|
||||
// 데이터의 속성(key)을 사용자에게 보여줄 한글 이름으로 변환하기 위한 맵
|
||||
// 실제 데이터에 맞게 이 부분을 확장해야 합니다.
|
||||
const propertyNameMap: { [key: string]: string } = {
|
||||
fid: '고유 ID',
|
||||
fcltNm: '시설명',
|
||||
opertDe: '운영일자',
|
||||
addr: '주소',
|
||||
// ... 필요한 만큼 속성 매핑 추가
|
||||
};
|
||||
|
||||
const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
featureData,
|
||||
checkedLayers = [],
|
||||
checkedLayersData = [],
|
||||
seletectedLayerNm,
|
||||
onFeatureSelect,
|
||||
onClose
|
||||
@@ -70,7 +48,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
pbnSttnInit,
|
||||
getFlcts
|
||||
} = useWrStore((state) => state);
|
||||
const { fclts, pbnstSttnResCount} = pbnstSttn
|
||||
const { fclts, pbnstSttnResCount } = pbnstSttn
|
||||
const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>()
|
||||
|
||||
// 빗물재이용시설 변수
|
||||
@@ -79,10 +57,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
);
|
||||
let { rainSttnRes, rainSttnResCount } = rainSttn;
|
||||
const [rainTable, setRainTable] = useState<customRainBdst[]>();
|
||||
const [rainBdstChgProps, setRainBdstChgProps] = useState<{
|
||||
isOpen: boolean;
|
||||
chBuilding: chgBuilding[];
|
||||
}>({ isOpen: false, chBuilding: [] });
|
||||
const [rainPage, setRainPage] = useState(1)
|
||||
const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
|
||||
@@ -93,15 +67,12 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
let { rswtSttnRes, rswtSttnResCount } = rswtSttn;
|
||||
const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
|
||||
const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [rswtrBdstChgProps, setRswtrBdstChgProps] = useState<{
|
||||
isOpen: boolean;
|
||||
chBuilding: chgBuilding[];
|
||||
}>({ isOpen: false, chBuilding: [] });
|
||||
|
||||
const [rswtrPage, setRswtrPage] = useState(1);
|
||||
|
||||
// 온배수시설 변수
|
||||
const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
|
||||
let { htdflSttnRes,htdflSttnResCount } = htdflSttn;
|
||||
let { htdflSttnRes, htdflSttnResCount } = htdflSttn;
|
||||
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
|
||||
const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
|
||||
const [htdflPage, setHtdflPage] = useState(1)
|
||||
@@ -117,13 +88,12 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
}>({ data: undefined });
|
||||
const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
|
||||
const [hasuPage, setHasuPage] = useState<number>(1);
|
||||
const [hasuRes,setHasuRes] = useState<number>()
|
||||
if (!featureData) return;
|
||||
///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
|
||||
const getSelectedLayers = () => {
|
||||
let result = null;
|
||||
const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
|
||||
let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
|
||||
let featureLayer: { get: (key: string) => any }; // 피처가 속한 레이어를 찾기 위한 변수
|
||||
layers.forEach((layer: any) => {
|
||||
const source = layer.getSource();
|
||||
if (source && source.hasFeature && featureData
|
||||
@@ -152,10 +122,10 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
setFcltPk(featureCd); // 현재 호출된 featureCd 저장
|
||||
fetchHasuDetail(featureCd, selectedVal?.swtrmt_fclt_cd);
|
||||
}
|
||||
else{
|
||||
else {
|
||||
featureCd = selectedVal?.bdst_nm;
|
||||
setFcltPk(featureCd)
|
||||
detainSttn(featureCd,layerId)
|
||||
detainSttn(featureCd, layerId)
|
||||
}
|
||||
setViewMode("detail")
|
||||
}
|
||||
@@ -176,14 +146,14 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
onClose()
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 재이용 현황 초기값
|
||||
useEffect(() => {
|
||||
if (!pbnstSttn.isInit) {
|
||||
getFlcts()
|
||||
}
|
||||
}, [seletectedLayerNm, pbnstSttn.isInit]);
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
pbnSttnInit("1", "15", {
|
||||
partValue: "A",
|
||||
sidoValue: '0',
|
||||
@@ -195,7 +165,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
sidoText: "",
|
||||
sigunText: ""
|
||||
}, String(new Date().getFullYear()), pbnstSttn.fclts);
|
||||
},[fclts])
|
||||
}, [fclts])
|
||||
useEffect(() => {
|
||||
setBdstTable(pbnstSttn.pbnstSttnRes);
|
||||
}, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]);
|
||||
@@ -237,7 +207,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
sigunText: "",
|
||||
},
|
||||
"",
|
||||
String(new Date().getFullYear()),fclts
|
||||
String(new Date().getFullYear()), fclts
|
||||
);
|
||||
}, []);
|
||||
const excelClick = useCallback(() => {
|
||||
@@ -263,9 +233,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
// setViewMode('detail')
|
||||
onFeatureSelect(rainTable[index]);
|
||||
onClose();
|
||||
} else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) {
|
||||
if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null)
|
||||
setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding });
|
||||
}
|
||||
}
|
||||
const detainSttn = async (featureCd: string, layerNm: string) => {
|
||||
@@ -274,13 +241,13 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
rainSttnRes = res
|
||||
setRainDetailModal({ isOpen: true, data: rainSttnRes[0] });
|
||||
}
|
||||
else if(layerNm == '중수도시설'){
|
||||
const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
|
||||
else if (layerNm == '중수도시설') {
|
||||
const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
|
||||
rswtSttnRes = res
|
||||
console.log('중수도', res, featureCd)
|
||||
setRswtrDetailModal({isOpen:true,data:rswtSttnRes[0]})
|
||||
setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] })
|
||||
}
|
||||
else{
|
||||
else {
|
||||
const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
|
||||
htdflSttnRes = res
|
||||
setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
|
||||
@@ -289,7 +256,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
|
||||
useEffect(() => {
|
||||
if (!rainSttn.isInit) {
|
||||
rainSttnInit(false,1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
rainSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
}
|
||||
}, [rainSttn.isInit, rainSttnInit]);
|
||||
|
||||
@@ -325,7 +292,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
}, [code, rainSttnRes, rainSttn.rainSttHeadList]);
|
||||
|
||||
useEffect(() => {
|
||||
rainSttnSearch(false,rainPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
rainSttnSearch(false, rainPage, "20", '', '', code.cityCd, code.sggCd);
|
||||
}, [rainPage]);
|
||||
///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
|
||||
|
||||
@@ -397,7 +364,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!htdflSttn.isInit) {
|
||||
initHtdfl(false,1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd);
|
||||
}
|
||||
}, [htdflSttn.isInit, initHtdfl]);
|
||||
|
||||
@@ -466,15 +433,15 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
|
||||
layerId = seletectedLayerNm || '';
|
||||
}
|
||||
//하수처리시설
|
||||
let isPrcsFclt = layerId == '하수처리시설'
|
||||
const isPrcsFclt = layerId == '하수처리시설'
|
||||
// 재이용시설
|
||||
let isPbnst = layerId == '하수재이용시설';
|
||||
const isPbnst = layerId == '하수재이용시설';
|
||||
// 빗물이용시설
|
||||
let isRain = layerId == '빗물이용시설';
|
||||
const isRain = layerId == '빗물이용시설';
|
||||
// 중수도시설
|
||||
let isRswt = layerId == '중수도시설';
|
||||
const isRswt = layerId == '중수도시설';
|
||||
// 온배수시설
|
||||
let isHtdfl = layerId == '온배수시설';
|
||||
const isHtdfl = layerId == '온배수시설';
|
||||
if (isPrcsFclt) {
|
||||
if (viewMode == 'list') {
|
||||
return (
|
||||
|
||||
@@ -81,7 +81,7 @@ const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, ti
|
||||
onCloseRef.current();
|
||||
// onClose();
|
||||
}
|
||||
}, [onClose, title]);
|
||||
}, [handleUnload, onClose, title]);
|
||||
|
||||
// `createPortal`을 사용해 children을 새 창의 container div에 렌더링합니다.
|
||||
return container ? createPortal(children, container) : null;
|
||||
|
||||
@@ -1,582 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { initValInUsage, initValOutUsage, subTotalObj, totalObj, type PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
|
||||
import { CHART_FORM, ContentsDiv, MainChart, ScrollArea, SelectBox, UiTable, type ChartConfig } from "@common/business_components";
|
||||
import ListDiv from "@common/business_components/ui/list_div";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
|
||||
interface PbnstPrfmncSttnPopupProps {
|
||||
isVisible?: boolean;
|
||||
}
|
||||
|
||||
export default function PbnstPrfmncSttnPopup({ isVisible = true }: PbnstPrfmncSttnPopupProps) {
|
||||
const { pbnstPrfmncSttn, pbnstPrfmncInit, prfmnc } = useWrStore((state) => state);
|
||||
const { monthHeadList } = prfmnc
|
||||
const { prfmncRes, rawData, selectYearList } = pbnstPrfmncSttn;
|
||||
const [year, setYear] = useState<string>(String(new Date().getFullYear()));
|
||||
const [chartConfig, setChartConfig] = useState<ChartConfig>({});
|
||||
const [chartData, setChartData] = useState<dnChartForm[]>([]);
|
||||
const [dnInUsage, setDnInUsage] = useState<dnChartForm[]>([]);
|
||||
const [dnInChartConfig, setDnInChartConfig] = useState<ChartConfig>({});
|
||||
const [dnOutUsage, setDnOutUsage] = useState<dnChartForm[]>([]);
|
||||
const [dnOutChartConfig, setDnOutChartConfig] = useState<ChartConfig>({});
|
||||
const [barData, setBarData] = useState<barChartForm[]>([]);
|
||||
const [barChartConfig, setBarChartConfig] = useState<ChartConfig>({});
|
||||
const [prfData, setPrfData] = useState<any[]>();
|
||||
const [lnInChartConfig, setLnInChartConfig] = useState<ChartConfig>({});
|
||||
const [lnOutChartConfig, setLnOutChartConfig] = useState<ChartConfig>({});
|
||||
const [inLineData, setInLineData] = useState<{
|
||||
chartData1: lineChartDataProps[];
|
||||
chartData2: lineChartDataProps[];
|
||||
chartData3: lineChartDataProps[];
|
||||
chartData4: lineChartDataProps[];
|
||||
chartData5: lineChartDataProps[];
|
||||
chartData6: lineChartDataProps[];
|
||||
chartData7: lineChartDataProps[];
|
||||
chartData8: lineChartDataProps[];
|
||||
chartData9: lineChartDataProps[];
|
||||
}>();
|
||||
// const [lnInChartConfig, setLnInChartConfig] = useState<ChartConfig>({});
|
||||
const [outLineData, setOutLineData] = useState<{
|
||||
chartData1: lineChartDataProps[];
|
||||
chartData2: lineChartDataProps[];
|
||||
chartData3: lineChartDataProps[];
|
||||
chartData4: lineChartDataProps[];
|
||||
chartData5: lineChartDataProps[];
|
||||
chartData6: lineChartDataProps[];
|
||||
}>();
|
||||
|
||||
|
||||
|
||||
type dnChartForm = { label: string, val: number, fill?: string };
|
||||
type barChartForm = { label: string, "장내용수": number, "장외용수": number };
|
||||
type lineChartDataProps = { label: string, val: number, color: string };
|
||||
|
||||
const prfTableData = (prfList: PrfType[], year: string) => {
|
||||
const inUsageData = initValInUsage;
|
||||
const outUsageData = initValOutUsage;
|
||||
|
||||
const inSubtotal = subTotalObj;
|
||||
const outSubtotal = subTotalObj;
|
||||
|
||||
console.log(' prfList ', prfList)
|
||||
const prfFilter = prfList?.filter((e) => e.ym.slice(0, 4) === year)
|
||||
if (prfList && prfFilter.length > 0) {
|
||||
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 } = 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(tableData);
|
||||
|
||||
} else {
|
||||
setPrfData([]);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
let wshwtr = 0;
|
||||
let coolUswtr = 0;
|
||||
let cleanUswtr = 0;
|
||||
let drwtUswtr = 0;
|
||||
let dltnUswtr = 0;
|
||||
let ithlRswtr = 0;
|
||||
let ithlEtcUswtr = 0;
|
||||
let cleanToilUswtr = 0;
|
||||
let resn = 0;
|
||||
let lndwtr = 0;
|
||||
let hydUswtr = 0;
|
||||
let ugwtChr = 0;
|
||||
let farmUswtr = 0;
|
||||
let rvrKeepUswtr = 0;
|
||||
let indstUswtr = 0;
|
||||
if (rawData) {
|
||||
rawData.forEach((item) => {
|
||||
prfTableData(item.prfList, year);
|
||||
item.prfList.filter((e) => e.ym.slice(0, 4) === year).forEach((element) => {
|
||||
|
||||
wshwtr += element.wshwtr; //세척수
|
||||
coolUswtr += element.coolUswtr; //냉각수
|
||||
cleanUswtr += element.cleanUswtr; //청소수
|
||||
drwtUswtr += element.drwtUswtr; //식수대
|
||||
dltnUswtr += element.dltnUswtr //희석용수
|
||||
ithlRswtr += element.ithlRswtr //중수도
|
||||
ithlEtcUswtr += element.ithlEtcUswtr //기타
|
||||
cleanToilUswtr += element.cleanToilUswtr //청소화장실용수
|
||||
resn += element.resn //세척살수용수
|
||||
|
||||
lndwtr += element.lndwtr; //조경용수
|
||||
hydUswtr += element.hydUswtr; //친수용수
|
||||
ugwtChr += element.ugwtChr; //지하수충전
|
||||
farmUswtr += element.farmUswtr //농업용수
|
||||
rvrKeepUswtr += element.rvrKeepUswtr //하천등유지용수
|
||||
indstUswtr += element.indstUswtr //공업용수
|
||||
|
||||
});
|
||||
})
|
||||
const data: dnChartForm[] = []
|
||||
data?.push({ label: "세척수", val: wshwtr, fill: "red" })
|
||||
data?.push({ label: "냉각수", val: coolUswtr, fill: "orange" })
|
||||
data?.push({ label: "청소수", val: cleanUswtr, fill: "yellow" })
|
||||
data?.push({ label: "식수대", val: drwtUswtr, fill: "green" })
|
||||
data?.push({ label: "희석용수", val: dltnUswtr, fill: "skyblue" })
|
||||
data?.push({ label: "중수도", val: ithlRswtr, fill: "blue" })
|
||||
data?.push({ label: "기타", val: ithlEtcUswtr, fill: "purple" })
|
||||
data?.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "red" })
|
||||
data?.push({ label: "세척살수용수", val: resn, fill: "orange" })
|
||||
data?.push({ label: "조경용수", val: lndwtr, fill: "yellow" })
|
||||
data?.push({ label: "친수용수", val: hydUswtr, fill: "green" })
|
||||
data?.push({ label: "지하수충전", val: ugwtChr, fill: "skyblue" })
|
||||
data?.push({ label: "농업용수", val: farmUswtr, fill: "blue" })
|
||||
data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "purple" })
|
||||
data?.push({ label: "공업용수", val: indstUswtr, fill: "black" })
|
||||
setChartData(data);
|
||||
}
|
||||
}, [rawData, year])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfig = chartData.reduce((config, element) => {
|
||||
config[element.label] = {
|
||||
label: element.label,
|
||||
fill: element.fill
|
||||
};
|
||||
return config;
|
||||
}, {} as Record<string, { label: string; fill?: string }>) satisfies ChartConfig;
|
||||
setChartConfig(newChartConfig);
|
||||
}, [chartData]);
|
||||
|
||||
// 장내용수 도넛차트
|
||||
useEffect(() => {
|
||||
let wshwtr = 0;
|
||||
let coolUswtr = 0;
|
||||
let cleanUswtr = 0;
|
||||
let drwtUswtr = 0;
|
||||
let dltnUswtr = 0;
|
||||
let ithlRswtr = 0;
|
||||
let ithlEtcUswtr = 0;
|
||||
let cleanToilUswtr = 0;
|
||||
let resn = 0;
|
||||
if (rawData) {
|
||||
rawData.forEach((item) => {
|
||||
item.prfList.filter((e) => e.ym.slice(0, 4) === year).forEach((element) => {
|
||||
|
||||
wshwtr += element.wshwtr; //세척수
|
||||
coolUswtr += element.coolUswtr; //냉각수
|
||||
cleanUswtr += element.cleanUswtr; //청소수
|
||||
drwtUswtr += element.drwtUswtr; //식수대
|
||||
dltnUswtr += element.dltnUswtr //희석용수
|
||||
ithlRswtr += element.ithlRswtr //중수도
|
||||
ithlEtcUswtr += element.ithlEtcUswtr //기타
|
||||
cleanToilUswtr += element.cleanToilUswtr //청소화장실용수
|
||||
resn += element.resn //세척살수용수
|
||||
});
|
||||
})
|
||||
const data: dnChartForm[] = []
|
||||
data?.push({ label: "세척수", val: wshwtr, fill: "yellow" })
|
||||
data?.push({ label: "냉각수", val: coolUswtr, fill: "green" })
|
||||
data?.push({ label: "청소수", val: cleanUswtr, fill: "yellow" })
|
||||
data?.push({ label: "식수대", val: drwtUswtr, fill: "green" })
|
||||
data?.push({ label: "희석용수", val: dltnUswtr, fill: "yellow" })
|
||||
data?.push({ label: "중수도", val: ithlRswtr, fill: "green" })
|
||||
data?.push({ label: "기타", val: ithlEtcUswtr, fill: "yellow" })
|
||||
data?.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "green" })
|
||||
data?.push({ label: "세척살수용수", val: resn, fill: "yellow" })
|
||||
setDnInUsage(data);
|
||||
}
|
||||
}, [rawData, year])
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfig = dnInUsage.reduce((config, element) => {
|
||||
config[element.label] = {
|
||||
label: element.label,
|
||||
fill: element.fill
|
||||
};
|
||||
return config;
|
||||
}, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
|
||||
setDnInChartConfig(newChartConfig);
|
||||
}, [dnInUsage]);
|
||||
|
||||
// 장외용수 도넛차트
|
||||
useEffect(() => {
|
||||
let lndwtr = 0;
|
||||
let hydUswtr = 0;
|
||||
let ugwtChr = 0;
|
||||
let farmUswtr = 0;
|
||||
let rvrKeepUswtr = 0;
|
||||
let indstUswtr = 0;
|
||||
if (rawData) {
|
||||
rawData.forEach((item) => {
|
||||
item.prfList.filter((e) => e.ym.slice(0, 4) === year).forEach((element) => {
|
||||
lndwtr += element.lndwtr; //조경용수
|
||||
hydUswtr += element.hydUswtr; //친수용수
|
||||
ugwtChr += element.ugwtChr; //지하수충전
|
||||
farmUswtr += element.farmUswtr //농업용수
|
||||
rvrKeepUswtr += element.rvrKeepUswtr //하천등유지용수
|
||||
indstUswtr += element.indstUswtr //공업용수
|
||||
|
||||
});
|
||||
})
|
||||
const data: dnChartForm[] = []
|
||||
data?.push({ label: "조경용수", val: lndwtr, fill: "yellow" })
|
||||
data?.push({ label: "친수용수", val: hydUswtr, fill: "black" })
|
||||
data?.push({ label: "지하수충전", val: ugwtChr, fill: "yellow" })
|
||||
data?.push({ label: "농업용수", val: farmUswtr, fill: "black" })
|
||||
data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "yellow" })
|
||||
data?.push({ label: "공업용수", val: indstUswtr, fill: "black" })
|
||||
setDnOutUsage(data);
|
||||
}
|
||||
}, [rawData, year])
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfig = dnOutUsage.reduce((config, element) => {
|
||||
config[element.label] = {
|
||||
label: element.label,
|
||||
fill: element.fill
|
||||
};
|
||||
return config;
|
||||
}, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
|
||||
setDnOutChartConfig(newChartConfig);
|
||||
}, [dnOutUsage]);
|
||||
|
||||
//월별 장내외 용수 총 실적 막대차트
|
||||
useEffect(() => {
|
||||
let wshwtr = 0;
|
||||
let coolUswtr = 0;
|
||||
let cleanUswtr = 0;
|
||||
let drwtUswtr = 0;
|
||||
let dltnUswtr = 0;
|
||||
let ithlRswtr = 0;
|
||||
let ithlEtcUswtr = 0;
|
||||
let cleanToilUswtr = 0;
|
||||
let resn = 0;
|
||||
let lndwtr = 0;
|
||||
let hydUswtr = 0;
|
||||
let ugwtChr = 0;
|
||||
let farmUswtr = 0;
|
||||
let rvrKeepUswtr = 0;
|
||||
let indstUswtr = 0;
|
||||
let inUsageSum = 0;
|
||||
let outUsageSum = 0;
|
||||
|
||||
|
||||
if (rawData) {
|
||||
const data: barChartForm[] = []
|
||||
rawData.forEach((item) => {
|
||||
item.prfList
|
||||
.filter((e) => e.ym.slice(0, 4) === year).forEach((element) => {
|
||||
|
||||
wshwtr = element.wshwtr; //세척수
|
||||
coolUswtr = element.coolUswtr; //냉각수
|
||||
cleanUswtr = element.cleanUswtr; //청소수
|
||||
drwtUswtr = element.drwtUswtr; //식수대
|
||||
dltnUswtr = element.dltnUswtr //희석용수
|
||||
ithlRswtr = element.ithlRswtr //중수도
|
||||
ithlEtcUswtr = element.ithlEtcUswtr //기타
|
||||
cleanToilUswtr = element.cleanToilUswtr //청소화장실용수
|
||||
resn = element.resn //세척살수용수
|
||||
|
||||
lndwtr = element.lndwtr; //조경용수
|
||||
hydUswtr = element.hydUswtr; //친수용수
|
||||
ugwtChr = element.ugwtChr; //지하수충전
|
||||
farmUswtr = element.farmUswtr //농업용수
|
||||
rvrKeepUswtr = element.rvrKeepUswtr //하천등유지용수
|
||||
indstUswtr = element.indstUswtr //공업용수
|
||||
|
||||
inUsageSum = wshwtr + coolUswtr + cleanUswtr + drwtUswtr + dltnUswtr + ithlRswtr + ithlEtcUswtr + cleanToilUswtr + resn;
|
||||
outUsageSum = lndwtr + hydUswtr + ugwtChr + farmUswtr + rvrKeepUswtr + indstUswtr;
|
||||
|
||||
const month = Number(element.ym.slice(4, 6))
|
||||
data.push({ label: `${month}월`, "장내용수": inUsageSum, "장외용수": outUsageSum })
|
||||
|
||||
},
|
||||
);
|
||||
|
||||
})
|
||||
|
||||
setBarData(data);
|
||||
}
|
||||
}, [rawData, year])
|
||||
|
||||
useEffect(() => {
|
||||
const newChartConfig = barData.reduce((config, element) => {
|
||||
config[element.label] = {
|
||||
label: element.label,
|
||||
};
|
||||
return config;
|
||||
|
||||
}, {} as Record<string, { label: string }>) satisfies ChartConfig;
|
||||
setBarChartConfig(newChartConfig);
|
||||
}, [barData]);
|
||||
|
||||
//월별 장내 용수 실적 라인차트
|
||||
useEffect(() => {
|
||||
|
||||
if (rawData) {
|
||||
const wshwtrData: lineChartDataProps[] = []
|
||||
const coolUswtrData: lineChartDataProps[] = []
|
||||
const cleanUswtrData: lineChartDataProps[] = []
|
||||
const drwtUswtrData: lineChartDataProps[] = []
|
||||
const dltnUswtrData: lineChartDataProps[] = []
|
||||
const ithlRswtrData: lineChartDataProps[] = []
|
||||
const ithlEtcUswtrData: lineChartDataProps[] = []
|
||||
const cleanToilUswtrData: lineChartDataProps[] = []
|
||||
const resnData: lineChartDataProps[] = []
|
||||
rawData.forEach((item) => {
|
||||
item.prfList.filter((e) => e.ym.slice(0, 4) === year).forEach((element) => {
|
||||
const month = Number(element.ym.slice(4, 6))
|
||||
wshwtrData.push({ label: `${month}월`, val: element.wshwtr, color: "red" })
|
||||
coolUswtrData.push({ label: `${month}월`, val: element.coolUswtr, color: "red" })
|
||||
cleanUswtrData.push({ label: `${month}월`, val: element.cleanUswtr, color: "red" })
|
||||
drwtUswtrData.push({ label: `${month}월`, val: element.drwtUswtr, color: "red" })
|
||||
dltnUswtrData.push({ label: `${month}월`, val: element.dltnUswtr, color: "red" })
|
||||
ithlRswtrData.push({ label: `${month}월`, val: element.ithlRswtr, color: "red" })
|
||||
ithlEtcUswtrData.push({ label: `${month}월`, val: element.ithlEtcUswtr, color: "red" })
|
||||
cleanToilUswtrData.push({ label: `${month}월`, val: element.cleanToilUswtr, color: "red" })
|
||||
resnData.push({ label: `${month}월`, val: element.resn, color: "red" })
|
||||
|
||||
},
|
||||
);
|
||||
})
|
||||
const rtndata = {
|
||||
chartData1: wshwtrData,
|
||||
chartData2: coolUswtrData,
|
||||
chartData3: cleanUswtrData,
|
||||
chartData4: drwtUswtrData,
|
||||
chartData5: dltnUswtrData,
|
||||
chartData6: ithlRswtrData,
|
||||
chartData7: ithlEtcUswtrData,
|
||||
chartData8: cleanToilUswtrData,
|
||||
chartData9: resnData
|
||||
}
|
||||
|
||||
setInLineData(rtndata)
|
||||
}
|
||||
}, [rawData, year])
|
||||
|
||||
useEffect(() => {
|
||||
if (inLineData?.chartData1) {
|
||||
const newChartConfig = {
|
||||
chartData1: {
|
||||
label: '세척수',
|
||||
color: "red",
|
||||
},
|
||||
chartData2: {
|
||||
label: '냉각수',
|
||||
color: "orange",
|
||||
},
|
||||
chartData3: {
|
||||
label: '청소수',
|
||||
color: "yellow",
|
||||
},
|
||||
chartData4: {
|
||||
label: '식수대',
|
||||
color: "pink",
|
||||
},
|
||||
chartData5: {
|
||||
label: '희석용수',
|
||||
color: "purple",
|
||||
},
|
||||
chartData6: {
|
||||
label: '중수도',
|
||||
color: "green",
|
||||
},
|
||||
chartData7: {
|
||||
label: '기타',
|
||||
color: "blue",
|
||||
},
|
||||
chartData8: {
|
||||
label: '청소화장실용수',
|
||||
color: "magenta",
|
||||
},
|
||||
chartData9: {
|
||||
label: '세척살수용수',
|
||||
color: "skyblue",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
setLnInChartConfig(newChartConfig);
|
||||
}
|
||||
}, [inLineData]);
|
||||
|
||||
//월별 장외 용수 실적 라인차트
|
||||
useEffect(() => {
|
||||
if (rawData) {
|
||||
const lndwtrData: lineChartDataProps[] = []
|
||||
const hydUswtrData: lineChartDataProps[] = []
|
||||
const ugwtChrData: lineChartDataProps[] = []
|
||||
const farmUswtrData: lineChartDataProps[] = []
|
||||
const rvrKeepUswtrData: lineChartDataProps[] = []
|
||||
const indstUswtrData: lineChartDataProps[] = []
|
||||
rawData.forEach((item) => {
|
||||
item.prfList.filter((e) => e.ym.slice(0, 4) === year).forEach((element) => {
|
||||
const month = Number(element.ym.slice(4, 6))
|
||||
lndwtrData.push({ label: `${month}월`, val: element.lndwtr, color: "red" })
|
||||
hydUswtrData.push({ label: `${month}월`, val: element.hydUswtr, color: "red" })
|
||||
ugwtChrData.push({ label: `${month}월`, val: element.ugwtChr, color: "red" })
|
||||
farmUswtrData.push({ label: `${month}월`, val: element.farmUswtr, color: "red" })
|
||||
rvrKeepUswtrData.push({ label: `${month}월`, val: element.rvrKeepUswtr, color: "red" })
|
||||
indstUswtrData.push({ label: `${month}월`, val: element.indstUswtr, color: "red" })
|
||||
},
|
||||
);
|
||||
})
|
||||
setOutLineData({
|
||||
chartData1: lndwtrData,
|
||||
chartData2: hydUswtrData,
|
||||
chartData3: ugwtChrData,
|
||||
chartData4: farmUswtrData,
|
||||
chartData5: rvrKeepUswtrData,
|
||||
chartData6: indstUswtrData,
|
||||
})
|
||||
}
|
||||
}, [rawData, year])
|
||||
|
||||
useEffect(() => {
|
||||
if (outLineData?.chartData1) {
|
||||
const newChartConfig = {
|
||||
chartData1: {
|
||||
label: '조경용수',
|
||||
color: "red",
|
||||
},
|
||||
chartData2: {
|
||||
label: '친수용수',
|
||||
color: "orange",
|
||||
},
|
||||
chartData3: {
|
||||
label: '지하수충전',
|
||||
color: "yellow",
|
||||
},
|
||||
chartData4: {
|
||||
label: '농업용수',
|
||||
color: "green",
|
||||
},
|
||||
chartData5: {
|
||||
label: '하천등유지용수',
|
||||
color: "blue",
|
||||
},
|
||||
chartData6: {
|
||||
label: '공업용수',
|
||||
color: "purple",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
setLnOutChartConfig(newChartConfig);
|
||||
}
|
||||
}, [outLineData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!pbnstPrfmncSttn.isInit) {
|
||||
pbnstPrfmncInit("1", "11");
|
||||
}
|
||||
}, [pbnstPrfmncSttn.isInit, pbnstPrfmncInit]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentsDiv>
|
||||
<ListDiv>
|
||||
<hr />
|
||||
<h3 className="mt-4 ml-2 text-2xl font-medium text-label">하수재이용실적 상세현황</h3>
|
||||
|
||||
<SelectBox
|
||||
className="w-1/12 text-2xl mt-4 ml-2"
|
||||
label="연도"
|
||||
selectClass={""}
|
||||
selectArray={selectYearList}
|
||||
value={year}
|
||||
onSelectValue={(val: string | number) => setYear(String(val))} />
|
||||
<h1 className="mt-4 ml-2">장내·외 용도별 하수재이용실적 현황(계)</h1>
|
||||
|
||||
<div className="flex">
|
||||
<div className="w-1/3">
|
||||
<MainChart chartConfig={chartConfig} chartData={chartData} chartTitle={"장내·외 용수 총 실적"} chartForm={CHART_FORM.DN} />
|
||||
</div>
|
||||
<div className="w-1/3">
|
||||
<MainChart chartConfig={dnInChartConfig} chartData={dnInUsage} chartTitle={"장내용수 실적"} chartForm={CHART_FORM.DN} />
|
||||
</div>
|
||||
<div className="w-1/3">
|
||||
<MainChart chartConfig={dnOutChartConfig} chartData={dnOutUsage} chartTitle={"장외용수 실적"} chartForm={CHART_FORM.DN} />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="">장내·외 월별 하수재이용실적 현황</h1>
|
||||
<div className="flex">
|
||||
<div className="w-1/3">
|
||||
<MainChart chartConfig={barChartConfig} chartData={barData} chartTitle={"월별 장내·외 용수 총 실적"} chartForm={CHART_FORM.DOUBLEBAR} />
|
||||
</div>
|
||||
<div className="w-1/3">
|
||||
<MainChart chartConfig={lnInChartConfig} chartData={inLineData} chartTitle={"월별 장내 용수 실적"} chartForm={CHART_FORM.LINE} />
|
||||
</div>
|
||||
<div className="w-1/3">
|
||||
<MainChart chartConfig={lnOutChartConfig} chartData={outLineData} chartTitle={"월별 장외 용수 총 실적"} chartForm={CHART_FORM.LINE} />
|
||||
</div>
|
||||
</div>
|
||||
{/* 하수재이용실적 현황 - 조건부 렌더링 */}
|
||||
{isVisible && (
|
||||
<>
|
||||
<h1 className="">하수재이용실적 현황</h1>
|
||||
<ListDiv className="col-span-8 pr-6 ">
|
||||
<ScrollArea className="h-[60vh]">
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium text-label">
|
||||
{"하수처리수재이용 실적(m3) 등록결과"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<UiTable
|
||||
headName={undefined}
|
||||
tableData={prfData || []}
|
||||
headlist={monthHeadList}
|
||||
pageSize={0}
|
||||
total={0}
|
||||
cellClick={undefined}
|
||||
onPageChange={function (): void {
|
||||
throw new Error("Function not implemented.");
|
||||
}}>
|
||||
</UiTable>
|
||||
</ScrollArea>
|
||||
</ListDiv>
|
||||
</>
|
||||
)}
|
||||
</ListDiv>
|
||||
</ContentsDiv>
|
||||
<Toaster position="top-center" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,410 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useWrStore } from "@/app/store";
|
||||
import {
|
||||
rainZod,
|
||||
selectClass,
|
||||
type customRainBdst,
|
||||
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
|
||||
import {
|
||||
formatCommaNumber,
|
||||
handleCommaNumberChange,
|
||||
} from "@/components/lib/func/commom";
|
||||
import BdstReg from "@/components/ui/form/fcltReg/bdstReg/bdstReg";
|
||||
import { DatePicker, FormUi } from "@common/business_components";
|
||||
import { Form, FormField, SelectBox } from "@common/business_components/ui";
|
||||
import { Input } from "@common/components/ui";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
export default function RainPrfmncSttnPopup({
|
||||
rainForm,
|
||||
isModal,
|
||||
}: {
|
||||
rainForm: customRainBdst;
|
||||
isModal: boolean;
|
||||
}) {
|
||||
const { code, rainBdstReg, rainBdstUpdate } = useWrStore(
|
||||
(state) => state
|
||||
);
|
||||
const { rainFcltCd } = code;
|
||||
const defaultValues: z.infer<typeof rainZod> = rainZod.parse({});
|
||||
|
||||
const form = useForm<z.infer<typeof rainZod>>({
|
||||
resolver: zodResolver(rainZod),
|
||||
defaultValues: defaultValues,
|
||||
});
|
||||
|
||||
const [grntchBdstCertYn, instlCstSprtYn, filtrTrtmfctYn] = form.watch([
|
||||
"reuseBuilding.0.grntchBdstCertYn",
|
||||
"reuseBuilding.0.instlCstSprtYn",
|
||||
"reuseBuilding.0.rainyObj.filtrTrtmfctYn",
|
||||
]);
|
||||
|
||||
const cleanRainData = (raw: any): z.infer<typeof rainZod> => {
|
||||
return {
|
||||
...raw,
|
||||
frstArchPrmsnDt: new Date(raw?.frstArchPrmsnDt || null),
|
||||
archChgPrmsnDt: raw?.archChgPrmsnDt
|
||||
? new Date(raw?.archChgPrmsnDt)
|
||||
: null,
|
||||
reuseBuilding: (raw?.reuseBuilding || []).map((item: any) => ({
|
||||
...item,
|
||||
instlCmptnDt: new Date(item?.instlCmptnDt),
|
||||
operMngCd: item?.operMngCd ?? "", // null → ""
|
||||
grntchBdstCertYr:
|
||||
typeof item?.grntchBdstCertYr === "string"
|
||||
? item?.grntchBdstCertYr
|
||||
: "", // null → ""
|
||||
rainObj: {
|
||||
...item?.rainObj,
|
||||
},
|
||||
})),
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (grntchBdstCertYn === "N") {
|
||||
form.setValue("reuseBuilding.0.grntchBdstCertYr", "");
|
||||
form.setValue("reuseBuilding.0.grntchBdstCertNo", "");
|
||||
form.setValue("reuseBuilding.0.grntchBdstCertGrd", "");
|
||||
} else if (instlCstSprtYn === "N") {
|
||||
form.setValue("reuseBuilding.0.instlCstSprtAmt", 0);
|
||||
} else if (filtrTrtmfctYn === "N") {
|
||||
form.setValue("reuseBuilding.0.rainyObj.filtrTrtmfctCpct", 0);
|
||||
form.setValue("reuseBuilding.0.rainyObj.filtrTrtmfctPrs", "");
|
||||
}
|
||||
}, [grntchBdstCertYn, instlCstSprtYn, filtrTrtmfctYn]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("form errors:", form.formState.errors);
|
||||
}, [form.formState.errors]);
|
||||
|
||||
const onSubmit = (values: z.infer<typeof rainZod>) => {
|
||||
if (isModal) {
|
||||
rainBdstReg(values, "41");
|
||||
} else {
|
||||
rainBdstUpdate(values, "41");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (rainZod) form.reset(cleanRainData(rainForm));
|
||||
}, [rainForm]);
|
||||
|
||||
|
||||
return (
|
||||
<div className="!mx-[1.6rem] !p-0r">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<div className="grid grid-cols-12 flex items-center card-header">
|
||||
<h1 className="text-2xl font-medium text-label col-span-10">
|
||||
{isModal ? "건축물 운영정보" : "빗물이용시설 정보"}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
{isModal && rainForm != undefined ? <BdstReg form={form} /> : <></>}
|
||||
{isModal ? (
|
||||
<h1 className="pl-3 text-xl col-span-10 mt-4">
|
||||
빗물이용시설 정보{" "}
|
||||
</h1>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<h1 className={formH1Class}>
|
||||
기본정보
|
||||
</h1>
|
||||
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCmptnDt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="설치완료일">
|
||||
<DatePicker
|
||||
mode="single"
|
||||
field={{
|
||||
value:
|
||||
field.value && !isNaN(new Date(field.value).getTime())
|
||||
? new Date(field.value)
|
||||
: new Date(), // Provide a default Date value
|
||||
onChange: (date) => field.onChange(date),
|
||||
}}
|
||||
selectClass={"w-full"}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCst"
|
||||
render={({ field }) => (
|
||||
<FormUi label="설치비">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<h1 className={formH1Class}>
|
||||
빗물이용시설 정보
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={formH2Class}>집수면</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-10 gap-4 mt-4 ">
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rainyObj.pntfColKnd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="종류">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={rainFcltCd}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? rainFcltCd[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rainyObj.pntfColArea"
|
||||
render={({ field }) => (
|
||||
<FormUi label="면적(m³)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className={formH2Class}>여과 등 처리시설</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-2 mt-4">
|
||||
<div className="col-span-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rainyObj.filtrTrtmfctYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="유무">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rainyObj.filtrTrtmfctCpct"
|
||||
render={({ field }) => (
|
||||
<FormUi label="용량(m³/일)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rainyObj.filtrTrtmfctPrs"
|
||||
render={({ field }) => (
|
||||
<FormUi label="처리공정">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" my-2">
|
||||
<h1 className={formH1Class}>
|
||||
인센티브 정보
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={formH2Class}>설치비 지원</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-10 gap-2 mt-4">
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCstSprtYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="지원 여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCstSprtAmt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="지원금액(원)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className={formH2Class}>녹색건축물 인증</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2 mt-4">
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertYr"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증년도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="2024"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3 ">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertNo"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증번호">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="ab1234678"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertGrd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증등급">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="A"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,403 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import {
|
||||
rswtZod,
|
||||
type customRswtBdst,
|
||||
} from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import { formH1Class, formH2Class } from "@/components/lib/class/comClass";
|
||||
import {
|
||||
formatCommaNumber,
|
||||
handleCommaNumberChange,
|
||||
} from "@/components/lib/func/commom";
|
||||
import BdstReg from "@/components/ui/form/fcltReg/bdstReg/bdstReg";
|
||||
import {
|
||||
DatePicker,
|
||||
Form,
|
||||
FormField,
|
||||
FormUi,
|
||||
SelectBox,
|
||||
} from "@common/business_components/ui";
|
||||
import { Input } from "@common/components/ui";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
export default function RswtrPrfmncsSttnPopup({
|
||||
rswtForm,
|
||||
isModal,
|
||||
}: {
|
||||
rswtForm: customRswtBdst;
|
||||
isModal: boolean;
|
||||
}) {
|
||||
const { code, rswtBdstUpdate, rswtBdstReg } = useWrStore(
|
||||
(state) => state
|
||||
);
|
||||
|
||||
const defaultValues: z.infer<typeof rswtZod> = rswtZod.parse({});
|
||||
|
||||
const form = useForm<z.infer<typeof rswtZod>>({
|
||||
resolver: zodResolver(rswtZod),
|
||||
defaultValues: defaultValues,
|
||||
});
|
||||
|
||||
const [grntchBdstCertYn, instlCstSprtYn, filtrTrtmfctProcs] = form.watch([
|
||||
"reuseBuilding.0.grntchBdstCertYn",
|
||||
"reuseBuilding.0.instlCstSprtYn",
|
||||
"reuseBuilding.0.rswtrObj.filtrTrtmfctProcs",
|
||||
]);
|
||||
|
||||
const onSubmit = (values: z.infer<typeof rswtZod>) => {
|
||||
if (isModal) {
|
||||
rswtBdstReg(values, "41");
|
||||
} else {
|
||||
rswtBdstUpdate(values, "41");
|
||||
}
|
||||
};
|
||||
const cleanRswtData = (raw: any): z.infer<typeof rswtZod> => {
|
||||
return {
|
||||
...raw,
|
||||
frstArchPrmsnDt: new Date(raw?.frstArchPrmsnDt || null),
|
||||
archChgPrmsnDt: raw?.archChgPrmsnDt
|
||||
? new Date(raw?.archChgPrmsnDt)
|
||||
: null,
|
||||
reuseBuilding: (raw?.reuseBuilding || []).map((item: any) => ({
|
||||
...item,
|
||||
instlCmptnDt: new Date(item?.instlCmptnDt),
|
||||
operMngCd: item?.operMngCd ?? "", // null → ""
|
||||
grntchBdstCertYr:
|
||||
typeof item?.grntchBdstCertYr === "string"
|
||||
? item?.grntchBdstCertYr
|
||||
: "", // null → ""
|
||||
rswtrObj: {
|
||||
...item?.rswtrObj,
|
||||
},
|
||||
})),
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("form errors:", form.formState.errors);
|
||||
}, [form.formState.errors]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("filtrTrtmfctProcs ", filtrTrtmfctProcs);
|
||||
if (grntchBdstCertYn === "N") {
|
||||
form.setValue("reuseBuilding.0.grntchBdstCertYr", "");
|
||||
form.setValue("reuseBuilding.0.grntchBdstCertNo", "");
|
||||
form.setValue("reuseBuilding.0.grntchBdstCertGrd", "");
|
||||
} else if (instlCstSprtYn === "N") {
|
||||
form.setValue("reuseBuilding.0.instlCstSprtAmt", 0);
|
||||
}
|
||||
}, [grntchBdstCertYn, instlCstSprtYn, filtrTrtmfctProcs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (rswtZod) form.reset(cleanRswtData(rswtForm));
|
||||
}, [rswtForm]);
|
||||
|
||||
return (
|
||||
<div className="!mx-[1.6rem] !p-0r">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
{/* <div className="flex justify-between items-center mx-3"> */}
|
||||
<div>
|
||||
<div className="grid grid-cols-12 flex items-center card-header">
|
||||
<h1 className="text-2xl font-medium text-label col-span-10">
|
||||
건축물 운영정보
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isModal && rswtForm != undefined ? <BdstReg form={form} /> : <></>}
|
||||
{isModal ? (
|
||||
<h1 className="pl-3 text-xl col-span-10 mt-4 ">
|
||||
중수도 시설 정보{" "}
|
||||
</h1>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<h1 className={formH1Class}>기본정보</h1>
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCmptnDt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="설치완료일">
|
||||
<DatePicker
|
||||
mode="single"
|
||||
field={{
|
||||
value:
|
||||
field.value && !isNaN(new Date(field.value).getTime())
|
||||
? new Date(field.value)
|
||||
: new Date(), // Provide a default Date value
|
||||
onChange: (date) => field.onChange(date),
|
||||
}}
|
||||
selectClass={"w-full"}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCst"
|
||||
render={({ field }) => (
|
||||
<FormUi label="설치비">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rswtrObj.wtrUsqty"
|
||||
render={({ field }) => (
|
||||
<FormUi label="물사용량(m³)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rswtrObj.oblgTrgtWtrUsqty"
|
||||
render={({ field }) => (
|
||||
<FormUi label="의무대상 물사용량(m³)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" my-4">
|
||||
<h1 className={formH1Class}>중수도 시설 정보</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-1 mt-4">
|
||||
<div className="col-span-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rswtrObj.filtrTrtmfctCpct"
|
||||
render={({ field }) => (
|
||||
<FormUi label="처리시설 용량">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="0"
|
||||
type="number"
|
||||
value={field.value ?? ""}
|
||||
onChange={(e)=>{field.onChange(Number(e.target.value))} }
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rswtrObj.orgwtKndCd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="원수 종류">
|
||||
<SelectBox
|
||||
className={""}
|
||||
label={""}
|
||||
selectClass={selectClass}
|
||||
selectArray={code.orgwtKndCd}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.orgwtKndCd[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.rswtrObj.filtrTrtmfctProcs"
|
||||
render={({ field }) => (
|
||||
<FormUi label="주요처리공정">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="주요처리공정"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" my-2">
|
||||
<h1 className={formH1Class}>인센티브 정보</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={formH2Class}>설치비 지원</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||||
<div className="col-span-1">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCstSprtYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="설치비 지원여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.instlCstSprtAmt"
|
||||
render={({ field }) => (
|
||||
<FormUi label="지원금액(원)">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="1,000,000"
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
handleCommaNumberChange(e, field.onChange);
|
||||
}}
|
||||
value={formatCommaNumber(field.value)}
|
||||
readOnly={instlCstSprtYn !== "Y"}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className={formH2Class}>녹색건축물 인증</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-2 mt-4">
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertYn"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증여부">
|
||||
<SelectBox
|
||||
className={""}
|
||||
selectClass={selectClass}
|
||||
label={""}
|
||||
selectArray={code.yn}
|
||||
onSelectValue={field.onChange}
|
||||
value={field.value ?? code.yn[0]?.val}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertYr"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증년도">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="2024"
|
||||
type="text"
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertNo"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증번호">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="ab1234678"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reuseBuilding.0.grntchBdstCertGrd"
|
||||
render={({ field }) => (
|
||||
<FormUi label="인증등급">
|
||||
<Input
|
||||
className={'w-full !text-xl'}
|
||||
placeholder="A"
|
||||
type=""
|
||||
value={field.value ?? ""}
|
||||
onChange={field.onChange}
|
||||
readOnly={true}
|
||||
/>
|
||||
</FormUi>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user