merge: remote main updates into ux_setting with style preservation

- Resolved conflicts in state.ts, HwDashboard.ts, ListFactory.ts, and PartsMasterListView.ts
- Prioritized latest functional logic from main branch (Job Spec mapping, Matrix calculations)
- Maintained Vercel-inspired UI styling and unified CSS classes from ux_setting branch
- Synchronized PC status toggle visibility rules with latest main branch changes
This commit is contained in:
2026-06-17 13:08:59 +09:00
10 changed files with 1135 additions and 160 deletions

View File

@@ -1,5 +1,5 @@
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
import { dynamicSort, renderPageHeader, calculateAssetAge } from '../../core/utils';
import { dynamicSort, renderPageHeader, calculateAssetAge, formatInline, isWindows11Incompatible } from '../../core/utils';
import { setupTableSorting, SortState } from '../../core/tableHandler';
import { renderFilterBar, applyCommonFilters } from '../../core/filterHandler';
import { state } from '../../core/state';
@@ -176,10 +176,9 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
}
let currentFilters: any = (state as any).listFilters[filterKey];
// 서버 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드 (PC 탭은 자산 현황 숨김)
const isServer = config.title === '서버';
// 서버 및 PC 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드
if (!(state as any).currentViewMode || (state as any).currentViewMode === 'system') {
if (!isServer) {
(state as any).currentViewMode = 'asset';
}
@@ -189,7 +188,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
// 2. 필터 바 생성 (자산 목록에서만 사용)
const filterBar = document.createElement('div');
filterBar.className = 'filter-bar';
filterBar.className = 'search-bar';
// 자산 추가 버튼 및 목록 보기 체크박스 추가 로직
const showPcFlowBtn = config.title === 'PC';
@@ -413,6 +412,146 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
</div>
`;
const updateFlowLogsSection = () => {
if (!isPcView) return;
// 사양 주의 장비 현황 (부족/오버스펙) 계산 및 바인딩
const specMismatchTbody = document.getElementById('spec-mismatch-tbody');
if (specMismatchTbody) {
// fullList 중 개인 PC 관련 장비 필터링
const pcs = fullList.filter((a: any) => {
const type = a[ASSET_SCHEMA.ASSET_TYPE.key] || '';
const job = a[ASSET_SCHEMA.USER_POSITION.key] || '';
const status = a[ASSET_SCHEMA.HW_STATUS.key] || '';
const user = a[ASSET_SCHEMA.CURRENT_USER.key] || '';
// 운영 중이고 사용자가 할당되어 있으며, 직무가 재고PC가 아닌 실사용 기기 대상
return job !== '재고PC' && status === '운영' && user.trim() !== '';
});
// 직무별 평균 점수 산출
const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
pcs.forEach((pc: any) => {
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
const ram = pc[ASSET_SCHEMA.RAM.key] || '';
const gpu = pc[ASSET_SCHEMA.GPU.key] || '';
const pDate = pc[ASSET_SCHEMA.PURCHASE_DATE.key] || '';
const score = calculatePcScoreDeductive(cpu, ram, gpu, pDate);
pc['_pc_score'] = score;
if (!jobScores[job]) jobScores[job] = { totalScore: 0, count: 0, avg: 0 };
jobScores[job].totalScore += score;
jobScores[job].count += 1;
});
Object.keys(jobScores).forEach(job => {
jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
});
// DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
const jobSpecsMap: Record<string, number> = {};
if (state.masterData.jobSpecs) {
state.masterData.jobSpecs.forEach((s: any) => {
jobSpecsMap[s.job_name] = s.min_score;
});
}
// 기준 대비 사양 부족/오버스펙 분류
const criticalPcList: any[] = [];
pcs.forEach((pc: any) => {
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const score = pc['_pc_score'];
const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
const cpu = pc[ASSET_SCHEMA.CPU.key] || '';
const ram = pc[ASSET_SCHEMA.RAM.key] || '';
const win11Incompatible = isWindows11Incompatible(cpu, ram);
let isUnder = false;
if (standardScore > 0) {
if (score < standardScore * 0.6) {
isUnder = true;
pc['_spec_status'] = '사양 부족';
} else if (score > standardScore * 1.5 && !win11Incompatible) {
pc['_spec_status'] = '오버스펙';
criticalPcList.push(pc);
} else if (win11Incompatible) {
isUnder = true;
pc['_spec_status'] = '사양 부족';
} else {
pc['_spec_status'] = '적정';
}
} else {
if (win11Incompatible) {
isUnder = true;
pc['_spec_status'] = '사양 부족';
} else {
pc['_spec_status'] = '적정';
}
}
if (isUnder) {
criticalPcList.push(pc);
}
});
// 정렬: 기준 점수 대비 사양 부족이 심한 순(비율이 낮은 순)으로 정렬
criticalPcList.sort((a: any, b: any) => {
const jobA = a[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const jobB = b[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
const stdA = jobSpecsMap[jobA] !== undefined ? jobSpecsMap[jobA] : (jobScores[jobA]?.avg || 0);
const stdB = jobSpecsMap[jobB] !== undefined ? jobSpecsMap[jobB] : (jobScores[jobB]?.avg || 0);
const ratioA = stdA > 0 ? a['_pc_score'] / stdA : 1;
const ratioB = stdB > 0 ? b['_pc_score'] / stdB : 1;
return ratioA - ratioB;
});
if (criticalPcList.length === 0) {
specMismatchTbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:1.5rem; color:#94A3B8;">사양 주의 자산이 없습니다.</td></tr>';
} else {
specMismatchTbody.innerHTML = criticalPcList.map((pc: any) => {
const user = pc[ASSET_SCHEMA.CURRENT_USER.key] || '-';
const dept = pc[ASSET_SCHEMA.CURRENT_DEPT.key] || '-';
const job = pc[ASSET_SCHEMA.USER_POSITION.key] || '-';
const status = pc['_spec_status'];
const assetCode = pc.asset_code || '-';
const badgeColor = status === '사양 부족'
? 'background:#FFF1F2; color:#E11D48; border: 1px solid #FDA4AF;'
: 'background:#F0FDF4; color:#16A34A; border: 1px solid #BBF7D0;';
return `
<tr style="border-bottom: 1px solid var(--border-color); cursor: pointer;" class="spec-row" data-id="${pc.id}">
<td style="padding: 10px 0; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
<td style="padding: 10px 0; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${dept} (${job})">${dept} (${job})</td>
<td style="padding: 10px 0; white-space: nowrap; text-align: center;">
<span style="padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; ${badgeColor}">${status === '오버스펙' ? '오버 스펙' : status}</span>
</td>
<td style="padding: 10px 0; font-family: monospace; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${assetCode}">${assetCode}</td>
</tr>
`;
}).join('');
// 클릭 시 해당 자산 상세 페이지로 전환
specMismatchTbody.querySelectorAll('.spec-row').forEach(row => {
row.addEventListener('click', () => {
specMismatchTbody.querySelectorAll('.spec-row').forEach(r => {
(r as HTMLElement).style.backgroundColor = 'transparent';
});
(row as HTMLElement).style.backgroundColor = '#EBF2F1'; // 선택 하이라이트
const assetId = row.getAttribute('data-id');
const found = fullList.find(a => String(a.id) === String(assetId));
if (found) {
updateDetailPanel(found);
}
});
});
}
}
};
const updateDetailPanel = (asset: any) => {
const emptyState = document.getElementById('detail-empty-state');
const content = document.getElementById('detail-content');
@@ -590,6 +729,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
selectedDetailLocation = (e.target as HTMLSelectElement).value || null; updateTableOnly();
});
updateTableOnly();
updateFlowLogsSection();
}, 50);
};
@@ -632,7 +772,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
...config.filterOptions,
initialFilters: currentFilters,
extraHTML: isServer ? `
<div class="filter-group">
<div class="search-item">
<label class="list-view-toggle-label">
<input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} />
목록보기
@@ -645,7 +785,7 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
// 3. 필터 바 내 액션 버튼 배치
const actionContainer = filterBar.querySelector('#filter-bar-actions');
if (actionContainer) {
actionContainer.className = "header-action-group flex items-center gap-2 ml-auto self-end";
actionContainer.className = "header-action-group";
actionContainer.innerHTML = `
${showPcFlowBtn ? `
<button id="btn-goto-parts-master" class="btn btn-outline">