'use strict';
'require view';
'require ui';
'require uci';
'require rpc';
'require poll';
// 暗色模式检测已改为使用 CSS 媒体查询 @media (prefers-color-scheme: dark)
// 检测主题类型：返回 'wide'（宽主题，如 Argon）或 'narrow'（窄主题，如 Bootstrap）
function getThemeType() {
// 获取 LuCI 主题设置
var mediaUrlBase = uci.get('luci', 'main', 'mediaurlbase');
if (!mediaUrlBase) {
// 如果无法获取，尝试从 DOM 中检测
var linkTags = document.querySelectorAll('link[rel="stylesheet"]');
for (var i = 0; i < linkTags.length; i++) {
var href = linkTags[i].getAttribute('href') || '';
if (href.toLowerCase().includes('argon')) {
return 'wide';
}
}
// 默认返回窄主题
return 'narrow';
}
var mediaUrlBaseLower = mediaUrlBase.toLowerCase();
// 宽主题关键词列表（可以根据需要扩展）
var wideThemeKeywords = ['argon', 'material', 'design', 'edge'];
// 检查是否是宽主题
for (var i = 0; i < wideThemeKeywords.length; i++) {
if (mediaUrlBaseLower.includes(wideThemeKeywords[i])) {
return 'wide';
}
}
// 默认是窄主题（Bootstrap 等）
return 'narrow';
}
function formatSize(bytes) {
if (bytes === 0) return '0 B';
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + units[i];
}
function formatByterate(bytes_per_sec, unit) {
if (bytes_per_sec === 0) {
return unit === 'bits' ? '0 bps' : '0 B/s';
}
if (unit === 'bits') {
// 转换为比特单位
const bits_per_sec = bytes_per_sec * 8;
const units = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps'];
const i = Math.floor(Math.log(bits_per_sec) / Math.log(1000));
return parseFloat((bits_per_sec / Math.pow(1000, i)).toFixed(2)) + ' ' + units[i];
} else {
// 默认字节单位
const units = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
const i = Math.floor(Math.log(bytes_per_sec) / Math.log(1024));
return parseFloat((bytes_per_sec / Math.pow(1024, i)).toFixed(2)) + ' ' + units[i];
}
}
// 解析速度字符串为字节/秒
function parseSpeed(speedStr) {
if (!speedStr || speedStr === '0' || speedStr === '0 B/s' || speedStr === '0 bps') return 0;
// 匹配字节单位
const bytesMatch = speedStr.match(/^([\d.]+)\s*([KMGT]?B\/s)$/i);
if (bytesMatch) {
const value = parseFloat(bytesMatch[1]);
const unit = bytesMatch[2].toUpperCase();
const bytesMultipliers = {
'B/S': 1,
'KB/S': 1024,
'MB/S': 1024 * 1024,
'GB/S': 1024 * 1024 * 1024,
'TB/S': 1024 * 1024 * 1024 * 1024
};
return value * (bytesMultipliers[unit] || 1);
}
// 匹配比特单位
const bitsMatch = speedStr.match(/^([\d.]+)\s*([KMGT]?bps)$/i);
if (bitsMatch) {
const value = parseFloat(bitsMatch[1]);
const unit = bitsMatch[2].toLowerCase();
const bitsMultipliers = {
'bps': 1,
'kbps': 1000,
'mbps': 1000 * 1000,
'gbps': 1000 * 1000 * 1000,
'tbps': 1000 * 1000 * 1000 * 1000
};
// 转换为字节/秒
return (value * (bitsMultipliers[unit] || 1)) / 8;
}
return 0;
}
// 过滤 LAN IPv6 地址（排除本地链路地址）
function filterLanIPv6(ipv6Addresses) {
if (!ipv6Addresses || !Array.isArray(ipv6Addresses)) return [];
const lanPrefixes = [
'fd', // ULA
'fc' // ULA
];
const lanAddresses = ipv6Addresses.filter(addr => {
const lowerAddr = addr.toLowerCase();
return lanPrefixes.some(prefix => lowerAddr.startsWith(prefix));
});
// 最多返回 2 个 LAN IPv6 地址
return lanAddresses.slice(0, 2);
}
var callStatus = rpc.declare({
object: 'luci.bandix',
method: 'getStatus',
expect: {}
});
var callSetRateLimit = rpc.declare({
object: 'luci.bandix',
method: 'setRateLimit',
params: ['mac', 'wide_tx_rate_limit', 'wide_rx_rate_limit'],
expect: { success: true }
});
var callSetHostname = rpc.declare({
object: 'luci.bandix',
method: 'setHostname',
params: ['mac', 'hostname'],
expect: { success: true }
});
// 历史指标 RPC
var callGetMetrics = rpc.declare({
object: 'luci.bandix',
method: 'getMetrics',
params: ['mac'],
expect: {}
});
return view.extend({
load: function () {
return Promise.all([
uci.load('bandix'),
uci.load('luci'),
uci.load('argon').catch(function() {
// argon 配置可能不存在，忽略错误
return null;
})
]);
},
render: function (data) {
// 添加现代化样式
var style = E('style', {}, `
.bandix-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.bandix-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.bandix-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
.bandix-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.device-mode-group {
display: inline-flex;
border-radius: 4px;
overflow: hidden;
}
.device-mode-btn {
border: none;
padding: 0 12px;
font-size: 0.8125rem;
line-height: 1.8;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
white-space: nowrap;
height: 28px;
}
.device-mode-btn:hover:not(.active) {
opacity: 0.7;
}
.device-mode-btn.active {
background-color: #3b82f6;
color: white;
}
.bandix-badge {
border-radius: 4px;
padding: 4px 10px;
font-size: 0.875rem;
}
#history-retention {
border: 1px solid rgba(107, 114, 128, 0.4);
}
.bandix-alert {
border-radius: 4px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 0.875rem;
}
.bandix-alert-icon {
font-size: 0.875rem;
font-weight: 700;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
}
.bandix-table {
width: 100%;
table-layout: fixed;
}
.bandix-table th {
padding: 10px 16px;
text-align: left;
font-weight: 600;
border: none;
font-size: 0.875rem;
cursor: pointer;
user-select: none;
position: relative;
transition: background-color 0.15s ease;
}
.bandix-table th:hover {
opacity: 0.7;
}
.bandix-table th.sortable::after {
content: '⇅';
margin-left: 6px;
opacity: 0.3;
font-size: 0.75rem;
}
.bandix-table th.sortable.active::after {
opacity: 1;
color: #3b82f6;
}
.bandix-table th.sortable.asc::after {
content: '↑';
}
.bandix-table th.sortable.desc::after {
content: '↓';
}
.th-split-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.th-split-section {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.th-split-section:hover {
opacity: 0.7;
}
.th-split-section.active {
opacity: 0.7;
}
.th-split-icon {
font-size: 0.7rem;
opacity: 0.5;
}
.th-split-section.active .th-split-icon {
opacity: 1;
color: #3b82f6;
}
.th-split-divider {
width: 1px;
height: 16px;
background-color: currentColor;
opacity: 0.5;
}
.bandix-table td {
padding: 12px 16px;
border: none;
vertical-align: middle;
word-wrap: break-word;
overflow-wrap: break-word;
}
.bandix-table th:nth-child(1),
.bandix-table td:nth-child(1) {
width: 25%;
}
.bandix-table th:nth-child(2),
.bandix-table td:nth-child(2) {
width: 22%;
}
.bandix-table th:nth-child(3),
.bandix-table td:nth-child(3) {
width: 22%;
}
.bandix-table th:nth-child(4),
.bandix-table td:nth-child(4) {
width: 15%;
}
.bandix-table th:nth-child(5),
.bandix-table td:nth-child(5) {
width: 9%;
}
/* 类型联动的高亮与弱化 */
.bandix-table .hi { font-weight: 700; }
.bandix-table .dim { opacity: 0.6; }
.device-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.device-name {
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.device-status {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.device-status.online {
background-color: #10b981;
}
.device-status.offline {
background-color: #9ca3af;
}
.device-ip {
opacity: 0.7;
font-size: 0.875rem;
}
.device-ipv6 {
opacity: 0.7;
font-size: 0.75rem;
font-family: monospace;
}
.device-mac {
opacity: 0.6;
font-size: 0.75rem;
}
.device-last-online {
font-size: 0.75rem;
color: #6b7280;
}
.device-last-online-value {
color: #9ca3af;
}
.device-last-online-exact {
display: none;
color: #9ca3af;
}
.device-last-online:hover .device-last-online-value {
display: none;
}
.device-last-online:hover .device-last-online-exact {
display: inline;
}
.traffic-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.traffic-row {
display: flex;
align-items: center;
gap: 4px;
}
.traffic-icon {
font-size: 0.75rem;
font-weight: bold;
}
.traffic-icon.upload {
color: #f97316;
}
.traffic-icon.download {
color: #06b6d4;
}
.traffic-speed {
font-weight: 600;
font-size: 0.875rem;
}
.traffic-total {
font-size: 0.75rem;
opacity: 0.6;
margin-left: 4px;
}
.limit-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.limit-badge {
padding: 3px 8px;
border-radius: 3px;
font-size: 0.75rem;
text-align: center;
margin-top: 4px;
}
.loading {
text-align: center;
padding: 40px;
opacity: 0.7;
font-style: italic;
}
.error {
text-align: center;
padding: 40px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 0;
margin-top: 0;
}
.bandix-container > .cbi-section:last-of-type {
margin-bottom: 0;
}
.stats-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.stats-card-title {
font-size: 0.875rem;
font-weight: 600;
opacity: 0.7;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.stats-grid .cbi-section {
padding: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.stats-grid .cbi-section:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
@media (prefers-color-scheme: dark) {
.stats-grid .cbi-section {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.stats-grid .cbi-section:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
}
.stats-card-icon {
font-size: 0.875rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
background-color: currentColor;
opacity: 0.1;
}
.stats-card-main-value {
font-size: 2.25rem;
font-weight: 700;
margin: 0 0 8px 0;
line-height: 1;
}
.stats-card-sub-value {
font-size: 0.875rem;
opacity: 0.7;
margin: 0;
}
.stats-card-details {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.stats-detail-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
}
.stats-detail-label {
opacity: 0.7;
font-weight: 500;
}
.stats-detail-value {
font-weight: 600;
}
.stats-title {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.stats-value {
font-size: 1.25rem;
font-weight: 700;
}
/* 模态框样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.show {
background-color: rgba(0, 0, 0, 0.5);
opacity: 1;
visibility: visible;
}
.modal {
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
opacity: 0;
transition: opacity 0.2s ease;
background-color: rgba(255, 255, 255, 0.98);
color: #1f2937;
}
.modal-overlay.show .modal {
opacity: 1;
}
@media (prefers-color-scheme: dark) {
.modal {
background-color: rgba(30, 30, 30, 0.98);
color: #e5e7eb;
}
}
.modal-header {
padding: 20px;
}
.modal-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 16px 20px 20px 20px;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.875rem;
}
.form-input {
width: 100%;
border-radius: 4px;
padding: 8px 12px;
font-size: 0.875rem;
transition: border-color 0.15s ease;
box-sizing: border-box;
}
.form-input:focus {
outline: none;
}
.device-summary {
border-radius: 4px;
padding: 12px;
margin-bottom: 16px;
}
.device-summary-name {
font-weight: 600;
margin-bottom: 4px;
}
.device-summary-details {
opacity: 0.7;
font-size: 0.875rem;
}
/* 加载动画 */
.loading-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-radius: 50%;
border-top-color: #3b82f6;
animation: spin 1s ease-in-out infinite;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-loading {
opacity: 0.7;
pointer-events: none;
}
/* 历史趋势 */
.history-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.history-controls {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
padding: 12px 16px;
}
.history-controls .cbi-select {
width: auto;
min-width: 160px;
}
.history-card-body {
padding: 16px;
position: relative;
}
.history-legend {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-up { background-color: #f97316; }
.legend-down { background-color: #06b6d4; }
#history-canvas { width: 100%; height: 200px; display: block; } /* 变窄的高度 */
.history-tooltip {
position: fixed;
display: none;
width: 320px;
box-sizing: border-box;
padding: 12px;
z-index: 10;
pointer-events: none;
font-size: 0.8125rem;
line-height: 1.5;
white-space: nowrap;
background-color: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: #1f2937;
}
@media (prefers-color-scheme: dark) {
.history-tooltip {
background-color: rgba(30, 30, 30, 0.98);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
color: #e5e7eb;
}
}
.history-tooltip .ht-title { font-weight: 700; margin-bottom: 6px; }
.history-tooltip .ht-row { display: flex; justify-content: space-between; gap: 12px; }
.history-tooltip .ht-key { opacity: 0.7; }
.history-tooltip .ht-val { }
.history-tooltip .ht-device { margin-top: 4px; margin-bottom: 6px; opacity: 0.7; font-size: 0.75rem; }
/* 强调关键信息的排版 */
.history-tooltip .ht-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; margin-bottom: 6px; }
.history-tooltip .ht-kpi .ht-k-label { opacity: 0.7; font-size: 0.75rem; }
.history-tooltip .ht-kpi .ht-k-value { font-size: 1rem; font-weight: 700; }
.history-tooltip .ht-kpi.down .ht-k-value { color: #06b6d4; }
.history-tooltip .ht-kpi.up .ht-k-value { color: #f97316; }
.history-tooltip .ht-divider { height: 1px; background-color: currentColor; opacity: 0.3; margin: 8px 0; }
.history-tooltip .ht-section-title { font-weight: 600; font-size: 0.75rem; opacity: 0.7; margin: 4px 0 6px 0; }
`);
document.head.appendChild(style);
var view = E('div', { 'class': 'bandix-container' }, [
// 头部
E('div', { 'class': 'bandix-header' }, [
E('h1', { 'class': 'bandix-title' }, _('Bandix Traffic Monitor'))
]),
// 警告提示（包含在线设备数）
E('div', { 'class': 'bandix-alert' }, [
E('span', {}, _('Rate limiting only applies to WAN traffic.')),
E('div', { 'class': 'bandix-badge', 'id': 'device-count' }, _('Online Devices') + ': 0 / 0')
]),
// 统计卡片
E('div', { 'class': 'stats-grid', 'id': 'stats-grid' }),
// 历史趋势卡片（无时间范围筛选）
E('div', { 'class': 'cbi-section', 'id': 'history-card' }, [
E('h3', { 'class': 'history-header', 'style': 'display: flex; align-items: center; justify-content: space-between;' }, [
E('span', {}, _('Traffic History')),
E('div', { 'class': 'history-legend' }, [
E('div', { 'class': 'legend-item' }, [
E('span', { 'class': 'legend-dot legend-up' }),
_('Upload Rate')
]),
E('div', { 'class': 'legend-item' }, [
E('span', { 'class': 'legend-dot legend-down' }),
_('Download Rate')
])
])
]),
E('div', { 'class': 'history-controls' }, [
E('label', { 'class': 'form-label', 'style': 'margin: 0;' }, _('Select Device')),
E('select', { 'class': 'cbi-select', 'id': 'history-device-select' }, [
E('option', { 'value': '' }, _('All Devices'))
]),
E('label', { 'class': 'form-label', 'style': 'margin: 0;' }, _('Type')),
E('select', { 'class': 'cbi-select', 'id': 'history-type-select' }, [
E('option', { 'value': 'total' }, _('Total')),
E('option', { 'value': 'lan' }, _('LAN Traffic')),
E('option', { 'value': 'wan' }, _('WAN Traffic'))
]),
E('span', { 'class': 'bandix-badge', 'id': 'history-zoom-level', 'style': 'margin-left: 16px; display: none;' }, ''),
E('span', { 'class': 'bandix-badge', 'id': 'history-retention', 'style': 'margin-left: auto;' }, '')
]),
E('div', { 'class': 'history-card-body' }, [
E('canvas', { 'id': 'history-canvas', 'height': '240' }),
E('div', { 'class': 'history-tooltip', 'id': 'history-tooltip' })
])
]),
// 主要内容卡片
E('div', { 'class': 'cbi-section' }, [
E('h3', { 'class': 'history-header', 'style': 'display: flex; align-items: center; justify-content: space-between;' }, [
E('span', {}, _('Device List')),
E('div', { 'class': 'device-mode-group' }, [
E('button', {
'class': 'device-mode-btn' + (localStorage.getItem('bandix_device_mode') !== 'detailed' ? ' active' : ''),
'data-mode': 'simple'
}, _('Simple Mode')),
E('button', {
'class': 'device-mode-btn' + (localStorage.getItem('bandix_device_mode') === 'detailed' ? ' active' : ''),
'data-mode': 'detailed'
}, _('Detailed Mode'))
])
]),
E('div', { 'id': 'traffic-status' }, [
E('table', { 'class': 'bandix-table' }, [
E('thead', {}, [
E('tr', {}, [
E('th', {}, _('Device Info')),
E('th', {}, _('LAN Traffic')),
E('th', {}, _('WAN Traffic')),
E('th', {}, _('Rate Limit')),
E('th', {}, _('Actions'))
])
]),
E('tbody', {})
])
])
])
]);
// 设备信息模式切换
var deviceModeButtons = view.querySelectorAll('.device-mode-btn');
deviceModeButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
var newMode = this.getAttribute('data-mode');
// 如果已经是当前模式，不做任何操作
if (this.classList.contains('active')) {
return;
}
// 保存到 localStorage
localStorage.setItem('bandix_device_mode', newMode);
// 更新按钮状态
deviceModeButtons.forEach(function(b) {
b.classList.remove('active');
});
this.classList.add('active');
// 刷新设备列表以应用新的显示模式
updateDeviceData();
});
});
// 创建限速设置模态框
var modal = E('div', { 'class': 'modal-overlay', 'id': 'rate-limit-modal' }, [
E('div', { 'class': 'modal' }, [
E('div', { 'class': 'modal-header' }, [
E('h3', { 'class': 'modal-title' }, _('Device Settings'))
]),
E('div', { 'class': 'modal-body' }, [
E('div', { 'class': 'device-summary', 'id': 'modal-device-summary' }),
E('div', { 'class': 'form-group' }, [
E('label', { 'class': 'form-label' }, _('Hostname')),
E('input', { 'type': 'text', 'class': 'form-input', 'id': 'device-hostname-input', 'placeholder': _('Please enter hostname') }),
E('div', { 'style': 'font-size: 0.75rem; color: #6b7280; margin-top: 4px;' }, _('Set Hostname'))
]),
E('div', { 'class': 'form-group' }, [
E('label', { 'class': 'form-label' }, _('Upload Limit')),
E('div', { 'style': 'display: flex; gap: 8px;' }, [
E('input', { 'type': 'number', 'class': 'form-input', 'id': 'upload-limit-value', 'min': '0', 'step': '1', 'placeholder': '0' }),
E('select', { 'class': 'cbi-select', 'id': 'upload-limit-unit', 'style': 'width: 100px;' })
]),
E('div', { 'style': 'font-size: 0.75rem; color: #6b7280; margin-top: 4px;' }, _('Tip: Enter 0 for unlimited'))
]),
E('div', { 'class': 'form-group' }, [
E('label', { 'class': 'form-label' }, _('Download Limit')),
E('div', { 'style': 'display: flex; gap: 8px;' }, [
E('input', { 'type': 'number', 'class': 'form-input', 'id': 'download-limit-value', 'min': '0', 'step': '1', 'placeholder': '0' }),
E('select', { 'class': 'cbi-select', 'id': 'download-limit-unit', 'style': 'width: 100px;' })
]),
E('div', { 'style': 'font-size: 0.75rem; color: #6b7280; margin-top: 4px;' }, _('Tip: Enter 0 for unlimited'))
])
]),
E('div', { 'class': 'modal-footer' }, [
E('button', { 'class': 'cbi-button cbi-button-reset', 'id': 'modal-cancel' }, _('Cancel')),
E('button', { 'class': 'cbi-button cbi-button-positive', 'id': 'modal-save' }, _('Save'))
])
])
]);
document.body.appendChild(modal);
// 模态框事件处理
var currentDevice = null;
var showRateLimitModal;
// 显示模态框
showRateLimitModal = function (device) {
currentDevice = device;
var modal = document.getElementById('rate-limit-modal');
var deviceSummary = document.getElementById('modal-device-summary');
var speedUnit = uci.get('bandix', 'traffic', 'speed_unit') || 'bytes';
// 动态填充单位选择器
var uploadUnitSelect = document.getElementById('upload-limit-unit');
var downloadUnitSelect = document.getElementById('download-limit-unit');
// 清空现有选项
uploadUnitSelect.innerHTML = '';
downloadUnitSelect.innerHTML = '';
if (speedUnit === 'bits') {
// 比特单位选项 - 直接设置为对应的字节数
uploadUnitSelect.appendChild(E('option', { 'value': '125' }, 'Kbps')); // 1000 bits/s / 8 = 125 bytes/s
uploadUnitSelect.appendChild(E('option', { 'value': '125000' }, 'Mbps')); // 1000000 bits/s / 8 = 125000 bytes/s
uploadUnitSelect.appendChild(E('option', { 'value': '125000000' }, 'Gbps')); // 1000000000 bits/s / 8 = 125000000 bytes/s
downloadUnitSelect.appendChild(E('option', { 'value': '125' }, 'Kbps'));
downloadUnitSelect.appendChild(E('option', { 'value': '125000' }, 'Mbps'));
downloadUnitSelect.appendChild(E('option', { 'value': '125000000' }, 'Gbps'));
} else {
// 字节单位选项
uploadUnitSelect.appendChild(E('option', { 'value': '1024' }, 'KB/s'));
uploadUnitSelect.appendChild(E('option', { 'value': '1048576' }, 'MB/s'));
uploadUnitSelect.appendChild(E('option', { 'value': '1073741824' }, 'GB/s'));
downloadUnitSelect.appendChild(E('option', { 'value': '1024' }, 'KB/s'));
downloadUnitSelect.appendChild(E('option', { 'value': '1048576' }, 'MB/s'));
downloadUnitSelect.appendChild(E('option', { 'value': '1073741824' }, 'GB/s'));
}
// 更新设备信息
deviceSummary.innerHTML = E('div', {}, [
E('div', { 'class': 'device-summary-name' }, device.hostname || device.ip),
E('div', { 'class': 'device-summary-details' }, device.ip + ' (' + device.mac + ')')
]).innerHTML;
// 设置当前hostname值
document.getElementById('device-hostname-input').value = device.hostname || '';
// 设置当前限速值
var uploadLimit = device.wide_tx_rate_limit || 0;
var downloadLimit = device.wide_rx_rate_limit || 0;
// 设置上传限速值
var uploadValue = uploadLimit;
var uploadUnit;
if (uploadValue === 0) {
document.getElementById('upload-limit-value').value = 0;
uploadUnit = speedUnit === 'bits' ? '125' : '1024';
} else {
if (speedUnit === 'bits') {
// 转换为比特单位显示
var uploadBits = uploadValue * 8;
if (uploadBits >= 1000000000) {
uploadValue = uploadBits / 1000000000;
uploadUnit = '125000000'; // Gbps对应的字节倍数
} else if (uploadBits >= 1000000) {
uploadValue = uploadBits / 1000000;
uploadUnit = '125000'; // Mbps对应的字节倍数
} else {
uploadValue = uploadBits / 1000;
uploadUnit = '125'; // Kbps对应的字节倍数
}
} else {
// 字节单位显示
if (uploadValue >= 1073741824) {
uploadValue = uploadValue / 1073741824;
uploadUnit = '1073741824';
} else if (uploadValue >= 1048576) {
uploadValue = uploadValue / 1048576;
uploadUnit = '1048576';
} else {
uploadValue = uploadValue / 1024;
uploadUnit = '1024';
}
}
document.getElementById('upload-limit-value').value = Math.round(uploadValue);
}
document.getElementById('upload-limit-unit').value = uploadUnit;
// 设置下载限速值
var downloadValue = downloadLimit;
var downloadUnit;
if (downloadValue === 0) {
document.getElementById('download-limit-value').value = 0;
downloadUnit = speedUnit === 'bits' ? '125' : '1024';
} else {
if (speedUnit === 'bits') {
// 转换为比特单位显示
var downloadBits = downloadValue * 8;
if (downloadBits >= 1000000000) {
downloadValue = downloadBits / 1000000000;
downloadUnit = '125000000'; // Gbps对应的字节倍数
} else if (downloadBits >= 1000000) {
downloadValue = downloadBits / 1000000;
downloadUnit = '125000'; // Mbps对应的字节倍数
} else {
downloadValue = downloadBits / 1000;
downloadUnit = '125'; // Kbps对应的字节倍数
}
} else {
// 字节单位显示
if (downloadValue >= 1073741824) {
downloadValue = downloadValue / 1073741824;
downloadUnit = '1073741824';
} else if (downloadValue >= 1048576) {
downloadValue = downloadValue / 1048576;
downloadUnit = '1048576';
} else {
downloadValue = downloadValue / 1024;
downloadUnit = '1024';
}
}
document.getElementById('download-limit-value').value = Math.round(downloadValue);
}
document.getElementById('download-limit-unit').value = downloadUnit;
// 应用 cbi-section 的颜色到模态框
try {
// 优先从 cbi-section 获取颜色
var cbiSection = document.querySelector('.cbi-section');
var targetElement = cbiSection || document.querySelector('.main') || document.body;
var computedStyle = window.getComputedStyle(targetElement);
var bgColor = computedStyle.backgroundColor;
var textColor = computedStyle.color;
// 获取模态框元素
var modalElement = modal.querySelector('.modal');
// 确保背景色不透明
if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
var rgbaMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
var r = parseInt(rgbaMatch[1]);
var g = parseInt(rgbaMatch[2]);
var b = parseInt(rgbaMatch[3]);
var alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
if (alpha < 0.95) {
modalElement.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
} else {
modalElement.style.backgroundColor = bgColor;
}
} else {
modalElement.style.backgroundColor = bgColor;
}
} else {
// 如果无法获取背景色，尝试从其他 cbi-section 获取
var allCbiSections = document.querySelectorAll('.cbi-section');
var foundBgColor = false;
for (var i = 0; i < allCbiSections.length; i++) {
var sectionStyle = window.getComputedStyle(allCbiSections[i]);
var sectionBg = sectionStyle.backgroundColor;
if (sectionBg && sectionBg !== 'rgba(0, 0, 0, 0)' && sectionBg !== 'transparent') {
var rgbaMatch = sectionBg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
var r = parseInt(rgbaMatch[1]);
var g = parseInt(rgbaMatch[2]);
var b = parseInt(rgbaMatch[3]);
var alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
if (alpha < 0.95) {
modalElement.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
} else {
modalElement.style.backgroundColor = sectionBg;
}
} else {
modalElement.style.backgroundColor = sectionBg;
}
foundBgColor = true;
break;
}
}
// 如果无法获取背景色，CSS 会通过媒体查询自动处理暗色模式
if (!foundBgColor) {
// 不设置背景色，让 CSS 媒体查询处理
}
}
// 应用文字颜色
if (textColor && textColor !== 'rgba(0, 0, 0, 0)') {
modalElement.style.color = textColor;
} else {
if (cbiSection) {
var sectionTextColor = window.getComputedStyle(cbiSection).color;
if (sectionTextColor && sectionTextColor !== 'rgba(0, 0, 0, 0)') {
modalElement.style.color = sectionTextColor;
}
}
}
} catch(e) {
// 如果出错，CSS 会通过媒体查询自动处理暗色模式
// 不设置样式，让 CSS 处理
}
// 显示模态框并添加动画
modal.classList.add('show');
}
// 隐藏模态框
function hideRateLimitModal() {
var modal = document.getElementById('rate-limit-modal');
modal.classList.remove('show');
// 等待动画完成后清理
setTimeout(function () {
currentDevice = null;
}, 300);
}
// 保存限速设置
function saveRateLimit() {
if (!currentDevice) return;
var saveButton = document.getElementById('modal-save');
var originalText = saveButton.textContent;
// 显示加载状态
saveButton.innerHTML = '' + _('Saving...');
saveButton.classList.add('btn-loading');
var uploadLimit = 0;
var downloadLimit = 0;
var speedUnit = uci.get('bandix', 'traffic', 'speed_unit') || 'bytes';
// 获取hostname值
var newHostname = document.getElementById('device-hostname-input').value.trim();
// 获取上传限速值
var uploadValue = parseInt(document.getElementById('upload-limit-value').value) || 0;
var uploadUnit = parseInt(document.getElementById('upload-limit-unit').value);
if (uploadValue > 0) {
// 选择器的值已经是正确的字节倍数，直接计算即可
uploadLimit = uploadValue * uploadUnit;
}
// 获取下载限速值
var downloadValue = parseInt(document.getElementById('download-limit-value').value) || 0;
var downloadUnit = parseInt(document.getElementById('download-limit-unit').value);
if (downloadValue > 0) {
// 选择器的值已经是正确的字节倍数，直接计算即可
downloadLimit = downloadValue * downloadUnit;
}
// console.log("mac", currentDevice.mac)
// console.log("uploadLimit", uploadLimit)
// console.log("downloadLimit", downloadLimit)
// console.log("newHostname", newHostname)
// 创建Promise数组来并行处理hostname和限速设置
var promises = [];
// 如果hostname有变化，添加hostname设置Promise
if (newHostname !== (currentDevice.hostname || '')) {
promises.push(
callSetHostname(currentDevice.mac, newHostname).catch(function(error) {
return { hostnameError: error };
})
);
}
// 添加限速设置Promise
promises.push(
callSetRateLimit(currentDevice.mac, uploadLimit, downloadLimit).catch(function(error) {
return { rateLimitError: error };
})
);
// 并行执行所有设置
Promise.all(promises).then(function (results) {
// 恢复按钮状态
saveButton.innerHTML = originalText;
saveButton.classList.remove('btn-loading');
var hasError = false;
var errorMessages = [];
// 检查结果
results.forEach(function(result, index) {
if (result && result.hostnameError) {
hasError = true;
errorMessages.push(_('Failed to set hostname'));
} else if (result && result.rateLimitError) {
hasError = true;
errorMessages.push(_('Failed to save settings'));
} else if (result !== true && result !== undefined) {
// 检查是否有其他错误
if (result && result.error) {
hasError = true;
errorMessages.push(result.error);
}
}
});
if (hasError) {
ui.addNotification(null, E('p', {}, errorMessages.join(', ')), 'error');
} else {
// 所有设置都成功
hideRateLimitModal();
}
}).catch(function (error) {
// 恢复按钮状态
saveButton.innerHTML = originalText;
saveButton.classList.remove('btn-loading');
ui.addNotification(null, E('p', {}, _('Failed to save settings')), 'error');
});
}
// 绑定模态框事件
document.getElementById('modal-cancel').addEventListener('click', hideRateLimitModal);
document.getElementById('modal-save').addEventListener('click', saveRateLimit);
// 点击模态框背景关闭
document.getElementById('rate-limit-modal').addEventListener('click', function (e) {
if (e.target === this) {
hideRateLimitModal();
}
});
// 历史趋势：状态与工具
var latestDevices = [];
var lastHistoryData = null; // 最近一次拉取的原始 metrics 数据
var isHistoryLoading = false; // 防止轮询重入
// 排序状态管理
var currentSortBy = localStorage.getItem('bandix_sort_by') || 'online'; // 默认按在线状态排序
var currentSortOrder = localStorage.getItem('bandix_sort_order') === 'true'; // false = 降序, true = 升序
// 当鼠标悬停在历史图表上时，置为 true，轮询将暂停刷新（实现"鼠标在趋势图上时不自动滚动"）
var historyHover = false;
// 鼠标悬停时的索引（独立于 canvas.__bandixChart，避免重绘覆盖问题）
var historyHoverIndex = null;
// 缩放功能相关变量
var zoomEnabled = false; // 缩放是否启用
var zoomScale = 1; // 缩放比例
var zoomOffsetX = 0; // X轴偏移
var zoomTimer = null; // 延迟启用缩放的计时器
function updateDeviceOptions(devices) {
var select = document.getElementById('history-device-select');
if (!select) return;
// 对设备列表进行排序：在线设备在前，离线设备在后，然后按IP地址从小到大排序
var sortedDevices = devices.slice().sort(function(a, b) {
var aOnline = isDeviceOnline(a);
var bOnline = isDeviceOnline(b);
// 首先按在线状态排序：在线设备在前
if (aOnline && !bOnline) return -1;
if (!aOnline && bOnline) return 1;
// 在线状态相同时，按IP地址排序
var aIp = a.ip || '';
var bIp = b.ip || '';
// 将IP地址转换为数字进行比较
var aIpParts = aIp.split('.').map(function(part) { return parseInt(part) || 0; });
var bIpParts = bIp.split('.').map(function(part) { return parseInt(part) || 0; });
// 逐段比较IP地址
for (var i = 0; i < 4; i++) {
var aPart = aIpParts[i] || 0;
var bPart = bIpParts[i] || 0;
if (aPart !== bPart) {
return aPart - bPart;
}
}
// IP地址相同时，按MAC地址排序
return (a.mac || '').localeCompare(b.mac || '');
});
// 对比是否需要更新
var currentValues = Array.from(select.options).map(o => o.value);
var desiredValues = [''].concat(sortedDevices.map(d => d.mac));
var same = currentValues.length === desiredValues.length && currentValues.every((v, i) => v === desiredValues[i]);
if (same) return;
var prev = select.value;
// 重建选项
select.innerHTML = '';
select.appendChild(E('option', { 'value': '' }, _('All Devices')));
sortedDevices.forEach(function (d) {
var label = (d.hostname || d.ip || d.mac || '-') + (d.ip ? ' (' + d.ip + ')' : '') + (d.mac ? ' [' + d.mac + ']' : '');
select.appendChild(E('option', { 'value': d.mac }, label));
});
// 尽量保留之前选择
if (desiredValues.indexOf(prev) !== -1) select.value = prev;
}
function getTypeKeys(type) {
if (type === 'lan') return { up: 'local_tx_rate', down: 'local_rx_rate' };
if (type === 'wan') return { up: 'wide_tx_rate', down: 'wide_rx_rate' };
return { up: 'total_tx_rate', down: 'total_rx_rate' };
}
function fetchMetricsData(mac) {
// 通过 ubus RPC 获取，避免跨域与鉴权问题
return callGetMetrics(mac || '').then(function (res) { return res || { metrics: [] }; });
}
// 辅助函数：使用当前缩放设置绘制图表
function drawHistoryChartWithZoom(canvas, labels, upSeries, downSeries) {
drawHistoryChart(canvas, labels, upSeries, downSeries, zoomScale, zoomOffsetX);
}
// 更新缩放倍率显示
function updateZoomLevelDisplay() {
var zoomLevelElement = document.getElementById('history-zoom-level');
if (!zoomLevelElement) return;
// 如果是窄主题，隐藏 zoom 显示
var themeType = getThemeType();
if (themeType === 'narrow') {
zoomLevelElement.style.display = 'none';
return;
}
if (zoomScale <= 1) {
zoomLevelElement.style.display = 'none';
} else {
zoomLevelElement.style.display = 'inline-block';
zoomLevelElement.textContent = _('Zoom') + ': ' + zoomScale.toFixed(1) + 'x';
}
}
function drawHistoryChart(canvas, labels, upSeries, downSeries, scale, offsetX) {
if (!canvas) return;
// 缩放参数默认值
scale = scale || 1;
offsetX = offsetX || 0;
var dpr = window.devicePixelRatio || 1;
var rect = canvas.getBoundingClientRect();
var cssWidth = rect.width;
var cssHeight = rect.height;
canvas.width = Math.max(1, Math.floor(cssWidth * dpr));
canvas.height = Math.max(1, Math.floor(cssHeight * dpr));
var ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
var width = cssWidth;
var height = cssHeight;
// 预留更大边距，避免标签被裁剪
var padding = { left: 90, right: 50, top: 16, bottom: 36 };
// 背景
ctx.clearRect(0, 0, width, height);
// 根据缩放和偏移处理数据
var originalLabels = labels;
var originalUpSeries = upSeries;
var originalDownSeries = downSeries;
if (scale > 1) {
var totalLen = labels.length;
var visibleLen = Math.ceil(totalLen / scale);
var startIdx = Math.max(0, Math.floor(offsetX));
var endIdx = Math.min(totalLen, startIdx + visibleLen);
labels = labels.slice(startIdx, endIdx);
upSeries = upSeries.slice(startIdx, endIdx);
downSeries = downSeries.slice(startIdx, endIdx);
}
var speedUnit = uci.get('bandix', 'traffic', 'speed_unit') || 'bytes';
var maxVal = 0;
for (var i = 0; i < upSeries.length; i++) maxVal = Math.max(maxVal, upSeries[i] || 0);
for (var j = 0; j < downSeries.length; j++) maxVal = Math.max(maxVal, downSeries[j] || 0);
if (!isFinite(maxVal) || maxVal <= 0) maxVal = 1;
// 动态测量Y轴最大标签宽度，增大左边距
ctx.font = '12px sans-serif';
var maxLabelText = formatByterate(maxVal, speedUnit);
var zeroLabelText = formatByterate(0, speedUnit);
var maxLabelWidth = Math.max(ctx.measureText(maxLabelText).width, ctx.measureText(zeroLabelText).width);
padding.left = Math.max(padding.left, Math.ceil(maxLabelWidth) + 30);
// 保证右侧时间不被裁剪
var rightMin = 50; // 最小右边距
padding.right = Math.max(padding.right, rightMin);
var innerW = Math.max(1, width - padding.left - padding.right);
var innerH = Math.max(1, height - padding.top - padding.bottom);
// 记录用于交互的几何信息；保留已有的 hoverIndex 避免在重绘时丢失
var prevHover = (canvas.__bandixChart && typeof canvas.__bandixChart.hoverIndex === 'number') ? canvas.__bandixChart.hoverIndex : undefined;
canvas.__bandixChart = {
padding: padding,
innerW: innerW,
innerH: innerH,
width: width,
height: height,
labels: labels,
upSeries: upSeries,
downSeries: downSeries,
// 缩放相关信息
scale: scale,
offsetX: offsetX,
originalLabels: originalLabels,
originalUpSeries: originalUpSeries,
originalDownSeries: originalDownSeries
};
if (typeof prevHover === 'number') canvas.__bandixChart.hoverIndex = prevHover;
// 网格与Y轴刻度（更细更淡）
var gridLines = 4;
ctx.strokeStyle = 'rgba(148,163,184,0.08)';
ctx.lineWidth = 0.8;
for (var g = 0; g <= gridLines; g++) {
var y = padding.top + (innerH * g / gridLines);
ctx.beginPath();
ctx.moveTo(padding.left, y);
ctx.lineTo(width - padding.right, y);
ctx.stroke();
var val = Math.round(maxVal * (gridLines - g) / gridLines);
ctx.fillStyle = '#9ca3af';
ctx.font = '12px sans-serif';
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
var yLabelY = (g === gridLines) ? y - 4 : y; // 底部刻度上移，避免贴近X轴
ctx.fillText(formatByterate(val, speedUnit), padding.left - 8, yLabelY);
}
function drawAreaSeries(series, color, gradientFrom, gradientTo) {
if (!series || series.length === 0) return;
var n = series.length;
var stepX = n > 1 ? (innerW / (n - 1)) : 0;
// 先绘制填充区域路径
ctx.beginPath();
for (var k = 0; k < n; k++) {
var v = Math.max(0, series[k] || 0);
var x = padding.left + (n > 1 ? stepX * k : innerW / 2);
var y = padding.top + innerH - (v / maxVal) * innerH;
if (k === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
// 关闭到底部以形成区域
ctx.lineTo(padding.left + innerW, padding.top + innerH);
ctx.lineTo(padding.left, padding.top + innerH);
ctx.closePath();
// 创建渐变填充
var grad = ctx.createLinearGradient(0, padding.top, 0, padding.top + innerH);
grad.addColorStop(0, gradientFrom);
grad.addColorStop(1, gradientTo);
ctx.fillStyle = grad;
ctx.fill();
// 然后绘制细线
ctx.beginPath();
for (var k2 = 0; k2 < n; k2++) {
var v2 = Math.max(0, series[k2] || 0);
var x2 = padding.left + (n > 1 ? stepX * k2 : innerW / 2);
var y2 = padding.top + innerH - (v2 / maxVal) * innerH;
if (k2 === 0) ctx.moveTo(x2, y2); else ctx.lineTo(x2, y2);
}
ctx.strokeStyle = color;
ctx.lineWidth = 1.2; // 更细的线
ctx.stroke();
// 圆点已移除，只保留线条
}
// 橙色上行，青色下行，使用半透明渐变
drawAreaSeries(upSeries, '#f97316', 'rgba(249,115,22,0.16)', 'rgba(249,115,22,0.02)');
drawAreaSeries(downSeries, '#06b6d4', 'rgba(6,182,212,0.12)', 'rgba(6,182,212,0.02)');
// X 轴时间标签（首尾）
if (labels && labels.length > 0) {
ctx.fillStyle = '#9ca3af';
ctx.font = '12px sans-serif';
ctx.textBaseline = 'top';
var firstX = padding.left;
var lastX = width - padding.right;
var yBase = height - padding.bottom + 4;
// 左侧时间靠左对齐
ctx.textAlign = 'left';
ctx.fillText(labels[0], firstX, yBase);
// 右侧时间靠右对齐，避免被裁剪
if (labels.length > 1) {
ctx.textAlign = 'right';
ctx.fillText(labels[labels.length - 1], lastX, yBase);
}
}
// 如果存在 hoverIndex，则绘制垂直虚线（鼠标对着的 x 轴）
try {
var info = canvas.__bandixChart || {};
var useIdx = null;
if (typeof historyHoverIndex === 'number') useIdx = historyHoverIndex;
else if (typeof info.hoverIndex === 'number') useIdx = info.hoverIndex;
if (useIdx !== null && info.labels && info.labels.length > 0) {
var n = info.labels.length;
var stepX = n > 1 ? (innerW / (n - 1)) : 0;
var hoverIdx = useIdx;
// 在缩放状态下，需要将原始索引转换为显示索引
if (scale > 1 && originalLabels && originalLabels.length > 0) {
var startIdx = Math.floor(offsetX || 0);
hoverIdx = useIdx - startIdx;
// 检查索引是否在当前显示范围内
if (hoverIdx < 0 || hoverIdx >= n) {
hoverIdx = null; // 不在显示范围内，不绘制虚线
}
}
if (hoverIdx !== null) {
hoverIdx = Math.max(0, Math.min(n - 1, hoverIdx));
var hoverX = info.padding.left + (n > 1 ? stepX * hoverIdx : innerW / 2);
ctx.save();
ctx.strokeStyle = 'rgba(156,163,175,0.9)';
ctx.lineWidth = 1;
ctx.setLineDash([6, 4]);
ctx.beginPath();
ctx.moveTo(hoverX, padding.top);
ctx.lineTo(hoverX, padding.top + innerH);
ctx.stroke();
ctx.setLineDash([]);
ctx.restore();
}
}
} catch (e) { /* 安全兜底 */ }
}
function msToTimeLabel(ts) {
var d = new Date(ts);
var hh = ('' + d.getHours()).padStart(2, '0');
var mm = ('' + d.getMinutes()).padStart(2, '0');
var ss = ('' + d.getSeconds()).padStart(2, '0');
return hh + ':' + mm + ':' + ss;
}
function buildTooltipHtml(point) {
if (!point) return '';
var lines = [];
var typeSel = (typeof document !== 'undefined' ? document.getElementById('history-type-select') : null);
var selType = (typeSel && typeSel.value) ? typeSel.value : 'total';
var speedUnit = uci.get('bandix', 'traffic', 'speed_unit') || 'bytes';
function row(label, val) {
lines.push('' + label + '' + val + '
');
}
function rateValue(key) {
return formatByterate(point[key] || 0, speedUnit);
}
function bytesValue(key) {
return formatSize(point[key] || 0);
}
function labelsFor(type) {
if (type === 'lan') return { up: _('LAN Upload'), down: _('LAN Download') };
if (type === 'wan') return { up: _('WAN Upload'), down: _('WAN Download') };
return { up: _('Total Upload'), down: _('Total Download') };
}
function rateKeysFor(type) {
if (type === 'lan') return { up: 'local_tx_rate', down: 'local_rx_rate' };
if (type === 'wan') return { up: 'wide_tx_rate', down: 'wide_rx_rate' };
return { up: 'total_tx_rate', down: 'total_rx_rate' };
}
function bytesKeysFor(type) {
if (type === 'lan') return { up: 'local_tx_bytes', down: 'local_rx_bytes' };
if (type === 'wan') return { up: 'wide_tx_bytes', down: 'wide_rx_bytes' };
return { up: 'total_tx_bytes', down: 'total_rx_bytes' };
}
lines.push('' + msToTimeLabel(point.ts_ms) + '
');
// 若选择了设备，显示设备信息
try {
var macSel = (typeof document !== 'undefined' ? document.getElementById('history-device-select') : null);
var macVal = (macSel && macSel.value) ? macSel.value : '';
if (macVal && Array.isArray(latestDevices)) {
var dev = latestDevices.find(function(d){ return d.mac === macVal; });
if (dev) {
var ipv6Info = '';
var lanIPv6 = filterLanIPv6(dev.ipv6_addresses);
if (lanIPv6.length > 0) {
ipv6Info = ' | IPv6: ' + lanIPv6.join(', ');
}
var devLabel = (dev.hostname || '-') + (dev.ip ? ' (' + dev.ip + ')' : '') + (dev.mac ? ' [' + dev.mac + ']' : '') + ipv6Info;
lines.push('' + _('Device') + ': ' + devLabel + '
');
}
}
} catch (e) {}
// 关键信息：选中类型的上下行速率（大号显示）
var kpiLabels = labelsFor(selType);
var kpiRateKeys = rateKeysFor(selType);
lines.push(
'' +
'
' +
'
' + kpiLabels.up + '
' +
'
' + rateValue(kpiRateKeys.up) + '
' +
'
' +
'
' +
'
' + kpiLabels.down + '
' +
'
' + rateValue(kpiRateKeys.down) + '
' +
'
' +
'
' + _('Other Rates') + '
');
otherTypes.forEach(function (t) {
var lbs = labelsFor(t);
var ks = rateKeysFor(t);
row(lbs.up, rateValue(ks.up));
row(lbs.down, rateValue(ks.down));
});
}
// 累计：区分LAN 流量与公网
lines.push('');
lines.push('' + _('Cumulative') + '
');
row(_('Total Uploaded'), bytesValue('total_tx_bytes'));
row(_('Total Downloaded'), bytesValue('total_rx_bytes'));
row(_('LAN Uploaded'), bytesValue('local_tx_bytes'));
row(_('LAN Downloaded'), bytesValue('local_rx_bytes'));
row(_('WAN Uploaded'), bytesValue('wide_tx_bytes'));
row(_('WAN Downloaded'), bytesValue('wide_rx_bytes'));
return lines.join('');
}
// 排序逻辑函数
function sortDevices(devices, sortBy, ascending) {
if (!devices || !Array.isArray(devices)) return devices;
var sortedDevices = devices.slice();
switch (sortBy) {
case 'online':
sortedDevices.sort(function(a, b) {
var aOnline = isDeviceOnline(a);
var bOnline = isDeviceOnline(b);
if (aOnline === bOnline) return 0;
return ascending ? (aOnline ? -1 : 1) : (aOnline ? 1 : -1);
});
break;
case 'ip':
sortedDevices.sort(function(a, b) {
var aIp = a.ip || '';
var bIp = b.ip || '';
// 将IP地址转换为数字进行比较
var aIpParts = aIp.split('.').map(function(part) { return parseInt(part) || 0; });
var bIpParts = bIp.split('.').map(function(part) { return parseInt(part) || 0; });
// 逐段比较IP地址
for (var i = 0; i < 4; i++) {
var aPart = aIpParts[i] || 0;
var bPart = bIpParts[i] || 0;
if (aPart !== bPart) {
return ascending ? (aPart - bPart) : (bPart - aPart);
}
}
return 0;
});
break;
case 'hostname':
sortedDevices.sort(function(a, b) {
// 先按在线状态排序
var aOnline = isDeviceOnline(a);
var bOnline = isDeviceOnline(b);
if (aOnline !== bOnline) {
return aOnline ? -1 : 1; // 在线设备始终在前
}
// 在线状态相同时，按IP地址排序
var aIp = a.ip || '';
var bIp = b.ip || '';
var aIpParts = aIp.split('.').map(function(part) { return parseInt(part) || 0; });
var bIpParts = bIp.split('.').map(function(part) { return parseInt(part) || 0; });
for (var i = 0; i < 4; i++) {
var aPart = aIpParts[i] || 0;
var bPart = bIpParts[i] || 0;
if (aPart !== bPart) {
return ascending ? (aPart - bPart) : (bPart - aPart);
}
}
// IP相同时，按MAC地址排序
return (a.mac || '').localeCompare(b.mac || '');
});
break;
case 'mac':
sortedDevices.sort(function(a, b) {
var aMac = (a.mac || '').toLowerCase();
var bMac = (b.mac || '').toLowerCase();
if (aMac === bMac) return 0;
return ascending ? aMac.localeCompare(bMac) : bMac.localeCompare(aMac);
});
break;
case 'upload_speed':
sortedDevices.sort(function(a, b) {
var aSpeed = (a.wide_tx_rate || 0) + (a.local_tx_rate || 0);
var bSpeed = (b.wide_tx_rate || 0) + (b.local_tx_rate || 0);
return ascending ? (aSpeed - bSpeed) : (bSpeed - aSpeed);
});
break;
case 'download_speed':
sortedDevices.sort(function(a, b) {
var aSpeed = (a.wide_rx_rate || 0) + (a.local_rx_rate || 0);
var bSpeed = (b.wide_rx_rate || 0) + (b.local_rx_rate || 0);
return ascending ? (aSpeed - bSpeed) : (bSpeed - aSpeed);
});
break;
case 'lan_speed':
sortedDevices.sort(function(a, b) {
var aSpeed = (a.local_tx_rate || 0) + (a.local_rx_rate || 0);
var bSpeed = (b.local_tx_rate || 0) + (b.local_rx_rate || 0);
return ascending ? (aSpeed - bSpeed) : (bSpeed - aSpeed);
});
break;
case 'wan_speed':
sortedDevices.sort(function(a, b) {
var aSpeed = (a.wide_tx_rate || 0) + (a.wide_rx_rate || 0);
var bSpeed = (b.wide_tx_rate || 0) + (b.wide_rx_rate || 0);
return ascending ? (aSpeed - bSpeed) : (bSpeed - aSpeed);
});
break;
case 'total_traffic':
sortedDevices.sort(function(a, b) {
var aTotal = (a.wide_tx_bytes || 0) + (a.wide_rx_bytes || 0) + (a.local_tx_bytes || 0) + (a.local_rx_bytes || 0);
var bTotal = (b.wide_tx_bytes || 0) + (b.wide_rx_bytes || 0) + (b.local_tx_bytes || 0) + (b.local_rx_bytes || 0);
return ascending ? (aTotal - bTotal) : (bTotal - aTotal);
});
break;
case 'last_online':
sortedDevices.sort(function(a, b) {
var aTime = a.last_online_ts || 0;
var bTime = b.last_online_ts || 0;
return ascending ? (aTime - bTime) : (bTime - aTime);
});
break;
case 'lan_traffic':
sortedDevices.sort(function(a, b) {
var aTraffic = (a.local_tx_bytes || 0) + (a.local_rx_bytes || 0);
var bTraffic = (b.local_tx_bytes || 0) + (b.local_rx_bytes || 0);
return ascending ? (aTraffic - bTraffic) : (bTraffic - aTraffic);
});
break;
case 'wan_traffic':
sortedDevices.sort(function(a, b) {
var aTraffic = (a.wide_tx_bytes || 0) + (a.wide_rx_bytes || 0);
var bTraffic = (b.wide_tx_bytes || 0) + (b.wide_rx_bytes || 0);
return ascending ? (aTraffic - bTraffic) : (bTraffic - aTraffic);
});
break;
default:
// 默认按在线状态和IP地址排序
sortedDevices.sort(function(a, b) {
var aOnline = isDeviceOnline(a);
var bOnline = isDeviceOnline(b);
if (aOnline !== bOnline) {
return aOnline ? -1 : 1;
}
// 在线状态相同时，按IP地址排序
var aIp = a.ip || '';
var bIp = b.ip || '';
var aIpParts = aIp.split('.').map(function(part) { return parseInt(part) || 0; });
var bIpParts = bIp.split('.').map(function(part) { return parseInt(part) || 0; });
for (var i = 0; i < 4; i++) {
var aPart = aIpParts[i] || 0;
var bPart = bIpParts[i] || 0;
if (aPart !== bPart) {
return aPart - bPart;
}
}
return (a.mac || '').localeCompare(b.mac || '');
});
}
return sortedDevices;
}
// 判断设备是否在线（基于 last_online_ts）
function isDeviceOnline(device) {
// 如果没有 last_online_ts 字段，使用原有的 online 字段
if (typeof device.last_online_ts === 'undefined') {
return device.online !== false;
}
// 如果 last_online_ts 为 0 或无效值，认为离线
if (!device.last_online_ts || device.last_online_ts <= 0) {
return false;
}
// 计算当前时间与最后在线时间的差值（毫秒）
var currentTime = Date.now();
// 如果时间戳小于1000000000000，说明是秒级时间戳，需要转换为毫秒
var lastOnlineTime = device.last_online_ts < 1000000000000 ? device.last_online_ts * 1000 : device.last_online_ts;
var timeDiff = currentTime - lastOnlineTime;
// 从UCI配置获取离线超时时间（秒），默认10分钟
var offlineTimeoutSeconds = uci.get('bandix', 'traffic', 'offline_timeout') || 600;
var offlineThreshold = offlineTimeoutSeconds * 1000; // 转换为毫秒
return timeDiff <= offlineThreshold;
}
// 格式化最后上线时间
function formatLastOnlineTime(lastOnlineTs) {
if (!lastOnlineTs || lastOnlineTs <= 0) {
return _('Never Online');
}
// 如果时间戳小于1000000000000，说明是秒级时间戳，需要转换为毫秒
var lastOnlineTime = lastOnlineTs < 1000000000000 ? lastOnlineTs * 1000 : lastOnlineTs;
var currentTime = Date.now();
var timeDiff = currentTime - lastOnlineTime;
// 转换为分钟
var minutesDiff = Math.floor(timeDiff / (60 * 1000));
// 1分钟以内显示"刚刚"
if (minutesDiff < 1) {
return _('Just Now');
}
// 10分钟以内显示具体的"几分钟前"
if (minutesDiff <= 10) {
return minutesDiff + _('min ago');
}
// 转换为小时
var hoursDiff = Math.floor(timeDiff / (60 * 60 * 1000));
// 如果不满1小时，显示分钟
if (hoursDiff < 1) {
return minutesDiff + _('min ago');
}
// 转换为天
var daysDiff = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
// 如果不满1天，显示小时（忽略分钟）
if (daysDiff < 1) {
return hoursDiff + _('h ago');
}
// 转换为月（按30天计算）
var monthsDiff = Math.floor(daysDiff / 30);
// 如果不满1个月，显示天（忽略小时）
if (monthsDiff < 1) {
return daysDiff + _('days ago');
}
// 转换为年（按365天计算）
var yearsDiff = Math.floor(daysDiff / 365);
// 如果不满1年，显示月（忽略天）
if (yearsDiff < 1) {
return monthsDiff + _('months ago');
}
// 超过1年，显示年（忽略月）
return yearsDiff + _('years ago');
}
// 精确时间格式
function formatLastOnlineExactTime(lastOnlineTs) {
if (!lastOnlineTs || lastOnlineTs <= 0) {
return '-';
}
var lastOnlineTime = lastOnlineTs < 1000000000000 ? lastOnlineTs * 1000 : lastOnlineTs;
var date = new Date(lastOnlineTime);
if (isNaN(date.getTime())) {
return '-';
}
function pad(value) {
return value < 10 ? '0' + value : value;
}
return date.getFullYear() + '-' +
pad(date.getMonth() + 1) + '-' +
pad(date.getDate()) + ' ' +
pad(date.getHours()) + ':' +
pad(date.getMinutes()) + ':' +
pad(date.getSeconds());
}
function formatRetentionSeconds(seconds) {
if (!seconds || seconds <= 0) return '';
var value;
var unitKey;
if (seconds < 60) {
value = Math.round(seconds);
unitKey = _('seconds');
} else if (seconds < 3600) {
value = Math.round(seconds / 60);
if (value < 1) value = 1;
unitKey = _('minutes');
} else if (seconds < 86400) {
value = Math.round(seconds / 3600);
if (value < 1) value = 1;
unitKey = _('hours');
} else if (seconds < 604800) {
value = Math.round(seconds / 86400);
if (value < 1) value = 1;
unitKey = _('days');
} else {
value = Math.round(seconds / 604800);
if (value < 1) value = 1;
unitKey = _('weeks');
}
return _('Last') + ' ' + value + ' ' + unitKey;
}
function refreshHistory() {
// 若鼠标在历史图上悬停，则暂停刷新以避免自动滚动
if (historyHover) return Promise.resolve();
var mac = document.getElementById('history-device-select')?.value || '';
var type = document.getElementById('history-type-select')?.value || 'total';
var canvas = document.getElementById('history-canvas');
var tooltip = document.getElementById('history-tooltip');
if (!canvas) return Promise.resolve();
if (isHistoryLoading) return Promise.resolve();
isHistoryLoading = true;
return fetchMetricsData(mac).then(function (res) {
var data = Array.isArray(res && res.metrics) ? res.metrics.slice() : [];
lastHistoryData = data;
var retentionBadge = document.getElementById('history-retention');
if (retentionBadge) {
var text = formatRetentionSeconds(res && res.retention_seconds);
retentionBadge.textContent = text || '';
}
if (!data.length) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawHistoryChart(canvas, [], [], [], 1, 0);
return;
}
// 不做时间过滤，按时间升序排序，完整展示
var filtered = data.slice();
filtered.sort(function (a, b) { return (a.ts_ms || 0) - (b.ts_ms || 0); });
var keys = getTypeKeys(type);
var upSeries = filtered.map(function (x) { return x[keys.up] || 0; });
var downSeries = filtered.map(function (x) { return x[keys.down] || 0; });
var labels = filtered.map(function (x) { return msToTimeLabel(x.ts_ms); });
drawHistoryChartWithZoom(canvas, labels, upSeries, downSeries);
// 绑定或更新鼠标事件用于展示浮窗
function findNearestIndex(evt) {
var rect = canvas.getBoundingClientRect();
var x = evt.clientX - rect.left;
var info = canvas.__bandixChart;
if (!info || !info.labels || info.labels.length === 0) return -1;
// 当前显示的数据长度（缩放后）
var n = info.labels.length;
var stepX = n > 1 ? (info.innerW / (n - 1)) : 0;
var minIdx = 0;
var minDist = Infinity;
// 在当前显示的数据范围内找最近的点
for (var k = 0; k < n; k++) {
var px = info.padding.left + (n > 1 ? stepX * k : info.innerW / 2);
var dist = Math.abs(px - x);
if (dist < minDist) { minDist = dist; minIdx = k; }
}
// 如果处于缩放状态，需要将显示索引映射回原始数据索引
if (info.scale && info.scale > 1 && info.originalLabels) {
var startIdx = Math.floor(info.offsetX || 0);
return startIdx + minIdx;
}
return minIdx;
}
function onMove(evt) {
if (!tooltip) return;
var idx = findNearestIndex(evt);
if (idx < 0 || !lastHistoryData || !lastHistoryData[idx]) {
tooltip.style.display = 'none';
// 清除 hover 状态并请求重绘去掉虚线
historyHover = false;
try { if (canvas && canvas.__bandixChart) { delete canvas.__bandixChart.hoverIndex; drawHistoryChart(canvas, canvas.__bandixChart.originalLabels || [], canvas.__bandixChart.originalUpSeries || [], canvas.__bandixChart.originalDownSeries || [], zoomScale, zoomOffsetX); } } catch(e){}
return;
}
var point = lastHistoryData[idx];
// 设置 hover 状态，暂停历史轮询刷新
historyHover = true;
historyHoverIndex = idx;
// 立即重绘以显示垂直虚线
try { drawHistoryChart(canvas, canvas.__bandixChart && canvas.__bandixChart.originalLabels ? canvas.__bandixChart.originalLabels : labels, canvas.__bandixChart && canvas.__bandixChart.originalUpSeries ? canvas.__bandixChart.originalUpSeries : upSeries, canvas.__bandixChart && canvas.__bandixChart.originalDownSeries ? canvas.__bandixChart.originalDownSeries : downSeries, zoomScale, zoomOffsetX); } catch(e){}
tooltip.innerHTML = buildTooltipHtml(point);
// 应用主题颜色到 tooltip，使用 cbi-section 的颜色
try {
// 优先从 cbi-section 获取颜色（历史趋势卡片就是 cbi-section）
var cbiSection = document.querySelector('.cbi-section');
var targetElement = cbiSection || document.querySelector('.main') || document.body;
var computedStyle = window.getComputedStyle(targetElement);
var bgColor = computedStyle.backgroundColor;
var textColor = computedStyle.color;
// 确保背景色不透明
if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
// 检查是否是 rgba/rgb 格式，如果是半透明则转换为不透明
var rgbaMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
var r = parseInt(rgbaMatch[1]);
var g = parseInt(rgbaMatch[2]);
var b = parseInt(rgbaMatch[3]);
var alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
// 如果 alpha < 0.95，使用不透明版本
if (alpha < 0.95) {
tooltip.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
} else {
tooltip.style.backgroundColor = bgColor;
}
} else {
tooltip.style.backgroundColor = bgColor;
}
} else {
// 如果无法获取背景色，尝试从其他 cbi-section 获取
var allCbiSections = document.querySelectorAll('.cbi-section');
var foundBgColor = false;
for (var i = 0; i < allCbiSections.length; i++) {
var sectionStyle = window.getComputedStyle(allCbiSections[i]);
var sectionBg = sectionStyle.backgroundColor;
if (sectionBg && sectionBg !== 'rgba(0, 0, 0, 0)' && sectionBg !== 'transparent') {
var rgbaMatch = sectionBg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
var r = parseInt(rgbaMatch[1]);
var g = parseInt(rgbaMatch[2]);
var b = parseInt(rgbaMatch[3]);
var alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
if (alpha < 0.95) {
tooltip.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
} else {
tooltip.style.backgroundColor = sectionBg;
}
} else {
tooltip.style.backgroundColor = sectionBg;
}
foundBgColor = true;
break;
}
}
// 如果无法获取背景色，CSS 会通过媒体查询自动处理暗色模式
if (!foundBgColor) {
// 不设置背景色，让 CSS 媒体查询处理
}
}
if (textColor && textColor !== 'rgba(0, 0, 0, 0)') {
tooltip.style.color = textColor;
} else {
// 如果无法获取文字颜色，从 cbi-section 获取
if (cbiSection) {
var sectionTextColor = window.getComputedStyle(cbiSection).color;
if (sectionTextColor && sectionTextColor !== 'rgba(0, 0, 0, 0)') {
tooltip.style.color = sectionTextColor;
}
// 否则使用 CSS 默认颜色（已通过媒体查询设置）
}
// 否则使用 CSS 默认颜色（已通过媒体查询设置）
}
// 边框和阴影由 CSS 媒体查询自动处理
} catch(e) {
// 如果出错，CSS 会通过媒体查询自动处理暗色模式
// 不设置样式，让 CSS 处理
}
// 先显示以计算尺寸
tooltip.style.display = 'block';
tooltip.style.left = '-9999px';
tooltip.style.top = '-9999px';
var tw = tooltip.offsetWidth || 0;
var th = tooltip.offsetHeight || 0;
var padding = 12;
var maxX = (typeof window !== 'undefined' ? window.innerWidth : document.documentElement.clientWidth) - 4;
var maxY = (typeof window !== 'undefined' ? window.innerHeight : document.documentElement.clientHeight) - 4;
var cx = evt.clientX;
var cy = evt.clientY;
var baseX = cx + padding; // 右上（水平向右）
var baseY = cy - th - padding; // 上方
// 若右侧溢出，改为左上
if (baseX + tw > maxX) {
baseX = cx - tw - padding;
}
// 边界收缩（不改动上方定位的语义）
if (baseX < 4) baseX = 4;
if (baseY < 4) baseY = 4;
tooltip.style.left = baseX + 'px';
tooltip.style.top = baseY + 'px';
}
function onLeave() {
if (tooltip) tooltip.style.display = 'none';
// 清除 hover 状态并请求重绘去掉虚线
historyHover = false;
historyHoverIndex = null;
// 重置缩放状态
if (zoomTimer) {
clearTimeout(zoomTimer);
zoomTimer = null;
}
zoomEnabled = false;
zoomScale = 1;
zoomOffsetX = 0;
// 更新缩放倍率显示
updateZoomLevelDisplay();
// 清除canvas中的hover信息
if (canvas && canvas.__bandixChart) {
delete canvas.__bandixChart.hoverIndex;
}
try { drawHistoryChart(canvas, canvas.__bandixChart && canvas.__bandixChart.originalLabels ? canvas.__bandixChart.originalLabels : labels, canvas.__bandixChart && canvas.__bandixChart.originalUpSeries ? canvas.__bandixChart.originalUpSeries : upSeries, canvas.__bandixChart && canvas.__bandixChart.originalDownSeries ? canvas.__bandixChart.originalDownSeries : downSeries, 1, 0); } catch(e){}
}
// 鼠标进入事件：启动延迟计时器
canvas.onmouseenter = function() {
if (zoomTimer) clearTimeout(zoomTimer);
zoomTimer = setTimeout(function() {
zoomEnabled = true;
zoomTimer = null;
}, 1000); // 1秒后启用缩放
};
// 鼠标滚轮事件：处理缩放
canvas.onwheel = function(evt) {
if (!zoomEnabled) return;
evt.preventDefault();
var delta = evt.deltaY > 0 ? 0.9 : 1.1;
var newScale = zoomScale * delta;
// 限制缩放范围
if (newScale < 1) newScale = 1;
if (newScale > 10) newScale = 10;
var rect = canvas.getBoundingClientRect();
var mouseX = evt.clientX - rect.left;
var info = canvas.__bandixChart;
if (!info || !info.originalLabels) return;
// 计算鼠标在数据中的相对位置
var relativeX = (mouseX - info.padding.left) / info.innerW;
var totalLen = info.originalLabels.length;
var mouseDataIndex = relativeX * totalLen;
// 调整偏移以保持鼠标位置为缩放中心
var oldVisibleLen = totalLen / zoomScale;
var newVisibleLen = totalLen / newScale;
var centerShift = (oldVisibleLen - newVisibleLen) * (mouseDataIndex / totalLen);
zoomScale = newScale;
zoomOffsetX = Math.max(0, Math.min(totalLen - newVisibleLen, zoomOffsetX + centerShift));
// 更新缩放倍率显示
updateZoomLevelDisplay();
// 重绘图表 - 保持当前的hover状态
try {
drawHistoryChart(canvas, info.originalLabels, info.originalUpSeries, info.originalDownSeries, zoomScale, zoomOffsetX);
// 如果有当前的hover索引，重新绘制虚线
if (typeof historyHoverIndex === 'number' && canvas.__bandixChart) {
canvas.__bandixChart.hoverIndex = historyHoverIndex;
}
} catch(e){}
};
canvas.onmousemove = onMove;
canvas.onmouseleave = onLeave;
}).catch(function () {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawHistoryChart(canvas, [], [], [], 1, 0);
// ui.addNotification(null, E('p', {}, _('Unable to fetch history data')), 'error');
}).finally(function () {
isHistoryLoading = false;
});
}
// 历史趋势：事件绑定
(function initHistoryControls() {
var typeSel = document.getElementById('history-type-select');
var devSel = document.getElementById('history-device-select');
if (typeSel) typeSel.value = 'total';
// 初始化缩放倍率显示
updateZoomLevelDisplay();
function onFilterChange() {
refreshHistory();
// 同步刷新表格（立即生效，不等轮询）
try { window.__bandixRenderTable && window.__bandixRenderTable(); } catch (e) {}
}
if (typeSel) typeSel.addEventListener('change', onFilterChange);
if (devSel) devSel.addEventListener('change', onFilterChange);
window.addEventListener('resize', function () {
if (lastHistoryData && lastHistoryData.length) {
// 重新绘制当前数据（保持当前筛选）
var type = document.getElementById('history-type-select')?.value || 'total';
var canvas = document.getElementById('history-canvas');
if (!canvas) return;
var filtered = lastHistoryData.slice();
filtered.sort(function (a, b) { return (a.ts_ms || 0) - (b.ts_ms || 0); });
var keys = getTypeKeys(type);
var upSeries = filtered.map(function (x) { return x[keys.up] || 0; });
var downSeries = filtered.map(function (x) { return x[keys.down] || 0; });
var labels = filtered.map(function (x) { return msToTimeLabel(x.ts_ms); });
drawHistoryChartWithZoom(canvas, labels, upSeries, downSeries);
} else {
refreshHistory();
}
});
// 首次加载
refreshHistory();
})();
// 历史趋势轮询（每1秒）
poll.add(function () {
return refreshHistory();
},1);
// 定义更新设备数据的函数
function updateDeviceData() {
return callStatus().then(function (result) {
var trafficDiv = document.getElementById('traffic-status');
var deviceCountDiv = document.getElementById('device-count');
var statsGrid = document.getElementById('stats-grid');
var speedUnit = uci.get('bandix', 'traffic', 'speed_unit') || 'bytes';
var stats = result;
if (!stats || !stats.devices) {
trafficDiv.innerHTML = '' + _('Unable to fetch data') + '
';
return;
}
// 更新设备计数
var onlineCount = stats.devices.filter(d => isDeviceOnline(d)).length;
deviceCountDiv.textContent = _('Online Devices') + ': ' + onlineCount + ' / ' + stats.devices.length;
// 计算统计数据（包含所有设备）
var totalLanUp = stats.devices.reduce((sum, d) => sum + (d.local_tx_bytes || 0), 0);
var totalLanDown = stats.devices.reduce((sum, d) => sum + (d.local_rx_bytes || 0), 0);
var totalWanUp = stats.devices.reduce((sum, d) => sum + (d.wide_tx_bytes || 0), 0);
var totalWanDown = stats.devices.reduce((sum, d) => sum + (d.wide_rx_bytes || 0), 0);
var totalLanSpeedUp = stats.devices.reduce((sum, d) => sum + (d.local_tx_rate || 0), 0);
var totalLanSpeedDown = stats.devices.reduce((sum, d) => sum + (d.local_rx_rate || 0), 0);
var totalWanSpeedUp = stats.devices.reduce((sum, d) => sum + (d.wide_tx_rate || 0), 0);
var totalWanSpeedDown = stats.devices.reduce((sum, d) => sum + (d.wide_rx_rate || 0), 0);
var totalSpeedUp = totalLanSpeedUp + totalWanSpeedUp;
var totalSpeedDown = totalLanSpeedDown + totalWanSpeedDown;
var totalUp = totalLanUp + totalWanUp;
var totalDown = totalLanDown + totalWanDown;
// 更新统计卡片
statsGrid.innerHTML = '';
// LAN 流量卡片
statsGrid.appendChild(E('div', { 'class': 'cbi-section' }, [
E('div', { 'class': 'stats-card-title' }, _('LAN Traffic')),
E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' }, [
// 上传行
E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [
E('span', { 'style': 'color: #f97316; font-size: 0.75rem; font-weight: bold;' }, '↑'),
E('span', { 'style': 'color: #f97316; font-size: 1.125rem; font-weight: 700;' }, formatByterate(totalLanSpeedUp, speedUnit)),
E('span', { 'style': 'font-size: 0.75rem; color: #64748b; margin-left: 4px;' }, '(' + formatSize(totalLanUp) + ')')
]),
// 下载行
E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [
E('span', { 'style': 'color: #06b6d4; font-size: 0.75rem; font-weight: bold;' }, '↓'),
E('span', { 'style': 'color: #06b6d4; font-size: 1.125rem; font-weight: 700;' }, formatByterate(totalLanSpeedDown, speedUnit)),
E('span', { 'style': 'font-size: 0.75rem; color: #64748b; margin-left: 4px;' }, '(' + formatSize(totalLanDown) + ')')
])
])
]));
// WAN 流量卡片
statsGrid.appendChild(E('div', { 'class': 'cbi-section' }, [
E('div', { 'class': 'stats-card-title' }, _('WAN Traffic')),
E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' }, [
// 上传行
E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [
E('span', { 'style': 'color: #f97316; font-size: 0.75rem; font-weight: bold;' }, '↑'),
E('span', { 'style': 'color: #f97316; font-size: 1.125rem; font-weight: 700;' }, formatByterate(totalWanSpeedUp, speedUnit)),
E('span', { 'style': 'font-size: 0.75rem; color: #64748b; margin-left: 4px;' }, '(' + formatSize(totalWanUp) + ')')
]),
// 下载行
E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [
E('span', { 'style': 'color: #06b6d4; font-size: 0.75rem; font-weight: bold;' }, '↓'),
E('span', { 'style': 'color: #06b6d4; font-size: 1.125rem; font-weight: 700;' }, formatByterate(totalWanSpeedDown, speedUnit)),
E('span', { 'style': 'font-size: 0.75rem; color: #64748b; margin-left: 4px;' }, '(' + formatSize(totalWanDown) + ')')
])
])
]));
// 总流量卡片
statsGrid.appendChild(E('div', { 'class': 'cbi-section' }, [
E('div', { 'class': 'stats-card-title' }, _('Total')),
E('div', { 'style': 'display: flex; flex-direction: column; gap: 8px;' }, [
// 上传行
E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [
E('span', { 'style': 'color: #f97316; font-size: 0.75rem; font-weight: bold;' }, '↑'),
E('span', { 'style': 'color: #f97316; font-size: 1.125rem; font-weight: 700;' }, formatByterate(totalSpeedUp, speedUnit)),
E('span', { 'style': 'font-size: 0.75rem; color: #64748b; margin-left: 4px;' }, '(' + formatSize(totalUp) + ')')
]),
// 下载行
E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' }, [
E('span', { 'style': 'color: #06b6d4; font-size: 0.75rem; font-weight: bold;' }, '↓'),
E('span', { 'style': 'color: #06b6d4; font-size: 1.125rem; font-weight: 700;' }, formatByterate(totalSpeedDown, speedUnit)),
E('span', { 'style': 'font-size: 0.75rem; color: #64748b; margin-left: 4px;' }, '(' + formatSize(totalDown) + ')')
])
])
]));
// 创建表头点击处理函数
function createSortableHeader(text, sortKey) {
var th = E('th', {
'class': 'sortable' + (currentSortBy === sortKey ? ' active ' + (currentSortOrder ? 'asc' : 'desc') : ''),
'data-sort': sortKey
}, text);
th.addEventListener('click', function() {
var newSortBy = this.getAttribute('data-sort');
if (currentSortBy === newSortBy) {
// 同一列，切换升降序
currentSortOrder = !currentSortOrder;
} else {
// 不同列，默认降序（对于速度和流量，降序更有意义）
currentSortBy = newSortBy;
if (newSortBy === 'hostname' || newSortBy === 'ip' || newSortBy === 'mac') {
currentSortOrder = true; // 文本类默认升序
} else {
currentSortOrder = false; // 数值类默认降序
}
}
// 保存状态
localStorage.setItem('bandix_sort_by', currentSortBy);
localStorage.setItem('bandix_sort_order', currentSortOrder.toString());
// 触发重新渲染
if (window.__bandixRenderTable) {
window.__bandixRenderTable();
}
});
return th;
}
// 创建分栏表头（速度 | 用量）
function createSplitHeader(text, speedKey, trafficKey) {
var th = E('th', {});
var header = E('div', { 'class': 'th-split-header' }, [
E('span', {}, text)
]);
var controls = E('div', { 'style': 'display: flex; align-items: center; gap: 4px;' });
// 速度排序按钮
var speedBtn = E('div', {
'class': 'th-split-section' + (currentSortBy === speedKey ? ' active' : ''),
'data-sort': speedKey,
'title': _('Sort by Speed')
}, [
E('span', { 'class': 'th-split-icon' }, '⚡'),
E('span', { 'style': 'font-size: 0.75rem;' }, currentSortBy === speedKey ? (currentSortOrder ? '↑' : '↓') : '')
]);
// 分隔线
var divider = E('div', { 'class': 'th-split-divider' });
// 用量排序按钮
var trafficBtn = E('div', {
'class': 'th-split-section' + (currentSortBy === trafficKey ? ' active' : ''),
'data-sort': trafficKey,
'title': _('Sort by Traffic')
}, [
E('span', { 'class': 'th-split-icon' }, '∑'),
E('span', { 'style': 'font-size: 0.75rem;' }, currentSortBy === trafficKey ? (currentSortOrder ? '↑' : '↓') : '')
]);
controls.appendChild(speedBtn);
controls.appendChild(divider);
controls.appendChild(trafficBtn);
header.appendChild(controls);
th.appendChild(header);
// 速度按钮点击事件
speedBtn.addEventListener('click', function(e) {
e.stopPropagation();
var newSortBy = this.getAttribute('data-sort');
if (currentSortBy === newSortBy) {
currentSortOrder = !currentSortOrder;
} else {
currentSortBy = newSortBy;
currentSortOrder = false; // 速度默认降序
}
localStorage.setItem('bandix_sort_by', currentSortBy);
localStorage.setItem('bandix_sort_order', currentSortOrder.toString());
if (window.__bandixRenderTable) {
window.__bandixRenderTable();
}
});
// 用量按钮点击事件
trafficBtn.addEventListener('click', function(e) {
e.stopPropagation();
var newSortBy = this.getAttribute('data-sort');
if (currentSortBy === newSortBy) {
currentSortOrder = !currentSortOrder;
} else {
currentSortBy = newSortBy;
currentSortOrder = false; // 用量默认降序
}
localStorage.setItem('bandix_sort_by', currentSortBy);
localStorage.setItem('bandix_sort_order', currentSortOrder.toString());
if (window.__bandixRenderTable) {
window.__bandixRenderTable();
}
});
return th;
}
// 创建表格
var table = E('table', { 'class': 'bandix-table' }, [
E('thead', {}, [
E('tr', {}, [
createSortableHeader(_('Device Info'), 'hostname'),
createSplitHeader(_('LAN Traffic'), 'lan_speed', 'lan_traffic'),
createSplitHeader(_('WAN Traffic'), 'wan_speed', 'wan_traffic'),
E('th', {}, _('Rate Limit')),
E('th', {}, _('Actions'))
])
]),
E('tbody', {})
]);
var tbody = table.querySelector('tbody');
// 过滤：按选择设备
var selectedMac = (typeof document !== 'undefined' ? (document.getElementById('history-device-select')?.value || '') : '');
var filteredDevices = (!selectedMac) ? stats.devices : stats.devices.filter(function(d){ return (d.mac === selectedMac); });
// 应用排序
filteredDevices = sortDevices(filteredDevices, currentSortBy, currentSortOrder);
// 检查是否有任何设备有 IPv6 地址
var hasAnyIPv6 = filteredDevices.some(function(device) {
var lanIPv6 = filterLanIPv6(device.ipv6_addresses);
return lanIPv6.length > 0;
});
// 填充数据
filteredDevices.forEach(function (device) {
var isOnline = isDeviceOnline(device);
// 根据主题类型决定按钮显示内容
var themeType = getThemeType();
var buttonText = themeType === 'narrow' ? '⚙' : _('Settings');
var actionButton = E('button', {
'class': 'cbi-button cbi-button-action',
'title': _('Settings')
}, buttonText);
// 绑定点击事件
actionButton.addEventListener('click', function () {
showRateLimitModal(device);
});
// 获取当前显示模式
var deviceMode = localStorage.getItem('bandix_device_mode') || 'simple';
var isDetailedMode = deviceMode === 'detailed';
// 构建设备信息元素
var deviceInfoElements = [
E('div', { 'class': 'device-name' }, [
E('span', {
'class': 'device-status ' + (isOnline ? 'online' : 'offline')
}),
device.hostname || '-'
]),
E('div', { 'class': 'device-ip' }, device.ip)
];
// 详细模式下显示更多信息
if (isDetailedMode) {
// 只有当有设备有 IPv6 时才添加 IPv6 行
if (hasAnyIPv6) {
var lanIPv6 = filterLanIPv6(device.ipv6_addresses);
if (lanIPv6.length > 0) {
var allIPv6 = device.ipv6_addresses ? device.ipv6_addresses.join(', ') : '';
deviceInfoElements.push(E('div', {
'class': 'device-ipv6',
'title': allIPv6
}, lanIPv6.join(', ')));
} else {
deviceInfoElements.push(E('div', { 'class': 'device-ipv6' }, '-'));
}
}
// 添加 MAC 和最后上线信息
deviceInfoElements.push(
E('div', { 'class': 'device-mac' }, device.mac),
E('div', { 'class': 'device-last-online' }, [
E('span', {}, _('Last Online') + ': '),
E('span', { 'class': 'device-last-online-value' }, formatLastOnlineTime(device.last_online_ts)),
E('span', { 'class': 'device-last-online-exact' }, formatLastOnlineExactTime(device.last_online_ts))
])
);
}
var row = E('tr', {}, [
// 设备信息
E('td', {}, [
E('div', { 'class': 'device-info' }, deviceInfoElements)
]),
// LAN 流量
E('td', {}, [
E('div', { 'class': 'traffic-info' }, [
E('div', { 'class': 'traffic-row' }, [
E('span', { 'class': 'traffic-icon upload' }, '↑'),
E('span', { 'class': 'traffic-speed lan' }, formatByterate(device.local_tx_rate || 0, speedUnit)),
E('span', { 'class': 'traffic-total' }, '(' + formatSize(device.local_tx_bytes || 0) + ')')
]),
E('div', { 'class': 'traffic-row' }, [
E('span', { 'class': 'traffic-icon download' }, '↓'),
E('span', { 'class': 'traffic-speed lan' }, formatByterate(device.local_rx_rate || 0, speedUnit)),
E('span', { 'class': 'traffic-total' }, '(' + formatSize(device.local_rx_bytes || 0) + ')')
])
])
]),
// WAN 流量
E('td', {}, [
E('div', { 'class': 'traffic-info' }, [
E('div', { 'class': 'traffic-row' }, [
E('span', { 'class': 'traffic-icon upload' }, '↑'),
E('span', { 'class': 'traffic-speed wan' }, formatByterate(device.wide_tx_rate || 0, speedUnit)),
E('span', { 'class': 'traffic-total' }, '(' + formatSize(device.wide_tx_bytes || 0) + ')')
]),
E('div', { 'class': 'traffic-row' }, [
E('span', { 'class': 'traffic-icon download' }, '↓'),
E('span', { 'class': 'traffic-speed wan' }, formatByterate(device.wide_rx_rate || 0, speedUnit)),
E('span', { 'class': 'traffic-total' }, '(' + formatSize(device.wide_rx_bytes || 0) + ')')
])
])
]),
// 限速设置
E('td', {}, [
E('div', { 'class': 'limit-info' }, [
E('div', { 'class': 'traffic-row' }, [
E('span', { 'class': 'traffic-icon upload', 'style': 'font-size: 0.75rem;' }, '↑'),
E('span', { 'style': 'font-size: 0.875rem;' }, formatByterate(device.wide_tx_rate_limit || 0, speedUnit))
]),
E('div', { 'class': 'traffic-row' }, [
E('span', { 'class': 'traffic-icon download', 'style': 'font-size: 0.75rem;' }, '↓'),
E('span', { 'style': 'font-size: 0.875rem;' }, formatByterate(device.wide_rx_rate_limit || 0, speedUnit))
]),
])
]),
// 操作
E('td', {}, [
actionButton
])
]);
tbody.appendChild(row);
});
// 更新表格内容
trafficDiv.innerHTML = '';
trafficDiv.appendChild(table);
// 暴露一个立即重绘表格的函数，供筛选变化时调用
try { window.__bandixRenderTable = function(){
// 重新触发完整的数据更新和渲染
updateDeviceData();
}; } catch (e) {}
// 更新历史趋势中的设备下拉
try {
latestDevices = stats.devices || [];
updateDeviceOptions(latestDevices);
} catch (e) {}
});
}
// 轮询获取数据
poll.add(updateDeviceData, 1);
// 立即执行一次，不等待轮询
updateDeviceData();
// 自动适应主题背景色和文字颜色的函数（仅应用于弹窗和 tooltip）
function applyThemeColors() {
try {
// 优先从 cbi-section 获取颜色
var cbiSection = document.querySelector('.cbi-section');
var targetElement = cbiSection || document.querySelector('.main') || document.body;
var computedStyle = window.getComputedStyle(targetElement);
var bgColor = computedStyle.backgroundColor;
var textColor = computedStyle.color;
// 如果无法获取背景色，尝试从其他 cbi-section 获取
if (!bgColor || bgColor === 'rgba(0, 0, 0, 0)' || bgColor === 'transparent') {
var allCbiSections = document.querySelectorAll('.cbi-section');
for (var i = 0; i < allCbiSections.length; i++) {
var sectionStyle = window.getComputedStyle(allCbiSections[i]);
var sectionBg = sectionStyle.backgroundColor;
if (sectionBg && sectionBg !== 'rgba(0, 0, 0, 0)' && sectionBg !== 'transparent') {
bgColor = sectionBg;
textColor = sectionStyle.color;
break;
}
}
}
// 只应用到模态框和 tooltip，不修改页面其他元素
if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
// 应用到模态框（确保不透明）
var modal = document.querySelector('.modal');
if (modal) {
var rgbaMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
var r = parseInt(rgbaMatch[1]);
var g = parseInt(rgbaMatch[2]);
var b = parseInt(rgbaMatch[3]);
var alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
if (alpha < 0.95) {
modal.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
} else {
modal.style.backgroundColor = bgColor;
}
} else {
modal.style.backgroundColor = bgColor;
}
}
// 应用到 tooltip（包括所有 tooltip 实例）
var tooltips = document.querySelectorAll('.history-tooltip');
tooltips.forEach(function(tooltip) {
var rgbaMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (rgbaMatch) {
var r = parseInt(rgbaMatch[1]);
var g = parseInt(rgbaMatch[2]);
var b = parseInt(rgbaMatch[3]);
var alpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
if (alpha < 0.95) {
tooltip.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
} else {
tooltip.style.backgroundColor = bgColor;
}
} else {
tooltip.style.backgroundColor = bgColor;
}
});
}
// 检测文字颜色并应用（仅应用到模态框和 tooltip）
if (textColor && textColor !== 'rgba(0, 0, 0, 0)') {
// 应用到模态框的文字颜色
var modal = document.querySelector('.modal');
if (modal) {
modal.style.color = textColor;
}
// 应用到 tooltip 的文字颜色
var tooltips = document.querySelectorAll('.history-tooltip');
tooltips.forEach(function(tooltip) {
tooltip.style.color = textColor;
});
}
} catch (e) {
// 如果检测失败，使用默认值
console.log('Theme adaptation:', e);
}
}
// 初始应用主题颜色
setTimeout(applyThemeColors, 100);
// 监听 DOM 变化，自动应用到新创建的元素
if (typeof MutationObserver !== 'undefined') {
var observer = new MutationObserver(function(mutations) {
applyThemeColors();
});
setTimeout(function() {
var container = document.querySelector('.bandix-container');
if (container) {
observer.observe(container, {
childList: true,
subtree: true
});
}
}, 200);
}
return view;
}
});