feat: 모든 카테고리(HW, SW, SW 사용자) DB 일괄 덮어쓰기 저장 기능 구현
This commit is contained in:
@@ -1,176 +1,49 @@
|
||||
import { state } from '../core/state';
|
||||
import { renderPcList } from './List/PcListView';
|
||||
import { renderServerList } from './List/ServerListView';
|
||||
import { renderStorageList } from './List/StorageListView';
|
||||
import { renderEquipmentList } from './List/EquipmentListView';
|
||||
import { renderSwList } from './List/SwListView';
|
||||
import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
|
||||
import { openPcModal } from '../components/Modal/PCModal';
|
||||
import { openHwModal } from '../components/Modal/HWModal';
|
||||
import { openStorageModal } from '../components/Modal/StorageModal';
|
||||
import { openSwModal } from '../components/Modal/SWModal';
|
||||
import { openSwUserModal } from '../components/Modal/SWUserModal';
|
||||
|
||||
/**
|
||||
* 자산 목록 테이블 렌더링 메인 함수
|
||||
* 자산 목록 테이블 렌더링 통합 허브
|
||||
*/
|
||||
export function renderTable(mainContent: HTMLElement) {
|
||||
if (!mainContent) return;
|
||||
console.log(`📂 Rendering Table for: ${state.activeCategory} / ${state.activeSubTab}`);
|
||||
|
||||
mainContent.innerHTML = '';
|
||||
const container = document.createElement('div');
|
||||
container.className = 'view-container';
|
||||
const table = document.createElement('table');
|
||||
|
||||
if (state.activeCategory === 'hw') {
|
||||
renderHwTable(table, container, mainContent);
|
||||
} else {
|
||||
renderSwTable(table, container, mainContent);
|
||||
}
|
||||
try {
|
||||
const tab = state.activeSubTab;
|
||||
|
||||
createIcons({
|
||||
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
|
||||
});
|
||||
}
|
||||
|
||||
function renderHwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
|
||||
const list = state.masterData.hw.filter(a => a.type === state.activeSubTab);
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
|
||||
if (state.activeSubTab === '개인PC') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th><th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th><th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="17">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
list.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td><td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.GPU||''}</td><td>${asset.RAM||''}</td><td>${asset.SSD1||'-'}</td><td>${asset.SSD2||'-'}</td><td>${asset.HDD1||'-'}</td><td>${asset.HDD2||'-'}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td>${asset.납품업체||''}</td><td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} else if (state.activeSubTab === '스토리지') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>IP주소</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="13">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
list.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.담당자_정||''}</td><td>${asset.IP주소||''}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
} else {
|
||||
// 서버 또는 전산비품
|
||||
if (state.activeSubTab === '서버') {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산번호</th><th>유형</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>IP 주소</th><th>원격접속</th><th>모델명</th><th>OS</th><th>CPU</th><th>RAM</th><th>Storage</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
} else {
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th>${state.activeSubTab === '전산비품' ? '<th>유형</th>' : ''}<th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
}
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
const colCount = state.activeSubTab === '서버' ? 15 : (state.activeSubTab === '전산비품' ? 11 : 10);
|
||||
if (list.length === 0) { tbody.innerHTML = `<tr><td colspan="${colCount}">등록된 자산이 없습니다.</td></tr>`; return; }
|
||||
|
||||
list.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
const formatInline = (v: any) => String(v || '').replace(/\n/g, ' / ').trim();
|
||||
const getBadge = (text: string, bgColor: string) => `<span style="background:${bgColor}; color:white; font-size:10px; padding:1px 4px; border-radius:3px; font-weight:700; margin-right:4px; display:inline-block; line-height:1.2;">${text}</span>`;
|
||||
|
||||
if (state.activeSubTab === '서버') {
|
||||
const mainManager = asset.담당자_정 || '';
|
||||
const subManager = asset.담당자_부 || '';
|
||||
const managerHtml = [mainManager ? `${getBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${getBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
|
||||
const tools = (asset.원격접속 || '').split('\n');
|
||||
const ids = (asset.서버ID || '').split('\n');
|
||||
const pws = (asset.서버PW || '').split('\n');
|
||||
const maxLen = Math.max(tools.length, ids.length, pws.length);
|
||||
let remoteItems = [];
|
||||
for(let i=0; i<maxLen; i++) {
|
||||
let toolName = tools[i] || '접속';
|
||||
let badgeColor = '#3B82F6';
|
||||
if (toolName.toLowerCase().includes('any')) badgeColor = '#EF4444';
|
||||
if (toolName.toLowerCase().includes('chrome')) badgeColor = '#F59E0B';
|
||||
let item = `${getBadge(toolName, badgeColor)}`;
|
||||
if (ids[i] || pws[i]) item += ` (${ids[i] || '-'}/${pws[i] || '-'})`;
|
||||
remoteItems.push(item);
|
||||
}
|
||||
const remoteHtml = remoteItems.join(' / ');
|
||||
const ipInfo = [asset.IP주소, asset.IP2].filter(v => v && v !== '').join(' / ');
|
||||
const storageInfo = [asset.SSD1, asset.SSD2].filter(v => v && v !== '').join(' / ');
|
||||
|
||||
tr.innerHTML = `<td>${idx+1}</td><td class="text-nowrap">${formatInline(asset.법인)}</td><td class="text-nowrap">${formatInline(asset.자산코드)}</td><td class="text-nowrap">${formatInline(asset.storage유형)}</td><td class="text-nowrap">${formatInline(asset.용도)}</td><td class="text-nowrap">${formatInline(asset.상세)}</td><td class="text-nowrap">${formatInline(asset.위치)}</td><td class="text-nowrap">${managerHtml}</td><td class="text-nowrap">${formatInline(ipInfo)}</td><td class="text-nowrap">${remoteHtml}</td><td class="text-nowrap">${formatInline(asset.모델명)}</td><td class="text-nowrap">${formatInline(asset.OS)}</td><td class="text-nowrap">${formatInline(asset.CPU)}</td><td class="text-nowrap">${formatInline(asset.RAM)}</td><td class="text-nowrap">${formatInline(storageInfo)}</td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
} else {
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.법인}</td>${state.activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}<td>${asset.자산코드}</td><td>${asset.명칭}</td><td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.구매일||''}</td><td>${asset.금액||''}</td><td><button class="btn btn-outline btn-sm btn-edit">수정</button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
if (state.activeCategory === 'hw') {
|
||||
if (tab === '개인PC') renderPcList(container);
|
||||
else if (tab === '서버') renderServerList(container);
|
||||
else if (tab === '스토리지') renderStorageList(container);
|
||||
else if (tab === '전산비품') renderEquipmentList(container);
|
||||
else {
|
||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
||||
}
|
||||
tbody.appendChild(tr);
|
||||
} else if (state.activeCategory === 'sw') {
|
||||
if (tab === '구독SW' || tab === '영구SW') {
|
||||
renderSwList(container);
|
||||
} else {
|
||||
container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 소프트웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
mainContent.appendChild(container);
|
||||
|
||||
// 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
|
||||
createIcons({
|
||||
icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw }
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('❌ Error rendering table view:', err);
|
||||
mainContent.innerHTML = `<div style="padding:2rem; color:var(--danger);">목록을 불러오는 중 오류가 발생했습니다: ${err.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderSwTable(table: HTMLTableElement, container: HTMLElement, mainContent: HTMLElement) {
|
||||
const fullList = state.masterData.sw.filter(a => a.type === state.activeSubTab);
|
||||
const isSub = state.activeSubTab === '구독SW';
|
||||
container.innerHTML = '';
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `<div class="search-item flex-1"><label>통합 검색 (제품명/부서)</label><input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off"></div><div class="search-item"><label>분야</label><select id="filter-field"><option value="">전체 분야</option><option value="업무공통">업무공통</option><option value="개발S/W">개발S/W</option><option value="디자인">디자인</option><option value="설계S/W">설계S/W</option></select></div><div class="search-item"><label>법인</label><select id="filter-corp"><option value="">전체 법인</option><option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option></select></div><button id="btn-reset-filters" class="btn btn-outline btn-reset" title="검색 조건 초기화"><i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i> 필터 초기화</button>`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
table.classList.add('sw-table');
|
||||
table.innerHTML = `<thead><tr><th style="text-align:center;">No.</th><th style="text-align:center;">분야</th><th style="text-align:center;">법인</th><th style="text-align:center;">부서</th><th style="text-align:center;">제품명</th><th style="text-align:center;">구매일</th>${isSub ? '<th style="text-align:center;">구독일</th>' : ''}<th style="text-align:center;">금액</th><th style="text-align:center;">수량</th><th style="text-align:center;">사용가능</th><th style="text-align:center;">관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
mainContent.appendChild(container);
|
||||
|
||||
const tbody = document.getElementById('dynamic-tbody')!;
|
||||
const updateTable = () => {
|
||||
const keyword = (document.getElementById('filter-keyword') as HTMLInputElement).value.toLowerCase().trim();
|
||||
const field = (document.getElementById('filter-field') as HTMLSelectElement).value;
|
||||
const corp = (document.getElementById('filter-corp') as HTMLSelectElement).value;
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchField = !field || asset.분야 === field;
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchField && matchCorp;
|
||||
});
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
filtered.forEach((asset, idx) => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
|
||||
const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
|
||||
const avail = qty - assigned;
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `<td>${idx+1}</td><td>${asset.분야||''}</td><td>${asset.법인}</td><td>${asset.부서||''}</td><td>${asset.제품명}</td><td>${asset.구매일||''}</td>${isSub ? `<td>${asset.구독일||''}</td>` : ''}<td>${asset.금액||'0'}</td><td>${qty}</td><td><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td><td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;"><button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2" style="width:18px; height:18px;"></i></button><button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users" style="width:18px; height:18px;"></i></button></td>`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
|
||||
tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
|
||||
tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Edit2, Users, RefreshCcw } });
|
||||
};
|
||||
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const resetBtn = document.getElementById('btn-reset-filters') as HTMLButtonElement;
|
||||
keywordInput.addEventListener('input', updateTable);
|
||||
fieldSelect.addEventListener('change', updateTable);
|
||||
corpSelect.addEventListener('change', updateTable);
|
||||
resetBtn.addEventListener('click', () => {
|
||||
keywordInput.value = ''; fieldSelect.value = ''; corpSelect.value = '';
|
||||
updateTable();
|
||||
});
|
||||
updateTable();
|
||||
}
|
||||
|
||||
104
src/views/Dashboard/HwDashboard.ts
Normal file
104
src/views/Dashboard/HwDashboard.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { state } from '../../core/state';
|
||||
import { HardwareAsset } from '../../core/excelHandler';
|
||||
import { openDashboardDetail } from '../../components/Modal/DashboardDetailModal';
|
||||
import { normalizeDate } from '../../core/utils';
|
||||
|
||||
declare var Chart: any;
|
||||
|
||||
export function renderHwDashboard(container: HTMLElement) {
|
||||
const types = ['개인PC', '서버', '스토리지', '전산비품'];
|
||||
const units = ['대', '대', '대', '개'];
|
||||
const groups: any = {};
|
||||
|
||||
types.forEach(t => { groups[t] = { idle: [], active: [] }; });
|
||||
|
||||
state.masterData.hw.forEach(a => {
|
||||
if (!groups[a.type]) return;
|
||||
if (isHwIdle(a)) groups[a.type].idle.push(a);
|
||||
else groups[a.type].active.push(a);
|
||||
});
|
||||
|
||||
let usageCards = '';
|
||||
types.forEach((t, i) => {
|
||||
const total = groups[t].idle.length + groups[t].active.length;
|
||||
const used = groups[t].active.length;
|
||||
const per = total > 0 ? Math.round((used / total) * 100) : 0;
|
||||
const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
|
||||
|
||||
usageCards += `
|
||||
<div class="dashboard-card" data-action="idle" data-type="${t}" style="padding: 1.25rem 1.5rem; cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 사용현황</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
|
||||
${total}${units[i]} 중 ${used}${units[i]} 사용 중
|
||||
</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:${barColor}; line-height:1;">${per}%</div>
|
||||
<div style="width:100%; height:4px; background-color:var(--border-color); border-radius:2px; overflow:hidden; margin-top:0.75rem;">
|
||||
<div style="width:${per}%; height:100%; background-color:${barColor};"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="view-container">
|
||||
<h3 class="dashboard-section-title">자산 사용현황 요약</h3>
|
||||
<div class="dashboard-grid">${usageCards}</div>
|
||||
|
||||
<h3 class="dashboard-section-title">하드웨어 보유 통계</h3>
|
||||
<div class="dashboard-layout-2col">
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">자산 유형별 보유 현황</h4>
|
||||
<canvas id="chart-hw-types"></canvas>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 자산 분포</h4>
|
||||
<canvas id="chart-hw-corps"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
const ctxType = (document.getElementById('chart-hw-types') as HTMLCanvasElement)?.getContext('2d');
|
||||
const ctxCorp = (document.getElementById('chart-hw-corps') as HTMLCanvasElement)?.getContext('2d');
|
||||
if (ctxType) {
|
||||
const chart = new Chart(ctxType, {
|
||||
type: 'doughnut',
|
||||
data: { labels: types, datasets: [{ data: types.map(t => state.masterData.hw.filter(a => a.type === t).length), backgroundColor: ['#1E5149', '#3b82f6', '#10b981', '#f59e0b'] }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right' } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
if (ctxCorp) {
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const chart = new Chart(ctxCorp, {
|
||||
type: 'bar',
|
||||
data: { labels: corps, datasets: [{ label: '보유 수량', data: corps.map(c => state.masterData.hw.filter(a => a.법인 === c).length), backgroundColor: 'rgba(30, 81, 73, 0.7)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
container.querySelectorAll('[data-action="idle"]').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const t = card.getAttribute('data-type')!;
|
||||
openDashboardDetail(`[${t}] 유휴 자산 목록`, groups[t].idle);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function isHwIdle(a: HardwareAsset) {
|
||||
if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
|
||||
if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
|
||||
return !a.관리자 || a.관리자.trim() === '' || a.관리자.trim() === '-';
|
||||
}
|
||||
|
||||
function getHwAgeYears(a: HardwareAsset) {
|
||||
if (!a.구매일) return 0;
|
||||
try {
|
||||
const buyDate = new Date(normalizeDate(a.구매일));
|
||||
if (isNaN(buyDate.getTime())) return 0;
|
||||
return (Date.now() - buyDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
} catch { return 0; }
|
||||
}
|
||||
150
src/views/Dashboard/SwDashboard.ts
Normal file
150
src/views/Dashboard/SwDashboard.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { state } from '../../core/state';
|
||||
import { SoftwareAsset } from '../../core/excelHandler';
|
||||
import { openSwDashboardDetail, openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
|
||||
import { normalizeDate } from '../../core/utils';
|
||||
|
||||
declare var Chart: any;
|
||||
|
||||
export function renderSwDashboard(container: HTMLElement) {
|
||||
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
||||
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
||||
|
||||
const currentYear = new Date().getFullYear().toString();
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
|
||||
|
||||
const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
|
||||
const costByCat: Record<string, number> = {};
|
||||
categories.forEach(c => costByCat[c] = 0);
|
||||
|
||||
state.masterData.sw.forEach(sw => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
||||
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
||||
const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
|
||||
const price = parseInt(priceStr, 10) || 0;
|
||||
|
||||
if (sw.type === '구독SW') {
|
||||
subQty += qty; subUsed += assigned; subTotal++;
|
||||
if (isSWExpiring(sw)) subExp++;
|
||||
} else {
|
||||
permQty += qty; permUsed += assigned; permTotal++;
|
||||
if (isSWExpiring(sw)) permExp++;
|
||||
}
|
||||
|
||||
if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
|
||||
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
||||
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
||||
}
|
||||
});
|
||||
|
||||
const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
|
||||
const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
|
||||
const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
|
||||
const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="view-container">
|
||||
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${subQty}카피 중 ${subUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${subPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${subPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-usage" style="cursor:pointer; min-height:auto;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용율</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${permQty}카피 중 ${permUsed}개 할당</div>
|
||||
<div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${permPer}%</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${permPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
||||
<div style="flex:1;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정 (30일 이내)</span>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${subExp}개 제품</div>
|
||||
</div>
|
||||
<div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-exp" style="flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer; min-height:auto;">
|
||||
<div style="flex:1;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정 (30일 이내)</span>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'}; margin-top:0.5rem;">${permExp}개 제품</div>
|
||||
</div>
|
||||
<div style="width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 0.875rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="dashboard-section-title">${currentYear}년 도입 비용 분석</h3>
|
||||
<div class="dashboard-layout-2col">
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">법인별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-sw-corp"></canvas>
|
||||
</div>
|
||||
<div class="dashboard-card">
|
||||
<h4 style="margin-bottom:1rem; font-size:0.9rem; color:var(--text-muted);">분야별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-sw-cat"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
if (typeof Chart === 'undefined') return;
|
||||
const ctxCorp = (document.getElementById('chart-sw-corp') as HTMLCanvasElement)?.getContext('2d');
|
||||
const ctxCat = (document.getElementById('chart-sw-cat') as HTMLCanvasElement)?.getContext('2d');
|
||||
if (ctxCorp) {
|
||||
const chart = new Chart(ctxCorp, {
|
||||
type: 'bar',
|
||||
data: { labels: corps, datasets: [{ data: corps.map(c => costByCorp[c]), backgroundColor: 'rgba(30, 81, 73, 0.8)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
if (ctxCat) {
|
||||
const chart = new Chart(ctxCat, {
|
||||
type: 'bar',
|
||||
data: { labels: categories, datasets: [{ data: categories.map(c => costByCat[c]), backgroundColor: 'rgba(59, 130, 246, 0.8)', borderRadius: 4 }] },
|
||||
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
||||
});
|
||||
state.activeCharts.push(chart);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW')));
|
||||
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '영구SW')));
|
||||
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw))));
|
||||
container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw))));
|
||||
}
|
||||
|
||||
function isSWExpiring(sw: SoftwareAsset) {
|
||||
if (sw.type === '구독SW' && sw.구독일) {
|
||||
const parts = sw.구독일.split('~');
|
||||
if (parts.length > 1) {
|
||||
const endMs = new Date(normalizeDate(parts[1])).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
}
|
||||
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
||||
try {
|
||||
const endMs = new Date(normalizeDate(sw.비고.split('~')[1])).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
} catch { return false; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
import { state } from '../core/state';
|
||||
import { HardwareAsset, SoftwareAsset } from '../core/excelHandler';
|
||||
import { openDashboardDetail, openSwDashboardDetail, openSwUsageDetail } from '../components/Modal/DashboardDetailModal';
|
||||
|
||||
declare var Chart: any;
|
||||
import { renderHwDashboard } from './Dashboard/HwDashboard';
|
||||
import { renderSwDashboard } from './Dashboard/SwDashboard';
|
||||
|
||||
/**
|
||||
* 대시보드 렌더링 메인 함수
|
||||
* 대시보드 렌더링 통합 허브
|
||||
*/
|
||||
export function renderDashboard(mainContent: HTMLElement) {
|
||||
if (!mainContent) return;
|
||||
@@ -21,327 +19,9 @@ export function renderDashboard(mainContent: HTMLElement) {
|
||||
|
||||
if (state.activeCategory === 'hw') {
|
||||
renderHwDashboard(mainContent);
|
||||
} else {
|
||||
} else if (state.activeCategory === 'sw') {
|
||||
renderSwDashboard(mainContent);
|
||||
} else {
|
||||
mainContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">운영 서비스 대시보드는 준비 중입니다.</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 하드웨어 대시보드 ---
|
||||
function renderHwDashboard(container: HTMLElement) {
|
||||
const types = ['개인PC', '서버', '스토리지', '전산비품'];
|
||||
const units = ['대', '대', '대', '개'];
|
||||
const groups: any = {};
|
||||
|
||||
types.forEach(t => { groups[t] = { idle: [], active: [], aged: [], normal: [] }; });
|
||||
|
||||
state.masterData.hw.forEach(a => {
|
||||
if (!groups[a.type]) return;
|
||||
if (isHwIdle(a)) groups[a.type].idle.push(a);
|
||||
else groups[a.type].active.push(a);
|
||||
|
||||
const ageY = getHwAgeYears(a);
|
||||
const isAged = a.type === '전산비품' ? ageY >= 3 : ageY >= 5;
|
||||
if (isAged) groups[a.type].aged.push(a);
|
||||
else groups[a.type].normal.push(a);
|
||||
});
|
||||
|
||||
let usageCards = '';
|
||||
types.forEach((t, i) => {
|
||||
const total = groups[t].idle.length + groups[t].active.length;
|
||||
const used = groups[t].active.length;
|
||||
const per = total > 0 ? Math.round((used / total) * 100) : 0;
|
||||
const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
|
||||
|
||||
usageCards += `
|
||||
<div class="dashboard-card" data-action="idle" data-type="${t}" style="padding: 1.25rem 1.5rem; cursor:pointer;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.5rem;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 사용현황</span>
|
||||
</div>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
|
||||
${total}${units[i]} 중 ${used}${units[i]} 사용 중 · 유휴 ${groups[t].idle.length}${units[i]}
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 0.5rem;">
|
||||
<div style="font-size: 2rem; font-weight:700; color:${barColor}; line-height:1;">${per}%</div>
|
||||
<div style="font-size:0.75rem; color:${per >= 50 ? '#4a8220' : 'var(--dash-danger)'}; background:${per >= 50 ? 'var(--dash-light)' : '#fef2f2'}; padding:4px 8px; border-radius:4px; font-weight:500;">
|
||||
${per >= 50 ? '잘 사용하고 있어요' : '점검이 필요합니다'}
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:100%; height:4px; background-color:var(--border-color); border-radius:2px; overflow:hidden; margin-top:0.25rem;">
|
||||
<div style="width:${per}%; height:100%; background-color:${barColor};"></div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
let agedCards = '';
|
||||
types.forEach((t, i) => {
|
||||
const total = groups[t].aged.length + groups[t].normal.length;
|
||||
const agedCount = groups[t].aged.length;
|
||||
const agedPer = total > 0 ? Math.round((agedCount / total) * 100) : 0;
|
||||
const threshold = t === '전산비품' ? '3년' : '5년';
|
||||
|
||||
agedCards += `
|
||||
<div class="dashboard-card" data-action="aged" data-type="${t}" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 노후화 현황</span>
|
||||
<span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">${threshold} 초과</span>
|
||||
</div>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
|
||||
전체 ${total}${units[i]} 중 ${agedCount}${units[i]} 노후 장비
|
||||
</div>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${agedCount > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${agedCount}${units[i]}</div>
|
||||
</div>
|
||||
<div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${agedPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${agedPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
container.innerHTML = `
|
||||
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">사용현황</h3>
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">${usageCards}</div>
|
||||
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">노후화 자산 비율</h3>
|
||||
<div class="dashboard-layout-2col">${agedCards}</div>
|
||||
`;
|
||||
|
||||
container.querySelectorAll('[data-action="idle"]').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const t = card.getAttribute('data-type')!;
|
||||
openDashboardDetail(`[${t}] 유휴 자산 목록`, groups[t].idle);
|
||||
});
|
||||
});
|
||||
container.querySelectorAll('[data-action="aged"]').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const t = card.getAttribute('data-type')!;
|
||||
openDashboardDetail(`[${t}] 노후 장비 목록`, groups[t].aged);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// --- 소프트웨어 대시보드 ---
|
||||
function renderSwDashboard(container: HTMLElement) {
|
||||
let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
|
||||
let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
|
||||
|
||||
const currentYear = new Date().getFullYear().toString();
|
||||
const corps = ['한맥', '삼안', '바론'];
|
||||
const categories = ['업무공통', '개발S/W', '디자인', '설계S/W'];
|
||||
|
||||
const costByCorp: Record<string, number> = { '한맥': 0, '삼안': 0, '바론': 0 };
|
||||
const costByCat: Record<string, number> = {};
|
||||
categories.forEach(c => costByCat[c] = 0);
|
||||
|
||||
state.masterData.sw.forEach(sw => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === sw.id).length;
|
||||
const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
|
||||
const priceStr = sw.금액 ? String(sw.금액).replace(/,/g, '') : '0';
|
||||
const price = parseInt(priceStr, 10) || 0;
|
||||
|
||||
if (sw.type === '구독SW') {
|
||||
subQty += qty; subUsed += assigned; subTotal++;
|
||||
if (isSWExpiring(sw)) subExp++;
|
||||
} else {
|
||||
permQty += qty; permUsed += assigned; permTotal++;
|
||||
if (isSWExpiring(sw)) permExp++;
|
||||
}
|
||||
|
||||
if (sw.구매일 && sw.구매일.startsWith(currentYear)) {
|
||||
if (costByCorp[sw.법인] !== undefined) costByCorp[sw.법인] += price;
|
||||
if (sw.분야 && costByCat[sw.분야] !== undefined) costByCat[sw.분야] += price;
|
||||
}
|
||||
});
|
||||
|
||||
const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
|
||||
const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
|
||||
const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
|
||||
const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-usage" style="padding: 1.25rem 1.5rem; cursor:pointer;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용정보</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${subQty}개의 제품 중 ${subUsed}개 사용 중</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-end;">
|
||||
<div style="font-size: 2rem; font-weight:700; color:${subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};">${subPer}%</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${subPer}%; height: 100%; background-color: ${subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-usage" style="padding: 1.25rem 1.5rem; cursor:pointer;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용정보</span>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${permQty}개의 제품 중 ${permUsed}개 사용 중</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-end;">
|
||||
<div style="font-size: 2rem; font-weight:700; color:${permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};">${permPer}%</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
||||
<div style="width: ${permPer}%; height: 100%; background-color: ${permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)'};"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
||||
<div class="dashboard-card" data-action="sub-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정</span>
|
||||
<span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">30일 이내</span>
|
||||
</div>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
|
||||
전체 ${subTotal}개 제품 중 ${subExp}개 만료 예정
|
||||
</div>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${subExp}개</div>
|
||||
</div>
|
||||
<div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-card" data-action="perm-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정</span>
|
||||
<span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">30일 이내</span>
|
||||
</div>
|
||||
<div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
|
||||
전체 ${permTotal}개 제품 중 ${permExp}개 만료 예정
|
||||
</div>
|
||||
<div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${permExp}개</div>
|
||||
</div>
|
||||
<div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
|
||||
<div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
|
||||
<span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">${currentYear}년 소프트웨어 도입 비용</h3>
|
||||
<div class="dashboard-layout-2col">
|
||||
<div class="dashboard-card" style="padding: 1.5rem;">
|
||||
<h4 style="margin: 0 0 1rem 0; font-size: 0.9375rem; color: var(--text-main);">법인별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-cost-corp" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="dashboard-card" style="padding: 1.5rem;">
|
||||
<h4 style="margin: 0 0 1rem 0; font-size: 0.9375rem; color: var(--text-main);">분야별 도입 금액 (원)</h4>
|
||||
<canvas id="chart-cost-cat" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setTimeout(() => {
|
||||
const ctxCorp = (document.getElementById('chart-cost-corp') as HTMLCanvasElement)?.getContext('2d');
|
||||
const ctxCat = (document.getElementById('chart-cost-cat') as HTMLCanvasElement)?.getContext('2d');
|
||||
|
||||
if (ctxCorp && typeof Chart !== 'undefined') {
|
||||
const chartCorp = new Chart(ctxCorp, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: corps,
|
||||
datasets: [{
|
||||
label: '도입 금액',
|
||||
data: corps.map(c => costByCorp[c]),
|
||||
backgroundColor: '#3b82f6',
|
||||
borderRadius: 4,
|
||||
barThickness: 20
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: { callback: (v: any) => v.toLocaleString() },
|
||||
grid: { display: false }
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
state.activeCharts.push(chartCorp);
|
||||
}
|
||||
|
||||
if (ctxCat && typeof Chart !== 'undefined') {
|
||||
const chartCat = new Chart(ctxCat, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: categories,
|
||||
datasets: [{
|
||||
label: '도입 금액',
|
||||
data: categories.map(c => costByCat[c]),
|
||||
backgroundColor: '#10b981',
|
||||
borderRadius: 4,
|
||||
barThickness: 20
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: { callback: (v: any) => v.toLocaleString() },
|
||||
grid: { display: false }
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
}
|
||||
}
|
||||
});
|
||||
state.activeCharts.push(chartCat);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
container.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => {
|
||||
openSwUsageDetail('구독 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '구독SW'));
|
||||
});
|
||||
container.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => {
|
||||
openSwUsageDetail('영구 소프트웨어 사용 목록', state.masterData.sw.filter(sw => sw.type === '영구SW'));
|
||||
});
|
||||
container.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => {
|
||||
openSwDashboardDetail('구독 SW 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw)));
|
||||
});
|
||||
container.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => {
|
||||
openSwDashboardDetail('유지보수 만료 예정 목록', state.masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw)));
|
||||
});
|
||||
}
|
||||
|
||||
function isHwIdle(a: HardwareAsset) {
|
||||
if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
|
||||
if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
|
||||
return !a.관리자 || a.관리자.trim() === '' || a.관리자.trim() === '-';
|
||||
}
|
||||
|
||||
function getHwAgeYears(a: HardwareAsset) {
|
||||
if (!a.구매일) return 0;
|
||||
try {
|
||||
const buyDate = new Date(a.구매일.replace(/\./g, '-'));
|
||||
if (isNaN(buyDate.getTime())) return 0;
|
||||
return (Date.now() - buyDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
} catch { return 0; }
|
||||
}
|
||||
|
||||
function isSWExpiring(sw: SoftwareAsset) {
|
||||
if (sw.type === '구독SW' && sw.구독일) {
|
||||
const parts = sw.구독일.split('~');
|
||||
if (parts.length > 1) {
|
||||
const endStr = parts[1].trim();
|
||||
const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
}
|
||||
} else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
|
||||
try {
|
||||
const endStr = sw.비고.split('~')[1].trim();
|
||||
const endMs = new Date(endStr.replace(/\./g, '-')).getTime();
|
||||
const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
|
||||
return diffDays >= 0 && diffDays <= 30;
|
||||
} catch { return false; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
85
src/views/List/EquipmentListView.ts
Normal file
85
src/views/List/EquipmentListView.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline } from '../../core/utils';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
export function renderEquipmentList(container: HTMLElement) {
|
||||
const fullList = state.masterData.hw.filter(a => a.type === '전산비품');
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/명칭)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>법인</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>관리자</th><th>구매일</th><th>금액</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.명칭||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.비품유형||'-'}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td>${formatInline(asset.명칭)}</td>
|
||||
<td>${formatInline(asset.위치)}</td>
|
||||
<td>${formatInline(asset.관리자)}</td>
|
||||
<td>${asset.구매일||''}</td>
|
||||
<td>${asset.금액||''}</td>
|
||||
<td><button class="btn btn-outline btn-sm">수정</button></td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
94
src/views/List/PcListView.ts
Normal file
94
src/views/List/PcListView.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openPcModal } from '../../components/Modal/PCModal';
|
||||
import { formatInline } from '../../core/utils';
|
||||
import { createIcons, Paperclip, RefreshCcw } from 'lucide';
|
||||
|
||||
export function renderPcList(container: HTMLElement) {
|
||||
const fullList = state.masterData.hw.filter(a => a.type === '개인PC');
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/사용자)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>법인</label>
|
||||
<select id="filter-corp">
|
||||
<option value="">전체 법인</option>
|
||||
${corps.map(c => `<option value="${c}">${c}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>자산코드</th><th>사용자</th><th>위치</th><th>CPU</th><th>RAM</th><th>Storage</th><th>구매일</th><th>금액</th><th>품의서</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.사용자||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="12" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
const storage = [asset.SSD1, asset.SSD2, asset.HDD1].filter(v => v).join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td>${asset.사용자||''}</td>
|
||||
<td>${asset.위치||''}</td>
|
||||
<td>${asset.CPU||''}</td>
|
||||
<td>${asset.RAM||''}</td>
|
||||
<td>${formatInline(storage)}</td>
|
||||
<td>${asset.구매일||''}</td>
|
||||
<td>${asset.금액||''}</td>
|
||||
<td style="text-align:center;">${asset.품의서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
|
||||
<td><button class="btn btn-outline btn-sm">수정</button></td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openPcModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Paperclip } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
108
src/views/List/ServerListView.ts
Normal file
108
src/views/List/ServerListView.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openHwModal } from '../../components/Modal/HWModal';
|
||||
import { formatInline, createBadge } from '../../core/utils';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
export function renderServerList(container: HTMLElement) {
|
||||
const fullList = state.masterData.hw.filter(a => a.type === '서버');
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
const orgUnits = Array.from(new Set(fullList.map(a => a.현사용조직))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산번호/조직/모델명)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>법인</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>현 사용조직</label>
|
||||
<select id="filter-org-unit"><option value="">전체 조직</option>${orgUnits.map(o => `<option value="${o}">${o}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>현 사용조직</th><th>자산번호</th><th>용도</th><th>상세</th><th>설치위치</th><th>담당자</th><th>IP주소</th><th>모델명</th><th>OS</th><th>CPU/RAM</th><th>Storage</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
const orgSelect = document.getElementById('filter-org-unit') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
const orgUnit = orgSelect ? orgSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.현사용조직||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
const matchOrg = !orgUnit || asset.현사용조직 === orgUnit;
|
||||
return matchKeyword && matchCorp && matchOrg;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
const mainManager = asset.담당자_정 || '';
|
||||
const subManager = asset.담당자_부 || '';
|
||||
const managerHtml = [mainManager ? `${createBadge('정', '#1E5149')} ${mainManager}` : '', subManager ? `${createBadge('부', '#9CA3AF')} ${subManager}` : ''].filter(v => v !== '').join(' / ');
|
||||
|
||||
const ipInfo = [asset.IP주소, asset.IP2].filter(v => v).join(' / ');
|
||||
const cpuRam = [asset.CPU, asset.RAM].filter(v => v).join(' / ');
|
||||
const storage = [asset.SSD1, asset.SSD2].filter(v => v).join(' / ');
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.현사용조직||''}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td>${formatInline(asset.용도)}</td>
|
||||
<td>${formatInline(asset.상세)}</td>
|
||||
<td>${formatInline(asset.위치)}</td>
|
||||
<td>${managerHtml}</td>
|
||||
<td>${formatInline(ipInfo)}</td>
|
||||
<td>${asset.모델명||''}</td>
|
||||
<td>${asset.OS||''}</td>
|
||||
<td>${formatInline(cpuRam)}</td>
|
||||
<td>${formatInline(storage)}</td>
|
||||
<td><button class="btn btn-outline btn-sm">수정</button></td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openHwModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('filter-org-unit')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
(document.getElementById('filter-org-unit') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
86
src/views/List/StorageListView.ts
Normal file
86
src/views/List/StorageListView.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openStorageModal } from '../../components/Modal/StorageModal';
|
||||
import { formatInline } from '../../core/utils';
|
||||
import { createIcons, RefreshCcw } from 'lucide';
|
||||
|
||||
export function renderStorageList(container: HTMLElement) {
|
||||
const fullList = state.masterData.hw.filter(a => a.type === '스토리지');
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
const corps = Array.from(new Set(fullList.map(a => a.법인))).filter(Boolean).sort();
|
||||
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (자산코드/명칭/모델명)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>법인</label>
|
||||
<select id="filter-corp"><option value="">전체 법인</option>${corps.map(c => `<option value="${c}">${c}</option>`).join('')}</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `<thead><tr><th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th><th>위치</th><th>모델명</th><th>용량</th><th>IP주소</th><th>구매일</th><th>관리</th></tr></thead><tbody id="dynamic-tbody"></tbody>`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || String(asset.자산코드||'').toLowerCase().includes(keyword) || String(asset.명칭||'').toLowerCase().includes(keyword) || String(asset.모델명||'').toLowerCase().includes(keyword);
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="11" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
tr.innerHTML = `
|
||||
<td>${idx+1}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.storage유형||''}</td>
|
||||
<td>${asset.자산코드}</td>
|
||||
<td>${formatInline(asset.명칭)}</td>
|
||||
<td>${formatInline(asset.위치)}</td>
|
||||
<td>${formatInline(asset.모델명)}</td>
|
||||
<td>${asset.용량||''}</td>
|
||||
<td>${asset.IP주소||''}</td>
|
||||
<td>${asset.구매일||''}</td>
|
||||
<td><button class="btn btn-outline btn-sm">수정</button></td>
|
||||
`;
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openStorageModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
131
src/views/List/SwListView.ts
Normal file
131
src/views/List/SwListView.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
import { state } from '../../core/state';
|
||||
import { openSwModal } from '../../components/Modal/SWModal';
|
||||
import { openSwUserModal } from '../../components/Modal/SWUserModal';
|
||||
import { createIcons, Edit2, Users, RefreshCcw } from 'lucide';
|
||||
|
||||
export function renderSwList(container: HTMLElement) {
|
||||
const fullList = state.masterData.sw.filter(a => a.type === state.activeSubTab);
|
||||
const isSub = state.activeSubTab === '구독SW';
|
||||
|
||||
const filterBar = document.createElement('div');
|
||||
filterBar.className = 'search-bar';
|
||||
filterBar.innerHTML = `
|
||||
<div class="search-item flex-1">
|
||||
<label>통합 검색 (제품명/부서)</label>
|
||||
<input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>분야</label>
|
||||
<select id="filter-field">
|
||||
<option value="">전체 분야</option>
|
||||
<option value="업무공통">업무공통</option>
|
||||
<option value="개발S/W">개발S/W</option>
|
||||
<option value="디자인">디자인</option>
|
||||
<option value="설계S/W">설계S/W</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>법인</label>
|
||||
<select id="filter-corp">
|
||||
<option value="">전체 법인</option>
|
||||
<option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||
<i data-lucide="refresh-ccw"></i> 필터 초기화
|
||||
</button>
|
||||
`;
|
||||
container.appendChild(filterBar);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-container';
|
||||
const table = document.createElement('table');
|
||||
table.innerHTML = `
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:center;">No.</th>
|
||||
<th style="text-align:center;">분야</th>
|
||||
<th style="text-align:center;">법인</th>
|
||||
<th style="text-align:center;">부서</th>
|
||||
<th style="text-align:center;">제품명</th>
|
||||
<th style="text-align:center;">구매일</th>
|
||||
${isSub ? '<th style="text-align:center;">구독일</th>' : ''}
|
||||
<th style="text-align:center;">금액</th>
|
||||
<th style="text-align:center;">수량</th>
|
||||
<th style="text-align:center;">사용가능</th>
|
||||
<th style="text-align:center;">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamic-tbody"></tbody>
|
||||
`;
|
||||
|
||||
tableWrapper.appendChild(table);
|
||||
container.appendChild(tableWrapper);
|
||||
const tbody = table.querySelector('tbody')!;
|
||||
|
||||
const updateTable = () => {
|
||||
const keywordInput = document.getElementById('filter-keyword') as HTMLInputElement;
|
||||
const fieldSelect = document.getElementById('filter-field') as HTMLSelectElement;
|
||||
const corpSelect = document.getElementById('filter-corp') as HTMLSelectElement;
|
||||
|
||||
const keyword = keywordInput ? keywordInput.value.toLowerCase().trim() : '';
|
||||
const field = fieldSelect ? fieldSelect.value : '';
|
||||
const corp = corpSelect ? corpSelect.value : '';
|
||||
|
||||
const filtered = fullList.filter(asset => {
|
||||
const matchKeyword = !keyword || (asset.제품명 || '').toLowerCase().includes(keyword) || (asset.부서 || '').toLowerCase().includes(keyword);
|
||||
const matchField = !field || asset.분야 === field;
|
||||
const matchCorp = !corp || asset.법인 === corp;
|
||||
return matchKeyword && matchField && matchCorp;
|
||||
});
|
||||
|
||||
tbody.innerHTML = '';
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="${isSub ? 11 : 10}" style="text-align:center; padding: 3rem; color: var(--text-muted);">검색 결과가 없습니다.</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach((asset, idx) => {
|
||||
const assigned = state.masterData.swUsers.filter(u => u.swId === asset.id).length;
|
||||
const qty = typeof asset.수량 === 'number' ? asset.수량 : parseInt(asset.수량||'0', 10);
|
||||
const avail = qty - assigned;
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.cursor = 'pointer';
|
||||
|
||||
tr.innerHTML = `
|
||||
<td style="text-align:center;">${idx+1}</td>
|
||||
<td>${asset.분야||''}</td>
|
||||
<td>${asset.법인}</td>
|
||||
<td>${asset.부서||''}</td>
|
||||
<td>${asset.제품명}</td>
|
||||
<td style="text-align:center;">${asset.구매일||''}</td>
|
||||
${isSub ? `<td style="text-align:center;">${asset.구독일||''}</td>` : ''}
|
||||
<td style="text-align:right;">${asset.금액||'0'}</td>
|
||||
<td style="text-align:center;">${qty}</td>
|
||||
<td style="text-align:center;"><strong style="color: ${avail > 0 ? 'var(--primary-color)' : 'var(--danger)'}">${avail}</strong></td>
|
||||
<td style="display:flex; justify-content:center; align-items:center; gap:0.5rem;">
|
||||
<button type="button" class="btn-icon btn-edit" title="수정" style="color: var(--text-muted);"><i data-lucide="edit-2"></i></button>
|
||||
<button type="button" class="btn-icon btn-users" title="사용자 관리" style="color: var(--primary-color);"><i data-lucide="users"></i></button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
tr.addEventListener('click', (e) => { if (!(e.target as HTMLElement).closest('button')) openSwModal(asset); });
|
||||
tr.querySelector('.btn-edit')?.addEventListener('click', (e) => { e.stopPropagation(); openSwModal(asset); });
|
||||
tr.querySelector('.btn-users')?.addEventListener('click', (e) => { e.stopPropagation(); openSwUserModal(asset); });
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
createIcons({ icons: { Edit2, Users } });
|
||||
};
|
||||
|
||||
document.getElementById('filter-keyword')?.addEventListener('input', updateTable);
|
||||
document.getElementById('filter-field')?.addEventListener('change', updateTable);
|
||||
document.getElementById('filter-corp')?.addEventListener('change', updateTable);
|
||||
document.getElementById('btn-reset-filters')?.addEventListener('click', () => {
|
||||
(document.getElementById('filter-keyword') as HTMLInputElement).value = '';
|
||||
(document.getElementById('filter-field') as HTMLSelectElement).value = '';
|
||||
(document.getElementById('filter-corp') as HTMLSelectElement).value = '';
|
||||
updateTable();
|
||||
});
|
||||
|
||||
updateTable();
|
||||
}
|
||||
Reference in New Issue
Block a user