114 lines
4.0 KiB
HTML
114 lines
4.0 KiB
HTML
{{define "task"}}
|
|
<div class="card">
|
|
<div><a href="/ui/tasks">返回任务中心</a></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>任务执行详情</h2>
|
|
<div class="row" style="margin-top:10px">
|
|
<div>
|
|
<div class="muted small">任务标识</div>
|
|
<div class="mono"><b>{{.Task.ID}}</b></div>
|
|
</div>
|
|
<div>
|
|
<div class="muted small">操作</div>
|
|
<div>
|
|
{{if eq .Task.Type "config_apply"}}下发识别配置
|
|
{{else if eq .Task.Type "reload"}}重载识别服务
|
|
{{else if eq .Task.Type "rollback"}}回滚识别配置
|
|
{{else if eq .Task.Type "media_start"}}启动视频分析服务
|
|
{{else if eq .Task.Type "media_restart"}}重启视频分析服务
|
|
{{else if eq .Task.Type "media_stop"}}停止视频分析服务
|
|
{{else}}<span class="mono">{{.Task.Type}}</span>{{end}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="muted small">状态</div>
|
|
<div>
|
|
{{if eq .Task.Status "success"}}<span class="pill ok">成功</span>
|
|
{{else if eq .Task.Status "failed"}}<span class="pill bad">失败</span>
|
|
{{else if eq .Task.Status "running"}}<span class="pill run">执行中</span>
|
|
{{else}}<span class="pill">待执行</span>{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>节点执行情况</h2>
|
|
<div class="table-wrap" style="margin-top:10px">
|
|
<table>
|
|
<thead>
|
|
<tr><th>节点标识</th><th>状态</th><th>进度</th><th>失败原因</th></tr>
|
|
</thead>
|
|
<tbody id="devices-body">
|
|
{{range $id, $st := .Task.Devices}}
|
|
<tr data-device-id="{{$id}}">
|
|
<td class="mono">{{$id}}</td>
|
|
<td class="st">
|
|
{{if eq $st.Status "success"}}<span class="pill ok">成功</span>
|
|
{{else if eq $st.Status "failed"}}<span class="pill bad">失败</span>
|
|
{{else if eq $st.Status "running"}}<span class="pill run">执行中</span>
|
|
{{else}}<span class="pill">待执行</span>{{end}}
|
|
</td>
|
|
<td class="pg mono">{{$st.Progress}}</td>
|
|
<td class="er">{{$st.Error}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>实时进度</h2>
|
|
<div class="muted small">任务执行过程中会持续推送每台节点的状态变化。</div>
|
|
<div class="actions" style="margin-top:8px">
|
|
<button type="button" onclick="startSSE()">连接</button>
|
|
<button type="button" onclick="stopSSE()">断开</button>
|
|
<span class="muted small" id="sse-status">未连接</span>
|
|
</div>
|
|
<pre id="sse-log" style="margin-top:10px;max-height:320px"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
let es;
|
|
function pill(status){
|
|
if(status === 'success') return '<span class="pill ok">成功</span>';
|
|
if(status === 'failed') return '<span class="pill bad">失败</span>';
|
|
if(status === 'running') return '<span class="pill run">执行中</span>';
|
|
return '<span class="pill">待执行</span>';
|
|
}
|
|
function startSSE(){
|
|
stopSSE();
|
|
const url = `/api/tasks/{{.TaskID}}/events`;
|
|
es = new EventSource(url);
|
|
document.getElementById('sse-status').textContent = '连接中...';
|
|
es.onopen = () => { document.getElementById('sse-status').textContent = '已连接'; };
|
|
es.onerror = () => { document.getElementById('sse-status').textContent = '连接异常（自动重试）'; };
|
|
es.addEventListener('device_update', (ev) => {
|
|
const line = ev.data;
|
|
const log = document.getElementById('sse-log');
|
|
log.textContent += line + "\n";
|
|
log.scrollTop = log.scrollHeight;
|
|
try {
|
|
const u = JSON.parse(line);
|
|
const tr = document.querySelector(`tr[data-device-id="${cssEscape(u.device_id)}"]`);
|
|
if(tr){
|
|
tr.querySelector('.st').innerHTML = pill(u.status);
|
|
tr.querySelector('.pg').textContent = u.progress;
|
|
tr.querySelector('.er').textContent = u.error || '';
|
|
}
|
|
} catch(e){}
|
|
});
|
|
}
|
|
function stopSSE(){
|
|
if(es){ es.close(); es = null; }
|
|
document.getElementById('sse-status').textContent = '未连接';
|
|
}
|
|
function cssEscape(s){
|
|
return String(s).replace(/[^a-zA-Z0-9_-]/g, (c) => "\\"+c);
|
|
}
|
|
</script>
|
|
{{end}}
|