${title} 자산 목록
${list.length}대
| 사용자 |
조직 (직무) |
주요 사양 |
자산코드 |
${list.length === 0
? `| 해당 등급의 자산이 없습니다. |
`
: list.map(pc => {
const spec = `${pc.cpu || ''} / ${pc.ram || ''} / ${pc.gpu || '-'}`;
const user = pc.user_current || '(재고)';
return `
| ${user} |
${pc.current_dept || '-'} (${pc.user_position || '-'}) |
${spec} |
${pc.asset_code || '-'} |
`;
}).join('')
}
`;
const style = document.createElement('style');
style.innerHTML = `
@keyframes modalFadeIn {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
`;
modal.appendChild(style);
document.body.appendChild(modal);
const closeModal = () => { modal.remove(); };
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
document.getElementById('btn-close-mini-modal')?.addEventListener('click', closeModal);
document.getElementById('btn-confirm-mini-modal')?.addEventListener('click', closeModal);
modal.querySelectorAll('.mini-modal-row').forEach(row => {
row.addEventListener('click', () => {
const id = row.getAttribute('data-id');
const asset = list.find(p => String(p.id) === String(id));
if (asset) {
closeModal();
openHwModal(asset, 'view');
}
});
});
}
/**
* Chart.js 가로형 100% 스택 막대 차트 (라이트 테마 튜닝)
*/
function renderChart(labels: string[], underData: number[], normalData: number[], overData: number[], currentFiltered: any[]) {
const ctx = document.getElementById('chart-job-scores') as HTMLCanvasElement;
if (!ctx || typeof Chart === 'undefined') return;
if (jobChartInstance) {
jobChartInstance.destroy();
jobChartInstance = null;
}
jobChartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: '사양 부족',
data: underData,
backgroundColor: 'rgba(239, 68, 68, 0.85)', // Rose Red
borderColor: 'rgb(239, 68, 68)',
borderWidth: 1,
borderRadius: 4,
barPercentage: 0.45,
categoryPercentage: 0.8
},
{
label: '적정 사양',
data: normalData,
backgroundColor: 'rgba(30, 81, 73, 0.85)', // Hanmac Green
borderColor: 'rgb(30, 81, 73)',
borderWidth: 1,
borderRadius: 4,
barPercentage: 0.45,
categoryPercentage: 0.8
},
{
label: '오버스펙',
data: overData,
backgroundColor: 'rgba(217, 119, 6, 0.85)', // Amber Orange
borderColor: 'rgb(217, 119, 6)',
borderWidth: 1,
borderRadius: 4,
barPercentage: 0.45,
categoryPercentage: 0.8
}
]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
onHover: (event: any, activeElements: any[]) => {
event.chart.canvas.style.cursor = activeElements.length ? 'pointer' : 'default';
},
onClick: (event: any, activeElements: any[]) => {
if (activeElements && activeElements.length > 0) {
const activeElement = activeElements[0];
const datasetIndex = activeElement.datasetIndex; // 0: 사양 부족, 1: 적정 사양, 2: 오버스펙
const index = activeElement.index; // 직무군 인덱스
const clickedJob = labels[index];
const statusLabels = ['사양 부족', '적정', '오버스펙'];
const clickedStatus = statusLabels[datasetIndex] || '적정';
// 해당 직무군과 사양 상태가 매칭되는 자산 목록 필터링
const matchedPcs = currentFiltered.filter((p: any) => {
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
if (job !== clickedJob) return false;
const stockYn = p.hw_status === '재고' ||
p.hw_status === '대기' ||
!(p.user_current || '').trim();
let specStatus = '적정';
if (!stockYn) {
specStatus = p._spec_status || '적정';
}
return specStatus === clickedStatus;
});
showMiniListModal(`${clickedJob} - ${clickedStatus === '적정' ? '적정 사양' : clickedStatus} 자산`, matchedPcs);
}
},
plugins: {
legend: {
position: 'top',
align: 'end',
labels: {
font: { family: 'Pretendard', size: 11, weight: '700' },
color: '#475569',
boxWidth: 8,
boxHeight: 8,
usePointStyle: true
}
},
tooltip: {
titleFont: { family: 'Pretendard', size: 12, weight: '700' },
bodyFont: { family: 'Pretendard', size: 12 },
callbacks: {
label: function (context: any) {
const datasetLabel = context.dataset.label;
const value = context.raw; // 실제 대수
const total = context.chart.data.datasets.reduce((sum: number, dataset: any) => sum + dataset.data[context.dataIndex], 0);
const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
return `${datasetLabel}: ${value}대 (${percentage}%)`;
}
}
}
},
scales: {
x: {
stacked: true,
ticks: {
callback: (val: any) => `${val}대`,
font: { family: 'Pretendard', size: 10, weight: '600' },
color: '#64748B'
},
grid: { color: '#EEF2F6' }
},
y: {
stacked: true,
ticks: {
font: { family: 'Pretendard', size: 11, weight: '700' },
color: '#475569'
},
grid: { display: false }
}
}
}
});
}
/**
* 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)
*/
function renderDonutChart(premium: number, high: number, normal: number, entry: number) {
const ctx = document.getElementById('chart-overall-donut') as HTMLCanvasElement;
if (!ctx || typeof Chart === 'undefined') return;
if (donutChartInstance) {
donutChartInstance.destroy();
donutChartInstance = null;
}
const total = premium + high + normal + entry;
donutChartInstance = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['최상급', '상급', '중급', '보급'],
datasets: [{
data: [premium, high, normal, entry],
backgroundColor: [
'#11302B', // premium (Hanmac Dark Green)
'#1E8E7C', // high (Hanmac Teal)
'#10B981', // normal (Hanmac Mint)
'#94A3B8' // entry (Slate Gray)
],
borderColor: '#ffffff',
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: { display: false },
tooltip: {
titleFont: { family: 'Pretendard', size: 12 },
bodyFont: { family: 'Pretendard', size: 12 },
callbacks: {
label: (context: any) => `${context.label}: ${context.raw}대`
}
}
}
}
});
// 도넛 차트 중앙에 총 자산 대수 텍스트 오버레이 배치
const parent = ctx.parentElement!;
let textOverlay = parent.querySelector('.donut-text-overlay') as HTMLElement;
if (!textOverlay) {
textOverlay = document.createElement('div');
textOverlay.className = 'donut-text-overlay';
textOverlay.style.cssText = `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -46%);
font-size: 1.56rem;
font-weight: 900;
color: #1E5149;
font-family: 'Pretendard', sans-serif;
pointer-events: none;
white-space: nowrap;
`;
parent.appendChild(textOverlay);
}
textOverlay.textContent = `총 ${total}대`;
}