Merge pull request 'reportMng' (#305) from reportMng into main
Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/305
This commit is contained in:
commit
f1c775b691
|
|
@ -51,6 +51,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
const [isExternalMode, setIsExternalMode] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [layoutKey, setLayoutKey] = useState(0); // 레이아웃 강제 리렌더링용
|
||||
const [lastRefreshedAt, setLastRefreshedAt] = useState<Date | null>(null); // 마지막 갱신 시간
|
||||
const canvasContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 외부 업체 역할 체크
|
||||
|
|
@ -61,18 +62,16 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
console.log("=== 사용자 권한 그룹 조회 ===");
|
||||
console.log("API 응답:", response);
|
||||
console.log("찾는 역할:", EXTERNAL_VENDOR_ROLE);
|
||||
|
||||
|
||||
if (response.success && response.data) {
|
||||
console.log("권한 그룹 목록:", response.data);
|
||||
|
||||
|
||||
// 사용자의 권한 그룹 중 LSTHIRA_EXTERNAL_VENDOR가 있는지 확인
|
||||
const hasExternalRole = response.data.some(
|
||||
(group: any) => {
|
||||
console.log("체크 중인 그룹:", group.authCode, group.authName);
|
||||
return group.authCode === EXTERNAL_VENDOR_ROLE || group.authName === EXTERNAL_VENDOR_ROLE;
|
||||
}
|
||||
);
|
||||
|
||||
const hasExternalRole = response.data.some((group: any) => {
|
||||
console.log("체크 중인 그룹:", group.authCode, group.authName);
|
||||
return group.authCode === EXTERNAL_VENDOR_ROLE || group.authName === EXTERNAL_VENDOR_ROLE;
|
||||
});
|
||||
|
||||
console.log("외부 업체 역할 보유:", hasExternalRole);
|
||||
setIsExternalMode(hasExternalRole);
|
||||
}
|
||||
|
|
@ -101,12 +100,12 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
const handleFullscreenChange = () => {
|
||||
const isNowFullscreen = !!document.fullscreenElement;
|
||||
setIsFullscreen(isNowFullscreen);
|
||||
|
||||
|
||||
// 전체화면 종료 시 레이아웃 강제 리렌더링
|
||||
if (!isNowFullscreen) {
|
||||
setTimeout(() => {
|
||||
setLayoutKey(prev => prev + 1);
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
setLayoutKey((prev) => prev + 1);
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
}, 50);
|
||||
}
|
||||
};
|
||||
|
|
@ -216,6 +215,8 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
}),
|
||||
);
|
||||
}
|
||||
// 마지막 갱신 시간 기록
|
||||
setLastRefreshedAt(new Date());
|
||||
} else {
|
||||
throw new Error(response.error || "레이아웃 조회 실패");
|
||||
}
|
||||
|
|
@ -252,6 +253,155 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [layoutId]);
|
||||
|
||||
// 10초 주기 자동 갱신 (중앙 관제 화면 자동 새로고침)
|
||||
useEffect(() => {
|
||||
const AUTO_REFRESH_INTERVAL = 10000; // 10초
|
||||
|
||||
const silentRefresh = async () => {
|
||||
// 로딩 중이거나 새로고침 중이면 스킵
|
||||
if (isLoading || isRefreshing) return;
|
||||
|
||||
try {
|
||||
// 레이아웃 데이터 조용히 갱신
|
||||
const response = await getLayoutById(layoutId);
|
||||
|
||||
if (response.success && response.data) {
|
||||
const { layout, objects } = response.data;
|
||||
const dbConnectionId = layout.external_db_connection_id || layout.externalDbConnectionId;
|
||||
|
||||
// hierarchy_config 파싱
|
||||
let hierarchyConfigData: any = null;
|
||||
if (layout.hierarchy_config) {
|
||||
hierarchyConfigData =
|
||||
typeof layout.hierarchy_config === "string"
|
||||
? JSON.parse(layout.hierarchy_config)
|
||||
: layout.hierarchy_config;
|
||||
setHierarchyConfig(hierarchyConfigData);
|
||||
}
|
||||
|
||||
// 객체 데이터 변환
|
||||
const loadedObjects: PlacedObject[] = objects.map((obj: any) => {
|
||||
const objectType = obj.object_type;
|
||||
return {
|
||||
id: obj.id,
|
||||
type: objectType,
|
||||
name: obj.object_name,
|
||||
position: {
|
||||
x: parseFloat(obj.position_x),
|
||||
y: parseFloat(obj.position_y),
|
||||
z: parseFloat(obj.position_z),
|
||||
},
|
||||
size: {
|
||||
x: parseFloat(obj.size_x),
|
||||
y: parseFloat(obj.size_y),
|
||||
z: parseFloat(obj.size_z),
|
||||
},
|
||||
rotation: obj.rotation ? parseFloat(obj.rotation) : 0,
|
||||
color: getObjectColor(objectType, obj.color),
|
||||
areaKey: obj.area_key,
|
||||
locaKey: obj.loca_key,
|
||||
locType: obj.loc_type,
|
||||
materialCount: obj.loc_type === "STP" ? undefined : obj.material_count,
|
||||
materialPreview:
|
||||
obj.loc_type === "STP" || !obj.material_preview_height
|
||||
? undefined
|
||||
: { height: parseFloat(obj.material_preview_height) },
|
||||
parentId: obj.parent_id,
|
||||
displayOrder: obj.display_order,
|
||||
locked: obj.locked,
|
||||
visible: obj.visible !== false,
|
||||
hierarchyLevel: obj.hierarchy_level,
|
||||
parentKey: obj.parent_key,
|
||||
externalKey: obj.external_key,
|
||||
};
|
||||
});
|
||||
|
||||
// 외부 DB 연결이 있고 자재 설정이 있으면, 각 Location의 실제 자재 개수 조회
|
||||
if (dbConnectionId && hierarchyConfigData?.material) {
|
||||
const locationObjects = loadedObjects.filter(
|
||||
(obj) =>
|
||||
(obj.type === "location-bed" || obj.type === "location-temp" || obj.type === "location-dest") &&
|
||||
obj.locaKey,
|
||||
);
|
||||
|
||||
// 각 Location에 대해 자재 개수 조회 (병렬 처리)
|
||||
const materialCountPromises = locationObjects.map(async (obj) => {
|
||||
try {
|
||||
const matResponse = await getMaterials(dbConnectionId, {
|
||||
tableName: hierarchyConfigData.material.tableName,
|
||||
keyColumn: hierarchyConfigData.material.keyColumn,
|
||||
locationKeyColumn: hierarchyConfigData.material.locationKeyColumn,
|
||||
layerColumn: hierarchyConfigData.material.layerColumn,
|
||||
locaKey: obj.locaKey!,
|
||||
});
|
||||
if (matResponse.success && matResponse.data) {
|
||||
return { id: obj.id, count: matResponse.data.length };
|
||||
}
|
||||
} catch {
|
||||
// 자동 갱신 시에는 에러 로그 생략
|
||||
}
|
||||
return { id: obj.id, count: 0 };
|
||||
});
|
||||
|
||||
const materialCounts = await Promise.all(materialCountPromises);
|
||||
|
||||
// materialCount 업데이트
|
||||
const updatedObjects = loadedObjects.map((obj) => {
|
||||
const countData = materialCounts.find((m) => m.id === obj.id);
|
||||
if (countData && countData.count > 0) {
|
||||
return { ...obj, materialCount: countData.count };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
|
||||
setPlacedObjects(updatedObjects);
|
||||
} else {
|
||||
setPlacedObjects(loadedObjects);
|
||||
}
|
||||
|
||||
// 선택된 객체가 있으면 자재 목록도 갱신
|
||||
if (selectedObject && dbConnectionId && hierarchyConfigData?.material) {
|
||||
const currentObj = loadedObjects.find((o) => o.id === selectedObject.id);
|
||||
if (
|
||||
currentObj &&
|
||||
(currentObj.type === "location-bed" ||
|
||||
currentObj.type === "location-temp" ||
|
||||
currentObj.type === "location-dest") &&
|
||||
currentObj.locaKey
|
||||
) {
|
||||
const matResponse = await getMaterials(dbConnectionId, {
|
||||
tableName: hierarchyConfigData.material.tableName,
|
||||
keyColumn: hierarchyConfigData.material.keyColumn,
|
||||
locationKeyColumn: hierarchyConfigData.material.locationKeyColumn,
|
||||
layerColumn: hierarchyConfigData.material.layerColumn,
|
||||
locaKey: currentObj.locaKey,
|
||||
});
|
||||
if (matResponse.success && matResponse.data) {
|
||||
const layerColumn = hierarchyConfigData.material.layerColumn || "LOLAYER";
|
||||
const sortedMaterials = matResponse.data.sort(
|
||||
(a: any, b: any) => (b[layerColumn] || 0) - (a[layerColumn] || 0),
|
||||
);
|
||||
setMaterials(sortedMaterials);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 마지막 갱신 시간 기록
|
||||
setLastRefreshedAt(new Date());
|
||||
}
|
||||
} catch {
|
||||
// 자동 갱신 실패 시 조용히 무시 (사용자 경험 방해 안 함)
|
||||
}
|
||||
};
|
||||
|
||||
// 10초마다 자동 갱신
|
||||
const intervalId = setInterval(silentRefresh, AUTO_REFRESH_INTERVAL);
|
||||
|
||||
// 컴포넌트 언마운트 시 인터벌 정리
|
||||
return () => clearInterval(intervalId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [layoutId, isLoading, isRefreshing, selectedObject]);
|
||||
|
||||
// Location의 자재 목록 로드
|
||||
const loadMaterialsForLocation = async (locaKey: string, externalDbConnectionId: number) => {
|
||||
if (!hierarchyConfig?.material) {
|
||||
|
|
@ -407,9 +557,14 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
<div className="flex items-center justify-between border-b p-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">{layoutName || "디지털 트윈 야드"}</h2>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{isExternalMode ? "야드 관제 화면" : "읽기 전용 뷰"}
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<p className="text-muted-foreground text-sm">{isExternalMode ? "야드 관제 화면" : "읽기 전용 뷰"}</p>
|
||||
{lastRefreshedAt && (
|
||||
<span className="text-muted-foreground text-xs">
|
||||
마지막 갱신: {lastRefreshedAt.toLocaleTimeString("ko-KR")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 전체 화면 버튼 - 외부 업체 모드에서만 표시 */}
|
||||
|
|
@ -420,11 +575,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
onClick={toggleFullscreen}
|
||||
title={isFullscreen ? "전체 화면 종료" : "전체 화면"}
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<Minimize className="mr-2 h-4 w-4" />
|
||||
) : (
|
||||
<Maximize className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
{isFullscreen ? <Minimize className="mr-2 h-4 w-4" /> : <Maximize className="mr-2 h-4 w-4" />}
|
||||
{isFullscreen ? "종료" : "전체 화면"}
|
||||
</Button>
|
||||
)}
|
||||
|
|
@ -445,234 +596,234 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* 좌측: 검색/필터 - 외부 모드에서는 숨김 */}
|
||||
{!isExternalMode && (
|
||||
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r">
|
||||
<div className="space-y-4 p-4">
|
||||
{/* 검색 */}
|
||||
<div>
|
||||
<Label className="mb-2 block text-sm font-semibold">검색</Label>
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="이름, Area, Location 검색..."
|
||||
className="h-10 pl-9 text-sm"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2 p-0"
|
||||
onClick={() => setSearchQuery("")}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex h-full w-64 flex-shrink-0 flex-col border-r">
|
||||
<div className="space-y-4 p-4">
|
||||
{/* 검색 */}
|
||||
<div>
|
||||
<Label className="mb-2 block text-sm font-semibold">검색</Label>
|
||||
<div className="relative">
|
||||
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="이름, Area, Location 검색..."
|
||||
className="h-10 pl-9 text-sm"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute top-1/2 right-1 h-7 w-7 -translate-y-1/2 p-0"
|
||||
onClick={() => setSearchQuery("")}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 타입 필터 */}
|
||||
<div>
|
||||
<Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
|
||||
<Select value={filterType} onValueChange={setFilterType}>
|
||||
<SelectTrigger className="h-10 text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
|
||||
<SelectItem value="area">Area ({typeCounts.area})</SelectItem>
|
||||
<SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
|
||||
<SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
|
||||
<SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
|
||||
<SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
|
||||
<SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
|
||||
<SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 필터 초기화 */}
|
||||
{(searchQuery || filterType !== "all") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 w-full text-sm"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setFilterType("all");
|
||||
}}
|
||||
>
|
||||
필터 초기화
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 타입 필터 */}
|
||||
<div>
|
||||
<Label className="mb-2 block text-sm font-semibold">타입 필터</Label>
|
||||
<Select value={filterType} onValueChange={setFilterType}>
|
||||
<SelectTrigger className="h-10 text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">전체 ({typeCounts.all})</SelectItem>
|
||||
<SelectItem value="area">Area ({typeCounts.area})</SelectItem>
|
||||
<SelectItem value="location-bed">베드(BED) ({typeCounts["location-bed"]})</SelectItem>
|
||||
<SelectItem value="location-stp">정차포인트(STP) ({typeCounts["location-stp"]})</SelectItem>
|
||||
<SelectItem value="location-temp">임시베드(TMP) ({typeCounts["location-temp"]})</SelectItem>
|
||||
<SelectItem value="location-dest">지정착지(DES) ({typeCounts["location-dest"]})</SelectItem>
|
||||
<SelectItem value="crane-mobile">크레인 ({typeCounts["crane-mobile"]})</SelectItem>
|
||||
<SelectItem value="rack">랙 ({typeCounts.rack})</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{/* 객체 목록 */}
|
||||
<div className="flex-1 overflow-y-auto border-t p-4">
|
||||
<Label className="mb-2 block text-sm font-semibold">객체 목록 ({filteredObjects.length})</Label>
|
||||
{filteredObjects.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||
{searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
|
||||
</div>
|
||||
) : (
|
||||
(() => {
|
||||
// Area 객체가 있는 경우 계층 트리 아코디언 적용
|
||||
const areaObjects = filteredObjects.filter((obj) => obj.type === "area");
|
||||
|
||||
{/* 필터 초기화 */}
|
||||
{(searchQuery || filterType !== "all") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-9 w-full text-sm"
|
||||
onClick={() => {
|
||||
setSearchQuery("");
|
||||
setFilterType("all");
|
||||
}}
|
||||
>
|
||||
필터 초기화
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
// Area가 없으면 기존 평면 리스트 유지
|
||||
if (areaObjects.length === 0) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{filteredObjects.map((obj) => {
|
||||
let typeLabel = obj.type;
|
||||
if (obj.type === "location-bed") typeLabel = "베드(BED)";
|
||||
else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)";
|
||||
else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)";
|
||||
else if (obj.type === "location-dest") typeLabel = "지정착지(DES)";
|
||||
else if (obj.type === "crane-mobile") typeLabel = "크레인";
|
||||
else if (obj.type === "area") typeLabel = "Area";
|
||||
else if (obj.type === "rack") typeLabel = "랙";
|
||||
|
||||
{/* 객체 목록 */}
|
||||
<div className="flex-1 overflow-y-auto border-t p-4">
|
||||
<Label className="mb-2 block text-sm font-semibold">객체 목록 ({filteredObjects.length})</Label>
|
||||
{filteredObjects.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||
{searchQuery ? "검색 결과가 없습니다" : "객체가 없습니다"}
|
||||
</div>
|
||||
) : (
|
||||
(() => {
|
||||
// Area 객체가 있는 경우 계층 트리 아코디언 적용
|
||||
const areaObjects = filteredObjects.filter((obj) => obj.type === "area");
|
||||
|
||||
// Area가 없으면 기존 평면 리스트 유지
|
||||
if (areaObjects.length === 0) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{filteredObjects.map((obj) => {
|
||||
let typeLabel = obj.type;
|
||||
if (obj.type === "location-bed") typeLabel = "베드(BED)";
|
||||
else if (obj.type === "location-stp") typeLabel = "정차포인트(STP)";
|
||||
else if (obj.type === "location-temp") typeLabel = "임시베드(TMP)";
|
||||
else if (obj.type === "location-dest") typeLabel = "지정착지(DES)";
|
||||
else if (obj.type === "crane-mobile") typeLabel = "크레인";
|
||||
else if (obj.type === "area") typeLabel = "Area";
|
||||
else if (obj.type === "rack") typeLabel = "랙";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => handleObjectClick(obj.id)}
|
||||
className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${
|
||||
selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{obj.name}</p>
|
||||
<div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: obj.color }}
|
||||
/>
|
||||
<span>{typeLabel}</span>
|
||||
return (
|
||||
<div
|
||||
key={obj.id}
|
||||
onClick={() => handleObjectClick(obj.id)}
|
||||
className={`bg-background hover:bg-accent cursor-pointer rounded-lg border p-3 transition-all ${
|
||||
selectedObject?.id === obj.id ? "ring-primary bg-primary/5 ring-2" : "hover:shadow-sm"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{obj.name}</p>
|
||||
<div className="text-muted-foreground mt-1 flex items-center gap-2 text-xs">
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: obj.color }}
|
||||
/>
|
||||
<span>{typeLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{obj.areaKey && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Area: <span className="font-medium">{obj.areaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{obj.locaKey && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Location: <span className="font-medium">{obj.locaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{obj.materialCount !== undefined && obj.materialCount > 0 && (
|
||||
<p className="text-xs text-yellow-600">
|
||||
자재: <span className="font-semibold">{obj.materialCount}개</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{obj.areaKey && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Area: <span className="font-medium">{obj.areaKey}</span>
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Area가 있는 경우: Area → Location 계층 아코디언
|
||||
return (
|
||||
<Accordion type="multiple" className="w-full">
|
||||
{areaObjects.map((areaObj) => {
|
||||
const childLocations = filteredObjects.filter(
|
||||
(obj) =>
|
||||
obj.type !== "area" &&
|
||||
obj.areaKey === areaObj.areaKey &&
|
||||
(obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey),
|
||||
);
|
||||
|
||||
return (
|
||||
<AccordionItem key={areaObj.id} value={`area-${areaObj.id}`} className="border-b">
|
||||
<AccordionTrigger className="px-2 py-3 hover:no-underline">
|
||||
<div
|
||||
className={`flex w-full items-center justify-between pr-2 ${
|
||||
selectedObject?.id === areaObj.id ? "text-primary font-semibold" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleObjectClick(areaObj.id);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Grid3x3 className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">{areaObj.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground text-xs">({childLocations.length})</span>
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: areaObj.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-2 pb-3">
|
||||
{childLocations.length === 0 ? (
|
||||
<p className="text-muted-foreground py-2 text-center text-xs">Location이 없습니다</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{childLocations.map((locationObj) => (
|
||||
<div
|
||||
key={locationObj.id}
|
||||
onClick={() => handleObjectClick(locationObj.id)}
|
||||
className={`cursor-pointer rounded-lg border p-2 transition-all ${
|
||||
selectedObject?.id === locationObj.id
|
||||
? "border-primary bg-primary/10"
|
||||
: "hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{locationObj.type === "location-stp" ? (
|
||||
<ParkingCircle className="h-3 w-3" />
|
||||
) : (
|
||||
<Package className="h-3 w-3" />
|
||||
)}
|
||||
<span className="text-xs font-medium">{locationObj.name}</span>
|
||||
</div>
|
||||
<span
|
||||
className="inline-block h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: locationObj.color }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">
|
||||
위치: ({locationObj.position.x.toFixed(1)}, {locationObj.position.z.toFixed(1)})
|
||||
</p>
|
||||
{locationObj.locaKey && (
|
||||
<p className="text-muted-foreground mt-0.5 text-[10px]">
|
||||
Location: <span className="font-medium">{locationObj.locaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{locationObj.materialCount !== undefined && locationObj.materialCount > 0 && (
|
||||
<p className="mt-0.5 text-[10px] text-yellow-600">
|
||||
자재: <span className="font-semibold">{locationObj.materialCount}개</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{obj.locaKey && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Location: <span className="font-medium">{obj.locaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{obj.materialCount !== undefined && obj.materialCount > 0 && (
|
||||
<p className="text-xs text-yellow-600">
|
||||
자재: <span className="font-semibold">{obj.materialCount}개</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
|
||||
// Area가 있는 경우: Area → Location 계층 아코디언
|
||||
return (
|
||||
<Accordion type="multiple" className="w-full">
|
||||
{areaObjects.map((areaObj) => {
|
||||
const childLocations = filteredObjects.filter(
|
||||
(obj) =>
|
||||
obj.type !== "area" &&
|
||||
obj.areaKey === areaObj.areaKey &&
|
||||
(obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey),
|
||||
);
|
||||
|
||||
return (
|
||||
<AccordionItem key={areaObj.id} value={`area-${areaObj.id}`} className="border-b">
|
||||
<AccordionTrigger className="px-2 py-3 hover:no-underline">
|
||||
<div
|
||||
className={`flex w-full items-center justify-between pr-2 ${
|
||||
selectedObject?.id === areaObj.id ? "text-primary font-semibold" : ""
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleObjectClick(areaObj.id);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Grid3x3 className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">{areaObj.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground text-xs">({childLocations.length})</span>
|
||||
<span
|
||||
className="inline-block h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: areaObj.color }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-2 pb-3">
|
||||
{childLocations.length === 0 ? (
|
||||
<p className="text-muted-foreground py-2 text-center text-xs">Location이 없습니다</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{childLocations.map((locationObj) => (
|
||||
<div
|
||||
key={locationObj.id}
|
||||
onClick={() => handleObjectClick(locationObj.id)}
|
||||
className={`cursor-pointer rounded-lg border p-2 transition-all ${
|
||||
selectedObject?.id === locationObj.id
|
||||
? "border-primary bg-primary/10"
|
||||
: "hover:border-primary/50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{locationObj.type === "location-stp" ? (
|
||||
<ParkingCircle className="h-3 w-3" />
|
||||
) : (
|
||||
<Package className="h-3 w-3" />
|
||||
)}
|
||||
<span className="text-xs font-medium">{locationObj.name}</span>
|
||||
</div>
|
||||
<span
|
||||
className="inline-block h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: locationObj.color }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">
|
||||
위치: ({locationObj.position.x.toFixed(1)}, {locationObj.position.z.toFixed(1)})
|
||||
</p>
|
||||
{locationObj.locaKey && (
|
||||
<p className="text-muted-foreground mt-0.5 text-[10px]">
|
||||
Location: <span className="font-medium">{locationObj.locaKey}</span>
|
||||
</p>
|
||||
)}
|
||||
{locationObj.materialCount !== undefined && locationObj.materialCount > 0 && (
|
||||
<p className="mt-0.5 text-[10px] text-yellow-600">
|
||||
자재: <span className="font-semibold">{locationObj.materialCount}개</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
})()
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 중앙 + 우측 컨테이너 (전체화면 시 함께 표시) */}
|
||||
<div
|
||||
<div
|
||||
ref={canvasContainerRef}
|
||||
className={`relative flex flex-1 overflow-hidden ${isFullscreen ? "bg-background" : ""}`}
|
||||
>
|
||||
|
|
@ -691,107 +842,102 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
|
||||
{/* 우측: 정보 패널 */}
|
||||
<div className="h-full w-[480px] min-w-[480px] flex-shrink-0 overflow-y-auto border-l">
|
||||
{selectedObject ? (
|
||||
<div className="p-4">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">상세 정보</h3>
|
||||
<p className="text-muted-foreground text-xs">{selectedObject.name}</p>
|
||||
</div>
|
||||
|
||||
{/* 기본 정보 */}
|
||||
<div className="bg-muted space-y-3 rounded-lg p-3">
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">타입</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.type}</p>
|
||||
{selectedObject ? (
|
||||
<div className="p-4">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold">상세 정보</h3>
|
||||
<p className="text-muted-foreground text-xs">{selectedObject.name}</p>
|
||||
</div>
|
||||
{selectedObject.areaKey && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">Area Key</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.areaKey}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedObject.locaKey && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">Location Key</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.locaKey}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">자재 개수</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.materialCount}개</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 자재 목록 (Location인 경우) - 테이블 형태 */}
|
||||
{(selectedObject.type === "location-bed" ||
|
||||
selectedObject.type === "location-stp" ||
|
||||
selectedObject.type === "location-temp" ||
|
||||
selectedObject.type === "location-dest") && (
|
||||
<div className="mt-4">
|
||||
{loadingMaterials ? (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
|
||||
{/* 기본 정보 */}
|
||||
<div className="bg-muted space-y-3 rounded-lg p-3">
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">타입</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.type}</p>
|
||||
</div>
|
||||
{selectedObject.areaKey && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">Area Key</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.areaKey}</p>
|
||||
</div>
|
||||
) : materials.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||
{externalDbConnectionId ? "자재가 없습니다" : "외부 DB 연결이 설정되지 않았습니다"}
|
||||
)}
|
||||
{selectedObject.locaKey && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">Location Key</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.locaKey}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<Label className="mb-2 block text-sm font-semibold">
|
||||
자재 목록 ({materials.length}개)
|
||||
</Label>
|
||||
{/* 테이블 형태로 전체 조회 */}
|
||||
<div className="max-h-[400px] overflow-auto rounded-lg border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted sticky top-0">
|
||||
<tr>
|
||||
<th className="whitespace-nowrap border-b px-3 py-3 text-left font-semibold">층</th>
|
||||
{(hierarchyConfig?.material?.displayColumns || []).map((colConfig: any) => (
|
||||
<th
|
||||
key={colConfig.column}
|
||||
className="border-b px-3 py-3 text-left font-semibold"
|
||||
>
|
||||
{colConfig.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{materials.map((material, index) => {
|
||||
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
|
||||
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
|
||||
return (
|
||||
<tr
|
||||
key={`${material.STKKEY}-${index}`}
|
||||
className="hover:bg-accent border-b transition-colors last:border-0"
|
||||
>
|
||||
<td className="whitespace-nowrap px-3 py-3 font-medium">
|
||||
{material[layerColumn]}단
|
||||
</td>
|
||||
{displayColumns.map((colConfig: any) => (
|
||||
<td key={colConfig.column} className="px-3 py-3">
|
||||
{material[colConfig.column] || "-"}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
{selectedObject.materialCount !== undefined && selectedObject.materialCount > 0 && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-xs">자재 개수</Label>
|
||||
<p className="text-sm font-medium">{selectedObject.materialCount}개</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center p-4">
|
||||
<p className="text-muted-foreground text-sm">객체를 선택하세요</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 자재 목록 (Location인 경우) - 테이블 형태 */}
|
||||
{(selectedObject.type === "location-bed" ||
|
||||
selectedObject.type === "location-stp" ||
|
||||
selectedObject.type === "location-temp" ||
|
||||
selectedObject.type === "location-dest") && (
|
||||
<div className="mt-4">
|
||||
{loadingMaterials ? (
|
||||
<div className="flex h-32 items-center justify-center">
|
||||
<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : materials.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-32 items-center justify-center text-center text-sm">
|
||||
{externalDbConnectionId ? "자재가 없습니다" : "외부 DB 연결이 설정되지 않았습니다"}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<Label className="mb-2 block text-sm font-semibold">자재 목록 ({materials.length}개)</Label>
|
||||
{/* 테이블 형태로 전체 조회 */}
|
||||
<div className="h-[580px] overflow-auto rounded-lg border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted sticky top-0">
|
||||
<tr>
|
||||
<th className="border-b px-3 py-3 text-left font-semibold whitespace-nowrap">층</th>
|
||||
{(hierarchyConfig?.material?.displayColumns || []).map((colConfig: any) => (
|
||||
<th key={colConfig.column} className="border-b px-3 py-3 text-left font-semibold">
|
||||
{colConfig.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{materials.map((material, index) => {
|
||||
const layerColumn = hierarchyConfig?.material?.layerColumn || "LOLAYER";
|
||||
const displayColumns = hierarchyConfig?.material?.displayColumns || [];
|
||||
return (
|
||||
<tr
|
||||
key={`${material.STKKEY}-${index}`}
|
||||
className="hover:bg-accent border-b transition-colors last:border-0"
|
||||
>
|
||||
<td className="px-3 py-3 font-medium whitespace-nowrap">
|
||||
{material[layerColumn]}단
|
||||
</td>
|
||||
{displayColumns.map((colConfig: any) => (
|
||||
<td key={colConfig.column} className="px-3 py-3">
|
||||
{material[colConfig.column] || "-"}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center p-4">
|
||||
<p className="text-muted-foreground text-sm">객체를 선택하세요</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 풀스크린 모드일 때 종료 버튼 */}
|
||||
|
|
@ -800,7 +946,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
|
|||
variant="outline"
|
||||
size="sm"
|
||||
onClick={toggleFullscreen}
|
||||
className="absolute top-4 right-4 z-50 bg-background/80 backdrop-blur-sm"
|
||||
className="bg-background/80 absolute top-4 right-4 z-50 backdrop-blur-sm"
|
||||
>
|
||||
<Minimize className="mr-2 h-4 w-4" />
|
||||
종료
|
||||
|
|
|
|||
Loading…
Reference in New Issue