diff --git a/src/views/Dashboard/HwDashboard.ts b/src/views/Dashboard/HwDashboard.ts index 7954695..4e767cd 100644 --- a/src/views/Dashboard/HwDashboard.ts +++ b/src/views/Dashboard/HwDashboard.ts @@ -6,10 +6,58 @@ 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) { + // 전역 툴팁 헬퍼 함수 등록 + (window as any).showSpecTooltip = function(event: MouseEvent, element: HTMLElement, type: string, count: number) { + const container = element.closest('.spec-bar-container'); + if (!container) return; + const tooltip = container.querySelector('.spec-tooltip') as HTMLElement; + if (!tooltip) return; + const textSpan = tooltip.querySelector('.tooltip-text') as HTMLElement; + if (textSpan) { + let color = ''; + let label = ''; + if (type === 'under') { + color = '#EF4444'; + label = '부족'; + } else if (type === 'normal') { + color = '#10B981'; + label = '적정'; + } else if (type === 'over') { + color = '#F59E0B'; + label = '오버'; + } else if (type === 'win11') { + color = '#7928ca'; + label = '윈도우 11 불가'; + } + textSpan.innerHTML = `${label} ${count}대`; + } + tooltip.style.left = event.clientX + 'px'; + tooltip.style.top = event.clientY + 'px'; + tooltip.style.opacity = '1'; + }; + + (window as any).updateSpecTooltipPos = function(event: MouseEvent, element: HTMLElement) { + const container = element.closest('.spec-bar-container'); + if (!container) return; + const tooltip = container.querySelector('.spec-tooltip') as HTMLElement; + if (tooltip) { + tooltip.style.left = event.clientX + 'px'; + tooltip.style.top = event.clientY + 'px'; + } + }; + + (window as any).hideSpecTooltip = function(element: HTMLElement) { + const container = element.closest('.spec-bar-container'); + if (!container) return; + const tooltip = container.querySelector('.spec-tooltip') as HTMLElement; + if (tooltip) { + tooltip.style.opacity = '0'; + } + }; + // 1. 개인용 PC 데이터 추출 (유형이 '개인PC'이거나 상태가 '재고' 또는 '대기' 상태인 PC 집계) const pcs = (state.masterData.pc || []).filter((a: any) => a.asset_type === '개인PC' || @@ -18,7 +66,7 @@ export function renderHwDashboard(container: HTMLElement) { // 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드 container.innerHTML = ` -
+
@@ -43,181 +91,150 @@ export function renderHwDashboard(container: HTMLElement) {
- -
+ +
- -
+ +
- -
- - -
-
- 보유 자산 수량 -
-
-
-
0대
- 전사 보유 개인용 PC -
-
+ +
+
+ 보유 자산 수량
- - -
-
- 사양 부족 -
-
-
-
0대
- 사양 교체 권고 자산 -
-
-
- - -
-
- 오버 스펙 -
-
-
-
0대
- 사양 회수 권고 자산 -
-
-
- - -
-
- 윈도우 11 불가 PC -
-
-
-
0대
- 업데이트 미지원 하드웨어 -
-
-
- +
0대
- - -
- -
- -
- 등급별 자산 종합 현황 -
- - -
- - - - - - - - - - - - - -
구분 (등급)보유량운영중재고구매 필요
-
+ +
+
+ 사양 부족
- +
0대
- + + +
+
+ 오버 스펙 +
+
0대
+
+ + +
+
+ 윈도우 11 불가 +
+
0대
+
+
- -
+ +
- -
-
- 직무별 사양 적정성 분석 + +
+ +
+ 조직별 사용 비율
-
- + + +
+
+ +
+ +
+
+ + 한맥 +
+
+ + 삼안 +
+
+ + 장헌 +
+
+ + 한라 +
+
+ + 기술개발센터 +
+
+ + 총괄기획실 +
+
+ + 기타 +
+
- - -
- - -
- -
- 등급별 보유 비율 -
- - -
-
- -
- -
-
- - 최상급 -
-
- - 상급 -
-
- - 중급 -
-
- - 보급 -
-
- - 교체 대상 -
-
-
-
- -
-
- 연도별 PC 노후도 및 예측 -
-
- - - - - - - - - - - -
구분 (연한)보유권장 조치
-
+ +
+
+ PC 노후도 +
+
+ + + + + + + + + + +
구분 (연한)보유
+ + +
+
+ +
+ 등급별 자산 종합현황 +
+ + +
+ + + + + + + + + + + + + + +
구분 (등급)보유량운영중재고부족분사양 적정성
+
+
+
+