208 lines
8.0 KiB
JavaScript
208 lines
8.0 KiB
JavaScript
// 前端测试示例：ComfyUI任务统计修复验证
|
||
// 这个文件展示了如何在前端调用修复后的统计API
|
||
|
||
import { invoke } from '@tauri-apps/api/tauri';
|
||
|
||
/**
|
||
* 测试修复后的任务统计API
|
||
*/
|
||
async function testTaskStatistics() {
|
||
try {
|
||
console.log('🔍 开始测试任务统计API...');
|
||
|
||
// 调用修复后的统计API
|
||
const statistics = await invoke('get_task_statistics', {
|
||
workflowName: 'test_statistics' // 使用测试数据的工作流名称
|
||
});
|
||
|
||
console.log('✅ 统计API调用成功!');
|
||
console.log('📊 完整统计数据:', statistics);
|
||
|
||
// 验证数据结构
|
||
console.log('\n=== 统计数据验证 ===');
|
||
|
||
// 总体统计
|
||
console.log('📈 总体统计:');
|
||
console.log(` 总任务数: ${statistics.total_tasks}`);
|
||
console.log(` 完成任务: ${statistics.completed_tasks}`);
|
||
console.log(` 失败任务: ${statistics.failed_tasks}`);
|
||
console.log(` 运行中任务: ${statistics.running_tasks}`);
|
||
console.log(` 排队任务: ${statistics.queued_tasks}`);
|
||
console.log(` 成功率: ${statistics.success_rate.toFixed(2)}%`);
|
||
|
||
// 单个任务统计
|
||
console.log('\n📋 单个任务统计:');
|
||
console.log(` 总数: ${statistics.single_task_stats.total_tasks}`);
|
||
console.log(` 完成: ${statistics.single_task_stats.completed_tasks}`);
|
||
console.log(` 失败: ${statistics.single_task_stats.failed_tasks}`);
|
||
console.log(` 运行中: ${statistics.single_task_stats.running_tasks}`);
|
||
console.log(` 排队: ${statistics.single_task_stats.queued_tasks}`);
|
||
console.log(` 成功率: ${statistics.single_task_stats.success_rate.toFixed(2)}%`);
|
||
|
||
// 批量任务统计
|
||
console.log('\n📦 批量任务统计:');
|
||
console.log(` 总数: ${statistics.batch_task_stats.total_tasks}`);
|
||
console.log(` 完成: ${statistics.batch_task_stats.completed_tasks}`);
|
||
console.log(` 失败: ${statistics.batch_task_stats.failed_tasks}`);
|
||
console.log(` 运行中: ${statistics.batch_task_stats.running_tasks}`);
|
||
console.log(` 排队: ${statistics.batch_task_stats.queued_tasks}`);
|
||
console.log(` 成功率: ${statistics.batch_task_stats.success_rate.toFixed(2)}%`);
|
||
|
||
// 验证数据正确性
|
||
console.log('\n✅ 数据正确性验证:');
|
||
|
||
// 验证总数是否等于单个任务 + 批量任务
|
||
const calculatedTotal = statistics.single_task_stats.total_tasks + statistics.batch_task_stats.total_tasks;
|
||
const totalMatch = calculatedTotal === statistics.total_tasks;
|
||
console.log(` 总数验证: ${calculatedTotal} = ${statistics.total_tasks} - ${totalMatch ? '✅' : '❌'}`);
|
||
|
||
// 验证完成任务数
|
||
const calculatedCompleted = statistics.single_task_stats.completed_tasks + statistics.batch_task_stats.completed_tasks;
|
||
const completedMatch = calculatedCompleted === statistics.completed_tasks;
|
||
console.log(` 完成数验证: ${calculatedCompleted} = ${statistics.completed_tasks} - ${completedMatch ? '✅' : '❌'}`);
|
||
|
||
// 验证失败任务数
|
||
const calculatedFailed = statistics.single_task_stats.failed_tasks + statistics.batch_task_stats.failed_tasks;
|
||
const failedMatch = calculatedFailed === statistics.failed_tasks;
|
||
console.log(` 失败数验证: ${calculatedFailed} = ${statistics.failed_tasks} - ${failedMatch ? '✅' : '❌'}`);
|
||
|
||
if (totalMatch && completedMatch && failedMatch) {
|
||
console.log('\n🎉 所有验证通过！统计数据正确区分了单个任务和批量任务！');
|
||
} else {
|
||
console.log('\n❌ 验证失败，数据可能存在问题');
|
||
}
|
||
|
||
return statistics;
|
||
|
||
} catch (error) {
|
||
console.error('❌ 统计API调用失败:', error);
|
||
console.error('错误详情:', error.message);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 在UI中显示统计信息的示例函数
|
||
*/
|
||
function displayStatisticsInUI(statistics) {
|
||
// 这是一个示例函数，展示如何在UI中使用修复后的统计数据
|
||
|
||
// 更新总体统计卡片
|
||
updateStatCard('total-tasks', statistics.total_tasks);
|
||
updateStatCard('completed-tasks', statistics.completed_tasks);
|
||
updateStatCard('failed-tasks', statistics.failed_tasks);
|
||
updateStatCard('success-rate', `${statistics.success_rate.toFixed(1)}%`);
|
||
|
||
// 更新单个任务管理区域
|
||
updateTaskTypeSection('single-task-section', {
|
||
title: '单个任务管理',
|
||
stats: statistics.single_task_stats
|
||
});
|
||
|
||
// 更新批量任务管理区域
|
||
updateTaskTypeSection('batch-task-section', {
|
||
title: '批量任务管理',
|
||
stats: statistics.batch_task_stats
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 更新统计卡片
|
||
*/
|
||
function updateStatCard(elementId, value) {
|
||
const element = document.getElementById(elementId);
|
||
if (element) {
|
||
element.textContent = value;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新任务类型区域
|
||
*/
|
||
function updateTaskTypeSection(sectionId, data) {
|
||
const section = document.getElementById(sectionId);
|
||
if (section) {
|
||
// 更新标题
|
||
const titleElement = section.querySelector('.section-title');
|
||
if (titleElement) {
|
||
titleElement.textContent = data.title;
|
||
}
|
||
|
||
// 更新统计数据
|
||
const statsContainer = section.querySelector('.stats-container');
|
||
if (statsContainer) {
|
||
statsContainer.innerHTML = `
|
||
<div class="stat-item">
|
||
<span class="stat-label">总数:</span>
|
||
<span class="stat-value">${data.stats.total_tasks}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">完成:</span>
|
||
<span class="stat-value">${data.stats.completed_tasks}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">失败:</span>
|
||
<span class="stat-value">${data.stats.failed_tasks}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">运行中:</span>
|
||
<span class="stat-value">${data.stats.running_tasks}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">排队:</span>
|
||
<span class="stat-value">${data.stats.queued_tasks}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">成功率:</span>
|
||
<span class="stat-value">${data.stats.success_rate.toFixed(1)}%</span>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 页面加载时自动测试
|
||
*/
|
||
document.addEventListener('DOMContentLoaded', async () => {
|
||
console.log('📄 页面加载完成，开始测试统计功能...');
|
||
|
||
try {
|
||
const statistics = await testTaskStatistics();
|
||
displayStatisticsInUI(statistics);
|
||
|
||
console.log('✅ 统计功能测试完成，UI已更新');
|
||
} catch (error) {
|
||
console.error('❌ 统计功能测试失败:', error);
|
||
}
|
||
});
|
||
|
||
// 导出函数供其他模块使用
|
||
export {
|
||
testTaskStatistics,
|
||
displayStatisticsInUI,
|
||
updateStatCard,
|
||
updateTaskTypeSection
|
||
};
|
||
|
||
// 使用示例：
|
||
//
|
||
// 1. 在ComfyUI任务管理中心页面调用：
|
||
// const stats = await testTaskStatistics();
|
||
// displayStatisticsInUI(stats);
|
||
//
|
||
// 2. 定期刷新统计数据：
|
||
// setInterval(async () => {
|
||
// try {
|
||
// const stats = await invoke('get_task_statistics');
|
||
// displayStatisticsInUI(stats);
|
||
// } catch (error) {
|
||
// console.error('刷新统计失败:', error);
|
||
// }
|
||
// }, 30000); // 每30秒刷新一次
|
||
//
|
||
// 3. 按工作流筛选统计：
|
||
// const workflowStats = await invoke('get_task_statistics', {
|
||
// workflowName: 'specific_workflow_name'
|
||
// });
|