CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

添加延迟显示支持

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-05 23:38:53 +08:00
parent 84972cdaeb
commit 058a6c73a1
7 changed files with 450 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
public/js/app.js
View File

@@ -36,6 +36,7 @@
sourceDesc: document.getElementById('sourceDesc'),
btnTest: document.getElementById('btnTest'),
btnAdd: document.getElementById('btnAdd'),
isServerSource: document.getElementById('isServerSource'),
formMessage: document.getElementById('formMessage'),
sourceItems: document.getElementById('sourceItems'),
// Site Settings
@@ -66,6 +67,10 @@
legendTx: document.getElementById('legendTx'),
p95LabelText: document.getElementById('p95LabelText'),
p95TypeSelect: document.getElementById('p95TypeSelect'),
blackboxSourceSelect: document.getElementById('blackboxSourceSelect'),
latencySourceInput: document.getElementById('latencySourceInput'),
latencyDestInput: document.getElementById('latencyDestInput'),
latencyTargetInput: document.getElementById('latencyTargetInput'),
detailDiskTotal: document.getElementById('detailDiskTotal'),
// Server Details Modal
serverDetailModal: document.getElementById('serverDetailModal'),
@@ -105,6 +110,8 @@
let currentSourceFilter = 'all';
let currentPage = 1;
let pageSize = 20;
let currentLatency = null;
let latencyTimer = null;
// Load sort state from localStorage or use default
let currentSort = { column: 'up', direction: 'desc' };
@@ -285,6 +292,7 @@
// Start data fetching
fetchMetrics();
fetchNetworkHistory();
fetchLatency();
// Site settings
if (window.SITE_SETTINGS) {
@@ -301,6 +309,10 @@
dom.defaultThemeInput.value = window.SITE_SETTINGS.default_theme || 'dark';
dom.show95BandwidthInput.value = window.SITE_SETTINGS.show_95_bandwidth ? "1" : "0";
dom.p95TypeSelect.value = window.SITE_SETTINGS.p95_type || 'tx';
// blackboxSourceSelect will be set after sources are fetched in updateSourceFilterOptions
dom.latencySourceInput.value = window.SITE_SETTINGS.latency_source || '';
dom.latencyDestInput.value = window.SITE_SETTINGS.latency_dest || '';
dom.latencyTargetInput.value = window.SITE_SETTINGS.latency_target || '';
}
loadSiteSettings();
@@ -308,6 +320,7 @@
// setInterval(fetchMetrics, REFRESH_INTERVAL); - Now using WebSockets
initWebSocket();
setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
setInterval(fetchLatency, REFRESH_INTERVAL);
}
// ---- Real-time WebSocket ----
@@ -476,6 +489,19 @@
}
}
async function fetchLatency() {
try {
const response = await fetch('/api/metrics/latency');
const data = await response.json();
currentLatency = data.latency;
if (allServersData.length > 0) {
updateMap2D(allServersData);
}
} catch (err) {
console.error('Error fetching latency:', err);
}
}
// ---- Global 2D Map ----
async function initMap2D() {
if (!dom.globeContainer) return;
@@ -577,7 +603,6 @@
}
});
}
function updateMap2D(servers) {
if (!myMap2D) return;
@@ -594,13 +619,96 @@
netTx: s.netTx
}));
// Draw latency line if configured
if (window.SITE_SETTINGS && window.SITE_SETTINGS.latency_source && window.SITE_SETTINGS.latency_dest) {
const sourceName = window.SITE_SETTINGS.latency_source;
const destName = window.SITE_SETTINGS.latency_dest;
// Coordinates for countries (fallback to common ones or try to find in geoJSON)
const countryCoords = {
'China': [116.4074, 39.9042],
'United States': [-95.7129, 37.0902],
'Japan': [138.2529, 36.2048],
'Singapore': [103.8198, 1.3521],
'Germany': [10.4515, 51.1657],
'United Kingdom': [-3.436, 55.3781],
'France': [2.2137, 46.2276],
'Hong Kong': [114.1694, 22.3193],
'Taiwan': [120.9605, 23.6978],
'Korea': [127.7669, 35.9078]
};
const getCoords = (name) => {
if (countryCoords[name]) return countryCoords[name];
// Try to find in current server data
const s = servers.find(sv => sv.countryName === name || sv.country === name);
if (s && s.lng && s.lat) return [s.lng, s.lat];
return null;
};
const startCoords = getCoords(sourceName);
const endCoords = getCoords(destName);
if (startCoords && endCoords) {
const lineData = [{
fromName: sourceName,
toName: destName,
coords: [startCoords, endCoords],
latency: currentLatency
}];
const lineSeries = {
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 2,
effect: {
show: true,
period: 4,
trailLength: 0.1,
color: 'rgba(99, 102, 241, 0.8)',
symbol: 'arrow',
symbolSize: 6
},
lineStyle: {
color: 'rgba(99, 102, 241, 0.3)',
width: 2,
curveness: 0.2
},
tooltip: {
formatter: () => {
const latVal = (currentLatency !== null && currentLatency !== undefined) ? `${currentLatency.toFixed(2)} ms` : '测量中...';
return `
<div style="padding: 4px;">
<div style="font-weight: 700;">${sourceName} ↔ ${destName}</div>
<div style="font-size: 0.75rem; color: var(--accent-indigo); margin-top: 4px;">延时: ${latVal}</div>
</div>
`;
}
},
data: lineData
};
// Add or update line series
const options = myMap2D.getOption();
const series = options.series;
// Filter out existing latency lines to update
const newSeries = series.filter(s => s.type !== 'lines' || !s.latencyLine);
lineSeries.latencyLine = true;
newSeries.push(lineSeries);
myMap2D.setOption({ series: newSeries });
}
}
myMap2D.setOption({
series: [{
coordinateSystem: 'geo',
geoIndex: 0,
data: geoData
}]
});
}, { replaceMerge: ['series'] });
// Update footer stats
if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length;
@@ -1324,7 +1432,11 @@
logo_url: dom.logoUrlInput.value.trim(),
default_theme: dom.defaultThemeInput.value,
show_95_bandwidth: dom.show95BandwidthInput.value === "1" ? 1 : 0,
p95_type: dom.p95TypeSelect.value
p95_type: dom.p95TypeSelect.value,
blackbox_source_id: dom.blackboxSourceSelect.value ? parseInt(dom.blackboxSourceSelect.value) : null,
latency_source: dom.latencySourceInput.value.trim(),
latency_dest: dom.latencyDestInput.value.trim(),
latency_target: dom.latencyTargetInput.value.trim()
};
dom.btnSaveSiteSettings.disabled = true;
@@ -1434,18 +1546,30 @@
}
function updateSourceFilterOptions(sources) {
if (!dom.sourceFilter) return;
const current = dom.sourceFilter.value;
let html = '<option value="all">所有数据源</option>';
sources.forEach(source => {
html += `<option value="${escapeHtml(source.name)}">${escapeHtml(source.name)}</option>`;
});
dom.sourceFilter.innerHTML = html;
if (sources.some(s => s.name === current)) {
dom.sourceFilter.value = current;
} else {
dom.sourceFilter.value = 'all';
currentSourceFilter = 'all';
if (dom.sourceFilter) {
const current = dom.sourceFilter.value;
let html = '<option value="all">所有数据源</option>';
sources.forEach(source => {
html += `<option value="${escapeHtml(source.name)}">${escapeHtml(source.name)}</option>`;
});
dom.sourceFilter.innerHTML = html;
if (sources.some(s => s.name === current)) {
dom.sourceFilter.value = current;
} else {
dom.sourceFilter.value = 'all';
currentSourceFilter = 'all';
}
}
if (dom.blackboxSourceSelect) {
let html = '<option value="">-- 请选择延迟数据源 --</option>';
sources.forEach(source => {
html += `<option value="${source.id}">${escapeHtml(source.name)}</option>`;
});
dom.blackboxSourceSelect.innerHTML = html;
if (window.SITE_SETTINGS && window.SITE_SETTINGS.blackbox_source_id) {
dom.blackboxSourceSelect.value = window.SITE_SETTINGS.blackbox_source_id;
}
}
}
@@ -1475,6 +1599,9 @@
<span class="source-status ${source.status === 'online' ? 'source-status-online' : 'source-status-offline'}">
${source.status === 'online' ? '在线' : '离线'}
</span>
<span class="source-type-badge ${source.is_server_source ? 'type-server' : 'type-other'}" title="${source.is_server_source ? '该数据源用于展示服务器列表和指标' : '该数据源仅用于特定目的（如 Blackbox 延迟），不参与服务器列表统计'}">
${source.is_server_source ? '服务器看板' : '独立数据源'}
</span>
</div>
<div class="source-item-url">${escapeHtml(source.url)}</div>
${source.description ? `<div class="source-item-desc">${escapeHtml(source.description)}</div>` : ''}
@@ -1533,6 +1660,7 @@
const name = dom.sourceName.value.trim();
const url = dom.sourceUrl.value.trim();
const description = dom.sourceDesc.value.trim();
const is_server_source = dom.isServerSource.checked;
if (!name || !url) {
showMessage('请填写名称和URL', 'error');
@@ -1546,7 +1674,7 @@
const response = await fetch('/api/sources', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, url, description })
body: JSON.stringify({ name, url, description, is_server_source })
});
if (response.ok) {