diff --git a/src/views/Dashboard/HwDashboard.ts b/src/views/Dashboard/HwDashboard.ts index 72c2317..dc451ae 100644 --- a/src/views/Dashboard/HwDashboard.ts +++ b/src/views/Dashboard/HwDashboard.ts @@ -43,70 +43,87 @@ export function renderHwDashboard(container: HTMLElement) { -
+
- -
+ +
-
-
- 보유 자산 수량 +
+
+
-
-
0대
+
+ + 보유 자산 수량
+
0대
-
-
- 사양 부족 +
+
+
-
-
0대
+
+ + 사양 부족
+
0대
-
-
- 오버 스펙 +
+
+
-
-
0대
+
+ + 오버 스펙
+
0대
-
-
- 윈도우 11 불가 PC +
+
+
-
-
0대
+
+ + 윈도우 11 불가 PC
+
0대
- -
+ +
- -
+ +
-
- 등급별 보유 비율 +
+ 등급별 보유 비율
-
+
-
+
최상급 @@ -125,24 +142,25 @@ export function renderHwDashboard(container: HTMLElement) {
- 교체 대상 + 교체
- -
-
- 연도별 PC 노후도 및 예측 + +
+
+ 연도별 PC 노후도 및 예측
-
+
- - - + + + @@ -156,25 +174,26 @@ export function renderHwDashboard(container: HTMLElement) { - -
-
+ +
+
-
+
등급별 자산 종합 현황 및 사양 적정성 분석
-
-
구분 (연한)보유권장 조치구분 (연한)보유권장 조치
+
+
- - - - - - - + + + + + + + @@ -386,7 +405,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) { const data = matrix[gradeKey]; const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0; - const cellStyle = `padding: 10px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.1rem;`; + const cellStyle = `padding: 10px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.05rem;`; const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`; // 사양 적정성 분석 데이터 계산 (운영중인 자산만) @@ -400,31 +419,31 @@ function updateDashboardData(pcs: any[], selectedDept: string) { let barGraphHtml = ''; if (activeCount > 0) { barGraphHtml = ` -
-
- ${under > 0 ? `
` : ''} - ${normal > 0 ? `
` : ''} - ${over > 0 ? `
` : ''} +
+
+ ${under > 0 ? `
` : ''} + ${normal > 0 ? `
` : ''} + ${over > 0 ? `
` : ''}
-
- ${under > 0 ? `부족 ${under}` : ''} - ${normal > 0 ? `적정 ${normal}` : ''} - ${over > 0 ? `오버 ${over}` : ''} +
+ ${under > 0 ? `부족 ${under}` : ''} + ${normal > 0 ? `적정 ${normal}` : ''} + ${over > 0 ? `오버 ${over}` : ''}
`; } else { - barGraphHtml = `운영중 자산 없음`; + barGraphHtml = `운영중 자산 없음`; } return ` -
- - + + + - @@ -456,24 +475,24 @@ function updateDashboardData(pcs: any[], selectedDept: string) { let totBarGraphHtml = ''; if (totalActive > 0) { totBarGraphHtml = ` -
-
- ${totUnder > 0 ? `
` : ''} - ${totNormal > 0 ? `
` : ''} - ${totOver > 0 ? `
` : ''} +
+
+ ${totUnder > 0 ? `
` : ''} + ${totNormal > 0 ? `
` : ''} + ${totOver > 0 ? `
` : ''}
-
- ${totUnder > 0 ? `부족 ${totUnder}` : ''} - ${totNormal > 0 ? `적정 ${totNormal}` : ''} - ${totOver > 0 ? `오버 ${totOver}` : ''} +
+ ${totUnder > 0 ? `부족 ${totUnder}` : ''} + ${totNormal > 0 ? `적정 ${totNormal}` : ''} + ${totOver > 0 ? `오버 ${totOver}` : ''}
`; } else { - totBarGraphHtml = `운영중 자산 없음`; + totBarGraphHtml = `운영중 자산 없음`; } - const cellStyleHeader = `padding: 10px 8px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.1rem;`; + const cellStyleHeader = `padding: 12px 10px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.05rem;`; const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`; matrixTbody.innerHTML = ` @@ -483,12 +502,12 @@ function updateDashboardData(pcs: any[], selectedDept: string) { ${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)} ${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)}
- - + + -
구분 (등급)보유량운영중재고구매 필요사양 적정성 분석 (직무 기준)
구분 (등급)보유량운영중재고구매 필요사양 적정성 분석 (직무 기준)
${label}${data.total}대 (${totalRate}%)
${label}${data.total}대 (${totalRate}%) ${data.active}대 ${data.stock}대 ${shortage}대 + ${barGraphHtml}
합계 (Total)${totalPcs}대 (100%)합계 (Total)${totalPcs}대 (100%) ${totalActive}대 ${totalStock}대 ${totalShortage}대 + ${totBarGraphHtml}