Taehoon/ITAM
2
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: 통합 사양 적정성 인라인 바 그래프 및 대시보드 레이아웃 개편

Browse Source
This commit is contained in:
주완기
2026-06-17 09:22:31 +09:00
parent 723c4723f6
commit 3e69e74bc9
1 changed files with 238 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

576
src/views/Dashboard/HwDashboard.ts
View File

@@ -6,7 +6,6 @@ import { createIcons, Laptop, Cpu, Shield, Zap, Monitor, AlertTriangle, ChevronR
declare var Chart: any;
let jobChartInstance: any = null;
let donutChartInstance: any = null;
export function renderHwDashboard(container: HTMLElement) {
@@ -43,181 +42,149 @@ export function renderHwDashboard(container: HTMLElement) {
</div>
</div>
<!-- 메인 2단 컬럼 레이아웃 (5:5 비율) -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; flex: 1; min-height: 0; margin-bottom: 0.1rem;">
<!-- 상단 섹션 (전체 높이의 약 45% 차지, stat-card와 donut/aging 나열) -->
<div style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 0.5rem; height: 43%; min-height: 0; flex-shrink: 0; margin-bottom: 0.1rem;">
<!-- 좌측 컬럼 (Left Column) -->
<div style="display: flex; flex-direction: column; gap: 0.5rem; min-height: 0;">
<!-- 상단 좌측: 핵심 지표 카드 -->
<div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem;">
<!-- 핵심 지표 카드 -->
<div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.9rem; flex-shrink: 0;">
<!-- 1. 보유 자산 수량 -->
<div style="border-right: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; padding-bottom: 0.65rem; padding-right: 1.0rem;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div>
<div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1; margin-bottom: 0.35rem;">0대</div>
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">전사 보유 개인용 PC</span>
</div>
</div>
<!-- 1. 보유 자산 수량 -->
<div style="border-right: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; padding-bottom: 0.4rem; padding-right: 0.8rem; display: flex; flex-direction: column; justify-content: center;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
</div>
<!-- 2. 사양 부족 -->
<div id="card-under-spec" style="border-bottom: 1px solid #EEF2F6; padding-bottom: 0.65rem; padding-left: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div>
<div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1; margin-bottom: 0.35rem;">0대</div>
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 교체 권고 자산</span>
</div>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div id="metric-total-pcs" style="font-size: 2.1rem; font-weight: 900; color: #1E5149; line-height: 1;">0대</div>
</div>
<!-- 3. 오버 스펙 -->
<div id="card-over-spec" style="border-right: 1px solid #EEF2F6; padding-top: 0.65rem; padding-right: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div>
<div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1; margin-bottom: 0.35rem;">0대</div>
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 회수 권고 자산</span>
</div>
</div>
</div>
<!-- 4. 윈도우 11 불가 PC -->
<div id="card-win11-incompatible" style="padding-top: 0.65rem; padding-left: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div>
<div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1; margin-bottom: 0.35rem;">0대</div>
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">업데이트 미지원 하드웨어</span>
</div>
</div>
</div>
</div>
<!-- 등급별 자산 종합 현황 (좌측 하단 단독 배치 및 크기 확대) -->
<div style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.0; min-height: 0;">
<div style="display: flex; flex-direction: column; gap: 0.9rem; justify-content: flex-start; padding-left: 0.5rem; height: 100%;">
<!-- 메인 제목 -->
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.4rem; display: flex; align-items: center; line-height: 1; height: 1.7rem; flex-shrink: 0;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황</span>
</div>
<!-- 종합 매트릭스 테이블 (폰트 크기 1.25rem 으로 확대 및 꽉 채우기) -->
<div style="width: 100%; overflow-x: auto; flex: 1; display: flex; align-items: stretch;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.25rem; height: 100%;">
<thead>
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
<th style="padding: 14px 10px; width: 32%; font-size: 1.25rem;">구분 (등급)</th>
<th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">보유량</th>
<th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">운영중</th>
<th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">재고</th>
<th style="padding: 14px 10px; text-align: center; width: 17%; color: #EF4444; font-size: 1.25rem;">구매 필요</th>
</tr>
</thead>
<tbody id="pc-grade-matrix-tbody">
<!-- Dynamic Matrix Contents -->
</tbody>
</table>
</div>
<!-- 2. 사양 부족 -->
<div id="card-under-spec" style="border-bottom: 1px solid #EEF2F6; padding-bottom: 0.4rem; padding-left: 0.8rem; cursor: pointer; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: center;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div id="metric-under-spec" style="font-size: 2.1rem; font-weight: 900; color: #EF4444; line-height: 1;">0대</div>
</div>
</div>
<!-- 3. 오버 스펙 -->
<div id="card-over-spec" style="border-right: 1px solid #EEF2F6; padding-top: 0.4rem; padding-right: 0.8rem; cursor: pointer; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: center;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div id="metric-over-spec" style="font-size: 2.1rem; font-weight: 900; color: #F59E0B; line-height: 1;">0대</div>
</div>
</div>
<!-- 4. 윈도우 11 불가 PC -->
<div id="card-win11-incompatible" style="padding-top: 0.4rem; padding-left: 0.8rem; cursor: pointer; transition: opacity 0.2s; display: flex; flex-direction: column; justify-content: center;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1;">
<span style="font-size: 1.05rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
</div>
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
<div id="metric-win11-incompatible" style="font-size: 2.1rem; font-weight: 900; color: #3B82F6; line-height: 1;">0대</div>
</div>
</div>
</div>
<!-- 우측 컬럼 (Right Column) -->
<div style="display: flex; flex-direction: column; gap: 0.5rem; min-height: 0;">
<!-- 상단 우측: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (가로 배치) -->
<div style="background: transparent; border-radius: 0; padding: 0.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.8rem; min-height: 0;">
<!-- 직무별 사양 적정성 분석 차트 카드 -->
<div style="background: transparent; border-radius: 0; padding: 0.7rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.0; min-height: 0;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">직무별 사양 적정성 분석</span>
<!-- 1열: 등급별 보유 비율 도넛 영역 -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; min-height: 0; height: 100%;">
<!-- 서브 제목 -->
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.2rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span style="font-size: 1.15rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span>
</div>
<div style="flex: 1; min-height: 0; width: 100%; position: relative;">
<canvas id="chart-job-scores" style="width: 100%; height: 100%;"></canvas>
<!-- 도넛 그래프 -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
<div style="width: 105px; height: 105px; position: relative;">
<canvas id="chart-overall-donut"></canvas>
</div>
<!-- 커스텀 범례 -->
<div style="display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.82rem; font-weight: 700; color: #475569; width: 100%;">
<div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #11302B;"></span>
<span>최상급</span>
</div>
<div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1E8E7C;"></span>
<span>상급</span>
</div>
<div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #10B981;"></span>
<span>중급</span>
</div>
<div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #F59E0B;"></span>
<span>보급</span>
</div>
<div style="display: flex; align-items: center; gap: 3px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #EF4444;"></span>
<span>교체 대상</span>
</div>
</div>
</div>
</div>
<!-- 우측 하단: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (너비 축소) -->
<div style="background: transparent; border-radius: 0; padding: 0.7rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1.15fr 1.25fr; gap: 0.8rem; flex: 1.0; min-height: 0;">
<!-- 1열: 등급별 보유 비율 도넛 영역 -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.7rem; padding-top: 0.1rem; min-height: 0; height: 100%;">
<!-- 서브 제목 -->
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.5rem;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span>
</div>
<!-- 도넛 그래프 (크기 조절 및 수직 가운데 정렬) -->
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
<div style="width: 180px; height: 180px; position: relative;">
<canvas id="chart-overall-donut"></canvas>
</div>
<!-- 커스텀 범례 (폰트 최적화) -->
<div style="display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; justify-content: center; align-items: center; margin-top: 10px; font-size: 1.05rem; font-weight: 700; color: #475569; width: 100%;">
<div style="display: flex; align-items: center; gap: 4px;">
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #11302B;"></span>
<span>최상급</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1E8E7C;"></span>
<span>상급</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10B981;"></span>
<span>중급</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F59E0B;"></span>
<span>보급</span>
</div>
<div style="display: flex; align-items: center; gap: 4px;">
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #EF4444;"></span>
<span>교체 대상</span>
</div>
</div>
</div>
</div>
<!-- 2열: 연도별 PC 노후도 및 교체 주기 예측 카드 (너비 줄임) -->
<div style="display: flex; flex-direction: column; min-height: 0;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.5rem;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span>
</div>
<div style="flex: 1; overflow: hidden; min-height: 0; padding-right: 0.2rem;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.15rem;">
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
<th style="padding: 12px 10px; width: 45%; font-size: 1.15rem;">구분 (연한)</th>
<th style="padding: 12px 10px; text-align: center; width: 25%; font-size: 1.15rem;">보유</th>
<th style="padding: 12px 10px; text-align: center; width: 30%; font-size: 1.15rem;">권장 조치</th>
</tr>
</thead>
<tbody id="pc-aging-tbody">
<!-- Dynamic Aging Contents -->
</tbody>
</table>
</div>
<!-- 2열: 연도별 PC 노후도 및 예측 (표) -->
<div style="display: flex; flex-direction: column; min-height: 0;">
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.3rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
<span style="font-size: 1.15rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span>
</div>
<div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.2rem;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem;">
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
<th style="padding: 6px 8px; width: 45%; font-size: 0.95rem;">구분 (연한)</th>
<th style="padding: 6px 8px; text-align: center; width: 25%; font-size: 0.95rem;">보유</th>
<th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 0.95rem;">권장 조치</th>
</tr>
</thead>
<tbody id="pc-aging-tbody">
<!-- Dynamic Aging Contents -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 하단 섹션 (등급별 자산 종합 현황 + 바 그래프, 약 53% 차지) -->
<div style="background: transparent; border-radius: 0; padding: 0.5rem 0.25rem; border: none; display: flex; flex-direction: column; height: 53%; min-height: 0;">
<div style="display: flex; flex-direction: column; gap: 0.5rem; justify-content: flex-start; padding-left: 0.5rem; height: 100%;">
<!-- 메인 제목 -->
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.2rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;">
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황 및 사양 적정성 분석</span>
</div>
<!-- 종합 매트릭스 테이블 -->
<div style="width: 100%; overflow-y: auto; flex: 1;">
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.1rem;">
<thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;">
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
<th style="padding: 10px 8px; width: 22%; font-size: 1.1rem; background: #F8FAFC;">구분 (등급)</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; font-size: 1.1rem; background: #F8FAFC;">보유량</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; font-size: 1.1rem; background: #F8FAFC;">운영중</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; font-size: 1.1rem; background: #F8FAFC;">재고</th>
<th style="padding: 10px 8px; text-align: center; width: 11%; color: #EF4444; font-size: 1.1rem; background: #F8FAFC;">구매 필요</th>
<th style="padding: 10px 8px; text-align: center; width: 34%; font-size: 1.1rem; background: #F8FAFC;">사양 적정성 분석 (직무 기준)</th>
</tr>
</thead>
<tbody id="pc-grade-matrix-tbody">
<!-- Dynamic Matrix Contents -->
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
@@ -402,21 +369,64 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
// 6. 종합 매트릭스 테이블 렌더링 및 바인딩
const matrixTbody = document.getElementById('pc-grade-matrix-tbody')!;
const getSpecStatusCounts = (activePcsList: any[]) => {
let under = 0;
let normal = 0;
let over = 0;
activePcsList.forEach(p => {
if (p._spec_status === '사양 부족') under++;
else if (p._spec_status === '오버스펙') over++;
else normal++;
});
return { under, normal, over };
};
const renderMatrixRow = (gradeKey: keyof typeof matrix, label: string, color: string, shortage: number) => {
const data = matrix[gradeKey];
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
const cellStyle = `padding: 14px 12px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.25rem;`;
const cellStyle = `padding: 10px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.1rem;`;
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
// 사양 적정성 분석 데이터 계산 (운영중인 자산만)
const { under, normal, over } = getSpecStatusCounts(data.activePcs);
const activeCount = data.active;
const underPct = activeCount > 0 ? (under / activeCount) * 100 : 0;
const normalPct = activeCount > 0 ? (normal / activeCount) * 100 : 0;
const overPct = activeCount > 0 ? (over / activeCount) * 100 : 0;
let barGraphHtml = '';
if (activeCount > 0) {
barGraphHtml = `
<div style="display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 100%;">
<div style="display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #E2E8F0; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);">
${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대 (${Math.round(underPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''}
${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대 (${Math.round(normalPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''}
${over > 0 ? `<div style="width: ${overPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대 (${Math.round(overPct)}%)" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''}
</div>
<div style="display: flex; gap: 8px; font-size: 0.8rem; font-weight: 750; color: #64748B;">
${under > 0 ? `<span style="color: #EF4444; cursor: pointer;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="사양 부족">부족 ${under}</span>` : ''}
${normal > 0 ? `<span style="color: #1E5149; cursor: pointer;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="적정">적정 ${normal}</span>` : ''}
${over > 0 ? `<span style="color: #F59E0B; cursor: pointer;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="오버스펙">오버 ${over}</span>` : ''}
</div>
</div>
`;
} else {
barGraphHtml = `<span style="font-size: 0.9rem; color: #94A3B8; font-weight: 500;">운영중 자산 없음</span>`;
}
return `
<tr style="border-bottom: 1px solid #F1F5F9;">
<td style="padding: 14px 12px; font-weight: 800; color: ${color}; font-size: 1.25rem;">${label}</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:1.0rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td>
<td style="padding: 10px 8px; font-weight: 800; color: ${color}; font-size: 1.1rem;">${label}</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.9rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="active" style="${cellStyle}" ${hoverEvents}>${data.active}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="stock" style="${cellStyle}" ${hoverEvents}>${data.stock}대</td>
<td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${shortage}대</td>
<td style="padding: 10px 8px; text-align: center; font-weight: 700; font-size: 1.1rem; vertical-align: middle;">
${barGraphHtml}
</td>
</tr>
`;
};
@@ -437,7 +447,33 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
const totalShortage = premiumShortage + highShortage + normalShortage + entryShortage + replaceShortage;
const cellStyleHeader = `padding: 14px 12px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.25rem;`;
const totalActivePcs = filtered.filter(p => !isStock(p));
const { under: totUnder, normal: totNormal, over: totOver } = getSpecStatusCounts(totalActivePcs);
const totUnderPct = totalActive > 0 ? (totUnder / totalActive) * 100 : 0;
const totNormalPct = totalActive > 0 ? (totNormal / totalActive) * 100 : 0;
const totOverPct = totalActive > 0 ? (totOver / totalActive) * 100 : 0;
let totBarGraphHtml = '';
if (totalActive > 0) {
totBarGraphHtml = `
<div style="display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 100%;">
<div style="display: flex; height: 18px; border-radius: 4px; overflow: hidden; background: #E2E8F0; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);">
${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대 (${Math.round(totUnderPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''}
${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대 (${Math.round(totNormalPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''}
${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대 (${Math.round(totOverPct)}%)" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>` : ''}
</div>
<div style="display: flex; gap: 8px; font-size: 0.8rem; font-weight: 750; color: #64748B;">
${totUnder > 0 ? `<span style="color: #EF4444; cursor: pointer;" class="spec-text-btn" data-grade="all" data-spec-status="사양 부족">부족 ${totUnder}</span>` : ''}
${totNormal > 0 ? `<span style="color: #1E5149; cursor: pointer;" class="spec-text-btn" data-grade="all" data-spec-status="적정">적정 ${totNormal}</span>` : ''}
${totOver > 0 ? `<span style="color: #F59E0B; cursor: pointer;" class="spec-text-btn" data-grade="all" data-spec-status="오버스펙">오버 ${totOver}</span>` : ''}
</div>
</div>
`;
} else {
totBarGraphHtml = `<span style="font-size: 0.9rem; color: #94A3B8; font-weight: 500;">운영중 자산 없음</span>`;
}
const cellStyleHeader = `padding: 10px 8px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.1rem;`;
const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
matrixTbody.innerHTML = `
@@ -447,11 +483,14 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)}
<tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;">
<td style="padding: 14px 12px; color: #1E293B; font-weight: 800; font-size: 1.25rem;">합계 (Total)</td>
<td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:1.125rem; color:#64748B; font-weight:600;">(100%)</span></td>
<td style="padding: 10px 8px; color: #1E293B; font-weight: 800; font-size: 1.1rem;">합계 (Total)</td>
<td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:0.95rem; color:#64748B; font-weight:600;">(100%)</span></td>
<td class="matrix-cell" data-grade="all" data-type="active" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalActive}대</td>
<td class="matrix-cell" data-grade="all" data-type="stock" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalStock}대</td>
<td class="matrix-cell" data-grade="all" data-type="under" style="${cellStyleHeader} color: #EF4444;" ${hoverEventsHeader}>${totalShortage}대</td>
<td style="padding: 10px 8px; text-align: center; font-weight: 800; font-size: 1.1rem; background: #F8FAFC; vertical-align: middle;">
${totBarGraphHtml}
</td>
</tr>
`;
@@ -509,6 +548,38 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
});
});
// 바그래프 세그먼트 또는 텍스트 클릭 리스너 설정
const handleSpecClick = (e: Event) => {
e.stopPropagation();
const target = e.currentTarget as HTMLElement;
const grade = target.getAttribute('data-grade')!;
const status = target.getAttribute('data-spec-status')!;
let targetPcs: any[] = [];
if (grade === 'all') {
targetPcs = filtered.filter(p => !isStock(p) && p._spec_status === status);
} else {
const data = matrix[grade as keyof typeof matrix];
targetPcs = data.activePcs.filter(p => p._spec_status === status);
}
const getGradeLabel = (g: string) => {
if (g === 'premium') return '최상급 PC';
if (g === 'high') return '상급 PC';
if (g === 'normal') return '중급 PC';
if (g === 'entry') return '보급 PC';
if (g === 'replace') return '교체 대상 PC';
return '전체 PC';
};
const title = `${getGradeLabel(grade)} - ${status} 자산 목록`;
showMiniListModal(title, targetPcs);
};
matrixTbody.querySelectorAll('.spec-segment-btn, .spec-text-btn').forEach(btn => {
btn.addEventListener('click', handleSpecClick);
});
// 7. 연도별 PC 노후도 집계 및 렌더링
const agingCounts = {
immediate: [] as any[], // 7년 이상
@@ -535,10 +606,10 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
const renderAgingRow = (label: string, list: any[], badgeText: string, badgeStyle: string, ageGroupKey: string) => {
return `
<tr style="border-bottom:1px solid #F1F5F9; cursor:pointer; transition: background 0.2s;" class="aging-row" data-group="${ageGroupKey}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
<td style="padding:10px 10px; font-weight:700; color:#334155; font-size: 1.15rem;">${label}</td>
<td style="padding:10px 10px; text-align:center; font-weight:700; color:#334155; font-size: 1.15rem;">${list.length}대</td>
<td style="padding:10px 10px; text-align:center;">
<span style="padding:2px 8px; border-radius:4px; font-size:14px; font-weight:800; ${badgeStyle}">${badgeText}</span>
<td style="padding:6px 8px; font-weight:700; color:#334155; font-size: 0.95rem;">${label}</td>
<td style="padding:6px 8px; text-align:center; font-weight:700; color:#334155; font-size: 0.95rem;">${list.length}대</td>
<td style="padding:6px 8px; text-align:center;">
<span style="padding:2px 6px; border-radius:4px; font-size:12px; font-weight:800; ${badgeStyle}">${badgeText}</span>
</td>
</tr>
`;
@@ -586,50 +657,11 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙');
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
// 9. 직무별 사양 적정성 대수 연산 및 차트 데이터 셋 구성 (누적 막대 그래프화)
const activeJobs = Array.from(
new Set(filtered.map((p: any) => p[ASSET_SCHEMA.USER_POSITION.key] || '미분류').filter(j => j !== '재고PC'))
).sort();
const underData: number[] = [];
const normalData: number[] = [];
const overData: number[] = [];
activeJobs.forEach(job => {
const jobPcs = filtered.filter((p: any) => (p[ASSET_SCHEMA.USER_POSITION.key] || '미분류') === job);
const totalCount = jobPcs.length;
if (totalCount === 0) {
underData.push(0);
normalData.push(0);
overData.push(0);
return;
}
let under = 0;
let normal = 0;
let over = 0;
jobPcs.forEach(p => {
const stockYn = isStock(p);
if (!stockYn) {
if (p._spec_status === '사양 부족') { under++; }
else if (p._spec_status === '오버스펙') { over++; }
else { normal++; }
} else {
normal++; // 예외 폴백
}
});
underData.push(under);
normalData.push(normal);
overData.push(over);
});
// 10. 차트들 렌더링 호출
renderChart(activeJobs, underData, normalData, overData, filtered);
// 10. 도넛 차트 렌더링 호출
renderDonutChart(matrix.premium.total, matrix.high.total, matrix.normal.total, matrix.entry.total, matrix.replace.total);
// 전역 상태 등록
state.activeCharts = [jobChartInstance, donutChartInstance];
state.activeCharts = [donutChartInstance];
}
/**
@@ -746,139 +778,7 @@ function showMiniListModal(title: string, list: any[]) {
});
}
/**
* 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 === '오버스펙' ? '오버 스펙' : clickedStatus)} 자산`, matchedPcs);
}
},
plugins: {
legend: {
position: 'top',
align: 'end',
labels: {
font: { family: 'Pretendard', size: 16, weight: '700' },
color: '#475569',
boxWidth: 12,
boxHeight: 12,
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: 14, weight: '600' },
color: '#64748B'
},
grid: { color: '#EEF2F6' }
},
y: {
stacked: true,
ticks: {
font: { family: 'Pretendard', size: 16, weight: '700' },
color: '#475569'
},
grid: { display: false }
}
}
}
});
}
/**
* 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)