fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조)
- HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회 - ListFactory: 동일하게 세부 직무명 우선 참조 - 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시 - 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영) - 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨
This commit is contained in:
@@ -9,6 +9,55 @@ declare var Chart: any;
|
|||||||
let donutChartInstance: any = null;
|
let donutChartInstance: any = null;
|
||||||
|
|
||||||
export function renderHwDashboard(container: HTMLElement) {
|
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 = `<span style="color: ${color}; font-weight: 800;">${label} ${count}대</span>`;
|
||||||
|
}
|
||||||
|
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 집계)
|
// 1. 개인용 PC 데이터 추출 (유형이 '개인PC'이거나 상태가 '재고' 또는 '대기' 상태인 PC 집계)
|
||||||
const pcs = (state.masterData.pc || []).filter((a: any) =>
|
const pcs = (state.masterData.pc || []).filter((a: any) =>
|
||||||
a.asset_type === '개인PC' ||
|
a.asset_type === '개인PC' ||
|
||||||
@@ -17,19 +66,11 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
|
|
||||||
// 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
|
// 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="view-container" style="overflow: hidden; padding: 0.4rem 1.2rem; background-color: #F8FAFC; height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.5rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
|
<div class="view-container" style="overflow: hidden; padding: 0; background-color: #ffffff; height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; font-family: 'Pretendard', sans-serif; color: #1E293B;">
|
||||||
|
|
||||||
<!-- 대시보드 타이틀 및 사용조직 필터 -->
|
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
|
||||||
<div style="display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; padding-bottom: 0.4rem;">
|
<div style="display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; padding: 0.6rem 1.2rem; background: #ffffff;">
|
||||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px;">
|
<div style="display: flex; align-items: center;">
|
||||||
<h2 style="font-size: 1.65rem; font-weight: 850; color: #1E5149; margin: 0; letter-spacing: -0.5px; display: flex; align-items: center; gap: 0.6rem;">
|
|
||||||
개인 PC 자산 대시보드
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
|
|
||||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
|
||||||
<span style="font-size: 0.9rem; font-weight: 700; color: #475569; white-space: nowrap;">조직 필터:</span>
|
|
||||||
<div id="dashboard-dept-buttons" style="display: flex; gap: 0.3rem; background: #EEF2F6; padding: 4px; border-radius: 8px; border: 1px solid #E2E8F0;">
|
<div id="dashboard-dept-buttons" style="display: flex; gap: 0.3rem; background: #EEF2F6; padding: 4px; border-radius: 8px; border: 1px solid #E2E8F0;">
|
||||||
<button class="dept-filter-btn active" data-dept="" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: #1E5149; color: white; cursor: pointer; transition: all 0.2s;">전체</button>
|
<button class="dept-filter-btn active" data-dept="" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: #1E5149; color: white; cursor: pointer; transition: all 0.2s;">전체</button>
|
||||||
<button class="dept-filter-btn" data-dept="한맥" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한맥</button>
|
<button class="dept-filter-btn" data-dept="한맥" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한맥</button>
|
||||||
@@ -42,125 +83,108 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 상단 섹션 (전체 높이의 약 50% 차지, stat-card와 donut/aging 나열) -->
|
<!-- 상단 섹션 (전체 높이의 약 35% 차지, stat-card와 donut/aging 나열) -->
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.75rem; height: 48.5%; min-height: 0; flex-shrink: 0; margin-bottom: 0.1rem;">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 33%; min-height: 0; flex-shrink: 0; padding: 0.5rem 0;">
|
||||||
|
|
||||||
<!-- 상단 좌측: 핵심 지표 4개 카드 그리드 -->
|
<!-- 상단 좌측: 핵심 지표 4개 격자 그리드 -->
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; height: 100%;">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%;">
|
||||||
|
|
||||||
<!-- 1. 보유 자산 수량 -->
|
<!-- 1. 보유 자산 수량 -->
|
||||||
<div id="metric-card-total" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: all 0.25s ease;"
|
<div id="metric-card-total" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; transition: background-color 0.15s ease;"
|
||||||
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)';"
|
onmouseover="this.style.backgroundColor='#F8FAFC';"
|
||||||
onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
|
onmouseout="this.style.backgroundColor='#ffffff';">
|
||||||
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #1E5149; pointer-events: none;">
|
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #1E5149; padding-left: 8px; height: 1.4rem;">
|
||||||
<i data-lucide="laptop" style="width: 84px; height: 84px;"></i>
|
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">보유 자산 수량</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
|
<div id="metric-total-pcs" style="font-size: 2.1rem; font-weight: 900; color: #1E5149; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
|
||||||
<span style="display: inline-block; width: 3.5px; height: 13px; background: #1E5149; border-radius: 2px;"></span>
|
|
||||||
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">보유 자산 수량</span>
|
|
||||||
</div>
|
|
||||||
<div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1.1; margin-top: auto;">0대</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2. 사양 부족 -->
|
<!-- 2. 사양 부족 -->
|
||||||
<div id="card-under-spec" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: all 0.25s ease;"
|
<div id="card-under-spec" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
|
||||||
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)'; this.style.borderColor='#FCA5A5';"
|
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #EF4444; padding-left: 8px; height: 1.4rem;">
|
||||||
onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)'; this.style.borderColor='#E2E8F0';">
|
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">사양 부족</span>
|
||||||
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #EF4444; pointer-events: none;">
|
|
||||||
<i data-lucide="alert-triangle" style="width: 84px; height: 84px;"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
|
<div id="metric-under-spec" style="font-size: 2.1rem; font-weight: 900; color: #EF4444; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
|
||||||
<span style="display: inline-block; width: 3.5px; height: 13px; background: #EF4444; border-radius: 2px;"></span>
|
|
||||||
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">사양 부족</span>
|
|
||||||
</div>
|
|
||||||
<div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1.1; margin-top: auto;">0대</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 3. 오버 스펙 -->
|
<!-- 3. 오버 스펙 -->
|
||||||
<div id="card-over-spec" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: all 0.25s ease;"
|
<div id="card-over-spec" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
|
||||||
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)'; this.style.borderColor='#FCD34D';"
|
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #F59E0B; padding-left: 8px; height: 1.4rem;">
|
||||||
onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)'; this.style.borderColor='#E2E8F0';">
|
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">오버 스펙</span>
|
||||||
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #F59E0B; pointer-events: none;">
|
|
||||||
<i data-lucide="zap" style="width: 84px; height: 84px;"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
|
<div id="metric-over-spec" style="font-size: 2.1rem; font-weight: 900; color: #F59E0B; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
|
||||||
<span style="display: inline-block; width: 3.5px; height: 13px; background: #F59E0B; border-radius: 2px;"></span>
|
|
||||||
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">오버 스펙</span>
|
|
||||||
</div>
|
|
||||||
<div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1.1; margin-top: auto;">0대</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 4. 윈도우 11 불가 PC -->
|
<!-- 4. 윈도우 11 불가 PC -->
|
||||||
<div id="card-win11-incompatible" style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 1rem 1.15rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: all 0.25s ease;"
|
<div id="card-win11-incompatible" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
|
||||||
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(0,0,0,0.06)'; this.style.borderColor='#93C5FD';"
|
<div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #7928ca; padding-left: 8px; height: 1.4rem;">
|
||||||
onmouseout="this.style.transform='none'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)'; this.style.borderColor='#E2E8F0';">
|
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">윈도우 11 불가</span>
|
||||||
<div style="position: absolute; right: -12px; top: -12px; opacity: 0.07; color: #3B82F6; pointer-events: none;">
|
|
||||||
<i data-lucide="shield" style="width: 84px; height: 84px;"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem;">
|
<div id="metric-win11-incompatible" style="font-size: 2.1rem; font-weight: 900; color: #7928ca; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
|
||||||
<span style="display: inline-block; width: 3.5px; height: 13px; background: #3B82F6; border-radius: 2px;"></span>
|
|
||||||
<span style="font-size: 0.95rem; font-weight: 800; color: #475569; letter-spacing: -0.3px;">윈도우 11 불가 PC</span>
|
|
||||||
</div>
|
|
||||||
<div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1.1; margin-top: auto;">0대</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 상단 우측: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (두 개의 개별 카드로 배치) -->
|
<!-- 상단 우측: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (두 개의 개별 레이아웃으로 배치) -->
|
||||||
<div style="display: grid; grid-template-columns: 1fr 1.15fr; gap: 0.75rem; min-height: 0; height: 100%;">
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 0; height: 100%;">
|
||||||
|
|
||||||
<!-- 1열: 등급별 보유 비율 도넛 카드 -->
|
<!-- 1열: 조직별 사용 비율 도넛 영역 -->
|
||||||
<div style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 0.85rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 0; height: 100%; transition: all 0.25s ease;"
|
<div style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 0; height: 100%;">
|
||||||
onmouseover="this.style.boxShadow='0 8px 24px rgba(0,0,0,0.05)';" onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
|
|
||||||
<!-- 서브 제목 -->
|
<!-- 서브 제목 -->
|
||||||
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.15rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
|
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.15rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
|
||||||
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span>
|
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B;">조직별 사용 비율</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 도넛 그래프 -->
|
<!-- 도넛 그래프 -->
|
||||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
|
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
|
||||||
<div style="width: 100px; height: 100px; position: relative;">
|
<div style="width: 170px; height: 170px; position: relative;">
|
||||||
<canvas id="chart-overall-donut"></canvas>
|
<canvas id="chart-overall-donut"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<!-- 커스텀 범례 -->
|
<!-- 커스텀 범례 -->
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.8rem; font-weight: 800; color: #64748B; width: 100%;">
|
<div style="display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.8rem; font-weight: 800; color: #64748B; width: 100%;">
|
||||||
<div style="display: flex; align-items: center; gap: 3px;">
|
<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 style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #D02121;"></span>
|
||||||
<span>최상급</span>
|
<span>한맥</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 3px;">
|
<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 style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #F58120;"></span>
|
||||||
<span>상급</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: #3889C7;"></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: #79B2D9;"></span>
|
||||||
|
<span>한라</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 3px;">
|
<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 style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #10B981;"></span>
|
||||||
<span>중급</span>
|
<span>기술개발센터</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 3px;">
|
<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 style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #133D84;"></span>
|
||||||
<span>보급</span>
|
<span>총괄기획실</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 3px;">
|
<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 style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #94A3B8;"></span>
|
||||||
<span>교체</span>
|
<span>기타</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2열: 연도별 PC 노후도 및 예측 카드 -->
|
<!-- 2열: PC 노후도 영역 (표 잘림 방지를 위해 아래 패딩을 줄이고 overflow auto 설정) -->
|
||||||
<div style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 0.85rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; min-height: 0; height: 100%; transition: all 0.25s ease;"
|
<div style="background: #ffffff; padding: 1.5rem 1.5rem 0.5rem 1.5rem; display: flex; flex-direction: column; min-height: 0; height: 100%;">
|
||||||
onmouseover="this.style.boxShadow='0 8px 24px rgba(0,0,0,0.05)';" onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
|
|
||||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
|
||||||
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span>
|
<span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; white-space: nowrap;">PC 노후도</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.1rem;">
|
<div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.1rem;">
|
||||||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem;">
|
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
|
||||||
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
|
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
|
||||||
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
|
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
|
||||||
<th style="padding: 6px 8px; width: 45%; font-size: 0.92rem; background: white;">구분 (연한)</th>
|
<th style="padding: 6px 8px; width: 70%; font-size: 1.02rem; background: white;">구분 (연한)</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 25%; font-size: 0.92rem; background: white;">보유</th>
|
<th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 1.02rem; background: white;">보유</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 0.92rem; background: white;">권장 조치</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="pc-aging-tbody">
|
<tbody id="pc-aging-tbody">
|
||||||
@@ -174,26 +198,25 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 대형 카드) -->
|
<!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 영역 - 높이 비율 65%로 확대) -->
|
||||||
<div style="background: #ffffff; border-radius: 12px; border: 1px solid #E2E8F0; padding: 0.8rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; height: 49%; min-height: 0; transition: all 0.25s ease;"
|
<div style="background: #ffffff; padding: 1.5rem 0; display: flex; flex-direction: column; height: 65%; min-height: 0;">
|
||||||
onmouseover="this.style.boxShadow='0 8px 24px rgba(0,0,0,0.05)';" onmouseout="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.03)';">
|
<div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: flex-start; height: 100%;">
|
||||||
<div style="display: flex; flex-direction: column; gap: 0.4rem; justify-content: flex-start; height: 100%;">
|
|
||||||
<!-- 메인 제목 -->
|
<!-- 메인 제목 -->
|
||||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.05rem; display: flex; align-items: center; line-height: 1; height: 1.5rem; flex-shrink: 0;">
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.1rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;">
|
||||||
<span style="font-size: 1.15rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황 및 사양 적정성 분석</span>
|
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합현황</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 종합 매트릭스 테이블 -->
|
<!-- 종합 매트릭스 테이블 -->
|
||||||
<div style="width: 100%; overflow-y: auto; flex: 1; border-radius: 8px; border: 1px solid #E2E8F0;">
|
<div style="width: 100%; overflow-y: hidden; flex: 1; border-radius: 0;">
|
||||||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem;">
|
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
|
||||||
<thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;">
|
<thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;">
|
||||||
<tr style="border-bottom: 2px solid #E2E8F0; color: #475569; font-weight: 850;">
|
<tr style="border-bottom: 2px solid #E2E8F0; color: #475569; font-weight: 850;">
|
||||||
<th style="padding: 6px 8px; width: 22%; font-size: 0.95rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구분 (등급)</th>
|
<th style="padding: 16px 10px; width: 18%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구분 (등급)</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 11%; font-size: 0.95rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">보유량</th>
|
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">보유량</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 11%; font-size: 0.95rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">운영중</th>
|
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">운영중</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 11%; font-size: 0.95rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">재고</th>
|
<th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">재고</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 11%; color: #EF4444; font-size: 0.95rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구매 필요</th>
|
<th style="padding: 16px 10px; text-align: center; width: 8%; color: #EF4444; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">부족분</th>
|
||||||
<th style="padding: 6px 8px; text-align: center; width: 34%; font-size: 0.95rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">사양 적정성 분석 (직무 기준)</th>
|
<th style="padding: 16px 10px; text-align: center; width: 50%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">사양 적정성</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="pc-grade-matrix-tbody">
|
<tbody id="pc-grade-matrix-tbody">
|
||||||
@@ -226,7 +249,16 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
btn.classList.add('active');
|
btn.classList.add('active');
|
||||||
btn.style.background = '#1E5149';
|
const dept = btn.getAttribute('data-dept') || '';
|
||||||
|
let bgColor = '#1E5149';
|
||||||
|
if (dept === '한맥') bgColor = '#D02121';
|
||||||
|
else if (dept === '삼안') bgColor = '#F58120';
|
||||||
|
else if (dept === '장헌') bgColor = '#3889C7';
|
||||||
|
else if (dept === '한라') bgColor = '#79B2D9';
|
||||||
|
else if (dept === '기술개발센터') bgColor = '#10B981';
|
||||||
|
else if (dept === '총괄기획실') bgColor = '#133D84';
|
||||||
|
|
||||||
|
btn.style.background = bgColor;
|
||||||
btn.style.color = 'white';
|
btn.style.color = 'white';
|
||||||
|
|
||||||
const selectedDept = btn.getAttribute('data-dept') || '';
|
const selectedDept = btn.getAttribute('data-dept') || '';
|
||||||
@@ -252,13 +284,31 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 3. DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
|
// 3. DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
|
||||||
const jobSpecsMap: Record<string, number> = {};
|
const jobSpecsMap: Record<string, string> = {};
|
||||||
if (state.masterData.jobSpecs) {
|
if (state.masterData.jobSpecs) {
|
||||||
state.masterData.jobSpecs.forEach((s: any) => {
|
state.masterData.jobSpecs.forEach((s: any) => {
|
||||||
jobSpecsMap[s.job_name] = s.min_score;
|
jobSpecsMap[s.job_name] = s.required_grade || '중급';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 사용자 이름 → 세부 직무 맵 생성 (system_users.position 기준, 더 정확한 직무 구분)
|
||||||
|
const userPositionMap: Record<string, string> = {};
|
||||||
|
if (state.masterData.users) {
|
||||||
|
state.masterData.users.forEach((u: any) => {
|
||||||
|
if (u.user_name && u.position) {
|
||||||
|
userPositionMap[u.user_name.trim()] = u.position.trim();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const GRADE_RANK: Record<string, number> = {
|
||||||
|
'premium': 4, '최상급': 4,
|
||||||
|
'high': 3, '상급': 3,
|
||||||
|
'normal': 2, '중급': 2,
|
||||||
|
'entry': 1, '보급': 1,
|
||||||
|
'replace': 0, '교체 대상': 0
|
||||||
|
};
|
||||||
|
|
||||||
const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
|
const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
|
||||||
pcs.forEach((p: any) => {
|
pcs.forEach((p: any) => {
|
||||||
const score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
|
const score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
|
||||||
@@ -306,7 +356,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
currentGradeKey = 'high';
|
currentGradeKey = 'high';
|
||||||
} else if (score >= 40) {
|
} else if (score >= 40) {
|
||||||
currentGradeKey = 'normal';
|
currentGradeKey = 'normal';
|
||||||
} else if (score >= 20 && !win11Incompatible) {
|
} else if (score >= 20) {
|
||||||
currentGradeKey = 'entry';
|
currentGradeKey = 'entry';
|
||||||
} else {
|
} else {
|
||||||
currentGradeKey = 'replace';
|
currentGradeKey = 'replace';
|
||||||
@@ -323,23 +373,32 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
currentTarget.active++;
|
currentTarget.active++;
|
||||||
currentTarget.activePcs.push(p);
|
currentTarget.activePcs.push(p);
|
||||||
|
|
||||||
// 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
|
// 직무 적정성 계산: system_users.position 우선 조회 → asset_core.user_position fallback
|
||||||
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
const userName = (p[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
|
||||||
const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
|
const job = userPositionMap[userName] || p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
||||||
|
const requiredGrade = jobSpecsMap[job] || jobSpecsMap[p[ASSET_SCHEMA.USER_POSITION.key]] || '중급'; // 세부 직무 우선, 없으면 일반 직무, 없으면 기본 중급
|
||||||
|
|
||||||
|
// 미니 모달 표시용으로 해석된 세부 직무명 저장
|
||||||
|
p._resolved_position = job;
|
||||||
|
|
||||||
|
const actualGrade = currentGradeKey; // premium, high, normal, entry, replace 중 하나
|
||||||
|
|
||||||
|
const reqRank = GRADE_RANK[requiredGrade] !== undefined ? GRADE_RANK[requiredGrade] : 2; // '중급' rank
|
||||||
|
const actRank = GRADE_RANK[actualGrade] !== undefined ? GRADE_RANK[actualGrade] : 0;
|
||||||
|
|
||||||
let isUnder = false;
|
let isUnder = false;
|
||||||
|
|
||||||
if (standardScore > 0 && job !== '재고PC') {
|
if (job !== '재고PC') {
|
||||||
if (score < standardScore * 0.6) {
|
if (win11Incompatible) {
|
||||||
isUnder = true;
|
isUnder = true;
|
||||||
p._spec_status = '사양 부족';
|
p._spec_status = '사양 부족';
|
||||||
} else if (score > standardScore * 1.5 && !win11Incompatible) {
|
} else if (actRank < reqRank) {
|
||||||
|
isUnder = true;
|
||||||
|
p._spec_status = '사양 부족';
|
||||||
|
} else if (actRank > reqRank) {
|
||||||
p._spec_status = '오버스펙';
|
p._spec_status = '오버스펙';
|
||||||
criticalList.push(p);
|
criticalList.push(p);
|
||||||
overSpecCount++;
|
overSpecCount++;
|
||||||
} else if (win11Incompatible) {
|
|
||||||
isUnder = true;
|
|
||||||
p._spec_status = '사양 부족';
|
|
||||||
} else {
|
} else {
|
||||||
p._spec_status = '적정';
|
p._spec_status = '적정';
|
||||||
}
|
}
|
||||||
@@ -357,16 +416,11 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
underSpecCount++;
|
underSpecCount++;
|
||||||
|
|
||||||
// 2. 사양 부족 시 교체받아야 할 직무별 권장 목표 등급 판정
|
// 2. 사양 부족 시 교체받아야 할 직무별 권장 목표 등급 판정
|
||||||
let targetGradeKey: keyof typeof matrix;
|
let targetGradeKey: keyof typeof matrix = 'normal';
|
||||||
if (standardScore >= 85) {
|
if (requiredGrade === '최상급') targetGradeKey = 'premium';
|
||||||
targetGradeKey = 'premium';
|
else if (requiredGrade === '상급') targetGradeKey = 'high';
|
||||||
} else if (standardScore >= 70) {
|
else if (requiredGrade === '중급') targetGradeKey = 'normal';
|
||||||
targetGradeKey = 'high';
|
else if (requiredGrade === '보급') targetGradeKey = 'entry';
|
||||||
} else if (standardScore >= 40) {
|
|
||||||
targetGradeKey = 'normal';
|
|
||||||
} else {
|
|
||||||
targetGradeKey = 'entry'; // 교체 대상은 최소 보급형 사양으로 교체
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetGrade = matrix[targetGradeKey];
|
const targetGrade = matrix[targetGradeKey];
|
||||||
targetGrade.under++;
|
targetGrade.under++;
|
||||||
@@ -390,60 +444,76 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
const matrixTbody = document.getElementById('pc-grade-matrix-tbody')!;
|
const matrixTbody = document.getElementById('pc-grade-matrix-tbody')!;
|
||||||
|
|
||||||
const getSpecStatusCounts = (activePcsList: any[]) => {
|
const getSpecStatusCounts = (activePcsList: any[]) => {
|
||||||
|
let win11 = 0;
|
||||||
let under = 0;
|
let under = 0;
|
||||||
let normal = 0;
|
let normal = 0;
|
||||||
let over = 0;
|
let over = 0;
|
||||||
activePcsList.forEach(p => {
|
activePcsList.forEach(p => {
|
||||||
if (p._spec_status === '사양 부족') under++;
|
if (isWindows11Incompatible(p.cpu, p.ram)) win11++;
|
||||||
|
else if (p._spec_status === '사양 부족') under++;
|
||||||
else if (p._spec_status === '오버스펙') over++;
|
else if (p._spec_status === '오버스펙') over++;
|
||||||
else normal++;
|
else normal++;
|
||||||
});
|
});
|
||||||
return { under, normal, over };
|
return { win11, under, normal, over };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const maxTotal = Math.max(
|
||||||
|
matrix.premium.total,
|
||||||
|
matrix.high.total,
|
||||||
|
matrix.normal.total,
|
||||||
|
matrix.entry.total,
|
||||||
|
matrix.replace.total
|
||||||
|
);
|
||||||
|
|
||||||
const renderMatrixRow = (gradeKey: keyof typeof matrix, label: string, color: string, shortage: number) => {
|
const renderMatrixRow = (gradeKey: keyof typeof matrix, label: string, color: string, shortage: number) => {
|
||||||
const data = matrix[gradeKey];
|
const data = matrix[gradeKey];
|
||||||
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
|
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
|
||||||
|
|
||||||
const cellStyle = `padding: 6px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 0.95rem;`;
|
const cellStyle = `padding: 22px 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'"`;
|
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
|
||||||
|
|
||||||
// 사양 적정성 분석 데이터 계산 (운영중인 자산만)
|
// 사양 적정성 분석 데이터 계산 (운영중인 자산만)
|
||||||
const { under, normal, over } = getSpecStatusCounts(data.activePcs);
|
const { win11, under, normal, over } = getSpecStatusCounts(data.activePcs);
|
||||||
const activeCount = data.active;
|
const activeCount = data.active;
|
||||||
|
|
||||||
|
const win11Pct = activeCount > 0 ? (win11 / activeCount) * 100 : 0;
|
||||||
const underPct = activeCount > 0 ? (under / activeCount) * 100 : 0;
|
const underPct = activeCount > 0 ? (under / activeCount) * 100 : 0;
|
||||||
const normalPct = activeCount > 0 ? (normal / activeCount) * 100 : 0;
|
const normalPct = activeCount > 0 ? (normal / activeCount) * 100 : 0;
|
||||||
const overPct = activeCount > 0 ? (over / activeCount) * 100 : 0;
|
const overPct = activeCount > 0 ? (over / activeCount) * 100 : 0;
|
||||||
|
|
||||||
|
const rowTotal = data.total;
|
||||||
|
const barWidthPct = maxTotal > 0 ? (rowTotal / maxTotal) * 100 : 0;
|
||||||
|
|
||||||
let barGraphHtml = '';
|
let barGraphHtml = '';
|
||||||
if (activeCount > 0) {
|
if (activeCount > 0) {
|
||||||
barGraphHtml = `
|
barGraphHtml = `
|
||||||
<div style="display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; width: 100%;">
|
<div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
|
||||||
<div style="display: flex; height: 11px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);">
|
<!-- 게이지 바 (보유량 비례) -->
|
||||||
${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; border-right: 2px solid #ffffff; 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.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
|
<div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: ${barWidthPct}%; min-width: 15px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
|
||||||
${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; border-right: 2px solid #ffffff; 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.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
|
${win11 > 0 ? `<div style="width: ${win11Pct}%; background: #7928ca; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="윈도우 11 불가: ${win11}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="윈도우 11 불가" onmouseover="showSpecTooltip(event, this, 'win11', ${win11}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); 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.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
|
${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${under}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
|
||||||
|
${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${normal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
|
||||||
|
${over > 0 ? `<div style="width: ${overPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${over}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; gap: 4px; align-items: center;">
|
<!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
|
||||||
${under > 0 ? `<span style="padding: 1px 5px; border-radius: 9999px; font-size: 10px; font-weight: 800; background: #FEE2E2; color: #EF4444; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">부족 ${under}</span>` : ''}
|
<div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: #1E293B; color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
|
||||||
${normal > 0 ? `<span style="padding: 1px 5px; border-radius: 9999px; font-size: 10px; font-weight: 800; background: #D1FAE5; color: #065F46; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">적정 ${normal}</span>` : ''}
|
<span class="tooltip-text"></span>
|
||||||
${over > 0 ? `<span style="padding: 1px 5px; border-radius: 9999px; font-size: 10px; font-weight: 800; background: #FEF3C7; color: #92400E; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">오버 ${over}</span>` : ''}
|
<div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E293B;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
barGraphHtml = `<span style="font-size: 0.85rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
|
barGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<tr style="border-bottom: 1px solid #E2E8F0;">
|
<tr style="border-bottom: 1px solid #E2E8F0;">
|
||||||
<td style="padding: 6px 8px; font-weight: 800; color: ${color}; font-size: 0.95rem;">${label}</td>
|
<td style="padding: 22px 10px; font-weight: 800; color: ${color}; font-size: 1.05rem;">${label}</td>
|
||||||
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.82rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td>
|
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.88rem; 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="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="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 class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${shortage}대</td>
|
||||||
<td style="padding: 6px 8px; text-align: center; font-weight: 700; font-size: 0.95rem; vertical-align: middle;">
|
<td style="padding: 22px 8px; text-align: center; font-weight: 700; font-size: 1.05rem; vertical-align: middle;">
|
||||||
${barGraphHtml}
|
${barGraphHtml}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -467,7 +537,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
const totalShortage = premiumShortage + highShortage + normalShortage + entryShortage + replaceShortage;
|
const totalShortage = premiumShortage + highShortage + normalShortage + entryShortage + replaceShortage;
|
||||||
|
|
||||||
const totalActivePcs = filtered.filter(p => !isStock(p));
|
const totalActivePcs = filtered.filter(p => !isStock(p));
|
||||||
const { under: totUnder, normal: totNormal, over: totOver } = getSpecStatusCounts(totalActivePcs);
|
const { win11: totWin11, under: totUnder, normal: totNormal, over: totOver } = getSpecStatusCounts(totalActivePcs);
|
||||||
const totUnderPct = totalActive > 0 ? (totUnder / totalActive) * 100 : 0;
|
const totUnderPct = totalActive > 0 ? (totUnder / totalActive) * 100 : 0;
|
||||||
const totNormalPct = totalActive > 0 ? (totNormal / totalActive) * 100 : 0;
|
const totNormalPct = totalActive > 0 ? (totNormal / totalActive) * 100 : 0;
|
||||||
const totOverPct = totalActive > 0 ? (totOver / totalActive) * 100 : 0;
|
const totOverPct = totalActive > 0 ? (totOver / totalActive) * 100 : 0;
|
||||||
@@ -475,24 +545,25 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
let totBarGraphHtml = '';
|
let totBarGraphHtml = '';
|
||||||
if (totalActive > 0) {
|
if (totalActive > 0) {
|
||||||
totBarGraphHtml = `
|
totBarGraphHtml = `
|
||||||
<div style="display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; width: 100%;">
|
<div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
|
||||||
<div style="display: flex; height: 11px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; max-width: 220px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);">
|
<!-- 게이지 바 (합계는 100% 너비) -->
|
||||||
${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; border-right: 2px solid #ffffff; 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.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
|
<div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
|
||||||
${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; border-right: 2px solid #ffffff; 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.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
|
${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${totUnder}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
|
||||||
${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; border-right: 2px solid #ffffff; 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.85'" onmouseout="this.style.opacity='1'"></div>` : ''}
|
${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${totNormal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
|
||||||
|
${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${totOver}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; gap: 4px; align-items: center;">
|
<!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
|
||||||
${totUnder > 0 ? `<span style="padding: 1px 5px; border-radius: 9999px; font-size: 10px; font-weight: 800; background: #FEE2E2; color: #EF4444; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">부족 ${totUnder}</span>` : ''}
|
<div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: #1E293B; color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
|
||||||
${totNormal > 0 ? `<span style="padding: 1px 5px; border-radius: 9999px; font-size: 10px; font-weight: 800; background: #D1FAE5; color: #065F46; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="all" data-spec-status="적정" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">적정 ${totNormal}</span>` : ''}
|
<span class="tooltip-text"></span>
|
||||||
${totOver > 0 ? `<span style="padding: 1px 5px; border-radius: 9999px; font-size: 10px; font-weight: 800; background: #FEF3C7; color: #92400E; cursor: pointer; transition: all 0.2s;" class="spec-text-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">오버 ${totOver}</span>` : ''}
|
<div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E293B;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
totBarGraphHtml = `<span style="font-size: 0.85rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
|
totBarGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const cellStyleHeader = `padding: 6px 8px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 0.95rem;`;
|
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'"`;
|
const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
|
||||||
|
|
||||||
matrixTbody.innerHTML = `
|
matrixTbody.innerHTML = `
|
||||||
@@ -500,17 +571,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)}
|
${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)}
|
||||||
${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)}
|
${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)}
|
||||||
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
|
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
|
||||||
${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)}
|
${renderMatrixRow('replace', '교체 대상 PC (20점 미만)', '#EF4444', replaceShortage)}
|
||||||
<tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;">
|
|
||||||
<td style="padding: 12px 10px; color: #1E293B; font-weight: 800; font-size: 1.05rem;">합계 (Total)</td>
|
|
||||||
<td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:0.88rem; 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.05rem; background: #F8FAFC; vertical-align: middle;">
|
|
||||||
${totBarGraphHtml}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 셀별 동적 클릭 리스너 바인딩
|
// 셀별 동적 클릭 리스너 바인딩
|
||||||
@@ -535,7 +596,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
if (t === 'total') return '보유';
|
if (t === 'total') return '보유';
|
||||||
if (t === 'active') return '운영중';
|
if (t === 'active') return '운영중';
|
||||||
if (t === 'stock') return '재고';
|
if (t === 'stock') return '재고';
|
||||||
if (t === 'under') return '구매 필요';
|
if (t === 'under') return '부족분';
|
||||||
return '';
|
return '';
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -575,11 +636,21 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
const status = target.getAttribute('data-spec-status')!;
|
const status = target.getAttribute('data-spec-status')!;
|
||||||
|
|
||||||
let targetPcs: any[] = [];
|
let targetPcs: any[] = [];
|
||||||
|
const filterFn = (p: any) => {
|
||||||
|
if (status === '윈도우 11 불가') {
|
||||||
|
return isWindows11Incompatible(p.cpu, p.ram);
|
||||||
|
} else if (status === '사양 부족') {
|
||||||
|
return !isWindows11Incompatible(p.cpu, p.ram) && p._spec_status === '사양 부족';
|
||||||
|
} else {
|
||||||
|
return p._spec_status === status;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (grade === 'all') {
|
if (grade === 'all') {
|
||||||
targetPcs = filtered.filter(p => !isStock(p) && p._spec_status === status);
|
targetPcs = filtered.filter(p => !isStock(p) && filterFn(p));
|
||||||
} else {
|
} else {
|
||||||
const data = matrix[grade as keyof typeof matrix];
|
const data = matrix[grade as keyof typeof matrix];
|
||||||
targetPcs = data.activePcs.filter(p => p._spec_status === status);
|
targetPcs = data.activePcs.filter(filterFn);
|
||||||
}
|
}
|
||||||
|
|
||||||
const getGradeLabel = (g: string) => {
|
const getGradeLabel = (g: string) => {
|
||||||
@@ -622,23 +693,20 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
|
|
||||||
const agingTbody = document.getElementById('pc-aging-tbody')!;
|
const agingTbody = document.getElementById('pc-aging-tbody')!;
|
||||||
|
|
||||||
const renderAgingRow = (label: string, list: any[], badgeText: string, badgeStyle: string, ageGroupKey: string) => {
|
const renderAgingRow = (label: string, list: any[], ageGroupKey: string) => {
|
||||||
return `
|
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'">
|
<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:6px 8px; font-weight:700; color:#334155; font-size: 0.95rem;">${label}</td>
|
<td style="padding:5px 8px; font-weight:700; color:#334155; font-size: 1.05rem;">${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:5px 8px; text-align:center; font-weight:700; color:#334155; font-size: 1.05rem;">${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>
|
</tr>
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
agingTbody.innerHTML = `
|
agingTbody.innerHTML = `
|
||||||
${renderAgingRow('즉시 교체 (7년 이상)', agingCounts.immediate, '즉시 교체', 'background:#FFF1F2; color:#EF4444; border:1px solid #FCA5A5;', 'immediate')}
|
${renderAgingRow('즉시 교체 (7년 이상)', agingCounts.immediate, 'immediate')}
|
||||||
${renderAgingRow('교체 검토 (3년 ~ 7년)', agingCounts.review, '교체 검토', 'background:#FFF7ED; color:#D97706; border:1px solid #FCD34D;', 'review')}
|
${renderAgingRow('교체 검토 (3년 ~ 7년)', agingCounts.review, 'review')}
|
||||||
${renderAgingRow('정상 운용 (1년 ~ 3년)', agingCounts.normal, '정상 운용', 'background:#ECFDF5; color:#059669; border:1px solid #A7F3D0;', 'normal')}
|
${renderAgingRow('정상 운용 (1년 ~ 3년)', agingCounts.normal, 'normal')}
|
||||||
${renderAgingRow('최신 도입 (1년 미만)', agingCounts.fresh, '최신 도입', 'background:#F0FDF4; color:#16A34A; border:1px solid #BBF7D0;', 'fresh')}
|
${renderAgingRow('최신 도입 (1년 미만)', agingCounts.fresh, 'fresh')}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
agingTbody.querySelectorAll('.aging-row').forEach(row => {
|
agingTbody.querySelectorAll('.aging-row').forEach(row => {
|
||||||
@@ -656,14 +724,14 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 8. 요약 지표 카드 클릭 리스너 설정
|
// 8. 요약 지표 카드 클릭 리스너 설정
|
||||||
const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean) => {
|
const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean, hoverBgColor: string) => {
|
||||||
const card = document.getElementById(id)!;
|
const card = document.getElementById(id)!;
|
||||||
if (!card) return;
|
if (!card) return;
|
||||||
card.style.cursor = 'pointer';
|
card.style.cursor = 'pointer';
|
||||||
card.style.transition = 'opacity 0.2s';
|
card.style.transition = 'background-color 0.15s ease';
|
||||||
|
|
||||||
card.onmouseover = () => { card.style.opacity = '0.7'; };
|
card.onmouseover = () => { card.style.backgroundColor = hoverBgColor; };
|
||||||
card.onmouseout = () => { card.style.opacity = '1'; };
|
card.onmouseout = () => { card.style.backgroundColor = '#ffffff'; };
|
||||||
|
|
||||||
card.onclick = () => {
|
card.onclick = () => {
|
||||||
const pcsInGrade = filtered.filter(filterFn);
|
const pcsInGrade = filtered.filter(filterFn);
|
||||||
@@ -672,12 +740,48 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정
|
// 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정
|
||||||
bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족');
|
bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족', '#FEF2F2');
|
||||||
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙');
|
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙', '#FFFBEB');
|
||||||
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
|
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram), '#F5F3FF');
|
||||||
|
|
||||||
|
// 9. 조직별 사용 비율 집계 (전체 개인용 PC 기준)
|
||||||
|
const deptCounts: Record<string, number> = {
|
||||||
|
'한맥': 0,
|
||||||
|
'삼안': 0,
|
||||||
|
'장헌': 0,
|
||||||
|
'한라': 0,
|
||||||
|
'기술개발센터': 0,
|
||||||
|
'총괄기획실': 0,
|
||||||
|
'기타': 0
|
||||||
|
};
|
||||||
|
|
||||||
|
pcs.forEach((p: any) => {
|
||||||
|
const dept = String(p[ASSET_SCHEMA.CURRENT_DEPT.key] || '').trim();
|
||||||
|
let matched = false;
|
||||||
|
for (const key of Object.keys(deptCounts)) {
|
||||||
|
if (key !== '기타' && dept.includes(key)) {
|
||||||
|
deptCounts[key]++;
|
||||||
|
matched = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!matched) {
|
||||||
|
deptCounts['기타']++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const deptChartData = [
|
||||||
|
{ label: '한맥', count: deptCounts['한맥'], color: '#D02121' },
|
||||||
|
{ label: '삼안', count: deptCounts['삼안'], color: '#F58120' },
|
||||||
|
{ label: '장헌', count: deptCounts['장헌'], color: '#3889C7' },
|
||||||
|
{ label: '한라', count: deptCounts['한라'], color: '#79B2D9' },
|
||||||
|
{ label: '기술개발센터', count: deptCounts['기술개발센터'], color: '#10B981' },
|
||||||
|
{ label: '총괄기획실', count: deptCounts['총괄기획실'], color: '#133D84' },
|
||||||
|
{ label: '기타', count: deptCounts['기타'], color: '#94A3B8' }
|
||||||
|
];
|
||||||
|
|
||||||
// 10. 도넛 차트 렌더링 호출
|
// 10. 도넛 차트 렌더링 호출
|
||||||
renderDonutChart(matrix.premium.total, matrix.high.total, matrix.normal.total, matrix.entry.total, matrix.replace.total);
|
renderDonutChart(deptChartData);
|
||||||
|
|
||||||
// 전역 상태 등록
|
// 전역 상태 등록
|
||||||
state.activeCharts = [donutChartInstance];
|
state.activeCharts = [donutChartInstance];
|
||||||
@@ -746,7 +850,7 @@ function showMiniListModal(title: string, list: any[]) {
|
|||||||
return `
|
return `
|
||||||
<tr style="border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.2s;" class="mini-modal-row" data-id="${pc.id}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
|
<tr style="border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.2s;" class="mini-modal-row" data-id="${pc.id}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
|
||||||
<td style="padding: 12px 4px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
|
<td style="padding: 12px 4px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
|
||||||
<td style="padding: 12px 4px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc.user_position || '-'})">${pc.current_dept || '-'} (${pc.user_position || '-'})</td>
|
<td style="padding: 12px 4px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})">${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})</td>
|
||||||
<td style="padding: 12px 4px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</td>
|
<td style="padding: 12px 4px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</td>
|
||||||
<td style="padding: 12px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${badgeHTML}${scoreHTML}</td>
|
<td style="padding: 12px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${badgeHTML}${scoreHTML}</td>
|
||||||
<td style="padding: 12px 4px; font-family: monospace; color: #475569; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
|
<td style="padding: 12px 4px; font-family: monospace; color: #475569; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
|
||||||
@@ -802,7 +906,7 @@ function showMiniListModal(title: string, list: any[]) {
|
|||||||
/**
|
/**
|
||||||
* 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)
|
* 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)
|
||||||
*/
|
*/
|
||||||
function renderDonutChart(premium: number, high: number, normal: number, entry: number, replace: number) {
|
function renderDonutChart(deptData: { label: string; count: number; color: string }[]) {
|
||||||
const ctx = document.getElementById('chart-overall-donut') as HTMLCanvasElement;
|
const ctx = document.getElementById('chart-overall-donut') as HTMLCanvasElement;
|
||||||
if (!ctx || typeof Chart === 'undefined') return;
|
if (!ctx || typeof Chart === 'undefined') return;
|
||||||
|
|
||||||
@@ -811,21 +915,15 @@ function renderDonutChart(premium: number, high: number, normal: number, entry:
|
|||||||
donutChartInstance = null;
|
donutChartInstance = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const total = premium + high + normal + entry + replace;
|
const total = deptData.reduce((sum, d) => sum + d.count, 0);
|
||||||
|
|
||||||
donutChartInstance = new Chart(ctx, {
|
donutChartInstance = new Chart(ctx, {
|
||||||
type: 'doughnut',
|
type: 'doughnut',
|
||||||
data: {
|
data: {
|
||||||
labels: ['최상급', '상급', '중급', '보급', '교체 대상'],
|
labels: deptData.map(d => d.label),
|
||||||
datasets: [{
|
datasets: [{
|
||||||
data: [premium, high, normal, entry, replace],
|
data: deptData.map(d => d.count),
|
||||||
backgroundColor: [
|
backgroundColor: deptData.map(d => d.color),
|
||||||
'#11302B', // premium (Hanmac Dark Green)
|
|
||||||
'#1E8E7C', // high (Hanmac Teal)
|
|
||||||
'#10B981', // normal (Hanmac Mint)
|
|
||||||
'#F59E0B', // entry (Yellow-Orange)
|
|
||||||
'#EF4444' // replace (Red)
|
|
||||||
],
|
|
||||||
borderColor: '#ffffff',
|
borderColor: '#ffffff',
|
||||||
borderWidth: 2
|
borderWidth: 2
|
||||||
}]
|
}]
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user