234 lines
8.2 KiB
HTML
234 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>meshgo MQTT 管理面板</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; color: #333; }
|
|
header { background: #1677ff; color: #fff; padding: 16px 24px; font-size: 18px; font-weight: 600; }
|
|
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
|
|
|
|
/* 指标卡片 */
|
|
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
|
|
.card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
|
.card .label { font-size: 13px; color: #888; margin-bottom: 6px; }
|
|
.card .value { font-size: 28px; font-weight: 700; color: #1677ff; }
|
|
.card .sub { font-size: 12px; color: #aaa; margin-top: 4px; }
|
|
|
|
/* 图表区 */
|
|
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
|
|
.chart-box { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
|
.chart-box h3 { font-size: 15px; color: #333; margin-bottom: 16px; }
|
|
.chart-wrap { position: relative; height: 220px; }
|
|
|
|
/* 客户端表格 */
|
|
.table-box { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
|
.table-box h3 { font-size: 15px; color: #333; margin-bottom: 16px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th { text-align: left; padding: 10px 12px; background: #fafafa; border-bottom: 1px solid #eee; font-size: 13px; color: #666; }
|
|
td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
|
|
tr:hover td { background: #fafafa; }
|
|
.online-dot { display: inline-block; width: 8px; height: 8px; background: #52c41a; border-radius: 50%; margin-right: 6px; }
|
|
.tag { display: inline-block; padding: 2px 8px; background: #e6f4ff; color: #1677ff; border-radius: 4px; font-size: 12px; margin: 1px; }
|
|
.refresh-info { font-size: 12px; color: #aaa; text-align: right; margin-top: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>meshgo MQTT 管理面板</header>
|
|
|
|
<div class="container">
|
|
|
|
<!-- 指标卡片 -->
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="label">当前连接</div>
|
|
<div class="value" id="connections">-</div>
|
|
<div class="sub">实时在线客户端数</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">累计消息</div>
|
|
<div class="value" id="messages_total">-</div>
|
|
<div class="sub">所有主题消息总数</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">msh/# 消息</div>
|
|
<div class="value" id="messages_msh">-</div>
|
|
<div class="sub">mesh 主题消息数</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="label">运行时长</div>
|
|
<div class="value" id="uptime">-</div>
|
|
<div class="sub" id="uptime_sub">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表 -->
|
|
<div class="charts">
|
|
<div class="chart-box">
|
|
<h3>消息趋势（最近 30 条）</h3>
|
|
<div class="chart-wrap"><canvas id="trendChart"></canvas></div>
|
|
</div>
|
|
<div class="chart-box">
|
|
<h3>主题分布</h3>
|
|
<div class="chart-wrap"><canvas id="topicChart"></canvas></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 在线客户端 -->
|
|
<div class="table-box">
|
|
<h3>在线客户端 <span id="client_count" style="font-weight:normal;font-size:13px;color:#888"></span></h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>状态</th>
|
|
<th>客户端 ID</th>
|
|
<th>IP 地址</th>
|
|
<th>用户名</th>
|
|
<th>订阅数</th>
|
|
<th>连接时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="clients_tbody">
|
|
<tr><td colspan="6" style="text-align:center;color:#aaa;padding:24px">暂无数据</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="refresh-info">每 3 秒自动刷新</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// ---------------------------------------------------------------------------
|
|
// 消息趋势环形缓冲
|
|
// ---------------------------------------------------------------------------
|
|
const MAX_TREND = 30;
|
|
const trendBuffer = [];
|
|
let trendLabels = [];
|
|
let trendData = [];
|
|
|
|
const trendCtx = document.getElementById('trendChart').getContext('2d');
|
|
const trendChart = new Chart(trendCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: trendLabels,
|
|
datasets: [{
|
|
label: '消息数',
|
|
data: trendData,
|
|
borderColor: '#1677ff',
|
|
backgroundColor: 'rgba(22,119,255,0.1)',
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: 3,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
animation: false,
|
|
scales: {
|
|
x: { display: false },
|
|
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
|
},
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
|
|
const topicCtx = document.getElementById('topicChart').getContext('2d');
|
|
const topicChart = new Chart(topicCtx, {
|
|
type: 'bar',
|
|
data: { labels: [], datasets: [{ label: '消息数', data: [], backgroundColor: '#1677ff' }] },
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
animation: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
x: { ticks: { maxRotation: 45, minRotation: 45, font: { size: 11 } } },
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
|
|
let lastTotal = 0;
|
|
|
|
function formatUptime(s) {
|
|
if (s < 60) return s + ' 秒';
|
|
if (s < 3600) return Math.floor(s/60) + ' 分 ' + (s%60) + ' 秒';
|
|
const h = Math.floor(s/3600);
|
|
const m = Math.floor((s%3600)/60);
|
|
const sec = s%60;
|
|
return h + ' 小时 ' + m + ' 分 ' + sec + ' 秒';
|
|
}
|
|
|
|
function fetchStats() {
|
|
fetch('/admin/mqtt/api/stats')
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
const d = res.data;
|
|
|
|
// 指标卡片
|
|
document.getElementById('connections').textContent = d.connections;
|
|
document.getElementById('messages_total').textContent = d.messages_total;
|
|
document.getElementById('messages_msh').textContent = d.messages_msh;
|
|
document.getElementById('uptime').textContent = formatUptime(d.uptime);
|
|
document.getElementById('uptime_sub').textContent = '服务已运行 ' + formatUptime(d.uptime);
|
|
|
|
// 趋势图（增量）
|
|
const delta = d.messages_total - lastTotal;
|
|
lastTotal = d.messages_total;
|
|
trendBuffer.push(delta);
|
|
if (trendBuffer.length > MAX_TREND) trendBuffer.shift();
|
|
trendLabels.length = 0;
|
|
trendLabels.push(...trendBuffer.map((_, i) => ''));
|
|
trendData.length = 0;
|
|
trendData.push(...trendBuffer);
|
|
trendChart.data.labels = trendLabels;
|
|
trendChart.data.datasets[0].data = trendData;
|
|
trendChart.update();
|
|
|
|
// 主题分布
|
|
const topics = d.topics || {};
|
|
const sorted = Object.entries(topics).sort((a, b) => b[1] - a[1]).slice(0, 10);
|
|
topicChart.data.labels = sorted.map(x => x[0]);
|
|
topicChart.data.datasets[0].data = sorted.map(x => x[1]);
|
|
topicChart.update();
|
|
|
|
// 客户端表格
|
|
document.getElementById('client_count').textContent = '(' + d.clients.length + ')';
|
|
const tbody = document.getElementById('clients_tbody');
|
|
if (!d.clients || d.clients.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#aaa;padding:24px">暂无在线客户端</td></tr>';
|
|
} else {
|
|
tbody.innerHTML = d.clients.map(c => {
|
|
const time = new Date(c.connected_at).toLocaleString('zh-CN', { hour12: false });
|
|
return `<tr>
|
|
<td><span class="online-dot"></span>在线</td>
|
|
<td><a href="/admin/mqtt/client/${esc(c.id)}" style="color:#1677ff;text-decoration:none">${esc(c.id)}</a></td>
|
|
<td>${esc(c.remote_addr)}</td>
|
|
<td>${esc(c.username)}</td>
|
|
<td>${c.subs_count}</td>
|
|
<td>${time}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
function esc(s) {
|
|
if (!s) return '';
|
|
return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
}
|
|
|
|
// 每 3 秒刷新
|
|
fetchStats();
|
|
setInterval(fetchStats, 3000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|