528 lines
20 KiB
TypeScript
528 lines
20 KiB
TypeScript
/**
|
|
* ➡️ 경로 : 하수관망도 메인 페이지 (시설물 클릭) - 오른쪽 팝업창
|
|
*
|
|
* 📄 FeatureClickEventPopup
|
|
* 시설물(피처) 클릭시 오른쪽 팝업창 컴포넌트
|
|
*
|
|
* - 지도 시설물(피처) 클릭 시 팝업 표시 및 데이터 로딩
|
|
* - 레이어 유형에 따른 동적 테이블 및 헤드리스트 설정
|
|
* - 자체입력정보 조회 및 저장 기능 (하수관로, 우수토실, 하수펌프장, 하수맨홀)
|
|
* - 코드 매핑 및 데이터 포맷팅 처리
|
|
* - 상류관로 검색, 침입수/RDII 분석 차트 표시
|
|
* - 모달을 통한 저장 확인 및 API 연동
|
|
*
|
|
* 🔗 사용 API
|
|
* - 하수관로 자체입력정보 조회: GET /api/v1/fcltppl/{fcltMngNo}/{mngInstCd} (sewerage-service)
|
|
* - 우수토실 자체입력정보 조회: GET /api/v1/fcltstofcbr/{fcltMngNo}/{mngInstCd} (sewerage-service)
|
|
* - 하수펌프장 자체입력정보 조회: GET /api/v1/fcltpump/{fcltMngNo}/{mngInstCd} (sewerage-service)
|
|
* - 하수맨홀 자체입력정보 조회: GET /api/v1/fcltmhl/{fcltMngNo}/{mngInstCd} (sewerage-service)
|
|
* - 하수관로 자체입력정보 저장: POST /api/v1/fcltppl (sewerage-service)
|
|
* - 우수토실 자체입력정보 저장: POST /api/v1/fcltstofcbr (sewerage-service)
|
|
* - 하수펌프장 자체입력정보 저장: POST /api/v1/fcltpump (sewerage-service)
|
|
* - 하수맨홀 자체입력정보 저장: POST /api/v1/fcltmhl (sewerage-service)
|
|
*/
|
|
'use client'
|
|
import { getData, postData } from "@/components/lib/api";
|
|
import Modal from "@/components/ui/modal";
|
|
import { VerticalTable } from "@/components/ui/verticalTable";
|
|
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
|
import { Button } from "@common/components/ui";
|
|
import { useEffect, useRef, useState, useMemo } from "react";
|
|
import { getLayerContentComponent } from "../common";
|
|
import { SwtrmtFcltCol, SwtrmtFcltCol2, SwtrmtPrcsZoneCol, SwtrmtPrcsZoneCol2, untrtSwgRainCol1, untrtSwgRainCol2, MsSwagePplCol, MsSwagePplCol2, ExclnSewagePumpCol, ExclnSewagePumpCol2, DrtwSewagePumpCol, DrtwSewagePumpCol2, MsSwageMhlCol, MsSwageMhlCol2, stofcbrCol, stofcbrCol2, MS_SWAGE_MHL_CODES, DRTW_SEWAGE_PUMP_USE_CODES } from "../common/table";
|
|
import InfilChart from './chart/infilChart';
|
|
import RdiiChart from './chart/rdiiChart';
|
|
import { useInfilChartModalStore, useRdiiChartModalStore } from "./chartModalStore";
|
|
import { formatDisplayData } from '@/components/lib/utils/formatDisplayValue';
|
|
import { codeMapper } from "../common/codeMapper";
|
|
import LoadingOverlay from '@/components/ui/LoadingBar';
|
|
import { searchUpperPpls } from "./smh";
|
|
|
|
|
|
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 [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
|
|
const [layerSpecificNm, setLayerSpecificNm] = useState<string>(""); // 레이어 이름 상태
|
|
const [tableData, setTableData] = useState<any>(null); // 피처 데이터
|
|
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<any>(); // api 호출여부
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const [isModalOpen, setIsModalOpen] = useState(false); // 모달 열기 상태
|
|
const [isMainSsc, setIsMainSsc] = useState(false); // 중점우수토실 여부
|
|
const [isDrtwSewagePump, setIsDrtwSewagePump] = useState(false); // 오수펌프장 여부
|
|
// 🎯 InfilChart 및 RdiiChart 관련 상태 추가
|
|
const { setIsOpen: setIsModalInfil } = useInfilChartModalStore();
|
|
const { setIsOpen: setIsModalRdii } = useRdiiChartModalStore();
|
|
const [isClicked, setIsClicked] = useState(true); // 클릭 여부 상태
|
|
const [isLoading, setIsLoading] = useState(false); // 로딩 상태
|
|
const [chmbrXcnts, setChmbrXcnts] = useState<string>(''); // 로딩 상태
|
|
const [chmbrYdnts, setChmbrYdnts] = useState<string>(''); // 로딩 상태
|
|
|
|
// 🎯 관로관리번호 추출
|
|
const pplMngNo = featureData?.values_?.fclt_mng_no || "";
|
|
|
|
const featureId = typeof featureData.getId === 'function'
|
|
? featureData.getId()
|
|
: featureData.fid;
|
|
|
|
// 🎯 데이터 전처리 메모이제이션
|
|
const processedData = useMemo(() => {
|
|
if (!featureData?.values_) return null;
|
|
|
|
return {
|
|
...featureData.values_,
|
|
discharge_pipe_spec: `직경: ${featureData.values_.pipe_diameter || '-'} / 높이: ${featureData.values_.pipe_hg || '-'} / 길이: ${featureData.values_.pipe_lt || '-'}`
|
|
};
|
|
}, [featureData?.values_]);
|
|
|
|
// 피쳐데이터의 현재 레이어 이름 가져오는 함수
|
|
const getSelectedLayers = () => {
|
|
let result = null;
|
|
const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
|
|
let featureLayer: any = null; // 피처가 속한 레이어를 찾기 위한 변수
|
|
layers.some((layer: any) => {
|
|
const source = layer.getSource();
|
|
// if (source && featureData && featureData.fid) {
|
|
// featureLayer = layer; // 피처가 속한 레이어 찾기
|
|
// }
|
|
if (source && source.hasFeature && featureData
|
|
&& typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
|
|
featureLayer = layer; // 피처가 속한 레이어 찾기
|
|
return true; // 반복 종료
|
|
}
|
|
return false;
|
|
});
|
|
|
|
if (featureData['ol_uid']) {
|
|
// Gis 레이어 클릭 이벤트
|
|
setIsClicked(true);
|
|
const lyrTyNm = featureData.id_.split('.')[0];
|
|
|
|
switch (lyrTyNm) {
|
|
case 'tb_ms_swage_ppl': {
|
|
result = '하수관로';
|
|
setHeadlist(MsSwagePplCol);
|
|
setLayerSpecificNm(featureData.values_.fclt_mng_no);
|
|
break;
|
|
}
|
|
case 'tb_ms_swage_mhl': {
|
|
result = '하수맨홀';
|
|
setHeadlist(MsSwageMhlCol);
|
|
setLayerSpecificNm(featureData.values_.fclt_mng_no);
|
|
break;
|
|
}
|
|
case 'tb_ms_swage_pmstn': {
|
|
const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
|
|
if (drtwPumpCode && featureData.values_.usg_cd.trim() === drtwPumpCode.val) {
|
|
setIsDrtwSewagePump(true);
|
|
setHeadlist(DrtwSewagePumpCol);
|
|
}
|
|
else {
|
|
setIsDrtwSewagePump(false);
|
|
setHeadlist(ExclnSewagePumpCol);
|
|
}
|
|
setLayerSpecificNm(featureData.values_.fclt_mng_no);
|
|
result = '하수펌프장';
|
|
break;
|
|
}
|
|
case 'tb_il_swage_prcs_fclt': {
|
|
result = '하수처리시설';
|
|
setHeadlist(SwtrmtFcltCol);
|
|
setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
|
|
break;
|
|
}
|
|
case 'tb_ms_swage_prcs_zone': {
|
|
result = '하수처리구역';
|
|
setHeadlist(SwtrmtPrcsZoneCol);
|
|
setLayerSpecificNm(featureData.values_.swtrmt_fclt_cd);
|
|
break;
|
|
}
|
|
case 'tb_ms_stofcbr': {
|
|
result = '우수토실';
|
|
setHeadlist(stofcbrCol);
|
|
setLayerSpecificNm(featureData.values_.fclt_mng_no);
|
|
break;
|
|
}
|
|
case 'om_dt_untrt_swg_rain': {
|
|
result = '중점우수토실';
|
|
setHeadlist(untrtSwgRainCol1);
|
|
setHeadlist2(untrtSwgRainCol2);
|
|
setLayerSpecificNm(featureData.values_.manage_no);
|
|
break;
|
|
}
|
|
default: {
|
|
result = featureLayer ? featureLayer.get('lyrNm') : null;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
// SearchModal 클릭 이벤트
|
|
setIsClicked(false);
|
|
const lyrTyNm = featureData.lyrTypeNm;
|
|
|
|
switch (lyrTyNm) {
|
|
case 'tb_ms_swage_ppl': {
|
|
result = '하수관로';
|
|
setHeadlist(MsSwagePplCol2)
|
|
setLayerSpecificNm(featureData.swtrmtFcltCd);
|
|
break;
|
|
}
|
|
case 'tb_ms_swage_mhl': {
|
|
result = '하수맨홀';
|
|
setHeadlist(MsSwageMhlCol2)
|
|
setLayerSpecificNm(featureData.fcltMngNo);
|
|
break;
|
|
}
|
|
case 'tb_ms_swage_pmstn': {
|
|
const drtwPumpCode = DRTW_SEWAGE_PUMP_USE_CODES.find(code => code.text === '오수펌프장');
|
|
if (drtwPumpCode && featureData.usgCd.trim() === drtwPumpCode.val) {
|
|
setIsDrtwSewagePump(false);
|
|
setHeadlist(ExclnSewagePumpCol2)
|
|
}
|
|
else {
|
|
setIsDrtwSewagePump(true);
|
|
setHeadlist(DrtwSewagePumpCol2)
|
|
}
|
|
setLayerSpecificNm(featureData.fcltMngNo);
|
|
result = '하수펌프장';
|
|
break;
|
|
}
|
|
case 'tb_il_swage_prcs_fclt': {
|
|
result = '하수처리시설';
|
|
setHeadlist(SwtrmtFcltCol2)
|
|
setLayerSpecificNm(featureData.swtrmtFcltCd);
|
|
break;
|
|
}
|
|
case 'tb_ms_swage_prcs_zone': {
|
|
result = '하수처리구역';
|
|
setHeadlist(SwtrmtPrcsZoneCol2);
|
|
setLayerSpecificNm(featureData.swtrmtFcltCd);
|
|
break;
|
|
}
|
|
case 'tb_ms_stofcbr': {
|
|
result = '우수토실';
|
|
setHeadlist(stofcbrCol2)
|
|
setLayerSpecificNm(featureData.fcltMngNo);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
if (!featureId) return;
|
|
|
|
try {
|
|
const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
|
|
setLayerNm(selectedLayerName); // 상태 업데이트
|
|
|
|
let data;
|
|
if (featureData['ol_uid']) data = featureData.values_; // Gis 레이어 클릭 이벤트일 때
|
|
else data = featureData; // SearchModal 클릭 이벤트일 때
|
|
|
|
// 하수맨홀인 경우 용도코드를 텍스트로 변환
|
|
if (selectedLayerName === '하수맨홀' && data) {
|
|
// mqlt_cd 값 변환 (재질코드)
|
|
if (data.mqlt_cd) {
|
|
const materialCodeItem = MS_SWAGE_MHL_CODES.find(
|
|
code => code.val === data.mqlt_cd.trim()
|
|
);
|
|
if (materialCodeItem) data.mqlt_cd = `${materialCodeItem.text}`;
|
|
}
|
|
} else {
|
|
// 중점우수토실인 경우 구분 값
|
|
if (selectedLayerName === '중점우수토실' && data) {
|
|
if (data.mesure_spot_se) {
|
|
const mesureSpotSe = [{id:'0', text: '합류식'}, {id:'1', text: '분류식'}]
|
|
const mesureSpotSeItem = mesureSpotSe.find(
|
|
code => code.id === data.mesure_spot_se.trim()
|
|
);
|
|
if (mesureSpotSeItem) data.mesure_spot_se = mesureSpotSeItem.text;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 🎯 기본 데이터 포맷팅
|
|
const formattedData = formatDisplayData(data);
|
|
|
|
setFetchData(formattedData);
|
|
setTableData(formattedData);
|
|
|
|
switch (selectedLayerName) {
|
|
case '하수관로':
|
|
setButtonChk(true)
|
|
|
|
// ✅ codeMapper 사용하여 API 결과도 변환
|
|
setTableData(codeMapper({
|
|
layerName: selectedLayerName,
|
|
data: { ...formattedData }
|
|
}));
|
|
break;
|
|
case '하수맨홀':
|
|
setButtonChk(true)
|
|
|
|
// ✅ codeMapper 사용하여 API 결과도 변환
|
|
setTableData(codeMapper({
|
|
layerName: selectedLayerName,
|
|
data: { ...formattedData }
|
|
}));
|
|
break;
|
|
case '하수펌프장':
|
|
setButtonChk(true)
|
|
|
|
setTableData(codeMapper({
|
|
layerName: selectedLayerName,
|
|
data: { ...formattedData }
|
|
}));
|
|
break;
|
|
case '하수처리시설':
|
|
setButtonChk(false)
|
|
break;
|
|
case '하수처리구역':
|
|
setButtonChk(false)
|
|
break;
|
|
case '우수토실':
|
|
setButtonChk(true)
|
|
setIsMainSsc(false)
|
|
break;
|
|
case '중점우수토실':
|
|
setButtonChk(false)
|
|
setIsMainSsc(true)
|
|
// 🎯 processedData도 포맷팅하여 설정
|
|
const processedFormattedData = formatDisplayData(processedData);
|
|
|
|
setFetchData([processedFormattedData])
|
|
setTableData(processedFormattedData);
|
|
// setIsLoading(false); // 기본 렌더링 완료
|
|
|
|
setTableData(codeMapper({
|
|
layerName: selectedLayerName,
|
|
data: { ...processedFormattedData }
|
|
}));
|
|
|
|
setChmbrXcnts(data.chmbr_xcnts);
|
|
setChmbrYdnts(data.chmbr_ydnts);
|
|
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
// 자체입력정보 API 엔드포인트 선택
|
|
let apiEndpoint = '';
|
|
const fcltMngNo = featureData?.values_?.fclt_mng_no || null;
|
|
const mngInstCd = featureData?.values_?.mng_inst_cd || null;
|
|
if (selectedLayerName === '하수관로') apiEndpoint = `v1/fcltppl/${fcltMngNo}/${mngInstCd}`;
|
|
else if (selectedLayerName === '우수토실') apiEndpoint = `v1/fcltstofcbr/${fcltMngNo}/${mngInstCd}`;
|
|
else if (selectedLayerName === '하수펌프장') apiEndpoint = `v1/fcltpump/${fcltMngNo}/${mngInstCd}`;
|
|
else if (selectedLayerName === '하수맨홀') apiEndpoint = `v1/fcltmhl/${fcltMngNo}/${mngInstCd}`;
|
|
|
|
// API에서 상세 데이터 가져오기
|
|
if (apiEndpoint) {
|
|
try {
|
|
const result = await getData(apiEndpoint);
|
|
|
|
if (result) {
|
|
const processedApiData = codeMapper({
|
|
layerName: selectedLayerName,
|
|
data: { ...result, ...tableData }
|
|
});
|
|
|
|
setFetchData(processedApiData);
|
|
}
|
|
} catch (apiError) {
|
|
console.error('API 데이터 로딩 중 오류:', apiError);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('데이터 로딩 중 오류:', error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [featureId, processedData]);
|
|
|
|
// 저장 시 모달 띄우기
|
|
const handleSaveClick = () => {
|
|
setIsModalOpen(true); // 모달 열기
|
|
};
|
|
|
|
const handleModalSave = () => {
|
|
setIsModalOpen(false); // 모달 닫기
|
|
btnClickEvent(); // 저장 이벤트 실행
|
|
};
|
|
|
|
const handleModalClose = () => {
|
|
setIsModalOpen(false); // 모달 닫기
|
|
};
|
|
|
|
// 저장 버튼 이벤트
|
|
const btnClickEvent = async () => {
|
|
const bodyData: Record<string, any> = {}
|
|
|
|
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;
|
|
});
|
|
|
|
// 레이어명에 따라 API 엔드포인트 분기처리
|
|
let apiEndpoint = '';
|
|
let result = null;
|
|
|
|
if (layerNm === '하수관로') apiEndpoint = 'v1/fcltppl';
|
|
else if (layerNm === '우수토실') apiEndpoint = 'v1/fcltstofcbr';
|
|
else if (layerNm === '하수펌프장') apiEndpoint = 'v1/fcltpump';
|
|
else if (layerNm === '하수맨홀') apiEndpoint = 'v1/fcltmhl';
|
|
|
|
bodyData['fcltMngNo'] = featureData.values_.fclt_mng_no.toString() || null;
|
|
bodyData['mngInstCd'] = featureData.values_.mng_inst_cd.toString() || null;
|
|
// 빈 키 제거
|
|
if (bodyData[""] !== undefined) delete bodyData[""];
|
|
|
|
// 🎯 우수토실일 경우 prrtymngYn 값 변환
|
|
if (layerNm === '우수토실' && bodyData.prrtymngYn) {
|
|
if (bodyData.prrtymngYn === '중점우수토실') {
|
|
bodyData.prrtymngYn = 'Y';
|
|
} else if (bodyData.prrtymngYn === '우수토실') {
|
|
bodyData.prrtymngYn = 'N';
|
|
}
|
|
}
|
|
|
|
try {
|
|
result = await postData(apiEndpoint, bodyData);
|
|
|
|
if (result) {
|
|
alert('저장되었습니다');
|
|
setFetchData(result.data || result);
|
|
} else {
|
|
alert('저장에 실패했습니다');
|
|
console.error('API 응답 오류:', result);
|
|
}
|
|
} catch (error) {
|
|
alert('저장 중 오류가 발생했습니다');
|
|
console.error('API 요청 오류:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 레이어명에 따라 상세페이지 렌더링
|
|
const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
|
|
|
|
return (
|
|
<div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-5rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[50]">
|
|
<LoadingOverlay isLoading={isLoading} />
|
|
<div className="card-header bg-primary flex items-center justify-between relative p-4">
|
|
<div className="flex items-center space-x-4 flex-1">
|
|
<h3 className="text-2xl font-medium text-white text-label whitespace-nowrap">{layerNm}
|
|
{tableData?.usg_cd && (
|
|
<>
|
|
({tableData.usg_cd})
|
|
</>
|
|
)} 정보 <br />관리번호 : {layerSpecificNm}
|
|
</h3>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
{/* 하수관로일 때만 Infil/RDII 버튼 표시 */}
|
|
{layerNm === '하수관로' && (
|
|
<>
|
|
<Button onClick={() => setIsModalInfil(true)}
|
|
className="py-1 text-xl text-blue-600 border border-blue-600 rounded hover:bg-gray-700"
|
|
color="white"
|
|
size="sm"
|
|
>
|
|
침입수분석
|
|
</Button>
|
|
<Button onClick={() => setIsModalRdii(true)}
|
|
className="py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
|
|
color="white"
|
|
size="sm"
|
|
>
|
|
RDII분석
|
|
</Button>
|
|
</>
|
|
)}
|
|
{layerNm === '하수맨홀' && (
|
|
<>
|
|
<Button
|
|
color="white"
|
|
className="px-2 py-1 text-xl text-gray-600 border border-gray-600 rounded hover:bg-gray-700 mr-4"
|
|
onClick={() => {
|
|
setIsLoading(true);
|
|
searchUpperPpls(gisMap, layerSpecificNm).finally(() => setIsLoading(false));
|
|
}}
|
|
>
|
|
상류관로 보기
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
<Button
|
|
onClick={onClose}
|
|
className="flex items-center space-x-4 text-white hover:text-gray-300 focus:outline-none"
|
|
size="xs"
|
|
>
|
|
✕
|
|
</Button>
|
|
</div>
|
|
<div className="overflow-y-auto overflow-x-hidden flex-1" ref={contentRef}>
|
|
<VerticalTable
|
|
headName='기본정보'
|
|
tableName1={layerNm === '중점우수토실' ? "측정지점" : undefined}
|
|
tableData={[tableData]}
|
|
headlist={headlist}
|
|
pageSize={20}
|
|
total={0}
|
|
cellClick={undefined}
|
|
onPageChange={function (): void {
|
|
throw new Error("Function not implemented.");
|
|
}}
|
|
// 두 번째 테이블 조건부 props
|
|
showSecondTable={layerNm === '중점우수토실' ? true : false}
|
|
tableName2={layerNm === '중점우수토실' ? "시설현황" : undefined}
|
|
tableData2={layerNm === '중점우수토실' && tableData ? [tableData] : []}
|
|
headlist2={layerNm === '중점우수토실' ? headlist2 : undefined}
|
|
pageSize2={20}
|
|
total2={0}
|
|
isEditable2={buttonChk}
|
|
/>
|
|
<Modal isModalOpen={isModalOpen} title="자체입력정보 저장" setIsModalOpen={setIsModalOpen} closeModal={handleModalClose} saveModal={handleModalSave}><div className="text-lg">정보를 저장하시겠습니까?</div></Modal>
|
|
{ContentComponent &&
|
|
<ContentComponent
|
|
featureData={fetchData}
|
|
isMainSsc={isMainSsc}
|
|
isDrtwSewagePump={isDrtwSewagePump}
|
|
onSaveClick={handleSaveClick}
|
|
chmbrXcnts={chmbrXcnts}
|
|
chmbrYdnts={chmbrYdnts}
|
|
gisObject={featureData.values_}
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
<InfilChart pplMngNo={pplMngNo} />
|
|
<RdiiChart pplMngNo={pplMngNo} />
|
|
</div>
|
|
)
|
|
}
|
|
export default FeatureClickEventPopup; |