428 lines
18 KiB
HTML
428 lines
18 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}运行概览 - ProxyAuto Pro{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="page-header">
|
||
<h1>运行概览</h1>
|
||
</div>
|
||
|
||
{% if not machines_status %}
|
||
<div class="empty-state">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
|
||
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
|
||
<line x1="6" y1="6" x2="6.01" y2="6"/>
|
||
<line x1="6" y1="18" x2="6.01" y2="18"/>
|
||
</svg>
|
||
<h3>暂无节点</h3>
|
||
<p>请先前往<a href="{{ url_for('machines') }}">节点管理</a>添加机器</p>
|
||
</div>
|
||
{% else %}
|
||
|
||
<!-- 总流量统计 -->
|
||
<section class="section">
|
||
<h2 class="section-title">总流量统计</h2>
|
||
<div class="traffic-summary-grid" id="traffic-summary">
|
||
<div class="traffic-summary-card">
|
||
<div class="summary-header">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||
</svg>
|
||
<span class="summary-title">当月流量</span>
|
||
</div>
|
||
<div class="summary-metrics">
|
||
<div class="summary-metric">
|
||
<span class="summary-label">下载</span>
|
||
<span class="summary-value" id="month-in">加载中...</span>
|
||
</div>
|
||
<div class="summary-metric">
|
||
<span class="summary-label">上传</span>
|
||
<span class="summary-value" id="month-out">加载中...</span>
|
||
</div>
|
||
<div class="summary-metric total">
|
||
<span class="summary-label">总计</span>
|
||
<span class="summary-value" id="month-total">加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="traffic-summary-card">
|
||
<div class="summary-header">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<polyline points="12 6 12 12 16 14"/>
|
||
</svg>
|
||
<span class="summary-title">当日流量</span>
|
||
</div>
|
||
<div class="summary-metrics">
|
||
<div class="summary-metric">
|
||
<span class="summary-label">下载</span>
|
||
<span class="summary-value" id="day-in">加载中...</span>
|
||
</div>
|
||
<div class="summary-metric">
|
||
<span class="summary-label">上传</span>
|
||
<span class="summary-value" id="day-out">加载中...</span>
|
||
</div>
|
||
<div class="summary-metric total">
|
||
<span class="summary-label">总计</span>
|
||
<span class="summary-value" id="day-total">加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="traffic-summary-card">
|
||
<div class="summary-header">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||
</svg>
|
||
<span class="summary-title">历史总流量</span>
|
||
</div>
|
||
<div class="summary-metrics">
|
||
<div class="summary-metric">
|
||
<span class="summary-label">下载</span>
|
||
<span class="summary-value" id="all-in">加载中...</span>
|
||
</div>
|
||
<div class="summary-metric">
|
||
<span class="summary-label">上传</span>
|
||
<span class="summary-value" id="all-out">加载中...</span>
|
||
</div>
|
||
<div class="summary-metric total">
|
||
<span class="summary-label">总计</span>
|
||
<span class="summary-value" id="all-total">加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 节点列表 -->
|
||
|
||
<div class="dashboard-grid">
|
||
{% for item in machines_status %}
|
||
{% set machine = item.machine %}
|
||
{% set scheduler = item.scheduler %}
|
||
<div class="machine-dashboard-card">
|
||
<div class="card-header">
|
||
<div class="card-title-row">
|
||
<span class="status-dot {% if machine.enabled %}active{% else %}inactive{% endif %}"></span>
|
||
<h3 class="card-title">{{ machine.name }}</h3>
|
||
{% if machine.auto_enabled %}
|
||
<span class="badge badge-auto">自动</span>
|
||
{% endif %}
|
||
</div>
|
||
<div class="card-subtitle">
|
||
{{ machine.aws_service|upper }} | {{ machine.aws_region }}
|
||
{% if machine.cf_record_name %}
|
||
| {{ machine.cf_record_name }}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-metrics">
|
||
<div class="card-metric">
|
||
<div class="metric-label">当前 IP</div>
|
||
<div class="metric-value ip-value">{{ machine.current_ip or '未获取' }}</div>
|
||
</div>
|
||
<div class="card-metric">
|
||
<div class="metric-label">最近更换</div>
|
||
<div class="metric-value time-value">
|
||
{% if machine.last_run_at %}
|
||
{{ machine.last_run_at.strftime('%m-%d %H:%M:%S') }}
|
||
{% else %}
|
||
--
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="card-metric">
|
||
<div class="metric-label">更换间隔</div>
|
||
<div class="metric-value">{{ machine.change_interval_seconds // 60 }} 分钟</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-traffic" data-machine-id="{{ machine.id }}" data-limit-gb="{{ machine.traffic_alert_limit_gb or 0 }}" data-service="{{ machine.aws_service }}">
|
||
<div class="traffic-row">
|
||
<div class="traffic-item">
|
||
<span class="traffic-label">当月下载</span>
|
||
<span class="traffic-value" data-type="in">加载中...</span>
|
||
</div>
|
||
<div class="traffic-item">
|
||
<span class="traffic-label">当月上传</span>
|
||
<span class="traffic-value" data-type="out">加载中...</span>
|
||
</div>
|
||
<div class="traffic-item">
|
||
<span class="traffic-label">总流量</span>
|
||
<span class="traffic-value" data-type="total">加载中...</span>
|
||
</div>
|
||
</div>
|
||
{% if machine.traffic_alert_enabled %}
|
||
<div class="traffic-progress-section">
|
||
<div class="traffic-progress-header">
|
||
<span class="progress-label">已使用</span>
|
||
<span class="progress-percent" data-type="percent">--</span>
|
||
</div>
|
||
<div class="traffic-progress-bar">
|
||
<div class="traffic-progress-fill" data-type="progress" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="traffic-progress-footer">
|
||
<span class="progress-used" data-type="used">--</span>
|
||
<span class="progress-limit">/ {{ machine.traffic_alert_limit_gb }} GB</span>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if machine.last_run_at %}
|
||
<div class="card-status {% if machine.last_success %}success{% else %}error{% endif %}">
|
||
{% if machine.last_success %}
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||
</svg>
|
||
<span>上次成功</span>
|
||
{% else %}
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<line x1="15" y1="9" x2="9" y2="15"/>
|
||
<line x1="9" y1="9" x2="15" y2="15"/>
|
||
</svg>
|
||
<span>上次失败</span>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if scheduler.next_run_time and scheduler.running %}
|
||
<div class="card-countdown" data-next-run="{{ scheduler.next_run_time }}">
|
||
<div class="countdown-row">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<polyline points="12 6 12 12 16 14"/>
|
||
</svg>
|
||
<div class="countdown-info">
|
||
<div class="countdown-label">距离下次更换</div>
|
||
<div class="countdown-value">计算中...</div>
|
||
</div>
|
||
</div>
|
||
<div class="next-time-row">
|
||
下次更换: {{ scheduler.next_run_time[:19].replace('T', ' ') }}
|
||
</div>
|
||
</div>
|
||
{% elif not scheduler.running %}
|
||
<div class="card-countdown paused">
|
||
<div class="countdown-row">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="6" y="4" width="4" height="16"/>
|
||
<rect x="14" y="4" width="4" height="16"/>
|
||
</svg>
|
||
<div class="countdown-info">
|
||
<div class="countdown-label">自动更换已暂停</div>
|
||
<div class="countdown-value">点击"启动"开始</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="card-actions">
|
||
<button class="btn btn-primary btn-action" onclick="runIpChange({{ machine.id }}, '{{ machine.name }}', this)">
|
||
<svg class="btn-icon-normal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="23 4 23 10 17 10"/>
|
||
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
|
||
</svg>
|
||
<svg class="btn-icon-loading spinner" viewBox="0 0 24 24" style="display: none;">
|
||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="32" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="btn-text">更换 IP</span>
|
||
</button>
|
||
<button class="btn btn-secondary btn-action" onclick="toggleAuto({{ machine.id }}, this)">
|
||
{% if scheduler.running %}
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="6" y="4" width="4" height="16"/>
|
||
<rect x="14" y="4" width="4" height="16"/>
|
||
</svg>
|
||
<span>暂停</span>
|
||
{% else %}
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="5 3 19 12 5 21 5 3"/>
|
||
</svg>
|
||
<span>启动</span>
|
||
{% endif %}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{% endif %}
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// 页面加载后启动倒计时和流量加载
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
startCountdownUpdater();
|
||
loadAllTrafficData();
|
||
loadTrafficSummary();
|
||
});
|
||
|
||
function formatBytes(bytes) {
|
||
if (bytes === 0) return '0 B';
|
||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||
const k = 1024;
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + units[i];
|
||
}
|
||
|
||
async function loadTrafficSummary() {
|
||
try {
|
||
const response = await fetch('/api/traffic/summary');
|
||
const result = await response.json();
|
||
|
||
if (result.ok) {
|
||
// 当月流量
|
||
document.getElementById('month-in').textContent = result.month.network_in_formatted || formatBytes(result.month.network_in);
|
||
document.getElementById('month-out').textContent = result.month.network_out_formatted || formatBytes(result.month.network_out);
|
||
document.getElementById('month-total').textContent = result.month.total_formatted || formatBytes(result.month.total);
|
||
|
||
// 当日流量
|
||
document.getElementById('day-in').textContent = result.day.network_in_formatted || formatBytes(result.day.network_in);
|
||
document.getElementById('day-out').textContent = result.day.network_out_formatted || formatBytes(result.day.network_out);
|
||
document.getElementById('day-total').textContent = result.day.total_formatted || formatBytes(result.day.total);
|
||
|
||
// 历史总流量
|
||
document.getElementById('all-in').textContent = result.all_time.network_in_formatted || formatBytes(result.all_time.network_in);
|
||
document.getElementById('all-out').textContent = result.all_time.network_out_formatted || formatBytes(result.all_time.network_out);
|
||
document.getElementById('all-total').textContent = result.all_time.total_formatted || formatBytes(result.all_time.total);
|
||
} else {
|
||
setTrafficSummaryError('加载失败');
|
||
}
|
||
} catch (error) {
|
||
setTrafficSummaryError('--');
|
||
}
|
||
}
|
||
|
||
function setTrafficSummaryError(text) {
|
||
['month-in', 'month-out', 'month-total', 'day-in', 'day-out', 'day-total', 'all-in', 'all-out', 'all-total'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) el.textContent = text;
|
||
});
|
||
}
|
||
|
||
async function loadAllTrafficData() {
|
||
const trafficCards = document.querySelectorAll('.card-traffic');
|
||
trafficCards.forEach(card => {
|
||
const machineId = card.dataset.machineId;
|
||
loadTrafficData(machineId, card);
|
||
});
|
||
}
|
||
|
||
async function loadTrafficData(machineId, card) {
|
||
const limitGb = parseFloat(card.dataset.limitGb) || 0;
|
||
const service = card.dataset.service;
|
||
|
||
try {
|
||
const response = await fetch(`/api/traffic/${machineId}/current`);
|
||
const result = await response.json();
|
||
|
||
if (result.ok) {
|
||
card.querySelector('[data-type="in"]').textContent = formatBytes(result.network_in);
|
||
card.querySelector('[data-type="out"]').textContent = formatBytes(result.network_out);
|
||
card.querySelector('[data-type="total"]').textContent = formatBytes(result.total);
|
||
|
||
// 计算百分比
|
||
if (limitGb > 0) {
|
||
// Lightsail 用总流量，EC2 用上传流量
|
||
const usedBytes = service === 'lightsail' ? result.total : result.network_out;
|
||
const usedGb = usedBytes / (1024 * 1024 * 1024);
|
||
const percent = Math.min((usedGb / limitGb) * 100, 100);
|
||
|
||
const percentEl = card.querySelector('[data-type="percent"]');
|
||
const progressEl = card.querySelector('[data-type="progress"]');
|
||
const usedEl = card.querySelector('[data-type="used"]');
|
||
|
||
if (percentEl) percentEl.textContent = percent.toFixed(2) + '%';
|
||
if (progressEl) {
|
||
progressEl.style.width = percent + '%';
|
||
// 根据百分比设置颜色
|
||
if (percent >= 90) {
|
||
progressEl.classList.add('danger');
|
||
progressEl.classList.remove('warning');
|
||
} else if (percent >= 70) {
|
||
progressEl.classList.add('warning');
|
||
progressEl.classList.remove('danger');
|
||
} else {
|
||
progressEl.classList.remove('warning', 'danger');
|
||
}
|
||
}
|
||
if (usedEl) usedEl.textContent = usedGb.toFixed(2) + ' GB';
|
||
}
|
||
} else {
|
||
card.querySelector('[data-type="in"]').textContent = '--';
|
||
card.querySelector('[data-type="out"]').textContent = '--';
|
||
card.querySelector('[data-type="total"]').textContent = '--';
|
||
}
|
||
} catch (error) {
|
||
card.querySelector('[data-type="in"]').textContent = '--';
|
||
card.querySelector('[data-type="out"]').textContent = '--';
|
||
card.querySelector('[data-type="total"]').textContent = '--';
|
||
}
|
||
}
|
||
|
||
async function runIpChange(machineId, machineName, btn) {
|
||
btn.disabled = true;
|
||
const normalIcon = btn.querySelector('.btn-icon-normal');
|
||
const loadingIcon = btn.querySelector('.btn-icon-loading');
|
||
const btnText = btn.querySelector('.btn-text');
|
||
|
||
normalIcon.style.display = 'none';
|
||
loadingIcon.style.display = 'block';
|
||
btnText.textContent = '执行中...';
|
||
|
||
try {
|
||
const result = await withMinLoadTime(
|
||
fetch(`/api/run-ip-change/${machineId}`, { method: 'POST' }).then(r => r.json()),
|
||
800
|
||
);
|
||
|
||
if (result.ok) {
|
||
showToast('success', `${machineName}: 新 IP ${result.public_ip}`);
|
||
setTimeout(() => location.reload(), 1500);
|
||
} else {
|
||
showToast('error', `${machineName}: ${result.message}`);
|
||
}
|
||
} catch (error) {
|
||
showToast('error', `请求失败: ${error.message}`);
|
||
} finally {
|
||
btn.disabled = false;
|
||
normalIcon.style.display = 'block';
|
||
loadingIcon.style.display = 'none';
|
||
btnText.textContent = '更换 IP';
|
||
}
|
||
}
|
||
|
||
async function toggleAuto(machineId, btn) {
|
||
btn.disabled = true;
|
||
|
||
try {
|
||
const result = await withMinLoadTime(
|
||
fetch(`/api/toggle-auto/${machineId}`, { method: 'POST' }).then(r => r.json()),
|
||
500
|
||
);
|
||
|
||
if (result.ok) {
|
||
showToast('success', result.message);
|
||
setTimeout(() => location.reload(), 1000);
|
||
} else {
|
||
showToast('error', result.message);
|
||
}
|
||
} catch (error) {
|
||
showToast('error', `请求失败: ${error.message}`);
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
</script>
|
||
{% endblock %}
|