) => {
+ e.currentTarget.textContent && setBtnTxt(e.currentTarget.textContent)
+ setIsModalOpen(true);
+ };
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
const [repairData, setRepairData] = useState([
{ year: "2025", type: "개대체" },
{ year: "2025", type: "보수" },
@@ -32,6 +43,20 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
cleaning: { data: cleaningData, setData: setCleaningData },
inspection: { data: inspectionData, setData: setInspectionData },
};
+ const keysToExtract = [
+ "swtrmt_zone_cd",
+ "mltv_dtdv_nm",
+ "fid",
+ "lyrTypeNm",
+ "reg_dt",
+ "mdfcn_dt",
+ "rgtr",
+ "mdfr",
+ ];
+ // const filteredData = Object.entries(featureData)
+ // .filter(([key]) => keysToExtract.includes(key)) // 필요한 키만 필터링
+ // .map(([key, value]) => ({ key, value: value ?? "N/A" })); // 테이블 데이터 형식으로 변환
+
return (
{
}}>
handleInputChange(section, index, field, value, dataMap)} />
handleInputChange(section, index, field, value, dataMap)} />
- handleInputChange(section, index, field, value, dataMap)} />
+ handleInputChange(section, index, field, value, dataMap)} />
+
+
+
+
+
+
)
}
diff --git a/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx
new file mode 100644
index 000000000..ba0b70455
--- /dev/null
+++ b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx
@@ -0,0 +1,140 @@
+import React, { useState } from 'react'
+import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components";
+import Modal from '@/components/ui/modal';
+import { Button } from '@common/components/ui';
+type ModalOpenProp = {
+ isModalOpen: boolean,
+ setIsModalOpen: (open: boolean) => void,
+ closeModal: () => void,
+ btnTxt?: string,
+}
+const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
+ const [popupOpen, setPopupOpen] = React.useState(false);
+ const buttonRef = React.useRef(null); // 버튼 참조
+ const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
+ const openPopup = () => {
+ if (buttonRef.current) {
+ const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
+ setPopupPosition({
+ top: rect.bottom + window.scrollY, // 버튼 아래쪽
+ left: rect.left + window.scrollX, // 버튼 왼쪽
+ });
+ }
+ setPopupOpen(true); // 팝업 열기
+ };
+ console.log("btnTxt", btnTxt);
+ const closePopup = () => {setPopupOpen(false);}; // 팝업 닫기
+ const chartForm = CHART_FORM.LINE;
+ const chartData = {
+ chartData1: [
+ { label: "1", val: 20 },
+ { label: "3", val: 40 },
+ { label: "5", val: 60 },
+ ],
+ chartData2: [
+ { label: "1", val: 15 },
+ { label: "3", val: 35 },
+ { label: "5", val: 55 },
+ ],
+ }
+ const chartConfig = Object.values(chartData).flat().reduce((config, element) => {
+ config[element.label] = {
+ label: element.label,
+ color: "hsl(var(--chart-1))",
+ };
+ return config;
+ }, {} as Record) satisfies ChartConfig;
+ const getCurrentDate = () => {
+ const today = new Date();
+ const year = today.getFullYear();
+ const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1
+ return `${year}-${month}`;
+ };
+ return (
+
+ {/* 분석 입력현황 조회 */}
+
+
+
+
+ {/* 침입수량 분석결과 */}
+
+ 침입수량 분석결과
+
+ 120
+ m³/d
+
+
+
+ {/* 차트 */}
+
+
+
+
+
분석 입력현황
+
+
상수사용량 정보:
+
+
+
+
오수 전환율:
+
+
+
+
수용가-맨홀 매칭:
+
+
+
+
관망도 자료:
+
+
+
+ {btnTxt === 'RDII' ? <>
강우 자료:
+
+
+
+
RTX 계수 출처:
+
+
+
+ : null}
+
+
+
+
+
+
점검 및 진단 현황
- )
- }
- return ( <>
-
-
점검 및 진단 조회
-
-
- {}} />
- {}} />
- {}} />
- {}} />
- {}} />
- {}} />
- {}} />
- {}} />
-
-
-
-
현황정보
- )
- }
-
- const router = useRouter();
-
- return (
-
-
현황정보 조회
-
-
- {}} selectClass='w-24' />
- {}} selectClass='w-24' />
- {}} selectClass='w-24' />
- {}} selectClass='w-24' />
- {}} selectClass='w-24' />
- {}} selectClass='w-24' />
- {}} selectClass='w-24' />
- {/* */}
-
-
-
-
-
- {/*