From d2cf58dc4bc15fdd82eea994d40fddf3abe1623e Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Thu, 15 May 2025 09:59:37 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=ED=95=98=EC=88=98=EA=B4=80=EB=A1=9C=20?= =?UTF-8?q?=EC=B2=98=ED=8A=B8=20=ED=8C=9D=EC=97=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/popupComponent/MsSwagePpl.tsx | 41 +++++- .../popupComponent/chart/infilChart.tsx | 124 ++++++++++++++++++ 2 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 apps/sn/app/map/components/popupComponent/chart/infilChart.tsx diff --git a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx index f847cceb0..af22c332f 100644 --- a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx @@ -2,6 +2,8 @@ import { VerticalTable } from '@/components/ui/verticalTable'; import React, { useState } from 'react' import InputSection from '../InputSection'; import { handleInputChange } from '../common'; +import { Button } from '@common/components/ui'; +import InfilChart from './chart/infilChart'; // 하수관로 // TODO: RDII 버튼인가 그거 팝업 두개 구현 필요 const inputColumn = [ @@ -15,6 +17,13 @@ const inputColumn = [ ]; const SwtrmtFclt = ({ featureData }: { featureData: any }) => { console.log("featureData", featureData); + const [isModalOpen, setIsModalOpen] = React.useState(false); + const openModal = () => { + setIsModalOpen(true); + }; + const closeModal = () => { + setIsModalOpen(false); + }; const [repairData, setRepairData] = useState([ { year: "2025", type: "개대체" }, { year: "2025", type: "보수" }, @@ -32,6 +41,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..2e52e194f --- /dev/null +++ b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx @@ -0,0 +1,124 @@ +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, +} +const InfilChart = ({ 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); // 팝업 열기 + }; + const closePopup = () => {setPopupOpen(false);}; // 팝업 닫기 + const chartForm = CHART_FORM.LINE; + const chartData = [ + { label: "1", val: 20 }, + { label: "3", val: 40 }, + { label: "5", val: 60 }, + { label: "7", val: 80 }, + { label: "9", val: 100 }, + { label: "11", val: 120 }, + { label: "13", val: 140 }, + { label: "15", val: 120 }, + { label: "17", val: 100 }, + { label: "19", val: 80 }, + { label: "21", val: 60 }, + { label: "23", val: 40 }, + ]; + const chartConfig = chartData.reduce((config, element) => { + config[element.label] = { + label: element.label, + color: "hsl(var(--chart-1))", + }; + return config; + }, {} as Record) satisfies ChartConfig; + return ( + + {/* 분석 입력현황 조회 */} +
+
+ + + {/* 침입수량 분석결과 */} +
+ 침입수량 분석결과 +
+ 120 + m³/d +
+
+
+ {/* 차트 */} +
+ +
+
+ {popupOpen && ( +
+
분석 입력현황
+
+
상수사용량 정보:
+
+ +
+
오수 전환율:
+
+ +
+
수용가-맨홀 매칭:
+
+ +
+
관망도 자료:
+
+ +
+
+
+ + +
+
+ )} + + ) +} + +export default InfilChart \ No newline at end of file From edd52f5336d81fb00293dee3c321b34df5ebd77b Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Thu, 15 May 2025 11:34:52 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=95=88?= =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=84=9C=20=EC=A3=BC=EC=84=9D=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/map/components/common/index.ts | 2 +- apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/sn/app/map/components/common/index.ts b/apps/sn/app/map/components/common/index.ts index 85f51e405..25ff97e72 100644 --- a/apps/sn/app/map/components/common/index.ts +++ b/apps/sn/app/map/components/common/index.ts @@ -17,7 +17,7 @@ type LayerContentMap = { const layerContentMap: LayerContentMap = { // TODO: gis데이터 추가되면 추가 작업 필요 "하수처리시설": { - component: MsSwagePpl, + component: SwtrmtFclt, }, "하수처리구역": { }, "중점우수토실":{component: Ssc,}, diff --git a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx index af22c332f..470ca5920 100644 --- a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx @@ -51,9 +51,9 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => { "rgtr", "mdfr", ]; - const filteredData = Object.entries(featureData) - .filter(([key]) => keysToExtract.includes(key)) // 필요한 키만 필터링 - .map(([key, value]) => ({ key, value: value ?? "N/A" })); // 테이블 데이터 형식으로 변환 + // const filteredData = Object.entries(featureData) + // .filter(([key]) => keysToExtract.includes(key)) // 필요한 키만 필터링 + // .map(([key, value]) => ({ key, value: value ?? "N/A" })); // 테이블 데이터 형식으로 변환 return (
From 6315c5406bcc9eed7af7aa14d83f75fbc8bfbcc0 Mon Sep 17 00:00:00 2001 From: JIeunhuh Date: Thu, 15 May 2025 18:07:55 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=AA=A8=EB=91=90=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/oper/diag/page.tsx | 58 -------------- apps/sn/app/oper/pplines/page.tsx | 65 --------------- apps/sn/app/oper/soil/page.tsx | 126 ------------------------------ apps/sn/app/service/index.ts | 1 - apps/sn/app/service/ppline.ts | 39 --------- 5 files changed, 289 deletions(-) delete mode 100644 apps/sn/app/oper/diag/page.tsx delete mode 100644 apps/sn/app/oper/pplines/page.tsx delete mode 100644 apps/sn/app/oper/soil/page.tsx delete mode 100644 apps/sn/app/service/ppline.ts diff --git a/apps/sn/app/oper/diag/page.tsx b/apps/sn/app/oper/diag/page.tsx deleted file mode 100644 index 013d8eecc..000000000 --- a/apps/sn/app/oper/diag/page.tsx +++ /dev/null @@ -1,58 +0,0 @@ -'use client' - -import { SearchDiv, SelectBox, UiTable } from '@common/business_components'; -import { Button, TableRow, Input, Label } from '@common/components'; -import { TableHead } from '@common/components'; -import { useSnStore } from '../../store'; -import type { TableUpperProps } from '../../store/table'; - -const headMakeColSpan = (upHeadList: TableUpperProps[]) => { - return ( <> - { - upHeadList.map((head: TableUpperProps) => - (!head.upSequnce?{head.title}: - head.upName === 'upChangeRe'&& head.upSequnce=== 1?{'중축 개축 증축 '}:null))} - - - {upHeadList.map((head: TableUpperProps) => - (head.upName === 'upChangeRe'?{head.title}:null))} - - ) -} - - export default function PublicReuseFaciltyInsert() { - const { upHeadList, publicReuseFacilityUper} = useSnStore((state) => state); - const nodeList= headMakeColSpan(upHeadList); - const total = 100; - const headName= ()=>{ - return( -

점검 및 진단 현황

- ) - } - return ( <> -
-

점검 및 진단 조회

- -
- {}} /> - {}} /> - {}} /> - {}} /> - {}} /> - {}} /> - {}} /> - {}} /> - -
- -
-
-
- -
-
- ) -} - - - diff --git a/apps/sn/app/oper/pplines/page.tsx b/apps/sn/app/oper/pplines/page.tsx deleted file mode 100644 index 48621bddc..000000000 --- a/apps/sn/app/oper/pplines/page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -'use client' -import "@common/assets/styles/grid.css"; -import { useEffect, useState } from "react"; -import { SearchDiv, SelectBox, UiTable, MainDiv, Title, ContentsDiv, SearchFormLeft, SearchFormRight } from '@common/business_components'; -import ListDiv from '@common/business_components/ui/list_div'; -import { Button, Input } from '@common/components'; -import { useRouter } from "next/navigation"; -import { pplinesService } from "@service"; - -const tableHeadlist = [ - { id: "ftreSmbol", title: "지형지물부호"}, - { id: "swageLnkgPplPk", title: "하수연결관로기본키"}, - { id: "pbadmsEmd", title: "행정읍면동"}, - { id: "sttyEmd", title: "법정읍면동"} -]; - -export default function Pplines() { - - const router = useRouter() - const total = 20 - const pageSize = 20 - - const [data, setData] = useState<{ content: any[] }>({ content: [] }); // 초기값을 객체 또는 null로 설정 - - const fetchData = async () => { - - try { - const response = await pplinesService.getPplines(); - setData(response.data); // API 응답 저장 - } catch (error) { - console.error("데이터 불러오기 실패:", error); - } - }; - - // 컴포넌트 마운트 시 1회 실행 - useEffect(() => { - fetchData(); - }, []); - - return ( - - - <ContentsDiv> - <SearchDiv> - <SearchFormLeft> - <SelectBox label='시설물' selectArray={[{text:'관로', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='사용여부' selectArray={[{text:'사용', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='경과년도' selectArray={[{text:'10년', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='경사' selectArray={[{text:'', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='흐름방식' selectArray={[{text:'자연유하', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='용도' selectArray={[{text:'오수관', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='관종' selectArray={[{text:'PE관관', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - <SelectBox label='관경' selectArray={[{text:'50', val:'1'}]} className='col-span-3' onSelectValue={()=>{}} selectClass='w-24' /> - </SearchFormLeft> - <SearchFormRight> - <Button className="px-4 py2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={fetchData}>조회</Button> - </SearchFormRight> - </SearchDiv> - - <ListDiv> - <UiTable tableData={data.content} headlist={tableHeadlist} pageSize={pageSize} total={total} children={null} headName="현황정보" cellClick={()=>{}} /> - </ListDiv> - </ContentsDiv> - </MainDiv> ); -} diff --git a/apps/sn/app/oper/soil/page.tsx b/apps/sn/app/oper/soil/page.tsx deleted file mode 100644 index 75becb751..000000000 --- a/apps/sn/app/oper/soil/page.tsx +++ /dev/null @@ -1,126 +0,0 @@ -'use client' - -import { SearchDiv, SelectBox, UiTable } from '@common/business_components'; -import { Button } from '@common/components'; -import { useSnStore } from '@store'; -import { type TableUpperProps } from '@/store/table'; -import { StoreZus } from '@/store/store'; -import { useRouter } from "next/navigation"; - - const upHeadList: TableUpperProps[] = [ - { id: "sido", title: "자산ID111"}, - { id: "sigungo", title: "설비시설"}, - { id: "facilityName", title: "주소"}, - { id: "location", title: "자산코드"}, - { id: "locationgubun", title: "자산명"}, - { id: "facilityCapacity", title: "용도"}, - { id: "yn", title: '신설/교체'}, - { id: "authoDay", title: '처리구역'}, - { id: "area", title: '내용연수' }, - { id: "reuse", title: '취득금액' }, - ] - - const useAStore = StoreZus(); - - export default function PublicReuseFaciltyInsert() { - - //const upHeadList = useSnStore((state) => state.upHeadList) - //const publicReuseFacilityUper = useSnStore((state) => state.publicReuseFacilityUper) - - //const { upHeadList, publicReuseFacilityUper, setHeadList, setTableData, decrementList, addRow } = useAStore.getState(); - const upHeadList = useSnStore(useAStore => useAStore.upHeadList); - const publicReuseFacilityUper = useSnStore(useAStore => useAStore.publicReuseFacilityUper); - const setHeadList = useSnStore(useAStore => useAStore.setHeadList); - const setTableData = useSnStore(useAStore => useAStore.setTableData); - const addRow = useSnStore(useAStore => useAStore.addRow); - const decrementList = useSnStore(useAStore => useAStore.decrementList); - - - //const { upHeadList, publicReuseFacilityUper} = useSnStore((state) => state) - - //const setHeadList = useSnStore((state) => state.setHeadList) - //const setTableData = useSnStore((state) => state.setTableData) - //const decrementList = useSnStore((state) => state.decrementList) - - const handleChangeHeader = () => { - setHeadList(upHeadList) - } - - const add = () => { - console.log(11111) - addRow({ - sido: "xxxxxxxxxx", - sigungo: "bbbbbbbbb", - facilityName: "newFacility", - location: "S-T-S-000000", - locationgubun: "000000", - facilityCapacity: "오수관", - }); - }; - - const searchDataList = () => { - //if (newFacility.trim() === "") return; - - setTableData([ { - sido: "123456", - sigungo: "관로1", - facilityName: "newFacility", - location: "S-T-S-000000", - locationgubun: "000000", - facilityCapacity: "오수관", - }]); - - - }; - - const total = 100; - const headName= ()=>{ - return( - <p className="pl-3 text-xl">현황정보</p> - ) - } - - const router = useRouter(); - - return ( - <div> - <p className="pl-3 text-2xl"> 현황정보 조회</p> - <SearchDiv > - <div className='grid grid-cols-12 gap-1 w-4/5'> - <SelectBox label='시설물' selectArray={[{text:'관로', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - <SelectBox label='사용여부' selectArray={[{text:'사용', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - <SelectBox label='경과년도' selectArray={[{text:'10년', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - <SelectBox label='경사' selectArray={[{text:'', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - <SelectBox label='흐름방식' selectArray={[{text:'자연유하', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - <SelectBox label='용도' selectArray={[{text:'오수관', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - <SelectBox label='관종' selectArray={[{text:'PE관관', val:'1'}]} className='col-span-3' onSelectValue={(val: string)=>{}} selectClass='w-24' /> - {/* <SelectBox label='관경' selectArray={[{text:'50', val:'1'}]} className='col-span-3'/> */} - </div> - <div className='w-1/5 flex justify-end items-center'> - <Button className='mr-10 rounded-lg'>조회</Button> - </div> - </SearchDiv> - {/* </div> */} - <div className="grid grid-cols-2 gap-4"> - <div className="col-span-2"> - - </div> - </div> - - <button onClick={searchDataList} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded"> - 조회 - </button> - <button onClick={handleChangeHeader} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded"> - 헤더 - </button> - <button onClick={decrementList} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded"> - 삭제 - </button> - <button onClick={() => router.push("/oper/pplines")} className="mr-3 mt-4 bg-red-500 text-white px-4 py-2 rounded"> - 이동 - </button> - </div> ); -} - - - diff --git a/apps/sn/app/service/index.ts b/apps/sn/app/service/index.ts index fda21d232..c6bfcff72 100644 --- a/apps/sn/app/service/index.ts +++ b/apps/sn/app/service/index.ts @@ -1,2 +1 @@ -export * from './ppline' export * from './map' diff --git a/apps/sn/app/service/ppline.ts b/apps/sn/app/service/ppline.ts deleted file mode 100644 index 33e4c9871..000000000 --- a/apps/sn/app/service/ppline.ts +++ /dev/null @@ -1,39 +0,0 @@ - -import axios from 'axios' - -/** - * 하수관로 API - */ -const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/v1/pplines` -const PAGE_NO = 1 -const PAGE_SIZE = 20 - -export type PplineProps = { - ftreSmbol: string - swageLnkgPplPk: string - pbadmsEmd: string - sttyEmd: string -} - -export const pplinesService = { - //목록 - getPplines: (size: number = PAGE_SIZE, page: number = PAGE_NO) => { - return axios.get(`${API_URL}`) - }, - //상세 - getPpline: (swageLnkgPplPk: string) => { - return axios.get(`${API_URL}/${swageLnkgPplPk}`) - }, - //저장 - savePpline: (swageLnkgPplPk: string) => { - return axios.post(`${API_URL}`) - }, - //수정 - updatePpline: (swageLnkgPplPk: string) => { - return axios.put(`${API_URL}/${swageLnkgPplPk}`) - }, - //삭제 - removePpline: (swageLnkgPplPk: string) => { - return axios.delete(`${API_URL}/${swageLnkgPplPk}`) - } -} From 9cf8a5355c357adb4e3e995d3c1ab0301943fec3 Mon Sep 17 00:00:00 2001 From: JIeunhuh <entks301@naver.com> Date: Fri, 16 May 2025 16:32:02 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=ED=95=98=EC=88=98=EA=B4=80=EB=A1=9C=20?= =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20/=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=A0=95=EB=B3=B4=20api=20=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=9E=91=EC=97=85=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/components/ui/verticalTable.tsx | 4 +- apps/sn/app/map/components/common/index.ts | 2 +- .../components/popupComponent/MsSwagePpl.tsx | 8 ++- .../popupComponent/chart/infilChart.tsx | 72 +++++++++++-------- .../popupComponent/stormWaterPump.tsx | 10 +-- apps/sn/app/map/featureClickEventPopup.tsx | 27 +++++-- 6 files changed, 79 insertions(+), 44 deletions(-) diff --git a/apps/sn/app/components/ui/verticalTable.tsx b/apps/sn/app/components/ui/verticalTable.tsx index 3d6b10d91..ae3068a67 100644 --- a/apps/sn/app/components/ui/verticalTable.tsx +++ b/apps/sn/app/components/ui/verticalTable.tsx @@ -45,7 +45,7 @@ export function VerticalTable({ onPageChange(1); } }, [onPageChange, resetPageNo]); - + useEffect(() => { if (tableData.length > 0 && tableData[0]) { setFormData(tableData[0] as { [key: string]: string | number | boolean }); @@ -85,6 +85,7 @@ export function VerticalTable({ {children && children[head.id] ? children[head.id] : isEditable ? ( head.type === "select" ? ( <select + id={head.id} value={formData[head.id] ?? "-"} onChange={(e) => handleInputChange(head.id, e.target.value)} className="w-full border border-gray-300 rounded-sm px-2 py-1 text-xl border-radius-0" @@ -97,6 +98,7 @@ export function VerticalTable({ </select> ) : head.type === "input" ? ( <input + id={head.id} type="text" value={formData[head.id] ?? ""} onChange={(e) => handleInputChange(head.id, e.target.value)} diff --git a/apps/sn/app/map/components/common/index.ts b/apps/sn/app/map/components/common/index.ts index 25ff97e72..5e2826e33 100644 --- a/apps/sn/app/map/components/common/index.ts +++ b/apps/sn/app/map/components/common/index.ts @@ -17,7 +17,7 @@ type LayerContentMap = { const layerContentMap: LayerContentMap = { // TODO: gis데이터 추가되면 추가 작업 필요 "하수처리시설": { - component: SwtrmtFclt, + component: StormWaterPump, }, "하수처리구역": { }, "중점우수토실":{component: Ssc,}, diff --git a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx index 470ca5920..1db284c8e 100644 --- a/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx +++ b/apps/sn/app/map/components/popupComponent/MsSwagePpl.tsx @@ -18,7 +18,9 @@ const inputColumn = [ const SwtrmtFclt = ({ featureData }: { featureData: any }) => { console.log("featureData", featureData); const [isModalOpen, setIsModalOpen] = React.useState(false); - const openModal = () => { + const [btnTxt, setBtnTxt] = useState<string>(""); + const openModal = (e: React.MouseEvent<HTMLButtonElement>) => { + e.currentTarget.textContent && setBtnTxt(e.currentTarget.textContent) setIsModalOpen(true); }; const closeModal = () => { @@ -72,12 +74,12 @@ const SwtrmtFclt = ({ featureData }: { featureData: any }) => { </Button> <Button className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700" - onClick={() => console.log("버튼 2 클릭")} + onClick={openModal} > RDII </Button> </div> - <InfilChart isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} /> + <InfilChart btnTxt={btnTxt} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} /> </div> ) } diff --git a/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx index 2e52e194f..ba0b70455 100644 --- a/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx +++ b/apps/sn/app/map/components/popupComponent/chart/infilChart.tsx @@ -6,8 +6,9 @@ type ModalOpenProp = { isModalOpen: boolean, setIsModalOpen: (open: boolean) => void, closeModal: () => void, + btnTxt?: string, } -const InfilChart = ({ isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => { +const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => { const [popupOpen, setPopupOpen] = React.useState(false); const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조 const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치 @@ -21,29 +22,34 @@ const InfilChart = ({ isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) } setPopupOpen(true); // 팝업 열기 }; + console.log("btnTxt", btnTxt); const closePopup = () => {setPopupOpen(false);}; // 팝업 닫기 const chartForm = CHART_FORM.LINE; - const chartData = [ - { label: "1", val: 20 }, - { label: "3", val: 40 }, - { label: "5", val: 60 }, - { label: "7", val: 80 }, - { label: "9", val: 100 }, - { label: "11", val: 120 }, - { label: "13", val: 140 }, - { label: "15", val: 120 }, - { label: "17", val: 100 }, - { label: "19", val: 80 }, - { label: "21", val: 60 }, - { label: "23", val: 40 }, - ]; - const chartConfig = chartData.reduce((config, element) => { - config[element.label] = { - label: element.label, - color: "hsl(var(--chart-1))", - }; - return config; - }, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig; + 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<string, { label: string; color: string }>) 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 ( <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}> {/* 분석 입력현황 조회 */} @@ -64,12 +70,12 @@ const InfilChart = ({ isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) </div> {/* 차트 */} <div className="w-[500px] h-[300px] bg-white p-4"> - <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={[]} chartTitle={'관로유량'} /> + <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'} /> </div> </div> {popupOpen && ( <div - className="absolute bg-gray-100 border border-gray-300 w-[300px] shadow-lg p-4 rounded" + className="absolute bg-gray-100 border border-gray-300 w-[320px] shadow-lg p-4 rounded" style={{ top: popupPosition.top, left: popupPosition.left, @@ -80,10 +86,7 @@ const InfilChart = ({ isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) <div className="grid grid-cols-2 gap-2"> <div>상수사용량 정보:</div> <div> - <select className="border border-gray-300 rounded px-2 py-1"> - <option>2024-12</option> - <option>2025-01</option> - </select> + <input type='month' defaultValue={getCurrentDate()} className="border border-gray-300 rounded px-2 py-1"/> </div> <div>오수 전환율:</div> <div> @@ -106,6 +109,19 @@ const InfilChart = ({ isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) <option>서울.inp</option> </select> </div> + {btnTxt === 'RDII' ? <><div>강우 자료:</div> + <div> + <select className="border border-gray-300 rounded px-2 py-1"> + <option>R20240815.xlsx</option> + </select> + </div> + <div>RTX 계수 출처:</div> + <div> + <select className="border border-gray-300 rounded px-2 py-1"> + <option>2015년 하수도정비기본계획</option> + </select> + </div> + </> : null} </div> <div className="flex justify-end mt-4 space-x-2"> <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}> diff --git a/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx b/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx index 3a6cdee2d..eefef8b3b 100644 --- a/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx +++ b/apps/sn/app/map/components/popupComponent/stormWaterPump.tsx @@ -1,13 +1,15 @@ import { VerticalTable } from '@/components/ui/verticalTable'; import React from 'react' const inputColumn = [ - { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] }, - { id: "bungu", title: "배수분구", type: "input" }, + { id: "swtrmt_zone_cd", title: "처리구역", type: "input" }, + { id: "mltv_dtdv_nm", title: "배수분구", type: "input" }, ] // 빗물펌프 -const StormWaterPump = ({ featureData }: { featureData: any }) => { +const StormWaterPump = ({ featureData }: { featureData: Record<string, any> }) => { + const validKey = inputColumn.map((item) => item.id); + const filteredData = featureData && Object.entries(featureData).filter(([key]) => validKey.includes(key)).reduce((obj: Record<string, any>, [key, value]) => {obj[key] = value; return obj;}, {}); return ( - <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void { + <div><VerticalTable headName='자체 입력정보' tableData={[filteredData]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void { throw new Error('Function not implemented.'); }} /> </div> diff --git a/apps/sn/app/map/featureClickEventPopup.tsx b/apps/sn/app/map/featureClickEventPopup.tsx index a4e3db815..8c46d56de 100644 --- a/apps/sn/app/map/featureClickEventPopup.tsx +++ b/apps/sn/app/map/featureClickEventPopup.tsx @@ -4,7 +4,7 @@ import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } import { useEffect, useRef, useState } from "react"; import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./components/common/table"; import { useGisContext } from "@common/business_components/ui/map/Gis"; -import { getData } from "@/components/lib/api"; +import { getData, putData } from "@/components/lib/api"; import { getLayerContentComponent } from "./components/common"; // TODO: const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => { @@ -69,21 +69,34 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, fetchData(); }, [featureId]); // TODO: api 호출작업 필요(사용자 입력부분) - const btnClickEvent = () => { + const btnClickEvent = async() => { + const bodyData: Record<string, any> = {} if (buttonChk && contentRef.current) { const inputElements = contentRef.current.querySelectorAll('input'); const selectElements = contentRef.current.querySelectorAll('select'); // select 태그의 값 가져오기 - console.log("Select Elements:", selectElements); - console.log("Input Elements:", inputElements); selectElements.forEach((select) => { - console.log("Select Value:", select.value); + bodyData[select.id] = select.value; }); - // input 태그의 값 가져오기 inputElements.forEach((input) => { - console.log("Input Value:", input.value); + bodyData[input.id] = input.value; }); + if (layerNm === '하수관로' || 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' + } + bodyData['fid'] = featureId + const data = await putData(`v1/fclts/${featureId}`, bodyData); + if(data){ + console.log('저장완료', data); + } } } const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;