590 lines
18 KiB
JavaScript
590 lines
18 KiB
JavaScript
// 仪表板JavaScript
|
||
|
||
class Dashboard {
|
||
constructor() {
|
||
this.charts = {};
|
||
this.refreshInterval = null;
|
||
this.init();
|
||
}
|
||
|
||
async init() {
|
||
console.log('初始化仪表板...');
|
||
|
||
// 初始化图表
|
||
this.initCharts();
|
||
|
||
// 加载初始数据
|
||
await this.loadDashboardData();
|
||
|
||
// 启动自动刷新
|
||
this.startAutoRefresh();
|
||
|
||
// 更新时间显示
|
||
this.updateCurrentTime();
|
||
setInterval(() => this.updateCurrentTime(), 1000);
|
||
|
||
console.log('仪表板初始化完成');
|
||
}
|
||
|
||
// 初始化图表
|
||
initCharts() {
|
||
// 代理趋势图
|
||
const ctx = document.getElementById('proxyTrendChart');
|
||
if (ctx) {
|
||
this.charts.proxyTrend = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: [],
|
||
datasets: [{
|
||
label: '总代理数',
|
||
data: [],
|
||
borderColor: '#007bff',
|
||
backgroundColor: 'rgba(0, 123, 255, 0.1)',
|
||
tension: 0.4,
|
||
fill: true
|
||
}, {
|
||
label: '可用代理',
|
||
data: [],
|
||
borderColor: '#28a745',
|
||
backgroundColor: 'rgba(40, 167, 69, 0.1)',
|
||
tension: 0.4,
|
||
fill: true
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
},
|
||
tooltip: {
|
||
mode: 'index',
|
||
intersect: false,
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
precision: 0
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载仪表板数据
|
||
async loadDashboardData() {
|
||
try {
|
||
// 显示加载状态
|
||
this.showLoading(true);
|
||
|
||
// 获取统计数据
|
||
const statsResponse = await fetch('/api/dashboard/stats');
|
||
const statsData = await statsResponse.json();
|
||
|
||
if (statsData.success) {
|
||
this.updateStatistics(statsData.data);
|
||
this.updateCharts(statsData.data.charts);
|
||
this.updateRecentHistory(statsData.data.latest);
|
||
}
|
||
|
||
// 获取实时状态
|
||
const statusResponse = await fetch('/api/dashboard/status');
|
||
const statusData = await statusResponse.json();
|
||
|
||
if (statusData.success) {
|
||
this.updateSystemInfo(statusData.data);
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('加载仪表板数据失败:', error);
|
||
this.showAlert('加载数据失败: ' + error.message, 'danger');
|
||
} finally {
|
||
this.showLoading(false);
|
||
}
|
||
}
|
||
|
||
// 更新统计信息
|
||
updateStatistics(data) {
|
||
document.getElementById('totalProxies').textContent = data.proxies.total || 0;
|
||
document.getElementById('validProxies').textContent = data.proxies.valid || 0;
|
||
document.getElementById('invalidProxies').textContent = data.proxies.invalid || 0;
|
||
document.getElementById('validRate').textContent = data.proxies.validRate || '0%';
|
||
}
|
||
|
||
// 更新图表
|
||
updateCharts(chartData) {
|
||
// 更新代理趋势图
|
||
if (this.charts.proxyTrend && chartData.daily_proxies) {
|
||
const labels = chartData.daily_proxies.map(item =>
|
||
new Date(item.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
|
||
);
|
||
|
||
this.charts.proxyTrend.data.labels = labels;
|
||
this.charts.proxyTrend.data.datasets[0].data = chartData.daily_proxies.map(item => item.total_added);
|
||
this.charts.proxyTrend.data.datasets[1].data = chartData.daily_proxies.map(item => item.valid_added);
|
||
this.charts.proxyTrend.update();
|
||
}
|
||
}
|
||
|
||
// 更新最近历史记录
|
||
updateRecentHistory(latest) {
|
||
// 更新抓取历史
|
||
if (latest.scrape && latest.scrape.length > 0) {
|
||
const scrapeHtml = this.generateHistoryTable(latest.scrape, 'scrape');
|
||
document.getElementById('recentScrapeHistory').innerHTML = scrapeHtml;
|
||
} else {
|
||
document.getElementById('recentScrapeHistory').innerHTML = this.generateEmptyState('暂无抓取历史');
|
||
}
|
||
|
||
// 更新验证历史
|
||
if (latest.validation && latest.validation.length > 0) {
|
||
const validationHtml = this.generateHistoryTable(latest.validation, 'validation');
|
||
document.getElementById('recentValidationHistory').innerHTML = validationHtml;
|
||
} else {
|
||
document.getElementById('recentValidationHistory').innerHTML = this.generateEmptyState('暂无验证历史');
|
||
}
|
||
}
|
||
|
||
// 生成历史记录表格
|
||
generateHistoryTable(history, type) {
|
||
if (!history || history.length === 0) {
|
||
return this.generateEmptyState('暂无历史记录');
|
||
}
|
||
|
||
let html = `
|
||
<div class="table-responsive">
|
||
<table class="table table-sm history-table">
|
||
<thead>
|
||
<tr>
|
||
<th>任务名称</th>
|
||
<th>状态</th>
|
||
<th>开始时间</th>
|
||
<th>执行时长</th>
|
||
<th>结果</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
|
||
history.forEach(item => {
|
||
const statusClass = this.getStatusClass(item.status);
|
||
const statusIcon = this.getStatusIcon(item.status);
|
||
const duration = item.duration ? this.formatDuration(item.duration) : '-';
|
||
const result = this.getResultSummary(item.details, type);
|
||
|
||
html += `
|
||
<tr>
|
||
<td class="task-name">${item.task_name}</td>
|
||
<td><span class="badge ${statusClass}">${statusIcon} ${this.getStatusText(item.status)}</span></td>
|
||
<td>${this.formatDateTime(item.start_time)}</td>
|
||
<td class="duration">${duration}</td>
|
||
<td>${result}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
html += `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
|
||
return html;
|
||
}
|
||
|
||
// 生成空状态
|
||
generateEmptyState(message) {
|
||
return `
|
||
<div class="empty-state">
|
||
<i class="bi bi-inbox"></i>
|
||
<h6>${message}</h6>
|
||
<small class="text-muted">等待任务执行...</small>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 更新系统信息
|
||
updateSystemInfo(data) {
|
||
// 更新运行时间
|
||
document.getElementById('systemUptime').textContent = this.formatUptime(data.uptime);
|
||
|
||
// 更新内存使用
|
||
const memoryHtml = `
|
||
<div>已使用: ${data.memory.heapUsed}MB / ${data.memory.heapTotal}MB</div>
|
||
<div class="memory-bar">
|
||
<div class="memory-bar-fill" style="width: ${(data.memory.heapUsed / data.memory.heapTotal * 100)}%"></div>
|
||
</div>
|
||
`;
|
||
document.getElementById('memoryUsage').innerHTML = memoryHtml;
|
||
|
||
// 更新今日任务
|
||
const todayScrape = data.today_tasks.scrape;
|
||
const todayValidation = data.today_tasks.validation;
|
||
|
||
document.getElementById('todayScrape').innerHTML = `
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span>成功: ${todayScrape.success}</span>
|
||
<span class="badge bg-success">${todayScrape.success_rate}%</span>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('todayValidation').innerHTML = `
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span>成功: ${todayValidation.success}</span>
|
||
<span class="badge bg-success">${todayValidation.success_rate}%</span>
|
||
</div>
|
||
`;
|
||
|
||
// 更新下次执行时间
|
||
if (data.next_runs) {
|
||
document.getElementById('nextScrape').textContent = this.formatTime(data.next_runs.scrape);
|
||
document.getElementById('nextValidation').textContent = this.formatTime(data.next_runs.validation);
|
||
}
|
||
}
|
||
|
||
// 开始抓取任务
|
||
async startScrape() {
|
||
try {
|
||
this.showLoading(true, '正在启动抓取任务...');
|
||
|
||
const response = await fetch('/api/dashboard/actions/scrape', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ pages: 5 })
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
this.showAlert('抓取任务已启动', 'success');
|
||
// 延迟刷新数据
|
||
setTimeout(() => this.loadDashboardData(), 2000);
|
||
} else {
|
||
this.showAlert('启动抓取任务失败: ' + result.error, 'danger');
|
||
}
|
||
} catch (error) {
|
||
console.error('启动抓取任务失败:', error);
|
||
this.showAlert('启动抓取任务失败: ' + error.message, 'danger');
|
||
} finally {
|
||
this.showLoading(false);
|
||
}
|
||
}
|
||
|
||
// 开始验证任务
|
||
async startValidate() {
|
||
try {
|
||
this.showLoading(true, '正在启动验证任务...');
|
||
|
||
const response = await fetch('/api/dashboard/actions/validate', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ limit: 50 })
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
this.showAlert('验证任务已启动', 'success');
|
||
// 延迟刷新数据
|
||
setTimeout(() => this.loadDashboardData(), 2000);
|
||
} else {
|
||
this.showAlert('启动验证任务失败: ' + result.error, 'danger');
|
||
}
|
||
} catch (error) {
|
||
console.error('启动验证任务失败:', error);
|
||
this.showAlert('启动验证任务失败: ' + error.message, 'danger');
|
||
} finally {
|
||
this.showLoading(false);
|
||
}
|
||
}
|
||
|
||
// 清理无效代理
|
||
async cleanupInvalid() {
|
||
if (!confirm('确定要清理所有无效代理吗？此操作不可恢复。')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/proxies/cleanup', {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
this.showAlert(result.message, 'success');
|
||
await this.loadDashboardData();
|
||
} else {
|
||
this.showAlert('清理失败: ' + result.error, 'danger');
|
||
}
|
||
} catch (error) {
|
||
console.error('清理无效代理失败:', error);
|
||
this.showAlert('清理无效代理失败: ' + error.message, 'danger');
|
||
}
|
||
}
|
||
|
||
// 导出代理数据
|
||
async exportProxies() {
|
||
try {
|
||
this.showLoading(true, '正在导出数据...');
|
||
|
||
const response = await fetch('/api/proxies?limit=1000');
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
const csv = this.convertToCSV(result.data);
|
||
this.downloadCSV(csv, `proxies_${new Date().toISOString().slice(0, 10)}.csv`);
|
||
this.showAlert('数据导出成功', 'success');
|
||
} else {
|
||
this.showAlert('导出数据失败: ' + result.error, 'danger');
|
||
}
|
||
} catch (error) {
|
||
console.error('导出数据失败:', error);
|
||
this.showAlert('导出数据失败: ' + error.message, 'danger');
|
||
} finally {
|
||
this.showLoading(false);
|
||
}
|
||
}
|
||
|
||
// 工具函数
|
||
|
||
getStatusClass(status) {
|
||
const statusClasses = {
|
||
'success': 'bg-success',
|
||
'failed': 'bg-danger',
|
||
'running': 'bg-warning',
|
||
'pending': 'bg-secondary'
|
||
};
|
||
return statusClasses[status] || 'bg-secondary';
|
||
}
|
||
|
||
getStatusIcon(status) {
|
||
const statusIcons = {
|
||
'success': '✓',
|
||
'failed': '✗',
|
||
'running': '⏳',
|
||
'pending': '⏸'
|
||
};
|
||
return statusIcons[status] || '?';
|
||
}
|
||
|
||
getStatusText(status) {
|
||
const statusTexts = {
|
||
'success': '成功',
|
||
'failed': '失败',
|
||
'running': '运行中',
|
||
'pending': '等待中'
|
||
};
|
||
return statusTexts[status] || status;
|
||
}
|
||
|
||
getResultSummary(details, type) {
|
||
if (!details) return '-';
|
||
|
||
if (type === 'scrape') {
|
||
return `抓取 ${details.scraped || 0} 个，可用 ${details.valid || 0} 个`;
|
||
} else if (type === 'validation') {
|
||
return `验证 ${details.validated || 0} 个，有效 ${details.valid || 0} 个`;
|
||
}
|
||
|
||
return '-';
|
||
}
|
||
|
||
formatDateTime(dateString) {
|
||
const date = new Date(dateString);
|
||
return date.toLocaleString('zh-CN', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
}
|
||
|
||
formatTime(dateString) {
|
||
const date = new Date(dateString);
|
||
return date.toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
}
|
||
|
||
formatDuration(ms) {
|
||
if (!ms) return '-';
|
||
|
||
if (ms < 1000) {
|
||
return ms + 'ms';
|
||
} else if (ms < 60000) {
|
||
return (ms / 1000).toFixed(1) + 's';
|
||
} else {
|
||
return (ms / 60000).toFixed(1) + 'min';
|
||
}
|
||
}
|
||
|
||
formatUptime(seconds) {
|
||
const hours = Math.floor(seconds / 3600);
|
||
const minutes = Math.floor((seconds % 3600) / 60);
|
||
return `${hours}h ${minutes}m`;
|
||
}
|
||
|
||
updateCurrentTime() {
|
||
const now = new Date();
|
||
const timeString = now.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
});
|
||
const timeElement = document.getElementById('currentTime');
|
||
if (timeElement) {
|
||
timeElement.textContent = timeString;
|
||
}
|
||
}
|
||
|
||
showLoading(show, message = '加载中...') {
|
||
// 实现加载状态显示
|
||
const loadingElements = document.querySelectorAll('.spinner-border');
|
||
loadingElements.forEach(element => {
|
||
element.style.display = show ? 'inline-block' : 'none';
|
||
});
|
||
}
|
||
|
||
showAlert(message, type = 'info') {
|
||
const alertContainer = document.getElementById('alertContainer');
|
||
if (!alertContainer) return;
|
||
|
||
const alertId = 'alert-' + Date.now();
|
||
const alertHtml = `
|
||
<div class="alert alert-${type} alert-dismissible fade show" role="alert" id="${alertId}">
|
||
<i class="bi bi-${this.getAlertIcon(type)}"></i>
|
||
${message}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
</div>
|
||
`;
|
||
|
||
alertContainer.insertAdjacentHTML('beforeend', alertHtml);
|
||
|
||
// 自动移除提示
|
||
setTimeout(() => {
|
||
const alertElement = document.getElementById(alertId);
|
||
if (alertElement) {
|
||
alertElement.remove();
|
||
}
|
||
}, 5000);
|
||
}
|
||
|
||
getAlertIcon(type) {
|
||
const icons = {
|
||
'success': 'check-circle-fill',
|
||
'danger': 'exclamation-triangle-fill',
|
||
'warning': 'exclamation-triangle-fill',
|
||
'info': 'info-circle-fill'
|
||
};
|
||
return icons[type] || 'info-circle-fill';
|
||
}
|
||
|
||
convertToCSV(data) {
|
||
if (!data || data.length === 0) return '';
|
||
|
||
const headers = ['IP', '端口', '位置', '响应时间', '是否可用', '创建时间'];
|
||
const csvRows = [headers.join(',')];
|
||
|
||
data.forEach(proxy => {
|
||
const row = [
|
||
proxy.ip,
|
||
proxy.port,
|
||
`"${proxy.location || ''}"`,
|
||
proxy.response_time || '',
|
||
proxy.is_valid ? '是' : '否',
|
||
proxy.created_at
|
||
];
|
||
csvRows.push(row.join(','));
|
||
});
|
||
|
||
return csvRows.join('\n');
|
||
}
|
||
|
||
downloadCSV(csv, filename) {
|
||
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
|
||
const link = document.createElement('a');
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
link.setAttribute('href', url);
|
||
link.setAttribute('download', filename);
|
||
link.style.visibility = 'hidden';
|
||
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}
|
||
|
||
startAutoRefresh() {
|
||
// 每30秒刷新一次数据
|
||
this.refreshInterval = setInterval(() => {
|
||
this.loadDashboardData();
|
||
}, 30000);
|
||
}
|
||
|
||
stopAutoRefresh() {
|
||
if (this.refreshInterval) {
|
||
clearInterval(this.refreshInterval);
|
||
this.refreshInterval = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 全局函数（供HTML调用）
|
||
let dashboard;
|
||
|
||
async function refreshData() {
|
||
if (dashboard) {
|
||
await dashboard.loadDashboardData();
|
||
dashboard.showAlert('数据已刷新', 'info');
|
||
}
|
||
}
|
||
|
||
async function startScrape() {
|
||
if (dashboard) {
|
||
await dashboard.startScrape();
|
||
}
|
||
}
|
||
|
||
async function startValidate() {
|
||
if (dashboard) {
|
||
await dashboard.startValidate();
|
||
}
|
||
}
|
||
|
||
async function cleanupInvalid() {
|
||
if (dashboard) {
|
||
await dashboard.cleanupInvalid();
|
||
}
|
||
}
|
||
|
||
async function exportProxies() {
|
||
if (dashboard) {
|
||
await dashboard.exportProxies();
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
dashboard = new Dashboard();
|
||
});
|
||
|
||
// 页面卸载时清理
|
||
window.addEventListener('beforeunload', () => {
|
||
if (dashboard) {
|
||
dashboard.stopAutoRefresh();
|
||
}
|
||
}); |