183 lines
7.9 KiB
HTML
183 lines
7.9 KiB
HTML
{{define "devices"}}
|
|
<div class="stats">
|
|
<div class="stat accent-teal">
|
|
<div class="k metric-label">{{icon "devices"}}<span>设备总数</span></div>
|
|
<div class="v">{{.DeviceCount}}</div>
|
|
<div class="hint">当前纳管设备</div>
|
|
</div>
|
|
<div class="stat accent-green">
|
|
<div class="k metric-label">{{icon "online"}}<span>在线设备</span></div>
|
|
<div class="v">{{.OnlineCount}}</div>
|
|
<div class="hint">可接收状态与控制</div>
|
|
</div>
|
|
<div class="stat accent-slate">
|
|
<div class="k">离线设备</div>
|
|
<div class="v">{{.OfflineCount}}</div>
|
|
<div class="hint">需要检查网络或进程</div>
|
|
</div>
|
|
<div class="stat accent-amber">
|
|
<div class="k">失败操作</div>
|
|
<div class="v">{{.FailedTaskCount}}</div>
|
|
<div class="hint">最近任务失败数</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="section-title">
|
|
<div>
|
|
<h2>设备列表</h2>
|
|
</div>
|
|
<div class="table-tools">
|
|
<input id="device-filter" placeholder="搜索设备名、ID 或 IP" />
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" action="/devices/batch-action">
|
|
<div class="batch-toolbar" id="batch-config"{{if not .SelectedDeviceIDs}} style="display:none"{{end}}>
|
|
<div>
|
|
<div class="batch-toolbar-count">已选 {{len .SelectedDeviceIDs}} 台</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="submit" name="action" value="media_restart" class="primary">重启服务</button>
|
|
<button type="submit" name="action" value="media_start" class="secondary">启动服务</button>
|
|
<button type="submit" name="action" value="media_stop" class="danger">停止服务</button>
|
|
<button type="submit" name="action" value="reload" class="secondary" {{if .ReloadSummary}}onclick='return confirm("将重载当前运行配置：{{.ReloadSummary}}")'{{end}}>重载运行配置</button>
|
|
<button type="submit" name="action" value="rollback" class="secondary" {{if .RollbackSummary}}onclick='return confirm("将回滚到上一版运行配置：{{.RollbackSummary}}")'{{end}}>回滚运行配置</button>
|
|
{{$allOffline := true}}{{range .SelectedDevices}}{{if .Online}}{{$allOffline = false}}{{end}}{{end}}
|
|
{{if $allOffline}}
|
|
<button type="submit" id="cleanup-btn" name="action" value="cleanup_offline" class="danger" style="display:none" onclick="var n=document.querySelectorAll('input[name=device_id]:checked').length;return confirm('确认清理选中的 '+n+' 台离线设备及其全部关联数据？此操作不可恢复。')">清理选中离线设备</button>
|
|
{{end}}
|
|
<a class="btn secondary" href="{{.BatchConfigURL}}">下发设备分配</a>
|
|
<a class="btn secondary" href="/devices">清空选择</a>
|
|
</div>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table id="device-list">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:52px">选中</th>
|
|
<th>设备</th>
|
|
<th>状态</th>
|
|
<th>当前配置</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .DeviceRows}}
|
|
{{$rowWarn := and .Device.Online (or (and .ConfigStatus (not .ConfigStatus.MediaServer.Running)) (not .ConfigStatus))}}
|
|
<tr {{if $rowWarn}}class="device-row-warn"{{end}}>
|
|
<td class="select-cell">
|
|
<input type="checkbox" name="device_id" value="{{.Device.DeviceID}}" {{if hasString $.SelectedDeviceIDs .Device.DeviceID}}checked{{end}} />
|
|
</td>
|
|
<td>
|
|
<div class="device-cell">
|
|
<div class="device-avatar">{{icon "device"}}</div>
|
|
<div>
|
|
<div class="device-name">{{displayDeviceName .Device .ConfigStatus}}</div>
|
|
<div class="device-meta-line">
|
|
{{if displayDeviceTechnicalName .Device}}<span>{{displayDeviceTechnicalName .Device}}</span>{{end}}
|
|
<span class="mono">{{.Device.IP}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="state-stack">
|
|
<div class="state-row">
|
|
{{if .Device.Online}}<span class="status-dot ok"></span><span class="status-text">在线</span>{{else}}<span class="status-dot bad"></span><span class="status-text">离线</span>{{end}}
|
|
{{if .ConfigStatus}}
|
|
{{if .ConfigStatus.MediaServer.Running}}<span class="pill ok">运行中</span>{{else}}<span class="pill bad">未运行</span>{{end}}
|
|
{{else if .Device.Online}}
|
|
<span class="pill warn">待确认</span>
|
|
{{else}}
|
|
<span class="pill bad">未知</span>
|
|
{{end}}
|
|
{{if .IntegrationStale}}<span class="pill warn">需重新下发</span>{{end}}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="config-inline">
|
|
{{if and .ConfigStatus .ConfigStatus.Metadata.ConfigID}}
|
|
<div class="mono">{{.ConfigStatus.Metadata.ConfigID}}</div>
|
|
{{else if .ConfigStatusErr}}
|
|
<div class="muted small">未取到配置摘要</div>
|
|
{{else}}
|
|
<div class="muted small">暂无配置摘要</div>
|
|
{{end}}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="actions">
|
|
<a class="btn ghost" href="/devices/{{.Device.DeviceID}}">{{icon "detail"}}<span>详情</span></a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{else}}
|
|
<tr>
|
|
<td colspan="5">
|
|
<div class="empty-state">
|
|
<div class="empty-title">还没有设备</div>
|
|
<div class="muted">当前后台还没有发现或录入任何设备。</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const input = document.getElementById('device-filter');
|
|
const table = document.getElementById('device-list');
|
|
const selectedBoxes = table ? table.querySelectorAll('input[type="checkbox"][name="device_id"]') : [];
|
|
if (!input || !table) return;
|
|
input.addEventListener('input', () => {
|
|
const q = (input.value || '').trim().toLowerCase();
|
|
for (const row of table.tBodies[0].rows) {
|
|
const text = row.innerText.toLowerCase();
|
|
row.style.display = (!q || text.includes(q)) ? '' : 'none';
|
|
}
|
|
});
|
|
const syncSelected = () => {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.delete('selected');
|
|
for (const box of selectedBoxes) {
|
|
if (box.checked) {
|
|
url.searchParams.append('selected', box.value);
|
|
}
|
|
}
|
|
const next = `${url.pathname}${url.searchParams.toString() ? `?${url.searchParams.toString()}` : ''}`;
|
|
history.replaceState(null, '', next);
|
|
// Toggle batch toolbar visibility without full page reload
|
|
const toolbar = document.getElementById('batch-config');
|
|
const checked = document.querySelectorAll('input[type="checkbox"][name="device_id"]:checked');
|
|
if (toolbar) {
|
|
toolbar.style.display = checked.length > 0 ? '' : 'none';
|
|
const countEl = toolbar.querySelector('.batch-toolbar-count');
|
|
if (countEl) countEl.textContent = `已选 ${checked.length} 台`;
|
|
}
|
|
// Show/hide cleanup button based on whether ALL selected devices are offline
|
|
const cleanupBtn = document.getElementById('cleanup-btn');
|
|
if (cleanupBtn) {
|
|
let allOffline = checked.length > 0;
|
|
checked.forEach(cb => {
|
|
const row = cb.closest('tr');
|
|
if (row) {
|
|
const statusCell = row.querySelector('td:nth-child(3)');
|
|
if (statusCell && !statusCell.textContent.includes('离线')) allOffline = false;
|
|
}
|
|
});
|
|
cleanupBtn.style.display = allOffline ? '' : 'none';
|
|
}
|
|
};
|
|
for (const box of selectedBoxes) {
|
|
box.addEventListener('change', syncSelected);
|
|
}
|
|
})();
|
|
</script>
|
|
{{end}}
|