From b570db8375fc3e4a34bd043f0fb008e1c82d2e92 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 14 Jul 2025 13:14:29 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=95=84=EC=9A=94=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/featureClickEventPopup.tsx | 201 ------- apps/wr/app/map/htdflPrfmncSttnPopup.tsx | 621 --------------------- apps/wr/app/map/htdflSttn/page.tsx | 2 - apps/wr/app/map/mapSearchBar.tsx | 414 -------------- apps/wr/app/map/mapSearchForm.tsx | 340 ----------- apps/wr/app/map/pbnstPrfmncSttnPopup.tsx | 596 -------------------- 6 files changed, 2174 deletions(-) delete mode 100644 apps/wr/app/map/featureClickEventPopup.tsx delete mode 100644 apps/wr/app/map/htdflPrfmncSttnPopup.tsx delete mode 100644 apps/wr/app/map/mapSearchBar.tsx delete mode 100644 apps/wr/app/map/mapSearchForm.tsx delete mode 100644 apps/wr/app/map/pbnstPrfmncSttnPopup.tsx diff --git a/apps/wr/app/map/featureClickEventPopup.tsx b/apps/wr/app/map/featureClickEventPopup.tsx deleted file mode 100644 index 8048d0997..000000000 --- a/apps/wr/app/map/featureClickEventPopup.tsx +++ /dev/null @@ -1,201 +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; 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(""); // 레이어 이름 상태 - const [tableData, setTableData] = useState(null); // 피처 데이터 - const [mntrngsData, setMntrngsData] = useState(false); // 수량/수질 측정 정보 - const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태 - const [headlist2, setHeadlist2] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태 - const [buttonChk, setButtonChk] = useState(true) - const [fetchData, setfetchData] = useState(); // api 호출여부 - const contentRef = useRef(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 = {} - 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 : null; - return ( - - ) -} -export default FeatureClickEventPopup; \ No newline at end of file diff --git a/apps/wr/app/map/htdflPrfmncSttnPopup.tsx b/apps/wr/app/map/htdflPrfmncSttnPopup.tsx deleted file mode 100644 index 8d1bec486..000000000 --- a/apps/wr/app/map/htdflPrfmncSttnPopup.tsx +++ /dev/null @@ -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 = hdtflZod.parse({}); - - const form = useForm>({ - resolver: zodResolver(hdtflZod), - defaultValues: defaultValues, - }); - - const onSubmit = (values: z.infer) => { - if (isModal) { - htdflBdstReg(values, '41'); - } else { - htdflBdstUpdate(values, '41'); - } - }; - - - const cleanHtdflData = (raw: any): z.infer => { - 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 ( -
-
- - {/*
*/} -
-
-

온배수 시설 정보

-
-
- - {isModal && htdflForm != undefined ? : <>} - {isModal ? ( -

- 온배수 시설 정보{" "} -

- ) : ( - <> - )} - -
-
- ( - - - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- ( - - - - )} - /> -
-
-
-

- 온배수 시설 운영현황 -

-
- -
-
- ( - - { - field.onChange(Number(e.target.value)); - }} - readOnly={true} - /> - - )} - /> -
-
- ( - - - - )} - /> -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- ( - - - - )} - /> -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- ( - - - - )} - /> -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- ( - - - - )} - /> -
-
- -
-

- 요구수질 -

-
- -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- -
-
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
- -
- ( - - { - handleCommaNumberChange(e, field.onChange); - }} - value={formatCommaNumber(field.value)} - readOnly={true} - /> - - )} - /> -
-
- - -
- ); -} diff --git a/apps/wr/app/map/htdflSttn/page.tsx b/apps/wr/app/map/htdflSttn/page.tsx index b7935ee99..2e6833a14 100644 --- a/apps/wr/app/map/htdflSttn/page.tsx +++ b/apps/wr/app/map/htdflSttn/page.tsx @@ -2,9 +2,7 @@ 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"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; diff --git a/apps/wr/app/map/mapSearchBar.tsx b/apps/wr/app/map/mapSearchBar.tsx deleted file mode 100644 index b24b5d83a..000000000 --- a/apps/wr/app/map/mapSearchBar.tsx +++ /dev/null @@ -1,414 +0,0 @@ -// "use client" - -// import { useWrStore } from "@/app/store"; -// import SearchInputText from "@/components/ui/searchInput/searchInput"; -// import type { EnvPartSelectDataType, ReturnType, SelectDataType } from "@common/business_components/ui"; -// import { SelectBox } from "@common/business_components/ui"; -// import { Button, Input, Label } from "@common/components/ui"; -// import React, { useEffect, useMemo, useRef, useState } from "react"; -// import { MapSearchFormLeft } from "./mapSearchForm"; - - -// // 건물 검색 타입 정의 -// interface BuildingInfo { -// bdstInfoPk: number; -// ctpvCd: number; -// sggCd: number; -// daddr: string; -// bdstNm: string; -// frstArchPrmsnDt: string; -// archArea: number; -// ctpvNm: string | null; -// sggNm: string | null; -// lat: number | null; -// lot: number | null; -// regDt: string; -// rgtr: string | null; -// mdfcnDt: string; -// mdfr: string | null; -// } - -// type SearchBaseType = { -// searchType: string; -// selectSidoData?: SelectDataType[] | []; -// selectSigunData?: SelectDataType[] | []; -// selectRegionData?: SelectDataType[] | []; -// selectUnitWaterShedData?: SelectDataType[] | []; -// selectMiddleRegionData?: SelectDataType[] | []; -// selectEnvPartData?: EnvPartSelectDataType[] | []; -// onFeatureSelect: () => void; -// btnClass?: string; -// ref?: React.RefObject; -// isAdmin?: boolean; -// leftClassName?: string; -// rightClassName?: string; -// showQueryButton?: boolean; -// showInitButton?: boolean; -// showApplyButton?: boolean; -// checkedLayers?: string[]; -// checkedLayersData?: any[]; -// } - -// const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; - -// const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`); - -// interface SearchModalProps { -// open: boolean; -// onOpenChange: (open: boolean) => void; -// onFeatureSelect: (row: any) => void; -// } - -// interface SelectedDataTypeWithSggNm { -// text: string; -// val: string; -// sggNm: string; -// } - -// export function MapSearchBar({ -// searchType, -// selectSidoData, -// selectSigunData, -// selectRegionData, -// selectUnitWaterShedData, -// selectMiddleRegionData, -// selectEnvPartData, -// btnClass, -// onFeatureSelect, -// isAdmin = false, -// leftClassName, -// rightClassName, -// showQueryButton = true, -// showInitButton = true, -// showApplyButton = true, -// checkedLayers = [], -// checkedLayersData = [], -// }: SearchBaseType) { - -// // 로딩바 -// const [isLoading, setIsLoading] = useState(false); -// // 상세 정보 조회를 위한 상태 추가 -// const [popupFeature, setPopupFeature] = useState(null); -// const [isChHead, setIsChHead] = useState(false); -// const ref = useRef({} as ReturnType); - -// // zustand store에서 건물 검색 함수와 데이터 가져오기 -// const { -// code, -// bdst, -// findBdst, -// wrMap, -// buildingSearchRes, -// buildingNmSearch, -// buildingNmSearchMultiple -// } = useWrStore((state) => state); - -// const [selectedBuilding, setSelectedBuilding] = useState(null); -// const [buildingSearchText, setBuildingSearchText] = useState(""); -// const [buildingList, setBuildingList] = useState([]); - -// // 전체 목록 -// const [partValue, setPartValue] = useState("A"); -// const [sidoValue, setSidoValue] = useState("0"); -// const [sigunValue, setSigunValue] = useState("0"); -// const [regionValue, setRegionValue] = useState("0"); -// const [untitWaterShedValue, setUntitWaterShedValue] = useState("0"); -// const [middleRegionValue, setMiddleRegionValue] = useState("0"); -// const [envPartValue, setEnvPartValue] = useState("0"); -// const [resetTrigger, setResetTrigger] = useState(false); -// const [sidoText, setSidoText] = useState("0"); -// const [sigunText, setSigunText] = useState("0"); -// // 공급처 후보지 조회 필터 목록 -// const [selectedSido, setSelectedSido] = useState({ text: "전체", val: '0' }); -// const [selectedSigun, setSelectedSigun] = useState({ text: "전체", val: '0' }); -// const [selectedFclt, setSelectedFclt] = useState({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 -// // 전체 시설 -// let allFclt: SelectedDataTypeWithSggNm[] = [{ text: "전체", val: '0', sggNm: '전체' }]; -// const [selectedDong, setSelectedDong] = useState({ text: "전체", val: '0', sggNm: '전체' }); // 시설명 선택 상태 // 행정동 - -// const filteredSigunData = useMemo(() => { -// if (!selectedSido || selectedSido.val === '0' || !selectedSido.val) return [{ text: "전체", val: '0' }]; -// return [ -// { text: "전체", val: '0' }, -// ...code.sggCd.filter((item: { val: string; }) => item.val.substring(0, 2) === selectedSido.val.substring(0, 2)) -// ]; -// }, [selectedSido]); - -// const filteredFcltData = useMemo(() => { -// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }]; -// return [ -// { text: "전체", val: '0', sggNm: '전체' }, -// ...allFclt.filter(item => item.sggNm === selectedSido.text) -// ]; -// }, [selectedSigun]); - -// const filteredDong = useMemo(() => { -// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) return [{ text: "전체", val: '0', sggNm: '전체' }]; -// return [ -// { text: "전체", val: '0', sggNm: '전체' }, -// // ...code.dong.filter(item => item.sggNm === selectedSido.text) -// ]; -// }, [selectedSigun]); - -// // 조회 함수 -// const queryVal = () => { -// // 46 : 하수처리시설 -// // 47 : 하수재이용시설 -// // 48 : 빗물이용시설 -// // 49 : 중수도시설 -// // 50 : 온배수시설 -// console.log("조회버튼 클릭: ", checkedLayers); -// if (checkedLayers && checkedLayers.includes('48')) { -// // searchBuildings -// } -// } - -// // 초기화 함수 -// const initVal = () => { -// setPartValue("A"); -// setSidoValue("0"); -// setSigunValue("0"); -// setRegionValue("0"); -// setUntitWaterShedValue("0"); -// setMiddleRegionValue("0"); -// setEnvPartValue("0"); -// setSidoText("전체"); -// setSigunText("전체"); -// setSelectedSido({ text: "전체", val: '0' }); -// setSelectedSigun({ text: "전체", val: '0' }); -// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' }); -// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' }); -// setResetTrigger(true); -// }; - -// // 적용 버튼 -// const applyVal = () => { -// onFeatureSelect(); -// }; - -// useEffect(() => { -// if (resetTrigger) { -// setResetTrigger(false); -// } -// }, [resetTrigger]); - -// // 시설 조회 -// useEffect(() => { -// const fetchData = async () => { -// setIsLoading(true); -// if (!selectedSigun || selectedSigun.val === '0' || !selectedSigun.val) { -// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]); -// setIsLoading(false); -// return; -// } - -// try { -// const queryParamsFacility = new URLSearchParams({ -// lyrTypeNm: 'tb_il_swage_prcs_fclt', -// page: '0', -// size: '100000', -// sort: 'string', -// }); -// const cqlFiltersFacility: string[] = []; -// if (selectedSigun.text && selectedSigun.val !== '0') { -// cqlFiltersFacility.push(`sgg_nm ILIKE '%${selectedSigun.text}%'`); -// } -// if (cqlFiltersFacility.length > 0) { -// queryParamsFacility.append('cqlFiter', cqlFiltersFacility.join(' and ')); -// } -// console.log("BaseLayout API URL for Facilities:", `v1/fclts?${queryParamsFacility.toString()}`); - -// const facilityRes = await fetch(`${API_URL}/v1/fclts?${queryParamsFacility.toString()}`, { -// method: "GET", -// headers: { accept: "application/json" } -// }).then(res => res.json()); - -// const facilities = (facilityRes.data || []).map((item: any) => ({ -// text: item.swtrmtFcltNm, -// val: item.fid, -// sggNm: item.sggNm -// })); -// allFclt = (facilities); - -// } catch (error) { -// console.error("BaseLayout: 지역/시설 데이터 조회 중 오류 발생:", error); -// allFclt = ([{ text: "전체", val: '0', sggNm: '전체' }]); -// } finally { -// setIsLoading(false); -// } -// }; - -// fetchData(); -// }, [selectedSigun]); - -// useEffect(() => { -// if (ref && ref.current) { -// const customRef = ref.current; -// customRef.partValue = partValue; -// customRef.sidoValue = sidoValue; -// customRef.sigunValue = sigunValue; -// customRef.regionValue = regionValue; -// customRef.unitWaterShedValue = untitWaterShedValue; -// customRef.middleRegionValue = middleRegionValue; -// customRef.envPartValue = envPartValue; -// customRef.sidoText = selectedSido.text; -// customRef.sigunText = selectedSigun.text; -// } -// }, [partValue, sidoValue, sigunValue, regionValue, untitWaterShedValue, middleRegionValue, envPartValue, ref]); - -// // buildingSearchText가 변경될 때 API 호출 -// useEffect(() => { -// if (buildingSearchText && buildingSearchText.length > 1) { -// if (checkedLayers && checkedLayers.length > 0) { -// // 다중 레이어 검색 -// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", buildingSearchText); -// buildingNmSearch("RNB", selectedSigun.val, buildingSearchText); -// } else { -// // 단일 레이어 검색 -// // buildingNmSearch(checkedLayers[0], selectedSigun.val, buildingSearchText); -// } -// } else { -// // 검색 텍스트가 짧으면 리스트 초기화 -// if (checkedLayers && checkedLayers.length > 0) { -// // buildingNmSearchMultiple(checkedLayers, selectedSigun.val || "", ""); -// } else { -// buildingNmSearch("RNB", selectedSigun.val || "", ""); -// } -// } -// }, [buildingSearchText]); - -// return ( -//
-//
-//
-// {searchType == "공급처 후보지 조회" && ( -// <> -// { -// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val)); -// setSelectedSido(selected || { text: "전체", val: '0' }); -// setSelectedSigun({ text: "전체", val: '0' }); -// }} -// value={selectedSido.val} -// selectClass={'w-32'} -// /> -// { -// const selected = filteredSigunData.find(item => (item.val === val)); -// setSelectedSigun(selected || { text: "전체", val: '0' }); -// setSelectedFclt({ text: "전체", val: '0', sggNm: '전체' }); -// }} -// value={selectedSigun.val} -// selectClass={'w-32'} -// /> -//
-// -//
-// { -// setBuildingSearchText(searchNm || ""); -// }} -// setRtnData={function (rtnData: any): void { -// // 선택된 건물 데이터 처리 -// // if (rtnData && rtnData.bdstInfoPk) { -// // setSelectedBuilding(rtnData); -// // setBuildingSearchText(rtnData.bdstNm || ""); -// // } -// }} -// searchList={buildingSearchRes || []} -// /> -//
-//
-// -// )} -// {searchType == "우리동네가뭄지도보기" && ( -// <> -// { -// const selected = code.cityCd.find((item: { val: string | number; }) => (item.val === val)); -// setSelectedSido(selected || { text: "전체", val: '0' }); -// setSelectedSigun({ text: "전체", val: '0' }); -// }} -// value={selectedSido.val} -// selectClass={'w-44'} -// /> -// { -// const selected = filteredSigunData.find(item => (item.val === val)); -// setSelectedSigun(selected || { text: "전체", val: '0' }); -// setSelectedDong({ text: "전체", val: '0', sggNm: '전체' }); -// }} -// value={selectedSigun.val} -// selectClass={'w-32'} -// /> -// { -// const selected = filteredDong.find(item => (item.val === val)); -// setSelectedDong(selected || { text: "전체", val: '0', sggNm: '전체' }); -// }} -// value={selectedDong.val} -// selectClass={'w-32'} -// /> -// -// )} -// {searchType == "지도보기" && ( -//
-//
{/* SearchFormLeft 래퍼 */} -// -//
-// -//
-// -//
-//
-// )} -//
-// {/* 버튼 부분 */} -//
-// {showQueryButton && } -// {showInitButton && } -// {showApplyButton && } -//
-//
-//
-// ) -// } diff --git a/apps/wr/app/map/mapSearchForm.tsx b/apps/wr/app/map/mapSearchForm.tsx deleted file mode 100644 index 70927996b..000000000 --- a/apps/wr/app/map/mapSearchForm.tsx +++ /dev/null @@ -1,340 +0,0 @@ -"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'; - -/** - * 검색 폼 왼쪽 컴포넌트 타입 - * - * @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; -} - -export type EnvPartSelectDataType = SelectDataType & { - adstDliStrCd: string, -} - -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('A'); - //행정별 시도 시군구 - const [sidoValue, setSidoValue] = useState('0'); - const [sigunValue, setSigunValue] = useState('0'); - const [sidoText, setSidoText] = useState(''); - const [sigunText, setSigunText] = useState(''); - //유역별 - const [regionValue, setRegionValue] = useState('0'); - const [unitWaterShedValue, setUnitWaterShedValue] = useState('0'); - const [middleRegionValue, setMiddleRegionValue] = useState('0'); - //환경청별 시도 시군구 - const [envPartValue, setEnvPartValue] = useState('0'); - // 환경청 - const [filteredEnvPartSigunDataSelected, setFilteredEnvPartSigunDataSelected] = useState([]); - - /****************** 셀렉트 리스트 데이터. ******************/ - // 조회된 조건에 맞는 시도 시군 유역 - const [filteredSigunData, setFilteredSigunData] = useState([{ text: "전체", val: '0' }]); - const [filteredUnitWaterShedData, setFilteredUnitWaterShedData] = useState([{ text: "전체", val: '0' }]); - const [filteredMiddleRegionData, setFilteredMiddleRegionData] = useState([{ text: "전체", val: '0' }]); - // 조회된 조건에 맞는 환경청 시도 시군 - const [filteredEnvPartData, setFilteredEnvPartData] = useState([{ text: "전체", val: '0', adstDliStrCd: '' }]); - const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState([{ text: "전체", val: '0', adstDliStrCd: '' }]); - const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState([{ 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 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 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 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: '' })) - ]); - } - - // 환경청 세팅 - 시군구 - 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; - - 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; - - // 유역 세팅 - 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; - } - } - - // 리셋 함수 - 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' }]); - - 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]); - - return ( - isShowPart ? ( -
- onSelectValue(val.toString(), 'part')} value={partValue} selectClass={'w-32'} /> - {partValue === 'R' ? ( - <> - onSelectValue(val.toString(), 'region')} value={regionValue} selectClass={'w-44'} /> - onSelectValue(val.toString(), 'unitWaterShed')} value={unitWaterShedValue} selectClass={'w-44'} /> - onSelectValue(val.toString(), 'middleRegion')} value={middleRegionValue} selectClass={'w-44'} /> - - ) : partValue === 'G' ? ( - <> - onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'w-44'} /> - onSelectValue(val.toString(), 'envPartSido')} value={sidoValue} selectClass={'w-44'} /> - onSelectValue(val.toString(), 'envPartSigun')} value={sigunValue} selectClass={'w-44'} /> - - ) : ( - <> - onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={'w-44'} /> - onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={'w-44'} /> - - )} -
- ) : ( -
- {children} -
- ) - ) -} - -export { MapSearchFormLeft }; diff --git a/apps/wr/app/map/pbnstPrfmncSttnPopup.tsx b/apps/wr/app/map/pbnstPrfmncSttnPopup.tsx deleted file mode 100644 index f6d870092..000000000 --- a/apps/wr/app/map/pbnstPrfmncSttnPopup.tsx +++ /dev/null @@ -1,596 +0,0 @@ -"use client"; - -import { useWrStore } from "@/app/store"; -import { initValInUsage, initValOutUsage, subTotalObj, totalObj, type FcPrfType, type PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type"; -import { CHART_FORM, ContentsDiv, MainChart, ScrollArea, SelectBox, UiTable, type ChartConfig, type ReturnType } from "@common/business_components"; -import ListDiv from "@common/business_components/ui/list_div"; -import { useEffect, useRef, useState } from "react"; -import { Toaster } from "react-hot-toast"; - -interface PbnstPrfmncSttnPopupProps { - isVisible?: boolean; -} - -export default function PbnstPrfmncSttnPopup({ isVisible = true }: PbnstPrfmncSttnPopupProps) { - const { code, tableHeadMaker, pbnstPrfmncSttn, pbnstPrfmncInit, pbnstPrfmncSearch, prfmnc } = useWrStore((state) => state); - const { monthHeadList } = prfmnc - const { pbnstPrfHeadList, pbnstPrfmncRes, prfmncRes, rawData, selectYearList } = pbnstPrfmncSttn; - const [isChHead, setIsChHead] = useState(false); - const [fromDate, setFromDate] = useState(String(new Date().getFullYear())); - const [toDate, setToDate] = useState(String(new Date().getFullYear())); - const [year, setYear] = useState(String(new Date().getFullYear())); - const [bdstTable, setbdstTable] = useState(); - const ref = useRef({} as ReturnType); - const [swtrmtFcltNm, setSwtrmtFcltNm] = useState(); - const [chartConfig, setChartConfig] = useState({}); - const [chartData, setChartData] = useState([]); - const [dnInUsage, setDnInUsage] = useState([]); - const [dnInChartConfig, setDnInChartConfig] = useState({}); - const [dnOutUsage, setDnOutUsage] = useState([]); - const [dnOutChartConfig, setDnOutChartConfig] = useState({}); - const [barData, setBarData] = useState([]); - const [barChartConfig, setBarChartConfig] = useState({}); - const [prfData, setPrfData] = useState(); - const [lnInChartConfig, setLnInChartConfig] = useState({}); - const [lnOutChartConfig, setLnOutChartConfig] = useState({}); - 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({}); - 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) 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) 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) 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; - let inUsageArr = []; - let outUsageArr = []; - - - 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; - inUsageArr.push(inUsageSum) - outUsageSum = lndwtr + hydUswtr + ugwtChr + farmUswtr + rvrKeepUswtr + indstUswtr; - outUsageArr.push(outUsageSum) - - 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) 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]); - - useEffect(() => { - setbdstTable(prfmncRes); - }, [prfmncRes]); - - return ( - <> - - -
-

하수재이용실적 상세현황

- - setYear(String(val))} /> -

장내·외 용도별 하수재이용실적 현황(계)

- -
-
- -
-
- -
-
- -
-
-

장내·외 월별 하수재이용실적 현황

-
-
- -
-
- -
-
- -
-
- {/* 하수재이용실적 현황 - 조건부 렌더링 */} - {isVisible && ( - <> -

하수재이용실적 현황

- - -
-

- {"하수처리수재이용 실적(m3) 등록결과"} -

-
- - - - - - - )} - - - - - ) -} From bde20e9a7013b1cd4ef19a58152c49f999c57ac5 Mon Sep 17 00:00:00 2001 From: truthwing Date: Mon, 14 Jul 2025 13:52:13 +0900 Subject: [PATCH 2/3] =?UTF-8?q?state=20=EC=B2=98=EB=A6=AC=20=ED=95=84?= =?UTF-8?q?=EC=9A=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 255 +++++++++++++---------------- 1 file changed, 112 insertions(+), 143 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index e8641ca6c..6da584f8e 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -1,19 +1,18 @@ -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 { 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; @@ -25,27 +24,8 @@ interface NewWindowPopupProps { 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 = ({ featureData, - checkedLayers = [], - checkedLayersData = [], seletectedLayerNm, onFeatureSelect, onClose @@ -77,12 +57,8 @@ const NewWindowPopup: React.FC = ({ const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore( (state) => state ); - let { rainSttnRes, rainSttnResCount } = rainSttn; + const { rainSttnRes, rainSttnResCount } = rainSttn; const [rainTable, setRainTable] = useState(); - 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 }); @@ -90,18 +66,14 @@ const NewWindowPopup: React.FC = ({ const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore( (state) => state ); - let { rswtSttnRes, rswtSttnResCount } = rswtSttn; + const { rswtSttnRes, rswtSttnResCount } = rswtSttn; const [rswtrTable, setRswtrTable] = useState(); 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; + const { htdflSttnRes,htdflSttnResCount } = htdflSttn; const [htdflTable, setHtdflTable] = useState(); const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [htdflPage, setHtdflPage] = useState(1) @@ -111,19 +83,19 @@ const NewWindowPopup: React.FC = ({ pbnst, pubHasuInit, } = useWrStore((state) => state); - let { pubFacHeadList, pbnstHasuRes } = pbnst; + const { pubFacHeadList, pbnstHasuRes } = pbnst; + const [hasuList, setHasuList] = useState(pbnstHasuRes || []); const [isRuseReg, setIsRuseReg] = useState<{ data: any | undefined; }>({ data: undefined }); const [hasuTable, setHasuTable] = useState(); const [hasuPage, setHasuPage] = useState(1); - const [hasuRes,setHasuRes] = useState() 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 } = {get:()=> null}; layers.forEach((layer: any) => { const source = layer.getSource(); if (source && source.hasFeature && featureData @@ -135,8 +107,55 @@ const NewWindowPopup: React.FC = ({ return result; }; - useEffect(() => { - const layerId = getSelectedLayers(); + const fetchpbnstDetail = async (featureCd: string) => { + try { + const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`); + // 중복 데이터 추가 방지 + setTabDataFunc(response, featureCd); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + const fetchHasuDetail = async (featureCd: string, data: string) => { + try { + const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON); + //TODO : state 처리. + setHasuList( + rainRes.data.map((item: any) => { + return { + ...item, + fctCpc: Number(item.fctCpc) || 0, + ruse: item.ruse === false ? "N" : "Y", + }; + }); + ) + pbnstHasuRes = hasuList + if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] }); + + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + const detainSttn = async (featureCd: string, layerNm: string) => { + if (layerNm == '빗물이용시설') { + const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`) + rainSttnRes = res + setRainDetailModal({ isOpen: true, data: rainSttnRes[0] }); + } + 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]}) + } + else{ + const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) + htdflSttnRes = res + setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); + } + } + const layerId = getSelectedLayers(); if (featureData && typeof featureData.getProperties === "function") { const selectedVal = featureData.getProperties(); let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null; @@ -160,7 +179,6 @@ const NewWindowPopup: React.FC = ({ setViewMode("detail") } } else if (layerId === null && seletectedLayerNm) { setViewMode("list") } - }, [featureData]); ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 /////////////////////////////////////////////// ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// @@ -182,7 +200,7 @@ const NewWindowPopup: React.FC = ({ if (!pbnstSttn.isInit) { getFlcts() } - }, [seletectedLayerNm, pbnstSttn.isInit]); + }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]); useEffect(()=>{ pbnSttnInit("1", "15", { partValue: "A", @@ -210,15 +228,6 @@ const NewWindowPopup: React.FC = ({ }); } // 재이용시설 조회 - const fetchpbnstDetail = async (featureCd: string) => { - try { - const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`); - // 중복 데이터 추가 방지 - setTabDataFunc(response, featureCd); - } catch (error) { - console.error("Error fetching data:", error); - } - }; // 재이용시설 페이징처리 관련 함수 const onPageChangeHandler = useCallback((page: number) => { pbnstSttnSearch( @@ -240,18 +249,18 @@ const NewWindowPopup: React.FC = ({ String(new Date().getFullYear()),fclts ); }, []); - const excelClick = useCallback(() => { - // if (codeData) pbnstSttnSearch(1, "10000", codeData); - excelDownload( - [[]], - "하수재이용시설 현황", - "sample_pbnstSttn.xlsx", - "A1:U2" - ); - }, [pbnstSttnSearch]); +// FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제. + // const excelClick = useCallback(() => { + // // if (codeData) pbnstSttnSearch(1, "10000", codeData); + // excelDownload( + // [[]], + // "하수재이용시설 현황", + // "sample_pbnstSttn.xlsx", + // "A1:U2" + // ); + // }, [pbnstSttnSearch]); ///////////////////////////////////////////// 하수재이용시설 ////////////////////////////////////////////////// - ///////////////////////////////////////////// 빗물 재이용 ////////////////////////////////////////////////// // 빗물재이용시설 cellClick 이벤트 (상세정보) const rainCellClick = (index: number | undefined, headId: string) => { @@ -263,29 +272,9 @@ const NewWindowPopup: React.FC = ({ // 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) => { - if (layerNm == '빗물이용시설') { - const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`) - rainSttnRes = res - setRainDetailModal({ isOpen: true, data: rainSttnRes[0] }); - } - 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]}) - } - else{ - const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) - htdflSttnRes = res - setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); } } + useEffect(() => { if (!rainSttn.isInit) { @@ -337,10 +326,6 @@ const NewWindowPopup: React.FC = ({ // setViewMode('detail') onFeatureSelect(rswtrTable[index]); onClose(); - } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) { - if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') { - setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding }); - } } } useEffect(() => { @@ -369,18 +354,18 @@ const NewWindowPopup: React.FC = ({ ); setRswtrTable(chData); }, [code, rswtSttnRes]); - // 엑셀 관련 - const rswtSttnExcelDownload = useCallback(() => { - if (rswtSttn.excelList.length > 0) { - if (rswtSttn.excelList.length === 0) return; - excelDownload( - rswtSttn.excelList, - "중수도시설 현황", - "sample_rswtSttn.xlsx", - "A1:W3", - ); - } - }, [rswtSttn.excelList]) + // FIXME: 윤선화 차장님 요구사항으로 엑셀 다운로드 삭제. + // const rswtSttnExcelDownload = useCallback(() => { + // if (rswtSttn.excelList.length > 0) { + // if (rswtSttn.excelList.length === 0) return; + // excelDownload( + // rswtSttn.excelList, + // "중수도시설 현황", + // "sample_rswtSttn.xlsx", + // "A1:W3", + // ); + // } + // }, [rswtSttn.excelList]) useEffect(() => { rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd); @@ -433,24 +418,8 @@ const NewWindowPopup: React.FC = ({ useEffect(() => { pubHasuInit(String(hasuPage), "0"); }, [hasuPage]); - const fetchHasuDetail = async (featureCd: string, data: string) => { - try { - const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON); - const hasuList = rainRes.data.map((item: any) => { - return { - ...item, - fctCpc: Number(item.fctCpc) || 0, - ruse: item.ruse === false ? "N" : "Y", - }; - }); - pbnstHasuRes = hasuList - if (pbnstHasuRes.length > 0) setIsRuseReg({ data: [pbnstHasuRes[0]] }); - - } catch (error) { - console.error("Error fetching data:", error); - } - }; - const hasuCellClick = (index: number | undefined, headId: string) => { + + const hasuCellClick = (index: number | undefined) => { if (index !== undefined && pbnstHasuRes !== undefined) { onFeatureSelect(pbnstHasuRes[index]); onClose(); @@ -466,15 +435,15 @@ const NewWindowPopup: React.FC = ({ 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 ( @@ -491,7 +460,6 @@ const NewWindowPopup: React.FC = ({ headName={""} cellClick={hasuCellClick} onPageChange={setHasuPage} - children={undefined} /> ) @@ -506,21 +474,19 @@ const NewWindowPopup: React.FC = ({ tableData={isRuseReg?.data || []} headlist={pubFacHeadList.slice(0, 4)} pageSize={1} - total={null} + total={0} headName={"위치정보"} cellClick={() => { }} onPageChange={() => { }} - children={undefined} /> { }} onPageChange={() => { }} - children={undefined} /> ) @@ -542,7 +508,6 @@ const NewWindowPopup: React.FC = ({ label: tab.name, onClick: () => setActiveTab(tab.id), }))} - children={undefined} />
= ({ } headlist={pbnstSttn.pbnstSttHeadList} pageSize={20} total={pbnstSttnResCount || 0} - cellClick={(index: number | undefined, headId: string) => { + cellClick={(index: number | undefined) => { pbnstCellClick(index); }} onPageChange={onPageChangeHandler} - /> + > + + ); } @@ -601,7 +567,6 @@ const NewWindowPopup: React.FC = ({ } headlist={rainSttn.rainSttHeadList} pageSize={20} total={rainSttnResCount} @@ -609,7 +574,9 @@ const NewWindowPopup: React.FC = ({ rainCellClick(index ?? undefined, headId); }} onPageChange={setRainPage} - /> + > + + ); } @@ -636,7 +603,6 @@ const NewWindowPopup: React.FC = ({ } headlist={rswtSttn.rswtSttHeadList} pageSize={20} total={rswtSttnResCount} @@ -644,7 +610,9 @@ const NewWindowPopup: React.FC = ({ rswtCellClick(index, headId); }} onPageChange={setRswtrPage} - /> + > + + ); } @@ -671,7 +639,6 @@ const NewWindowPopup: React.FC = ({ } headlist={htdflSttn.htdflSttHeadList} pageSize={20} total={htdflSttnResCount || 0} @@ -679,7 +646,9 @@ const NewWindowPopup: React.FC = ({ htdflCellClick(index ?? undefined, headId); }} onPageChange={setHtdflPage} - /> + > + + ); } From 9e3478252e970a3055ce96bab4732ea39ba3f699 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Mon, 14 Jul 2025 14:36:55 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EC=83=81=EC=84=B8=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20state=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/map/newWindowPopup.tsx | 39 +++++++++++++++++++----------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index 6da584f8e..ccabfc443 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -61,6 +61,7 @@ const NewWindowPopup: React.FC = ({ const [rainTable, setRainTable] = useState(); const [rainPage, setRainPage] = useState(1) const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false }); + const [rainList, setRainList] = useState(rainSttnRes || []); // 중수도시설 변수 const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore( @@ -70,6 +71,7 @@ const NewWindowPopup: React.FC = ({ const [rswtrTable, setRswtrTable] = useState(); const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false }); const [rswtrPage, setRswtrPage] = useState(1); + const [rswtrList, setRswtrList] = useState(rswtSttnRes || []); // 온배수시설 변수 const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state); @@ -77,6 +79,7 @@ const NewWindowPopup: React.FC = ({ const [htdflTable, setHtdflTable] = useState(); const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false }); const [htdflPage, setHtdflPage] = useState(1) + const [htdflList, setHtdflList] = useState(htdflSttnRes || []); //하수처리시설 변수 const { @@ -118,8 +121,7 @@ const NewWindowPopup: React.FC = ({ }; const fetchHasuDetail = async (featureCd: string, data: string) => { try { - const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON); - //TODO : state 처리. + const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON) setHasuList( rainRes.data.map((item: any) => { return { @@ -127,34 +129,41 @@ const NewWindowPopup: React.FC = ({ fctCpc: Number(item.fctCpc) || 0, ruse: item.ruse === false ? "N" : "Y", }; - }); + }) ) - pbnstHasuRes = hasuList - if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] }); - } catch (error) { console.error("Error fetching data:", error); } }; - const detainSttn = async (featureCd: string, layerNm: string) => { if (layerNm == '빗물이용시설') { const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`) - rainSttnRes = res - setRainDetailModal({ isOpen: true, data: rainSttnRes[0] }); + setRainList(res) } 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]}) + setRswtrList(res) } else{ const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`) - htdflSttnRes = res + setHtdflList(res) setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] }); } } + // 상세 목록 데이터 상태 처리 + useEffect(()=>{ + if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] }); + },[hasuList]) + useEffect(()=>{ + if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] }); + },[rainList]) + useEffect(()=>{ + if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] }); + },[rswtrList]) + useEffect(()=>{ + if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] }); + },[htdflList]) + const layerId = getSelectedLayers(); if (featureData && typeof featureData.getProperties === "function") { const selectedVal = featureData.getProperties(); @@ -174,7 +183,9 @@ const NewWindowPopup: React.FC = ({ else{ featureCd = selectedVal?.bdst_nm; setFcltPk(featureCd) - detainSttn(featureCd,layerId) + if (layerId) { + detainSttn(featureCd, layerId); + } } setViewMode("detail") }