diff --git a/static/css/process.css b/static/css/process.css index 3fe97f4..98e8ce3 100644 --- a/static/css/process.css +++ b/static/css/process.css @@ -180,6 +180,52 @@ 50% { transform: scale(1.1); } } +/* 步骤简要数值 */ +.steps-summary { + display: flex; + flex-wrap: wrap; + gap: 10px; + padding: 12px 15px; + background: #f8f9fa; + border-radius: 8px; + margin-top: 10px; +} + +.step-summary-item { + display: flex; + align-items: center; + gap: 5px; + padding: 4px 10px; + background: white; + border-radius: 4px; + font-size: 13px; +} + +.step-summary-item.completed { + background: #d1fae5; +} + +.step-summary-item.running { + background: #e0e7ff; +} + +.step-summary-item.failed { + background: #fee2e2; +} + +.step-summary-item.skipped { + background: #f3f4f6; +} + +.step-summary-label { + color: #666; +} + +.step-summary-value { + font-weight: 600; + color: #333; +} + /* 操作按钮 */ .process-actions { display: flex; diff --git a/static/js/process.js b/static/js/process.js index 0e63ee7..e3e3d1d 100644 --- a/static/js/process.js +++ b/static/js/process.js @@ -133,15 +133,23 @@ function displayActiveProcesses(sessions) { function renderStepsProgress(steps, currentStep) { const totalSteps = 6; const stepStatuses = {}; + const stepDataMap = {}; - // 构建步骤状态映射 + // 构建步骤状态和数据映射 steps.forEach(s => { stepStatuses[s.step_number] = s.step_status; + if (s.step_data) { + try { + stepDataMap[s.step_number] = typeof s.step_data === 'string' ? JSON.parse(s.step_data) : s.step_data; + } catch (e) { + stepDataMap[s.step_number] = s.step_data; + } + } }); const stepNames = ['搜索内容库', '搜索互联网', '抓取网页', '提取数据', '填充字段', '提交审核']; - let html = ''; + let html = '
'; for (let i = 1; i <= totalSteps; i++) { const status = stepStatuses[i] || (i > currentStep ? 'pending' : ''); let className = ''; @@ -158,6 +166,72 @@ function renderStepsProgress(steps, currentStep) {
`; } + html += ''; + + // 添加简要数值显示 + html += '
'; + + // 步骤1:内容库搜索结果数 + if (stepDataMap[1]) { + const count = stepDataMap[1].count || 0; + const status = stepStatuses[1]; + html += `
+ 内容库: + ${count} 篇 +
`; + } + + // 步骤2:互联网搜索结果数 + if (stepDataMap[2]) { + const count = stepDataMap[2].count || 0; + const status = stepStatuses[2]; + html += `
+ 互联网: + ${count} 条 +
`; + } + + // 步骤3:抓取成功数 + if (stepDataMap[3]) { + const count = stepDataMap[3].count || 0; + const status = stepStatuses[3]; + html += `
+ 抓取成功: + ${count} 个 +
`; + } + + // 步骤4:提取状态 + if (stepDataMap[4]) { + const hasData = stepDataMap[4].has_data || stepDataMap[4].extracted; + const status = stepStatuses[4]; + html += `
+ 数据提取: + ${hasData ? '成功' : '无数据'} +
`; + } + + // 步骤5:填充状态 + if (stepDataMap[5]) { + const filled = stepDataMap[5].filled; + const status = stepStatuses[5]; + html += `
+ 字段填充: + ${filled ? '完成' : '失败'} +
`; + } + + // 步骤6:审核ID + if (stepDataMap[6]) { + const reviewId = stepDataMap[6].review_id; + const status = stepStatuses[6]; + html += `
+ 审核ID: + ${reviewId || '-'} +
`; + } + + html += '
'; return html; }