70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
{{define "monitor"}}
|
|
<div class="card">
|
|
<div class="section-title">
|
|
<div>
|
|
<h2 class="title-with-icon">{{icon "devices"}}<span>视频监控</span></h2>
|
|
<div class="form-hint">选择在线设备，加载通道后查看实时画面。</div>
|
|
</div>
|
|
</div>
|
|
</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 loadChannels(deviceId) {
|
|
var grid = document.getElementById("channels-grid");
|
|
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>';
|
|
}
|
|
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,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,"""); }
|
|
</script>
|
|
{{end}}
|