2375 lines
108 KiB
HTML
2375 lines
108 KiB
HTML
|
||
{% extends "app/base.html" %}
|
||
{% load static %}
|
||
|
||
{% block title %}{{ T.nav_control|default:'布控管理' }} - {{ settings.name|default:"Monitor" }}{% endblock %}
|
||
{% block nav_control %}active{% endblock %}
|
||
{% block page_title %}{{ T.nav_control|default:'布控管理' }}{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<style>
|
||
.zone-page { max-width: 1200px; margin: 0 auto; }
|
||
.zone-card { background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.05); overflow:hidden; }
|
||
.zone-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
|
||
background:linear-gradient(135deg,#f8fbfa 0%,#f0f9f6 100%); border-bottom:1px solid var(--c-border-light,#eef2f5); gap:10px; flex-wrap:wrap;}
|
||
.zone-head h3 { margin:0; font-size:15px; font-weight:600; color:#2c3e50; display:flex; align-items:center; gap:8px;}
|
||
.zone-head h3 .dot{width:8px;height:8px;border-radius:50%;background:#169F85;box-shadow:0 0 0 3px rgba(22,159,133,.15);}
|
||
.zone-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
|
||
.zone-toolbar select,.zone-toolbar input{padding:6px 10px;font-size:12px;border:1px solid var(--c-border,#dcdfe6);border-radius:6px;background:#fff;}
|
||
.btn{padding:7px 14px;font-size:12px;border-radius:6px;border:1px solid var(--c-border,#dcdfe6);background:#fff;cursor:pointer;}
|
||
.btn:hover{color:#169F85;border-color:#169F85;background:#f0f9f6;}
|
||
.btn-primary{background:linear-gradient(135deg,#14b89a 0%,#169F85 100%);color:#fff;border-color:transparent;}
|
||
.btn-primary:hover{background:#0e7a65;color:#fff;}
|
||
.zone-table{width:100%;border-collapse:collapse;}
|
||
.zone-table th,.zone-table td{padding:10px 14px;font-size:13px;text-align:left;border-bottom:1px solid #f3f4f6;}
|
||
.zone-table th{background:#fafbfc;color:#6b7280;font-weight:600;font-size:12px;}
|
||
.zone-table tr:hover td{background:#f9fafb;}
|
||
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;}
|
||
.tag-on{background:#d1fae5;color:#065f46;}
|
||
.tag-off{background:#f3f4f6;color:#6b7280;}
|
||
.tag-req{background:#fef3c7;color:#92400e;}
|
||
|
||
.zone-body{position:relative;min-height:360px;}
|
||
.zone-empty{display:flex;align-items:center;justify-content:center;min-height:360px;padding:40px 20px;color:var(--c-text-tertiary,#9ca3af);font-size:14px;}
|
||
|
||
/* 分析概览条 */
|
||
.zone-overview{display:flex;gap:0;padding:0;margin-bottom:14px;border:1px solid var(--c-border-light,#eef2f5);border-radius:9px;overflow:hidden;background:#fff;}
|
||
.ov-item{flex:1;padding:10px 14px;border-right:1px solid #f3f4f6;display:flex;flex-direction:column;gap:2px;}
|
||
.ov-item:last-child{border-right:none;}
|
||
.ov-item .lbl{font-size:11px;color:#6b7280;font-weight:500;}
|
||
.ov-item .val{font-size:18px;font-weight:700;color:#1f2937;line-height:1.1;}
|
||
.ov-item .val.green{color:#0e7a65;}
|
||
.ov-item .val.red{color:#dc2626;}
|
||
.ov-item .val.blue{color:#2563eb;}
|
||
.ov-item .sub{font-size:10px;color:#9ca3af;margin-top:1px;}
|
||
|
||
|
||
|
||
/* 算法小标签（表格内） */
|
||
.algo-chip{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;background:#e0f2fe;color:#075985;margin:1px;}
|
||
.algo-chip.more{background:#f3f4f6;color:#6b7280;}
|
||
.zone-empty .ic{margin-right:8px;font-size:22px;opacity:.45;}
|
||
.poly-preview{width:18px;height:18px;border-radius:3px;display:inline-block;vertical-align:middle;border:1px solid #ddd;}
|
||
|
||
/* ========== 区域编辑器弹框（左右分栏 · 浅色统一风格） ========== */
|
||
.zone-modal-overlay{
|
||
position:fixed;inset:0;z-index:400;
|
||
background:rgba(15,23,42,.35);
|
||
backdrop-filter:blur(4px);
|
||
display:none;align-items:center;justify-content:center;padding:20px;
|
||
}
|
||
.zone-modal-overlay.show{display:flex;}
|
||
.zone-modal{
|
||
width:min(820px,94vw);max-height:86vh;
|
||
background:#fff;border-radius:12px;
|
||
box-shadow:0 16px 48px rgba(0,0,0,.12);
|
||
border:1px solid var(--c-border,#e2e8f0);
|
||
display:flex;flex-direction:column;overflow:hidden;
|
||
animation:zmIn .22s ease;
|
||
}
|
||
@keyframes zmIn{from{opacity:0;transform:scale(.98) translateY(6px)}to{opacity:1;transform:none}}
|
||
.zone-modal-head{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:14px 20px;border-bottom:1px solid var(--c-border-light,#eef2f5);
|
||
background:linear-gradient(135deg,#f8fbfa 0%,#f0f9f6 100%);
|
||
}
|
||
.zone-modal-head .zm-title{margin:0;font-size:15px;font-weight:600;color:#2c3e50;display:flex;align-items:center;gap:8px;}
|
||
.zone-modal-head .zm-title::before{
|
||
content:'';width:8px;height:8px;border-radius:50%;background:#169F85;
|
||
box-shadow:0 0 0 3px rgba(22,159,133,.15);flex-shrink:0;
|
||
}
|
||
.zone-modal-head .zm-sub{margin:4px 0 0;font-size:12px;color:var(--c-text-secondary,#64748b);}
|
||
.zone-modal-close{
|
||
width:32px;height:32px;border:1px solid var(--c-border,#e2e8f0);border-radius:8px;background:#fff;
|
||
color:#64748b;font-size:18px;line-height:1;cursor:pointer;transition:.15s;
|
||
}
|
||
.zone-modal-close:hover{border-color:#169F85;color:#169F85;background:#f0f9f6;}
|
||
|
||
.zone-modal-body{display:flex;flex:1;min-height:0;overflow:hidden;background:#fff;}
|
||
@media(max-width:860px){.zone-modal-body{flex-direction:column;overflow:auto;}}
|
||
|
||
/* 左侧：画布区（与列表页同色系） */
|
||
.zm-stage{
|
||
flex:1;min-width:0;display:flex;flex-direction:column;
|
||
background:#fff;border-right:1px solid var(--c-border-light,#eef2f5);
|
||
}
|
||
.zm-stage-bar{
|
||
display:flex;flex-direction:column;gap:8px;padding:10px 16px;
|
||
background:linear-gradient(135deg,#f8fbfa 0%,#f0f9f6 100%);
|
||
border-bottom:1px solid var(--c-border-light,#eef2f5);
|
||
}
|
||
.zm-stage-row{
|
||
display:flex;align-items:center;gap:8px;min-width:0;
|
||
}
|
||
.zm-stage-row-video{gap:10px;}
|
||
.zm-stage-row-draw{
|
||
gap:8px;padding-top:8px;border-top:1px solid rgba(226,232,240,.85);
|
||
flex-wrap:wrap;
|
||
}
|
||
.zm-stage-bar select,
|
||
.zm-stream-select{
|
||
flex:1;min-width:0;width:100%;padding:7px 10px;font-size:12px;
|
||
border:1px solid var(--c-border,#dcdfe6);border-radius:6px;
|
||
background:#fff;color:#2c3e50;
|
||
}
|
||
.zm-stage-bar select:focus{outline:none;border-color:#169F85;box-shadow:0 0 0 2px rgba(22,159,133,.12);}
|
||
.zm-badge{
|
||
font-size:11px;padding:3px 10px;border-radius:10px;
|
||
background:#fef3c7;color:#92400e;font-weight:600;white-space:nowrap;
|
||
border:1px solid #fde68a;flex-shrink:0;
|
||
}
|
||
.zm-badge.ready{background:#d1fae5;color:#065f46;border-color:#a7f3d0;}
|
||
.zm-tool-group{display:flex;gap:6px;flex-shrink:0;}
|
||
.zm-draw-actions{margin-left:auto;}
|
||
.zm-row-label{
|
||
font-size:11px;font-weight:600;color:#64748b;white-space:nowrap;flex-shrink:0;
|
||
}
|
||
.zm-tool{
|
||
width:30px;height:30px;border:1px solid var(--c-border,#dcdfe6);border-radius:6px;cursor:pointer;
|
||
background:#fff;color:#64748b;font-size:13px;
|
||
display:flex;align-items:center;justify-content:center;transition:.15s;
|
||
}
|
||
.zm-tool:hover{color:#169F85;border-color:#169F85;background:#f0f9f6;}
|
||
.zm-tool-finish{color:#169F85;font-weight:700;}
|
||
.zm-tool-finish.active{background:#ecfdf5;border-color:#169F85;color:#0e7a65;}
|
||
|
||
.zm-canvas-box{
|
||
flex:1;display:flex;align-items:center;justify-content:center;
|
||
padding:12px 16px;min-height:200px;
|
||
background:var(--c-bg,#f1f5f9);
|
||
}
|
||
.draw-wrap{
|
||
position:relative;width:100%;max-width:100%;max-height:100%;
|
||
background:#fff;border-radius:8px;overflow:hidden;line-height:0;
|
||
border:1px solid var(--c-border,#e2e8f0);
|
||
box-shadow:0 2px 12px rgba(0,0,0,.06);
|
||
}
|
||
.draw-wrap img{display:block;width:100%;height:auto;max-height:34vh;object-fit:contain;margin:0 auto;background:#f8fafc;}
|
||
.zone-video-wrap{
|
||
position:relative;width:100%;min-height:200px;max-height:34vh;background:#0f172a;overflow:hidden;
|
||
}
|
||
.zone-video-wrap #zoneVideoPlayer{width:100%;height:100%;min-height:200px;max-height:34vh;}
|
||
.draw-wrap canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;z-index:2;pointer-events:auto;}
|
||
.zone-video-wrap #zoneVideoPlayer,
|
||
.zone-video-wrap #zoneVideoPlayer *{pointer-events:none;}
|
||
.zm-player-overlay{
|
||
position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||
background:rgba(15,23,42,.72);color:#e2e8f0;font-size:13px;gap:8px;pointer-events:none;
|
||
}
|
||
.zm-draw-modes{display:flex;gap:4px;flex-wrap:nowrap;align-items:center;flex-shrink:0;}
|
||
.zm-draw-modes .zm-tool.active{background:#169F85;color:#fff;border-color:#169F85;}
|
||
.zm-draw-modes .zm-tool-line.active{background:#dc2626;border-color:#dc2626;color:#fff;}
|
||
.zm-draw-modes .zm-tool-line:not(.active){color:#dc2626;border-color:#fecaca;}
|
||
.zm-draw-sep{width:1px;height:22px;background:#e2e8f0;margin:0 2px;flex-shrink:0;}
|
||
.zm-line-status{
|
||
font-size:11px;color:#64748b;flex:1;min-width:80px;
|
||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
||
}
|
||
@media(max-width:520px){
|
||
.zm-stage-row-draw .zm-line-status{flex-basis:100%;order:3;margin-left:0;}
|
||
.zm-draw-actions{margin-left:0;}
|
||
}
|
||
.draw-wrap.no-snap{
|
||
min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||
background:#fff;border:2px dashed #d1d5db;
|
||
color:var(--c-text-tertiary,#94a3b8);font-size:13px;line-height:1.7;
|
||
padding:28px 20px;text-align:center;box-shadow:none;
|
||
}
|
||
.draw-wrap.no-snap .zm-ph-icon{
|
||
font-size:32px;margin-bottom:8px;color:#169F85;opacity:.25;
|
||
}
|
||
|
||
.zm-hint-bar{
|
||
padding:8px 16px;font-size:11px;color:var(--c-text-secondary,#64748b);
|
||
background:#fff;border-top:1px solid var(--c-border-light,#eef2f5);
|
||
display:flex;align-items:center;gap:6px;
|
||
}
|
||
.zm-hint-bar svg{flex-shrink:0;opacity:.45;color:#169F85;}
|
||
|
||
/* 右侧：属性面板 */
|
||
.zm-panel{
|
||
width:248px;flex-shrink:0;background:#fff;
|
||
border-left:none;display:flex;flex-direction:column;
|
||
}
|
||
@media(max-width:860px){.zm-panel{width:100%;border-top:1px solid var(--c-border-light,#eef2f5);}}
|
||
.zm-panel-scroll{flex:1;overflow:auto;padding:12px 14px;}
|
||
.zm-field{margin-bottom:12px;}
|
||
.zm-field label{
|
||
display:block;font-size:12px;font-weight:600;color:#6b7280;
|
||
margin-bottom:5px;
|
||
}
|
||
.zm-field input,.zm-field select{
|
||
width:100%;padding:8px 10px;font-size:13px;
|
||
border:1px solid var(--c-border,#dcdfe6);border-radius:6px;background:#fff;color:#2c3e50;
|
||
transition:border-color .15s,box-shadow .15s;
|
||
}
|
||
.zm-field input:focus,.zm-field select:focus{
|
||
outline:none;border-color:#169F85;box-shadow:0 0 0 2px rgba(22,159,133,.12);
|
||
}
|
||
.zm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
|
||
.zm-colors{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
|
||
.zm-swatch{
|
||
width:24px;height:24px;border-radius:50%;border:2px solid #fff;
|
||
box-shadow:0 0 0 1px var(--c-border,#dcdfe6);cursor:pointer;transition:transform .12s;
|
||
}
|
||
.zm-swatch:hover{transform:scale(1.08);}
|
||
.zm-swatch.active{box-shadow:0 0 0 2px #169F85;}
|
||
.zm-color-input{width:32px;height:32px;padding:2px;border-radius:6px;border:1px solid var(--c-border,#dcdfe6);cursor:pointer;}
|
||
|
||
.zm-toggle-row{display:flex;gap:6px;}
|
||
.zm-toggle{
|
||
flex:1;padding:7px 4px;font-size:12px;text-align:center;border-radius:6px;
|
||
border:1px solid var(--c-border,#dcdfe6);background:#fff;color:#64748b;cursor:pointer;transition:.15s;
|
||
}
|
||
.zm-toggle:hover{border-color:#169F85;color:#169F85;}
|
||
.zm-toggle.active{border-color:#169F85;background:#ecfdf5;color:#0e7a65;font-weight:600;}
|
||
|
||
/* 算法多选 —— 卡片网格风格 */
|
||
.zm-algo-wrap{display:flex;flex-direction:column;gap:8px;}
|
||
.zm-algo-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(135deg,#f0f9f6 0%,#e6f7f1 100%);border:1px solid #c7ecd9;border-radius:8px;}
|
||
.zm-algo-bar .cnt{font-size:11px;font-weight:600;color:#0e7a65;flex:1;}
|
||
.zm-algo-bar .cnt b{font-size:13px;}
|
||
.zm-algo-bar .act{font-size:11px;color:#169F85;cursor:pointer;padding:2px 6px;border-radius:4px;transition:.12s;}
|
||
.zm-algo-bar .act:hover{background:#fff;color:#0e7a65;}
|
||
.zm-algo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:108px;overflow:auto;padding:2px;}
|
||
.zm-algo-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 10px 10px 12px;border:1.5px solid var(--c-border,#e2e8f0);border-radius:9px;background:#fff;cursor:pointer;transition:.15s;overflow:hidden;}
|
||
.zm-algo-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:.15s;}
|
||
.zm-algo-card:hover{border-color:#169F85;box-shadow:0 2px 8px rgba(22,159,133,.12);transform:translateY(-1px);}
|
||
.zm-algo-card.sel{border-color:#169F85;background:linear-gradient(135deg,#ecfdf5 0%,#f0f9f6 100%);}
|
||
.zm-algo-card.sel::before{background:#169F85;}
|
||
.zm-algo-card .check{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;border:1.5px solid #cbd5e1;background:#fff;display:flex;align-items:center;justify-content:center;transition:.15s;}
|
||
.zm-algo-card.sel .check{background:#169F85;border-color:#169F85;color:#fff;}
|
||
.zm-algo-card .check svg{width:10px;height:10px;opacity:0;transition:.15s;}
|
||
.zm-algo-card.sel .check svg{opacity:1;}
|
||
.zm-algo-card .nm{font-size:12px;font-weight:600;color:#1f2937;line-height:1.3;padding-right:18px;}
|
||
.zm-algo-card .meta{display:flex;gap:4px;flex-wrap:wrap;}
|
||
.zm-algo-card .tag-mini{font-size:9px;font-weight:600;padding:1px 5px;border-radius:3px;background:#e0f2fe;color:#075985;}
|
||
.zm-algo-card .tag-mini.eng{background:#ede9fe;color:#6d28d9;}
|
||
.zm-algo-card .tag-mini.task{background:#fef3c7;color:#92400e;}
|
||
.zm-algo-empty{grid-column:1/-1;font-size:12px;color:#9ca3af;text-align:center;padding:18px;border:1.5px dashed var(--c-border,#e2e8f0);border-radius:8px;background:#fafbfc;}
|
||
.zm-algo-empty .ic{font-size:20px;display:block;margin-bottom:6px;opacity:.5;}
|
||
|
||
/* 检测频率 — 单行紧凑 */
|
||
.zm-detect-box{
|
||
padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;
|
||
}
|
||
.zm-detect-formula{
|
||
display:grid;
|
||
grid-template-columns:auto 1fr auto auto 1fr auto;
|
||
align-items:center;gap:4px;
|
||
font-size:12px;color:#334155;white-space:nowrap;
|
||
}
|
||
.zm-detect-formula input{
|
||
width:100%;min-width:0;box-sizing:border-box;
|
||
padding:5px 4px;text-align:center;font-size:12px;font-weight:600;
|
||
border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#0f172a;
|
||
}
|
||
.zm-detect-formula input:focus{
|
||
outline:none;border-color:#169F85;box-shadow:0 0 0 2px rgba(22,159,133,.12);
|
||
}
|
||
.zm-detect-unit{font-size:12px;color:#64748b;flex-shrink:0;}
|
||
.zm-detect-preview{
|
||
margin-top:6px;font-size:11px;color:#64748b;line-height:1.4;
|
||
padding-top:5px;border-top:1px dashed #e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
||
}
|
||
|
||
.zone-modal-foot{
|
||
padding:12px 20px;border-top:1px solid var(--c-border-light,#eef2f5);
|
||
display:flex;justify-content:flex-end;gap:8px;
|
||
background:linear-gradient(135deg,#f8fbfa 0%,#f0f9f6 100%);
|
||
}
|
||
.btn{padding:8px 16px;font-size:13px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-weight:500;transition:.15s;}
|
||
.btn:hover{border-color:#169F85;color:#169F85;background:#f0fdf9;}
|
||
.btn-primary{background:linear-gradient(135deg,#14b89a,#169F85);color:#fff;border:none;box-shadow:0 2px 8px rgba(22,159,133,.35);}
|
||
.btn-primary:hover{background:linear-gradient(135deg,#169F85,#0e7a65);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,159,133,.4);}
|
||
.btn-ghost{background:transparent;border-color:transparent;color:#64748b;}
|
||
.btn-ghost:hover{background:#f1f5f9;color:#0f172a;border-color:transparent;}
|
||
|
||
/* 分析状态徽章 + 启停按钮 */
|
||
.analysis-badge{
|
||
display:inline-flex;align-items:center;gap:6px;
|
||
padding:4px 10px;font-size:11px;font-weight:600;border-radius:10px;
|
||
border:1px solid var(--c-border,#dcdfe6);background:#fff;color:#6b7280;white-space:nowrap;
|
||
}
|
||
.analysis-badge::before{
|
||
content:'';width:8px;height:8px;border-radius:50%;background:#9ca3af;flex-shrink:0;
|
||
}
|
||
.analysis-badge.running{background:#d1fae5;color:#065f46;border-color:#a7f3d0;}
|
||
.analysis-badge.running::before{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);animation:pulse 1.6s infinite;}
|
||
.analysis-badge.stopped{background:#f3f4f6;color:#6b7280;border-color:#e5e7eb;}
|
||
.analysis-badge.reconnecting{background:#fef3c7;color:#92400e;border-color:#fde68a;}
|
||
.analysis-badge.reconnecting::before{background:#f59e0b;animation:pulse 1.2s infinite;}
|
||
.analysis-badge.stalled{background:#fee2e2;color:#991b1b;border-color:#fecaca;}
|
||
.analysis-badge.stalled::before{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15);}
|
||
.tag-warn{background:#fef3c7;color:#92400e;}
|
||
.tag-err{background:#fee2e2;color:#991b1b;}
|
||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
|
||
.btn-analyze-start{color:#0e7a65;border-color:#169F85;}
|
||
.btn-analyze-start:hover{background:#ecfdf5;}
|
||
.btn-analyze-stop{color:#b91c1c;border-color:#fca5a5;}
|
||
.btn-analyze-stop:hover{background:#fef2f2;color:#b91c1c;border-color:#f87171;}
|
||
|
||
/* 操作列图标按钮（与视频管理一致） */
|
||
.zone-actions{display:flex;flex-wrap:nowrap;gap:2px;align-items:center;}
|
||
.act-btn{
|
||
width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;
|
||
background:transparent;color:#64748b;cursor:pointer;display:inline-flex;
|
||
align-items:center;justify-content:center;transition:.15s;flex-shrink:0;
|
||
}
|
||
.act-btn:hover{background:#f3f4f6;color:#169F85;}
|
||
.act-btn[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none;}
|
||
.act-btn.act-danger:hover{background:#fef2f2;color:#b91c1c;}
|
||
.act-btn.act-zone-on{color:#0e7a65;font-weight:700;}
|
||
.act-btn.act-zone-on:hover{background:#ecfdf5;}
|
||
.act-btn.act-zone-off{color:#94a3b8;}
|
||
.act-btn.act-zone-off:hover{background:#f1f5f9;color:#64748b;}
|
||
.act-btn.act-analyze-start:hover{background:#ecfdf5;color:#059669;}
|
||
.act-btn.act-analyze-stop{color:#dc2626;}
|
||
.act-btn.act-analyze-stop:hover{background:#fef2f2;color:#b91c1c;}
|
||
.act-btn.act-analyze-disabled{color:#94a3b8;opacity:.5;}
|
||
.act-btn.act-analyze-disabled:hover{background:#f1f5f9;color:#64748b;}
|
||
.act-btn svg{width:15px;height:15px;pointer-events:none;}
|
||
.act-btn.act-loading{color:#169F85;cursor:wait;pointer-events:none;background:#ecfdf5;border-color:#a7f3d0;}
|
||
.act-spin{animation:act-spin .8s linear infinite;}
|
||
@keyframes act-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
|
||
|
||
/* ========== 引擎实例管理弹框 ========== */
|
||
.engine-clickable{cursor:pointer;transition:color .15s;}
|
||
.engine-clickable:hover{color:#0e7a65 !important;text-decoration:underline;}
|
||
|
||
.engine-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);
|
||
display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;}
|
||
.engine-modal-overlay.open{display:flex;animation:emFadeIn .2s ease;}
|
||
@keyframes emFadeIn{from{opacity:0;}to{opacity:1;}}
|
||
.engine-modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.2);
|
||
width:min(720px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
|
||
animation:emSlideIn .25s cubic-bezier(.16,1,.3,1);}
|
||
@keyframes emSlideIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}
|
||
.engine-modal-head{padding:16px 22px;background:linear-gradient(135deg,#f8fbfa 0%,#f0f9f6 100%);
|
||
border-bottom:1px solid #eef2f5;display:flex;align-items:center;justify-content:space-between;}
|
||
.emh-title{display:flex;align-items:center;gap:10px;}
|
||
.emh-icon{width:32px;height:32px;border-radius:8px;background:#169F85;color:#fff;
|
||
display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
|
||
.engine-modal-head h3{margin:0;font-size:15px;font-weight:600;color:#1f2937;}
|
||
.emh-sub{font-size:12px;color:#6b7280;font-weight:400;margin-left:4px;}
|
||
.engine-modal-close{width:32px;height:32px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;
|
||
cursor:pointer;font-size:20px;color:#64748b;display:flex;align-items:center;justify-content:center;
|
||
transition:all .15s;line-height:1;}
|
||
.engine-modal-close:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2;}
|
||
.engine-modal-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px;}
|
||
.engine-loading{text-align:center;padding:40px;color:#9ca3af;font-size:13px;}
|
||
|
||
/* 配置卡 */
|
||
.em-section{margin-bottom:18px;}
|
||
.em-section-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;
|
||
letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
|
||
.em-section-title::before{content:'';width:3px;height:12px;background:#169F85;border-radius:2px;}
|
||
.em-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
|
||
.em-cfg-item{background:#f8fbfa;border:1px solid #eef2f5;border-radius:8px;padding:12px 14px;
|
||
display:flex;flex-direction:column;gap:6px;}
|
||
.em-cfg-item .lbl{font-size:11px;color:#6b7280;display:flex;align-items:center;justify-content:space-between;}
|
||
.em-cfg-item .lbl .hint{color:#9ca3af;}
|
||
.em-cfg-item .val{font-size:14px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:8px;}
|
||
.em-cfg-item .val .num{color:#169F85;font-size:18px;}
|
||
.em-cfg-actions{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
|
||
|
||
/* 开关 */
|
||
.em-switch{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer;flex-shrink:0;}
|
||
.em-switch input{opacity:0;width:0;height:0;}
|
||
.em-switch .slider{position:absolute;inset:0;background:#d1d5db;border-radius:20px;transition:.25s;}
|
||
.em-switch .slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;
|
||
background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
|
||
.em-switch input:checked + .slider{background:#169F85;}
|
||
.em-switch input:checked + .slider::before{transform:translateX(16px);}
|
||
|
||
/* worker 数量控制 */
|
||
.em-workers{display:flex;align-items:center;gap:4px;}
|
||
.em-workers button{width:26px;height:26px;border:1px solid #d1d5db;border-radius:6px;background:#fff;
|
||
cursor:pointer;font-size:14px;color:#374151;display:flex;align-items:center;justify-content:center;padding:0;}
|
||
.em-workers button:hover{border-color:#169F85;color:#169F85;background:#f0f9f6;}
|
||
.em-workers input{width:46px;text-align:center;font-size:13px;padding:3px 4px;border:1px solid #d1d5db;border-radius:6px;}
|
||
|
||
/* 按钮 */
|
||
.em-btn{padding:5px 12px;font-size:12px;border-radius:6px;border:1px solid #169F85;
|
||
background:#169F85;color:#fff;cursor:pointer;font-weight:500;transition:all .15s;
|
||
display:inline-flex;align-items:center;gap:4px;}
|
||
.em-btn:hover{background:#0e7a65;}
|
||
.em-btn:disabled{opacity:.5;cursor:not-allowed;}
|
||
.em-btn.ghost{background:#fff;color:#169F85;border-color:#169F85;}
|
||
.em-btn.ghost:hover{background:#f0f9f6;}
|
||
.em-btn.danger{background:#fff;color:#dc2626;border-color:#fecaca;}
|
||
.em-btn.danger:hover{background:#fef2f2;border-color:#dc2626;}
|
||
|
||
/* 实例卡片 */
|
||
.em-inst-list{display:flex;flex-direction:column;gap:10px;}
|
||
.em-inst{background:#fff;border:1px solid #eef2f5;border-radius:10px;padding:14px 16px;
|
||
transition:all .15s;}
|
||
.em-inst:hover{border-color:#169F85;box-shadow:0 2px 8px rgba(22,159,133,.08);}
|
||
.em-inst.disabled{opacity:.6;background:#f9fafb;}
|
||
.em-inst.disabled:hover{border-color:#d1d5db;box-shadow:none;}
|
||
.em-inst-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;}
|
||
.em-inst-name{font-size:14px;font-weight:600;color:#1f2937;display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
|
||
.em-inst-name .ic{width:6px;height:6px;border-radius:50%;background:#169F85;flex-shrink:0;}
|
||
.em-inst.disabled .em-inst-name .ic{background:#9ca3af;}
|
||
.em-inst-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
|
||
.em-tags{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;}
|
||
.em-tag{font-size:11px;padding:2px 8px;border-radius:10px;background:#f3f4f6;color:#475569;font-weight:500;}
|
||
.em-tag.engine{background:#dbeafe;color:#1e40af;}
|
||
.em-tag.device{background:#fef3c7;color:#92400e;}
|
||
.em-tag.task{background:#ede9fe;color:#6b21a8;}
|
||
.em-tag.count{background:#d1fae5;color:#065f46;}
|
||
.em-tag.input{background:#fce7f3;color:#9d174d;}
|
||
.em-inst-meta{font-size:12px;color:#6b7280;line-height:1.7;}
|
||
.em-inst-meta .row{display:flex;gap:6px;}
|
||
.em-inst-meta .k{color:#9ca3af;min-width:70px;flex-shrink:0;}
|
||
.em-inst-meta .v{color:#374151;word-break:break-all;}
|
||
.em-inst-meta .v Streams{color:#169F85;font-weight:500;}
|
||
|
||
/* 空状态 */
|
||
.em-empty{text-align:center;padding:40px 20px;color:#9ca3af;font-size:13px;
|
||
background:#f9fafb;border-radius:10px;border:1px dashed #e5e7eb;}
|
||
.em-empty .ic{display:block;font-size:32px;margin-bottom:8px;opacity:.4;}
|
||
|
||
/* 实时 YOLO 预览 */
|
||
.yolo-preview-modal{width:min(1180px,96vw);background:#0f172a;border-radius:12px;overflow:hidden;
|
||
box-shadow:0 24px 70px rgba(0,0,0,.35);color:#e2e8f0;display:flex;flex-direction:column;}
|
||
.yp-head{height:54px;padding:0 18px;background:#fff;color:#1f2937;display:flex;align-items:center;justify-content:space-between;}
|
||
.yp-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;}
|
||
.yp-live-dot{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.15);}
|
||
.yp-stage{position:relative;width:100%;aspect-ratio:16/9;background:#020617;overflow:hidden;}
|
||
#yoloPreviewPlayer,#yoloPreviewPlayer>*{width:100%;height:100%;}
|
||
#yoloPreviewCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;}
|
||
.yp-loading{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.72);color:#cbd5e1;}
|
||
.yp-foot{min-height:52px;padding:10px 16px;background:#111827;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
|
||
.yp-stat{font-size:12px;color:#cbd5e1;background:#1f2937;border:1px solid #334155;border-radius:14px;padding:4px 10px;}
|
||
.yp-mode{font-size:12px;font-weight:600;border-radius:14px;padding:4px 10px;background:#064e3b;color:#a7f3d0;}
|
||
.yp-mode.preview{background:#78350f;color:#fde68a;}
|
||
.act-btn.act-preview{color:#0f766e}.act-btn.act-preview:hover{background:#ecfdf5;color:#059669;}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="zone-page">
|
||
<div class="zone-card">
|
||
<div class="zone-head">
|
||
<h3><span class="dot"></span>{{ T.nav_control|default:'布控管理' }}</h3>
|
||
<div class="zone-toolbar">
|
||
<select id="filterStream" onchange="onFilterStreamChange()">
|
||
<option value="">{{ T.zone_all_cameras|default:'全部摄像头' }}</option>
|
||
</select>
|
||
<span id="analysisStatusBadge" class="analysis-badge" style="display:none"></span>
|
||
<button class="btn" onclick="loadZones()">{{ T.btn_refresh_symbol|default:'↻ 刷新' }}</button>
|
||
<button class="btn btn-primary" onclick="openZoneModal()">{{ T.btn_add_zone|default:'+ 添加布控' }}</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分析概览条 -->
|
||
<div class="zone-overview" id="zoneOverview" style="display:none">
|
||
<div class="ov-item"><span class="lbl">{{ T.zone_ov_total_cam|default:'摄像头总数' }}</span><span class="val" id="ovTotalCam">0</span></div>
|
||
<div class="ov-item"><span class="lbl">{{ T.zone_ov_running|default:'运行分析' }}</span><span class="val green" id="ovRunning">0 / 0</span><span class="sub" id="ovFps">{{ T.zone_ov_fps_avg|default:'平均 FPS 0.0' }}</span></div>
|
||
<div class="ov-item"><span class="lbl">{{ T.zone_ov_engine_instances|default:'布控实例' }}</span><span class="val blue engine-clickable" id="ovInstances" onclick="openEngineModal()" title="{{ T.zone_ctrl_modal_click|default:'点击管理布控实例' }}">0</span><span class="sub engine-clickable" id="ovReuse" onclick="openEngineModal()">{{ T.zone_ov_reuse|default:'全部按算法缓存复用' }}</span></div>
|
||
<div class="ov-item"><span class="lbl">{{ T.zone_ov_zones|default:'布控 / 运行中' }}</span><span class="val" id="ovZones">0 / 0</span></div>
|
||
<div class="ov-item"><span class="lbl">{{ T.zone_ov_alarms|default:'近期报警' }}</span><span class="val red" id="ovAlarms">0</span></div>
|
||
</div>
|
||
|
||
<div class="zone-body" id="zoneBodyWrap">
|
||
<table class="zone-table" id="zoneTable">
|
||
<thead>
|
||
<tr>
|
||
<th>{{ T.th_id|default:'ID' }}</th><th>{{ T.zone_camera|default:'摄像头' }}</th><th>{{ T.zone_name|default:'布控名称' }}</th>
|
||
<th>{{ T.zone_algorithms|default:'业务算法' }}</th>
|
||
<th>{{ T.zone_detect_rate|default:'检测频率' }}</th>
|
||
<th>{{ T.zone_required|default:'必需' }}</th><th>{{ T.zone_loiter|default:'滞留(秒)' }}</th>
|
||
<th>{{ T.zone_state|default:'状态' }}</th>
|
||
<th>{{ T.col_action|default:'操作' }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="zoneBody"></tbody>
|
||
</table>
|
||
<div id="zoneEmpty" class="zone-empty" style="display:none">
|
||
<span class="ic">○</span><span>{{ T.camera_no_data|default:'暂无数据' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 报警面板已迁移至 /alarm/index 报警管理页面 -->
|
||
</div>
|
||
|
||
<div class="zone-modal-overlay" id="zoneModal" onclick="if(event.target===this)closeZoneModal()">
|
||
<div class="zone-modal" role="dialog">
|
||
<div class="zone-modal-head">
|
||
<div>
|
||
<h3 class="zm-title" id="zoneModalTitle">{{ T.btn_add_zone|default:'添加布控' }}</h3>
|
||
<p class="zm-sub" id="zoneModalSub">{{ T.zone_draw_hint|default:'在摄像头画面上点击绘制多边形区域' }}</p>
|
||
</div>
|
||
<button type="button" class="zone-modal-close" onclick="closeZoneModal()" aria-label="close">×</button>
|
||
</div>
|
||
|
||
<div class="zone-modal-body">
|
||
<input type="hidden" id="f_id">
|
||
|
||
<!-- 左侧画布 -->
|
||
<div class="zm-stage">
|
||
<div class="zm-stage-bar">
|
||
<div class="zm-stage-row zm-stage-row-video">
|
||
<select id="f_stream" class="zm-stream-select" onchange="onStreamChange()"></select>
|
||
<button type="button" class="zm-tool" onclick="refreshLivePreview()" title="{{ T.zone_refresh_live|default:'重新连接视频' }}">↻</button>
|
||
</div>
|
||
<div class="zm-stage-row zm-stage-row-draw" id="drawToolRow">
|
||
<span class="zm-row-label">{{ T.zone_draw_tools|default:'绘制' }}</span>
|
||
<div class="zm-tool-group zm-draw-modes" id="drawModeBar">
|
||
<button type="button" class="zm-tool active" data-mode="rect" onclick="setDrawMode('rect')" title="{{ T.zone_draw_rect|default:'矩形区域' }}">▭</button>
|
||
<button type="button" class="zm-tool" data-mode="polygon" onclick="setDrawMode('polygon')" title="{{ T.zone_draw_polygon|default:'多边形' }}">⬠</button>
|
||
<span class="zm-draw-sep" aria-hidden="true"></span>
|
||
<button type="button" class="zm-tool zm-tool-line" data-mode="line" id="btnDrawLine" onclick="setDrawMode('line')" title="{{ T.zone_draw_line|default:'方向线 A→B' }}">→</button>
|
||
</div>
|
||
<span class="zm-badge" id="pointStatus">{{ T.zone_no_points|default:'0 个点' }}</span>
|
||
<span class="zm-line-status" id="lineStatus"></span>
|
||
<div class="zm-tool-group zm-draw-actions">
|
||
<button type="button" class="zm-tool" onclick="undoPoint()" title="{{ T.zone_undo|default:'撤销' }}">↩</button>
|
||
<button type="button" class="zm-tool" onclick="clearCurrentDraw()" title="{{ T.zone_clear_current|default:'清除当前图形' }}">⌫</button>
|
||
<button type="button" class="zm-tool zm-tool-finish" id="btnFinishDraw" onclick="finishDraw()" title="{{ T.zone_finish_draw|default:'完成绘制' }}">✓</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="zm-canvas-box">
|
||
<div class="draw-wrap no-snap" id="drawWrap">
|
||
<span class="zm-ph-icon">▣</span>
|
||
<span id="drawPlaceholder">{{ T.zone_select_camera_first|default:'正在加载摄像头画面…' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="zm-hint-bar">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||
<span id="drawHintText">{{ T.zone_draw_tip_three|default:'三种图形可叠加：▭ 矩形 · ⬠ 多边形 · → 方向线 A→B（箭头为正向）· 右键撤销当前工具' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧属性 -->
|
||
<div class="zm-panel">
|
||
<div class="zm-panel-scroll">
|
||
<div class="zm-field">
|
||
<label>{{ T.zone_name|default:'布控名称' }}</label>
|
||
<input id="f_name" placeholder="{{ T.zone_name_ph|default:'如：大门口、停车场入口' }}">
|
||
</div>
|
||
<div class="zm-field">
|
||
<label>{{ T.zone_color|default:'区域颜色' }}</label>
|
||
<div class="zm-colors">
|
||
<span class="zm-swatch active" data-color="#169F85" style="background:#169F85" onclick="pickColor(this)"></span>
|
||
<span class="zm-swatch" data-color="#2563eb" style="background:#2563eb" onclick="pickColor(this)"></span>
|
||
<span class="zm-swatch" data-color="#dc2626" style="background:#dc2626" onclick="pickColor(this)"></span>
|
||
<span class="zm-swatch" data-color="#d97706" style="background:#d97706" onclick="pickColor(this)"></span>
|
||
<span class="zm-swatch" data-color="#7c3aed" style="background:#7c3aed" onclick="pickColor(this)"></span>
|
||
<input id="f_color" type="color" class="zm-color-input" value="#169F85" onchange="onColorInput()">
|
||
</div>
|
||
</div>
|
||
<div class="zm-field-row">
|
||
<div class="zm-field">
|
||
<label>{{ T.zone_loiter|default:'滞留阈值' }}</label>
|
||
<input id="f_loiter" type="number" value="0" min="0" placeholder="秒">
|
||
</div>
|
||
<div class="zm-field">
|
||
<label>{{ T.zone_required|default:'必需区域' }}</label>
|
||
<div class="zm-toggle-row" id="reqToggle">
|
||
<button type="button" class="zm-toggle" data-val="0" onclick="setToggle('reqToggle',0,'f_required');onRequiredChange()">{{ T.zone_no|default:'否' }}</button>
|
||
<button type="button" class="zm-toggle active" data-val="1" onclick="setToggle('reqToggle',1,'f_required');onRequiredChange()">{{ T.zone_yes|default:'是' }}</button>
|
||
</div>
|
||
<input type="hidden" id="f_required" value="1">
|
||
<div class="biz-hint" id="zoneRequiredHint" style="margin-top:6px;font-size:11px;color:#64748b;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="zm-field">
|
||
<label>{{ T.zone_detect_rate|default:'算法检测频率' }}</label>
|
||
<div class="zm-detect-box">
|
||
<div class="zm-detect-formula">
|
||
<span class="zm-detect-unit">{{ T.zone_detect_every|default:'每' }}</span>
|
||
<input type="number" id="f_detect_interval" value="1" min="0.1" max="86400" step="any"
|
||
oninput="updateDetectPreview()" title="{{ T.zone_detect_interval_tip|default:'时间间隔(秒)，支持小数' }}">
|
||
<span class="zm-detect-unit">{{ T.zone_detect_sec|default:'秒' }}</span>
|
||
<span class="zm-detect-unit">{{ T.zone_detect_analyze|default:'分析' }}</span>
|
||
<input type="number" id="f_detect_frames" value="1" min="1" max="999" step="1"
|
||
oninput="updateDetectPreview()" title="{{ T.zone_detect_frames_tip|default:'分析帧数' }}">
|
||
<span class="zm-detect-unit">{{ T.zone_detect_frame_unit|default:'帧' }}</span>
|
||
</div>
|
||
<div class="zm-detect-preview" id="detectPreview"></div>
|
||
</div>
|
||
</div>
|
||
<div class="zm-field">
|
||
<label>重复报警间隔（秒）</label>
|
||
<input id="f_alarm_repeat" type="number" value="30" min="0" max="86400" step="1"
|
||
title="0 表示同一次停留不重复报警；离开后重新进入仍会立即报警">
|
||
<div class="biz-hint" style="margin-top:5px;font-size:11px;color:#64748b;">首次进入立即报警；0 表示同一次停留只报一次</div>
|
||
</div>
|
||
<div class="zm-field">
|
||
<label>{{ T.zone_algorithms|default:'业务算法' }} <span style="font-weight:400;color:#9ca3af;font-size:11px;">({{ T.zone_algorithms_hint|default:'可多选' }})</span></label>
|
||
<div class="zm-algo-wrap">
|
||
<div class="zm-algo-bar">
|
||
<span class="cnt" id="algoCount">{{ T.zone_algorithms_selected|default:'已选 {n} 个业务算法' }}</span>
|
||
<span class="act" onclick="algoSelectAll(true)">{{ T.alg_select_all|default:'全选' }}</span>
|
||
<span class="act" onclick="algoSelectAll(false)">{{ T.alg_select_none|default:'清空' }}</span>
|
||
</div>
|
||
<div class="zm-algo-grid" id="algoList">
|
||
<span style="color:#9ca3af;font-size:12px;grid-column:1/-1;">{{ T.index_loading|default:'加载中...' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zone-modal-foot">
|
||
<button type="button" class="btn btn-ghost" onclick="closeZoneModal()">{{ T.cancel|default:'取消' }}</button>
|
||
<button type="button" class="btn btn-primary" onclick="submitZone()">{{ T.btn_save|default:'保存' }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实时 YOLO 检测弹框 -->
|
||
<div class="engine-modal-overlay" id="yoloPreviewModal" onclick="if(event.target===this)closeYoloPreview()">
|
||
<div class="yolo-preview-modal" role="dialog" aria-modal="true" aria-label="实时 YOLO 检测">
|
||
<div class="yp-head">
|
||
<div class="yp-title"><span class="yp-live-dot"></span><span id="ypTitle">实时 YOLO 人员检测</span></div>
|
||
<button type="button" class="engine-modal-close" onclick="closeYoloPreview()" aria-label="close">×</button>
|
||
</div>
|
||
<div class="yp-stage" id="yoloPreviewStage">
|
||
<div id="yoloPreviewPlayer"></div>
|
||
<canvas id="yoloPreviewCanvas"></canvas>
|
||
<div class="yp-loading" id="ypLoading">正在启动 YOLO 分析并连接视频流…</div>
|
||
</div>
|
||
<div class="yp-foot">
|
||
<span class="yp-mode preview" id="ypMode">预览模式，不产生报警</span>
|
||
<span class="yp-stat" id="ypModel">模型：—</span>
|
||
<span class="yp-stat" id="ypFps">分析 FPS：0.00</span>
|
||
<span class="yp-stat" id="ypAge">结果延迟：—</span>
|
||
<span class="yp-stat" id="ypCount">当前人员：0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 布控实例管理弹框 -->
|
||
<div class="engine-modal-overlay" id="engineModal" onclick="if(event.target===this)closeEngineModal()">
|
||
<div class="engine-modal" role="dialog">
|
||
<div class="engine-modal-head">
|
||
<div class="emh-title">
|
||
<span class="emh-icon">⚙</span>
|
||
<h3>{{ T.zone_ctrl_modal_title|default:'布控实例管理' }}</h3>
|
||
<span class="emh-sub" id="engineModalSub"></span>
|
||
</div>
|
||
<button type="button" class="engine-modal-close" onclick="closeEngineModal()" aria-label="close">×</button>
|
||
</div>
|
||
<div class="engine-modal-body" id="engineModalBody">
|
||
<div class="engine-loading">加载中...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script src="{% static 'lib/easyPlayer/js/easyplayer-pro.js' %}"></script>
|
||
<script>
|
||
function onFilterStreamChange(){
|
||
loadZonePageData();
|
||
}
|
||
|
||
function getStreamStatusInfo(streamId){
|
||
streamId = parseInt(streamId, 10) || 0;
|
||
if(!streamId) return null;
|
||
for(var i=0;i<g_runningStreams.length;i++){
|
||
var r = g_runningStreams[i];
|
||
if(typeof r === 'object' && r.stream_id === streamId) return r;
|
||
}
|
||
return null;
|
||
}
|
||
|
||
function isStreamAnalysisRunning(streamId){
|
||
var info = getStreamStatusInfo(streamId);
|
||
if(!info) return false;
|
||
return info.running !== false && info.stream_health !== 'stopped';
|
||
}
|
||
|
||
function getStreamHealth(streamId){
|
||
var info = getStreamStatusInfo(streamId);
|
||
if(!info) return 'stopped';
|
||
return info.stream_health || (info.running ? 'ok' : 'stopped');
|
||
}
|
||
|
||
function streamHealthLabel(health){
|
||
if(health === 'ok') return _t('zone_health_ok','正常');
|
||
if(health === 'reconnecting' || health === 'connecting') return _t('zone_health_reconnecting','重连中');
|
||
if(health === 'disconnected') return _t('zone_health_disconnected','视频断开');
|
||
if(health === 'stalled') return _t('zone_health_stalled','视频中断');
|
||
return _t('zone_analysis_stopped','分析未启动');
|
||
}
|
||
|
||
function streamHealthBadgeClass(health){
|
||
if(health === 'ok') return 'running';
|
||
if(health === 'reconnecting' || health === 'connecting') return 'reconnecting';
|
||
if(health === 'stalled' || health === 'disconnected') return 'stalled';
|
||
return 'stopped';
|
||
}
|
||
|
||
var g_healthToastShown = {};
|
||
|
||
function maybeNotifyStreamHealth(streamId, health){
|
||
streamId = parseInt(streamId, 10) || 0;
|
||
if(!streamId) return;
|
||
var key = streamId + ':' + health;
|
||
if(health === 'stalled' || health === 'disconnected'){
|
||
if(!g_healthToastShown[key]){
|
||
g_healthToastShown[key] = true;
|
||
showToast(_t('zone_health_stalled_toast','视频流中断，分析已停止工作，请手动重启分析'), 'warning', 6000);
|
||
}
|
||
} else if(health === 'ok'){
|
||
g_healthToastShown = {};
|
||
}
|
||
}
|
||
|
||
function refreshAnalysisUI(){
|
||
var sid = parseInt(document.getElementById('filterStream').value, 10) || 0;
|
||
var badge = document.getElementById('analysisStatusBadge');
|
||
if(!sid){
|
||
badge.style.display = 'inline-flex';
|
||
var n = g_runningStreams.filter(function(r){
|
||
return typeof r === 'object' && r.running !== false && r.healthy;
|
||
}).length;
|
||
badge.className = 'analysis-badge ' + (n>0?'running':'stopped');
|
||
badge.textContent = _t('zone_analysis_running_count','分析中：{n}').replace('{n}', n);
|
||
return;
|
||
}
|
||
var info = null;
|
||
for(var i=0;i<g_runningStreams.length;i++){
|
||
var r = g_runningStreams[i];
|
||
if((typeof r === 'object' && r.stream_id===sid) || r===sid){ info = (typeof r==='object'?r:null); break; }
|
||
}
|
||
var running = !!info && info.running !== false;
|
||
var health = info ? (info.stream_health || 'ok') : 'stopped';
|
||
badge.style.display = 'inline-flex';
|
||
badge.className = 'analysis-badge ' + streamHealthBadgeClass(running ? health : 'stopped');
|
||
var algName = info && info.algorithm_name ? ' · ' + info.algorithm_name : '';
|
||
var fpsStr = '';
|
||
if(info && info.analysis_fps !== undefined){
|
||
fpsStr = ' · ' + (info.analysis_fps||0).toFixed(1) + ' fps';
|
||
}
|
||
var healthStr = running ? (' · ' + streamHealthLabel(health)) : '';
|
||
if(info && (info.analysis_health === 'error' || info.analysis_health === 'stalled')){
|
||
healthStr = ' · ' + _t('zone_status_inference_error','推理异常');
|
||
badge.className = 'analysis-badge stalled';
|
||
} else if(info && info.analysis_health === 'starting'){
|
||
healthStr = ' · ' + _t('zone_status_starting','启动中');
|
||
badge.className = 'analysis-badge reconnecting';
|
||
}
|
||
if(g_lastAnalysisData && g_lastAnalysisData.inference_degraded && running){
|
||
healthStr += ' · ' + _t('zone_inference_degraded','推理异常');
|
||
if(health === 'ok') badge.className = 'analysis-badge stalled';
|
||
}
|
||
if(running && (health === 'stalled' || health === 'disconnected') && info.stalled_sec){
|
||
healthStr += ' (' + Math.round(info.stalled_sec) + 's)';
|
||
}
|
||
badge.textContent = (running ? _t('zone_analysis_running','分析运行中') : _t('zone_analysis_stopped','分析未启动'))
|
||
+ healthStr + algName + fpsStr;
|
||
if(g_lastAnalysisData && g_lastAnalysisData.inference_degraded){
|
||
if(!g_healthToastShown.infer){
|
||
g_healthToastShown.infer = true;
|
||
showToast(_t('zone_inference_degraded_toast','目标检测推理超时，布控无法正常报警，请重启分析或检查小模型'), 'error', 8000);
|
||
}
|
||
}
|
||
if(running) maybeNotifyStreamHealth(sid, health);
|
||
}
|
||
|
||
var SVG_ANALYZE_START = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none"/></svg>';
|
||
var SVG_ANALYZE_STOP = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>';
|
||
var SVG_PREVIEW = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M8 20v2m8-2v2"/></svg>';
|
||
var SVG_EDIT = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
|
||
var SVG_DEL = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>';
|
||
var SVG_LOADING = '<svg class="act-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round"/></svg>';
|
||
|
||
function getActiveZoneIds(streamId){
|
||
streamId = parseInt(streamId, 10) || 0;
|
||
if(!streamId) return [];
|
||
var info = getStreamStatusInfo(streamId);
|
||
if(!info || !info.active_zone_ids) return [];
|
||
return info.active_zone_ids.map(function(x){ return parseInt(x, 10); });
|
||
}
|
||
|
||
function zoneIsActiveInPipeline(z){
|
||
if(!z || z.id == null) return false;
|
||
var ids = getActiveZoneIds(z.stream_id);
|
||
return ids.indexOf(parseInt(z.id, 10)) >= 0;
|
||
}
|
||
|
||
function zoneIsRunning(z){
|
||
if(!zoneIsActiveInPipeline(z)) return false;
|
||
var info = getStreamStatusInfo(z.stream_id);
|
||
if(!info || info.running === false) return false;
|
||
return true;
|
||
}
|
||
|
||
function buildZoneStateTag(z){
|
||
if(!zoneIsActiveInPipeline(z)){
|
||
return '<span class="tag tag-off">'+_t('zone_status_stopped','已停止')+'</span>';
|
||
}
|
||
var info = getStreamStatusInfo(z.stream_id);
|
||
if(!info){
|
||
return '<span class="tag tag-warn">'+_t('zone_status_starting','启动中')+'</span>';
|
||
}
|
||
if(info.analysis_health === 'error' || info.analysis_health === 'stalled'){
|
||
return '<span class="tag tag-err">'+_t('zone_status_inference_error','推理异常')+'</span>';
|
||
}
|
||
var health = getStreamHealth(z.stream_id);
|
||
var fps = info.analysis_fps != null ? info.analysis_fps : 0;
|
||
if(health === 'stalled' || health === 'disconnected'){
|
||
return '<span class="tag tag-err">'+streamHealthLabel(health)+'</span>';
|
||
}
|
||
if(health === 'reconnecting' || health === 'connecting'){
|
||
return '<span class="tag tag-warn">'+streamHealthLabel(health)+'</span>';
|
||
}
|
||
if(info.running !== false && health === 'ok' &&
|
||
(info.analysis_health === 'running' || (!info.analysis_health && fps > 0.05))){
|
||
return '<span class="tag tag-on">'+_t('zone_status_running','分析中')+'</span>';
|
||
}
|
||
return '<span class="tag tag-warn">'+_t('zone_status_starting','启动中')+'</span>';
|
||
}
|
||
|
||
function buildZoneRunBtn(z){
|
||
var running = zoneIsRunning(z);
|
||
var title = running ? _t('zone_stop','停止此布控') : _t('zone_start','启动此布控');
|
||
var cls = running ? 'act-analyze-stop' : 'act-analyze-start';
|
||
var icon = running ? SVG_ANALYZE_STOP : SVG_ANALYZE_START;
|
||
var en = running ? 0 : 1;
|
||
return '<button type="button" class="act-btn '+cls+'" data-zone="'+z.id+'" data-stream="'+z.stream_id+'" onclick="toggleZone('+z.id+','+en+')" title="'+escapeHtml(title)+'">'+icon+'</button>';
|
||
}
|
||
|
||
function refreshZoneRowButtons(){
|
||
g_zoneCache.forEach(function(z){
|
||
var tr = document.querySelector('#zoneBody tr[data-zone-id="'+z.id+'"]');
|
||
if(!tr) return;
|
||
var slot = tr.querySelector('.zone-run-btn');
|
||
if(slot) slot.innerHTML = buildZoneRunBtn(z);
|
||
var stateCell = tr.querySelector('.zone-state-cell');
|
||
if(stateCell) stateCell.innerHTML = buildZoneStateTag(z);
|
||
});
|
||
}
|
||
|
||
function toggleZone(zoneId, enabled){
|
||
zoneId = parseInt(zoneId, 10) || 0;
|
||
enabled = enabled ? 1 : 0;
|
||
if(!zoneId || g_zoneTogglePending[zoneId]) return;
|
||
var z = g_zoneCache.find(function(x){ return x.id === zoneId; });
|
||
if(!z) return;
|
||
var btn = document.querySelector('.act-btn[data-zone="'+zoneId+'"]');
|
||
var origHTML = btn ? btn.innerHTML : '';
|
||
var origTitle = btn ? btn.getAttribute('title') : '';
|
||
var origClass = btn ? btn.className : '';
|
||
if(btn){
|
||
btn.disabled = true;
|
||
btn.classList.add('act-loading');
|
||
btn.classList.remove('act-analyze-start','act-analyze-stop','act-analyze-disabled');
|
||
btn.innerHTML = SVG_LOADING;
|
||
}
|
||
g_zoneTogglePending[zoneId] = true;
|
||
var actionLabel = enabled ? _t('zone_start','启动此布控') : _t('zone_stop','停止此布控');
|
||
showToast(actionLabel + '...', 'info', 1500);
|
||
Api.post('/control/openToggleZone', {id: zoneId, enabled: enabled}).then(function(res){
|
||
if(!res){
|
||
showToast(_t('msg_unknown_error','失败'),'error');
|
||
return;
|
||
}
|
||
var ok = res.code === 1000;
|
||
showToast(res.msg || (ok ? _t('msg_success','成功') : _t('msg_unknown_error','失败')), ok ? 'success' : 'error');
|
||
if(ok){
|
||
z.state = (res.data && res.data.state != null) ? res.data.state : enabled;
|
||
refreshZoneRowButtons();
|
||
updateZoneOverviewFromList(g_zoneCache);
|
||
refreshZonePageState();
|
||
}
|
||
}).catch(function(){
|
||
showToast(_t('msg_unknown_error','网络错误'),'error');
|
||
}).then(function(){
|
||
if(btn && btn.parentNode){
|
||
btn.disabled = false;
|
||
btn.classList.remove('act-loading');
|
||
btn.className = origClass;
|
||
btn.innerHTML = origHTML;
|
||
btn.setAttribute('title', origTitle);
|
||
}
|
||
delete g_zoneTogglePending[zoneId];
|
||
});
|
||
}
|
||
|
||
function refreshZonePageState(){
|
||
loadZonePageData();
|
||
}
|
||
|
||
function applyOverviewFromAnalysis(d){
|
||
if(!d){ document.getElementById('zoneOverview').style.display='none'; return; }
|
||
document.getElementById('zoneOverview').style.display='flex';
|
||
document.getElementById('ovTotalCam').textContent=d.total_streams||0;
|
||
var rc=d.running_count||0, ts=d.total_streams||0;
|
||
document.getElementById('ovRunning').textContent=rc+' / '+ts;
|
||
var fpsTxt = _t('zone_ov_fps_avg','平均 FPS')+': '+(d.analysis_fps_avg||0);
|
||
if(d.inference_degraded){
|
||
fpsTxt += ' · '+_t('zone_inference_degraded','推理异常');
|
||
}
|
||
document.getElementById('ovFps').textContent=fpsTxt;
|
||
document.getElementById('ovInstances').textContent=d.engine_instance_total||0;
|
||
var usage=d.engine_instances||[];
|
||
var reuseTxt='';
|
||
if(d.inference_shared){
|
||
var w = d.inference_workers_alive||0;
|
||
reuseTxt = _t('zone_ov_shared_infer','共享推理池 · {n} worker').replace('{n}', w);
|
||
if(usage.length>0){
|
||
reuseTxt += ' · ' + usage.map(function(u){return u.algorithm_name||('#'+u.algorithm_id);}).join('、');
|
||
}
|
||
} else if(usage.length===0){
|
||
reuseTxt=_t('zone_ov_no_instance','暂无布控实例');
|
||
} else {
|
||
var shared=usage.filter(function(u){return u.stream_count>1;});
|
||
if(shared.length===0){ reuseTxt=_t('zone_ov_each_stream','每路摄像头各实例化一份'); }
|
||
else{
|
||
reuseTxt=shared.map(function(u){return u.algorithm_name+' × '+u.stream_count+_t('zone_ov_streams','路');}).join('，');
|
||
}
|
||
}
|
||
document.getElementById('ovReuse').textContent=reuseTxt;
|
||
}
|
||
|
||
function fetchAnalysisStatus(){
|
||
Api.get('/analysis/openStatus', {lite: 1}).then(function(res){
|
||
if(res && res.code===1000 && res.data){
|
||
g_runningStreams = res.data.running_streams || [];
|
||
g_lastAnalysisData = res.data;
|
||
applyOverviewFromAnalysis(res.data);
|
||
refreshAnalysisUI();
|
||
refreshZoneRowButtons();
|
||
if(document.getElementById('engineModal').classList.contains('open')){
|
||
renderEngineModal(res.data);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function startAnalysisPolling(){
|
||
if(g_analysisPollTimer) clearInterval(g_analysisPollTimer);
|
||
g_analysisPollTimer = setInterval(fetchAnalysisStatus, 5000);
|
||
}
|
||
var g_streams = [];
|
||
var g_points = []; // 归一化坐标 [[nx,ny],...]
|
||
var g_drawFinished = false; // 多边形是否已完成（停止继续加点）
|
||
var g_imgNatural = {w:0,h:0};
|
||
var g_zonePlayer = null;
|
||
var g_liveSeq = 0;
|
||
var g_liveContext = { app: '', name: '' };
|
||
var g_runningStreams = [];
|
||
var g_zoneTogglePending = {};
|
||
var g_algorithms = []; // 可选业务算法列表
|
||
var g_analysisPollTimer = null;
|
||
var g_zoneCache = [];
|
||
var g_lastAnalysisData = null; // 最近一次分析状态数据（供引擎实例弹框使用）
|
||
var g_drawMode = 'rect'; // rect | polygon | line
|
||
var g_linePoints = []; // [[x,y],[x,y]] 归一化方向线 A→B
|
||
var g_rectPending = null; // 矩形模式第一个角点
|
||
|
||
function setDrawMode(mode){
|
||
mode = mode || 'rect';
|
||
g_drawMode = mode;
|
||
document.querySelectorAll('#drawModeBar .zm-tool[data-mode]').forEach(function(b){
|
||
b.classList.toggle('active', b.getAttribute('data-mode') === g_drawMode);
|
||
});
|
||
if(g_drawMode === 'rect'){
|
||
g_rectPending = null;
|
||
if(g_points.length >= 4) g_drawFinished = true;
|
||
}
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
updateDrawGeometryUI();
|
||
redraw();
|
||
}
|
||
|
||
function isRegionDrawingComplete(){
|
||
if(!needsRegionDrawing()) return true;
|
||
if(g_points.length >= 4) return true;
|
||
return g_points.length >= 3 && g_drawFinished;
|
||
}
|
||
|
||
function isZoneRequired(){
|
||
return parseInt(document.getElementById('f_required').value, 10) === 1;
|
||
}
|
||
|
||
function getSelectedAlgos(){
|
||
var ids = getSelectedAlgoIds();
|
||
return (g_algorithms || []).filter(function(a){ return ids.indexOf(a.id) >= 0; });
|
||
}
|
||
|
||
function isLinePost(post){
|
||
return post === 'LINE_CROSS' || post === 'LINE_COUNT';
|
||
}
|
||
|
||
function isRegionPost(post){
|
||
return ['AREA','DWELL','DENSITY','DIRECTION'].indexOf(post) >= 0;
|
||
}
|
||
|
||
function needsLineGeometry(){
|
||
return getSelectedAlgos().some(function(a){ return isLinePost(a.post_process); });
|
||
}
|
||
|
||
function needsRegionGeometry(){
|
||
if(!isZoneRequired()) return false;
|
||
var algos = getSelectedAlgos();
|
||
if(!algos.length) return true;
|
||
if(algos.some(function(a){ return isRegionPost(a.post_process); })) return true;
|
||
if(needsLineGeometry()) return true;
|
||
return false;
|
||
}
|
||
|
||
function syncRequiredForAlgos(showTip){
|
||
var algos = getSelectedAlgos();
|
||
if(!algos.length) return;
|
||
var hasRegionPost = algos.some(function(a){ return isRegionPost(a.post_process); });
|
||
var lineOnly = algos.length > 0 && algos.every(function(a){ return isLinePost(a.post_process); });
|
||
if(hasRegionPost){
|
||
if(!isZoneRequired()){
|
||
setToggleValue('reqToggle', 1, 'f_required');
|
||
onRequiredChange();
|
||
if(showTip) showToast(_t('zone_auto_required_on','已自动开启「必需区域」'), 'info', 2500);
|
||
}
|
||
} else if(lineOnly){
|
||
if(isZoneRequired()){
|
||
setToggleValue('reqToggle', 0, 'f_required');
|
||
onRequiredChange();
|
||
if(showTip) showToast(_t('zone_auto_required_off_line','越线类算法仅需方向线，已自动关闭「必需区域」'), 'info', 3500);
|
||
}
|
||
}
|
||
}
|
||
|
||
function onRequiredChange(){
|
||
updateRequiredHint();
|
||
updateDrawGeometryUI();
|
||
updatePointStatus();
|
||
}
|
||
|
||
function updateRequiredHint(){
|
||
var el = document.getElementById('zoneRequiredHint');
|
||
if(!el) return;
|
||
if(isZoneRequired()){
|
||
el.textContent = _t('zone_required_on_hint','开启：目标须在布控区域内才触发后处理；越线类算法仍需绘制方向线');
|
||
el.style.color = '#64748b';
|
||
} else {
|
||
el.textContent = _t('zone_required_off_hint','关闭：不校验/不依赖布控区域，越线类算法仅需绘制方向线');
|
||
el.style.color = '#1d4ed8';
|
||
}
|
||
}
|
||
|
||
function validateZoneDrawing(){
|
||
var algoIds = getSelectedAlgoIds();
|
||
if(!algoIds.length){
|
||
showToast(_t('zone_algo_required','请至少选择一个业务算法'),'warning');
|
||
return false;
|
||
}
|
||
var algos = getSelectedAlgos();
|
||
var hasLine = needsLineGeometry();
|
||
var hasRegionPost = algos.some(function(a){ return isRegionPost(a.post_process); });
|
||
|
||
if(hasRegionPost && !isZoneRequired()){
|
||
showToast(_t('zone_region_post_need_required','区域类后处理需开启「必需区域」并绘制区域'),'warning');
|
||
return false;
|
||
}
|
||
if(hasLine && g_linePoints.length < 2){
|
||
showToast(_t('zone_line_required','越线类算法需绘制方向线 A→B'),'warning');
|
||
setDrawMode('line');
|
||
return false;
|
||
}
|
||
if(needsRegionDrawing() && g_points.length < 3){
|
||
if(hasLine && !hasRegionPost){
|
||
showToast(_t('zone_line_only_need_region_or_off',
|
||
'越线类算法：请绘制 ▭/⬠ 区域，或关闭「必需区域」后仅保留方向线'), 'warning', 4500);
|
||
} else {
|
||
showToast(_t('zone_draw_min_points','至少绘制 3 个点（矩形或多边形）'),'warning');
|
||
}
|
||
setDrawMode(g_points.length === 4 ? 'rect' : (g_drawMode === 'line' ? 'rect' : g_drawMode));
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function parseLinePoint(raw){
|
||
if(!raw) return null;
|
||
if(Array.isArray(raw) && raw.length >= 2) return [parseFloat(raw[0]), parseFloat(raw[1])];
|
||
try{
|
||
var arr = typeof raw === 'string' ? JSON.parse(raw) : raw;
|
||
if(Array.isArray(arr) && arr.length >= 2) return [parseFloat(arr[0]), parseFloat(arr[1])];
|
||
}catch(e){}
|
||
return null;
|
||
}
|
||
|
||
function loadLinePointsFromZone(z){
|
||
g_linePoints = [];
|
||
var a = parseLinePoint(z && z.line_a);
|
||
var b = parseLinePoint(z && z.line_b);
|
||
if(a) g_linePoints.push(a);
|
||
if(b) g_linePoints.push(b);
|
||
updateLineStatus();
|
||
}
|
||
|
||
function updateLineStatus(){
|
||
var el = document.getElementById('lineStatus');
|
||
if(!el) return;
|
||
if(g_linePoints.length >= 2){
|
||
el.textContent = _t('zone_line_ready','方向线 A→B 已就绪');
|
||
el.style.color = '#065f46';
|
||
} else if(g_drawMode === 'line'){
|
||
if(g_linePoints.length === 1){
|
||
el.textContent = _t('zone_line_need_b','方向线：请点击终点 B');
|
||
el.style.color = '#d97706';
|
||
} else {
|
||
el.textContent = _t('zone_line_need_ab','方向线：点击起点 A，再点击终点 B');
|
||
el.style.color = '#64748b';
|
||
}
|
||
} else if(needsLineGeometry() && g_linePoints.length < 2){
|
||
el.textContent = _t('zone_line_required_hint','越线算法需绘制 → 方向线');
|
||
el.style.color = '#d97706';
|
||
} else if(g_linePoints.length === 1){
|
||
el.textContent = _t('zone_line_need_b','方向线：请点击终点 B');
|
||
el.style.color = '#d97706';
|
||
} else {
|
||
el.textContent = '';
|
||
}
|
||
}
|
||
|
||
function needsRegionDrawing(){
|
||
return needsRegionGeometry();
|
||
}
|
||
|
||
function updateDrawGeometryUI(){
|
||
updateLineStatus();
|
||
updateRequiredHint();
|
||
var bar = document.getElementById('drawToolRow');
|
||
var modalOpen = document.getElementById('zoneModal') && document.getElementById('zoneModal').classList.contains('show');
|
||
if(bar) bar.style.display = modalOpen ? 'flex' : 'none';
|
||
var hintText = document.getElementById('drawHintText');
|
||
if(hintText){
|
||
hintText.textContent = _t('zone_draw_tip_three',
|
||
'三种图形可叠加：▭ 矩形 · ⬠ 多边形 · → 方向线 A→B（箭头为正向）· 右键撤销当前工具');
|
||
}
|
||
}
|
||
|
||
function loadAlgorithmsForZone(cb){
|
||
Api.get('/algorithm/openIndex').then(function(res){
|
||
if(res && res.code===1000){
|
||
g_algorithms = (res.data||[]).filter(function(a){return a.state===1;});
|
||
}
|
||
if(cb) cb();
|
||
});
|
||
}
|
||
|
||
function renderAlgoList(selectedIds){
|
||
var box = document.getElementById('algoList');
|
||
if(!box) return;
|
||
if(!g_algorithms.length){
|
||
box.innerHTML = '<div class="zm-algo-empty"><span class="ic">⊞</span>'+_t('zone_no_algorithm','暂无可用业务算法，请先到业务算法添加')+'</div>';
|
||
updateAlgoCount(selectedIds||[]);
|
||
updateDrawGeometryUI();
|
||
return;
|
||
}
|
||
var sel = selectedIds || [];
|
||
var typeMap = {yolo5:'YOLOv5',yolo8:'YOLOv8',yolo11:'YOLOv11',yolo26:'YOLO26'};
|
||
var engMap = {yolo_pytorch:'Yolo-PyTorch',onnxruntime:'OnnxRuntime',openvino:'OpenVINO'};
|
||
var html = '';
|
||
g_algorithms.forEach(function(a){
|
||
var isSel = sel.indexOf(a.id)>=0;
|
||
var flowDisp = a.flow_type_name || ('流程'+a.flow_type);
|
||
var postDisp = a.post_process_name || a.post_process || '';
|
||
html += '<div class="zm-algo-card'+(isSel?' sel':'')+'" data-id="'+a.id+'" onclick="algoToggle(this)">'
|
||
+'<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></div>'
|
||
+'<div class="nm">'+escapeHtml(a.name)+'</div>'
|
||
+'<div class="meta">'
|
||
+'<span class="tag-mini">'+escapeHtml(flowDisp)+'</span>'
|
||
+'<span class="tag-mini task">'+escapeHtml(postDisp)+'</span>'
|
||
+'</div>'
|
||
+'</div>';
|
||
});
|
||
box.innerHTML = html;
|
||
updateAlgoCount(sel);
|
||
updateDrawGeometryUI();
|
||
}
|
||
|
||
function algoToggle(el){
|
||
if(!el) return;
|
||
el.classList.toggle('sel');
|
||
updateAlgoCount(getSelectedAlgoIds());
|
||
var algos = getSelectedAlgos();
|
||
if(algos.some(function(a){ return isRegionPost(a.post_process); }) && !isZoneRequired()){
|
||
showToast(_t('zone_region_post_need_required','区域类后处理需开启「必需区域」并绘制区域'), 'warning', 4000);
|
||
}
|
||
syncRequiredForAlgos(true);
|
||
updateDrawGeometryUI();
|
||
}
|
||
|
||
function algoSelectAll(all){
|
||
var box = document.getElementById('algoList');
|
||
if(!box) return;
|
||
box.querySelectorAll('.zm-algo-card').forEach(function(c){
|
||
if(all) c.classList.add('sel'); else c.classList.remove('sel');
|
||
});
|
||
updateAlgoCount(getSelectedAlgoIds());
|
||
syncRequiredForAlgos(true);
|
||
updateDrawGeometryUI();
|
||
}
|
||
|
||
function updateAlgoCount(ids){
|
||
var el = document.getElementById('algoCount');
|
||
if(!el) return;
|
||
var n = (ids||getSelectedAlgoIds()).length;
|
||
el.innerHTML = _t('zone_algorithms_selected','已选 <b>{n}</b> 个业务算法').replace('{n}','<b>'+n+'</b>').replace('<b><b>','<b>').replace('</b></b>','</b>');
|
||
}
|
||
|
||
function getSelectedAlgoIds(){
|
||
var ids = [];
|
||
var box = document.getElementById('algoList');
|
||
if(!box) return ids;
|
||
box.querySelectorAll('.zm-algo-card.sel').forEach(function(c){
|
||
var v = parseInt(c.getAttribute('data-id'),10);
|
||
if(!isNaN(v)) ids.push(v);
|
||
});
|
||
return ids;
|
||
}
|
||
|
||
function formatIntervalDisplay(v){
|
||
var n = parseFloat(v);
|
||
if(isNaN(n) || n <= 0) return '1';
|
||
if(Math.abs(n - Math.round(n)) < 0.0001) return String(Math.round(n));
|
||
return n.toFixed(2).replace(/\.?0+$/,'');
|
||
}
|
||
|
||
function formatDetectRate(interval, frames){
|
||
interval = Math.max(0.1, parseFloat(interval)||1);
|
||
frames = Math.max(1, parseInt(frames,10)||1);
|
||
var fps = frames / interval;
|
||
var fpsTxt = fps >= 10 ? fps.toFixed(1) : (fps >= 1 ? fps.toFixed(2) : fps.toFixed(3));
|
||
return _t('zone_detect_every','每') + ' ' + formatIntervalDisplay(interval) + ' ' + _t('zone_detect_sec','秒')
|
||
+ ' ' + _t('zone_detect_analyze','分析') + ' ' + frames + ' ' + _t('zone_detect_frame_unit','帧')
|
||
+ '（' + _t('zone_detect_about','约') + ' ' + fpsTxt + ' fps）';
|
||
}
|
||
|
||
function updateDetectPreview(){
|
||
var intervalEl = document.getElementById('f_detect_interval');
|
||
var framesEl = document.getElementById('f_detect_frames');
|
||
var interval = parseFloat(intervalEl.value);
|
||
var frames = parseInt(framesEl.value, 10);
|
||
if(isNaN(interval) || interval < 0.1) interval = 0.1;
|
||
if(interval > 86400) interval = 86400;
|
||
if(isNaN(frames) || frames < 1) frames = 1;
|
||
if(frames > 999) frames = 999;
|
||
intervalEl.value = formatIntervalDisplay(interval);
|
||
framesEl.value = frames;
|
||
document.getElementById('detectPreview').textContent = formatDetectRate(interval, frames);
|
||
}
|
||
|
||
function getDetectRatePayload(){
|
||
var interval = parseFloat(document.getElementById('f_detect_interval').value);
|
||
var frames = parseInt(document.getElementById('f_detect_frames').value, 10);
|
||
if(isNaN(interval) || interval < 0.1) interval = 0.1;
|
||
if(isNaN(frames) || frames < 1) frames = 1;
|
||
return {
|
||
detect_interval_sec: Math.min(86400, interval),
|
||
detect_frames: Math.min(999, frames)
|
||
};
|
||
}
|
||
|
||
function loadStreams(cb){
|
||
if(g_streams.length){
|
||
if(cb) cb();
|
||
return;
|
||
}
|
||
Api.get('/control/openPageData').then(function(res){
|
||
if(res && res.code===1000 && res.data){
|
||
g_streams = res.data.streams || [];
|
||
}
|
||
if(cb) cb();
|
||
});
|
||
}
|
||
|
||
function sortByIdDesc(list){
|
||
return (list || []).slice().sort(function(a, b){ return (parseInt(b.id, 10) || 0) - (parseInt(a.id, 10) || 0); });
|
||
}
|
||
|
||
function renderZoneTable(zones){
|
||
var body=document.getElementById('zoneBody'); body.innerHTML='';
|
||
zones = sortByIdDesc(zones);
|
||
if(!zones || !zones.length){ renderEmpty(true); updateZoneOverviewFromList([]); return; }
|
||
renderEmpty(false);
|
||
zones.forEach(function(z){
|
||
var tr=document.createElement('tr');
|
||
tr.setAttribute('data-zone-id', z.id);
|
||
tr.setAttribute('data-stream-id', z.stream_id);
|
||
var algos=z.algorithms||[];
|
||
var algoHtml='';
|
||
if(algos.length===0){ algoHtml='<span style="color:#9ca3af;font-size:11px;">'+_t('zone_no_biz_algorithm','未绑定业务算法')+'</span>'; }
|
||
else{
|
||
algos.slice(0,3).forEach(function(a){ algoHtml+='<span class="algo-chip">'+escapeHtml(a.name)+'</span>'; });
|
||
if(algos.length>3){ algoHtml+='<span class="algo-chip more">+'+(algos.length-3)+'</span>'; }
|
||
}
|
||
var nm='<div style="display:flex;align-items:center;gap:6px;"><span style="width:9px;height:9px;border-radius:50%;background:'+escapeHtml(z.color||'#169F85')+';flex-shrink:0;"></span>'+escapeHtml(z.name)+'</div>';
|
||
var actions = '<div class="zone-actions">'
|
||
+'<span class="zone-run-btn">'+buildZoneRunBtn(z)+'</span>'
|
||
+'<button type="button" class="act-btn act-preview" onclick="openYoloPreview('+z.id+')" title="实时 YOLO 检测">'+SVG_PREVIEW+'</button>'
|
||
+'<button type="button" class="act-btn" onclick="editZone('+z.id+')" title="'+escapeHtml(_t('btn_edit','编辑'))+'">'+SVG_EDIT+'</button>'
|
||
+'<button type="button" class="act-btn act-danger" onclick="delZone('+z.id+')" title="'+escapeHtml(_t('btn_del','删除'))+'">'+SVG_DEL+'</button>'
|
||
+'</div>';
|
||
tr.innerHTML='<td>'+z.id+'</td><td>'+escapeHtml(z.stream_name||'#'+z.stream_id)+'</td><td>'+nm+'</td>'
|
||
+'<td>'+algoHtml+'</td>'
|
||
+'<td><span style="font-size:11px;color:#475569;">'+escapeHtml(formatDetectRate(z.detect_interval_sec||1, z.detect_frames||1))+'</span></td>'
|
||
+'<td>'+(z.is_required===1?'<span class="tag tag-req">'+_t('zone_yes','是')+'</span>':'<span class="tag tag-off">'+_t('zone_no','否')+'</span>')+'</td>'
|
||
+'<td>'+z.loiter_threshold+'</td>'
|
||
+'<td class="zone-state-cell">'+buildZoneStateTag(z)+'</td>'
|
||
+'<td>'+actions+'</td>';
|
||
body.appendChild(tr);
|
||
});
|
||
updateZoneOverviewFromList(zones);
|
||
}
|
||
|
||
function loadZonePageData(){
|
||
var sid = document.getElementById('filterStream').value;
|
||
var params = sid ? {stream_id: sid} : {};
|
||
Api.get('/control/openPageData', params).then(function(res){
|
||
if(!res||res.code!==1000) return;
|
||
var d = res.data || {};
|
||
g_streams = d.streams || g_streams;
|
||
g_zoneCache = d.zones || [];
|
||
fillStreamSelect(document.getElementById('filterStream'), true);
|
||
if(d.analysis){
|
||
g_runningStreams = d.analysis.running_streams || [];
|
||
applyOverviewFromAnalysis(d.analysis);
|
||
refreshAnalysisUI();
|
||
}
|
||
renderZoneTable(g_zoneCache);
|
||
var el = document.getElementById('ovAlarms');
|
||
if(el && d.recent_alarm_count != null) el.textContent = d.recent_alarm_count;
|
||
});
|
||
}
|
||
|
||
function loadZones(){
|
||
loadZonePageData();
|
||
}
|
||
|
||
function fillStreamSelect(sel, includeAll){
|
||
var prev = sel.value;
|
||
sel.innerHTML = '';
|
||
if(includeAll){ var o=document.createElement('option'); o.value=''; o.textContent=_t('zone_all_cameras','全部摄像头'); sel.appendChild(o); }
|
||
g_streams.forEach(function(s){
|
||
var o=document.createElement('option');
|
||
o.value = (s.id != null && s.id !== '') ? String(s.id) : '';
|
||
o.setAttribute('data-app', s.app||'');
|
||
o.setAttribute('data-name', s.name||'');
|
||
if(!o.value) o.disabled = true;
|
||
o.textContent=s.nickname||s.name||('#'+s.id);
|
||
sel.appendChild(o);
|
||
});
|
||
if(prev && sel.querySelector('option[value="'+prev+'"]')) sel.value = prev;
|
||
}
|
||
|
||
function renderEmpty(show){
|
||
document.getElementById('zoneEmpty').style.display = show?'flex':'none';
|
||
document.getElementById('zoneTable').style.display = show?'none':'';
|
||
}
|
||
|
||
function updateZoneOverviewFromList(zones){
|
||
var total = zones.length;
|
||
var running = zones.filter(function(z){ return zoneIsRunning(z); }).length;
|
||
var el = document.getElementById('ovZones');
|
||
if(el) el.textContent = total + ' / ' + running;
|
||
}
|
||
|
||
function editZone(id){
|
||
var z=g_zoneCache.find(function(x){return x.id===id;});
|
||
if(!z){
|
||
showToast(_t('msg_unknown_error','未找到布控'),'error');
|
||
return;
|
||
}
|
||
document.getElementById('zoneModalTitle').textContent=_t('btn_edit_zone','编辑布控');
|
||
document.getElementById('zoneModalSub').textContent=_t('zone_edit_sub','调整区域范围或属性');
|
||
document.getElementById('f_id').value=z.id;
|
||
fillStreamSelect(document.getElementById('f_stream'),false);
|
||
document.getElementById('f_stream').value=z.stream_id;
|
||
document.getElementById('f_name').value=z.name;
|
||
document.getElementById('f_loiter').value=z.loiter_threshold;
|
||
document.getElementById('f_detect_interval').value=z.detect_interval_sec||1;
|
||
document.getElementById('f_detect_frames').value=z.detect_frames||1;
|
||
document.getElementById('f_alarm_repeat').value=z.alarm_repeat_sec == null ? 30 : z.alarm_repeat_sec;
|
||
updateDetectPreview();
|
||
document.getElementById('f_color').value=z.color;
|
||
syncColorSwatches(z.color);
|
||
setToggleValue('reqToggle', z.is_required, 'f_required');
|
||
renderAlgoList(z.algorithm_ids || []);
|
||
try{ g_points = JSON.parse(z.coordinates||'[]'); }catch(e){ g_points=[]; }
|
||
g_drawFinished = g_points.length >= 3;
|
||
loadLinePointsFromZone(z);
|
||
setDrawMode(g_points.length === 4 ? 'rect' : 'polygon');
|
||
onRequiredChange();
|
||
openDrawWithStream(z.stream_id, true);
|
||
document.getElementById('zoneModal').classList.add('show');
|
||
updateDrawGeometryUI();
|
||
}
|
||
|
||
function openZoneModal(){
|
||
document.getElementById('zoneModalTitle').textContent=_t('btn_add_zone','添加布控');
|
||
document.getElementById('zoneModalSub').textContent=_t('zone_draw_tip_three','三种图形可叠加：▭ 矩形 · ⬠ 多边形 · → 方向线 A→B（箭头为正向）· 右键撤销当前工具');
|
||
document.getElementById('f_id').value='';
|
||
fillStreamSelect(document.getElementById('f_stream'),false);
|
||
document.getElementById('f_name').value='';
|
||
document.getElementById('f_loiter').value=0;
|
||
document.getElementById('f_detect_interval').value=1;
|
||
document.getElementById('f_detect_frames').value=1;
|
||
document.getElementById('f_alarm_repeat').value=30;
|
||
updateDetectPreview();
|
||
document.getElementById('f_color').value='#169F85';
|
||
syncColorSwatches('#169F85');
|
||
setToggleValue('reqToggle', 1, 'f_required');
|
||
renderAlgoList([]);
|
||
g_points=[];
|
||
g_linePoints=[];
|
||
g_rectPending=null;
|
||
g_drawFinished=false;
|
||
setDrawMode('rect');
|
||
resetDraw();
|
||
onRequiredChange();
|
||
var sel=document.getElementById('f_stream');
|
||
if(sel.options.length>0){ sel.selectedIndex=0; onStreamChange(); }
|
||
document.getElementById('zoneModal').classList.add('show');
|
||
updateDrawGeometryUI();
|
||
}
|
||
function closeZoneModal(){
|
||
cancelLivePreview();
|
||
document.getElementById('zoneModal').classList.remove('show');
|
||
}
|
||
|
||
function pickColor(el){
|
||
var c=el.getAttribute('data-color');
|
||
document.getElementById('f_color').value=c;
|
||
syncColorSwatches(c);
|
||
redraw();
|
||
}
|
||
function onColorInput(){
|
||
syncColorSwatches(document.getElementById('f_color').value);
|
||
redraw();
|
||
}
|
||
function syncColorSwatches(color){
|
||
document.querySelectorAll('.zm-swatch').forEach(function(s){
|
||
s.classList.toggle('active', s.getAttribute('data-color')===color);
|
||
});
|
||
}
|
||
function setToggle(groupId, val, hiddenId){
|
||
document.getElementById(hiddenId).value=String(val);
|
||
var g=document.getElementById(groupId);
|
||
if(!g) return;
|
||
g.querySelectorAll('.zm-toggle').forEach(function(b){
|
||
b.classList.toggle('active', parseInt(b.getAttribute('data-val'),10)===val);
|
||
});
|
||
}
|
||
function setToggleValue(groupId, val, hiddenId){
|
||
setToggle(groupId, parseInt(val,10)||0, hiddenId);
|
||
}
|
||
|
||
document.addEventListener('keydown', function(e){
|
||
if(e.key==='Escape' && document.getElementById('zoneModal').classList.contains('show')) closeZoneModal();
|
||
if(e.key==='Escape' && document.getElementById('yoloPreviewModal').classList.contains('open')) closeYoloPreview();
|
||
});
|
||
|
||
/* ---------- 摄像头画面绘制 ---------- */
|
||
function resetDraw(){
|
||
cancelLivePreview();
|
||
var wrap=document.getElementById('drawWrap');
|
||
wrap.className='draw-wrap no-snap';
|
||
wrap.innerHTML='<span class="zm-ph-icon">▣</span><span id="drawPlaceholder">'+_t('zone_select_camera_first','正在加载摄像头画面…')+'</span>';
|
||
g_points=[];
|
||
g_linePoints=[];
|
||
g_rectPending=null;
|
||
g_drawFinished=false;
|
||
g_imgNatural={w:0,h:0};
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
updateLineStatus();
|
||
}
|
||
|
||
function destroyZonePlayer(){
|
||
if(g_zonePlayer){
|
||
try { g_zonePlayer.destroy(); } catch(e){}
|
||
g_zonePlayer = null;
|
||
}
|
||
}
|
||
|
||
function cancelLivePreview(){
|
||
g_liveSeq++;
|
||
destroyZonePlayer();
|
||
}
|
||
|
||
function ensureDrawCanvas(parent){
|
||
var canvas=document.getElementById('drawCanvas');
|
||
if(!canvas){
|
||
canvas=document.createElement('canvas');
|
||
canvas.id='drawCanvas';
|
||
parent.appendChild(canvas);
|
||
canvas.addEventListener('click', onCanvasClick);
|
||
canvas.addEventListener('dblclick', onCanvasDblClick);
|
||
canvas.addEventListener('mousemove', onCanvasMove);
|
||
canvas.addEventListener('contextmenu', function(e){ e.preventDefault(); undoPoint(); });
|
||
}
|
||
return canvas;
|
||
}
|
||
|
||
function showLivePreviewError(msg){
|
||
var wrap=document.getElementById('drawWrap');
|
||
if(!wrap) return;
|
||
cancelLivePreview();
|
||
wrap.className='draw-wrap no-snap';
|
||
wrap.innerHTML='<span class="zm-ph-icon">⚠</span><span>'+escapeHtml(msg)+'</span>'
|
||
+'<button type="button" class="btn" style="margin-top:10px;" onclick="retryLivePreview()">'+_t('zone_refresh_live','重新连接视频')+'</button>';
|
||
}
|
||
|
||
function loadLivePreview(app, name){
|
||
if(!app||!name){ resetDraw(); return; }
|
||
var seq = ++g_liveSeq;
|
||
g_liveContext = { app: app, name: name };
|
||
destroyZonePlayer();
|
||
var wrap=document.getElementById('drawWrap');
|
||
wrap.className='draw-wrap';
|
||
wrap.innerHTML=
|
||
'<div id="zoneVideoWrap" class="zone-video-wrap">'
|
||
+ '<div id="zoneVideoPlayer"></div>'
|
||
+ '<div id="zonePlayerOverlay" class="zm-player-overlay"><span class="zm-ph-icon">⟳</span><span>'+_t('zone_live_connecting','正在连接视频流...')+'</span></div>'
|
||
+ '</div>';
|
||
|
||
Api.get('/stream/openPlayer', { app: app, name: name }).then(function(res){
|
||
if(seq !== g_liveSeq) return;
|
||
if(!res || res.code !== 1000 || !res.info || !res.info.stream){
|
||
showLivePreviewError(_t('zone_live_failed','无法连接视频流'));
|
||
return;
|
||
}
|
||
var s = res.info.stream;
|
||
if(parseInt(s.is_online, 10) !== 1){
|
||
showLivePreviewError(_t('zone_live_offline','视频流离线，请确认摄像头在线'));
|
||
return;
|
||
}
|
||
var playUrl = s.wsMp4Url || s.httpMp4Url || s.wsFlvUrl || s.httpFlvUrl;
|
||
if(!playUrl){
|
||
showLivePreviewError(_t('zone_live_no_url','无可用播放地址'));
|
||
return;
|
||
}
|
||
var videoWrap = document.getElementById('zoneVideoWrap');
|
||
if(!videoWrap){ return; }
|
||
ensureDrawCanvas(videoWrap);
|
||
var overlay = document.getElementById('zonePlayerOverlay');
|
||
try{
|
||
g_zonePlayer = new EasyPlayerPro({
|
||
container: document.getElementById('zoneVideoPlayer'),
|
||
videoBuffer: 0.1,
|
||
decoder: '/static/lib/easyPlayer/js/decoder-pro.js',
|
||
isResize: true,
|
||
loadingText: _t('zone_live_connecting','正在连接视频流...'),
|
||
debug: false,
|
||
useMSE: true,
|
||
useWCS: true,
|
||
hasAudio: false,
|
||
isNotMute: true,
|
||
showBandwidth: false,
|
||
operateBtns: { fullscreen: false, screenshot: false, play: false, audio: false, ptz: false },
|
||
timeout: 10,
|
||
forceNoOffscreen: true,
|
||
heartTimeout: 10
|
||
});
|
||
g_zonePlayer.play(playUrl);
|
||
if(overlay) overlay.style.display = 'none';
|
||
setTimeout(function(){
|
||
if(seq !== g_liveSeq) return;
|
||
resizeCanvas();
|
||
redraw();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
}, 400);
|
||
}catch(e){
|
||
showLivePreviewError(_t('zone_live_failed','无法连接视频流'));
|
||
}
|
||
}).catch(function(){
|
||
if(seq !== g_liveSeq) return;
|
||
showLivePreviewError(_t('zone_live_failed','无法连接视频流'));
|
||
});
|
||
}
|
||
|
||
function retryLivePreview(){
|
||
var ctx = g_liveContext || {};
|
||
if(ctx.app && ctx.name) loadLivePreview(ctx.app, ctx.name);
|
||
else onStreamChange();
|
||
}
|
||
|
||
function refreshLivePreview(){
|
||
var sel=document.getElementById('f_stream');
|
||
var opt=sel.options[sel.selectedIndex];
|
||
if(!opt||!opt.value){ showToast(_t('zone_select_camera_first','请先选择摄像头'),'warning'); return; }
|
||
var keep=g_points.slice();
|
||
var keepLine=g_linePoints.slice();
|
||
var app=opt.getAttribute('data-app')||'';
|
||
var name=opt.getAttribute('data-name')||'';
|
||
if(app&&name) loadLivePreview(app,name);
|
||
else { var s=findStream(opt.value); if(s) loadLivePreview(s.app,s.name); }
|
||
g_points=keep;
|
||
g_linePoints=keepLine;
|
||
g_drawFinished = g_points.length >= 4 || g_points.length >= 3;
|
||
setTimeout(function(){ resizeCanvas(); redraw(); }, 500);
|
||
}
|
||
|
||
function onStreamChange(){
|
||
var sel=document.getElementById('f_stream');
|
||
var opt=sel.options[sel.selectedIndex];
|
||
if(!opt||!opt.value){ resetDraw(); return; }
|
||
g_points=[];
|
||
g_linePoints=[];
|
||
g_rectPending=null;
|
||
g_drawFinished=false;
|
||
var app=opt.getAttribute('data-app')||'';
|
||
var name=opt.getAttribute('data-name')||'';
|
||
if(app&&name){ loadLivePreview(app,name); return; }
|
||
var s=findStream(opt.value);
|
||
if(s) loadLivePreview(s.app,s.name); else resetDraw();
|
||
}
|
||
|
||
function findStream(id){
|
||
return g_streams.find(function(s){return String(s.id)===String(id);});
|
||
}
|
||
|
||
function openDrawWithStream(sid, keepPoints){
|
||
var s=findStream(sid);
|
||
if(!s){ resetDraw(); return; }
|
||
if(!keepPoints) g_points=[];
|
||
loadLivePreview(s.app, s.name);
|
||
}
|
||
|
||
function resizeCanvas(){
|
||
var canvas=document.getElementById('drawCanvas');
|
||
var wrap=document.getElementById('zoneVideoWrap');
|
||
if(!canvas||!wrap) return;
|
||
var rect=wrap.getBoundingClientRect();
|
||
if(rect.width < 1 || rect.height < 1) return;
|
||
canvas.width=Math.round(rect.width);
|
||
canvas.height=Math.round(rect.height);
|
||
}
|
||
|
||
window.addEventListener('resize', function(){ if(document.getElementById('drawCanvas')){ resizeCanvas(); redraw(); } });
|
||
|
||
function onCanvasClick(e){
|
||
var canvas=document.getElementById('drawCanvas');
|
||
if(!canvas) return;
|
||
var rect=canvas.getBoundingClientRect();
|
||
var px=(e.clientX-rect.left)/rect.width;
|
||
var py=(e.clientY-rect.top)/rect.height;
|
||
px = Math.max(0, Math.min(1, px));
|
||
py = Math.max(0, Math.min(1, py));
|
||
|
||
if(g_drawMode === 'line'){
|
||
if(g_linePoints.length >= 2) g_linePoints = [];
|
||
g_linePoints.push([px, py]);
|
||
redraw();
|
||
updateLineStatus();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
return;
|
||
}
|
||
|
||
if(g_drawFinished && g_drawMode !== 'rect') return;
|
||
|
||
if(g_drawMode === 'rect'){
|
||
if(!g_rectPending){
|
||
g_rectPending = [px, py];
|
||
redraw(e);
|
||
updatePointStatus();
|
||
return;
|
||
}
|
||
var x1 = g_rectPending[0], y1 = g_rectPending[1];
|
||
var x2 = px, y2 = py;
|
||
g_points = [
|
||
[Math.min(x1,x2), Math.min(y1,y2)],
|
||
[Math.max(x1,x2), Math.min(y1,y2)],
|
||
[Math.max(x1,x2), Math.max(y1,y2)],
|
||
[Math.min(x1,x2), Math.max(y1,y2)]
|
||
];
|
||
g_rectPending = null;
|
||
g_drawFinished = true;
|
||
redraw();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
updateLineStatus();
|
||
return;
|
||
}
|
||
|
||
// polygon
|
||
if(g_points.length>=3){
|
||
var fx=g_points[0][0]*canvas.width, fy=g_points[0][1]*canvas.height;
|
||
var cx=e.clientX-rect.left, cy=e.clientY-rect.top;
|
||
if(Math.hypot(cx-fx, cy-fy)<=14){ finishDraw(); return; }
|
||
}
|
||
g_points.push([px,py]);
|
||
if(g_points.length >= 3) g_drawFinished = false;
|
||
redraw(e);
|
||
updatePointStatus();
|
||
}
|
||
|
||
function onCanvasDblClick(e){
|
||
e.preventDefault();
|
||
if(g_points.length>=3) finishDraw();
|
||
}
|
||
|
||
function onCanvasMove(e){
|
||
var canvas=document.getElementById('drawCanvas');
|
||
if(!canvas) return;
|
||
redraw(e);
|
||
}
|
||
|
||
function undoPoint(){
|
||
if(g_drawMode === 'line'){
|
||
g_linePoints.pop();
|
||
redraw();
|
||
updateLineStatus();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
return;
|
||
}
|
||
if(g_drawFinished && g_drawMode !== 'rect') g_drawFinished=false;
|
||
if(g_drawMode === 'rect' && g_rectPending){
|
||
g_rectPending = null;
|
||
} else {
|
||
g_points.pop();
|
||
}
|
||
redraw();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
}
|
||
function clearPoints(){
|
||
g_points=[];
|
||
g_linePoints=[];
|
||
g_rectPending=null;
|
||
g_drawFinished=false;
|
||
redraw();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
updateLineStatus();
|
||
}
|
||
|
||
function clearCurrentDraw(){
|
||
if(g_drawMode === 'line'){
|
||
g_linePoints = [];
|
||
g_drawFinished = false;
|
||
} else {
|
||
g_points = [];
|
||
g_rectPending = null;
|
||
g_drawFinished = false;
|
||
}
|
||
redraw();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
updateLineStatus();
|
||
}
|
||
|
||
function finishDraw(){
|
||
if(g_points.length<3){
|
||
showToast(_t('zone_draw_min_points','至少绘制 3 个点'),'warning');
|
||
return;
|
||
}
|
||
g_drawFinished=true;
|
||
redraw();
|
||
updatePointStatus();
|
||
updateFinishBtn();
|
||
updateLineStatus();
|
||
if(needsLineGeometry() && g_linePoints.length < 2){
|
||
showToast(_t('zone_line_step2','区域已完成，请选 → 绘制方向线 A→B'), 'info', 3500);
|
||
}
|
||
}
|
||
|
||
function updateFinishBtn(){
|
||
var btn=document.getElementById('btnFinishDraw');
|
||
if(!btn) return;
|
||
var show = g_drawMode !== 'line';
|
||
btn.style.display = show ? '' : 'none';
|
||
if(show) btn.classList.toggle('active', g_drawFinished);
|
||
}
|
||
|
||
function regionDrawSummary(){
|
||
if(g_points.length >= 4 && g_drawMode === 'rect') return '4 ' + _t('zone_points_unit','个点') + ' · ' + _t('zone_draw_rect','矩形');
|
||
if(g_points.length >= 3) return g_points.length + ' ' + _t('zone_points_unit','个点') + ' · ' + _t('zone_draw_polygon','多边形');
|
||
if(g_rectPending) return '1 ' + _t('zone_points_unit','个点') + ' · ' + _t('zone_rect_hint','对角两点绘制矩形');
|
||
return g_points.length + ' ' + _t('zone_points_unit','个点');
|
||
}
|
||
|
||
function updatePointStatus(){
|
||
var el=document.getElementById('pointStatus');
|
||
if(!el) return;
|
||
var parts = [];
|
||
var needRegion = needsRegionDrawing();
|
||
if(needRegion || g_points.length > 0 || g_rectPending){
|
||
parts.push(_t('zone_draw_mode_region','区域') + ': ' + regionDrawSummary());
|
||
}
|
||
if(g_drawMode === 'line' || g_linePoints.length > 0 || needsLineGeometry()){
|
||
parts.push(_t('zone_draw_mode_line','方向线') + ': ' + g_linePoints.length + '/2');
|
||
}
|
||
if(g_linePoints.length >= 2) parts.push(_t('zone_line_ready_short','方向线 OK'));
|
||
else if(g_linePoints.length === 1) parts.push(_t('zone_line_a_only','方向线 A'));
|
||
el.textContent = parts.join(' · ');
|
||
var regionOk = isRegionDrawingComplete();
|
||
var lineOk = !needsLineGeometry() || g_linePoints.length >= 2;
|
||
el.classList.toggle('ready', regionOk && lineOk);
|
||
updateLineStatus();
|
||
}
|
||
|
||
function redraw(mouseEv){
|
||
var canvas=document.getElementById('drawCanvas');
|
||
if(!canvas) return;
|
||
var ctx=canvas.getContext('2d');
|
||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||
var color=document.getElementById('f_color').value||'#169F85';
|
||
|
||
// 区域多边形/矩形
|
||
if(g_points.length>=1){
|
||
ctx.strokeStyle=color; ctx.fillStyle=hexToRgba(color,0.25); ctx.lineWidth=2;
|
||
ctx.beginPath();
|
||
g_points.forEach(function(p,i){
|
||
var x=p[0]*canvas.width, y=p[1]*canvas.height;
|
||
if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
|
||
});
|
||
if(g_points.length>=3){
|
||
ctx.closePath(); ctx.fill(); ctx.stroke();
|
||
} else if(g_points.length>=2){
|
||
ctx.stroke();
|
||
}
|
||
g_points.forEach(function(p,i){
|
||
var x=p[0]*canvas.width, y=p[1]*canvas.height;
|
||
if(i===0 && g_drawMode==='polygon' && g_points.length>=3 && !g_drawFinished){
|
||
ctx.beginPath(); ctx.arc(x,y,12,0,Math.PI*2);
|
||
ctx.strokeStyle=hexToRgba(color,0.45); ctx.lineWidth=2; ctx.stroke();
|
||
}
|
||
ctx.beginPath(); ctx.arc(x,y,5,0,Math.PI*2);
|
||
ctx.fillStyle='#fff'; ctx.fill();
|
||
ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2);
|
||
ctx.fillStyle=color; ctx.fill();
|
||
});
|
||
}
|
||
|
||
// 矩形模式 pending 点
|
||
if(g_drawMode==='rect' && g_rectPending){
|
||
var rx=g_rectPending[0]*canvas.width, ry=g_rectPending[1]*canvas.height;
|
||
ctx.beginPath(); ctx.arc(rx,ry,6,0,Math.PI*2);
|
||
ctx.fillStyle='#2563eb'; ctx.fill();
|
||
if(mouseEv){
|
||
var rect=canvas.getBoundingClientRect();
|
||
var mx=mouseEv.clientX-rect.left, my=mouseEv.clientY-rect.top;
|
||
ctx.setLineDash([6,4]); ctx.strokeStyle='rgba(37,99,235,0.8)'; ctx.lineWidth=2;
|
||
ctx.strokeRect(Math.min(rx,mx), Math.min(ry,my), Math.abs(mx-rx), Math.abs(my-ry));
|
||
ctx.setLineDash([]);
|
||
}
|
||
}
|
||
|
||
// 方向线 A→B
|
||
if(g_linePoints.length>=1){
|
||
var la=g_linePoints[0], lb=g_linePoints.length>=2?g_linePoints[1]:null;
|
||
var ax=la[0]*canvas.width, ay=la[1]*canvas.height;
|
||
ctx.strokeStyle='#dc2626'; ctx.lineWidth=3;
|
||
ctx.beginPath(); ctx.arc(ax,ay,7,0,Math.PI*2); ctx.fillStyle='#dc2626'; ctx.fill();
|
||
ctx.fillStyle='#fff'; ctx.font='bold 11px sans-serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
|
||
ctx.fillText('A', ax, ay);
|
||
if(lb){
|
||
var bx=lb[0]*canvas.width, by=lb[1]*canvas.height;
|
||
ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(bx,by); ctx.stroke();
|
||
ctx.beginPath(); ctx.arc(bx,by,7,0,Math.PI*2); ctx.fillStyle='#dc2626'; ctx.fill();
|
||
ctx.fillStyle='#fff'; ctx.fillText('B', bx, by);
|
||
// 箭头
|
||
var ang=Math.atan2(by-ay, bx-ax);
|
||
var al=14;
|
||
ctx.beginPath();
|
||
ctx.moveTo(bx, by);
|
||
ctx.lineTo(bx - al*Math.cos(ang-0.4), by - al*Math.sin(ang-0.4));
|
||
ctx.moveTo(bx, by);
|
||
ctx.lineTo(bx - al*Math.cos(ang+0.4), by - al*Math.sin(ang+0.4));
|
||
ctx.stroke();
|
||
ctx.fillStyle='#dc2626'; ctx.font='11px sans-serif';
|
||
ctx.fillText(_t('zone_forward_dir','正向'), (ax+bx)/2, (ay+by)/2 - 10);
|
||
} else if(mouseEv){
|
||
var rect2=canvas.getBoundingClientRect();
|
||
var mx2=mouseEv.clientX-rect2.left, my2=mouseEv.clientY-rect2.top;
|
||
ctx.setLineDash([5,4]); ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(mx2,my2); ctx.stroke(); ctx.setLineDash([]);
|
||
}
|
||
}
|
||
}
|
||
|
||
function hexToRgba(hex,a){
|
||
var h=hex.replace('#',''); if(h.length===3) h=h.split('').map(function(c){return c+c;}).join('');
|
||
var r=parseInt(h.substr(0,2),16)||0,g=parseInt(h.substr(2,2),16)||0,b=parseInt(h.substr(4,2),16)||0;
|
||
return 'rgba('+r+','+g+','+b+','+a+')';
|
||
}
|
||
|
||
function getSelectedStreamId(){
|
||
var sel=document.getElementById('f_stream');
|
||
var opt=sel.options[sel.selectedIndex];
|
||
if(!opt) return 0;
|
||
var sid=parseInt(opt.value,10);
|
||
if(sid>0) return sid;
|
||
var s=findStreamByAppName(opt.getAttribute('data-app'), opt.getAttribute('data-name'));
|
||
return s ? parseInt(s.id,10)||0 : 0;
|
||
}
|
||
function findStreamByAppName(app, name){
|
||
if(!app||!name) return null;
|
||
return g_streams.find(function(s){ return s.app===app && s.name===name; }) || null;
|
||
}
|
||
|
||
function submitZone(){
|
||
var id=document.getElementById('f_id').value;
|
||
var sid=getSelectedStreamId();
|
||
var nameEl=document.getElementById('f_name');
|
||
var name=nameEl ? nameEl.value.trim() : '';
|
||
if(!sid){
|
||
showToast(_t('zone_stream_required','请选择摄像头'),'warning');
|
||
return;
|
||
}
|
||
if(!name){
|
||
showToast(_t('zone_name_required','请填写布控名称'),'warning');
|
||
if(nameEl) nameEl.focus();
|
||
return;
|
||
}
|
||
if(!validateZoneDrawing()) return;
|
||
if(needsRegionGeometry() && g_points.length >= 3 && !g_drawFinished){
|
||
g_drawFinished = true;
|
||
}
|
||
var coords = needsRegionGeometry() ? g_points : (g_points.length >= 3 ? g_points : []);
|
||
var payload={
|
||
stream_id:sid,
|
||
name:name,
|
||
coordinates:JSON.stringify(coords),
|
||
line_a: g_linePoints.length >= 1 ? JSON.stringify(g_linePoints[0]) : '',
|
||
line_b: g_linePoints.length >= 2 ? JSON.stringify(g_linePoints[1]) : '',
|
||
loiter_threshold:parseInt(document.getElementById('f_loiter').value,10)||0,
|
||
detect_interval_sec:getDetectRatePayload().detect_interval_sec,
|
||
detect_frames:getDetectRatePayload().detect_frames,
|
||
alarm_repeat_sec:Math.max(0, parseFloat(document.getElementById('f_alarm_repeat').value)||0),
|
||
color:document.getElementById('f_color').value.trim(),
|
||
is_required:parseInt(document.getElementById('f_required').value,10),
|
||
algorithm_ids:getSelectedAlgoIds()
|
||
};
|
||
// 兜底：stream_id 解析失败时用 app/name 反查（注意不要覆盖上面的 zone name）
|
||
var sel=document.getElementById('f_stream');
|
||
var opt=sel.options[sel.selectedIndex];
|
||
if(opt){
|
||
var app=opt.getAttribute('data-app')||'';
|
||
var nm=opt.getAttribute('data-name')||'';
|
||
if(app && nm){
|
||
payload.stream_app = app;
|
||
payload.stream_name = nm;
|
||
}
|
||
}
|
||
var url=id?'/control/openEdit':'/control/openAdd';
|
||
if(id) payload.id=parseInt(id,10);
|
||
console.log('[Zone] submit', url, JSON.stringify(payload));
|
||
Api.post(url,payload).then(function(res){
|
||
console.log('[Zone] submit response', JSON.stringify(res));
|
||
if(!res){ showToast(_t('msg_unknown_error','失败'),'error'); return; }
|
||
showToast(res.msg||(res.code===1000?_t('msg_success','成功'):_t('msg_unknown_error','失败')),res.code===1000?'success':'error');
|
||
if(res.code===1000){ closeZoneModal(); loadZones(); }
|
||
}).catch(function(e){
|
||
console.error('[Zone] submit error', e);
|
||
showToast(_t('msg_unknown_error','网络错误'),'error');
|
||
});
|
||
}
|
||
|
||
function delZone(id){
|
||
confirmDialog(_t('zone_del_confirm','确认删除该区域?'),function(){
|
||
Api.post('/control/openDel',{id:id}).then(function(res){
|
||
showToast(res.msg,res.code===1000?'success':'error'); loadZones();
|
||
});
|
||
});
|
||
}
|
||
|
||
loadZonePageData();
|
||
loadAlgorithmsForZone();
|
||
startAnalysisPolling();
|
||
|
||
/* ========== 引擎实例管理弹框 ========== */
|
||
var ENGINE_MAP = {yolo_pytorch:'Yolo-PyTorch', onnxruntime:'OnnxRuntime', openvino:'OpenVINO'};
|
||
var DEVICE_MAP = {cpu:'CPU', cuda:'CUDA', gpu:'GPU'};
|
||
var TASK_MAP = {detect:'Detect', segment:'Segment', classify:'Classify', pose:'Pose', obb:'OBB'};
|
||
var FLOW_MAP = {1:'小模型+后处理', 2:'大模型+后处理', 3:'小模型+大模型+后处理'};
|
||
|
||
function openEngineModal(){
|
||
document.getElementById('engineModal').classList.add('open');
|
||
if(g_lastAnalysisData){ renderEngineModal(g_lastAnalysisData); }
|
||
fetchAnalysisStatus();
|
||
}
|
||
|
||
function closeEngineModal(){
|
||
document.getElementById('engineModal').classList.remove('open');
|
||
}
|
||
|
||
function renderEngineModal(d){
|
||
if(!d){ return; }
|
||
var cfg = d.inference_config || {};
|
||
var instances = d.engine_instances || [];
|
||
var algoStates = d.algo_instance_states || [];
|
||
var sub = document.getElementById('engineModalSub');
|
||
if(sub){
|
||
var subShared = cfg.shared
|
||
? _t('zone_ctrl_modal_sub_shared',' · 共享推理 {alive}/{total} worker').replace('{alive}', cfg.workers_alive||0).replace('{total}', cfg.workers||0)
|
||
: _t('zone_ctrl_modal_sub_local',' · 独立实例');
|
||
sub.textContent = _t('zone_ctrl_modal_sub_count','· 共 {n} 个运行实例').replace('{n}', instances.length) + subShared;
|
||
}
|
||
var html = '';
|
||
|
||
// ===== 配置区 =====
|
||
html += '<div class="em-section">';
|
||
html += '<div class="em-section-title">推理引擎配置</div>';
|
||
html += '<div class="em-cfg-grid">';
|
||
// 共享推理池
|
||
var sharedChecked = cfg.shared ? 'checked' : '';
|
||
html += '<div class="em-cfg-item">';
|
||
html += '<div class="lbl">共享推理池 <label class="em-switch"><input type="checkbox" id="cfgShared" '+sharedChecked+' onchange="onCfgSharedChange()"><span class="slider"></span></label></div>';
|
||
html += '<div class="val">' + (cfg.shared ? '已启用' : '已关闭') + '<span class="hint" style="font-size:11px;font-weight:400;color:#9ca3af;margin-left:4px;">' + (cfg.shared ? '共用 worker' : '每路独立') + '</span></div>';
|
||
html += '</div>';
|
||
// 多进程模式
|
||
html += '<div class="em-cfg-item">';
|
||
html += '<div class="lbl">多进程模式</div>';
|
||
html += '<div class="val">' + (cfg.multi_process ? '启用' : '禁用') + '</div>';
|
||
html += '</div>';
|
||
// worker 数量
|
||
var workers = cfg.workers||0;
|
||
var alive = cfg.workers_alive||0;
|
||
html += '<div class="em-cfg-item">';
|
||
html += '<div class="lbl">Worker 数量 <span class="hint">存活 '+alive+'</span></div>';
|
||
html += '<div class="val"><div class="em-workers">';
|
||
html += '<button onclick="adjustWorkers(-1)">-</button>';
|
||
html += '<input type="number" id="cfgWorkers" value="'+workers+'" min="1" max="32">';
|
||
html += '<button onclick="adjustWorkers(1)">+</button>';
|
||
html += '</div><button class="em-btn" id="btnApplyWorkers" onclick="applyWorkers()">应用</button></div>';
|
||
html += '</div>';
|
||
// 重启推理池
|
||
html += '<div class="em-cfg-item">';
|
||
html += '<div class="lbl">推理池操作</div>';
|
||
html += '<div class="em-cfg-actions"><button class="em-btn danger" onclick="restartInferencePool(this)">重启推理池</button></div>';
|
||
html += '</div>';
|
||
html += '</div>'; // em-cfg-grid
|
||
html += '</div>'; // em-section
|
||
|
||
// ===== 运行中布控实例 =====
|
||
html += '<div class="em-section">';
|
||
html += '<div class="em-section-title">'+_t('zone_ctrl_running_title','运行中布控实例')+' <span style="background:#e6f7f3;color:#0e7a65;font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600;">'+instances.length+'</span></div>';
|
||
if(instances.length===0){
|
||
html += '<div class="em-empty"><span class="ic">○</span>'+_t('zone_ctrl_running_empty','暂无运行中的布控实例')+'<br><span style="font-size:11px;">'+_t('zone_ctrl_running_empty_hint','启动分析后才会创建实例')+'</span></div>';
|
||
} else {
|
||
html += '<div class="em-inst-list">';
|
||
instances.forEach(function(inst){
|
||
var disabled = inst.instance_enabled===false;
|
||
var engName = ENGINE_MAP[inst.engine] || inst.engine || '';
|
||
var devName = DEVICE_MAP[inst.device] || inst.device || '';
|
||
var taskName = TASK_MAP[inst.task_type] || inst.task_type || '';
|
||
var bizList = inst.biz_algorithms || [];
|
||
var bizTxt = bizList.map(function(b){ return b.name + ' (' + (FLOW_MAP[b.flow_type]||('流程'+b.flow_type)) + ')'; }).join('、');
|
||
var streamsTxt = (inst.stream_names||[]).join('、') || (''+inst.stream_count+' 路');
|
||
html += '<div class="em-inst'+(disabled?' disabled':'')+'">';
|
||
html += '<div class="em-inst-top">';
|
||
html += '<div class="em-inst-name"><span class="ic"></span>'+escapeHtml(inst.algorithm_name||('#'+inst.algorithm_id))+'</div>';
|
||
html += '<div class="em-inst-actions">';
|
||
html += '<button class="em-btn ghost" onclick="restartAlgoInstance('+inst.algorithm_id+', this)">重启</button>';
|
||
var chk = disabled ? '' : 'checked';
|
||
html += '<label class="em-switch"><input type="checkbox" ' + chk + ' onchange="onToggleInst('+inst.algorithm_id+', this.checked)"><span class="slider"></span></label>';
|
||
html += '</div>';
|
||
html += '</div>';
|
||
html += '<div class="em-tags">';
|
||
if(engName) html += '<span class="em-tag engine">'+engName+'</span>';
|
||
if(devName) html += '<span class="em-tag device">'+devName+'</span>';
|
||
if(taskName) html += '<span class="em-tag task">'+taskName+'</span>';
|
||
if(inst.input_size) html += '<span class="em-tag input">'+inst.input_size[0]+'×'+inst.input_size[1]+'</span>';
|
||
html += '<span class="em-tag count">'+inst.stream_count+' 路摄像头</span>';
|
||
html += '</div>';
|
||
html += '<div class="em-inst-meta">';
|
||
if(bizTxt) html += '<div class="row"><span class="k">业务算法</span><span class="v">'+escapeHtml(bizTxt)+'</span></div>';
|
||
html += '<div class="row"><span class="k">使用摄像头</span><span class="v">'+escapeHtml(streamsTxt)+'</span></div>';
|
||
if(inst.model_file) html += '<div class="row"><span class="k">模型文件</span><span class="v">'+escapeHtml(inst.model_file)+'</span></div>';
|
||
if(inst.conf_threshold!==undefined) html += '<div class="row"><span class="k">参数</span><span class="v">conf='+inst.conf_threshold+' · iou='+inst.iou_threshold+' · '+escapeHtml(inst.algorithm_type||'')+'</span></div>';
|
||
html += '</div>';
|
||
html += '</div>';
|
||
});
|
||
html += '</div>';
|
||
}
|
||
html += '</div>';
|
||
|
||
// ===== 业务算法实例化开关 =====
|
||
if(algoStates.length>0){
|
||
html += '<div class="em-section">';
|
||
html += '<div class="em-section-title">业务算法实例化开关 <span style="background:#e6f7f3;color:#0e7a65;font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600;">'+algoStates.length+'</span></div>';
|
||
html += '<div class="em-inst-list">';
|
||
algoStates.forEach(function(a){
|
||
var disabled = !a.instance_enabled;
|
||
var engName = ENGINE_MAP[a.engine] || a.engine || '';
|
||
var smId = a.small_model_id || 0;
|
||
html += '<div class="em-inst'+(disabled?' disabled':'')+'">';
|
||
html += '<div class="em-inst-top">';
|
||
html += '<div class="em-inst-name"><span class="ic"></span>'+escapeHtml(a.name)+'</div>';
|
||
html += '<div class="em-inst-actions">';
|
||
if(smId){ html += '<button class="em-btn ghost" onclick="restartAlgoInstance('+smId+', this)">重启</button>'; }
|
||
var chk = a.instance_enabled ? 'checked' : '';
|
||
html += '<label class="em-switch"><input type="checkbox" ' + chk + ' onchange="onToggleInst('+smId+', this.checked)"><span class="slider"></span></label>';
|
||
html += '</div>';
|
||
html += '</div>';
|
||
html += '<div class="em-tags">';
|
||
if(engName) html += '<span class="em-tag engine">'+engName+'</span>';
|
||
html += '<span class="em-tag">'+escapeHtml(a.small_model_name||'未绑定小模型')+'</span>';
|
||
html += '<span class="em-tag task">'+(FLOW_MAP[a.flow_type]||('流程'+a.flow_type))+'</span>';
|
||
html += '</div>';
|
||
html += '</div>';
|
||
});
|
||
html += '</div>';
|
||
html += '</div>';
|
||
}
|
||
|
||
document.getElementById('engineModalBody').innerHTML = html;
|
||
}
|
||
|
||
function onCfgSharedChange(){
|
||
var v = document.getElementById('cfgShared').checked ? 1 : 0;
|
||
if(!confirm(v ? '确定开启共享推理池？\n切换后所有运行中的分析将重启。' : '确定关闭共享推理池？\n切换后所有运行中的分析将重启。')){
|
||
document.getElementById('cfgShared').checked = !v;
|
||
return;
|
||
}
|
||
Api.post('/analysis/openUpdateInferenceConfig', {shared: v}).then(function(res){
|
||
showToast(res.msg||'操作完成', res.code===1000?'success':'error');
|
||
if(res.code===1000){ setTimeout(fetchAnalysisStatus, 800); }
|
||
else { document.getElementById('cfgShared').checked = !v; }
|
||
});
|
||
}
|
||
|
||
function adjustWorkers(delta){
|
||
var el = document.getElementById('cfgWorkers');
|
||
if(!el) return;
|
||
var v = parseInt(el.value, 10) || 1;
|
||
v = Math.max(1, Math.min(32, v + delta));
|
||
el.value = v;
|
||
}
|
||
|
||
function applyWorkers(){
|
||
var el = document.getElementById('cfgWorkers');
|
||
if(!el) return;
|
||
var v = parseInt(el.value, 10) || 1;
|
||
v = Math.max(1, Math.min(32, v));
|
||
var btn = document.getElementById('btnApplyWorkers');
|
||
if(btn){ btn.disabled = true; btn.textContent = '应用中...'; }
|
||
Api.post('/analysis/openUpdateInferenceConfig', {workers: v}).then(function(res){
|
||
showToast(res.msg||'操作完成', res.code===1000?'success':'error');
|
||
if(res.code===1000){ setTimeout(fetchAnalysisStatus, 800); }
|
||
}).catch(function(){
|
||
showToast('网络错误', 'error');
|
||
}).finally(function(){
|
||
if(btn){ btn.disabled = false; btn.textContent = '应用'; }
|
||
});
|
||
}
|
||
|
||
function onToggleInst(algoId, enabled){
|
||
if(!algoId){ return; }
|
||
Api.post('/analysis/openToggleAlgoInstance', {algorithm_id: algoId, enabled: enabled?1:0}).then(function(res){
|
||
showToast(res.msg||'操作完成', res.code===1000?'success':'error');
|
||
if(res.code===1000){ fetchAnalysisStatus(); }
|
||
});
|
||
}
|
||
|
||
function restartAlgoInstance(algoId, btn){
|
||
if(!algoId){ return; }
|
||
if(!confirm('确定重启该算法的所有运行 pipeline？\n相关摄像头分析将短暂中断。')){ return; }
|
||
if(btn){ btn.disabled = true; btn.textContent = '重启中...'; }
|
||
Api.post('/analysis/openRestartAlgoInstance', {algorithm_id: algoId}).then(function(res){
|
||
showToast(res.msg||'操作完成', res.code===1000?'success':'error');
|
||
if(res.code===1000){ setTimeout(fetchAnalysisStatus, 800); }
|
||
}).catch(function(){
|
||
showToast('网络错误', 'error');
|
||
}).finally(function(){
|
||
if(btn){ btn.disabled = false; btn.textContent = '重启'; }
|
||
});
|
||
}
|
||
|
||
function restartInferencePool(btn){
|
||
if(!confirm('确定重启整个推理池？\n所有引擎缓存将被清除，worker 子进程会重新创建。\n期间所有分析会短暂中断。')){ return; }
|
||
if(btn){ btn.disabled = true; btn.textContent = '重启中...'; }
|
||
Api.post('/analysis/openRestartInferencePool', {}).then(function(res){
|
||
showToast(res.msg||'操作完成', res.code===1000?'success':'error');
|
||
if(res.code===1000){ setTimeout(fetchAnalysisStatus, 1000); }
|
||
}).catch(function(){
|
||
showToast('网络错误', 'error');
|
||
}).finally(function(){
|
||
if(btn){ btn.disabled = false; btn.textContent = '重启推理池'; }
|
||
});
|
||
}
|
||
|
||
/* ---------- 实时 YOLO 人员检测 ---------- */
|
||
var g_yp = {sessionId:'', sequence:0, player:null, pollTimer:null, renderTimer:null,
|
||
resizeObserver:null, data:null, zone:null, frameW:0, frameH:0, opening:false,
|
||
animationFrame:null, displayBoxes:{}, lastDrawMs:0};
|
||
|
||
function computeContainRect(containerW, containerH, mediaW, mediaH){
|
||
mediaW = mediaW || 16; mediaH = mediaH || 9;
|
||
var scale = Math.min(containerW / mediaW, containerH / mediaH);
|
||
var width = mediaW * scale, height = mediaH * scale;
|
||
return {x:(containerW-width)/2, y:(containerH-height)/2, width:width, height:height};
|
||
}
|
||
|
||
function resizeYoloCanvas(){
|
||
var canvas=document.getElementById('yoloPreviewCanvas');
|
||
var stage=document.getElementById('yoloPreviewStage');
|
||
if(!canvas||!stage) return;
|
||
var dpr=window.devicePixelRatio||1;
|
||
var w=Math.max(1,stage.clientWidth), h=Math.max(1,stage.clientHeight);
|
||
canvas.width=Math.round(w*dpr); canvas.height=Math.round(h*dpr);
|
||
canvas.style.width=w+'px'; canvas.style.height=h+'px';
|
||
var ctx=canvas.getContext('2d'); ctx.setTransform(dpr,0,0,dpr,0,0);
|
||
drawYoloOverlay();
|
||
}
|
||
|
||
function projectTrackBox(track, resultTimestamp, nowSec){
|
||
var box=(track.box||[]).slice();
|
||
if(box.length!==4 || !track.observed) return box;
|
||
var velocity=track.velocity||[0,0,0,0];
|
||
var lead=Math.max(0,Math.min(1.2,(nowSec||Date.now()/1000)-(resultTimestamp||nowSec)));
|
||
var projected=box.map(function(v,i){return v+(Number(velocity[i])||0)*lead;});
|
||
var bw=Math.max(.001,box[2]-box[0]), bh=Math.max(.001,box[3]-box[1]);
|
||
var dx=((projected[0]+projected[2])-(box[0]+box[2]))*.5;
|
||
var dy=((projected[1]+projected[3])-(box[1]+box[3]))*.5;
|
||
var distance=Math.sqrt(dx*dx+dy*dy), maxMove=Math.max(bw,bh)*.9;
|
||
if(distance>maxMove){
|
||
var ratio=maxMove/distance;
|
||
projected=projected.map(function(v,i){return box[i]+(v-box[i])*ratio;});
|
||
}
|
||
projected[0]=Math.max(0,Math.min(1,projected[0]));
|
||
projected[1]=Math.max(0,Math.min(1,projected[1]));
|
||
projected[2]=Math.max(projected[0],Math.min(1,projected[2]));
|
||
projected[3]=Math.max(projected[1],Math.min(1,projected[3]));
|
||
return projected;
|
||
}
|
||
|
||
function smoothTrackBox(track, target, nowMs){
|
||
var key=String(track.track_id), state=g_yp.displayBoxes[key];
|
||
if(!state){state={box:target.slice(),last:nowMs};g_yp.displayBoxes[key]=state;return state.box;}
|
||
var dt=Math.max(1,Math.min(100,nowMs-state.last)), alpha=1-Math.exp(-dt/90);
|
||
for(var i=0;i<4;i++)state.box[i]+=((target[i]||0)-state.box[i])*alpha;
|
||
state.last=nowMs;return state.box;
|
||
}
|
||
|
||
function drawYoloOverlay(){
|
||
var canvas=document.getElementById('yoloPreviewCanvas');
|
||
var stage=document.getElementById('yoloPreviewStage');
|
||
if(!canvas||!stage) return;
|
||
var ctx=canvas.getContext('2d'), w=stage.clientWidth, h=stage.clientHeight;
|
||
ctx.clearRect(0,0,w,h);
|
||
var data=g_yp.data||{}, fw=data.frame_width||g_yp.frameW||16, fh=data.frame_height||g_yp.frameH||9;
|
||
var rect=computeContainRect(w,h,fw,fh);
|
||
var zone=(data.zones&&data.zones[0])||g_yp.zone;
|
||
if(zone && zone.coords && zone.coords.length>=3){
|
||
ctx.save(); ctx.beginPath();
|
||
zone.coords.forEach(function(p,i){
|
||
var x=rect.x+p[0]*rect.width, y=rect.y+p[1]*rect.height;
|
||
if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
|
||
});
|
||
ctx.closePath(); ctx.fillStyle=hexToRgba(zone.color||'#169F85',.16);ctx.fill();
|
||
ctx.strokeStyle=zone.color||'#169F85';ctx.lineWidth=2;ctx.stroke();ctx.restore();
|
||
}
|
||
var drawNow=Date.now(), liveIds={};
|
||
(data.tracks||[]).forEach(function(t){
|
||
if(t.label!=='person' || !t.box || t.box.length<4) return;
|
||
liveIds[String(t.track_id)]=true;
|
||
var target=projectTrackBox(t,data.timestamp,drawNow/1000);
|
||
var displayBox=smoothTrackBox(t,target,drawNow);
|
||
var x=rect.x+displayBox[0]*rect.width, y=rect.y+displayBox[1]*rect.height;
|
||
var bw=(displayBox[2]-displayBox[0])*rect.width, bh=(displayBox[3]-displayBox[1])*rect.height;
|
||
var inside=(t.inside_zone_ids||[]).indexOf(zone&&zone.id)>=0;
|
||
var color=inside?'#ef4444':'#a855f7';
|
||
ctx.save();ctx.globalAlpha=t.opacity==null?1:t.opacity;ctx.strokeStyle=color;ctx.lineWidth=2;
|
||
if(!t.observed)ctx.setLineDash([7,5]);ctx.strokeRect(x,y,bw,bh);ctx.setLineDash([]);
|
||
var label='person · ID '+t.track_id+' · '+Math.round((t.score||0)*100)+'%'+(inside?' · 区域内':'');
|
||
ctx.font='12px sans-serif';var tw=ctx.measureText(label).width+10;
|
||
ctx.fillStyle=color;ctx.fillRect(x,Math.max(rect.y,y-22),tw,20);
|
||
ctx.fillStyle='#fff';ctx.fillText(label,x+5,Math.max(rect.y+14,y-7));ctx.restore();
|
||
});
|
||
Object.keys(g_yp.displayBoxes).forEach(function(key){if(!liveIds[key])delete g_yp.displayBoxes[key];});
|
||
g_yp.lastDrawMs=drawNow;
|
||
}
|
||
|
||
function animateYoloOverlay(){
|
||
if(!g_yp.sessionId)return;
|
||
drawYoloOverlay();
|
||
g_yp.animationFrame=requestAnimationFrame(animateYoloOverlay);
|
||
}
|
||
|
||
function updateYoloStats(){
|
||
var d=g_yp.data||{};
|
||
var mode=d.mode||'preview', modeEl=document.getElementById('ypMode');
|
||
if(modeEl){modeEl.className='yp-mode '+(mode==='formal'?'':'preview');modeEl.textContent=mode==='formal'?'正式分析中':'预览模式，不产生报警';}
|
||
var names=d.model_names||[];
|
||
var devices=(d.model_devices||[]).map(function(v){return String(v).toUpperCase();});
|
||
document.getElementById('ypModel').textContent='模型：'+(names.join('、')||'—')+(devices.length?' · '+devices.join('/'):'');
|
||
document.getElementById('ypFps').textContent='分析 FPS：'+Number(d.analysis_fps||0).toFixed(2);
|
||
var age=d.timestamp ? Math.max(0,Date.now()/1000-d.timestamp) : null;
|
||
var ageEl=document.getElementById('ypAge');
|
||
ageEl.textContent='结果延迟：'+(age==null?'—':age.toFixed(1)+' 秒');
|
||
ageEl.style.color=age!=null&&age>10?'#fca5a5':'#cbd5e1';
|
||
var count=(d.tracks||[]).filter(function(t){return t.label==='person'&&t.observed;}).length;
|
||
document.getElementById('ypCount').textContent='当前人员：'+count;
|
||
}
|
||
|
||
function pollYoloPreview(){
|
||
if(!g_yp.sessionId)return;
|
||
Api.get('/analysis/openPreviewData',{session_id:g_yp.sessionId,since:g_yp.sequence}).then(function(res){
|
||
if(!g_yp.sessionId)return;
|
||
if(!res||res.code!==1000){showToast((res&&res.msg)||'预览会话已失效','error');closeYoloPreview();return;}
|
||
var d=res.data||{};
|
||
if(d.changed){g_yp.data=d;g_yp.sequence=d.sequence||g_yp.sequence;g_yp.frameW=d.frame_width||g_yp.frameW;g_yp.frameH=d.frame_height||g_yp.frameH;drawYoloOverlay();}
|
||
else if(g_yp.data){g_yp.data.mode=d.mode||g_yp.data.mode;}
|
||
updateYoloStats();
|
||
}).catch(function(){});
|
||
}
|
||
|
||
function startYoloPlayer(app,name){
|
||
Api.get('/stream/openPlayer',{app:app,name:name}).then(function(res){
|
||
if(!g_yp.sessionId)return;
|
||
var s=res&&res.info&&res.info.stream;
|
||
if(!s||parseInt(s.is_online,10)!==1){document.getElementById('ypLoading').textContent='视频流离线，但 YOLO 分析会继续等待视频';return;}
|
||
g_yp.frameW=s.video_width||g_yp.frameW;g_yp.frameH=s.video_height||g_yp.frameH;
|
||
var url=s.wsMp4Url||s.httpMp4Url||s.wsFlvUrl||s.httpFlvUrl;
|
||
if(!url){document.getElementById('ypLoading').textContent='无可用播放地址';return;}
|
||
try{
|
||
g_yp.player=new EasyPlayerPro({container:document.getElementById('yoloPreviewPlayer'),videoBuffer:.1,
|
||
decoder:'/static/lib/easyPlayer/js/decoder-pro.js',isResize:true,debug:false,useMSE:true,useWCS:true,
|
||
hasAudio:false,isNotMute:true,showBandwidth:false,operateBtns:{fullscreen:true,screenshot:false,play:true,audio:false,ptz:false},
|
||
timeout:10,forceNoOffscreen:true,heartTimeout:10});
|
||
g_yp.player.play(url);document.getElementById('ypLoading').style.display='none';
|
||
}catch(e){document.getElementById('ypLoading').textContent='视频播放器启动失败';}
|
||
});
|
||
}
|
||
|
||
function openYoloPreview(zoneId){
|
||
if(g_yp.opening)return;g_yp.opening=true;
|
||
var zone=g_zoneCache.find(function(z){return parseInt(z.id,10)===parseInt(zoneId,10);});
|
||
document.getElementById('yoloPreviewModal').classList.add('open');
|
||
document.getElementById('ypLoading').style.display='flex';
|
||
document.getElementById('ypLoading').textContent='正在启动 YOLO 分析并连接视频流…';
|
||
document.getElementById('ypTitle').textContent=(zone?zone.stream_name+' · '+zone.name:'')+' 实时 YOLO 人员检测';
|
||
Api.post('/analysis/openPreviewStart',{zone_id:zoneId}).then(function(res){
|
||
g_yp.opening=false;
|
||
if(!res||res.code!==1000){showToast((res&&res.msg)||'启动预览失败','error');closeYoloPreview();return;}
|
||
var d=res.data||{};g_yp.sessionId=d.session_id;g_yp.sequence=0;g_yp.zone=d.zone;g_yp.data={mode:d.mode,zones:[d.zone],tracks:[],model_names:(d.models||[]).map(function(m){return m.name;})};
|
||
updateYoloStats();resizeYoloCanvas();startYoloPlayer(d.app,d.name);
|
||
g_yp.pollTimer=setInterval(pollYoloPreview,250);g_yp.renderTimer=setInterval(updateYoloStats,500);
|
||
g_yp.animationFrame=requestAnimationFrame(animateYoloOverlay);
|
||
if(window.ResizeObserver){g_yp.resizeObserver=new ResizeObserver(resizeYoloCanvas);g_yp.resizeObserver.observe(document.getElementById('yoloPreviewStage'));}
|
||
}).catch(function(){g_yp.opening=false;showToast('启动预览失败','error');closeYoloPreview();});
|
||
}
|
||
|
||
function closeYoloPreview(){
|
||
var sid=g_yp.sessionId;g_yp.sessionId='';g_yp.opening=false;
|
||
if(g_yp.pollTimer)clearInterval(g_yp.pollTimer);if(g_yp.renderTimer)clearInterval(g_yp.renderTimer);
|
||
if(g_yp.animationFrame)cancelAnimationFrame(g_yp.animationFrame);
|
||
g_yp.pollTimer=null;g_yp.renderTimer=null;
|
||
if(g_yp.resizeObserver){try{g_yp.resizeObserver.disconnect();}catch(e){}g_yp.resizeObserver=null;}
|
||
if(g_yp.player){try{g_yp.player.destroy();}catch(e){}g_yp.player=null;}
|
||
if(sid)Api.post('/analysis/openPreviewStop',{session_id:sid}).catch(function(){});
|
||
g_yp.data=null;g_yp.zone=null;g_yp.sequence=0;g_yp.animationFrame=null;g_yp.displayBoxes={};
|
||
document.getElementById('yoloPreviewPlayer').innerHTML='';
|
||
document.getElementById('yoloPreviewModal').classList.remove('open');
|
||
}
|
||
</script>
|
||
{% endblock %}
|