-
+
+
+
+
${mapPath ? `
- 
-
-
-
+
+
-
${boxes.map((box: any, idx: number) => {
const name = box.name || `#${idx+1}`;
return `
@@ -86,32 +89,48 @@ export async function renderLocationView(container: HTMLElement) {
` : '해당 위치의 도면이 등록되지 않았습니다.
'}
* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.
-
`;
- // 섹션별 렌더링 함수
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
-
-
`;
- // 이미지 로드 후 오버레이 크기 재조정 (좌표 밀림 방지)
+ // 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
+ const syncOverlaySize = () => {
+ const img = container.querySelector('#main-map-img') as HTMLImageElement;
+ const overlay = container.querySelector('#box-overlay') as HTMLElement;
+ if (img && overlay && img.complete) {
+ overlay.style.width = img.clientWidth + 'px';
+ overlay.style.height = img.clientHeight + 'px';
+ overlay.style.left = img.offsetLeft + 'px';
+ overlay.style.top = img.offsetTop + 'px';
+ }
+ };
+
const img = container.querySelector('#main-map-img') as HTMLImageElement;
if (img) {
- img.onload = () => {
- const overlay = container.querySelector('#box-overlay') as HTMLElement;
- if (overlay) {
- overlay.style.height = img.offsetHeight + 'px';
- }
- };
+ if (img.complete) {
+ syncOverlaySize();
+ setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
+ } else {
+ img.onload = syncOverlaySize;
+ }
}
+
+ window.removeEventListener('resize', syncOverlaySize);
+ window.addEventListener('resize', syncOverlaySize);
// 이벤트 바인딩
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
@@ -137,7 +156,6 @@ export async function renderLocationView(container: HTMLElement) {
const x = box.getAttribute('data-x');
const y = box.getAttribute('data-y');
- // 좌표 및 위치 정보를 기반으로 정확한 자산 1개 찾기
const targetAsset = state.masterData.hw.find(a =>
a.location === currentLoc &&
a.location_detail === currentDetail &&
@@ -149,7 +167,7 @@ export async function renderLocationView(container: HTMLElement) {
renderAssetDetail(targetAsset);
}
- container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 81, 0.1)');
+ container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
});
});
@@ -166,20 +184,18 @@ export async function renderLocationView(container: HTMLElement) {
📍 구역을 선택하세요
+ +
+
+
+
- 📍 구역을 선택하세요
-
지도에서 자산 위치를 클릭하세요.
+
+
지도에서 자산 위치를 클릭하세요.
+
* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.
+
+
`;
- // 하드웨어 정보 구성
const sectionsHTML = [
renderSection('기본 관리 정보', [
{ label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
@@ -208,25 +224,20 @@ export async function renderLocationView(container: HTMLElement) {
].join('');
tableContainer.innerHTML = `
-
${title}
${fields.map(f => `
${f.label}
- ${f.value || '-'}
+ ${f.value || '-'}
`).join('')}
+
${sectionsHTML}
`;
- // 뒤로가기 버튼: 목록 대신 초기 상태로 리셋
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
title.textContent = `📍 구역을 선택하세요`;
- tableContainer.innerHTML = `지도에서 자산 위치를 클릭하세요.
`;
+ tableContainer.innerHTML = `지도에서 자산 위치를 클릭하세요.
`;
});
- // 수정 버튼 (기존 모달 활용)
container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
openHwModal(asset, 'edit');
});
};
- // showAssets 함수 제거 (목록 표시 불필요)
-
-
render();
}