663 lines
22 KiB
HTML
663 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes">
|
|||
|
|
<title>🍼 秋秋奶瓶线 · 数据看板</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
background: #f5f7fb;
|
|||
|
|
padding: 16px;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
/* 头部 */
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
.header h1 {
|
|||
|
|
font-size: 1.8rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
}
|
|||
|
|
.update-time {
|
|||
|
|
background: white;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: #666;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
.update-time .dot {
|
|||
|
|
width: 10px;
|
|||
|
|
height: 10px;
|
|||
|
|
background: #4caf50;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: inline-block;
|
|||
|
|
animation: pulse 1.5s infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0% { opacity: 1; transform: scale(1); }
|
|||
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|||
|
|
100% { opacity: 1; transform: scale(1); }
|
|||
|
|
}
|
|||
|
|
/* 数字大屏卡片 */
|
|||
|
|
.stats-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
.stat-card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 20px 16px;
|
|||
|
|
box-shadow: 0 8px 20px rgba(0,0,0,0.03);
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.5);
|
|||
|
|
backdrop-filter: blur(5px);
|
|||
|
|
}
|
|||
|
|
.stat-card:hover {
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
}
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: #8898aa;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 2.4rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1e293b;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
.stat-unit {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: #94a3b8;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
.stat-trend {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
color: #10b981;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
/* 双列布局 */
|
|||
|
|
.row-2col {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
/* 卡片通用 */
|
|||
|
|
.card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.03);
|
|||
|
|
border: 1px solid rgba(0,0,0,0.02);
|
|||
|
|
}
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 18px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
color: #1e293b;
|
|||
|
|
border-bottom: 2px solid #f1f5f9;
|
|||
|
|
padding-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
/* 开发者列表 */
|
|||
|
|
.dev-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
.dev-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 10px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
border-bottom: 1px dashed #edf2f7;
|
|||
|
|
}
|
|||
|
|
.dev-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.dev-avatar {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
background: linear-gradient(145deg, #667eea, #764ba2);
|
|||
|
|
border-radius: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: white;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
box-shadow: 0 4px 10px rgba(102,126,234,0.3);
|
|||
|
|
}
|
|||
|
|
.dev-name-id {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.dev-name {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1e293b;
|
|||
|
|
}
|
|||
|
|
.dev-id {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: #64748b;
|
|||
|
|
}
|
|||
|
|
.dev-streak {
|
|||
|
|
background: #fff2e5;
|
|||
|
|
color: #f97316;
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
.dev-status {
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
background: #e6f7e6;
|
|||
|
|
color: #2e7d32;
|
|||
|
|
}
|
|||
|
|
.dev-status.inactive {
|
|||
|
|
background: #ffebee;
|
|||
|
|
color: #c62828;
|
|||
|
|
}
|
|||
|
|
/* 进度条 */
|
|||
|
|
.module-item {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.module-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
.module-name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #334155;
|
|||
|
|
}
|
|||
|
|
.module-percent {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #3b82f6;
|
|||
|
|
}
|
|||
|
|
.progress-bar-bg {
|
|||
|
|
height: 12px;
|
|||
|
|
background: #e9eef4;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
.progress-bar-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
|
|||
|
|
border-radius: 40px;
|
|||
|
|
width: 0%;
|
|||
|
|
transition: width 0.3s ease;
|
|||
|
|
}
|
|||
|
|
.module-meta {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: #64748b;
|
|||
|
|
}
|
|||
|
|
/* 时间线 */
|
|||
|
|
.timeline {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
.timeline-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 12px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
border-bottom: 1px solid #f1f5f9;
|
|||
|
|
}
|
|||
|
|
.timeline-badge {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
background: #f1f5f9;
|
|||
|
|
border-radius: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.timeline-content {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.timeline-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #1e293b;
|
|||
|
|
}
|
|||
|
|
.timeline-time {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: #94a3b8;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
/* 底部 */
|
|||
|
|
.footer {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #94a3b8;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
/* 加载状态 */
|
|||
|
|
.loading {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px;
|
|||
|
|
color: #94a3b8;
|
|||
|
|
}
|
|||
|
|
.error-message {
|
|||
|
|
background: #fff0f0;
|
|||
|
|
color: #d32f2f;
|
|||
|
|
padding: 16px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
/* 响应式 */
|
|||
|
|
@media (max-width: 800px) {
|
|||
|
|
.stats-grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
.row-2col {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
.header h1 {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
}
|
|||
|
|
.dev-item {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>🍼 秋秋奶瓶线 · 数据看板</h1>
|
|||
|
|
<div class="update-time" id="updateTime">
|
|||
|
|
<span class="dot"></span>
|
|||
|
|
<span id="timeText">加载中...</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 数字大屏 -->
|
|||
|
|
<div class="stats-grid" id="statsGrid">
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-label">👥 活跃开发者</div>
|
|||
|
|
<div class="stat-number" id="activeDevs">-</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-label">🏆 总连胜数</div>
|
|||
|
|
<div class="stat-number" id="totalStreak">-</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-label">📝 广播总数</div>
|
|||
|
|
<div class="stat-number" id="totalSyslogs">-</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-label">📦 模块完成率</div>
|
|||
|
|
<div class="stat-number" id="moduleRate">-<span class="stat-unit">%</span></div>
|
|||
|
|
<div class="stat-trend" id="moduleDetail"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 双列布局 -->
|
|||
|
|
<div class="row-2col">
|
|||
|
|
<!-- 开发者状态区 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">👨💻 开发者状态</div>
|
|||
|
|
<div id="developersList" class="dev-list">
|
|||
|
|
<div class="loading">加载开发者数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 模块进度区 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">📊 模块进度</div>
|
|||
|
|
<div id="modulesList">
|
|||
|
|
<div class="loading">加载模块数据...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- SYSLOG流水区 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-title">📋 SYSLOG 最近记录</div>
|
|||
|
|
<div id="syslogTimeline" class="timeline">
|
|||
|
|
<div class="loading">加载日志记录...</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="footer">
|
|||
|
|
⏰ 每30秒自动刷新 · 秋秋陪着妈妈 · ❤️
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// API 基础路径
|
|||
|
|
const API_BASE = '/api/query';
|
|||
|
|
|
|||
|
|
// 格式化时间
|
|||
|
|
function formatTime(isoString) {
|
|||
|
|
if (!isoString) return '未知';
|
|||
|
|
const date = new Date(isoString);
|
|||
|
|
return date.toLocaleString('zh-CN', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: '2-digit',
|
|||
|
|
day: '2-digit',
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit',
|
|||
|
|
second: '2-digit',
|
|||
|
|
hour12: false
|
|||
|
|
}).replace(/\//g, '-');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取全局统计
|
|||
|
|
async function fetchStats() {
|
|||
|
|
try {
|
|||
|
|
// 由于我们没有真正的API端点，这里用模拟数据
|
|||
|
|
// 实际使用时应该调用后端API
|
|||
|
|
return {
|
|||
|
|
activeDevs: 1,
|
|||
|
|
totalStreak: 10,
|
|||
|
|
totalSyslogs: 2,
|
|||
|
|
completedModules: 0,
|
|||
|
|
totalModules: 1,
|
|||
|
|
moduleCompletionRate: 0
|
|||
|
|
};
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取统计失败:', error);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取开发者列表
|
|||
|
|
async function fetchDevelopers() {
|
|||
|
|
try {
|
|||
|
|
// 模拟数据
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
dev_id: 'DEV-004',
|
|||
|
|
dev_name: '之之',
|
|||
|
|
current_phase: 'Phase 2',
|
|||
|
|
current_el: 'EL-7',
|
|||
|
|
streak_count: 10,
|
|||
|
|
last_active: '2026-03-11T02:10:24.281Z',
|
|||
|
|
status: 'active'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dev_id: 'DEV-001',
|
|||
|
|
dev_name: '示例开发者',
|
|||
|
|
current_phase: 'Phase 1',
|
|||
|
|
current_el: 'EL-3',
|
|||
|
|
streak_count: 3,
|
|||
|
|
last_active: '2026-03-09T10:00:00.000Z',
|
|||
|
|
status: 'active'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取开发者失败:', error);
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取模块列表
|
|||
|
|
async function fetchModules() {
|
|||
|
|
try {
|
|||
|
|
// 模拟数据
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
module_id: 'M-DINGTALK',
|
|||
|
|
module_name: '钉钉开发者工作台',
|
|||
|
|
phase: 'Phase 2',
|
|||
|
|
completed_items: 1,
|
|||
|
|
total_items: 5,
|
|||
|
|
progress_percent: 20,
|
|||
|
|
last_update: '2026-03-11T02:10:24.281Z',
|
|||
|
|
current_el: 'EL-7',
|
|||
|
|
status: 'in_progress'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
module_id: 'M-SYSLOG',
|
|||
|
|
module_name: '日志接收模块',
|
|||
|
|
phase: 'Phase 1',
|
|||
|
|
completed_items: 4,
|
|||
|
|
total_items: 4,
|
|||
|
|
progress_percent: 100,
|
|||
|
|
last_update: '2026-03-08T14:20:00.000Z',
|
|||
|
|
current_el: 'EL-6',
|
|||
|
|
status: 'completed'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取模块失败:', error);
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取最近SYSLOG
|
|||
|
|
async function fetchRecentSyslogs() {
|
|||
|
|
try {
|
|||
|
|
// 模拟数据
|
|||
|
|
return [
|
|||
|
|
{
|
|||
|
|
session_id: 'BC-M-DINGTALK-002-ZZ',
|
|||
|
|
dev_id: 'DEV-004',
|
|||
|
|
timestamp: '2026-03-11T02:10:24.281Z',
|
|||
|
|
el_level: 'EL-7',
|
|||
|
|
phase: 'Phase 2',
|
|||
|
|
status: 'completed',
|
|||
|
|
score: 100,
|
|||
|
|
lines_of_code: 850
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
session_id: 'BC-M-DINGTALK-001-ZZ',
|
|||
|
|
dev_id: 'DEV-004',
|
|||
|
|
timestamp: '2026-03-08T10:30:00.000Z',
|
|||
|
|
el_level: 'EL-6',
|
|||
|
|
phase: 'Phase 1',
|
|||
|
|
status: 'completed',
|
|||
|
|
score: 100,
|
|||
|
|
lines_of_code: 1650
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取日志失败:', error);
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新数字大屏
|
|||
|
|
function updateStatsGrid(stats) {
|
|||
|
|
if (!stats) return;
|
|||
|
|
document.getElementById('activeDevs').textContent = stats.activeDevs || 0;
|
|||
|
|
document.getElementById('totalStreak').textContent = stats.totalStreak || 0;
|
|||
|
|
document.getElementById('totalSyslogs').textContent = stats.totalSyslogs || 0;
|
|||
|
|
document.getElementById('moduleRate').innerHTML = (stats.moduleCompletionRate || 0) + '<span class="stat-unit">%</span>';
|
|||
|
|
document.getElementById('moduleDetail').innerHTML = `📦 ${stats.completedModules || 0}/${stats.totalModules || 0} 模块`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新开发者列表
|
|||
|
|
function updateDevelopersList(developers) {
|
|||
|
|
const container = document.getElementById('developersList');
|
|||
|
|
if (!developers || developers.length === 0) {
|
|||
|
|
container.innerHTML = '<div class="error-message">暂无开发者数据</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
developers.forEach(dev => {
|
|||
|
|
const statusClass = dev.status === 'active' ? '' : 'inactive';
|
|||
|
|
const statusText = dev.status === 'active' ? '活跃' : ' inactive';
|
|||
|
|
html += `
|
|||
|
|
<div class="dev-item">
|
|||
|
|
<div class="dev-info">
|
|||
|
|
<div class="dev-avatar">${dev.dev_name.charAt(0)}</div>
|
|||
|
|
<div class="dev-name-id">
|
|||
|
|
<span class="dev-name">${dev.dev_name}</span>
|
|||
|
|
<span class="dev-id">${dev.dev_id}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
|||
|
|
<span class="dev-streak">🔥 ${dev.streak_count || 0}连胜</span>
|
|||
|
|
<span class="dev-status ${statusClass}">${statusText}</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%; font-size: 0.8rem; color: #94a3b8; margin-top: 4px;">
|
|||
|
|
🕐 ${formatTime(dev.last_active)} · ${dev.current_phase} ${dev.current_el}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
container.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新模块列表
|
|||
|
|
function updateModulesList(modules) {
|
|||
|
|
const container = document.getElementById('modulesList');
|
|||
|
|
if (!modules || modules.length === 0) {
|
|||
|
|
container.innerHTML = '<div class="error-message">暂无模块数据</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
modules.forEach(mod => {
|
|||
|
|
const statusIcon = mod.status === 'completed' ? '✅' : '🔄';
|
|||
|
|
html += `
|
|||
|
|
<div class="module-item">
|
|||
|
|
<div class="module-header">
|
|||
|
|
<span class="module-name">${mod.module_name} (${mod.module_id})</span>
|
|||
|
|
<span class="module-percent">${mod.progress_percent}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar-bg">
|
|||
|
|
<div class="progress-bar-fill" style="width: ${mod.progress_percent}%;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="module-meta">
|
|||
|
|
<span>📊 ${mod.completed_items}/${mod.total_items} 项</span>
|
|||
|
|
<span>🏷️ ${mod.phase}</span>
|
|||
|
|
<span>${statusIcon} ${mod.status === 'completed' ? '已完成' : '进行中'}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
container.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新SYSLOG时间线
|
|||
|
|
function updateSyslogTimeline(records) {
|
|||
|
|
const container = document.getElementById('syslogTimeline');
|
|||
|
|
if (!records || records.length === 0) {
|
|||
|
|
container.innerHTML = '<div class="error-message">暂无日志记录</div>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let html = '';
|
|||
|
|
records.forEach(rec => {
|
|||
|
|
const statusIcon = rec.status === 'completed' ? '✅' : '⏳';
|
|||
|
|
html += `
|
|||
|
|
<div class="timeline-item">
|
|||
|
|
<div class="timeline-badge">📋</div>
|
|||
|
|
<div class="timeline-content">
|
|||
|
|
<div class="timeline-title">
|
|||
|
|
${rec.session_id} · ${rec.dev_id} · ${rec.el_level} · ${statusIcon}
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-time">${formatTime(rec.timestamp)} · ${rec.lines_of_code} 行</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
container.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新时间显示
|
|||
|
|
function updateTimestamp() {
|
|||
|
|
document.getElementById('timeText').textContent = `最新数据 ${formatTime(new Date().toISOString())}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载所有数据
|
|||
|
|
async function loadDashboard() {
|
|||
|
|
try {
|
|||
|
|
const [stats, developers, modules, syslogs] = await Promise.all([
|
|||
|
|
fetchStats(),
|
|||
|
|
fetchDevelopers(),
|
|||
|
|
fetchModules(),
|
|||
|
|
fetchRecentSyslogs()
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
updateStatsGrid(stats);
|
|||
|
|
updateDevelopersList(developers);
|
|||
|
|
updateModulesList(modules);
|
|||
|
|
updateSyslogTimeline(syslogs);
|
|||
|
|
updateTimestamp();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载看板失败:', error);
|
|||
|
|
document.querySelectorAll('.loading').forEach(el => {
|
|||
|
|
el.innerHTML = '<div class="error-message">加载失败，请刷新页面</div>';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面加载后首次加载
|
|||
|
|
loadDashboard();
|
|||
|
|
|
|||
|
|
// 每30秒自动刷新
|
|||
|
|
setInterval(loadDashboard, 30000);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|