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:
78
server.js
78
server.js
@@ -28,6 +28,32 @@ const pool = mysql.createPool({
|
||||
queueLimit: 0
|
||||
});
|
||||
|
||||
// Database startup check (ensure job_spec_standards table exists)
|
||||
(async () => {
|
||||
let connection;
|
||||
try {
|
||||
connection = await pool.getConnection();
|
||||
await connection.query(`
|
||||
CREATE TABLE IF NOT EXISTS job_spec_standards (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
job_name VARCHAR(100) UNIQUE NOT NULL,
|
||||
cpu_standard VARCHAR(255),
|
||||
ram_standard VARCHAR(100),
|
||||
gpu_standard VARCHAR(100),
|
||||
min_score INT DEFAULT 0,
|
||||
remarks TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||
`);
|
||||
console.log('✅ job_spec_standards table verification completed.');
|
||||
} catch (err) {
|
||||
console.error('❌ Failed to verify/create job_spec_standards table:', err);
|
||||
} finally {
|
||||
if (connection) connection.release();
|
||||
}
|
||||
})();
|
||||
|
||||
// Error Handler
|
||||
const handleError = (res, err, label) => {
|
||||
console.error(`❌ [${label}] Error:`, err);
|
||||
@@ -151,6 +177,7 @@ app.get('/api/assets/master', async (req, res) => {
|
||||
const [users] = await connection.query('SELECT * FROM system_users');
|
||||
const [logs] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC');
|
||||
const [partsMaster] = await connection.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
|
||||
const [jobSpecs] = await connection.query('SELECT * FROM job_spec_standards ORDER BY job_name');
|
||||
|
||||
masterData.swInternal = swInternal;
|
||||
masterData.swExternal = swExternal;
|
||||
@@ -158,6 +185,7 @@ app.get('/api/assets/master', async (req, res) => {
|
||||
masterData.users = users;
|
||||
masterData.logs = logs;
|
||||
masterData.partsMaster = partsMaster;
|
||||
masterData.jobSpecs = jobSpecs;
|
||||
|
||||
res.json(masterData);
|
||||
} catch (err) {
|
||||
@@ -546,6 +574,56 @@ app.delete('/api/hardware-components/:id', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 6.7.1. Get Job Spec Standards
|
||||
app.get('/api/job-specs', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await pool.query('SELECT * FROM job_spec_standards ORDER BY job_name');
|
||||
res.json(rows);
|
||||
} catch (err) {
|
||||
handleError(res, err, 'GET JOB SPECS');
|
||||
}
|
||||
});
|
||||
|
||||
// 6.7.2. Save Job Spec Standard (Add or Update)
|
||||
app.post('/api/job-specs/save', async (req, res) => {
|
||||
const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks } = req.body;
|
||||
let connection;
|
||||
try {
|
||||
connection = await pool.getConnection();
|
||||
if (id) {
|
||||
await connection.query(
|
||||
'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, remarks = ? WHERE id = ?',
|
||||
[job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
|
||||
);
|
||||
} else {
|
||||
await connection.query(
|
||||
'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
|
||||
[job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
|
||||
);
|
||||
}
|
||||
res.json({ success: true });
|
||||
} catch (err) {
|
||||
handleError(res, err, 'SAVE JOB SPEC');
|
||||
} finally {
|
||||
if (connection) connection.release();
|
||||
}
|
||||
});
|
||||
|
||||
// 6.7.3. Delete Job Spec Standard
|
||||
app.delete('/api/job-specs/:id', async (req, res) => {
|
||||
const { id } = req.params;
|
||||
let connection;
|
||||
try {
|
||||
connection = await pool.getConnection();
|
||||
await connection.query('DELETE FROM job_spec_standards WHERE id = ?', [id]);
|
||||
res.json({ success: true });
|
||||
} catch (err) {
|
||||
handleError(res, err, 'DELETE JOB SPEC');
|
||||
} finally {
|
||||
if (connection) connection.release();
|
||||
}
|
||||
});
|
||||
|
||||
// 6.8. Get System Users List
|
||||
app.get('/api/system-users', async (req, res) => {
|
||||
try {
|
||||
|
||||
284
src/components/Modal/JobSpecModal.ts
Normal file
284
src/components/Modal/JobSpecModal.ts
Normal file
@@ -0,0 +1,284 @@
|
||||
import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
|
||||
import { BaseModal } from './BaseModal';
|
||||
import { setFieldValue } from './ModalUtils';
|
||||
import { UI_TEXT } from '../../core/schema';
|
||||
import { calculatePcScoreDeductive } from '../../core/utils';
|
||||
|
||||
class JobSpecModal extends BaseModal {
|
||||
constructor() {
|
||||
super('job-spec', '직무별 기준 사양');
|
||||
}
|
||||
|
||||
protected renderFrameHTML(): string {
|
||||
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
||||
const inputStyle = sharedStyle;
|
||||
|
||||
return `
|
||||
<div id="job-spec-asset-modal" class="modal-overlay hidden">
|
||||
<style>
|
||||
.autocomplete-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
background-color: white;
|
||||
border: 1px solid var(--border-color, #E2E8F0);
|
||||
border-top: none;
|
||||
border-radius: 0 0 4px 4px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.autocomplete-item {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.autocomplete-item:hover {
|
||||
background-color: #F1F5F9;
|
||||
color: #1E5149;
|
||||
font-weight: 600;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
||||
<div class="modal-header">
|
||||
<h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
|
||||
<button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
||||
</div>
|
||||
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
||||
<form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<input type="hidden" id="job-spec-id" name="id" />
|
||||
|
||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
|
||||
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
|
||||
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
||||
<div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
|
||||
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
||||
<div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
|
||||
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
||||
<div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
|
||||
<input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
|
||||
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
|
||||
<button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
||||
<div class="footer-actions" style="display: flex; gap: 8px;">
|
||||
<button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
||||
<button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
||||
<button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected initChildLogic(onSave: () => void, closeModals: () => void): void {
|
||||
const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
|
||||
const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
|
||||
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
|
||||
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
if (!this.currentAsset) return;
|
||||
if (!this.isEditMode) {
|
||||
this.setEditLockMode('edit');
|
||||
this.isEditMode = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
|
||||
const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
|
||||
const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
|
||||
const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
|
||||
const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
|
||||
const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
|
||||
|
||||
if (!jobName) {
|
||||
alert('직무명을 입력해 주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
const updated = {
|
||||
id: this.currentAsset.id || null,
|
||||
job_name: jobName,
|
||||
cpu_standard: cpuStd,
|
||||
ram_standard: ramStd,
|
||||
gpu_standard: gpuStd,
|
||||
min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
|
||||
remarks: remarks
|
||||
};
|
||||
|
||||
if (await saveJobSpec(updated)) {
|
||||
alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
|
||||
onSave(); this.close(); closeModals();
|
||||
}
|
||||
});
|
||||
|
||||
revertBtn.addEventListener('click', () => {
|
||||
this.setEditLockMode('view');
|
||||
if (this.currentAsset) this.fillFormData(this.currentAsset);
|
||||
});
|
||||
|
||||
deleteBtn.addEventListener('click', async () => {
|
||||
if (!this.currentAsset || !this.currentAsset.id) return;
|
||||
if (!confirm('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
|
||||
|
||||
if (await deleteJobSpec(this.currentAsset.id)) {
|
||||
alert('성공적으로 삭제되었습니다.');
|
||||
onSave(); this.close(); closeModals();
|
||||
}
|
||||
});
|
||||
|
||||
// 자동완성 바인딩
|
||||
this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
|
||||
this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
|
||||
this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
|
||||
|
||||
// 실시간 점수 계산 이벤트 바인딩
|
||||
const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
|
||||
inputs.forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
el?.addEventListener('input', () => this.updateMinScore());
|
||||
el?.addEventListener('change', () => this.updateMinScore());
|
||||
});
|
||||
}
|
||||
|
||||
private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
|
||||
const input = document.getElementById(inputId) as HTMLInputElement;
|
||||
const list = document.getElementById(autocompleteId) as HTMLDivElement;
|
||||
if (!input || !list) return;
|
||||
|
||||
const showList = (filterText: string = '') => {
|
||||
if (!this.isEditMode) return;
|
||||
const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
|
||||
const filtered = filterText
|
||||
? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
|
||||
: items;
|
||||
|
||||
if (filtered.length === 0) {
|
||||
list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
|
||||
} else {
|
||||
list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
|
||||
}
|
||||
list.classList.remove('hidden');
|
||||
};
|
||||
|
||||
input.addEventListener('focus', () => {
|
||||
showList(input.value);
|
||||
});
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
showList(input.value);
|
||||
});
|
||||
|
||||
list.addEventListener('mousedown', (e) => {
|
||||
const item = (e.target as HTMLElement).closest('.autocomplete-item');
|
||||
if (item && item.getAttribute('data-val')) {
|
||||
input.value = item.getAttribute('data-val') || '';
|
||||
list.classList.add('hidden');
|
||||
this.updateMinScore();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (e.target !== input && !list.contains(e.target as Node)) {
|
||||
list.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private updateMinScore(): void {
|
||||
const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
|
||||
const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
|
||||
const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
|
||||
|
||||
const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
|
||||
|
||||
const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
|
||||
if (minScoreEl) {
|
||||
minScoreEl.value = score.toString();
|
||||
}
|
||||
}
|
||||
|
||||
protected fillFormData(asset: any): void {
|
||||
setFieldValue('job-spec-id', asset.id || '');
|
||||
setFieldValue('job-spec-job-name', asset.job_name || '');
|
||||
setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
|
||||
setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
|
||||
setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
|
||||
setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
|
||||
setFieldValue('job-spec-remarks', asset.remarks || '');
|
||||
}
|
||||
|
||||
protected onAfterOpen(asset: any, mode: string): void {
|
||||
const titleEl = document.getElementById('job-spec-modal-title');
|
||||
|
||||
if (titleEl) {
|
||||
if (mode === 'add') {
|
||||
titleEl.textContent = '신규 직무별 기준 사양 등록';
|
||||
} else {
|
||||
titleEl.textContent = '직무별 기준 사양 상세 편집';
|
||||
}
|
||||
}
|
||||
|
||||
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
|
||||
const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
|
||||
|
||||
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||
|
||||
if (mode === 'add') {
|
||||
this.setEditLockMode('edit');
|
||||
this.isEditMode = true;
|
||||
saveBtn.textContent = '등록';
|
||||
saveBtn.style.display = 'block';
|
||||
} else {
|
||||
this.setEditLockMode('view');
|
||||
this.isEditMode = false;
|
||||
saveBtn.textContent = '수정';
|
||||
saveBtn.style.display = 'block';
|
||||
}
|
||||
|
||||
this.updateMinScore();
|
||||
}
|
||||
}
|
||||
|
||||
export const jobSpecModal = new JobSpecModal();
|
||||
|
||||
export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
|
||||
jobSpecModal.init(onSave, closeModals);
|
||||
}
|
||||
|
||||
export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
||||
jobSpecModal.open(asset, mode);
|
||||
}
|
||||
@@ -160,6 +160,16 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
|
||||
title: '임직원 사용자 관리',
|
||||
description: 'IT 자산 할당 및 관리의 기준이 되는 사내 임직원(사용자) 정보를 데이터베이스 기반으로 직접 등록하고 수정합니다.',
|
||||
icon: 'users'
|
||||
},
|
||||
'부품 마스터': {
|
||||
title: '부품 표준 정보 관리',
|
||||
description: 'PC 사양 적정성 평가의 기준이 되는 부품 표준 정보 및 등급별 감점 점수를 관리합니다.',
|
||||
icon: 'cpu'
|
||||
},
|
||||
'직무별 기준 사양': {
|
||||
title: '직무별 기준 사양 관리',
|
||||
description: 'BIM 모델러, 개발자, 엔지니어 등 사내 직무별 권장 하드웨어 기준 및 성능 합격 점수를 관리합니다.',
|
||||
icon: 'sliders'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -28,7 +28,10 @@ export const state: AppState = {
|
||||
swInternal: [], swExternal: [], cloud: [], domain: [],
|
||||
cost: [], vip: [],
|
||||
hw: [], sw: [],
|
||||
swUsers: [], logs: []
|
||||
swUsers: [], logs: [],
|
||||
jobSpecs: [],
|
||||
subSw: [],
|
||||
permSw: []
|
||||
}
|
||||
};
|
||||
|
||||
@@ -46,6 +49,7 @@ export async function loadMasterDataFromDB() {
|
||||
state.masterData = {
|
||||
...state.masterData,
|
||||
...data,
|
||||
jobSpecs: data.jobSpecs || [],
|
||||
logs: (data.logs || []).map((l: any) => ({
|
||||
...l,
|
||||
assetId: l.asset_id || l.assetId,
|
||||
@@ -196,3 +200,37 @@ export async function deleteSystemUser(id: string) {
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export async function saveJobSpec(spec: any) {
|
||||
try {
|
||||
const url = `${API_BASE_URL}/api/job-specs/save`;
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(spec)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||
return true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('직무별 기준 사양 저장 실패:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export async function deleteJobSpec(id: number) {
|
||||
try {
|
||||
const url = `${API_BASE_URL}/api/job-specs/${id}`;
|
||||
const response = await fetch(url, { method: 'DELETE' });
|
||||
|
||||
if (response.ok) {
|
||||
await loadMasterDataFromDB(); // 전역 상태 갱신
|
||||
return true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('직무별 기준 사양 삭제 실패:', err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -288,11 +288,12 @@ export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string,
|
||||
/**
|
||||
* 성능 점수 기준 등급 뱃지 메타 정보 가져오기
|
||||
*/
|
||||
export function getPcGrade(score: number): { name: string; class: string; color: string } {
|
||||
export function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
|
||||
if (score >= 85) return { name: '최상급', class: 'b-purple', color: '#7C3AED' };
|
||||
if (score >= 70) return { name: '상급', class: 'b-primary', color: '#4F46E5' };
|
||||
if (score >= 40) return { name: '중급', class: 'b-green', color: '#10B981' };
|
||||
return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
|
||||
if (score >= 20 && !isWin11Incompatible) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
|
||||
return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -9,7 +9,9 @@ import { initSwModal, openSwModal } from './components/Modal/SWModal';
|
||||
import { initSwUserModal } from './components/Modal/SWUserModal';
|
||||
import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
|
||||
import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
|
||||
import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
|
||||
import { initUserModal, openUserModal } from './components/Modal/UserModal';
|
||||
import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
|
||||
import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
|
||||
import { initGuide } from './components/Guide';
|
||||
import { pcFlowModal } from './components/Modal/PCFlowModal';
|
||||
@@ -72,6 +74,7 @@ function initApp() {
|
||||
}, closeAllModals);
|
||||
initDomainModal(() => refreshAllData(), closeAllModals);
|
||||
initPartsMasterModal(() => refreshAllData(), closeAllModals);
|
||||
initJobSpecModal(() => refreshAllData(), closeAllModals);
|
||||
initUserModal(() => refreshAllData(), closeAllModals);
|
||||
|
||||
initDashboardDetailModal();
|
||||
@@ -101,7 +104,11 @@ function initApp() {
|
||||
|
||||
if (cat === 'hw') {
|
||||
if (tab === '부품 마스터') {
|
||||
openPartsMasterModal({ id: '' } as any, 'add');
|
||||
if (activePartsMasterSubTab === 'job-spec') {
|
||||
openJobSpecModal({ id: '' } as any, 'add');
|
||||
} else {
|
||||
openPartsMasterModal({ id: '' } as any, 'add');
|
||||
}
|
||||
} else {
|
||||
openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
|
||||
}
|
||||
|
||||
@@ -18,12 +18,23 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
|
||||
// 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
|
||||
container.innerHTML = `
|
||||
<<<<<<< HEAD
|
||||
<div class="view-container bg-soft" style="padding: 1.5rem 2rem; height: calc(100vh - var(--header-height) - 28px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.25rem;">
|
||||
|
||||
<!-- 대시보드 타이틀 및 사용조직 필터 -->
|
||||
<div class="flex justify-between items-end flex-shrink-0 mb-4">
|
||||
<div style="border-left: 4px solid var(--primary); padding-left: 8px;">
|
||||
<h2 class="dashboard-section-title mb-0">개인 PC 자산 대시보드</h2>
|
||||
=======
|
||||
<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 style="display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; padding-bottom: 0.4rem;">
|
||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px;">
|
||||
<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>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
|
||||
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
|
||||
@@ -42,9 +53,10 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
</div>
|
||||
|
||||
<!-- 메인 2단 컬럼 레이아웃 (5:5 비율) -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; flex: 1; min-height: 0; margin-bottom: 0.25rem;">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; flex: 1; min-height: 0; margin-bottom: 0.1rem;">
|
||||
|
||||
<!-- 좌측 컬럼 (Left Column) -->
|
||||
<<<<<<< HEAD
|
||||
<div class="flex-col gap-4 min-h-0">
|
||||
|
||||
<!-- 상단 핵심 지표 그룹 카드 (1개 카드로 통합, 4개 지표 가로 배치) -->
|
||||
@@ -54,50 +66,101 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
<div class="flex-1 border-r border-hairline pr-4">
|
||||
<div style="border-left: 4px solid var(--primary); padding-left: 8px; margin-bottom: 0.5rem;" class="flex items-center">
|
||||
<span class="detail-label-sm font-bold text-primary">보유 자산 수량</span>
|
||||
=======
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; min-height: 0;">
|
||||
|
||||
<!-- 핵심 지표 카드 -->
|
||||
<div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.9rem; flex-shrink: 0;">
|
||||
|
||||
<!-- 1. 보유 자산 수량 -->
|
||||
<div style="border-right: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; padding-bottom: 0.65rem; padding-right: 1.0rem;">
|
||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div>
|
||||
<<<<<<< HEAD
|
||||
<div id="metric-total-pcs" class="stat-value" style="line-height: 1; margin-bottom: 0.2rem;">0대</div>
|
||||
<span class="detail-label-sm text-muted">전사 보유 개인용 PC</span>
|
||||
=======
|
||||
<div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">전사 보유 개인용 PC</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<!-- 2. 사양 부족 검토 -->
|
||||
<div id="card-under-spec" class="flex-1 border-r border-hairline px-4 cursor-pointer hover:opacity-70 transition-opacity">
|
||||
<div style="border-left: 4px solid var(--danger); padding-left: 8px; margin-bottom: 0.5rem;" class="flex items-center">
|
||||
<span class="detail-label-sm font-bold text-primary">사양 부족 검토</span>
|
||||
=======
|
||||
<!-- 2. 사양 부족 -->
|
||||
<div id="card-under-spec" style="border-bottom: 1px solid #EEF2F6; padding-bottom: 0.65rem; padding-left: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||||
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div>
|
||||
<<<<<<< HEAD
|
||||
<div id="metric-under-spec" class="stat-value text-danger" style="line-height: 1; margin-bottom: 0.2rem;">0명</div>
|
||||
<span class="detail-label-sm text-muted">사양 교체 권고 자산</span>
|
||||
=======
|
||||
<div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 교체 권고 자산</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<!-- 3. 오버스펙 검토 -->
|
||||
<div id="card-over-spec" class="flex-1 border-r border-hairline px-4 cursor-pointer hover:opacity-70 transition-opacity">
|
||||
<div style="border-left: 4px solid var(--color-orange); padding-left: 8px; margin-bottom: 0.5rem;" class="flex items-center">
|
||||
<span class="detail-label-sm font-bold text-primary">오버스펙 검토</span>
|
||||
=======
|
||||
<!-- 3. 오버 스펙 -->
|
||||
<div id="card-over-spec" style="border-right: 1px solid #EEF2F6; padding-top: 0.65rem; padding-right: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||||
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div>
|
||||
<<<<<<< HEAD
|
||||
<div id="metric-over-spec" class="stat-value text-orange" style="line-height: 1; margin-bottom: 0.2rem;">0명</div>
|
||||
<span class="detail-label-sm text-muted">사양 회수 권고 자산</span>
|
||||
=======
|
||||
<div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 회수 권고 자산</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. 윈도우 11 불가 PC -->
|
||||
<<<<<<< HEAD
|
||||
<div id="card-win11-incompatible" class="flex-1 pl-4 cursor-pointer hover:opacity-70 transition-opacity">
|
||||
<div style="border-left: 4px solid var(--color-blue); padding-left: 8px; margin-bottom: 0.5rem;" class="flex items-center">
|
||||
<span class="detail-label-sm font-bold text-primary">윈도우 11 불가 PC</span>
|
||||
=======
|
||||
<div id="card-win11-incompatible" style="padding-top: 0.65rem; padding-left: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
|
||||
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div>
|
||||
<<<<<<< HEAD
|
||||
<div id="metric-win11-incompatible" class="stat-value text-blue" style="line-height: 1; margin-bottom: 0.2rem;">0대</div>
|
||||
<span class="detail-label-sm text-muted">업데이트 미지원 하드웨어</span>
|
||||
=======
|
||||
<div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">업데이트 미지원 하드웨어</span>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,6 +168,7 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
</div>
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
<!-- PC 성능 등급별 분포 현황 (등급별 게이지 + 우측 사양 적정성 도넛차트) -->
|
||||
<div class="border-b border-hairline flex flex-row items-center gap-6" style="padding: 1.25rem 0.25rem; border: none; border-bottom: 1px solid var(--hairline); flex: 1.1; min-height: 0;">
|
||||
|
||||
@@ -161,12 +225,95 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background: #1E8E7C;"></span>상</div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background: #10B981;"></span>중</div>
|
||||
<div class="flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background: #94A3B8;"></span>보급</div>
|
||||
</div>
|
||||
=======
|
||||
<!-- 등급별 자산 종합 현황 (좌측 하단 단독 배치 및 크기 확대) -->
|
||||
<div style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.0; min-height: 0;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 0.9rem; justify-content: flex-start; padding-left: 0.5rem; height: 100%;">
|
||||
<!-- 메인 제목 -->
|
||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.4rem; display: flex; align-items: center; line-height: 1; height: 1.7rem; flex-shrink: 0;">
|
||||
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황</span>
|
||||
</div>
|
||||
|
||||
<!-- 종합 매트릭스 테이블 (폰트 크기 1.25rem 으로 확대 및 꽉 채우기) -->
|
||||
<div style="width: 100%; overflow-x: auto; flex: 1; display: flex; align-items: stretch;">
|
||||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.25rem; height: 100%;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
|
||||
<th style="padding: 14px 10px; width: 32%; font-size: 1.25rem;">구분 (등급)</th>
|
||||
<th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">보유량</th>
|
||||
<th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">운영중</th>
|
||||
<th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">재고</th>
|
||||
<th style="padding: 14px 10px; text-align: center; width: 17%; color: #EF4444; font-size: 1.25rem;">구매 필요</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pc-grade-matrix-tbody">
|
||||
<!-- Dynamic Matrix Contents -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 우측 컬럼 (Right Column) -->
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem; min-height: 0;">
|
||||
|
||||
<!-- 직무별 사양 적정성 분석 차트 카드 -->
|
||||
<div style="background: transparent; border-radius: 0; padding: 0.7rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.0; min-height: 0;">
|
||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
|
||||
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">직무별 사양 적정성 분석</span>
|
||||
</div>
|
||||
<div style="flex: 1; min-height: 0; width: 100%; position: relative;">
|
||||
<canvas id="chart-job-scores" style="width: 100%; height: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 우측 하단: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (너비 축소) -->
|
||||
<div style="background: transparent; border-radius: 0; padding: 0.7rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1.15fr 1.25fr; gap: 0.8rem; flex: 1.0; min-height: 0;">
|
||||
|
||||
<!-- 1열: 등급별 보유 비율 도넛 영역 -->
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.7rem; padding-top: 0.1rem; min-height: 0; height: 100%;">
|
||||
<!-- 서브 제목 -->
|
||||
<div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.5rem;">
|
||||
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span>
|
||||
</div>
|
||||
|
||||
<!-- 도넛 그래프 (크기 조절 및 수직 가운데 정렬) -->
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
|
||||
<div style="width: 180px; height: 180px; position: relative;">
|
||||
<canvas id="chart-overall-donut"></canvas>
|
||||
</div>
|
||||
<!-- 커스텀 범례 (폰트 최적화) -->
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; justify-content: center; align-items: center; margin-top: 10px; font-size: 1.05rem; font-weight: 700; color: #475569; width: 100%;">
|
||||
<div style="display: flex; align-items: center; gap: 4px;">
|
||||
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #11302B;"></span>
|
||||
<span>최상급</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;">
|
||||
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1E8E7C;"></span>
|
||||
<span>상급</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;">
|
||||
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10B981;"></span>
|
||||
<span>중급</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;">
|
||||
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F59E0B;"></span>
|
||||
<span>보급</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 4px;">
|
||||
<span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #EF4444;"></span>
|
||||
<span>교체 대상</span>
|
||||
</div>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<!-- 유효 재고 현황 -->
|
||||
<div class="flex flex-col gap-4 flex-1 min-h-0" style="padding: 1.25rem 0.25rem; border-bottom: 1px solid var(--hairline);">
|
||||
<div style="border-left: 4px solid var(--primary); padding-left: 8px; margin-bottom: 0.35rem;" class="flex items-center">
|
||||
@@ -194,11 +341,32 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
<div class="summary-grade-stock-entry stat-value" style="color: #94A3B8;">0대</div>
|
||||
<span class="detail-label-sm font-bold text-muted">보급 재고</span>
|
||||
</div>
|
||||
=======
|
||||
<!-- 2열: 연도별 PC 노후도 및 교체 주기 예측 카드 (너비 줄임) -->
|
||||
<div style="display: flex; flex-direction: column; min-height: 0;">
|
||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.5rem;">
|
||||
<span style="font-size: 1.25rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span>
|
||||
</div>
|
||||
<div style="flex: 1; overflow: hidden; min-height: 0; padding-right: 0.2rem;">
|
||||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.15rem;">
|
||||
<thead style="position: sticky; top: 0; background: white; z-index: 5;">
|
||||
<tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
|
||||
<th style="padding: 12px 10px; width: 45%; font-size: 1.15rem;">구분 (연한)</th>
|
||||
<th style="padding: 12px 10px; text-align: center; width: 25%; font-size: 1.15rem;">보유</th>
|
||||
<th style="padding: 12px 10px; text-align: center; width: 30%; font-size: 1.15rem;">권장 조치</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pc-aging-tbody">
|
||||
<!-- Dynamic Aging Contents -->
|
||||
</tbody>
|
||||
</table>
|
||||
>>>>>>> origin/main
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<<<<<<< HEAD
|
||||
|
||||
<!-- 우측 컬럼 (Right Column) -->
|
||||
<div class="flex-col gap-4 min-h-0">
|
||||
@@ -233,6 +401,8 @@ export function renderHwDashboard(container: HTMLElement) {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
=======
|
||||
>>>>>>> origin/main
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -288,7 +458,14 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
p._pc_score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
|
||||
});
|
||||
|
||||
// 3. 전사 직무군별 평균 점수 산출
|
||||
// 3. 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 jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
|
||||
pcs.forEach((p: any) => {
|
||||
const score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
|
||||
@@ -301,18 +478,19 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
|
||||
});
|
||||
|
||||
// 4. 등급 집계 (보유량 vs 유효 재고량)
|
||||
// 4. 등급 집계 (보유량 vs 실제 할당량 vs 유효 재고량 vs 사양 부족량)
|
||||
const isStock = (p: any) => {
|
||||
return p.hw_status === '재고' ||
|
||||
p.hw_status === '대기' ||
|
||||
!(p.user_current || '').trim();
|
||||
};
|
||||
|
||||
const gradeCounts = {
|
||||
premium: { total: 0, stock: 0 },
|
||||
high: { total: 0, stock: 0 },
|
||||
normal: { total: 0, stock: 0 },
|
||||
entry: { total: 0, stock: 0 }
|
||||
const matrix = {
|
||||
premium: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
|
||||
high: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
|
||||
normal: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
|
||||
entry: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
|
||||
replace: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] }
|
||||
};
|
||||
|
||||
let scoreSum = 0;
|
||||
@@ -325,36 +503,81 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
const score = p._pc_score;
|
||||
scoreSum += score;
|
||||
const stockYn = isStock(p);
|
||||
const win11Incompatible = isWindows11Incompatible(p.cpu, p.ram);
|
||||
|
||||
// 1. 현재 물리적 자산 등급 판정
|
||||
let currentGradeKey: keyof typeof matrix;
|
||||
if (score >= 85) {
|
||||
gradeCounts.premium.total++;
|
||||
if (stockYn) gradeCounts.premium.stock++;
|
||||
currentGradeKey = 'premium';
|
||||
} else if (score >= 70) {
|
||||
gradeCounts.high.total++;
|
||||
if (stockYn) gradeCounts.high.stock++;
|
||||
currentGradeKey = 'high';
|
||||
} else if (score >= 40) {
|
||||
gradeCounts.normal.total++;
|
||||
if (stockYn) gradeCounts.normal.stock++;
|
||||
currentGradeKey = 'normal';
|
||||
} else if (score >= 20 && !win11Incompatible) {
|
||||
currentGradeKey = 'entry';
|
||||
} else {
|
||||
gradeCounts.entry.total++;
|
||||
if (stockYn) gradeCounts.entry.stock++;
|
||||
currentGradeKey = 'replace';
|
||||
}
|
||||
|
||||
// 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
|
||||
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
||||
const avg = jobScores[job]?.avg || 0;
|
||||
const currentTarget = matrix[currentGradeKey];
|
||||
currentTarget.pcs.push(p);
|
||||
currentTarget.total++;
|
||||
|
||||
if (avg > 0 && job !== '재고PC' && !stockYn) {
|
||||
if (score < avg * 0.6) {
|
||||
p._spec_status = '사양 부족';
|
||||
if (stockYn) {
|
||||
currentTarget.stock++;
|
||||
currentTarget.stockPcs.push(p);
|
||||
} else {
|
||||
currentTarget.active++;
|
||||
currentTarget.activePcs.push(p);
|
||||
|
||||
// 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
|
||||
const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
|
||||
const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
|
||||
|
||||
let isUnder = false;
|
||||
|
||||
if (standardScore > 0 && job !== '재고PC') {
|
||||
if (score < standardScore * 0.6) {
|
||||
isUnder = true;
|
||||
p._spec_status = '사양 부족';
|
||||
} else if (score > standardScore * 1.5 && !win11Incompatible) {
|
||||
p._spec_status = '오버스펙';
|
||||
criticalList.push(p);
|
||||
overSpecCount++;
|
||||
} else if (win11Incompatible) {
|
||||
isUnder = true;
|
||||
p._spec_status = '사양 부족';
|
||||
} else {
|
||||
p._spec_status = '적정';
|
||||
}
|
||||
} else {
|
||||
if (win11Incompatible) {
|
||||
isUnder = true;
|
||||
p._spec_status = '사양 부족';
|
||||
} else {
|
||||
p._spec_status = '적정';
|
||||
}
|
||||
}
|
||||
|
||||
if (isUnder) {
|
||||
criticalList.push(p);
|
||||
underSpecCount++;
|
||||
} else if (score > avg * 1.5) {
|
||||
p._spec_status = '오버스펙';
|
||||
criticalList.push(p);
|
||||
overSpecCount++;
|
||||
} else {
|
||||
p._spec_status = '적정';
|
||||
|
||||
// 2. 사양 부족 시 교체받아야 할 직무별 권장 목표 등급 판정
|
||||
let targetGradeKey: keyof typeof matrix;
|
||||
if (standardScore >= 85) {
|
||||
targetGradeKey = 'premium';
|
||||
} else if (standardScore >= 70) {
|
||||
targetGradeKey = 'high';
|
||||
} else if (standardScore >= 40) {
|
||||
targetGradeKey = 'normal';
|
||||
} else {
|
||||
targetGradeKey = 'entry'; // 교체 대상은 최소 보급형 사양으로 교체
|
||||
}
|
||||
|
||||
const targetGrade = matrix[targetGradeKey];
|
||||
targetGrade.under++;
|
||||
targetGrade.underPcs.push(p);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -364,39 +587,120 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
}
|
||||
});
|
||||
|
||||
// 5. 핵심 텍스트형 지표 갱신
|
||||
// 5. 핵심 텍스트형 요약 지표 갱신
|
||||
document.getElementById('metric-total-pcs')!.textContent = `${filtered.length}대`;
|
||||
document.getElementById('metric-under-spec')!.textContent = `${underSpecCount}명`;
|
||||
document.getElementById('metric-over-spec')!.textContent = `${overSpecCount}명`;
|
||||
document.getElementById('metric-under-spec')!.textContent = `${underSpecCount}대`;
|
||||
document.getElementById('metric-over-spec')!.textContent = `${overSpecCount}대`;
|
||||
document.getElementById('metric-win11-incompatible')!.textContent = `${win11IncompatibleCount}대`;
|
||||
|
||||
|
||||
// 6. 등급별 리스트 데이터 바 업데이트
|
||||
const total = filtered.length || 1;
|
||||
// 6. 종합 매트릭스 테이블 렌더링 및 바인딩
|
||||
const matrixTbody = document.getElementById('pc-grade-matrix-tbody')!;
|
||||
|
||||
const updateCard = (id: string, counts: { total: number; stock: number }) => {
|
||||
const card = document.getElementById(id)!;
|
||||
const rate = Math.round((counts.total / total) * 100);
|
||||
const renderMatrixRow = (gradeKey: keyof typeof matrix, label: string, color: string, shortage: number) => {
|
||||
const data = matrix[gradeKey];
|
||||
const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
|
||||
|
||||
card.querySelector('.grade-count')!.textContent = `${counts.total}대`;
|
||||
card.querySelector('.grade-rate')!.textContent = `(${rate}%)`;
|
||||
const cellStyle = `padding: 14px 12px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.25rem;`;
|
||||
const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
|
||||
|
||||
return `
|
||||
<tr style="border-bottom: 1px solid #F1F5F9;">
|
||||
<td style="padding: 14px 12px; font-weight: 800; color: ${color}; font-size: 1.25rem;">${label}</td>
|
||||
<td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:1.0rem; 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="stock" style="${cellStyle}" ${hoverEvents}>${data.stock}대</td>
|
||||
<td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${shortage}대</td>
|
||||
</tr>
|
||||
`;
|
||||
};
|
||||
|
||||
updateCard('grade-premium', gradeCounts.premium);
|
||||
updateCard('grade-high', gradeCounts.high);
|
||||
updateCard('grade-normal', gradeCounts.normal);
|
||||
updateCard('grade-entry', gradeCounts.entry);
|
||||
const totalPcs = filtered.length;
|
||||
const totalActive = matrix.premium.active + matrix.high.active + matrix.normal.active + matrix.entry.active + matrix.replace.active;
|
||||
const totalStock = matrix.premium.stock + matrix.high.stock + matrix.normal.stock + matrix.entry.stock + matrix.replace.stock;
|
||||
|
||||
const premiumShortage = Math.max(0, matrix.premium.under - matrix.premium.stock);
|
||||
const highShortage = Math.max(0, matrix.high.under - matrix.high.stock);
|
||||
const normalShortage = Math.max(0, matrix.normal.under - matrix.normal.stock);
|
||||
|
||||
// 보급 PC 구매 필요 = 보급 under - 보급 stock
|
||||
const entryShortage = Math.max(0, matrix.entry.under - matrix.entry.stock);
|
||||
|
||||
// 교체 대상 PC 자체는 새로 구매하는 기종이 아니므로 구매 필요 0대
|
||||
const replaceShortage = 0;
|
||||
|
||||
const totalShortage = premiumShortage + highShortage + normalShortage + entryShortage + replaceShortage;
|
||||
|
||||
// 6.2 Inventory Summary 수치 업데이트 (골드/민트 텍스트 영역)
|
||||
const container = document.getElementById('view-body')?.parentElement || document.body;
|
||||
const setStockVal = (cls: string, val: number) => {
|
||||
const el = container.querySelector(`.${cls}`);
|
||||
if (el) el.textContent = `${val}대`;
|
||||
};
|
||||
setStockVal('summary-grade-stock-premium', gradeCounts.premium.stock);
|
||||
setStockVal('summary-grade-stock-high', gradeCounts.high.stock);
|
||||
setStockVal('summary-grade-stock-normal', gradeCounts.normal.stock);
|
||||
setStockVal('summary-grade-stock-entry', gradeCounts.entry.stock);
|
||||
const cellStyleHeader = `padding: 14px 12px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.25rem;`;
|
||||
const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
|
||||
|
||||
matrixTbody.innerHTML = `
|
||||
${renderMatrixRow('premium', '최상급 PC (85점 이상)', '#11302B', premiumShortage)}
|
||||
${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)}
|
||||
${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)}
|
||||
${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
|
||||
${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)}
|
||||
<tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;">
|
||||
<td style="padding: 14px 12px; color: #1E293B; font-weight: 800; font-size: 1.25rem;">합계 (Total)</td>
|
||||
<td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:1.125rem; 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>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
// 셀별 동적 클릭 리스너 바인딩
|
||||
matrixTbody.querySelectorAll('.matrix-cell').forEach(cell => {
|
||||
cell.addEventListener('click', () => {
|
||||
const grade = cell.getAttribute('data-grade')!;
|
||||
const type = cell.getAttribute('data-type')!;
|
||||
|
||||
let targetList: any[] = [];
|
||||
let title = '';
|
||||
|
||||
const getGradeLabel = (g: string) => {
|
||||
if (g === 'premium') return '최상급 PC';
|
||||
if (g === 'high') return '상급 PC';
|
||||
if (g === 'normal') return '중급 PC';
|
||||
if (g === 'entry') return '보급 PC';
|
||||
if (g === 'replace') return '교체 대상 PC';
|
||||
return '전체 PC';
|
||||
};
|
||||
|
||||
const getTypeLabel = (t: string) => {
|
||||
if (t === 'total') return '보유';
|
||||
if (t === 'active') return '운영중';
|
||||
if (t === 'stock') return '재고';
|
||||
if (t === 'under') return '구매 필요';
|
||||
return '';
|
||||
};
|
||||
|
||||
if (grade === 'all') {
|
||||
if (type === 'total') {
|
||||
targetList = filtered;
|
||||
} else if (type === 'active') {
|
||||
targetList = filtered.filter(p => !isStock(p));
|
||||
} else if (type === 'stock') {
|
||||
targetList = filtered.filter(p => isStock(p));
|
||||
} else if (type === 'under') {
|
||||
targetList = criticalList.filter(p => p._spec_status === '사양 부족');
|
||||
}
|
||||
} else {
|
||||
const data = matrix[grade as keyof typeof matrix];
|
||||
if (type === 'total') {
|
||||
targetList = data.pcs;
|
||||
} else if (type === 'active') {
|
||||
targetList = data.activePcs;
|
||||
} else if (type === 'stock') {
|
||||
targetList = data.stockPcs;
|
||||
} else if (type === 'under') {
|
||||
targetList = data.underPcs;
|
||||
}
|
||||
}
|
||||
|
||||
title = `${getGradeLabel(grade)} - ${getTypeLabel(type)} 자산 목록`;
|
||||
showMiniListModal(title, targetList);
|
||||
});
|
||||
});
|
||||
|
||||
// 7. 연도별 PC 노후도 집계 및 렌더링
|
||||
const agingCounts = {
|
||||
@@ -424,9 +728,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
const renderAgingRow = (label: string, list: any[], badgeText: string, badgeStyle: string, ageGroupKey: string) => {
|
||||
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'">
|
||||
<td style="padding:14px 4px; font-weight:700; color:#334155;">${label}</td>
|
||||
<td style="padding:14px 4px; text-align:center; font-weight:700; color:#334155;">${list.length}대</td>
|
||||
<td style="padding:14px 4px; text-align:center;">
|
||||
<td style="padding:10px 10px; font-weight:700; color:#334155; font-size: 1.15rem;">${label}</td>
|
||||
<td style="padding:10px 10px; text-align:center; font-weight:700; color:#334155; font-size: 1.15rem;">${list.length}대</td>
|
||||
<td style="padding:10px 10px; text-align:center;">
|
||||
<span style="padding:2px 8px; border-radius:4px; font-size:14px; font-weight:800; ${badgeStyle}">${badgeText}</span>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -454,7 +758,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
});
|
||||
});
|
||||
|
||||
// 8. 각 등급 행 클릭 리스너 설정
|
||||
// 8. 요약 지표 카드 클릭 리스너 설정
|
||||
const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean) => {
|
||||
const card = document.getElementById(id)!;
|
||||
if (!card) return;
|
||||
@@ -470,23 +774,11 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
};
|
||||
};
|
||||
|
||||
bindCardClick('grade-premium', '최상급 PC', p => p._pc_score >= 85);
|
||||
bindCardClick('grade-high', '상급 PC', p => p._pc_score >= 70 && p._pc_score < 85);
|
||||
bindCardClick('grade-normal', '중급 PC', p => p._pc_score >= 40 && p._pc_score < 70);
|
||||
bindCardClick('grade-entry', '보급 PC', p => p._pc_score < 40);
|
||||
|
||||
// 사양 부족 / 오버스펙 / 윈도우 11 불가 클릭 리스너 설정
|
||||
bindCardClick('card-under-spec', '사양 부족 검토 대상', p => p._spec_status === '사양 부족');
|
||||
bindCardClick('card-over-spec', '오버스펙 검토 대상', p => p._spec_status === '오버스펙');
|
||||
// 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정
|
||||
bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족');
|
||||
bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙');
|
||||
bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
|
||||
|
||||
|
||||
// 8.2 유효 재고 현황 클릭 리스너 설정
|
||||
bindCardClick('stock-premium-card', '최상급 유효 재고', p => p._pc_score >= 85 && isStock(p));
|
||||
bindCardClick('stock-high-card', '상급 유효 재고', p => p._pc_score >= 70 && p._pc_score < 85 && isStock(p));
|
||||
bindCardClick('stock-normal-card', '중급 유효 재고', p => p._pc_score >= 40 && p._pc_score < 70 && isStock(p));
|
||||
bindCardClick('stock-entry-card', '보급 유효 재고', p => p._pc_score < 40 && isStock(p));
|
||||
|
||||
// 9. 직무별 사양 적정성 대수 연산 및 차트 데이터 셋 구성 (누적 막대 그래프화)
|
||||
const activeJobs = Array.from(
|
||||
new Set(filtered.map((p: any) => p[ASSET_SCHEMA.USER_POSITION.key] || '미분류').filter(j => j !== '재고PC'))
|
||||
@@ -527,7 +819,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
|
||||
|
||||
// 10. 차트들 렌더링 호출
|
||||
renderChart(activeJobs, underData, normalData, overData, filtered);
|
||||
renderDonutChart(gradeCounts.premium.total, gradeCounts.high.total, gradeCounts.normal.total, gradeCounts.entry.total);
|
||||
renderDonutChart(matrix.premium.total, matrix.high.total, matrix.normal.total, matrix.entry.total, matrix.replace.total);
|
||||
|
||||
// 전역 상태 등록
|
||||
state.activeCharts = [jobChartInstance, donutChartInstance];
|
||||
@@ -559,7 +851,7 @@ function showMiniListModal(title: string, list: any[]) {
|
||||
`;
|
||||
|
||||
modal.innerHTML = `
|
||||
<div style="background: white; border-radius: 12px; width: 680px; max-width: 90%; max-height: 80%; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); overflow: hidden; border: 1px solid #E2E8F0; animation: modalFadeIn 0.2s ease-out; color: #1E293B;">
|
||||
<div style="background: white; border-radius: 12px; width: 800px; max-width: 95%; max-height: 80%; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); overflow: hidden; border: 1px solid #E2E8F0; animation: modalFadeIn 0.2s ease-out; color: #1E293B;">
|
||||
<div style="padding: 1.25rem 1.75rem; border-bottom: 1px solid #F1F5F9; display: flex; justify-content: space-between; align-items: center; background: #F8FAFC;">
|
||||
<h3 style="margin: 0; font-size: 1.26rem; font-weight: 850; color: #1E5149; display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:#1E5149;"></span>
|
||||
@@ -574,23 +866,31 @@ function showMiniListModal(title: string, list: any[]) {
|
||||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.01rem; table-layout: fixed;">
|
||||
<thead style="position: sticky; top: 0; background: white; z-index: 10;">
|
||||
<tr style="border-bottom: 2px solid #E2E8F0; color: #64748B; font-weight: 800; background: white;">
|
||||
<th style="padding: 10px 4px; width: 18%; background: white;">사용자</th>
|
||||
<th style="padding: 10px 4px; width: 35%; background: white;">조직 (직무)</th>
|
||||
<th style="padding: 10px 4px; width: 30%; background: white;">주요 사양</th>
|
||||
<th style="padding: 10px 4px; width: 14%; background: white;">사용자</th>
|
||||
<th style="padding: 10px 4px; width: 25%; background: white;">조직 (직무)</th>
|
||||
<th style="padding: 10px 4px; width: 28%; background: white;">주요 사양</th>
|
||||
<th style="padding: 10px 4px; width: 18%; text-align: center; background: white;">등급 (점수)</th>
|
||||
<th style="padding: 10px 4px; text-align: center; background: white;">자산코드</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${list.length === 0
|
||||
? `<tr><td colspan="4" style="text-align:center; padding:3rem; color:#94A3B8; font-weight:500;">해당 등급의 자산이 없습니다.</td></tr>`
|
||||
? `<tr><td colspan="5" style="text-align:center; padding:3rem; color:#94A3B8; font-weight:500;">해당 등급의 자산이 없습니다.</td></tr>`
|
||||
: list.map(pc => {
|
||||
const spec = `${pc.cpu || ''} / ${pc.ram || ''} / ${pc.gpu || '-'}`;
|
||||
const user = pc.user_current || '(재고)';
|
||||
const score = pc._pc_score !== undefined ? pc._pc_score : calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
|
||||
const win11Incompatible = isWindows11Incompatible(pc.cpu, pc.ram);
|
||||
const grade = getPcGrade(score, win11Incompatible);
|
||||
const badgeHTML = `<span class="badge ${grade.class}" style="font-size: 11px; padding: 2px 6px;">${grade.name}</span>`;
|
||||
const scoreHTML = `<strong style="color: ${grade.color}; font-size: 13px; margin-left: 4px;">${score}점</strong>`;
|
||||
|
||||
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'">
|
||||
<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: #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; font-family: monospace; color: #475569; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
|
||||
</tr>
|
||||
`;
|
||||
@@ -677,7 +977,7 @@ function renderChart(labels: string[], underData: number[], normalData: number[]
|
||||
categoryPercentage: 0.8
|
||||
},
|
||||
{
|
||||
label: '오버스펙',
|
||||
label: '오버 스펙',
|
||||
data: overData,
|
||||
backgroundColor: 'rgba(217, 119, 6, 0.85)', // Amber Orange
|
||||
borderColor: 'rgb(217, 119, 6)',
|
||||
@@ -721,7 +1021,7 @@ function renderChart(labels: string[], underData: number[], normalData: number[]
|
||||
return specStatus === clickedStatus;
|
||||
});
|
||||
|
||||
showMiniListModal(`${clickedJob} - ${clickedStatus === '적정' ? '적정 사양' : clickedStatus} 자산`, matchedPcs);
|
||||
showMiniListModal(`${clickedJob} - ${clickedStatus === '적정' ? '적정 사양' : (clickedStatus === '오버스펙' ? '오버 스펙' : clickedStatus)} 자산`, matchedPcs);
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
@@ -729,10 +1029,10 @@ function renderChart(labels: string[], underData: number[], normalData: number[]
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
labels: {
|
||||
font: { family: 'Pretendard', size: 11, weight: '700' },
|
||||
font: { family: 'Pretendard', size: 16, weight: '700' },
|
||||
color: '#475569',
|
||||
boxWidth: 8,
|
||||
boxHeight: 8,
|
||||
boxWidth: 12,
|
||||
boxHeight: 12,
|
||||
usePointStyle: true
|
||||
}
|
||||
},
|
||||
@@ -755,7 +1055,7 @@ function renderChart(labels: string[], underData: number[], normalData: number[]
|
||||
stacked: true,
|
||||
ticks: {
|
||||
callback: (val: any) => `${val}대`,
|
||||
font: { family: 'Pretendard', size: 10, weight: '600' },
|
||||
font: { family: 'Pretendard', size: 14, weight: '600' },
|
||||
color: '#64748B'
|
||||
},
|
||||
grid: { color: '#EEF2F6' }
|
||||
@@ -763,7 +1063,7 @@ function renderChart(labels: string[], underData: number[], normalData: number[]
|
||||
y: {
|
||||
stacked: true,
|
||||
ticks: {
|
||||
font: { family: 'Pretendard', size: 11, weight: '700' },
|
||||
font: { family: 'Pretendard', size: 16, weight: '700' },
|
||||
color: '#475569'
|
||||
},
|
||||
grid: { display: false }
|
||||
@@ -776,7 +1076,7 @@ function renderChart(labels: string[], underData: number[], normalData: number[]
|
||||
/**
|
||||
* 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)
|
||||
*/
|
||||
function renderDonutChart(premium: number, high: number, normal: number, entry: number) {
|
||||
function renderDonutChart(premium: number, high: number, normal: number, entry: number, replace: number) {
|
||||
const ctx = document.getElementById('chart-overall-donut') as HTMLCanvasElement;
|
||||
if (!ctx || typeof Chart === 'undefined') return;
|
||||
|
||||
@@ -785,19 +1085,20 @@ function renderDonutChart(premium: number, high: number, normal: number, entry:
|
||||
donutChartInstance = null;
|
||||
}
|
||||
|
||||
const total = premium + high + normal + entry;
|
||||
const total = premium + high + normal + entry + replace;
|
||||
|
||||
donutChartInstance = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['최상급', '상급', '중급', '보급'],
|
||||
labels: ['최상급', '상급', '중급', '보급', '교체 대상'],
|
||||
datasets: [{
|
||||
data: [premium, high, normal, entry],
|
||||
data: [premium, high, normal, entry, replace],
|
||||
backgroundColor: [
|
||||
'#11302B', // premium (Hanmac Dark Green)
|
||||
'#1E8E7C', // high (Hanmac Teal)
|
||||
'#10B981', // normal (Hanmac Mint)
|
||||
'#94A3B8' // entry (Slate Gray)
|
||||
'#F59E0B', // entry (Yellow-Orange)
|
||||
'#EF4444' // replace (Red)
|
||||
],
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 2
|
||||
@@ -831,7 +1132,7 @@ function renderDonutChart(premium: number, high: number, normal: number, entry:
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -46%);
|
||||
font-size: 1.56rem;
|
||||
font-size: 1.65rem;
|
||||
font-weight: 900;
|
||||
color: #1E5149;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,66 +1,170 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openPartsMasterModal } from '../../components/Modal/PartsMasterModal';
|
||||
import { openJobSpecModal } from '../../components/Modal/JobSpecModal';
|
||||
import { formatInline } from '../../core/utils';
|
||||
import { createListView } from './ListFactory';
|
||||
|
||||
export let activePartsMasterSubTab: 'parts-master' | 'job-spec' = 'parts-master';
|
||||
|
||||
export function renderPartsMasterList(container: HTMLElement) {
|
||||
createListView(container, {
|
||||
title: '부품 마스터',
|
||||
dataSource: () => state.masterData.partsMaster || [],
|
||||
searchKeys: ['component_name', 'category', 'score_tier'],
|
||||
filterOptions: {
|
||||
keywordLabel: '부품명 / 등급 검색',
|
||||
showLoc: false,
|
||||
showDept: false,
|
||||
showType: false
|
||||
},
|
||||
onRowClick: (component) => openPartsMasterModal(component, 'view'),
|
||||
columns: [
|
||||
{
|
||||
header: 'ID',
|
||||
sortKey: 'id',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
render: c => c.id.toString()
|
||||
if (activePartsMasterSubTab === 'parts-master') {
|
||||
createListView(container, {
|
||||
title: '부품 마스터',
|
||||
dataSource: () => state.masterData.partsMaster || [],
|
||||
searchKeys: ['component_name', 'category', 'score_tier'],
|
||||
filterOptions: {
|
||||
keywordLabel: '부품명 / 등급 검색',
|
||||
showLoc: false,
|
||||
showDept: false,
|
||||
showType: false
|
||||
},
|
||||
{
|
||||
header: '분류',
|
||||
sortKey: 'category',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: c => {
|
||||
let badgeClass = 'badge-primary';
|
||||
if (c.category === 'CPU') badgeClass = 'b-primary';
|
||||
else if (c.category === 'GPU') badgeClass = 'b-purple';
|
||||
else if (c.category === 'RAM') badgeClass = 'b-green';
|
||||
return `<span class="badge ${badgeClass}">${c.category}</span>`;
|
||||
onRowClick: (component) => openPartsMasterModal(component, 'view'),
|
||||
columns: [
|
||||
{
|
||||
header: 'ID',
|
||||
sortKey: 'id',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
render: c => c.id.toString()
|
||||
},
|
||||
{
|
||||
header: '분류',
|
||||
sortKey: 'category',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: c => {
|
||||
let badgeClass = 'badge-primary';
|
||||
if (c.category === 'CPU') badgeClass = 'b-primary';
|
||||
else if (c.category === 'GPU') badgeClass = 'b-purple';
|
||||
else if (c.category === 'RAM') badgeClass = 'b-green';
|
||||
return `<span class="badge ${badgeClass}">${c.category}</span>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
header: '부품 표준 명칭',
|
||||
sortKey: 'component_name',
|
||||
render: c => formatInline(c.component_name || '-')
|
||||
},
|
||||
{
|
||||
header: '성능 등급',
|
||||
sortKey: 'score_tier',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: c => c.score_tier || '-'
|
||||
},
|
||||
{
|
||||
header: '감점 점수',
|
||||
sortKey: 'deduction',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: c => {
|
||||
const score = c.deduction || 0;
|
||||
let color = '#3b82f6'; // blue
|
||||
if (score >= 20) color = '#ef4444'; // red
|
||||
else if (score >= 10) color = '#f59e0b'; // orange
|
||||
return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
} else {
|
||||
createListView(container, {
|
||||
title: '직무별 기준 사양',
|
||||
dataSource: () => state.masterData.jobSpecs || [],
|
||||
searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'],
|
||||
filterOptions: {
|
||||
keywordLabel: '직무명 / 사양 검색',
|
||||
showLoc: false,
|
||||
showDept: false,
|
||||
showType: false
|
||||
},
|
||||
{
|
||||
header: '부품 표준 명칭',
|
||||
sortKey: 'component_name',
|
||||
render: c => formatInline(c.component_name || '-')
|
||||
},
|
||||
{
|
||||
header: '성능 등급',
|
||||
sortKey: 'score_tier',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: c => c.score_tier || '-'
|
||||
},
|
||||
{
|
||||
header: '감점 점수',
|
||||
sortKey: 'deduction',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: c => {
|
||||
const score = c.deduction || 0;
|
||||
let color = '#3b82f6'; // blue
|
||||
if (score >= 20) color = '#ef4444'; // red
|
||||
else if (score >= 10) color = '#f59e0b'; // orange
|
||||
return `<strong style="color: ${color};">-${score}점</strong>`;
|
||||
onRowClick: (jobSpec) => openJobSpecModal(jobSpec, 'view'),
|
||||
columns: [
|
||||
{
|
||||
header: 'ID',
|
||||
sortKey: 'id',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
render: j => j.id.toString()
|
||||
},
|
||||
{
|
||||
header: '직무명',
|
||||
sortKey: 'job_name',
|
||||
width: '15%',
|
||||
render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
|
||||
},
|
||||
{
|
||||
header: '권장 CPU 사양',
|
||||
sortKey: 'cpu_standard',
|
||||
render: j => formatInline(j.cpu_standard || '-')
|
||||
},
|
||||
{
|
||||
header: '권장 RAM 사양',
|
||||
sortKey: 'ram_standard',
|
||||
width: '12%',
|
||||
render: j => formatInline(j.ram_standard || '-')
|
||||
},
|
||||
{
|
||||
header: '권장 GPU 사양',
|
||||
sortKey: 'gpu_standard',
|
||||
render: j => formatInline(j.gpu_standard || '-')
|
||||
},
|
||||
{
|
||||
header: '기준 점수',
|
||||
sortKey: 'min_score',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
|
||||
},
|
||||
{
|
||||
header: '비고',
|
||||
sortKey: 'remarks',
|
||||
width: '20%',
|
||||
render: j => formatInline(j.remarks || '-')
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
renderSubTabs(container);
|
||||
}
|
||||
|
||||
function renderSubTabs(container: HTMLElement) {
|
||||
const header = container.querySelector('.page-header');
|
||||
if (!header) return;
|
||||
|
||||
const tabContainer = document.createElement('div');
|
||||
tabContainer.className = 'sub-tab-container';
|
||||
tabContainer.style.cssText = 'display: flex; gap: 16px; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 0;';
|
||||
|
||||
const tab1Active = activePartsMasterSubTab === 'parts-master';
|
||||
const tab2Active = activePartsMasterSubTab === 'job-spec';
|
||||
|
||||
tabContainer.innerHTML = `
|
||||
<button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab1Active ? 'var(--primary-color)' : 'transparent'};">
|
||||
부품 표준 등급
|
||||
</button>
|
||||
<button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab2Active ? 'var(--primary-color)' : 'transparent'};">
|
||||
직무별 기준 사양
|
||||
</button>
|
||||
`;
|
||||
|
||||
header.parentNode!.insertBefore(tabContainer, header.nextSibling);
|
||||
|
||||
const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
|
||||
const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
|
||||
|
||||
tabPartsMaster.addEventListener('click', () => {
|
||||
if (activePartsMasterSubTab !== 'parts-master') {
|
||||
activePartsMasterSubTab = 'parts-master';
|
||||
renderPartsMasterList(container);
|
||||
}
|
||||
});
|
||||
|
||||
tabJobSpec.addEventListener('click', () => {
|
||||
if (activePartsMasterSubTab !== 'job-spec') {
|
||||
activePartsMasterSubTab = 'job-spec';
|
||||
renderPartsMasterList(container);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,18 +1,29 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
|
||||
import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade, isWindows11Incompatible } from '../../core/utils';
|
||||
import { ASSET_SCHEMA } from '../../core/schema';
|
||||
import { createListView } from './ListFactory';
|
||||
import { SortState } from '../../core/tableHandler';
|
||||
|
||||
let persistentSortState: SortState = { key: 'updated_at', direction: 'desc' };
|
||||
|
||||
export function renderPcList(container: HTMLElement) {
|
||||
createListView(container, {
|
||||
title: 'PC',
|
||||
persistentSortState,
|
||||
dataSource: () => {
|
||||
const list = (state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC');
|
||||
list.forEach((a: any) => {
|
||||
a['_pc_score'] = calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
|
||||
});
|
||||
return sortAssets(list);
|
||||
// 변경일시(updated_at) 내림차순 정렬 (최신 변경 항목이 맨 위로)
|
||||
return list.sort((a: any, b: any) => {
|
||||
const dateA = a.updated_at || a.created_at || '';
|
||||
const dateB = b.updated_at || b.created_at || '';
|
||||
if (dateA < dateB) return 1;
|
||||
if (dateA > dateB) return -1;
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
|
||||
filterOptions: {
|
||||
@@ -93,7 +104,8 @@ export function renderPcList(container: HTMLElement) {
|
||||
width: '8%',
|
||||
render: a => {
|
||||
const score = a._pc_score !== undefined ? a._pc_score : calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
|
||||
const grade = getPcGrade(score);
|
||||
const isWin11Incompatible = isWindows11Incompatible(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key]);
|
||||
const grade = getPcGrade(score, isWin11Incompatible);
|
||||
return `<span class="badge ${grade.class}" title="성능 점수: ${score}점">${grade.name}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user