Doni/safesight-control
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show device list directly on monitor page

Browse Source
This commit is contained in:
tian 2026-05-07 14:23:14 +08:00
parent d40b977e90
commit 3a77449b4f
1 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
internal/web/ui/templates/monitor.html
View File

@ -3,66 +3,67 @@
<div class="section-title">
<div>
<h2 class="title-with-icon">{{icon "devices"}}<span>视频监控</span></h2>
<div class="form-hint">从设备拉取通道列表，点击通道查看实时画面。</div>
</div>
<div class="actions compact">
<button class="btn ghost" type="button" id="btn-load">加载通道</button>
<div class="form-hint">选择在线设备，加载通道后查看实时画面。</div>
</div>
</div>
</div>
<div class="detail-grid" id="channels-grid" style="grid-template-columns:repeat(2,minmax(0,1fr))">
<div class="card muted" style="grid-column:1/-1;text-align:center">请先选择在线设备，点击"加载通道"。</div>
{{if .Devices}}
<div class="card">
<div class="table-wrap">
<table>
<thead><tr><th>设备</th><th>地址</th><th>操作</th></tr></thead>
<tbody>
{{range .Devices}}
{{if .Online}}
<tr>
<td>{{.DisplayName}}<div class="muted small mono">{{.DeviceID}}</div></td>
<td class="mono">{{.IP}}:{{.AgentPort}}</td>
<td><button class="btn ghost" type="button" onclick="loadChannels('{{.DeviceID}}')">加载通道</button></td>
</tr>
{{end}}
{{end}}
</tbody>
</table>
</div>
</div>
{{else}}
<div class="card muted" style="text-align:center">暂无在线设备。</div>
{{end}}
<div class="detail-grid" id="channels-grid" style="grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px"></div>
<script>
(function() {
function loadChannels(deviceId) {
var grid = document.getElementById("channels-grid");
function loadChannels(deviceId) {
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">加载通道中…</div>';
fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(deviceId))
.then(function(r) { return r.json(); })
.then(function(data) {
var chs = data.channels || [];
if (chs.length === 0) {
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">该设备没有可预览的通道。</div>';
return;
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">加载通道中…</div>';
fetch('/ui/api/monitor/channels?device_id=' + encodeURIComponent(deviceId))
.then(function(r) { return r.json(); })
.then(function(data) {
var chs = data.channels || [];
if (chs.length === 0) {
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">该设备没有可预览的通道。</div>';
return;
}
var cols = chs.length === 1 ? 1 : 2;
grid.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
var html = "";
chs.forEach(function(ch) {
html += '<div class="card"><h3>' + esc(ch.name) + '</h3>';
if (ch.hls_url) {
html += '<video controls autoplay muted style="width:100%;max-height:400px;background:#000" src="' + esc(ch.hls_url) + '"></video>';
html += '<div class="actions" style="margin-top:8px"><a class="btn ghost" href="' + esc(ch.hls_url) + '" target="_blank">新窗口打开</a></div>';
} else {
html += '<div class="muted">无预览地址</div>';
}
var cols = chs.length === 1 ? 1 : 2;
grid.style.gridTemplateColumns = "repeat(" + cols + ",minmax(0,1fr))";
var html = "";
chs.forEach(function(ch) {
html += '<div class="card"><h3>' + esc(ch.name) + '</h3>';
if (ch.hls_url) {
html += '<video controls autoplay muted style="width:100%;max-height:400px;background:#000" src="' + esc(ch.hls_url) + '"></video>';
html += '<div class="actions" style="margin-top:8px"><a class="btn ghost" href="' + esc(ch.hls_url) + '" target="_blank">新窗口打开</a></div>';
} else {
html += '<div class="muted">无预览地址</div>';
}
html += '</div>';
});
grid.innerHTML = html;
})
.catch(function() {
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">无法连接设备，请确认设备在线。</div>';
html += '</div>';
});
}
function esc(s) { return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"); }
document.getElementById("btn-load").addEventListener("click", function() {
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">请从列表中选择设备…</div>';
// Create device selector overlay
var html = '<table><thead><tr><th>设备</th><th>地址</th><th>操作</th></tr></thead><tbody>';
{{range .Devices}}
{{if .Online}}
html += '<tr><td>{{.DisplayName}}</td><td class="mono">{{.IP}}:{{.AgentPort}}</td><td><button class="btn ghost" onclick="loadChannels(\'{{.DeviceID}}\')">加载</button></td></tr>';
{{end}}
{{end}}
html += '</tbody></table>';
grid.innerHTML = '<div class="card" style="grid-column:1/-1">' + html + '</div>';
});
})();
grid.innerHTML = html;
})
.catch(function() {
grid.innerHTML = '<div class="card muted" style="grid-column:1/-1;text-align:center">无法连接设备，请确认设备在线。</div>';
});
}
function esc(s) { return (s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"); }
</script>
{{end}}