ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

하수관망도 피쳐 클릭이벤트 처리

Browse Source
This commit is contained in:
JIeunhuh
2025-05-07 10:56:45 +09:00
parent 525307d1ee
commit b8015ea1d9
4 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/components/verticalTable.tsx
-1
View File
@@ -47,7 +47,6 @@ export function VerticalTable({
}, [onPageChange, resetPageNo]);
useEffect(() => {
console.log('data',tableData)
if (tableData.length > 0 && tableData[0]) {
setFormData(tableData[0] as { [key: string]: string | number | boolean });
}
apps/sn/app/map/featureClickEventPopup.tsx
+28 -13
View File
@@ -1,8 +1,9 @@
'use client'
import { VerticalTable } from "@/components/verticalTable";
import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
import { useState } from "react";
import { CommonTableColumn } from "./table";
import { use, useEffect, useState } from "react";
import { SwtrmtFcltCol } from "./table";
import { useGisContext } from "@common/business_components/ui/map/Gis";
const inputColumn = [
{ id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
{ id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
@@ -12,9 +13,23 @@ const inputColumn = [
{ id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
{ id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
];
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => {
// TODO: 런타임 에러 해결 필요
// TODO:
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
const featureProperties = featureData.getProperties(); // 피처의 속성 가져오기
const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
// 피쳐데이터의 현재 레이어 이름 가져오는 함수
const getSelectedLayers = () => {
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 && source.hasFeature(featureData)) {
featureLayer = layer; // 피처가 속한 레이어 찾기
}
});
return featureLayer.get('lyrNm'); // 레이어 이름 출력
};
const [repairData, setRepairData] = useState([
{ year: "2025", type: "개대체" },
{ year: "2025", type: "보수" },
@@ -46,18 +61,19 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
updateData(inspectionData, setInspectionData);
}
};
function transformFeatureDataToArray(featureData: any, keys: string[]) {
function transformFeatureDataToArray(featureProperties: any, keys: string[]) {
// 필요한 키만 추출하여 새로운 객체 생성
const transformedData = keys.reduce((acc, key) => {
acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리
acc[key] = featureProperties[key] !== undefined ? featureProperties[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 keys = SwtrmtFcltCol.map((column) => column.id);
const transformedFeatureData = transformFeatureDataToArray(featureProperties, keys);
useEffect(() => { setLayerNm(getSelectedLayers()) }, [featureProperties]);
const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
<div>
{/* 섹션 제목 */}
@@ -96,7 +112,7 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
<div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[1000]">
<div className="card-header bg-primary flex items-center justify-between p-4">
<div className="flex mx-3 flex-col">
<h3 className="text-2xl font-medium text-white text-label">하수관로 정보</h3>
<h3 className="text-2xl font-medium text-white text-label">{layerNm} 정보</h3>
<div className="font-medium text-white text-label">(00구 00리 하수관로)</div>
</div>
<button
@@ -108,13 +124,12 @@ const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void,
</button>
</div>
<div className="overflow-y-auto flex-1">
<VerticalTable headName='LX 연계정보' tableData={transformedFeatureData} headlist={CommonTableColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
<VerticalTable headName='LX 연계정보' tableData={transformedFeatureData} headlist={SwtrmtFcltCol} 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 {
throw new Error("Function not implemented.");
}}></VerticalTable>
{/* here */}
{renderSection("보수 및 갱신", repairData, "repair")}
{renderSection("청소 및 준설", cleaningData, "cleaning")}
{renderSection("점검 및 진단", inspectionData, "inspection")}
apps/sn/app/map/table.ts
+1 -2
View File
@@ -1,5 +1,4 @@
export const CommonTableColumn = [
{ id: 'swtrmt_fclt_cd', title: '하수처리시설코드' },
export const SwtrmtFcltCol = [
{ id: 'swtrmt_fclt_nm', title: '하수처리시설명' },
{ id: 'fclt_cpct', title: '시설용량' },
{ id: 'rgn_expln', title: '지역설명' },
packages/common/business_components/src/ui/map/GisSelect.js
+1 -1
View File
@@ -15,7 +15,7 @@ export default React.memo(function GisSelect({ onFeatureSelect }) {
//clickFeature(features[0]);
if(features.length > 0) {
const layer = features[0];
onFeatureSelect(layer.getProperties()); //피쳐 속성데이터 상위컴포넌트로 전달
onFeatureSelect(layer); //피쳐 속성데이터 상위컴포넌트로 전달
}
});
return (