49 lines
3.1 KiB
JavaScript
49 lines
3.1 KiB
JavaScript
const Dashboard = {
|
||
async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },
|
||
|
||
async mount() {
|
||
const ct = document.getElementById('page-content');
|
||
document.getElementById('page-title').textContent = '控ĺ<C2A7>¶ĺŹ?;
|
||
document.getElementById('page-actions').innerHTML = `
|
||
<button class="btn btn-p btn-sm" onclick="App.navigate('tickets','create?type=report')"><i class="fas fa-flag"></i> 举报</button>
|
||
<button class="btn btn-s btn-sm" onclick="App.navigate('tickets','create?type=suggestion')"><i class="fas fa-lightbulb"></i> 建议</button>
|
||
<button class="btn btn-w btn-sm" onclick="App.navigate('tickets','create?type=appeal')"><i class="fas fa-gavel"></i> 申诉</button>
|
||
`;
|
||
|
||
try {
|
||
const [stats, exports] = await Promise.all([
|
||
API.get('/tickets/stats'),
|
||
Auth.isOwner() ? API.get('/export/dashboard') : null,
|
||
]);
|
||
this.renderContent(ct, stats, exports);
|
||
} catch (e) { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
|
||
},
|
||
|
||
renderContent(ct, stats, exports) {
|
||
const byStatus = stats.byStatus || {};
|
||
|
||
ct.innerHTML = `
|
||
<div class="stats-grid">
|
||
<div class="stat-card"><div class="si" style="background:#eef2ff;color:var(--p)"><i class="fas fa-ticket-alt"></i></div><div><div class="sv">${stats.total}</div><div class="sl">工单总数</div></div></div>
|
||
<div class="stat-card"><div class="si" style="background:#fef3c7;color:#d97706"><i class="fas fa-clock"></i></div><div><div class="sv">${byStatus.pending || 0}</div><div class="sl">待处ç<E2809E>?/div></div></div>
|
||
<div class="stat-card"><div class="si" style="background:#ede9fe;color:#7c3aed"><i class="fas fa-cogs"></i></div><div><div class="sv">${byStatus.processing || 0}</div><div class="sl">处ç<E2809E>†ä¸?/div></div></div>
|
||
<div class="stat-card"><div class="si" style="background:#d1fae5;color:var(--s)"><i class="fas fa-check-circle"></i></div><div><div class="sv">${byStatus.resolved || 0}</div><div class="sl">已解�/div></div></div>
|
||
</div>
|
||
|
||
${Auth.isAdmin() && exports ? `
|
||
<div class="grid-2">
|
||
<div class="card"><div class="card-h">类型ĺ<E280B9>†ĺ¸<C4BA></div><div class="card-b">
|
||
${(exports.byType||[]).map(r => `<div class="detail-row"><span class="lbl">${U.TYPE[r.type]||r.type}</span><span class="val fb">${r.c} ćť?/span></div>`).join('')}
|
||
</div></div>
|
||
<div class="card"><div class="card-h">状ć€<C487>ĺ<EFBFBD>†ĺ¸?/div><div class="card-b">
|
||
${(exports.byStatus||[]).map(r => `<div class="detail-row"><span class="lbl">${U.STATUS[r.status]||r.status}</span><span class="val fb">${r.c} ćť?/span></div>`).join('')}
|
||
</div></div>
|
||
</div>
|
||
${exports.monthly?.length ? `
|
||
<div class="card"><div class="card-h">ćś<C487>度趋势</div><div class="card-b table-wrap"><table><thead><tr><th>ćś<C487>ä»˝</th><th>数量</th></tr></thead><tbody>${exports.monthly.map(m=>`<tr><td>${m.m}</td><td>${m.c}</td></tr>`).join('')}</tbody></table></div></div>` : ''}
|
||
` : ''}
|
||
<p class="tm ts tc">ćŹ<EFBFBD>示: 可在"工单ĺ<E280A2>—表"ä¸ćźĄçś‹ĺ’Śç®ˇç<EFBFBD>†ć‰€ćś‰ĺ·ĄĺŤ?/p>
|
||
`;
|
||
}
|
||
};
|