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) 등록결과"} -

-
- - - - - - - )} - - - - - ) -}