605 lines
34 KiB
TypeScript
605 lines
34 KiB
TypeScript
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
|
import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline } from '../../core/utils';
|
|
import { setupTableSorting, SortState } from '../../core/tableHandler';
|
|
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
|
|
import { state } from '../../core/state';
|
|
import { IMAGE_LOCATIONS } from '../../components/Modal/SharedData';
|
|
|
|
export interface ColumnDef {
|
|
header: string;
|
|
sortKey?: string;
|
|
width?: string;
|
|
align?: 'left' | 'center' | 'right';
|
|
className?: string;
|
|
render: (asset: any) => string;
|
|
}
|
|
|
|
export interface ListViewConfig {
|
|
title: string;
|
|
dataSource: () => any[];
|
|
searchKeys: string[];
|
|
filterOptions: {
|
|
keywordLabel: string;
|
|
showCorp?: boolean;
|
|
showDept?: boolean;
|
|
showLoc?: boolean;
|
|
showField?: boolean;
|
|
showType?: boolean;
|
|
};
|
|
columns: ColumnDef[];
|
|
onRowClick?: (asset: any) => void;
|
|
emptyMessage?: string;
|
|
persistentSortState?: SortState;
|
|
}
|
|
|
|
export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|
// 1. 컨테이너 초기화 및 헤더 렌더링
|
|
container.innerHTML = '';
|
|
renderPageHeader(container, config.title);
|
|
|
|
const fullList = config.dataSource();
|
|
let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
|
|
let currentFilters: any = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '' };
|
|
|
|
// 강제로 기본 뷰 모드를 'system' (자산 현황)으로 설정
|
|
(state as any).currentViewMode = 'system';
|
|
|
|
// 2. 뷰 전환 토글 버튼 생성 (명칭 변경)
|
|
const toggleWrapper = document.createElement('div');
|
|
toggleWrapper.className = 'view-toggle-container';
|
|
toggleWrapper.innerHTML = `
|
|
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
|
<div class="view-toggle" style="display: flex; gap: 0;">
|
|
<button class="toggle-btn ${(state as any).currentViewMode === 'system' ? 'active' : ''}" data-mode="system">자산 현황</button>
|
|
<button class="toggle-btn ${(state as any).currentViewMode === 'asset' ? 'active' : ''}" data-mode="asset">자산 목록</button>
|
|
</div>
|
|
<button id="btn-add-asset" style="padding: 6px 14px; font-size: 12px; font-weight: 700; background: #1E5149; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 4px;">
|
|
<span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
|
|
</button>
|
|
</div>
|
|
`;
|
|
container.appendChild(toggleWrapper);
|
|
|
|
// 3. 필터 바 생성 (자산 목록에서만 사용)
|
|
const filterBar = document.createElement('div');
|
|
filterBar.className = 'search-bar';
|
|
container.appendChild(filterBar);
|
|
|
|
// 4. 컨텐츠 영역 생성
|
|
const contentWrapper = document.createElement('div');
|
|
contentWrapper.className = 'view-content-wrapper';
|
|
container.appendChild(contentWrapper);
|
|
|
|
// --- 내부 상태 ---
|
|
let selectedLocation: string | null = '기술개발센터';
|
|
let selectedDetailLocation: string | null = null;
|
|
let dynamicMapConfig: Record<string, any[]> = {};
|
|
|
|
// 맵 설정 미리 로드
|
|
const fetchMapConfig = async () => {
|
|
try {
|
|
const res = await fetch(`http://${location.hostname}:3000/api/maps`);
|
|
dynamicMapConfig = await res.json();
|
|
} catch (err) { console.error('Failed to fetch map config:', err); }
|
|
};
|
|
fetchMapConfig();
|
|
|
|
// [자산 현황] 대시보드 렌더러
|
|
const renderSystemStatus = () => {
|
|
const isPcView = config.title === 'PC';
|
|
|
|
const locationCounts: Record<string, number> = {};
|
|
const pcTypeCounts = { public: 0, server: 0, personal: 0 };
|
|
|
|
// 동적 통계 수집 객체 (Hardcoding 제거)
|
|
const extStats = {
|
|
total: 0,
|
|
locCounts: {} as Record<string, number>,
|
|
typeCounts: {} as Record<string, number>,
|
|
typeLocMap: {} as Record<string, Record<string, number>>, // 유형별 위치 분포
|
|
locWarning: 0,
|
|
typeWarning: 0
|
|
};
|
|
const intStats = {
|
|
total: 0,
|
|
locCounts: {} as Record<string, number>,
|
|
typeCounts: {} as Record<string, number>,
|
|
typeLocMap: {} as Record<string, Record<string, number>>
|
|
};
|
|
|
|
// 중앙화된 경고 감지 로직
|
|
const checkAnomaly = (serviceType: string, loc: string, type: string) => {
|
|
if (serviceType !== '외부') return { isWarning: false, isLocWarning: false, isTypeWarning: false, reason: '' };
|
|
const isLocWarning = loc !== 'IDC' && loc !== '미지정' && loc !== '';
|
|
const isTypeWarning = type.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
|
const isWarning = isLocWarning || isTypeWarning;
|
|
|
|
let reason = '';
|
|
if (isLocWarning && isTypeWarning) reason = '위치/형식 부적절';
|
|
else if (isLocWarning) reason = '위치 부적절';
|
|
else if (isTypeWarning) reason = '형식 부적절';
|
|
|
|
return { isWarning, isLocWarning, isTypeWarning, reason };
|
|
};
|
|
|
|
fullList.forEach(asset => {
|
|
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '미지정';
|
|
const serviceTypeKey = (ASSET_SCHEMA as any).SERVICE_TYPE?.key || 'service_type';
|
|
const serviceType = asset[serviceTypeKey] || '외부';
|
|
const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
|
|
|
|
locationCounts[loc] = (locationCounts[loc] || 0) + 1;
|
|
|
|
if (isPcView) {
|
|
if (type.includes('공용')) pcTypeCounts.public++;
|
|
else if (type.includes('서버')) pcTypeCounts.server++;
|
|
else pcTypeCounts.personal++;
|
|
}
|
|
|
|
const targetStat = serviceType === '내부' ? intStats : extStats;
|
|
targetStat.total++;
|
|
if (loc) targetStat.locCounts[loc] = (targetStat.locCounts[loc] || 0) + 1;
|
|
if (type) {
|
|
targetStat.typeCounts[type] = (targetStat.typeCounts[type] || 0) + 1;
|
|
// 유형별 위치 분포 수집
|
|
if (!targetStat.typeLocMap[type]) targetStat.typeLocMap[type] = {};
|
|
targetStat.typeLocMap[type][loc] = (targetStat.typeLocMap[type][loc] || 0) + 1;
|
|
}
|
|
|
|
if (serviceType === '외부') {
|
|
const anomaly = checkAnomaly(serviceType, loc, type);
|
|
if (anomaly.isLocWarning) extStats.locWarning++;
|
|
if (anomaly.isTypeWarning) extStats.typeWarning++;
|
|
}
|
|
});
|
|
|
|
// 템플릿 제너레이터 함수 (HTML 중복 제거)
|
|
const generateDetailStatHTML = (title: string, stats: any) => `
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; gap: 0.5rem;">
|
|
<span style="font-size: 14px; font-weight: 800; color: var(--text-main); white-space: nowrap;">${title}</span>
|
|
<div style="display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;">
|
|
${stats.locWarning ? `<span style="background: #FFF7ED; color: #C2410C; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; border: 1px solid #FFEDD5; white-space: nowrap;">위치부적절: ${stats.locWarning}</span>` : ''}
|
|
${stats.typeWarning ? `<span style="background: #FFF1F2; color: #E11D48; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; border: 1px solid #FDA4AF; white-space: nowrap;">형식부적절: ${stats.typeWarning}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 0.3rem; font-size: 13px; color: var(--text-muted);">
|
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
|
${Object.entries(stats.locCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([l, c]) => `<span>${l}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`).join('')}
|
|
</div>
|
|
<div style="display: flex; gap: 0.6rem; flex-wrap: wrap; opacity: 0.9; border-top: 1px dashed var(--border-color); padding-top: 4px; margin-top: 2px;">
|
|
${Object.entries(stats.typeCounts as Record<string, number>).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([t, c]) => {
|
|
const isTypeWarning = title.includes('외부') && t.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
|
|
|
// 위치별 상세 정보 생성 (툴팁용)
|
|
const locDist = stats.typeLocMap[t] || {};
|
|
const locHint = Object.entries(locDist)
|
|
.sort((a: any, b: any) => b[1] - a[1])
|
|
.map(([l, count]) => `${l}: ${count}대`)
|
|
.join('\n');
|
|
|
|
return `<span title="${locHint}" style="${isTypeWarning ? 'color:#E11D48; font-weight:700;' : ''}; font-size: 13px; cursor: help;">${t}: <strong style="color:var(--text-main); font-size: 14px;">${c}</strong></span>`;
|
|
}).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
contentWrapper.innerHTML = `
|
|
<div class="system-dashboard" style="height: calc(100vh - 240px); overflow: hidden; padding: 0.5rem 0; font-family: 'Pretendard', sans-serif; letter-spacing: -0.02em; display: flex; flex-direction: column;">
|
|
|
|
<!-- [자산 통계 그룹] -->
|
|
<div style="border-bottom: 1px solid var(--border-color); padding-bottom: 1.25rem; margin-bottom: 1rem; flex-shrink: 0; display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 2rem;">
|
|
<div class="stat-group-item" style="min-width: 0;">
|
|
<div style="font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">총 보유 자산</div>
|
|
<div style="font-size: 28px; font-weight: 800; color: var(--text-main); line-height: 1.1;">${fullList.length}<span style="font-size: 13px; font-weight: 600; margin-left: 4px; color: var(--text-muted);">대</span></div>
|
|
<div style="display: flex; gap: 0.75rem; font-size: 14px; color: var(--text-muted); margin-top: 0.5rem;">
|
|
<span>외부: <strong style="color:#35635C; font-size: 18px;">${extStats.total}</strong></span>
|
|
<span>내부: <strong style="color:#94A3B8; font-size: 18px;">${intStats.total}</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-group-item" style="border-left: 1px solid var(--border-color); padding-left: 1.5rem; min-width: 0;">
|
|
${isPcView ? `
|
|
<div style="font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem;">PC 유형별 현황</div>
|
|
<div style="display: flex; gap: 1rem; font-size: 14px; color: var(--text-muted); margin-top: 0.5rem;">
|
|
<span>공용: <strong style="color:var(--text-main); font-size: 18px;">${pcTypeCounts.public}</strong></span>
|
|
<span>서버: <strong style="color:var(--text-main); font-size: 18px;">${pcTypeCounts.server}</strong></span>
|
|
<span>개인: <strong style="color:var(--text-main); font-size: 18px;">${pcTypeCounts.personal}</strong></span>
|
|
</div>
|
|
` : generateDetailStatHTML('외부 (운영) 상세', extStats)}
|
|
</div>
|
|
|
|
<div class="stat-group-item" style="border-left: 1px solid var(--border-color); padding-left: 1.5rem; min-width: 0;">
|
|
${isPcView ? '' : generateDetailStatHTML('내부 (테스트) 상세', intStats as any)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--border-color);">
|
|
<!-- 좌측: 자산 현황 목록 (Border-based Separation) -->
|
|
<div class="list-section" style="flex: 1.1; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 0 0; border-right: 1px solid var(--border-color);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0;">
|
|
<h4 id="list-section-title" style="font-size: 14px; font-weight: 700; color: var(--text-main); margin:0;">자산 현황 목록</h4>
|
|
<div style="display: flex; align-items: center; gap: 8px;">
|
|
<span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">위치:</span>
|
|
<select id="select-loc" style="padding: 2px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); outline: none; background: white; cursor:pointer; font-family: 'Pretendard';">
|
|
<option value="">전체</option>
|
|
${Array.from(new Set(fullList.map(a => a[ASSET_SCHEMA.LOCATION.key] || '미지정'))).sort().map(l => `<option value="${l}" ${l === selectedLocation ? 'selected' : ''}>${l}</option>`).join('')}
|
|
</select>
|
|
<span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">상세:</span>
|
|
<select id="select-detail-loc" style="padding: 2px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); outline: none; background: white; cursor:pointer; font-family: 'Pretendard'; max-width: 120px;"></select>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1; overflow-y: auto;">
|
|
<table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
|
|
<thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
|
|
<tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
|
|
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 80px; text-align:center; background: #fff;">분류</th>
|
|
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 130px; background: #fff;">용도/자산명</th>
|
|
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(정)</th>
|
|
<th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(부)</th>
|
|
<th style="padding: 10px 0; text-align: center; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 100px; background: #fff;">상세위치</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="system-status-tbody" style="font-size: 12px;"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우측: 상세 정보 패널 (Box-less, Line-based) -->
|
|
<div id="system-detail-panel" style="flex: 0.9; display: flex; flex-direction: column; min-height: 0; padding: 1rem 0 0 1.5rem; overflow: hidden;">
|
|
<div id="detail-empty-state" style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-muted); text-align: center;">
|
|
<p style="font-size: 1.125rem; font-weight: 500; color: #94A3B8;">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
|
|
</div>
|
|
<div id="detail-content" style="display: none; height: 100%; flex-direction: column;">
|
|
<!-- 상단 요약 정보 (Wrapping 방지 최적화) -->
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; gap: 2rem;">
|
|
<div style="display: flex; gap: 2.5rem; align-items: flex-end; min-width: 0; flex: 1;">
|
|
<div style="flex-shrink: 0;">
|
|
<label style="display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">자산번호</label>
|
|
<div id="detail-asset-code" style="font-size: 14px; font-weight: 800; color: var(--primary-color); white-space: nowrap;"></div>
|
|
</div>
|
|
<div style="flex-shrink: 0;">
|
|
<label style="display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">유형</label>
|
|
<div id="detail-asset-type" style="font-size: 14px; font-weight: 600; color: var(--text-main); white-space: nowrap;"></div>
|
|
</div>
|
|
<div style="flex: 1; min-width: 0;">
|
|
<label style="display: block; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;">메모 요약</label>
|
|
<div id="detail-memo" style="font-size: 14px; color: var(--text-main); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></div>
|
|
</div>
|
|
</div>
|
|
<button id="btn-view-full-detail" style="flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: opacity 0.2s;">상세 보기</button>
|
|
</div>
|
|
|
|
<!-- 메인 배치도 영역 -->
|
|
<div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
|
|
<div style="margin-bottom: 0.75rem; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;">
|
|
<label style="font-size: 11px; font-weight: 700; color: var(--text-main); text-transform: uppercase;">설치 위치 배치도</label>
|
|
</div>
|
|
<div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--border-color); background: #f0f0f0;">
|
|
<div class="layout-map-container readonly" style="position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
|
|
<img id="detail-photo" src="" style="display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none;" />
|
|
<div id="detail-marker" class="layout-marker pulse-marker" style="display: none; position: absolute; z-index: 20;"></div>
|
|
<div id="detail-overlay-layer" class="digital-overlay-layer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; justify-content: center;"></div>
|
|
</div>
|
|
<div id="detail-no-photo" style="display: none; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
|
|
<span style="color: #94A3B8; font-size: 13px; font-weight: 500;">등록된 배치도가 없습니다.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 상세 정보 패널 업데이트 함수
|
|
const updateDetailPanel = (asset: any) => {
|
|
const emptyState = document.getElementById('detail-empty-state');
|
|
const content = document.getElementById('detail-content');
|
|
if (!emptyState || !content) return;
|
|
|
|
emptyState.style.display = 'none';
|
|
content.style.display = 'flex';
|
|
|
|
// 텍스트 정보 업데이트
|
|
const codeEl = document.getElementById('detail-asset-code');
|
|
const typeEl = document.getElementById('detail-asset-type');
|
|
const memoEl = document.getElementById('detail-memo');
|
|
const viewBtn = document.getElementById('btn-view-full-detail') as HTMLButtonElement;
|
|
|
|
if (codeEl) codeEl.textContent = asset.asset_code || '미지정';
|
|
if (typeEl) typeEl.textContent = asset.asset_type || '-';
|
|
if (memoEl) memoEl.textContent = asset.memo || '-';
|
|
if (viewBtn) {
|
|
viewBtn.onclick = () => config.onRowClick && config.onRowClick(asset);
|
|
}
|
|
|
|
// 위치 및 사진 정보 업데이트
|
|
const photo = document.getElementById('detail-photo') as HTMLImageElement;
|
|
const marker = document.getElementById('detail-marker');
|
|
const overlayLayer = document.getElementById('detail-overlay-layer');
|
|
const noPhoto = document.getElementById('detail-no-photo');
|
|
const photoWrapper = document.getElementById('detail-photo-wrapper');
|
|
|
|
const bldg = asset.location || '';
|
|
const detail = asset.location_detail || '';
|
|
// 숫자 0도 유효한 좌표이므로 정확한 체크 필요
|
|
const x = asset.loc_x;
|
|
const y = asset.loc_y;
|
|
const hasCoords = (x !== null && x !== undefined && x !== '' && x !== 'null') &&
|
|
(y !== null && y !== undefined && y !== '' && y !== 'null');
|
|
|
|
const savedImg = asset.location_photo || asset.loc_img;
|
|
const locImgs = IMAGE_LOCATIONS[bldg.trim()]?.[detail.trim()] || null;
|
|
const imgPath = (savedImg && locImgs?.includes(savedImg)) ? savedImg : (locImgs ? locImgs[0] : null);
|
|
|
|
// 좌표가 없으면 사진이 있어도 '정보 없음' 상태로 유도 (사용자 요청)
|
|
if (imgPath && hasCoords) {
|
|
photo.src = imgPath;
|
|
photo.style.display = 'block';
|
|
if (noPhoto) noPhoto.style.display = 'none';
|
|
|
|
photo.onload = () => {
|
|
const updateMarkerPos = () => {
|
|
const imgW = photo.clientWidth;
|
|
const imgH = photo.clientHeight;
|
|
|
|
if (marker) {
|
|
marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(x as string) * imgW) / 100 }px)`;
|
|
marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(y as string) * imgH) / 100 }px)`;
|
|
marker.style.display = 'block';
|
|
}
|
|
|
|
if (overlayLayer) {
|
|
overlayLayer.style.width = `${imgW}px`;
|
|
overlayLayer.style.height = `${imgH}px`;
|
|
overlayLayer.style.left = `calc(50% - ${imgW/2}px)`;
|
|
overlayLayer.style.top = `calc(50% - ${imgH/2}px)`;
|
|
|
|
const boxes = dynamicMapConfig[imgPath] || [];
|
|
if (boxes.length > 0) {
|
|
overlayLayer.innerHTML = `
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width:100%; height:100%;">
|
|
<g class="seat-group">
|
|
${boxes.map((b, i) => {
|
|
const isSelected = b.x === x && b.y === y;
|
|
const fill = isSelected ? 'rgba(255, 61, 0, 0.4)' : 'rgba(30, 81, 73, 0.02)';
|
|
const stroke = isSelected ? '#FF3D00' : 'rgba(30, 81, 73, 0.15)';
|
|
const strokeWidth = isSelected ? '0.8' : '0.2';
|
|
|
|
if (isSelected && marker) {
|
|
marker.style.left = `calc(50% - ${imgW/2}px + ${ (parseFloat(b.x) + parseFloat(b.w)/2) * imgW / 100 }px)`;
|
|
marker.style.top = `calc(50% - ${imgH/2}px + ${ (parseFloat(b.y) + parseFloat(b.h)/2) * imgH / 100 }px)`;
|
|
}
|
|
|
|
return `<rect class="map-seat-obj" x="${b.x}" y="${b.y}" width="${b.w}" height="${b.h}" rx="0.5" style="fill:${fill}; stroke:${stroke}; stroke-width:${strokeWidth};" />`;
|
|
}).join('')}
|
|
</g>
|
|
</svg>
|
|
`;
|
|
} else {
|
|
overlayLayer.innerHTML = '';
|
|
}
|
|
}
|
|
};
|
|
updateMarkerPos();
|
|
window.addEventListener('resize', updateMarkerPos);
|
|
};
|
|
} else {
|
|
photo.style.display = 'none';
|
|
if (marker) marker.style.display = 'none';
|
|
if (overlayLayer) overlayLayer.innerHTML = '';
|
|
if (noPhoto) {
|
|
noPhoto.style.display = 'flex';
|
|
const msg = noPhoto.querySelector('span');
|
|
if (msg) msg.textContent = !hasCoords ? '등록된 위치 좌표 정보가 없습니다.' : '등록된 배치도가 없습니다.';
|
|
}
|
|
}
|
|
};
|
|
|
|
const updateTableOnly = () => {
|
|
let filtered = selectedLocation
|
|
? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation)
|
|
: fullList;
|
|
const currentDetailLocs = Array.from(new Set(filtered.map(a => a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정'))).sort();
|
|
if (selectedDetailLocation) filtered = filtered.filter(a => (a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정') === selectedDetailLocation);
|
|
const finalDisplayList = (!selectedLocation && !selectedDetailLocation) ? filtered.slice(0, 10) : filtered;
|
|
|
|
const titleEl = document.getElementById('list-section-title');
|
|
if (titleEl) titleEl.textContent = selectedLocation ? `${selectedLocation} 자산 현황 (${finalDisplayList.length}대)` : '위치별 자산등록현황 (최근 등록)';
|
|
const selectEl = document.getElementById('select-detail-loc') as HTMLSelectElement;
|
|
if (selectEl && !selectedDetailLocation) {
|
|
selectEl.innerHTML = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
|
|
}
|
|
|
|
const tbody = document.getElementById('system-status-tbody');
|
|
if (tbody) {
|
|
tbody.innerHTML = finalDisplayList.length === 0
|
|
? `<tr><td colspan="4" style="padding: 3rem; text-align: center; color: var(--text-muted);">조회된 자산이 없습니다.</td></tr>`
|
|
: finalDisplayList.map(asset => {
|
|
const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
|
|
const serviceTypeKey = (ASSET_SCHEMA as any).SERVICE_TYPE?.key || 'service_type';
|
|
const serviceType = asset[serviceTypeKey] || '외부';
|
|
const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
|
|
const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
|
|
|
|
const labelColor = serviceType === '내부' ? '#94A3B8' : '#35635C';
|
|
const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-';
|
|
const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
|
|
|
|
// [경고 로직] 외부 운영인데 서버PC이거나 IDC가 아닌 경우
|
|
const isLocWarning = serviceType === '외부SW' && loc !== 'IDC';
|
|
const isTypeWarning = serviceType === '외부SW' && type.toLowerCase().replace(/\s/g, '').includes('서버pc');
|
|
const isWarning = isLocWarning || isTypeWarning;
|
|
const warningStyle = isWarning ? 'background-color: #FFF1F2; border-left: 3px solid #E11D48;' : '';
|
|
|
|
let warningReason = '';
|
|
if (isLocWarning && isTypeWarning) warningReason = '위치/형식 부적절';
|
|
else if (isLocWarning) warningReason = '위치 부적절';
|
|
else if (isTypeWarning) warningReason = '형식 부적절';
|
|
|
|
return `
|
|
<tr style="border-bottom: 1px solid var(--border-color); cursor: pointer; ${warningStyle}" class="mini-row" data-id="${asset.id}">
|
|
<td style="padding: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:center;">
|
|
<div style="display:flex; flex-direction:column; align-items:center; gap:2px;">
|
|
<span style="color: ${isWarning ? '#E11D48' : labelColor}; font-weight: 800; font-size: 12px;">${serviceType}</span>
|
|
${isWarning ? `<span style="color: #E11D48; font-size: 9px; font-weight: 700; white-space: nowrap;">${warningReason}</span>` : ''}
|
|
</div>
|
|
</td>
|
|
<td style="padding: 10px 0; font-weight: 600; color: ${isWarning ? '#991B1B' : 'var(--text-main)'}; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${purpose}">${purpose || '-'}</td>
|
|
<td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${managerMain}</td>
|
|
<td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${managerSub}</td>
|
|
<td style="padding: 10px 0; text-align: center; color: var(--text-main); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
tbody.querySelectorAll('.mini-row').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
tbody.querySelectorAll('.mini-row').forEach(r => {
|
|
const rIsWarning = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)'; // E11D48
|
|
(r as HTMLElement).style.backgroundColor = rIsWarning ? '#FFF1F2' : 'transparent';
|
|
});
|
|
(row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트
|
|
const id = (row as HTMLElement).getAttribute('data-id');
|
|
const asset = fullList.find(a => a.id === id);
|
|
if (asset) updateDetailPanel(asset);
|
|
});
|
|
row.addEventListener('mouseenter', () => {
|
|
if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
|
|
(row as HTMLElement).style.backgroundColor = '#F8FAFA';
|
|
}
|
|
});
|
|
row.addEventListener('mouseleave', () => {
|
|
const isWarning = (row as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)';
|
|
if ((row as HTMLElement).style.backgroundColor !== 'rgb(235, 242, 241)') {
|
|
(row as HTMLElement).style.backgroundColor = isWarning ? '#FFF1F2' : 'transparent';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
(window as any).dispatchLocFilter = (loc: string) => {
|
|
if (isPcView) return;
|
|
selectedLocation = loc;
|
|
selectedDetailLocation = null;
|
|
renderSystemStatus();
|
|
};
|
|
|
|
setTimeout(() => {
|
|
const selectLoc = document.getElementById('select-loc') as HTMLSelectElement;
|
|
const selectDetailLoc = document.getElementById('select-detail-loc') as HTMLSelectElement;
|
|
|
|
selectLoc?.addEventListener('change', (e) => {
|
|
selectedLocation = (e.target as HTMLSelectElement).value || null;
|
|
selectedDetailLocation = null;
|
|
updateTableOnly();
|
|
});
|
|
selectDetailLoc?.addEventListener('change', (e) => {
|
|
selectedDetailLocation = (e.target as HTMLSelectElement).value || null;
|
|
updateTableOnly();
|
|
});
|
|
updateTableOnly();
|
|
}, 50);
|
|
};
|
|
|
|
// [자산 목록] 테이블 렌더러
|
|
const tableWrapper = document.createElement('div');
|
|
tableWrapper.className = 'table-container';
|
|
const table = document.createElement('table');
|
|
const thead = document.createElement('thead');
|
|
const tbody = document.createElement('tbody');
|
|
tbody.id = 'dynamic-tbody';
|
|
table.appendChild(thead);
|
|
table.appendChild(tbody);
|
|
tableWrapper.appendChild(table);
|
|
|
|
const updateTable = () => {
|
|
if ((state as any).currentViewMode !== 'asset') return;
|
|
let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
|
|
if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
|
|
|
|
thead.innerHTML = `<tr>${config.columns.map(col => `
|
|
<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''}
|
|
style="${col.width ? `width:${col.width};` : ''}${col.align ? `text-align:${col.align};` : ''}"
|
|
class="${col.className || ''}">${col.header}</th>`).join('')}</tr>`;
|
|
|
|
tbody.innerHTML = filtered.length === 0
|
|
? `<tr><td colspan="${config.columns.length}" class="text-center" style="padding: 3rem; color: var(--text-muted);">${config.emptyMessage || UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
|
|
: filtered.map(asset => `
|
|
<tr style="cursor:pointer;" class="asset-row" data-id="${asset.id}">
|
|
${config.columns.map(col => `<td style="${col.align ? `text-align:${col.align};` : ''}" class="${col.className || ''}">${col.render(asset)}</td>`).join('')}
|
|
</tr>`).join('');
|
|
|
|
tbody.querySelectorAll('.asset-row').forEach((tr, idx) => {
|
|
tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx]));
|
|
});
|
|
|
|
setupTableSorting(table, sortState, (key, dir) => {
|
|
sortState = { key, direction: dir };
|
|
if (config.persistentSortState) {
|
|
config.persistentSortState.key = key;
|
|
config.persistentSortState.direction = dir;
|
|
}
|
|
updateTable();
|
|
});
|
|
|
|
// createIcons call removed as icons are no longer needed in dashboard
|
|
};
|
|
|
|
// --- 뷰 전환 로직 ---
|
|
const switchView = () => {
|
|
contentWrapper.innerHTML = '';
|
|
if ((state as any).currentViewMode === 'asset') {
|
|
filterBar.style.display = 'flex';
|
|
contentWrapper.style.overflowY = 'auto';
|
|
contentWrapper.appendChild(tableWrapper);
|
|
updateTable();
|
|
} else {
|
|
filterBar.style.display = 'none';
|
|
contentWrapper.style.overflowY = 'hidden';
|
|
renderSystemStatus();
|
|
}
|
|
};
|
|
|
|
// 토글 버튼 이벤트
|
|
toggleWrapper.addEventListener('click', (e) => {
|
|
const btn = (e.target as HTMLElement).closest('.toggle-btn') as HTMLButtonElement;
|
|
if (!btn) return;
|
|
toggleWrapper.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
(state as any).currentViewMode = btn.getAttribute('data-mode') as 'asset' | 'system';
|
|
switchView();
|
|
});
|
|
|
|
// 필터 바 초기화
|
|
renderFilterBar(filterBar, {
|
|
...config.filterOptions,
|
|
onFilterChange: (filters) => {
|
|
currentFilters = { ...currentFilters, ...filters };
|
|
updateTable();
|
|
}
|
|
});
|
|
|
|
// 셀렉트 박스 채우기
|
|
const populateSelect = (selector: string, dataKey: string) => {
|
|
const select = container.querySelector(selector) as HTMLSelectElement;
|
|
if (select) {
|
|
const getVal = (a: any) => dataKey === ASSET_SCHEMA.CURRENT_DEPT.key ? (a[dataKey] || a['현사용부서'] || a['현사용조직']) : a[dataKey];
|
|
const uniqueValues = Array.from(new Set(fullList.map(getVal))).filter(Boolean).sort();
|
|
uniqueValues.forEach(val => {
|
|
const opt = document.createElement('option');
|
|
opt.value = String(val);
|
|
opt.textContent = String(val);
|
|
select.appendChild(opt);
|
|
});
|
|
}
|
|
};
|
|
|
|
if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key);
|
|
if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key);
|
|
if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key);
|
|
if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key);
|
|
|
|
// 초기 실행
|
|
switchView();
|
|
}
|