Taehoon/ITAM
2
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
19e6be27ded5a448cbb989a47b3c34430aa487f8
ITAM/src/views/Dashboard/HwDashboard.ts

1768 lines
87 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { state } from '../../core/state';
import { openHwModal } from '../../components/Modal/HWModal';
import { calculateAssetAge, normalizeDate } from '../../core/utils';
import { ASSET_SCHEMA } from '../../core/schema';
import { createIcons, DollarSign, Monitor, AlertTriangle, Activity, ChevronLeft, ChevronRight, UserCheck, TrendingUp, TrendingDown, Building2, X, FileText } from 'lucide';
declare var Chart: any;
declare global {
interface Window { lucide: any; }
}
let jobChartInstance: any = null;
let totalPcMismatchByCorpChartInstance: any = null;
let totalServerMismatchByPurposeChartInstance: any = null;
// 4p charts
let jobChartInstance4p: any = null;
let corpChartInstance4p: any = null;
let totalServerMismatchByPurposeChartInstance4p: any = null;
let serverServiceChartInstance4p: any = null;
let serverStatusChartInstance4p: any = null;
let pcFlowChartInstance: any = null;
// ─── 서버 용도별 카테고리 분류 헬퍼 ───
function categorizePurpose(purpose: string): string {
if (!purpose) return '기타/일반';
const lower = purpose.toLowerCase();
if (
lower.includes('해석') ||
lower.includes('abaqus') ||
lower.includes('ai') ||
lower.includes('시뮬레이션') ||
lower.includes('processing') ||
lower.includes('매핑') ||
lower.includes('측량') ||
lower.includes('렌더링') ||
lower.includes('gpu')
) {
return '해석/분석/AI';
}
if (
lower.includes('개발') ||
lower.includes('test') ||
lower.includes('테스트') ||
lower.includes('dev') ||
lower.includes('unity') ||
lower.includes('유니티')
) {
return '개발/테스트';
}
if (
lower.includes('was') ||
lower.includes('web') ||
lower.includes('웹') ||
lower.includes('배포') ||
lower.includes('nginx') ||
lower.includes('apache') ||
lower.includes('홈페이지') ||
lower.includes('서비스')
) {
return '서비스/웹/WAS';
}
if (
lower.includes('postgresql') ||
lower.includes('postgres') ||
lower.includes('db') ||
lower.includes('데이터') ||
lower.includes('스토리지') ||
lower.includes('storage') ||
lower.includes('mysql') ||
lower.includes('sql') ||
lower.includes('oracle')
) {
return 'DB/스토리지';
}
if (
lower.includes('백업') ||
lower.includes('backup') ||
lower.includes('ids') ||
lower.includes('ips') ||
lower.includes('crowdsec') ||
lower.includes('opnsense') ||
lower.includes('관리') ||
lower.includes('인증') ||
lower.includes('보안')
) {
return '백업/관리/보안';
}
return '기타/일반';
}
// ─── 네트워크 트래픽 문자열을 숫자(GB)로 파싱하는 헬퍼 ───
function parseTrafficToGb(trafficStr: string): number {
if (!trafficStr || trafficStr === '-' || trafficStr.includes('N/A')) return 0;
const num = parseFloat(trafficStr.replace(/[^0-9.]/g, ''));
if (isNaN(num)) return 0;
return num;
}
// ─── 100점 만점 감점형 성능 점수 계산 (CPU + RAM + GPU + 연식) ───
function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
let score = 100;
if (!cpu) cpu = '';
if (!ram) ram = '';
if (!gpu) gpu = '';
const cpuUpper = cpu.toUpperCase();
const ramUpper = ram.toUpperCase();
const gpuUpper = gpu.toUpperCase();
// 1. CPU 등급 감점 (최대 -30점)
let cpuDeduction = 0;
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
cpuDeduction = 0;
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
cpuDeduction = 5;
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
cpuDeduction = 15;
} else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
cpuDeduction = 25;
} else {
cpuDeduction = 30;
}
score -= cpuDeduction;
// 2. CPU 세대 노후 감점 (최대 -15점)
let genDeduction = 0;
const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
let gen = 0;
if (intelMatch && intelMatch[1]) {
const numStr = intelMatch[1];
if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
}
const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
let amdGen = 0;
if (amdMatch && amdMatch[1] && !intelMatch) {
const numStr = amdMatch[1];
if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
}
if (intelMatch) {
if (gen >= 12) genDeduction = 0;
else if (gen >= 10) genDeduction = 5;
else if (gen >= 8) genDeduction = 10;
else genDeduction = 15;
} else if (amdMatch) {
if (amdGen >= 5) genDeduction = 0;
else if (amdGen >= 3) genDeduction = 5;
else genDeduction = 10;
} else {
genDeduction = 15;
}
score -= genDeduction;
// 3. RAM 용량 감점 (최대 -25점)
const ramMatch = ramUpper.match(/(\d+)\s*GB/);
let ramDeduction = 25;
if (ramMatch && ramMatch[1]) {
const ramVal = parseInt(ramMatch[1], 10);
if (ramVal >= 32) ramDeduction = 0;
else if (ramVal >= 16) ramDeduction = 10;
else if (ramVal >= 8) ramDeduction = 20;
else ramDeduction = 25;
}
score -= ramDeduction;
// 4. GPU 성능 감점 (최대 -25점)
let gpuDeduction = 25;
if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
gpuDeduction = 25;
} else if (
gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
) {
gpuDeduction = 0;
} else if (
gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
) {
gpuDeduction = 5;
} else if (
gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
) {
gpuDeduction = 15;
} else {
gpuDeduction = 25;
}
score -= gpuDeduction;
// 5. 연식(노후도) 감점 (최대 -15점)
let age = 0;
if (purchaseDate && purchaseDate !== '-') {
let normalized = purchaseDate.replace(/\./g, '-').trim();
if (/^\d{6}$/.test(normalized)) {
normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
}
const purchase = new Date(normalized);
if (!isNaN(purchase.getTime())) {
// 2026년 5월 31일 기준 경과연수 계산
const mockToday = new Date('2026-05-31');
const diffMs = mockToday.getTime() - purchase.getTime();
age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
age = Math.max(0, parseFloat(age.toFixed(1)));
}
}
let ageDeduction = 0;
if (age < 1) ageDeduction = 0;
else if (age < 2) ageDeduction = 3;
else if (age < 3) ageDeduction = 6;
else if (age < 4) ageDeduction = 9;
else if (age < 5) ageDeduction = 12;
else ageDeduction = 15;
score -= ageDeduction;
return Math.max(10, score);
}
// ─── 권장 PC사양 점수 로컬스토리지 처리 ───
function getRecommendedScores(jobs: string[]): Record<string, number> {
const stored = localStorage.getItem('recommended_pc_scores');
let scores: Record<string, number> = {};
if (stored) {
try {
scores = JSON.parse(stored);
} catch (e) {
console.error(e);
}
}
const defaultScores: Record<string, number> = {
'AI 개발자': 95,
'3D 개발자': 90,
'프로그램 개발자': 80,
'웹 개발자': 75,
'3D 디자이너': 90,
'편집 디자이너': 75,
'UXUI 디자이너': 70,
'BIM모델러': 75,
'엔지니어': 60,
'기획자': 50,
'감리원': 40,
'관리직': 40,
'미분류': 40
};
jobs.forEach(job => {
if (scores[job] === undefined) {
scores[job] = defaultScores[job] || 40;
}
});
return scores;
}
function saveRecommendedScores(scores: Record<string, number>) {
localStorage.setItem('recommended_pc_scores', JSON.stringify(scores));
}
function showSpecMismatchModal(criticalPcList: any[], jobScores: any, allHw: any[], filterStatus?: '사양 부족' | '오버스펙') {
// 기존 모달 제거
const existing = document.getElementById('spec-mismatch-modal');
if (existing) existing.remove();
const filteredList = filterStatus ? criticalPcList.filter(p => p['_spec_status'] === filterStatus) : criticalPcList;
const titleText = filterStatus ? `PC ${filterStatus} 대상자 목록` : 'PC 사양 부적합 대상자 목록';
let rows = '';
if (filteredList.length === 0) {
rows = '<tr><td colspan="8" style="text-align:center; padding:2rem; color:#94A3B8;">부적합 대상자가 없습니다.</td></tr>';
} else {
for (const pc of filteredList) {
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const score = pc['_pc_score'];
const avg = Math.round(jobScores[job].avg);
const status = pc['_spec_status'];
const color = status === '사양 부족' ? '#E11D48' : '#F59E0B';
const bg = status === '사양 부족' ? '#FFE4E6' : '#FEF3C7';
const userName = pc[ASSET_SCHEMA.CURRENT_USER.key] || '-';
const assetCode = pc[ASSET_SCHEMA.ASSET_CODE.key] || '-';
const corp = pc[ASSET_SCHEMA.PURCHASE_CORP.key] || '-';
const cpuStr = pc[ASSET_SCHEMA.CPU.key] || '-';
const ramStr = pc[ASSET_SCHEMA.RAM.key] || '-';
const gpuStr = pc[ASSET_SCHEMA.GPU.key] || '-';
rows += '<tr class="clickable-row" data-id="' + pc.id + '" style="cursor:pointer; transition: background 0.2s;">';
rows += '<td style="font-weight:600;">' + userName + '</td>';
rows += '<td style="color:#64748B; font-size:12px;">' + job + '</td>';
rows += '<td>' + corp + '</td>';
rows += '<td>' + assetCode + '</td>';
rows += '<td style="font-size:12px;">' + cpuStr + ' / ' + ramStr + ' / ' + gpuStr + '</td>';
rows += '<td style="font-weight:700; text-align:center;">' + score + '</td>';
rows += '<td style="color:#64748B; text-align:center;">' + avg + '</td>';
rows += '<td style="text-align:center;"><span style="color:' + color + '; background:' + bg + '; padding:4px 10px; border-radius:4px; font-size:12px; font-weight:700;">' + status + '</span></td>';
rows += '</tr>';
}
}
const backdrop = document.createElement('div');
backdrop.id = 'spec-mismatch-modal';
backdrop.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s ease;';
const modal = document.createElement('div');
modal.style.cssText = 'background:white;border-radius:16px;width:95%;max-width:1280px;max-height:80vh;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,0.25);display:flex;flex-direction:column;';
modal.innerHTML =
'<div style="display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #E2E8F0;">' +
'<h3 style="margin:0;font-size:1.25rem;font-weight:800;color:#1E293B;display:flex;align-items:center;gap:0.5rem;">' +
'<i data-lucide="user-check" style="color:#6366F1;width:22px;"></i> ' + titleText +
'</h3>' +
'<button id="close-spec-modal" style="background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;color:#64748B;transition:all 0.2s;" onmouseover="this.style.background=\'#F1F5F9\'" onmouseout="this.style.background=\'none\'">' +
'<i data-lucide="x" style="width:20px;height:20px;"></i>' +
'</button>' +
'</div>' +
'<div style="padding:1rem 1.5rem;overflow-y:auto;flex:1;">' +
'<div style="display:flex;gap:1rem;margin-bottom:1rem;">' +
'<div style="flex:1;background:#FFE4E6;border-radius:10px;padding:0.75rem 1rem;display:flex;align-items:center;gap:0.75rem;">' +
'<span style="font-size:1.5rem;">🔻</span>' +
'<div><div style="font-size:0.75rem;color:#9F1239;font-weight:600;">사양 부족</div><div style="font-size:1.25rem;font-weight:800;color:#E11D48;">' + criticalPcList.filter(p => p['_spec_status'] === '사양 부족').length + '명</div></div>' +
'</div>' +
'<div style="flex:1;background:#FEF3C7;border-radius:10px;padding:0.75rem 1rem;display:flex;align-items:center;gap:0.75rem;">' +
'<span style="font-size:1.5rem;">🔺</span>' +
'<div><div style="font-size:0.75rem;color:#92400E;font-weight:600;">오버스펙</div><div style="font-size:1.25rem;font-weight:800;color:#F59E0B;">' + criticalPcList.filter(p => p['_spec_status'] === '오버스펙').length + '명</div></div>' +
'</div>' +
'</div>' +
'<div class="table-premium">' +
'<table>' +
'<thead>' +
'<tr><th>사용자</th><th>직무</th><th>가족사</th><th>자산번호</th><th>사양(CPU/RAM/GPU)</th><th>점수</th><th>직무평균</th><th>상태</th></tr>' +
'</thead>' +
'<tbody>' + rows + '</tbody>' +
'</table>' +
'</div>' +
'</div>';
backdrop.appendChild(modal);
document.body.appendChild(backdrop);
// 아이콘 초기화
setTimeout(() => {
if (window.lucide) window.lucide.createIcons();
else createIcons({ icons: { UserCheck, X } });
}, 50);
// 닫기 이벤트
const closeBtn = document.getElementById('close-spec-modal');
if (closeBtn) closeBtn.addEventListener('click', () => backdrop.remove());
backdrop.addEventListener('click', (e) => { if (e.target === backdrop) backdrop.remove(); });
// 행 클릭 → 자산 상세 모달
modal.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', () => {
const id = row.getAttribute('data-id');
const asset = allHw.find((h: any) => h.id === id);
if (asset) openHwModal(asset, 'view');
});
});
}
function showServerStatusModal(serverList: any[], allHw: any[], titleText: string) {
// 기존 모달 제거
const existing = document.getElementById('server-status-modal');
if (existing) existing.remove();
let rows = '';
if (serverList.length === 0) {
rows = '<tr><td colspan="9" style="text-align:center; padding:2rem; color:#94A3B8;">해당하는 장비가 없습니다.</td></tr>';
} else {
serverList.forEach((a, idx) => {
const score = a['_server_score'] || 0;
const status = a['_server_status'];
const service = a.service_type || '내부서비스';
let badgeColor = '#EF4444';
let badgeBg = '#FEE2E2';
if (status === '자원 과잉') { badgeColor = '#D97706'; badgeBg = '#FEF3C7'; }
else if (status === '방치 의심') { badgeColor = '#475569'; badgeBg = '#F1F5F9'; }
else if (status === '적정') { badgeColor = '#10B981'; badgeBg = '#D1FAE5'; }
else if (status === '자원 부족') { badgeColor = '#EF4444'; badgeBg = '#FEE2E2'; }
// 사용 리소스 및 트래픽 렌더링 준비
let resourceHtml = '-';
let trafficHtml = '-';
const isInactive = a.is_inactive === true || String(a.is_inactive) === 'true';
if (!isInactive) {
const cpuUsage = a.cpu_usage !== undefined ? (typeof a.cpu_usage === 'number' ? a.cpu_usage : parseFloat(String(a.cpu_usage || '0'))) : 0;
const ramUsage = a.ram_usage !== undefined ? (typeof a.ram_usage === 'number' ? a.ram_usage : parseFloat(String(a.ram_usage || '0'))) : 0;
const hasWarning = cpuUsage > 75 || ramUsage > 80;
if (hasWarning) {
resourceHtml = `<span style="color:#EF4444; font-weight:700;">CPU ${cpuUsage}% / RAM ${ramUsage}%</span>`;
} else {
resourceHtml = `CPU ${cpuUsage}% / RAM ${ramUsage}%`;
}
trafficHtml = a.network_traffic || '-';
} else {
resourceHtml = `<span style="color:#94A3B8;">-</span>`;
trafficHtml = `<span style="color:#94A3B8;">0 GB (N/A)</span>`;
}
rows += `<tr class="clickable-row" data-id="${a.id}" style="cursor:pointer; transition: background 0.2s;" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">`;
rows += `<td style="font-weight:700; text-align:center; color:#94A3B8;">${idx + 1}</td>`;
rows += `<td style="font-weight:600; color:#1E293B;">${a.asset_name || a[ASSET_SCHEMA.ASSET_CODE.key]}</td>`;
rows += `<td><span style="background:#EEF2FF;color:#4F46E5;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">${service}</span></td>`;
rows += `<td>${a.current_dept || '-'}</td>`;
rows += `<td>${a.location || '-'}</td>`;
rows += `<td style="font-size:12px;">${resourceHtml}</td>`;
rows += `<td style="font-size:12px;">${trafficHtml}</td>`;
rows += `<td style="font-weight:700; text-align:center;">${score}점</td>`;
rows += `<td style="text-align:center;"><span style="color:${badgeColor};background:${badgeBg};padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;">${status}</span></td>`;
rows += '</tr>';
});
}
const backdrop = document.createElement('div');
backdrop.id = 'server-status-modal';
backdrop.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s ease;';
const modal = document.createElement('div');
modal.style.cssText = 'background:white;border-radius:16px;width:95%;max-width:1280px;max-height:80vh;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,0.25);display:flex;flex-direction:column;';
modal.innerHTML =
'<div style="display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #E2E8F0;">' +
'<h3 style="margin:0;font-size:1.25rem;font-weight:800;color:#1E293B;display:flex;align-items:center;gap:0.5rem;">' +
'<i data-lucide="monitor" style="color:#6366F1;width:22px;"></i> ' + titleText +
'</h3>' +
'<button id="close-server-modal" style="background:none;border:none;cursor:pointer;padding:4px;border-radius:8px;color:#64748B;transition:all 0.2s;" onmouseover="this.style.background=\'#F1F5F9\'" onmouseout="this.style.background=\'none\'">' +
'<i data-lucide="x" style="width:20px;height:20px;"></i>' +
'</button>' +
'</div>' +
'<div style="padding:1rem 1.5rem;overflow-y:auto;flex:1;">' +
'<div class="table-premium">' +
'<table>' +
'<thead>' +
'<tr><th style="width:50px;text-align:center;">순위</th><th>장비명</th><th>서비스 유형</th><th>소속 부서</th><th>설치 위치</th><th>월 평균 리소스 사용량 (CPU/RAM)</th><th>월 데이터 전송량</th><th style="text-align:center;">점수</th><th style="text-align:center;">상태</th></tr>' +
'</thead>' +
'<tbody>' + rows + '</tbody>' +
'</table>' +
'</div>' +
'</div>';
backdrop.appendChild(modal);
document.body.appendChild(backdrop);
// 아이콘 초기화
setTimeout(() => {
if (window.lucide) window.lucide.createIcons();
else createIcons({ icons: { Monitor, X } });
}, 50);
// 닫기 이벤트
const closeBtn = document.getElementById('close-server-modal');
if (closeBtn) closeBtn.addEventListener('click', () => backdrop.remove());
backdrop.addEventListener('click', (e) => { if (e.target === backdrop) backdrop.remove(); });
// 행 클릭 → 자산 상세 모달
modal.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', () => {
const id = row.getAttribute('data-id');
const asset = allHw.find((h: any) => h.id === id);
if (asset) {
backdrop.remove();
openHwModal(asset, 'view');
}
});
});
}
// ─── 가족사별 통계 데이터 빌드 ───
function buildCorpScores(pcs: any[]): { labels: string[]; avgs: number[]; unders: number[]; overs: number[] } {
const FAMILY_CORPS = ['한맥', '삼안', 'PTC', '바론'];
const labels: string[] = [];
const avgs: number[] = [];
const unders: number[] = [];
const overs: number[] = [];
for (const corp of FAMILY_CORPS) {
const corpPcs = pcs.filter((p: any) => p[ASSET_SCHEMA.PURCHASE_CORP.key] === corp);
const total = corpPcs.length;
labels.push(corp);
if (total === 0) {
avgs.push(0);
unders.push(0);
overs.push(0);
continue;
}
let corpTotalScore = 0;
let corpUnder = 0;
let corpOver = 0;
for (const pc of corpPcs) {
corpTotalScore += pc['_pc_score'] || 0;
if (pc['_spec_status'] === '사양 부족') corpUnder++;
if (pc['_spec_status'] === '오버스펙') corpOver++;
}
avgs.push(Math.round(corpTotalScore / total));
unders.push(corpUnder);
overs.push(corpOver);
}
return { labels, avgs, unders, overs };
}
// ─── 서버 적정성 테이블 행 빌드 ───
function buildServerStatusTableRows(list: any[]): string {
if (list.length === 0) {
return '<tr><td colspan="8" style="text-align:center; padding:1.5rem; color:#94A3B8; font-size:12px;">대상 장비가 없습니다.</td></tr>';
}
let rows = '';
list.forEach((a, idx) => {
const score = a['_server_score'] || 0;
const status = a['_server_status'];
const service = a.service_type || '내부서비스';
let badgeColor = '#EF4444';
let badgeBg = '#FEE2E2';
if (status === '자원 과잉') { badgeColor = '#D97706'; badgeBg = '#FEF3C7'; }
else if (status === '방치 의심') { badgeColor = '#475569'; badgeBg = '#F1F5F9'; }
else if (status === '적정') { badgeColor = '#10B981'; badgeBg = '#D1FAE5'; }
else if (status === '자원 부족') { badgeColor = '#EF4444'; badgeBg = '#FEE2E2'; }
// 사용 리소스 및 트래픽 렌더링 준비
let resourceHtml = '-';
let trafficHtml = '-';
const isInactive = a.is_inactive === true || String(a.is_inactive) === 'true';
if (!isInactive) {
const cpuUsage = a.cpu_usage !== undefined ? (typeof a.cpu_usage === 'number' ? a.cpu_usage : parseFloat(String(a.cpu_usage || '0'))) : 0;
const ramUsage = a.ram_usage !== undefined ? (typeof a.ram_usage === 'number' ? a.ram_usage : parseFloat(String(a.ram_usage || '0'))) : 0;
const hasWarning = cpuUsage > 75 || ramUsage > 80;
if (hasWarning) {
resourceHtml = `<span style="color:#EF4444; font-weight:700;">CPU ${cpuUsage}% / RAM ${ramUsage}%</span>`;
} else {
resourceHtml = `CPU ${cpuUsage}% / RAM ${ramUsage}%`;
}
trafficHtml = a.network_traffic || '-';
} else {
resourceHtml = `<span style="color:#94A3B8;">-</span>`;
trafficHtml = `<span style="color:#94A3B8;">0 GB (N/A)</span>`;
}
rows += `<tr class="clickable-row" data-id="${a.id}" style="cursor:pointer; transition: background 0.2s;">`;
rows += `<td style="text-align:center;font-weight:700;color:#94A3B8;">${idx + 1}</td>`;
rows += `<td style="font-weight:600;color:#1E293B;">${a.asset_name || a[ASSET_SCHEMA.ASSET_CODE.key]}</td>`;
rows += `<td><span style="background:#EEF2FF;color:#4F46E5;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">${service}</span></td>`;
rows += `<td style="font-size:12px;">${resourceHtml}</td>`;
rows += `<td style="font-size:12px;">${trafficHtml}</td>`;
rows += `<td style="text-align:center;font-weight:700;color:#1E293B;">${score}점</td>`;
rows += `<td style="text-align:center;"><span style="color:${badgeColor};background:${badgeBg};padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;">${status}</span></td>`;
rows += '</tr>';
});
return rows;
}
// ═══════════════════════════════════════════════
// ─── MAIN RENDER FUNCTION ───
// ═══════════════════════════════════════════════
export function renderHwDashboard(container: HTMLElement) {
const allHw = state.masterData.hw || [];
// --- PC FLOW LOGS DATA PREP ---
const logs = state.masterData.logs || [];
const now = new Date();
const currentYearMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
let currentMonthCheckout = 0;
let currentMonthReturn = 0;
let currentMonthMove = 0;
let totalCheckout = 0;
let totalReturn = 0;
let totalMove = 0;
const flowLogs = logs.filter((log: any) => {
const details = log.details || '';
const isFlow = details.includes('[불출]') || details.includes('[반납]') || details.includes('[입고]') || details.includes('[이동]') || details.includes('[이관]');
if (isFlow) {
const logDate = log.log_date || '';
const isCurrentMonth = logDate.startsWith(currentYearMonth);
if (details.includes('[불출]')) {
totalCheckout++;
if (isCurrentMonth) currentMonthCheckout++;
} else if (details.includes('[반납]') || details.includes('[입고]')) {
totalReturn++;
if (isCurrentMonth) currentMonthReturn++;
} else if (details.includes('[이동]') || details.includes('[이관]')) {
totalMove++;
if (isCurrentMonth) currentMonthMove++;
}
return true;
}
return false;
});
const recentFlowLogs = flowLogs.slice(0, 5);
let recentFlowLogsHtml = '';
if (recentFlowLogs.length === 0) {
recentFlowLogsHtml = '<tr><td colspan="4" style="text-align:center; padding:1.5rem; color:#94A3B8; font-size:12px;">최근 유동 이력이 없습니다.</td></tr>';
} else {
recentFlowLogs.forEach((log: any) => {
const details = log.details || '';
let badgeHtml = '';
if (details.includes('[불출]')) {
badgeHtml = '<span style="background:#E0F2FE;color:#0369A1;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">불출</span>';
} else if (details.includes('[반납]') || details.includes('[입고]')) {
badgeHtml = '<span style="background:#DCFCE7;color:#15803D;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">입고</span>';
} else if (details.includes('[이동]') || details.includes('[이관]')) {
badgeHtml = '<span style="background:#FEF3C7;color:#B45309;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">이동</span>';
}
const cleanDetails = details.replace(/^\[(불출|반납|입고|이동|이관)\]\s*/, '');
recentFlowLogsHtml += `
<tr style="border-bottom: 1px solid #F1F5F9; font-size: 13px;">
<td style="padding: 8px; color: #64748B;">${log.log_date || '-'}</td>
<td style="padding: 8px;">${badgeHtml}</td>
<td style="padding: 8px; font-weight: 600; color: #334155;">${log.log_user || '시스템'}</td>
<td style="padding: 8px; color: #475569;" title="${details}">${cleanDetails}</td>
</tr>
`;
});
}
// --- PC DATA PREP ---
const pcs = allHw.filter(a => {
const cat = a[ASSET_SCHEMA.CATEGORY.key] || '';
const type = a[ASSET_SCHEMA.ASSET_TYPE.key] || '';
const job = a[ASSET_SCHEMA.USER_POSITION.key] || '';
const status = a[ASSET_SCHEMA.HW_STATUS.key] || '';
const user = a[ASSET_SCHEMA.CURRENT_USER.key] || '';
return (cat === 'PC' || type === '개인PC' || type === '노트북' || type === '공용PC') &&
job !== '재고PC' &&
status === '사용중' &&
user.trim() !== '';
});
const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
pcs.forEach(pc => {
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const cpu = pc[ASSET_SCHEMA.CPU.key];
const ram = pc[ASSET_SCHEMA.RAM.key];
const gpu = pc[ASSET_SCHEMA.GPU.key];
const pDate = pc[ASSET_SCHEMA.PURCHASE_DATE.key];
const score = calculatePcScoreDeductive(cpu, ram, gpu, pDate);
pc['_pc_score'] = score;
if (!jobScores[job]) jobScores[job] = { totalScore: 0, count: 0, avg: 0 };
jobScores[job].totalScore += score;
jobScores[job].count += 1;
});
let totalPcScore = 0;
Object.keys(jobScores).forEach(job => {
jobScores[job].avg = jobScores[job].totalScore / jobScores[job].count;
totalPcScore += jobScores[job].totalScore;
});
const overallPcAvg = pcs.length > 0 ? Math.round(totalPcScore / pcs.length) : 0;
const jobsList = Object.keys(jobScores).sort((a, b) => jobScores[b].avg - jobScores[a].avg);
const recommendedScores = getRecommendedScores(jobsList);
let overSpecCount = 0;
let underSpecCount = 0;
const criticalPcList: any[] = [];
pcs.forEach(pc => {
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const score = pc['_pc_score'];
const avg = jobScores[job].avg;
if (score < avg * 0.8) {
underSpecCount++;
pc['_spec_status'] = '사양 부족';
criticalPcList.push(pc);
} else if (score > avg * 1.3) {
overSpecCount++;
pc['_spec_status'] = '오버스펙';
criticalPcList.push(pc);
} else {
pc['_spec_status'] = '적정';
}
});
criticalPcList.sort((a, b) => {
const jobA = a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const jobB = b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const ratioA = a['_pc_score'] / jobScores[jobA].avg;
const ratioB = b['_pc_score'] / jobScores[jobB].avg;
return ratioA - ratioB;
});
// --- SERVER DATA PREP ---
const servers = allHw.filter(a => {
const cat = a[ASSET_SCHEMA.CATEGORY.key] || '';
const type = a[ASSET_SCHEMA.ASSET_TYPE.key] || '';
return cat === '서버' || cat === '스토리지' || type === '서버' || type === 'NAS' || type === '가상서버(VM)' || type === '공용PC' || type === '테스트 PC' || type === '회의실 PC';
});
let serverTotalValue = 0;
let serverTotalAge = 0;
let serverCountWithDate = 0;
let serverOver5YearsCount = 0;
const serverAgeGroups = { stable: 0, warning: 0, critical: 0 };
// 서비스 유형 카운트
const serverServiceGroups = { internal: 0, external: 0, public: 0 };
// 적정성 분석 상태 카운트
const serverStatusGroups = { optimal: 0, underSpec: 0, overSpec: 0, inactive: 0 };
servers.forEach(a => {
const amountStr = String(a[ASSET_SCHEMA.PURCHASE_AMOUNT.key] || '0').replace(/[^0-9]/g, '');
serverTotalValue += parseInt(amountStr, 10) || 0;
// 구매연령
const pDate = a[ASSET_SCHEMA.PURCHASE_DATE.key] || a.purchase_date;
if (pDate) {
const age = calculateAssetAge(pDate);
serverTotalAge += age;
serverCountWithDate++;
if (age >= 5) { serverOver5YearsCount++; serverAgeGroups.critical++; }
else if (age >= 3) { serverAgeGroups.warning++; }
else { serverAgeGroups.stable++; }
}
// 서비스 유형 판단 및 집계
const serviceType = a.service_type || '내부서비스';
if (serviceType === '외부서비스') serverServiceGroups.external++;
else if (serviceType === '회의용/공용') serverServiceGroups.public++;
else serverServiceGroups.internal++;
// 사양 점수 및 적정성 평가
const score = calculatePcScoreDeductive(a.cpu, a.ram, a.gpu, pDate);
a['_server_score'] = score;
const isInactive = a.is_inactive === true || String(a.is_inactive) === 'true';
// 안전한 CPU, RAM 사용량 파싱
const cpuUsage = a.cpu_usage !== undefined ? (typeof a.cpu_usage === 'number' ? a.cpu_usage : parseFloat(String(a.cpu_usage || '0'))) : 0;
const ramUsage = a.ram_usage !== undefined ? (typeof a.ram_usage === 'number' ? a.ram_usage : parseFloat(String(a.ram_usage || '0'))) : 0;
const trafficGb = parseTrafficToGb(a.network_traffic);
if (isInactive) {
a['_server_status'] = '방치 의심';
serverStatusGroups.inactive++;
} else {
// 1. 자원 부족 판별 (오직 사용 리소스 기반: CPU > 75% 또는 RAM > 80% 또는 일일 트래픽 > 500 GB)
const isUnderProvisioned = cpuUsage > 75 || ramUsage > 80 || trafficGb > 500;
// 2. 자원 과잉 판별 (오직 사용 리소스 기반: CPU < 10% 이고 RAM < 20% 이고 일일 트래픽 < 5 GB)
const isOverProvisioned = cpuUsage < 10 && ramUsage < 20 && trafficGb < 5;
if (isUnderProvisioned) {
a['_server_status'] = '자원 부족';
serverStatusGroups.underSpec++;
} else if (isOverProvisioned) {
a['_server_status'] = '자원 과잉';
serverStatusGroups.overSpec++;
} else {
a['_server_status'] = '적정';
serverStatusGroups.optimal++;
}
}
});
const serverAvgAge = serverCountWithDate > 0 ? (serverTotalAge / serverCountWithDate).toFixed(1) : '0';
const serverOver5Rate = servers.length > 0 ? Math.round((serverOver5YearsCount / servers.length) * 100) : 0;
const serverFormattedValue = new Intl.NumberFormat('ko-KR').format(serverTotalValue);
// 리스트: 자원 과잉 장비 TOP 5
const overSpecList = servers
.filter(a => a['_server_status'] === '자원 과잉')
.sort((a, b) => b['_server_score'] - a['_server_score'])
.slice(0, 5);
// 리스트: 자원 부족 장비 TOP 5
const underSpecList = servers
.filter(a => a['_server_status'] === '자원 부족')
.sort((a, b) => a['_server_score'] - b['_server_score'])
.slice(0, 5);
// 리스트: 방치 의심 장비 (회수/재배치 필요) TOP 5
const inactiveList = servers
.filter(a => a['_server_status'] === '방치 의심')
.slice(0, 5);
// --- TOTAL EXEC DASHBOARD STATS (종합 대시보드 통계 연산) ---
let totalAssetValue = 0;
allHw.forEach(a => {
const amt = parseInt(String(a[ASSET_SCHEMA.PURCHASE_AMOUNT.key] || '0').replace(/[^0-9]/g, ''), 10) || 0;
totalAssetValue += amt;
});
let costSavingPotential = 0;
servers.forEach(a => {
const status = a['_server_status'];
if (status === '자원 과잉' || status === '방치 의심') {
const amt = parseInt(String(a[ASSET_SCHEMA.PURCHASE_AMOUNT.key] || '0').replace(/[^0-9]/g, ''), 10) || 0;
costSavingPotential += amt;
}
});
pcs.forEach(pc => {
if (pc['_spec_status'] === '오버스펙') {
const amt = parseInt(String(pc[ASSET_SCHEMA.PURCHASE_AMOUNT.key] || '0').replace(/[^0-9]/g, ''), 10) || 0;
costSavingPotential += amt;
}
});
const totalEvaluatedDevices = pcs.length + servers.length;
let optimalDevicesCount = 0;
pcs.forEach(pc => { if (pc['_spec_status'] === '적정') optimalDevicesCount++; });
servers.forEach(s => { if (s['_server_status'] === '적정') optimalDevicesCount++; });
const assetOptimizationRate = totalEvaluatedDevices > 0 ? Math.round((optimalDevicesCount / totalEvaluatedDevices) * 100) : 0;
let pcOver5YearsCount = 0;
pcs.forEach(pc => {
const pDate = pc[ASSET_SCHEMA.PURCHASE_DATE.key];
if (pDate && calculateAssetAge(pDate) >= 5) pcOver5YearsCount++;
});
let totalOver5YearsCount = pcOver5YearsCount;
servers.forEach(s => {
const pDate = s[ASSET_SCHEMA.PURCHASE_DATE.key] || s.purchase_date;
if (pDate && calculateAssetAge(pDate) >= 5) totalOver5YearsCount++;
});
let totalResourceBottleneckCount = 0;
servers.forEach(s => {
if (s['_server_status'] === '자원 부족') totalResourceBottleneckCount++;
});
let totalInactiveCount = 0;
servers.forEach(s => {
if (s['_server_status'] === '방치 의심') totalInactiveCount++;
});
// 용도별 서버 자원 과부족 대수 집계
const PURPOSE_CATEGORIES = ['개발/테스트', '서비스/웹/WAS', 'DB/스토리지', '해석/분석/AI', '백업/관리/보안', '기타/일반'];
const purposeServerUnders = PURPOSE_CATEGORIES.map(cat =>
servers.filter(s => categorizePurpose(s[ASSET_SCHEMA.ASSET_PURPOSE.key] || s.asset_purpose) === cat && s['_server_status'] === '자원 부족').length
);
const purposeServerOvers = PURPOSE_CATEGORIES.map(cat =>
servers.filter(s => categorizePurpose(s[ASSET_SCHEMA.ASSET_PURPOSE.key] || s.asset_purpose) === cat && s['_server_status'] === '자원 과잉').length
);
// 차트용 데이터
const assetTypesCount = {
pc: pcs.length,
server: servers.filter(s => s.asset_type.includes('서버') || s.asset_type.includes('VM')).length,
storage: servers.filter(s => s.asset_type.toUpperCase().includes('NAS') || s.asset_type.toUpperCase().includes('스토리지') || s.asset_type.toUpperCase().includes('STO')).length,
other: allHw.length - pcs.length - servers.length
};
const pcStatusSummary = {
optimal: pcs.filter(p => p._spec_status === '적정').length,
over: pcs.filter(p => p._spec_status === '오버스펙').length,
under: pcs.filter(p => p._spec_status === '사양 부족').length,
inactive: 0
};
const serverStatusSummary = {
optimal: serverStatusGroups.optimal,
over: serverStatusGroups.overSpec,
under: serverStatusGroups.underSpec,
inactive: serverStatusGroups.inactive
};
// --- PRE-BUILD HTML ---
const corpScores = buildCorpScores(pcs);
// 가족사별 평균 점수 텍스트 리스트
let corpAvgListHtml = '';
for (let ci = 0; ci < corpScores.labels.length; ci++) {
corpAvgListHtml += '<div style="display:flex;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid #F1F5F9;flex:1;align-items:center;">';
corpAvgListHtml += '<span style="font-weight:600;color:#334155;font-size:0.95rem;">' + corpScores.labels[ci] + '</span>';
corpAvgListHtml += '<span style="font-weight:800;color:#3B82F6;font-size:1.05rem;">' + corpScores.avgs[ci] + '점</span>';
corpAvgListHtml += '</div>';
}
// --- RENDER ---
container.innerHTML =
'<div class="view-container" style="overflow-x: hidden;">' +
'<div class="dashboard-header-wrapper">' +
'<div style="display:flex; align-items:center; gap:1rem;">' +
'<h2 style="font-size: 1.8rem; font-weight: 800; margin: 0; color: #1E293B;">Executive Dashboard <span style="font-size:1rem; color:#64748B; font-weight:500;">(PC &amp; Server)</span></h2>' +
'<button id="btn-open-proposal" title="PC 사양 적정성 분석 기획서 보기" style="display:flex; align-items:center; gap:0.35rem; background:#EEF2F6; border:1px solid #CBD5E1; border-radius:8px; padding:6px 12px; font-size:0.875rem; font-weight:600; color:#334155; cursor:pointer; transition:all 0.2s;" onmouseover="this.style.background=\'#E2E8F0\'" onmouseout="this.style.background=\'#EEF2F6\'">' +
'<i data-lucide="file-text" style="width:16px; height:16px; color:#4F46E5;"></i>' +
'기획서 보기' +
'</button>' +
'</div>' +
'<div class="slider-controls">' +
'<button id="slider-prev" class="slider-nav-btn" disabled><i data-lucide="chevron-left"></i></button>' +
'<span id="slider-indicator" class="slider-indicator">1 / 5</span>' +
'<button id="slider-next" class="slider-nav-btn"><i data-lucide="chevron-right"></i></button>' +
'</div>' +
'</div>' +
'<div class="dashboard-slider-viewport">' +
'<div class="dashboard-slider-track" id="dashboard-slider-track">' +
// ── SLIDE 1: TOTAL EXECUTIVE DASHBOARD ──
'<div class="dashboard-slide">' +
'<h3 class="dashboard-section-title" style="color:#0F172A; border-bottom:2px solid #E2E8F0; display:inline-block; margin-bottom:1.5rem;">📊 전사 IT 자산 및 자원 최적화 요약</h3>' +
// KPI Row
'<div class="dashboard-grid" style="grid-template-columns: repeat(4, 1fr);">' +
'<div class="stat-card">' +
'<div class="stat-icon icon-red"><i data-lucide="monitor"></i></div>' +
'<span class="stat-label">PC 사양 부족 장비</span>' +
'<div class="stat-value stat-value-danger" style="font-size:1.8rem;">' + underSpecCount + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">개인용 PC 대비 ' + (pcs.length > 0 ? Math.round((underSpecCount / pcs.length) * 100) : 0) + '% 비율</div>' +
'</div>' +
'<div class="stat-card">' +
'<div class="stat-icon icon-yellow"><i data-lucide="monitor"></i></div>' +
'<span class="stat-label">PC 오버스펙 장비</span>' +
'<div class="stat-value" style="color:#F59E0B; font-size:1.8rem;">' + overSpecCount + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">개인용 PC 대비 ' + (pcs.length > 0 ? Math.round((overSpecCount / pcs.length) * 100) : 0) + '% 비율</div>' +
'</div>' +
'<div class="stat-card">' +
'<div class="stat-icon icon-red"><i data-lucide="activity"></i></div>' +
'<span class="stat-label">서버 자원 부족 장비</span>' +
'<div class="stat-value stat-value-danger" style="font-size:1.8rem;">' + serverStatusGroups.underSpec + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">서버/NAS 대비 ' + (servers.length > 0 ? Math.round((serverStatusGroups.underSpec / servers.length) * 100) : 0) + '% 비율</div>' +
'</div>' +
'<div class="stat-card">' +
'<div class="stat-icon icon-yellow"><i data-lucide="activity"></i></div>' +
'<span class="stat-label">서버 자원 과잉 장비</span>' +
'<div class="stat-value" style="color:#D97706; font-size:1.8rem;">' + serverStatusGroups.overSpec + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">서버/NAS 대비 ' + (servers.length > 0 ? Math.round((serverStatusGroups.overSpec / servers.length) * 100) : 0) + '% 비율</div>' +
'</div>' +
'</div>' +
// Charts
'<div class="dashboard-layout-2col" style="margin-bottom: 2rem;">' +
'<div class="dashboard-card">' +
'<h4 class="dashboard-section-title" style="color:#EF4444;">가족사별 PC 사양 과부족 현황</h4>' +
'<div style="height:280px;display:flex;align-items:center;justify-content:center;"><canvas id="chart-total-pc-mismatch-by-corp"></canvas></div>' +
'</div>' +
'<div class="dashboard-card">' +
'<h4 class="dashboard-section-title">용도별 서버 자원 과부족 현황</h4>' +
'<div style="height:280px;display:flex;align-items:center;justify-content:center;"><canvas id="chart-total-server-mismatch-by-purpose"></canvas></div>' +
'</div>' +
'</div>' +
'</div>' +
// ── SLIDE 2: PC DASHBOARD ──
'<div class="dashboard-slide">' +
'<h3 class="dashboard-section-title" style="color:#0F172A; border-bottom:2px solid #E2E8F0; display:inline-block; margin-bottom:1.5rem;">💻 PC 사양 적정성 분석</h3>' +
// KPI Row
'<div class="dashboard-grid" style="grid-template-columns: repeat(4, 1fr);">' +
'<div class="stat-card">' +
'<div class="stat-icon icon-blue"><i data-lucide="monitor"></i></div>' +
'<span class="stat-label">전사 평균 PC 사양 점수</span>' +
'<div class="stat-value" style="font-size:1.8rem;">' + overallPcAvg + '<span style="font-size:1rem; font-weight:600; color:#64748B;">점</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">운영 중인 PC 총 ' + pcs.length + '대 기준</div>' +
'</div>' +
'<div class="stat-card" id="kpi-under-spec" style="cursor:pointer;">' +
'<div class="stat-icon icon-red"><i data-lucide="trending-down"></i></div>' +
'<span class="stat-label">사양 부족 인원 (교체 검토)</span>' +
'<div class="stat-value stat-value-danger">' + underSpecCount + '<span style="font-size:1rem; font-weight:600; color:#64748B;">명</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">직무 평균 대비 20% 이상 미달 &nbsp;▸ 클릭하여 상세보기</div>' +
'</div>' +
'<div class="stat-card" id="kpi-over-spec" style="cursor:pointer;">' +
'<div class="stat-icon icon-yellow"><i data-lucide="trending-up"></i></div>' +
'<span class="stat-label">오버스펙 인원 (회수 검토)</span>' +
'<div class="stat-value" style="color:#F59E0B;">' + overSpecCount + '<span style="font-size:1rem; font-weight:600; color:#64748B;">명</span></div>' +
'<div style="font-size: 0.8125rem; color:var(--text-muted); margin-top: 0.5rem;">직무 평균 대비 30% 이상 초과 &nbsp;▸ 클릭하여 상세보기</div>' +
'</div>' +
'<div class="stat-card" style="border: 1px solid rgba(239,68,68,0.3); background: rgba(254,226,226,0.15);">' +
'<div class="stat-icon" style="background:rgba(239,68,68,0.1);color:#EF4444;"><i data-lucide="alert-triangle"></i></div>' +
'<span class="stat-label" style="color:#EF4444;">교체/회수 대상 비율</span>' +
'<div class="stat-value stat-value-danger" style="font-size:1.8rem;">' + (pcs.length > 0 ? Math.round(((underSpecCount + overSpecCount) / pcs.length) * 100) : 0) + '<span style="font-size:1rem; font-weight:600; color:#64748B;">%</span></div>' +
'<div style="width:100%;height:4px;background:#E2E8F0;border-radius:2px;overflow:hidden;margin-top:1rem;">' +
'<div style="width:' + (pcs.length > 0 ? Math.round(((underSpecCount + overSpecCount) / pcs.length) * 100) : 0) + '%;height:100%;background:linear-gradient(90deg,#F59E0B,#E11D48);"></div>' +
'</div>' +
'<div style="font-size: 0.75rem; color:#94A3B8; margin-top: 0.75rem; line-height: 1.3;">* 산출식: (사양 부족 + 오버스펙 인원) / 전체 PC 수량 × 100</div>' +
'</div>' +
'</div>' +
// Charts + Corp Stats
'<div class="dashboard-layout-2col">' +
'<div class="dashboard-card">' +
'<h4 class="dashboard-section-title">직무별 평균 PC 사양 점수</h4>' +
'<div><canvas id="chart-job-scores"></canvas></div>' +
'</div>' +
'<div class="dashboard-card" style="padding:1.25rem 1.5rem;">' +
'<h4 class="dashboard-section-title" style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;">' +
'<i data-lucide="building-2" style="color:#6366F1;width:20px;"></i> 가족사별 PC 사양 현황' +
'</h4>' +
'<div style="display:flex;gap:1.5rem;flex:1;align-items:stretch;height:calc(100% - 3.5rem);">' +
'<div style="flex:1;display:flex;flex-direction:column;border-right:1px solid #E2E8F0;padding-right:1.25rem;padding-bottom:0.5rem;">' +
'<div style="font-size:0.85rem;color:#94A3B8;font-weight:700;text-transform:uppercase;margin-bottom:0.75rem;">평균 점수</div>' +
'<div style="display:flex;flex-direction:column;justify-content:space-between;flex:1;height:100%;">' +
corpAvgListHtml +
'</div>' +
'</div>' +
'<div style="flex:2;display:flex;align-items:center;justify-content:center;"><canvas id="chart-corp-scores" style="max-height:280px;width:100%;"></canvas></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
// ── SLIDE 2: SERVER DASHBOARD ──
'<div class="dashboard-slide">' +
'<h3 class="dashboard-section-title" style="color:#0F172A; border-bottom:2px solid #E2E8F0; display:inline-block; margin-bottom:1.5rem;">🖥️ 서버 및 공용 인프라 분석</h3>' +
'<div class="dashboard-grid" style="grid-template-columns: repeat(4, 1fr);">' +
'<div class="stat-card" id="kpi-server-total" style="cursor:pointer;">' +
'<div class="stat-icon icon-blue"><i data-lucide="monitor"></i></div>' +
'<span class="stat-label">총 운영 서버/NAS 수량</span>' +
'<div class="stat-value" style="font-size:1.8rem;">' + servers.length + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.75rem; color:#64748B; margin-top: 0.5rem;">실제 도입 가치: ' + serverFormattedValue + '원 &nbsp;▸ 클릭시 목록보기</div>' +
'</div>' +
'<div class="stat-card" id="kpi-server-external" style="cursor:pointer;">' +
'<div class="stat-icon icon-green"><i data-lucide="activity"></i></div>' +
'<span class="stat-label">외부 운영 서비스 비율</span>' +
'<div class="stat-value" style="color:#10B981;">' + serverServiceGroups.external + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대 (' + Math.round((serverServiceGroups.external / servers.length) * 100) + '%)</span></div>' +
'<div style="font-size: 0.75rem; color:#64748B; margin-top: 0.5rem;">사내용 인프라 ' + serverServiceGroups.internal + '대 / 회의실 ' + serverServiceGroups.public + '대 &nbsp;▸ 클릭시 목록보기</div>' +
'</div>' +
'<div class="stat-card" id="kpi-server-overspec" style="cursor:pointer;">' +
'<div class="stat-icon icon-yellow"><i data-lucide="trending-up"></i></div>' +
'<span class="stat-label">자원 과잉 장비</span>' +
'<div class="stat-value" style="color:#F59E0B;">' + serverStatusGroups.overSpec + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.75rem; color:#64748B; margin-top: 0.5rem;">리소스 사용률 및 데이터 전송량이 극히 저조한 장비 &nbsp;▸ 클릭시 목록보기</div>' +
'</div>' +
'<div class="stat-card" id="kpi-server-critical" style="cursor:pointer;">' +
'<div class="stat-icon icon-red"><i data-lucide="trending-down"></i></div>' +
'<span class="stat-label">자원 부족 장비</span>' +
'<div class="stat-value stat-value-danger">' + (serverStatusGroups.underSpec + serverStatusGroups.inactive) + '<span style="font-size:1rem; font-weight:600; color:#64748B;">대</span></div>' +
'<div style="font-size: 0.75rem; color:#94A3B8; margin-top: 0.5rem;">자원 부족 ' + serverStatusGroups.underSpec + '대 / 방치 장비 ' + serverStatusGroups.inactive + '대 &nbsp;▸ 클릭시 목록보기</div>' +
'</div>' +
'</div>' +
// 차트 영역 (3열)
'<div class="dashboard-layout-3col" style="margin-bottom: 2rem;">' +
'<div class="dashboard-card">' +
'<h4 class="dashboard-section-title">서비스 유형 분포</h4>' +
'<div><canvas id="chart-server-service"></canvas></div>' +
'</div>' +
'<div class="dashboard-card">' +
'<h4 class="dashboard-section-title">용도별 서버 자원 과부족 현황</h4>' +
'<div><canvas id="chart-total-server-mismatch-by-purpose"></canvas></div>' +
'</div>' +
'<div class="dashboard-card">' +
'<h4 class="dashboard-section-title">서버 적정성 분석</h4>' +
'<div><canvas id="chart-server-status"></canvas></div>' +
'</div>' +
'</div>' +
'</div>' +
// ── SLIDE 4: ALL DETAILS EXECUTIVE CARDS ──
'<div class="dashboard-slide">' +
'<h3 class="dashboard-section-title" style="color:#0F172A; border-bottom:2px solid #E2E8F0; display:inline-block; margin-bottom:0.5rem; font-size:1.3rem; padding-bottom:0.25rem;">📋 전사 PC 및 서버 상세 현황 (종합 상황판)</h3>' +
// 세로로 분할된 2열 구조 컨테이너 (140% 내용 확대)
'<div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.75rem; flex: 1; min-height: 0; zoom: 1.4;">' +
// 왼쪽 열: PC 현황 (height: 100% 적용)
'<div style="display: flex; flex-direction: column; gap: 0.5rem; background: rgba(255,255,255,0.45); border-radius: 12px; padding: 0.5rem; border: 1px solid rgba(99,102,241,0.12); box-sizing: border-box; min-height: 0; height: 100%;">' +
'<h4 style="font-size: 0.9rem; font-weight: 800; color: #1E293B; margin: 0 0 2px 0; display: flex; align-items: center; gap: 0.25rem;">' +
'<i data-lucide="monitor" style="width:15px; height:15px; color:#3B82F6;"></i> PC 현황 요약' +
'</h4>' +
// 1행: PC KPI 카드 3개 가로 배치
'<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.2rem;">' +
'<div class="stat-card" style="padding: 0.55rem 0.65rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(99,102,241,0.05);">' +
'<div style="background: rgba(59,130,246,0.1); color: #3B82F6; padding: 0.35rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="monitor" style="width: 15px; height: 15px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.68rem; color: #64748B; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">평균 PC 점수</span>' +
'<div class="stat-value" style="font-size: 1.15rem; font-weight: 800; color: #1E293B; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + overallPcAvg + '<span style="font-size:0.75rem; font-weight:600; color:#64748B; margin-left: 2px;">점</span></div>' +
'</div>' +
'</div>' +
'<div class="stat-card" id="kpi-under-spec-4p" style="cursor:pointer; padding: 0.55rem 0.65rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(239,68,68,0.1);">' +
'<div style="background: rgba(239,68,68,0.1); color: #EF4444; padding: 0.35rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="trending-down" style="width: 15px; height: 15px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.68rem; color: #EF4444; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">사양 부족(교체)</span>' +
'<div class="stat-value" style="font-size: 1.15rem; font-weight: 800; color: #EF4444; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + underSpecCount + '<span style="font-size:0.75rem; font-weight:600; color:#EF4444; margin-left: 2px;">명</span></div>' +
'</div>' +
'</div>' +
'<div class="stat-card" id="kpi-over-spec-4p" style="cursor:pointer; padding: 0.55rem 0.65rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.45rem; border: 1px solid rgba(245,158,11,0.1);">' +
'<div style="background: rgba(245,158,11,0.1); color: #F59E0B; padding: 0.35rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="trending-up" style="width: 15px; height: 15px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.68rem; color: #F59E0B; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">오버스펙(회수)</span>' +
'<div class="stat-value" style="font-size: 1.15rem; font-weight: 800; color: #F59E0B; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + overSpecCount + '<span style="font-size:0.75rem; font-weight:600; color:#64748B; margin-left: 2px;">명</span></div>' +
'</div>' +
'</div>' +
'</div>' +
// 2행: PC 그래프 2개 가로 배치
'<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; flex: 1; min-height: 0;">' +
'<div class="dashboard-card" style="min-height: unset; height: 100%; padding: 0.4rem 0.6rem; border-radius: 8px; display:flex; flex-direction:column; background: rgba(255, 255, 255, 0.85); margin-bottom: 0;">' +
'<h5 style="font-size: 0.75rem; font-weight: 800; margin: 0 0 2px 0; color: #475569;">직무별 평균 PC 사양 점수</h5>' +
'<div style="flex: 1; min-height: 0; position: relative;"><canvas id="chart-job-scores-4p" style="position: absolute; top:0; left:0; width:100%; height:100%;"></canvas></div>' +
'</div>' +
'<div class="dashboard-card" style="min-height: unset; height: 100%; padding: 0.4rem 0.6rem; border-radius: 8px; display:flex; flex-direction:column; background: rgba(255, 255, 255, 0.85); margin-bottom: 0;">' +
'<h5 style="font-size: 0.75rem; font-weight: 800; margin: 0 0 2px 0; color: #475569;">가족사별 PC 사양 현황</h5>' +
'<div style="flex: 1; min-height: 0; position: relative;"><canvas id="chart-corp-scores-4p" style="position: absolute; top:0; left:0; width:100%; height:100%;"></canvas></div>' +
'</div>' +
'</div>' +
'</div>' +
// 오른쪽 열: 서버 현황 (height: 100% 적용)
'<div style="display: flex; flex-direction: column; gap: 0.5rem; background: rgba(255,255,255,0.45); border-radius: 12px; padding: 0.5rem; border: 1px solid rgba(16,185,129,0.12); box-sizing: border-box; min-height: 0; height: 100%;">' +
'<h4 style="font-size: 0.9rem; font-weight: 800; color: #1E293B; margin: 0 0 2px 0; display: flex; align-items: center; gap: 0.25rem;">' +
'<i data-lucide="activity" style="width:15px; height:15px; color:#10B981;"></i> 서버 및 인프라 현황 요약' +
'</h4>' +
// 1행: 서버 KPI 카드 4개 가로 배치
'<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-bottom: 0.2rem;">' +
'<div class="stat-card" id="kpi-server-total-4p" style="cursor:pointer; padding: 0.55rem 0.6rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(16,185,129,0.05);">' +
'<div style="background: rgba(59,130,246,0.1); color: #3B82F6; padding: 0.3rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="monitor" style="width: 14px; height: 14px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.65rem; color: #64748B; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">총 서버 수량</span>' +
'<div class="stat-value" style="font-size: 1.1rem; font-weight: 800; color: #1E293B; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + servers.length + '<span style="font-size:0.7rem; font-weight:600; color:#64748B; margin-left: 2px;">대</span></div>' +
'</div>' +
'</div>' +
'<div class="stat-card" id="kpi-server-external-4p" style="cursor:pointer; padding: 0.55rem 0.6rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(16,185,129,0.05);">' +
'<div style="background: rgba(16,185,129,0.1); color: #10B981; padding: 0.3rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="activity" style="width: 14px; height: 14px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.65rem; color: #10B981; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">외부 서비스</span>' +
'<div class="stat-value" style="font-size: 1.1rem; font-weight: 800; color: #10B981; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + Math.round((serverServiceGroups.external / servers.length) * 100) + '<span style="font-size:0.7rem; font-weight:600; color:#64748B; margin-left: 2px;">%</span></div>' +
'</div>' +
'</div>' +
'<div class="stat-card" id="kpi-server-overspec-4p" style="cursor:pointer; padding: 0.55rem 0.6rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(245,158,11,0.1);">' +
'<div style="background: rgba(245,158,11,0.1); color: #F59E0B; padding: 0.35rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="trending-up" style="width: 14px; height: 14px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.65rem; color: #F59E0B; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">자원 과잉</span>' +
'<div class="stat-value" style="font-size: 1.1rem; font-weight: 800; color: #F59E0B; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + serverStatusGroups.overSpec + '<span style="font-size:0.7rem; font-weight:600; color:#64748B; margin-left: 2px;">대</span></div>' +
'</div>' +
'</div>' +
'<div class="stat-card" id="kpi-server-critical-4p" style="cursor:pointer; padding: 0.55rem 0.6rem; min-height: unset; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(239,68,68,0.1);">' +
'<div style="background: rgba(239,68,68,0.1); color: #EF4444; padding: 0.35rem; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;"><i data-lucide="trending-down" style="width: 14px; height: 14px;"></i></div>' +
'<div style="display: flex; flex-direction: column; min-width: 0;">' +
'<span class="stat-label" style="font-size: 0.65rem; color: #EF4444; font-weight: 600; margin-bottom: 1px; letter-spacing: 0;">자원 부족</span>' +
'<div class="stat-value" style="font-size: 1.1rem; font-weight: 800; color: #EF4444; margin-top: 0; line-height: 1.2; display: flex; align-items: baseline; background: none; -webkit-text-fill-color: initial;">' + (serverStatusGroups.underSpec + serverStatusGroups.inactive) + '<span style="font-size:0.7rem; font-weight:600; color:#EF4444; margin-left: 2px;">대</span></div>' +
'</div>' +
'</div>' +
'</div>' +
// 2행: 서버 그래프 2개 가로 배치
'<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; flex: 1; min-height: 0;">' +
'<div class="dashboard-card" style="min-height: unset; height: 100%; padding: 0.4rem 0.6rem; border-radius: 8px; display:flex; flex-direction:column; background: rgba(255, 255, 255, 0.85); margin-bottom: 0;">' +
'<h5 style="font-size: 0.75rem; font-weight: 800; margin: 0 0 2px 0; color: #475569;">용도별 서버 자원 과부족 현황</h5>' +
'<div style="flex: 1; min-height: 0; position: relative;"><canvas id="chart-total-server-mismatch-by-purpose-4p" style="position: absolute; top:0; left:0; width:100%; height:100%;"></canvas></div>' +
'</div>' +
'<div class="dashboard-card" style="min-height: unset; height: 100%; padding: 0.4rem 0.6rem; border-radius: 8px; display:flex; flex-direction:column; background: rgba(255, 255, 255, 0.85); margin-bottom: 0;">' +
'<h5 style="font-size: 0.75rem; font-weight: 800; margin: 0 0 2px 0; color: #475569;">서버 적정성 분석</h5>' +
'<div style="flex: 1; min-height: 0; position: relative;"><canvas id="chart-server-status-4p" style="position: absolute; top:0; left:0; width:100%; height:100%;"></canvas></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
// --- INIT ---
setTimeout(() => {
if (window.lucide) {
window.lucide.createIcons();
} else {
createIcons({ icons: { DollarSign, Monitor, AlertTriangle, Activity, ChevronLeft, ChevronRight, UserCheck, TrendingUp, TrendingDown, Building2, X, FileText } });
}
initCharts(
jobScores,
recommendedScores,
corpScores,
serverAgeGroups,
serverServiceGroups,
serverStatusGroups,
purposeServerUnders,
purposeServerOvers,
totalCheckout,
totalReturn,
totalMove
);
// 기획서 보기 버튼 클릭 이벤트 바인딩
const btnProposal = document.getElementById('btn-open-proposal');
if (btnProposal) {
btnProposal.addEventListener('click', () => {
window.open('/PC_사양_적정성_분석_기획서.html', '_blank');
});
}
// 서버 테이블 행 클릭
container.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', () => {
const id = row.getAttribute('data-id');
const asset = allHw.find(h => h.id === id);
if (asset) openHwModal(asset, 'view');
});
});
// KPI 카드 클릭 → 모달
const kpiUnder = document.getElementById('kpi-under-spec');
const kpiOver = document.getElementById('kpi-over-spec');
if (kpiUnder) kpiUnder.addEventListener('click', () => showSpecMismatchModal(criticalPcList, jobScores, allHw, '사양 부족'));
if (kpiOver) kpiOver.addEventListener('click', () => showSpecMismatchModal(criticalPcList, jobScores, allHw, '오버스펙'));
// 서버 KPI 카드 클릭 → 모달 연동
const kpiSvrTotal = document.getElementById('kpi-server-total');
const kpiSvrExternal = document.getElementById('kpi-server-external');
const kpiSvrOverspec = document.getElementById('kpi-server-overspec');
const kpiSvrCritical = document.getElementById('kpi-server-critical');
if (kpiSvrTotal) kpiSvrTotal.addEventListener('click', () => showServerStatusModal(servers, allHw, '전체 서버 및 공용 장비 목록'));
if (kpiSvrExternal) kpiSvrExternal.addEventListener('click', () => showServerStatusModal(servers.filter(s => s.service_type === '외부서비스'), allHw, '외부 운영 서비스 장비 목록'));
if (kpiSvrOverspec) kpiSvrOverspec.addEventListener('click', () => showServerStatusModal(servers.filter(s => s._server_status === '자원 과잉'), allHw, '자원 과잉 장비 목록'));
if (kpiSvrCritical) kpiSvrCritical.addEventListener('click', () => showServerStatusModal(servers.filter(s => s._server_status === '자원 부족' || s._server_status === '방치 의심'), allHw, '자원 부족 및 방치 의심 장비 목록'));
// Slider
const track = document.getElementById('dashboard-slider-track') as HTMLElement;
const btnPrev = document.getElementById('slider-prev') as HTMLButtonElement;
const btnNext = document.getElementById('slider-next') as HTMLButtonElement;
const indicator = document.getElementById('slider-indicator') as HTMLElement;
let currentSlide = 0;
const totalSlides = 4;
const updateSlider = () => {
track.style.transform = 'translateX(-' + (currentSlide * 25) + '%)';
btnPrev.disabled = currentSlide === 0;
btnNext.disabled = currentSlide === totalSlides - 1;
indicator.textContent = (currentSlide + 1) + ' / ' + totalSlides;
};
if (btnPrev) btnPrev.addEventListener('click', () => { if (currentSlide > 0) { currentSlide--; updateSlider(); } });
if (btnNext) btnNext.addEventListener('click', () => { if (currentSlide < totalSlides - 1) { currentSlide++; updateSlider(); } });
// 4p KPI 카드 클릭 → 모달 연동
const kpiUnder4p = document.getElementById('kpi-under-spec-4p');
const kpiOver4p = document.getElementById('kpi-over-spec-4p');
if (kpiUnder4p) kpiUnder4p.addEventListener('click', () => showSpecMismatchModal(criticalPcList, jobScores, allHw, '사양 부족'));
if (kpiOver4p) kpiOver4p.addEventListener('click', () => showSpecMismatchModal(criticalPcList, jobScores, allHw, '오버스펙'));
const kpiSvrTotal4p = document.getElementById('kpi-server-total-4p');
const kpiSvrExternal4p = document.getElementById('kpi-server-external-4p');
const kpiSvrOverspec4p = document.getElementById('kpi-server-overspec-4p');
const kpiSvrCritical4p = document.getElementById('kpi-server-critical-4p');
if (kpiSvrTotal4p) kpiSvrTotal4p.addEventListener('click', () => showServerStatusModal(servers, allHw, '전체 서버 및 공용 장비 목록'));
if (kpiSvrExternal4p) kpiSvrExternal4p.addEventListener('click', () => showServerStatusModal(servers.filter(s => s.service_type === '외부서비스'), allHw, '외부 운영 서비스 장비 목록'));
if (kpiSvrOverspec4p) kpiSvrOverspec4p.addEventListener('click', () => showServerStatusModal(servers.filter(s => s._server_status === '자원 과잉'), allHw, '자원 과잉 장비 목록'));
if (kpiSvrCritical4p) kpiSvrCritical4p.addEventListener('click', () => showServerStatusModal(servers.filter(s => s._server_status === '자원 부족' || s._server_status === '방치 의심'), allHw, '자원 부족 및 방치 의심 장비 목록'));
}, 100);
}
// ─── CHART INIT ───
function initCharts(
jobScores: any,
recommendedScores: any,
corpScores: any,
ageGroups: any,
serviceGroups: any,
statusGroups: any,
purposeServerUnders?: any,
purposeServerOvers?: any,
totalCheckout?: number,
totalReturn?: number,
totalMove?: number
) {
// 직무별 점수
const jobCtx = document.getElementById('chart-job-scores') as HTMLCanvasElement;
if (jobCtx && typeof Chart !== 'undefined') {
const labels = Object.keys(jobScores).sort((a, b) => jobScores[b].avg - jobScores[a].avg);
const avgData = labels.map(l => Math.round(jobScores[l].avg));
const recomData = labels.map(l => recommendedScores[l] || 0);
if (jobChartInstance) {
jobChartInstance.destroy();
jobChartInstance = null;
}
jobChartInstance = new Chart(jobCtx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
type: 'line',
label: '권장 목표 점수',
data: recomData,
borderColor: '#EF4444',
borderWidth: 2,
borderDash: [5, 5],
fill: false,
pointBackgroundColor: '#EF4444',
order: 1
},
{
type: 'bar',
label: '평균 PC 사양 점수',
data: avgData,
backgroundColor: '#6366F1',
borderRadius: 6,
order: 2
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 12,
usePointStyle: true
}
}
},
scales: {
y: { beginAtZero: true, max: 100, grid: { color: '#F1F5F9' }, border: { display: false } },
x: { grid: { display: false }, border: { display: false } }
},
animation: { duration: 1000, easing: 'easeOutQuart' }
}
});
}
// 가족사별 사양 부족/오버스펙 인원 (Bar)
const corpCtx = document.getElementById('chart-corp-scores') as HTMLCanvasElement;
if (corpCtx && typeof Chart !== 'undefined') {
new Chart(corpCtx, {
type: 'bar',
data: {
labels: corpScores.labels,
datasets: [
{ label: '사양 부족', data: corpScores.unders, backgroundColor: '#E11D48', borderRadius: 4 },
{ label: '오버스펙', data: corpScores.overs, backgroundColor: '#F59E0B', borderRadius: 4 }
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true, boxWidth: 8 } }
},
scales: {
y: { beginAtZero: true, ticks: { stepSize: 1 }, grid: { color: '#F1F5F9' }, border: { display: false }, title: { display: true, text: '인원(명)', color: '#94A3B8', font: { size: 11 } } },
x: { grid: { display: false }, border: { display: false } }
},
animation: { duration: 1500, easing: 'easeOutQuart' }
}
});
}
// 서버 노후도 분포 (Doughnut)
const agingCtx = document.getElementById('chart-server-aging') as HTMLCanvasElement;
if (agingCtx && typeof Chart !== 'undefined') {
new Chart(agingCtx, {
type: 'doughnut',
data: {
labels: ['안정 (3년 미만)', '주의 (3~5년)', '위험 (5년 이상)'],
datasets: [{ data: [ageGroups.stable, ageGroups.warning, ageGroups.critical], backgroundColor: ['#10B981', '#F59E0B', '#E11D48'], borderWidth: 0, hoverOffset: 8 }]
},
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { position: 'bottom', labels: { padding: 10, usePointStyle: true, boxWidth: 10 } } },
cutout: '75%', animation: { animateScale: true, animateRotate: true }
}
});
}
// 서비스 유형 분포 (Doughnut)
const serviceCtx = document.getElementById('chart-server-service') as HTMLCanvasElement;
if (serviceCtx && typeof Chart !== 'undefined') {
new Chart(serviceCtx, {
type: 'doughnut',
data: {
labels: ['내부인프라/백업', '외부서비스/운영', '회의용/공용'],
datasets: [{
data: [serviceGroups.internal, serviceGroups.external, serviceGroups.public],
backgroundColor: ['#6366F1', '#10B981', '#F59E0B'],
borderWidth: 0,
hoverOffset: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { padding: 10, usePointStyle: true, boxWidth: 10 } }
},
cutout: '75%',
animation: { animateScale: true, animateRotate: true }
}
});
}
// 자원 적정성 상태 분포 (Bar)
const statusCtx = document.getElementById('chart-server-status') as HTMLCanvasElement;
if (statusCtx && typeof Chart !== 'undefined') {
new Chart(statusCtx, {
type: 'bar',
data: {
labels: ['적정', '자원 부족', '자원 과잉', '방치 의심'],
datasets: [{
label: '장비 수(대)',
data: [statusGroups.optimal, statusGroups.underSpec, statusGroups.overSpec, statusGroups.inactive],
backgroundColor: ['#10B981', '#EF4444', '#F59E0B', '#64748B'],
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: { beginAtZero: true, ticks: { stepSize: 5 }, grid: { color: '#F1F5F9' }, border: { display: false } },
x: { grid: { display: false }, border: { display: false } }
}
}
});
}
// ─── 종합 대시보드 차트 초기화 ───
// 1. 가족사별 PC 사양 과부족 현황 (Grouped Bar Chart)
const totalPcMismatchCtx = document.getElementById('chart-total-pc-mismatch-by-corp') as HTMLCanvasElement;
if (totalPcMismatchCtx && typeof Chart !== 'undefined' && corpScores) {
if (totalPcMismatchByCorpChartInstance) {
totalPcMismatchByCorpChartInstance.destroy();
totalPcMismatchByCorpChartInstance = null;
}
totalPcMismatchByCorpChartInstance = new Chart(totalPcMismatchCtx, {
type: 'bar',
data: {
labels: corpScores.labels,
datasets: [
{
label: '사양 부족 (명)',
data: corpScores.unders,
backgroundColor: '#E11D48',
borderRadius: 4
},
{
label: '오버스펙 (명)',
data: corpScores.overs,
backgroundColor: '#F59E0B',
borderRadius: 4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 10,
usePointStyle: true,
boxWidth: 10
}
}
},
scales: {
x: {
grid: { display: false },
border: { display: false }
},
y: {
beginAtZero: true,
ticks: { stepSize: 1 },
grid: { color: '#F1F5F9' },
border: { display: false },
title: {
display: true,
text: '인원(명)',
color: '#94A3B8',
font: { size: 11 }
}
}
},
animation: {
duration: 1200,
easing: 'easeOutQuart'
}
}
});
}
// 2. 용도별 서버 자원 과부족 현황 (Grouped Bar Chart)
const totalServerMismatchCtx = document.getElementById('chart-total-server-mismatch-by-purpose') as HTMLCanvasElement;
if (totalServerMismatchCtx && typeof Chart !== 'undefined' && purposeServerUnders && purposeServerOvers) {
if (totalServerMismatchByPurposeChartInstance) {
totalServerMismatchByPurposeChartInstance.destroy();
totalServerMismatchByPurposeChartInstance = null;
}
totalServerMismatchByPurposeChartInstance = new Chart(totalServerMismatchCtx, {
type: 'bar',
data: {
labels: ['개발/테스트', '서비스/웹/WAS', 'DB/스토리지', '해석/분석/AI', '백업/관리/보안', '기타/일반'],
datasets: [
{
label: '자원 부족 (대)',
data: purposeServerUnders,
backgroundColor: '#EF4444',
borderRadius: 4
},
{
label: '자원 과잉 (대)',
data: purposeServerOvers,
backgroundColor: '#F59E0B',
borderRadius: 4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 10,
usePointStyle: true,
boxWidth: 10
}
}
},
scales: {
x: {
grid: { display: false },
border: { display: false }
},
y: {
beginAtZero: true,
ticks: { stepSize: 1 },
grid: { color: '#F1F5F9' },
border: { display: false },
title: {
display: true,
text: '장비 수(대)',
color: '#94A3B8',
font: { size: 11 }
}
}
},
animation: {
duration: 1200,
easing: 'easeOutQuart'
}
}
});
}
// ─── 4페이지(종합 카드판) 차트 초기화 ───
// 1. 직무별 평균 PC 사양 점수 (4p)
const jobCtx4p = document.getElementById('chart-job-scores-4p') as HTMLCanvasElement;
if (jobCtx4p && typeof Chart !== 'undefined') {
const labels = Object.keys(jobScores).sort((a, b) => jobScores[b].avg - jobScores[a].avg);
const avgData = labels.map(l => Math.round(jobScores[l].avg));
const recomData = labels.map(l => recommendedScores[l] || 0);
if (jobChartInstance4p) {
jobChartInstance4p.destroy();
jobChartInstance4p = null;
}
jobChartInstance4p = new Chart(jobCtx4p, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
type: 'line',
label: '권장 목표',
data: recomData,
borderColor: '#EF4444',
borderWidth: 1.5,
borderDash: [3, 3],
fill: false,
pointBackgroundColor: '#EF4444',
pointRadius: 2,
order: 1
},
{
type: 'bar',
label: '평균 PC 점수',
data: avgData,
backgroundColor: '#6366F1',
borderRadius: 4,
order: 2
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: { boxWidth: 8, usePointStyle: true, font: { size: 9 }, padding: 4 }
}
},
scales: {
y: { beginAtZero: true, max: 100, ticks: { font: { size: 8.5 } }, grid: { color: '#F1F5F9' }, border: { display: false } },
x: { ticks: { font: { size: 8.5 } }, grid: { display: false }, border: { display: false } }
},
animation: { duration: 800, easing: 'easeOutQuart' }
}
});
}
// 2. 가족사별 PC 사양 현황 (4p)
const corpCtx4p = document.getElementById('chart-corp-scores-4p') as HTMLCanvasElement;
if (corpCtx4p && typeof Chart !== 'undefined') {
if (corpChartInstance4p) {
corpChartInstance4p.destroy();
corpChartInstance4p = null;
}
corpChartInstance4p = new Chart(corpCtx4p, {
type: 'bar',
data: {
labels: corpScores.labels,
datasets: [
{ label: '부족', data: corpScores.unders, backgroundColor: '#E11D48', borderRadius: 3 },
{ label: '과잉', data: corpScores.overs, backgroundColor: '#F59E0B', borderRadius: 3 }
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { padding: 4, usePointStyle: true, boxWidth: 6, font: { size: 9 } } }
},
scales: {
y: { beginAtZero: true, ticks: { stepSize: 1, font: { size: 8.5 } }, grid: { color: '#F1F5F9' }, border: { display: false } },
x: { ticks: { font: { size: 8.5 } }, grid: { display: false }, border: { display: false } }
},
animation: { duration: 1000, easing: 'easeOutQuart' }
}
});
}
// 3. 용도별 서버 자원 과부족 현황 (4p)
const totalServerMismatchCtx4p = document.getElementById('chart-total-server-mismatch-by-purpose-4p') as HTMLCanvasElement;
if (totalServerMismatchCtx4p && typeof Chart !== 'undefined' && purposeServerUnders && purposeServerOvers) {
if (totalServerMismatchByPurposeChartInstance4p) {
totalServerMismatchByPurposeChartInstance4p.destroy();
totalServerMismatchByPurposeChartInstance4p = null;
}
totalServerMismatchByPurposeChartInstance4p = new Chart(totalServerMismatchCtx4p, {
type: 'bar',
data: {
labels: ['개발/테스트', '웹/WAS', 'DB/스토리지', '해석/AI', '백업/보안', '기타'],
datasets: [
{
label: '부족',
data: purposeServerUnders,
backgroundColor: '#EF4444',
borderRadius: 3
},
{
label: '과잉',
data: purposeServerOvers,
backgroundColor: '#F59E0B',
borderRadius: 3
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: { padding: 4, usePointStyle: true, boxWidth: 6, font: { size: 9 } }
}
},
scales: {
x: { ticks: { font: { size: 8.5 } }, grid: { display: false }, border: { display: false } },
y: {
beginAtZero: true,
ticks: { stepSize: 1, font: { size: 8.5 } },
grid: { color: '#F1F5F9' },
border: { display: false }
}
},
animation: { duration: 1000, easing: 'easeOutQuart' }
}
});
}
// 5. 서버/공용PC 적정성 분석 (4p)
const statusCtx4p = document.getElementById('chart-server-status-4p') as HTMLCanvasElement;
if (statusCtx4p && typeof Chart !== 'undefined') {
if (serverStatusChartInstance4p) {
serverStatusChartInstance4p.destroy();
serverStatusChartInstance4p = null;
}
serverStatusChartInstance4p = new Chart(statusCtx4p, {
type: 'bar',
data: {
labels: ['적정', '부족', '과잉', '방치'],
datasets: [{
label: '수량',
data: [statusGroups.optimal, statusGroups.underSpec, statusGroups.overSpec, statusGroups.inactive],
backgroundColor: ['#10B981', '#EF4444', '#F59E0B', '#64748B'],
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: { beginAtZero: true, ticks: { stepSize: 5, font: { size: 8.5 } }, grid: { color: '#F1F5F9' }, border: { display: false } },
x: { ticks: { font: { size: 8.5 } }, grid: { display: false }, border: { display: false } }
}
}
});
}
// PC 유동 비율 도넛 차트
const flowCtx = document.getElementById('chart-pc-flow-stats') as HTMLCanvasElement;
if (flowCtx && typeof Chart !== 'undefined') {
const tCheckout = totalCheckout || 0;
const tReturn = totalReturn || 0;
const tMove = totalMove || 0;
if (pcFlowChartInstance) {
pcFlowChartInstance.destroy();
pcFlowChartInstance = null;
}
pcFlowChartInstance = new Chart(flowCtx, {
type: 'doughnut',
data: {
labels: ['불출', '입고(반납)', '이동(이관)'],
datasets: [{
data: [tCheckout, tReturn, tMove],
backgroundColor: ['#3B82F6', '#10B981', '#F59E0B'],
borderWidth: 0,
hoverOffset: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { padding: 10, usePointStyle: true, boxWidth: 10 } }
},
cutout: '75%',
animation: { animateScale: true, animateRotate: true }
}
});
}
}
Reference in New Issue View Git Blame Copy Permalink