From 84511013251bae52718cea4a59966d6b63fb1fd5 Mon Sep 17 00:00:00 2001 From: JooWangi Date: Wed, 17 Jun 2026 09:25:16 +0900 Subject: [PATCH] =?UTF-8?q?Style:=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C?= =?UTF-8?q?=20UI=20=ED=94=84=EB=A6=AC=EB=AF=B8=EC=97=84=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EB=B0=8F=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EA=B5=AC=EC=A1=B0=20=EB=8F=84=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Dashboard/HwDashboard.ts | 183 ++++++++++++++++------------- 1 file changed, 101 insertions(+), 82 deletions(-) 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}