피쳐 클릭시 모달 오픈 하고 데이터 나오도록 작업(변경필요)
This commit is contained in:
JIeunhuh
@@ -39,15 +39,15 @@ export function VerticalTable({
|
||||
}: UiTableProps) {
|
||||
const [cur, setCur] = useState<number>(1);
|
||||
const [formData, setFormData] = useState<{ [key: string]: string | number | boolean }>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (resetPageNo) {
|
||||
setCur(1);
|
||||
onPageChange(1);
|
||||
}
|
||||
}, [onPageChange, resetPageNo]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log('data',tableData)
|
||||
if (tableData.length > 0 && tableData[0]) {
|
||||
setFormData(tableData[0] as { [key: string]: string | number | boolean });
|
||||
}
|
||||
|
||||
@@ -2,80 +2,7 @@
|
||||
import { VerticalTable } from "@/components/verticalTable";
|
||||
import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
|
||||
import { useState } from "react";
|
||||
const RxTableColumn = [
|
||||
{ id: 'FTR_CDE', title: '지형지물부호' },
|
||||
{ id: 'FTR_IDN', title: '관리번호' },
|
||||
{ id: 'HJD_CDE', title: '행정읍면동코드' },
|
||||
{ id: 'SHT_NUM', title: '도엽번호' },
|
||||
{ id: 'MNG_CDE', title: '관리기관코드' },
|
||||
{ id: 'IST_YMD', title: '설치일자' },
|
||||
{ id: 'SBA_CDE', title: '하수관용도' },
|
||||
{ id: 'MOP_CDE', title: '관재질' },
|
||||
{ id: 'LIT_CDE', title: '규모' },
|
||||
{ id: 'FOR_CDE', title: '시설물형태' },
|
||||
{ id: 'STD_DIP', title: '관경' },
|
||||
{ id: 'STD_HOL', title: '가로길이' },
|
||||
{ id: 'STD_VEL', title: '세로길이' },
|
||||
{ id: 'BYC_LEN', title: '연장' },
|
||||
{ id: 'BEG_DEP', title: '시점깊이' },
|
||||
{ id: 'END_DEP', title: '종점깊이' },
|
||||
{ id: 'SBK_HSL', title: '시점관저고' },
|
||||
{ id: 'SBL_HSL', title: '종점관저고' },
|
||||
{ id: 'PIP_SLP', title: '평균구배' },
|
||||
{ id: 'SPH_LIN', title: '차선통로수' },
|
||||
{ id: 'BST_ARA', title: '우수배수면적' },
|
||||
{ id: 'DRT_ARA', title: '오수배수면적' },
|
||||
{ id: 'SBQ_SPD', title: '우천시유속' },
|
||||
{ id: 'SBR_SPD', title: '청천시유속' },
|
||||
{ id: 'CNT_NUM', title: '공사번호' },
|
||||
{ id: 'BOM_CDE', title: '시점맨홀지형지물부호' },
|
||||
{ id: 'BOM_IDN', title: '시점맨홀관리번호' },
|
||||
{ id: 'EOM_CDE', title: '중점맨홀지형지물부호' },
|
||||
{ id: 'EOM_IDN', title: '중점맨홀관리번호' },
|
||||
{ id: 'SYS_CHK', title: '대장초기화여부' },
|
||||
{ id: 'PIP_LBL', title: '관라벨' },
|
||||
{ id: 'IQT_CDE', title: '탐사구분' },
|
||||
{ id: 'ORG_IDN', title: '기관관리번호' },
|
||||
{ id: 'SRV_CHK', title: '인입관 유무' }
|
||||
];
|
||||
const tableData = [
|
||||
{
|
||||
FTR_CDE: "001",
|
||||
FTR_IDN: "관리번호001",
|
||||
HJD_CDE: "행정코드001",
|
||||
SHT_NUM: "도엽번호001",
|
||||
MNG_CDE: "관리기관001",
|
||||
IST_YMD: "2025-04-16",
|
||||
SBA_CDE: "하수관용도001",
|
||||
MOP_CDE: "관재질001",
|
||||
LIT_CDE: "규모001",
|
||||
FOR_CDE: "시설물형태001",
|
||||
STD_DIP: "300mm",
|
||||
STD_HOL: "500mm",
|
||||
STD_VEL: "1.2m/s",
|
||||
BYC_LEN: "100m",
|
||||
BEG_DEP: "1.5m",
|
||||
END_DEP: "2.0m",
|
||||
SBK_HSL: "50m",
|
||||
SBL_HSL: "48m",
|
||||
PIP_SLP: "2%",
|
||||
SPH_LIN: "2개",
|
||||
BST_ARA: "200㎡",
|
||||
DRT_ARA: "150㎡",
|
||||
SBQ_SPD: "3.5m/s",
|
||||
SBR_SPD: "2.0m/s",
|
||||
CNT_NUM: "공사번호001",
|
||||
BOM_CDE: "맨홀지형지물부호001",
|
||||
BOM_IDN: "맨홀관리번호001",
|
||||
EOM_CDE: "중점맨홀지형지물부호001",
|
||||
EOM_IDN: "중점맨홀관리번호001",
|
||||
SYS_CHK: "초기화여부001",
|
||||
PIP_LBL: "관라벨001",
|
||||
IQT_CDE: "탐사구분001",
|
||||
ORG_IDN: "기관관리번호001",
|
||||
SRV_CHK: "인입관 유무001",
|
||||
},
|
||||
];
|
||||
import { CommonTableColumn } from "./table";
|
||||
const inputColumn = [
|
||||
{ id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
|
||||
{ id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
|
||||
@@ -86,7 +13,7 @@ const inputColumn = [
|
||||
{ id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
|
||||
];
|
||||
|
||||
const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => {
|
||||
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => {
|
||||
// TODO: 런타임 에러 해결 필요
|
||||
const [repairData, setRepairData] = useState([
|
||||
{ year: "2025", type: "개대체" },
|
||||
@@ -119,7 +46,18 @@ const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => {
|
||||
updateData(inspectionData, setInspectionData);
|
||||
}
|
||||
};
|
||||
|
||||
function transformFeatureDataToArray(featureData: any, keys: string[]) {
|
||||
// 필요한 키만 추출하여 새로운 객체 생성
|
||||
const transformedData = keys.reduce((acc, key) => {
|
||||
acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리
|
||||
return acc;
|
||||
}, {} as Record<string, any>);
|
||||
|
||||
// 배열로 감싸서 반환
|
||||
return [transformedData];
|
||||
}
|
||||
const keys = CommonTableColumn.map((column) => column.id);
|
||||
const transformedFeatureData = transformFeatureDataToArray(featureData, keys);
|
||||
const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
|
||||
<div>
|
||||
{/* 섹션 제목 */}
|
||||
@@ -170,7 +108,7 @@ const FeatureClickEventPopup = ({ onClose }: { onClose: () => void }) => {
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-1">
|
||||
<VerticalTable headName='LX 연계정보' tableData={tableData} headlist={RxTableColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
|
||||
<VerticalTable headName='LX 연계정보' tableData={transformedFeatureData} headlist={CommonTableColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
|
||||
throw new Error("Function not implemented.");
|
||||
}}></VerticalTable>
|
||||
<VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
export const CommonTableColumn = [
|
||||
{ id: 'swtrmt_fclt_cd', title: '하수처리시설코드' },
|
||||
{ id: 'swtrmt_fclt_nm', title: '하수처리시설명' },
|
||||
{ id: 'fclt_cpct', title: '시설용량' },
|
||||
{ id: 'rgn_expln', title: '지역설명' },
|
||||
{ id: 'cmcn_ymd', title: '준공일자' },
|
||||
{ id: 'oprtng_strt_ymd', title: '가동개시일자' },
|
||||
{ id: 'clsg_ymd', title: '폐쇄일자' },
|
||||
{ id: 'prcs_msrc_cd', title: '처리공법코드' },
|
||||
{ id: 'lae_cd', title: '지자체코드' },
|
||||
{ id: 'lae_nm', title: '지자체명' },
|
||||
{ id: 'ctpv_nm', title: '시도명' },
|
||||
{ id: 'sgg_nm', title: '시군구명' },
|
||||
{ id: 'sarea_cd', title: '권역코드' },
|
||||
{ id: 'sarea_nm', title: '권역명' },
|
||||
{ id: 'lrge_sarea_nm', title: '대권역명' },
|
||||
{ id: 'rvr_nm', title: '하천명' },
|
||||
{ id: 'addr', title: '주소' },
|
||||
{ id: 'daddr', title: '상세주소' },
|
||||
{ id: 'rdnm_addr', title: '도로명주소' },
|
||||
{ id: 'dtl_rdnm_addr', title: '상세도로명주소' },
|
||||
{ id: 'dschg_wtst_nm', title: '방류수계명' },
|
||||
{ id: 'plln_area', title: '부지면적' },
|
||||
{ id: 'mng_rprtv_bzenty_nm', title: '관리대행업제명' },
|
||||
{ id: 'swtrmt_ppltn_cnt', title: '하수처리인구수' },
|
||||
{ id: 'prcs_zone_area_sum', title: '처리구역면적합계' },
|
||||
{ id: 'geom', title: 'geometry' },
|
||||
{ id: 'xcrd', title: 'X좌표' },
|
||||
{ id: 'ycrd', title: 'Y좌표' },
|
||||
{ id: 'oprtng_stts_cd', title: '가동상태코드' },
|
||||
{ id: 'rprs_msrc_cn', title: '대표공법내용' },
|
||||
{ id: 'stty_crtr_bod', title: '법정기준생물화학적산소요구량' },
|
||||
{ id: 'stty_crtr_toc', title: '법정기준TOC' },
|
||||
{ id: 'stty_crtr_ss', title: '법정기준SS' },
|
||||
{ id: 'stty_crtr_tn', title: '법정기준총질소' },
|
||||
{ id: 'stty_crtr_tph', title: '법정기준총인' },
|
||||
{ id: 'stty_crtr_clbcl_cnt', title: '법정기준대장균수' },
|
||||
{ id: 'bsn_nm', title: '유역명' },
|
||||
{ id: 'obsrvn_spt_cd', title: '관측지점코드' },
|
||||
];
|
||||
@@ -23,14 +23,22 @@ function Gis({ treeData = [], isSearch = false }) {
|
||||
const mapRef = useRef();
|
||||
const [mapObject, setMapObject] = useState({});
|
||||
const [tabVisible, setTabVisible] = useState(true);
|
||||
const [isOpen, setIsOpen] = useState(true); // 팝업 열기/닫기 상태
|
||||
const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
|
||||
const [featureData,setFeatureData] = useState(null) // 선택된 피쳐 데이터
|
||||
const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
|
||||
//const [treeData, setTreeData] = useState([]);
|
||||
const checkedLayerIds = useRef([]);
|
||||
let gisMap = null;
|
||||
const closePopup = () => {
|
||||
setIsOpen(false); // 팝업 닫기
|
||||
setFeatureData(null)
|
||||
};
|
||||
const handleFeatureSelect = (data) => {
|
||||
console.log('check',data)
|
||||
setFeatureData(data); // 선택된 피처 데이터 저장
|
||||
setIsOpen(true); // 팝업 열기
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapRef.current) return;
|
||||
|
||||
@@ -101,7 +109,7 @@ function Gis({ treeData = [], isSearch = false }) {
|
||||
|
||||
//setTreeData(data);
|
||||
const layerItems = getLayerItems(layerCode);
|
||||
//setEditLayerItems(prev => [...layerItems]);
|
||||
//setEditLayerItems(prev => [...layerItems])
|
||||
}, [treeData]);
|
||||
|
||||
const getLayerItems= (layerCode) => {
|
||||
@@ -135,8 +143,10 @@ function Gis({ treeData = [], isSearch = false }) {
|
||||
<GisContext.Provider value={{gisCore, gisMap, treeData, checkedLayerIds}}>
|
||||
<div className="h-[calc(100vh-10rem)] flex relative">
|
||||
<GisTab visible={tabVisible} setVisible={setTabVisible} isSearch={isSearch} />
|
||||
{isOpen && (
|
||||
<GisContent onFeatureSelect={handleFeatureSelect}/>
|
||||
{isOpen && featureData && (
|
||||
<FeatureClickEventPopup
|
||||
featureData={featureData}
|
||||
onClose={closePopup} // 닫기 콜백 전달
|
||||
/>
|
||||
)}
|
||||
@@ -144,7 +154,6 @@ function Gis({ treeData = [], isSearch = false }) {
|
||||
<GisLonLat/>
|
||||
<GisToolBar/>
|
||||
<MapToggleBtn/>
|
||||
<GisContent/>
|
||||
</div>
|
||||
</GisContext.Provider>
|
||||
</>
|
||||
|
||||
@@ -8,7 +8,7 @@ import './lib/css/gis.edit.css';
|
||||
import MapToggleBtn from './MapToggleBtn';
|
||||
import GisEdit from './GisEdit';
|
||||
|
||||
export default function GisContent({ edit = false }) {
|
||||
export default function GisContent({ edit = false,onFeatureSelect }) {
|
||||
const { gisMap, gisCore } = useGisContext();
|
||||
const [visibleComponents, setVisibleComponents] = useState({});
|
||||
const addressResultLayer = useRef(null);
|
||||
@@ -54,7 +54,7 @@ export default function GisContent({ edit = false }) {
|
||||
{/* <MapToggleBtn useCesium={useCesium} /> */}
|
||||
{/* { <GisLonLat /> */}
|
||||
{/* <GisSelect clickFeature={clickFeature} /> */}
|
||||
<GisSelect />
|
||||
<GisSelect onFeatureSelect={onFeatureSelect}/>
|
||||
{/* {edit && <GisEdit />} */}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,7 @@ import GisApp from './lib/gis.core';
|
||||
import GisOlSelect from './lib/gis.select';
|
||||
import { useContext } from 'react';
|
||||
import { GisContext } from './Gis';
|
||||
export default React.memo(function GisSelect() {
|
||||
export default React.memo(function GisSelect({ onFeatureSelect }) {
|
||||
const { gisMap } = useContext(GisContext);
|
||||
const select = new GisOlSelect(gisMap);
|
||||
GisApp.Module.select = select;
|
||||
@@ -13,6 +13,10 @@ export default React.memo(function GisSelect() {
|
||||
|
||||
select.getSelectedInfo(function (features) {
|
||||
//clickFeature(features[0]);
|
||||
if(features.length > 0) {
|
||||
const layer = features[0];
|
||||
onFeatureSelect(layer.getProperties()); //피쳐 속성데이터 상위컴포넌트로 전달
|
||||
}
|
||||
});
|
||||
return (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user