132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
// 하수맨홀
|
|
import { VerticalTable } from '@/components/ui/verticalTable';
|
|
import { useEffect, useState } from 'react';
|
|
import GisApp from "@common/business_components/ui/map/lib/gis.core";
|
|
|
|
// 상류관로 보기 함수 (FeatureClickEventPopup에서 사용)
|
|
export async function searchUpperPpls(gisMap: any, fcltMngNo: any) {
|
|
const BASE_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
|
|
const res = await fetch(`${BASE_URL}/v1/fcltmhl/upperPpls/${fcltMngNo}`, {
|
|
method: "GET",
|
|
});
|
|
|
|
let data: any = null;
|
|
if (res.ok) {
|
|
try {
|
|
// 응답이 비어있는지 확인
|
|
const contentLength = res.headers.get("content-length");
|
|
if (contentLength === "0") {
|
|
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
|
|
return;
|
|
}
|
|
|
|
// 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
|
|
const text = await res.text();
|
|
if (!text || text.trim() === "") {
|
|
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
|
|
return;
|
|
}
|
|
|
|
// JSON 파싱 시도
|
|
data = JSON.parse(text);
|
|
} catch (error) {
|
|
console.error("JSON parsing error:", error);
|
|
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
|
|
return;
|
|
}
|
|
} else {
|
|
alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
|
|
return;
|
|
}
|
|
|
|
const select: any = GisApp.Module.select;
|
|
let foundFeature: any = null;
|
|
|
|
(data || []).forEach((item: any) => {
|
|
const pplMngNo = item.ppl_mng_no?.trim?.();
|
|
|
|
gisMap
|
|
.getLayers()
|
|
.getArray()
|
|
.filter((e: any) => e.get("lyrTyNm") == "tb_ms_swage_ppl")
|
|
.forEach((layer: any) => {
|
|
const source = layer.getSource?.();
|
|
if (source?.getFeatures) {
|
|
const features = source.getFeatures();
|
|
for (const f of features) {
|
|
if (f.values_.fclt_mng_no?.trim?.() === pplMngNo) {
|
|
foundFeature = f;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
if (foundFeature) select?.selectMultiFeature?.(foundFeature, true);
|
|
});
|
|
|
|
if (!foundFeature) alert(`해당 맨홀의 상류관로를 찾을 수 없습니다.`);
|
|
|
|
const geometry = foundFeature?.getGeometry();
|
|
if (geometry) {
|
|
const extent = geometry.getExtent();
|
|
gisMap.getView().fit(extent, {
|
|
duration: 300,
|
|
padding: [50, 50, 50, 50],
|
|
maxZoom: 14,
|
|
constrainResolution: true,
|
|
nearest: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
const inputColumn = [
|
|
{ id: "swtrmtZoneNm", title: "처리구역", type: "input" },
|
|
{ id: "mltvZoneNm", title: "배수구역", type: "input" },
|
|
{ id: "mltvDtdvNm", title: "배수분구", type: "input" },
|
|
{ id: "layCd", title: "매설위치", type: "select", options: ["도로", "하상"] },
|
|
];
|
|
const Smh = ({ featureData, onSaveClick }: { featureData: any, onSaveClick?: () => void }) => {
|
|
const [formData, setFormData] = useState<any>({});
|
|
|
|
// featureData가 변경될 때 formData 초기화
|
|
useEffect(() => {
|
|
if (featureData) {
|
|
setFormData(featureData);
|
|
}
|
|
}, [featureData]);
|
|
|
|
// 폼 데이터가 변경될 때 호출될 핸들러
|
|
const handleFormDataChange = (newFormData: any) => {
|
|
setFormData(newFormData);
|
|
};
|
|
|
|
// 저장 버튼 클릭 시 최신 formData를 부모에게 전달
|
|
const handleSaveClick = () => {
|
|
if (onSaveClick) {
|
|
// 저장 전에 formData를 부모 컴포넌트의 handleSaveClick에 전달
|
|
onSaveClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<VerticalTable
|
|
headName='입력정보'
|
|
tableData={featureData ? [formData] : []}
|
|
headlist={inputColumn}
|
|
pageSize={20}
|
|
total={0}
|
|
children={undefined}
|
|
cellClick={undefined}
|
|
isEditable={true}
|
|
onPageChange={function (page: number): void {
|
|
throw new Error("Function not implemented.");
|
|
}}
|
|
showSaveButton={true}
|
|
onSaveClick={handleSaveClick}
|
|
onFormDataChange={handleFormDataChange} // 폼 데이터 변경 콜백 추가
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default Smh; |