DEV-004: M-DEVBOARD环节0-2-开发者实时看板-纯前端-PCA雷达图+排行榜
This commit is contained in:
zhizhi200271
commit
451a513d1b
|
|
@ -0,0 +1,140 @@
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: linear-gradient(145deg, var(--color-bg-card), #2a3442);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
background: linear-gradient(135deg, #fff, var(--color-accent-primary));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-card {
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-avatar {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 25px;
|
||||||
|
background: linear-gradient(135deg, var(--color-accent-primary), #4cc9f0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-name {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-id {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-streak {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--color-accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 40px 1fr 70px;
|
||||||
|
align-items: center;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-streak-bar {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.streak-progress {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #00b4d8, #4cc9f0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.streak-count {
|
||||||
|
position: absolute;
|
||||||
|
right: 6px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border: 3px solid var(--color-border);
|
||||||
|
border-top-color: var(--color-accent-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
background-color: var(--color-bg-secondary);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.navbar-logo span {
|
||||||
|
color: var(--color-accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
min-height: calc(100vh - 70px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-left, .main-board, .sidebar-right {
|
||||||
|
background-color: var(--color-bg-secondary);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.main-container {
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
}
|
||||||
|
.sidebar-right {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.main-container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.sidebar-left, .main-board, .sidebar-right {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
:root {
|
||||||
|
--color-bg-primary: #0a0e1a;
|
||||||
|
--color-bg-secondary: #111827;
|
||||||
|
--color-bg-card: #1e2433;
|
||||||
|
--color-text-primary: #ffffff;
|
||||||
|
--color-text-secondary: #a0aec0;
|
||||||
|
--color-accent-primary: #00b4d8;
|
||||||
|
--color-accent-secondary: #0077be;
|
||||||
|
--color-success: #10b981;
|
||||||
|
--color-warning: #f59e0b;
|
||||||
|
--color-danger: #ef4444;
|
||||||
|
--color-border: #2d3748;
|
||||||
|
|
||||||
|
--breakpoint-mobile: 768px;
|
||||||
|
--breakpoint-tablet: 1024px;
|
||||||
|
|
||||||
|
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family-base);
|
||||||
|
background-color: var(--color-bg-primary);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--color-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>HoloLake 开发者实时看板</title>
|
||||||
|
<link rel="stylesheet" href="css/theme.css">
|
||||||
|
<link rel="stylesheet" href="css/layout.css">
|
||||||
|
<link rel="stylesheet" href="css/components.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar">
|
||||||
|
<div class="navbar-logo">
|
||||||
|
<span>◉</span>
|
||||||
|
<span>HoloLake · DevBoard</span>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-info">
|
||||||
|
<span id="last-update-time">最后更新: --:--:--</span>
|
||||||
|
<span id="refresh-indicator">⏳ 30s</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="main-container">
|
||||||
|
<aside class="sidebar-left">
|
||||||
|
<h3 style="color: var(--color-accent-primary);">🧠 PCA雷达图</h3>
|
||||||
|
<div style="text-align: center; margin: 0.5rem 0;">
|
||||||
|
<span id="current-dev-name">之之</span> · 点击卡片切换
|
||||||
|
</div>
|
||||||
|
<canvas id="pca-canvas" width="300" height="300" style="width:100%; height:auto;"></canvas>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="main-board">
|
||||||
|
<div id="stats-container"></div>
|
||||||
|
<div id="devgrid-container"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="sidebar-right">
|
||||||
|
<div id="ranking-container"></div>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="js/utils.js"></script>
|
||||||
|
<script src="js/api.js"></script>
|
||||||
|
<script src="js/board.js"></script>
|
||||||
|
<script src="js/radar.js"></script>
|
||||||
|
<script src="js/ranking.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
const MOCK_DEVELOPERS = [
|
||||||
|
{ id: 'DEV-001', name: '玄泓', streak: 8, el: 6, pca: { exe: 75, tec: 68, sys: 82, col: 79, ini: 85 }, totalScore: 78, status: 'doing', module: 'M-CORE', lastActive: '2026-03-11T10:30:00Z' },
|
||||||
|
{ id: 'DEV-002', name: '苍钺', streak: 5, el: 5, pca: { exe: 82, tec: 71, sys: 65, col: 90, ini: 72 }, totalScore: 76, status: 'pending', module: 'M-UI', lastActive: '2026-03-11T09:15:00Z' },
|
||||||
|
{ id: 'DEV-003', name: '桔子', streak: 13, el: 8, pca: { exe: 88, tec: 85, sys: 92, col: 78, ini: 90 }, totalScore: 87, status: 'doing', module: 'M-ORCHESTRATOR', lastActive: '2026-03-11T11:20:00Z' },
|
||||||
|
{ id: 'DEV-004', name: '之之', streak: 12, el: 8, pca: { exe: 70, tec: 32, sys: 80, col: 80, ini: 83 }, totalScore: 66, status: 'doing', module: 'M-DEVBOARD', lastActive: '2026-03-11T12:05:00Z' },
|
||||||
|
{ id: 'DEV-005', name: '琉光', streak: 7, el: 6, pca: { exe: 79, tec: 74, sys: 71, col: 88, ini: 77 }, totalScore: 78, status: 'done', module: 'M-TEST', lastActive: '2026-03-10T16:40:00Z' },
|
||||||
|
{ id: 'DEV-006', name: '墨羽', streak: 4, el: 4, pca: { exe: 65, tec: 60, sys: 55, col: 92, ini: 68 }, totalScore: 68, status: 'doing', module: 'M-DOC', lastActive: '2026-03-11T08:50:00Z' },
|
||||||
|
{ id: 'DEV-007', name: '霜砚', streak: 10, el: 7, pca: { exe: 84, tec: 79, sys: 81, col: 75, ini: 82 }, totalScore: 80, status: 'blocked', module: 'M-API', lastActive: '2026-03-11T07:30:00Z' },
|
||||||
|
{ id: 'DEV-008', name: '岚茵', streak: 6, el: 5, pca: { exe: 73, tec: 70, sys: 68, col: 85, ini: 74 }, totalScore: 74, status: 'pending', module: 'M-DESIGN', lastActive: '2026-03-10T14:20:00Z' }
|
||||||
|
];
|
||||||
|
|
||||||
|
function getTopStreak(developers) {
|
||||||
|
if (!developers || developers.length === 0) return { name: '无', count: 0 };
|
||||||
|
let top = developers[0];
|
||||||
|
for (let i = 1; i < developers.length; i++) {
|
||||||
|
if (developers[i].streak > top.streak) {
|
||||||
|
top = developers[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { name: top.name, count: top.streak };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDevStatus() {
|
||||||
|
return MOCK_DEVELOPERS;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getPCA(devId) {
|
||||||
|
const dev = MOCK_DEVELOPERS.find(d => d.id === devId);
|
||||||
|
if (!dev) return null;
|
||||||
|
return {
|
||||||
|
exe: dev.pca.exe,
|
||||||
|
tec: dev.pca.tec,
|
||||||
|
sys: dev.pca.sys,
|
||||||
|
col: dev.pca.col,
|
||||||
|
ini: dev.pca.ini,
|
||||||
|
total: dev.totalScore,
|
||||||
|
level: getPCAColor(dev.totalScore).level
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getAllStats() {
|
||||||
|
const activeDevs = MOCK_DEVELOPERS.filter(d => d.status === 'doing').length;
|
||||||
|
const topStreak = getTopStreak(MOCK_DEVELOPERS);
|
||||||
|
return {
|
||||||
|
totalDevs: 8,
|
||||||
|
activeDevs: activeDevs,
|
||||||
|
totalCodeLines: 85600,
|
||||||
|
totalModules: 24,
|
||||||
|
modulesCompleted: 8,
|
||||||
|
modulesInProgress: 12,
|
||||||
|
modulesPending: 4,
|
||||||
|
topStreak: topStreak
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
let refreshInterval;
|
||||||
|
let countdownInterval;
|
||||||
|
let seconds = 30;
|
||||||
|
|
||||||
|
function updateLastUpdateTime() {
|
||||||
|
const el = document.getElementById('last-update-time');
|
||||||
|
if (el) {
|
||||||
|
const now = new Date();
|
||||||
|
el.textContent = `最后更新: ${now.toLocaleTimeString('zh-CN', { hour12: false })}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCountdown() {
|
||||||
|
const el = document.getElementById('refresh-indicator');
|
||||||
|
if (el) el.textContent = `⏳ ${seconds}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function startCountdown() {
|
||||||
|
seconds = 30;
|
||||||
|
updateCountdown();
|
||||||
|
if (countdownInterval) clearInterval(countdownInterval);
|
||||||
|
countdownInterval = setInterval(() => {
|
||||||
|
seconds--;
|
||||||
|
if (seconds <= 0) seconds = 30;
|
||||||
|
updateCountdown();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshAllData() {
|
||||||
|
const devs = await getDevStatus();
|
||||||
|
const stats = await getAllStats();
|
||||||
|
if (typeof renderStats === 'function') renderStats(stats);
|
||||||
|
if (typeof renderDevCards === 'function') renderDevCards(devs);
|
||||||
|
if (typeof renderRanking === 'function') renderRanking(devs);
|
||||||
|
updateLastUpdateTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initApp() {
|
||||||
|
await initBoard();
|
||||||
|
await initRanking();
|
||||||
|
initRadar();
|
||||||
|
await refreshAllData();
|
||||||
|
startCountdown();
|
||||||
|
if (refreshInterval) clearInterval(refreshInterval);
|
||||||
|
refreshInterval = setInterval(refreshAllData, 30000);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', initApp);
|
||||||
|
|
||||||
|
window.addEventListener('beforeunload', () => {
|
||||||
|
if (refreshInterval) clearInterval(refreshInterval);
|
||||||
|
if (countdownInterval) clearInterval(countdownInterval);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
function renderStats(stats) {
|
||||||
|
const container = document.getElementById('stats-container');
|
||||||
|
if (!container) return;
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">活跃开发者</div>
|
||||||
|
<div class="stat-number">${stats.activeDevs}</div>
|
||||||
|
<div class="stat-sub">总人数 ${stats.totalDevs}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">总代码量</div>
|
||||||
|
<div class="stat-number">${formatNumber(stats.totalCodeLines)}</div>
|
||||||
|
<div class="stat-sub">行代码</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">模块进度</div>
|
||||||
|
<div class="stat-number">${stats.modulesCompleted}/${stats.totalModules}</div>
|
||||||
|
<div class="stat-sub">✅ ${stats.modulesCompleted} / ⚡ ${stats.modulesInProgress} / ⏳ ${stats.modulesPending}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">最高连胜</div>
|
||||||
|
<div class="stat-number">${stats.topStreak.count}</div>
|
||||||
|
<div class="stat-sub">${stats.topStreak.name} ${getStreakEmoji(stats.topStreak.count)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDevCards(developers) {
|
||||||
|
const container = document.getElementById('devgrid-container');
|
||||||
|
if (!container) return;
|
||||||
|
const sorted = [...developers].sort((a, b) => b.streak - a.streak);
|
||||||
|
let html = '<div class="dev-grid">';
|
||||||
|
sorted.forEach(dev => {
|
||||||
|
const pcaColor = getPCAColor(dev.totalScore);
|
||||||
|
html += `
|
||||||
|
<div class="dev-card" data-dev-id="${dev.id}">
|
||||||
|
<div class="dev-card-header">
|
||||||
|
<div class="dev-avatar">${dev.name[0]}</div>
|
||||||
|
<div class="dev-info">
|
||||||
|
<div class="dev-name">${dev.name}</div>
|
||||||
|
<div class="dev-id">${dev.id}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dev-module">📁 ${dev.module}</div>
|
||||||
|
<div class="dev-stats">
|
||||||
|
<div class="dev-streak">${dev.streak}<span>连胜</span></div>
|
||||||
|
<div class="dev-badges">
|
||||||
|
<span class="badge badge-el">EL-${dev.el}</span>
|
||||||
|
<span class="badge" style="background:${pcaColor.color}20; color:${pcaColor.color}">${pcaColor.level} · ${dev.totalScore}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dev-footer">
|
||||||
|
<span>${getStatusBadge(dev.status)}</span>
|
||||||
|
<span>🕒 ${formatDate(dev.lastActive)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initBoard() {
|
||||||
|
const devs = await getDevStatus();
|
||||||
|
const stats = await getAllStats();
|
||||||
|
renderStats(stats);
|
||||||
|
renderDevCards(devs);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.initBoard = initBoard;
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
function drawRadar(canvasId, pcaData) {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const w = canvas.width;
|
||||||
|
const h = canvas.height;
|
||||||
|
const cx = w / 2;
|
||||||
|
const cy = h / 2;
|
||||||
|
const maxR = Math.min(w, h) * 0.35;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
|
||||||
|
const dims = [
|
||||||
|
{ label: '执行力', val: pcaData.exe || 0 },
|
||||||
|
{ label: '技术纵深', val: pcaData.tec || 0 },
|
||||||
|
{ label: '系统理解', val: pcaData.sys || 0 },
|
||||||
|
{ label: '协作力', val: pcaData.col || 0 },
|
||||||
|
{ label: '主动性', val: pcaData.ini || 0 }
|
||||||
|
];
|
||||||
|
|
||||||
|
for (let lv = 1; lv <= 5; lv++) {
|
||||||
|
const r = (maxR * lv) / 5;
|
||||||
|
ctx.beginPath();
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
|
||||||
|
const x = cx + r * Math.cos(angle);
|
||||||
|
const y = cy + r * Math.sin(angle);
|
||||||
|
if (i === 0) ctx.moveTo(x, y);
|
||||||
|
else ctx.lineTo(x, y);
|
||||||
|
}
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.strokeStyle = '#2d3748';
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(cx, cy);
|
||||||
|
ctx.lineTo(cx + maxR * Math.cos(angle), cy + maxR * Math.sin(angle));
|
||||||
|
ctx.strokeStyle = '#4a5568';
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.fillStyle = '#cbd5e0';
|
||||||
|
ctx.font = '12px sans-serif';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
|
||||||
|
const x = cx + (maxR + 25) * Math.cos(angle);
|
||||||
|
const y = cy + (maxR + 25) * Math.sin(angle);
|
||||||
|
ctx.fillText(dims[i].label, x, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
const points = [];
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
|
||||||
|
const r = (dims[i].val / 100) * maxR;
|
||||||
|
points.push({
|
||||||
|
x: cx + r * Math.cos(angle),
|
||||||
|
y: cy + r * Math.sin(angle)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(points[0].x, points[0].y);
|
||||||
|
for (let i = 1; i < 5; i++) ctx.lineTo(points[i].x, points[i].y);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fillStyle = 'rgba(0, 180, 216, 0.3)';
|
||||||
|
ctx.fill();
|
||||||
|
ctx.strokeStyle = '#00b4d8';
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
points.forEach(p => {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(p.x, p.y, 4, 0, 2 * Math.PI);
|
||||||
|
ctx.fillStyle = '#fff';
|
||||||
|
ctx.fill();
|
||||||
|
ctx.strokeStyle = '#00b4d8';
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
ctx.stroke();
|
||||||
|
});
|
||||||
|
|
||||||
|
ctx.fillStyle = '#fff';
|
||||||
|
ctx.font = 'bold 24px sans-serif';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.fillText(pcaData.total || '0', cx, cy - 10);
|
||||||
|
|
||||||
|
ctx.font = 'bold 14px sans-serif';
|
||||||
|
const colorInfo = getPCAColor(pcaData.total || 0);
|
||||||
|
ctx.fillStyle = colorInfo.color;
|
||||||
|
ctx.fillText(pcaData.level || 'C', cx, cy + 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadRadarForDev(devId) {
|
||||||
|
const pcaData = await getPCA(devId);
|
||||||
|
if (pcaData) drawRadar('pca-canvas', pcaData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initRadar() {
|
||||||
|
document.querySelectorAll('.dev-card').forEach(card => {
|
||||||
|
card.addEventListener('click', () => {
|
||||||
|
loadRadarForDev(card.dataset.devId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
loadRadarForDev('DEV-004');
|
||||||
|
}
|
||||||
|
|
||||||
|
window.initRadar = initRadar;
|
||||||
|
window.loadRadarForDev = loadRadarForDev;
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
function renderRanking(developers) {
|
||||||
|
const container = document.getElementById('ranking-container');
|
||||||
|
if (!container) return;
|
||||||
|
const sorted = [...developers].sort((a, b) => b.streak - a.streak);
|
||||||
|
const maxStreak = sorted[0].streak;
|
||||||
|
|
||||||
|
let html = '<div class="ranking-header"><h3>🏆 连胜排行榜</h3><span>实时更新</span></div><div class="ranking-list">';
|
||||||
|
|
||||||
|
sorted.forEach((dev, idx) => {
|
||||||
|
const medal = idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `${idx+1}.`;
|
||||||
|
const percent = (dev.streak / maxStreak) * 100;
|
||||||
|
html += `
|
||||||
|
<div class="ranking-item" data-dev-id="${dev.id}">
|
||||||
|
<div class="ranking-rank">${medal}</div>
|
||||||
|
<div class="ranking-info">
|
||||||
|
<div class="ranking-name">${dev.name}</div>
|
||||||
|
<div class="ranking-streak-bar">
|
||||||
|
<div class="streak-progress" style="width:${percent}%"></div>
|
||||||
|
<span class="streak-count">${dev.streak}连胜</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initRanking() {
|
||||||
|
const devs = await getDevStatus();
|
||||||
|
renderRanking(devs);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.initRanking = initRanking;
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
function formatDate(isoString) {
|
||||||
|
if (!isoString) return '--:--:--';
|
||||||
|
const date = new Date(isoString);
|
||||||
|
return date.toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStreakEmoji(count) {
|
||||||
|
if (count >= 20) return '🔥🔥🔥';
|
||||||
|
if (count >= 15) return '🔥🔥';
|
||||||
|
if (count >= 10) return '🔥';
|
||||||
|
if (count >= 5) return '⚡';
|
||||||
|
if (count >= 3) return '👍';
|
||||||
|
return '👣';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPCAColor(score) {
|
||||||
|
if (score >= 90) return { color: '#FFD700', level: 'S', text: '传奇' };
|
||||||
|
if (score >= 80) return { color: '#00B4D8', level: 'A', text: '精英' };
|
||||||
|
if (score >= 70) return { color: '#10B981', level: 'B', text: '专家' };
|
||||||
|
if (score >= 60) return { color: '#F59E0B', level: 'C', text: '熟手' };
|
||||||
|
return { color: '#EF4444', level: 'D', text: '新手' };
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusBadge(status) {
|
||||||
|
const map = {
|
||||||
|
'done': '✅ 已完成',
|
||||||
|
'doing': '⚡ 进行中',
|
||||||
|
'pending': '⏳ 待分配',
|
||||||
|
'blocked': '⚠️ 阻塞'
|
||||||
|
};
|
||||||
|
return map[status] || '⏳ 待分配';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatNumber(num) {
|
||||||
|
return num?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') || '0';
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue