742 lines
39 KiB
HTML
742 lines
39 KiB
HTML
{% extends "app/base.html" %}
|
||
{% load static %}
|
||
|
||
{% block title %}{{ T.nav_biz_algorithms|default:T.nav_algorithms|default:'业务算法' }} - {{ settings.name|default:"Monitor" }}{% endblock %}
|
||
{% block nav_algorithms %}active{% endblock %}
|
||
{% block page_title %}{{ T.nav_biz_algorithms|default:T.nav_algorithms|default:'业务算法' }}{% endblock %}
|
||
|
||
{% block extra_head %}
|
||
<style>
|
||
.biz-page{max-width:1200px;margin:0 auto;}
|
||
.biz-card{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05);overflow:hidden;}
|
||
.biz-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 #eef2f5;gap:10px;flex-wrap:wrap;}
|
||
.biz-head h3{margin:0;font-size:15px;font-weight:600;color:#2c3e50;display:flex;align-items:center;gap:8px;}
|
||
.biz-head h3 .dot{width:8px;height:8px;border-radius:50%;background:#169F85;box-shadow:0 0 0 3px rgba(22,159,133,.15);}
|
||
.biz-table{width:100%;border-collapse:collapse;}
|
||
.biz-table th,.biz-table td{padding:10px 14px;font-size:13px;text-align:left;border-bottom:1px solid #f3f4f6;}
|
||
.biz-table th{background:#fafbfc;color:#6b7280;font-weight:600;font-size:12px;}
|
||
.biz-table tr:hover td{background:#f9fafb;}
|
||
.biz-id-cell{color:#6b7280;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;}
|
||
.biz-actions{display:flex;gap:6px;flex-wrap:wrap;}
|
||
.biz-actions .btn{padding:4px 10px;font-size:11px;}
|
||
.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-flow{background:#e0f2fe;color:#075985;}
|
||
.tag-post{background:#fef3c7;color:#92400e;}
|
||
.btn{padding:7px 14px;font-size:12px;border-radius:6px;border:1px solid #dcdfe6;background:#fff;cursor:pointer;transition:.15s;}
|
||
.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;}
|
||
.biz-empty{padding:48px 20px;text-align:center;color:#9ca3af;font-size:14px;}
|
||
|
||
/* 编辑弹框 — 对齐大模型管理风格 */
|
||
.biz-modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(15,23,42,.38);backdrop-filter:blur(5px);
|
||
display:none;align-items:center;justify-content:center;padding:20px;}
|
||
.biz-modal-overlay.show{display:flex;}
|
||
.biz-modal{width:min(560px,96vw);max-height:92vh;background:#fff;border-radius:14px;
|
||
box-shadow:0 20px 60px rgba(15,23,42,.18);border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden;
|
||
animation:bizModalIn .22s ease;}
|
||
@keyframes bizModalIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
|
||
.biz-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 22px 16px;
|
||
border-bottom:1px solid #eef2f5;background:linear-gradient(135deg,#f8fbfa 0%,#f0f9f6 100%);}
|
||
.biz-modal-title{margin:0;font-size:16px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:8px;}
|
||
.biz-modal-title::before{content:'';width:8px;height:8px;border-radius:50%;background:#169F85;box-shadow:0 0 0 3px rgba(22,159,133,.15);}
|
||
.biz-modal-sub{margin:6px 0 0;font-size:12px;color:#64748b;line-height:1.5;}
|
||
.biz-modal-close{width:34px;height:34px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;color:#64748b;
|
||
font-size:20px;line-height:1;cursor:pointer;flex-shrink:0;}
|
||
.biz-modal-close:hover{border-color:#169F85;color:#169F85;background:#f0f9f6;}
|
||
.biz-modal-body{padding:18px 22px;overflow:auto;flex:1;}
|
||
.biz-modal-foot{padding:14px 22px;border-top:1px solid #eef2f5;display:flex;justify-content:flex-end;gap:10px;background:#fafbfc;}
|
||
.biz-section{margin-bottom:18px;}
|
||
.biz-section:last-child{margin-bottom:0;}
|
||
.biz-section-title{font-size:11px;font-weight:700;color:#169F85;text-transform:uppercase;letter-spacing:.06em;
|
||
margin-bottom:12px;padding-bottom:6px;border-bottom:1px dashed #e2e8f0;}
|
||
.biz-field{margin-bottom:14px;}
|
||
.biz-field:last-child{margin-bottom:0;}
|
||
.biz-field label{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:6px;}
|
||
.biz-input{width:100%;padding:10px 12px;font-size:13px;border:1px solid #e2e8f0;border-radius:8px;
|
||
background:#fff;color:#1e293b;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
|
||
.biz-input:focus{outline:none;border-color:#169F85;box-shadow:0 0 0 3px rgba(22,159,133,.12);}
|
||
.biz-input[disabled]{background:#f8fafc;color:#94a3b8;}
|
||
textarea.biz-input{resize:vertical;min-height:80px;font-family:inherit;line-height:1.5;}
|
||
select.biz-input{cursor:pointer;}
|
||
select.biz-multi-select{width:100%;min-height:140px;padding:6px 8px;font-size:13px;line-height:1.5;
|
||
border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#1e293b;box-sizing:border-box;}
|
||
select.biz-multi-select:focus{outline:none;border-color:#169F85;box-shadow:0 0 0 3px rgba(22,159,133,.12);}
|
||
select.biz-multi-select option{padding:6px 8px;border-radius:4px;margin:1px 0;}
|
||
select.biz-multi-select option:checked{background:#169F85;color:#fff;}
|
||
.biz-hint{font-size:11px;color:#94a3b8;margin-top:5px;line-height:1.4;}
|
||
.flow-panel{display:none;}
|
||
.flow-panel.show{display:block;}
|
||
|
||
/* 模型文件状态徽标 */
|
||
.model-badge{display:inline-block;padding:1px 6px;border-radius:8px;font-size:10px;font-weight:600;margin-left:4px;vertical-align:middle;}
|
||
.model-badge.ok{background:#d1fae5;color:#065f46;}
|
||
.model-badge.miss{background:#fee2e2;color:#991b1b;}
|
||
.model-name-wrap{display:inline-flex;align-items:center;gap:2px;}
|
||
.model-sub{font-size:10px;color:#9ca3af;display:block;margin-top:2px;}
|
||
|
||
/* 分配布控弹框 */
|
||
.assign-modal{width:min(640px,96vw);}
|
||
.assign-toolbar{display:flex;gap:8px;align-items:center;padding:10px 0 12px;border-bottom:1px solid #f3f4f6;margin-bottom:8px;}
|
||
.assign-list{max-height:360px;overflow:auto;border:1px solid #e2e8f0;border-radius:8px;}
|
||
.assign-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #f3f4f6;cursor:pointer;}
|
||
.assign-item:last-child{border-bottom:none;}
|
||
.assign-item:hover{background:#f9fafb;}
|
||
.assign-item input{margin:0;accent-color:#169F85;}
|
||
.assign-item .nm{font-size:13px;color:#1f2937;font-weight:500;flex:1;}
|
||
.assign-item .sub{font-size:11px;color:#9ca3af;}
|
||
.assign-empty{padding:32px;text-align:center;color:#9ca3af;font-size:13px;}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="biz-page">
|
||
<div class="biz-card">
|
||
<div class="biz-head">
|
||
<h3><span class="dot"></span>{{ T.biz_algo_title|default:'业务算法' }}</h3>
|
||
<button type="button" class="btn btn-primary" onclick="openAdd()">+ {{ T.biz_algo_add|default:'添加业务算法' }}</button>
|
||
</div>
|
||
<table class="biz-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{{ T.th_id|default:'ID' }}</th>
|
||
<th>{{ T.col_name|default:'名称' }}</th>
|
||
<th>{{ T.biz_flow_type|default:'流程' }}</th>
|
||
<th>{{ T.biz_small_model|default:'小模型' }}</th>
|
||
<th>{{ T.biz_targets|default:'目标' }}</th>
|
||
<th>{{ T.biz_llm|default:'大模型' }}</th>
|
||
<th>{{ T.biz_post_process|default:'后处理' }}</th>
|
||
<th>{{ T.biz_zone_count|default:'布控' }}</th>
|
||
<th>{{ T.col_state|default:'状态' }}</th>
|
||
<th>{{ T.col_actions|default:'操作' }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tbody"></tbody>
|
||
</table>
|
||
<div class="biz-empty" id="empty" style="display:none;">{{ T.biz_algo_empty|default:'暂无业务算法，点击右上角添加' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加/编辑 -->
|
||
<div class="biz-modal-overlay" id="modal" onclick="if(event.target===this)closeModal()">
|
||
<div class="biz-modal" role="dialog">
|
||
<div class="biz-modal-head">
|
||
<div>
|
||
<h3 class="biz-modal-title" id="modalTitle">{{ T.biz_algo_add|default:'添加业务算法' }}</h3>
|
||
<p class="biz-modal-sub" id="modalSub">{{ T.biz_modal_sub|default:'配置推理流程与后处理业务逻辑，保存后在布控管理中绑定区域' }}</p>
|
||
</div>
|
||
<button type="button" class="biz-modal-close" onclick="closeModal()">×</button>
|
||
</div>
|
||
<div class="biz-modal-body">
|
||
<input type="hidden" id="f_id">
|
||
<div class="biz-section">
|
||
<div class="biz-section-title">{{ T.biz_section_basic|default:'基本信息' }}</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_algo_name|default:'业务算法名称' }}</label>
|
||
<input type="text" class="biz-input" id="f_name" placeholder="{{ T.biz_algo_name_ph|default:'如：周界入侵-人员' }}">
|
||
</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_flow_type|default:'流程类型' }}</label>
|
||
<select class="biz-input" id="f_flow_type" onchange="onFlowChange()">
|
||
<option value="1">{{ T.biz_flow_1|default:'小模型 + 后处理' }}</option>
|
||
<option value="2">{{ T.biz_flow_2|default:'大模型 + 后处理' }}</option>
|
||
<option value="3">{{ T.biz_flow_3|default:'小模型 + 大模型 + 后处理' }}</option>
|
||
<option value="4">{{ T.biz_flow_4|default:'检测小模型 + ReID小模型 + 后处理' }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="biz-section flow-panel show" id="panelSmall">
|
||
<div class="biz-section-title" id="panelSmallTitle">{{ T.biz_section_small|default:'小模型推理' }}</div>
|
||
<div class="biz-field" id="fieldDetector" style="display:none;">
|
||
<label>{{ T.biz_detector_model|default:'检测小模型 (YOLO)' }} *</label>
|
||
<select class="biz-input" id="f_detector_model" onchange="onDetectorModelChange()"></select>
|
||
<div class="biz-hint" id="detectorModelHint" style="display:none;"></div>
|
||
</div>
|
||
<div class="biz-field">
|
||
<label id="labelSmallModel">{{ T.biz_small_model|default:'小模型' }}</label>
|
||
<select class="biz-input" id="f_small_model" onchange="onSmallModelChange()"></select>
|
||
<div class="biz-hint" id="smallModelHint" style="display:none;"></div>
|
||
</div>
|
||
<div class="biz-field" id="fieldReidHint" style="display:none;">
|
||
<div class="biz-hint" style="color:#1e40af;background:#eff6ff;padding:8px 10px;border-radius:6px;">
|
||
{{ T.biz_reid_flow_hint|default:'ReID 不能单独检测全图：先用 YOLO 定位目标，再用 OSNet 提取特征并关联 track_id，最后执行后处理（如越线计数）。' }}
|
||
</div>
|
||
</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_targets|default:'检测目标' }}</label>
|
||
<select class="biz-multi-select" id="f_target_labels" multiple size="6"></select>
|
||
<div class="biz-hint">{{ T.biz_targets_multi_hint|default:'单击选择；按住 Ctrl（Mac 为 ⌘）可多选' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="biz-section flow-panel" id="panelLlm">
|
||
<div class="biz-section-title">{{ T.biz_section_llm|default:'大模型推理' }}</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_llm|default:'大模型' }}</label>
|
||
<select class="biz-input" id="f_llm"></select>
|
||
</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_llm_prompt|default:'提示词' }}</label>
|
||
<textarea class="biz-input" id="f_llm_prompt" placeholder="{{ T.biz_llm_prompt_ph|default:'描述需要大模型判断的场景…' }}"></textarea>
|
||
</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_llm_validate|default:'提示词校验值' }}</label>
|
||
<input type="text" class="biz-input" id="f_llm_validate" placeholder="{{ T.biz_llm_validate_ph|default:'多个关键词用英文逗号分隔' }}">
|
||
<div class="biz-hint">{{ T.biz_llm_validate_hint|default:'大模型回复中包含任一关键词则通过校验' }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="biz-section">
|
||
<div class="biz-section-title">{{ T.biz_section_post|default:'后处理' }}</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.biz_post_process|default:'后处理逻辑' }}</label>
|
||
<div style="display:flex;gap:8px;align-items:center;">
|
||
<select class="biz-input" id="f_post_process" style="flex:1;">
|
||
<option value="AREA">{{ T.biz_post_area|default:'区域入侵' }}</option>
|
||
<option value="LINE_CROSS">{{ T.biz_post_line_cross|default:'越线检测' }}</option>
|
||
<option value="LINE_COUNT">{{ T.biz_post_line_count|default:'越线计数' }}</option>
|
||
<option value="DIRECTION">{{ T.biz_post_direction|default:'方向入侵' }}</option>
|
||
<option value="DENSITY">{{ T.biz_post_density|default:'密度报警' }}</option>
|
||
<option value="DWELL">{{ T.biz_post_dwell|default:'滞留报警' }}</option>
|
||
</select>
|
||
<button type="button" class="btn" style="white-space:nowrap;" onclick="openPostHelp()">？{{ T.biz_post_help|default:'说明' }}</button>
|
||
</div>
|
||
<div class="biz-hint" id="postHint">{{ T.biz_post_area_hint|default:'目标中心进入布控多边形即触发报警' }}</div>
|
||
</div>
|
||
<div class="biz-field" id="panelLineCount" style="display:none;">
|
||
<label>{{ T.biz_line_count_threshold|default:'计数报警阈值' }}</label>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||
<div>
|
||
<span style="font-size:11px;color:#64748b;">{{ T.biz_forward_count|default:'正向 (A→B)' }}</span>
|
||
<input type="number" class="biz-input" id="f_forward_count_threshold" min="0" value="0" placeholder="0=不报警">
|
||
</div>
|
||
<div>
|
||
<span style="font-size:11px;color:#64748b;">{{ T.biz_reverse_count|default:'逆向 (B→A)' }}</span>
|
||
<input type="number" class="biz-input" id="f_reverse_count_threshold" min="0" value="0" placeholder="0=不报警">
|
||
</div>
|
||
</div>
|
||
<div class="biz-hint">{{ T.biz_line_count_threshold_hint|default:'累计过线人数达到阈值时触发报警；0 表示该方向不计数报警。布控需绘制矩形区域 + 方向线 A→B 定义正向。' }}</div>
|
||
</div>
|
||
<div class="biz-field">
|
||
<label>{{ T.col_state|default:'状态' }}</label>
|
||
<select class="biz-input" id="f_state">
|
||
<option value="1">{{ T.state_enabled|default:'启用' }}</option>
|
||
<option value="0">{{ T.state_disabled|default:'禁用' }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="biz-modal-foot">
|
||
<button type="button" class="btn" onclick="closeModal()">{{ T.btn_cancel|default:'取消' }}</button>
|
||
<button type="button" class="btn btn-primary" onclick="saveForm()">{{ T.btn_save|default:'保存' }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分配布控 -->
|
||
<div class="biz-modal-overlay" id="assignModal" onclick="if(event.target===this)closeAssignModal()">
|
||
<div class="biz-modal assign-modal" role="dialog">
|
||
<div class="biz-modal-head">
|
||
<div>
|
||
<h3 class="biz-modal-title" id="assignTitle">{{ T.biz_assign_zones|default:'分配布控' }}</h3>
|
||
<p class="biz-modal-sub" id="assignSub">{{ T.biz_assign_zones_sub|default:'勾选需要绑定该业务算法的布控区域' }}</p>
|
||
</div>
|
||
<button type="button" class="biz-modal-close" onclick="closeAssignModal()">×</button>
|
||
</div>
|
||
<div class="biz-modal-body" style="padding-top:8px;">
|
||
<div class="assign-toolbar">
|
||
<button type="button" class="btn" style="padding:4px 10px;font-size:11px;" onclick="toggleAllZones(true)">{{ T.alg_select_all|default:'全选' }}</button>
|
||
<button type="button" class="btn" style="padding:4px 10px;font-size:11px;" onclick="toggleAllZones(false)">{{ T.alg_select_none|default:'全不选' }}</button>
|
||
<span id="assignCount" style="font-size:11px;color:#6b7280;margin-left:auto;"></span>
|
||
</div>
|
||
<div class="assign-list" id="assignList"></div>
|
||
</div>
|
||
<div class="biz-modal-foot">
|
||
<button type="button" class="btn" onclick="closeAssignModal()">{{ T.btn_cancel|default:'取消' }}</button>
|
||
<button type="button" class="btn btn-primary" onclick="submitAssign()">{{ T.biz_save_assign|default:'保存分配' }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 后处理说明 -->
|
||
<div class="biz-modal-overlay" id="postHelpModal" onclick="if(event.target===this)closePostHelp()">
|
||
<div class="biz-modal" role="dialog" style="width:min(680px,96vw);">
|
||
<div class="biz-modal-head">
|
||
<div>
|
||
<h3 class="biz-modal-title">{{ T.biz_post_help_title|default:'后处理方案说明' }}</h3>
|
||
<p class="biz-modal-sub">{{ T.biz_post_help_sub|default:'共 6 种后处理，按场景选择' }}</p>
|
||
</div>
|
||
<button type="button" class="biz-modal-close" onclick="closePostHelp()">×</button>
|
||
</div>
|
||
<div class="biz-modal-body">
|
||
<div class="post-help-item" style="padding:14px 0;border-bottom:1px solid #f3f4f6;">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="tag tag-post" style="background:#d1fae5;color:#065f46;">AREA</span>
|
||
<b style="font-size:14px;color:#1e293b;">{{ T.biz_post_area|default:'区域入侵' }}</b>
|
||
</div>
|
||
<div style="font-size:13px;color:#475569;line-height:1.6;">
|
||
{{ T.biz_post_area_desc|default:'目标中心点进入布控多边形内即触发报警。适用于周界防范、禁入区域、危险区域等场景。' }}
|
||
</div>
|
||
</div>
|
||
<div class="post-help-item" style="padding:14px 0;border-bottom:1px solid #f3f4f6;">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="tag tag-post" style="background:#dbeafe;color:#1e40af;">LINE_CROSS</span>
|
||
<b style="font-size:14px;color:#1e293b;">{{ T.biz_post_line_cross|default:'越线检测' }}</b>
|
||
</div>
|
||
<div style="font-size:13px;color:#475569;line-height:1.6;">
|
||
{{ T.biz_post_line_cross_desc|default:'有人沿方向线正向（A→B）跨过警戒线时，立即触发一次报警。适用于围栏越界、禁止闯入等「一过线就报」的场景。' }}
|
||
</div>
|
||
</div>
|
||
<div class="post-help-item" style="padding:14px 0;border-bottom:1px solid #f3f4f6;">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="tag tag-post" style="background:#cffafe;color:#0e7490;">LINE_COUNT</span>
|
||
<b style="font-size:14px;color:#1e293b;">{{ T.biz_post_line_count|default:'越线计数' }}</b>
|
||
</div>
|
||
<div style="font-size:13px;color:#475569;line-height:1.6;">
|
||
{{ T.biz_post_line_count_desc|default:'按方向线 A→B 分别累计正向、逆向过线人数；累计达到阈值才报警。适用于人流统计、限流等场景。' }}
|
||
</div>
|
||
<div style="font-size:12px;color:#64748b;margin-top:8px;padding:8px 10px;background:#f8fafc;border-radius:6px;">
|
||
{{ T.biz_post_line_diff|default:'与越线检测的区别：越线检测是「过线立刻报」；越线计数是「累计到 N 人才报」，并可分别统计正向/逆向。' }}
|
||
</div>
|
||
</div>
|
||
<div class="post-help-item" style="padding:14px 0;border-bottom:1px solid #f3f4f6;">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="tag tag-post" style="background:#fef3c7;color:#92400e;">DIRECTION</span>
|
||
<b style="font-size:14px;color:#1e293b;">{{ T.biz_post_direction|default:'方向入侵' }}</b>
|
||
</div>
|
||
<div style="font-size:13px;color:#475569;line-height:1.6;">
|
||
{{ T.biz_post_direction_desc|default:'目标在区域内移动时，若运动方向与设定方向一致则报警。适用于单向通行、逆行检测等场景。' }}
|
||
</div>
|
||
</div>
|
||
<div class="post-help-item" style="padding:14px 0;border-bottom:1px solid #f3f4f6;">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="tag tag-post" style="background:#f3e8ff;color:#6b21a8;">DENSITY</span>
|
||
<b style="font-size:14px;color:#1e293b;">{{ T.biz_post_density|default:'密度报警' }}</b>
|
||
</div>
|
||
<div style="font-size:13px;color:#475569;line-height:1.6;">
|
||
{{ T.biz_post_density_desc|default:'布控区域内同时存在的目标数达到或超过阈值时报警。适用于人群聚集、排队过长、车辆拥堵等场景。' }}
|
||
</div>
|
||
</div>
|
||
<div class="post-help-item" style="padding:14px 0;">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||
<span class="tag tag-post" style="background:#fee2e2;color:#991b1b;">DWELL</span>
|
||
<b style="font-size:14px;color:#1e293b;">{{ T.biz_post_dwell|default:'滞留报警' }}</b>
|
||
</div>
|
||
<div style="font-size:13px;color:#475569;line-height:1.6;">
|
||
{{ T.biz_post_dwell_desc|default:'目标在布控区域内停留时间超过滞留阈值（秒）时报警。与区域入侵不同：区域入侵是进入即报，滞留是待够时间才报。' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="biz-modal-foot">
|
||
<button type="button" class="btn btn-primary" onclick="closePostHelp()">{{ T.btn_ok|default:'我知道了' }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script>
|
||
var g_options = {small_models:[], llms:[]};
|
||
var g_assignBizId = 0;
|
||
|
||
function _t(k,d){ return (window.T && window.T[k]) || d; }
|
||
function esc(s){ return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/"/g,'"'); }
|
||
|
||
function loadOptions(cb){
|
||
Api.get('/algorithm/openOptions').then(function(res){
|
||
if(res.code===1000){ g_options = res.data || g_options; fillSelects(); if(cb) cb(); }
|
||
});
|
||
}
|
||
|
||
function fillSelects(){
|
||
refreshModelSelects();
|
||
var ll = document.getElementById('f_llm');
|
||
ll.innerHTML = '<option value="">'+_t('please_select','请选择')+'</option>';
|
||
(g_options.llms||[]).forEach(function(m){
|
||
var label = m.name || m.model_name || (m.id ? ('#'+m.id) : '');
|
||
ll.innerHTML += '<option value="'+m.id+'">'+esc(label)+'</option>';
|
||
});
|
||
}
|
||
|
||
function isDetectModel(m){
|
||
return m && (m.task_type || 'detect').toLowerCase() !== 'reid';
|
||
}
|
||
function isReidModel(m){
|
||
return m && (m.task_type || '').toLowerCase() === 'reid';
|
||
}
|
||
|
||
function modelOptionLabel(m){
|
||
var flag = m.model_file_exists ? ' [✓就绪]' : (m.model_file ? ' [✗文件缺失]' : ' [✗未配置]');
|
||
return esc(m.name) + flag;
|
||
}
|
||
|
||
function refreshModelSelects(){
|
||
var ft = getFlowType();
|
||
var isReidFlow = ft === 4;
|
||
var detSel = document.getElementById('f_detector_model');
|
||
var smSel = document.getElementById('f_small_model');
|
||
var prevDet = detSel ? detSel.value : '';
|
||
var prevSm = smSel ? smSel.value : '';
|
||
if(detSel){
|
||
detSel.innerHTML = '<option value="">'+_t('please_select','请选择')+'</option>';
|
||
(g_options.small_models||[]).filter(isDetectModel).forEach(function(m){
|
||
detSel.innerHTML += '<option value="'+m.id+'">'+modelOptionLabel(m)+'</option>';
|
||
});
|
||
if(prevDet) detSel.value = prevDet;
|
||
}
|
||
if(smSel){
|
||
smSel.innerHTML = '<option value="">'+_t('please_select','请选择')+'</option>';
|
||
var list = isReidFlow
|
||
? (g_options.small_models||[]).filter(isReidModel)
|
||
: (g_options.small_models||[]).filter(isDetectModel);
|
||
list.forEach(function(m){
|
||
smSel.innerHTML += '<option value="'+m.id+'">'+modelOptionLabel(m)+'</option>';
|
||
});
|
||
if(prevSm) smSel.value = prevSm;
|
||
}
|
||
document.getElementById('fieldDetector').style.display = isReidFlow ? '' : 'none';
|
||
document.getElementById('fieldReidHint').style.display = isReidFlow ? '' : 'none';
|
||
document.getElementById('labelSmallModel').textContent = isReidFlow
|
||
? _t('biz_reid_model','ReID 小模型 (OSNet)')
|
||
: _t('biz_small_model','小模型');
|
||
document.getElementById('panelSmallTitle').textContent = isReidFlow
|
||
? _t('biz_section_detect_reid','检测 + ReID 推理')
|
||
: _t('biz_section_small','小模型推理');
|
||
}
|
||
|
||
function onFlowChange(){
|
||
var ft = getFlowType();
|
||
document.getElementById('panelSmall').classList.toggle('show', ft===1 || ft===3 || ft===4);
|
||
document.getElementById('panelLlm').classList.toggle('show', ft===2 || ft===3);
|
||
refreshModelSelects();
|
||
onDetectorModelChange();
|
||
onSmallModelChange();
|
||
}
|
||
|
||
function showModelHint(el, m){
|
||
if(!el) return;
|
||
if(!m){ el.style.display='none'; return; }
|
||
el.style.display = 'block';
|
||
if(m.model_file_exists){
|
||
el.style.color = '#065f46';
|
||
el.innerHTML = '✓ 模型文件已就绪：<b>'+esc(m.model_file)+'</b>'+(m.engine?(' · 引擎 '+esc(m.engine)):'');
|
||
} else if(m.model_file){
|
||
el.style.color = '#991b1b';
|
||
el.innerHTML = '✗ 模型文件不存在：<b>'+esc(m.model_file)+'</b>，请到「小模型管理」上传或修改路径';
|
||
} else {
|
||
el.style.color = '#991b1b';
|
||
el.innerHTML = '✗ 未配置模型文件，请到「小模型管理」设置模型文件路径';
|
||
}
|
||
}
|
||
|
||
function onDetectorModelChange(){
|
||
if(getFlowType() !== 4) return;
|
||
var id = parseInt(document.getElementById('f_detector_model').value, 10);
|
||
var m = (g_options.small_models||[]).find(function(x){ return x.id===id; });
|
||
fillTargetSelect(m ? m.labels : [], getSelectedTargets());
|
||
showModelHint(document.getElementById('detectorModelHint'), m);
|
||
}
|
||
|
||
function getFlowType(){
|
||
return parseInt(document.getElementById('f_flow_type').value, 10) || 1;
|
||
}
|
||
|
||
function onSmallModelChange(){
|
||
var ft = getFlowType();
|
||
var id = parseInt(document.getElementById('f_small_model').value, 10);
|
||
var m = (g_options.small_models||[]).find(function(x){ return x.id===id; });
|
||
if(ft === 4){
|
||
showModelHint(document.getElementById('smallModelHint'), m);
|
||
return;
|
||
}
|
||
fillTargetSelect(m ? m.labels : [], []);
|
||
showModelHint(document.getElementById('smallModelHint'), m);
|
||
}
|
||
|
||
function fillTargetSelect(labels, selected){
|
||
var sel = document.getElementById('f_target_labels');
|
||
if(!sel) return;
|
||
sel.innerHTML = '';
|
||
if(!labels || !labels.length){
|
||
var o = document.createElement('option');
|
||
o.disabled = true;
|
||
o.textContent = _t('biz_no_labels','请先选择小模型');
|
||
sel.appendChild(o);
|
||
return;
|
||
}
|
||
var selSet = {};
|
||
(selected||[]).forEach(function(lb){ selSet[lb] = true; });
|
||
labels.forEach(function(lb){
|
||
var o = document.createElement('option');
|
||
o.value = lb;
|
||
o.textContent = lb;
|
||
if(selSet[lb]) o.selected = true;
|
||
sel.appendChild(o);
|
||
});
|
||
}
|
||
|
||
function getSelectedTargets(){
|
||
var sel = document.getElementById('f_target_labels');
|
||
if(!sel) return [];
|
||
return Array.from(sel.selectedOptions).map(function(o){ return o.value; });
|
||
}
|
||
|
||
function sortByIdDesc(list){
|
||
return (list || []).slice().sort(function(a, b){ return (parseInt(b.id, 10) || 0) - (parseInt(a.id, 10) || 0); });
|
||
}
|
||
|
||
function loadList(){
|
||
Api.get('/algorithm/openIndex').then(function(res){
|
||
var rows = sortByIdDesc(res.data || []);
|
||
document.getElementById('empty').style.display = rows.length ? 'none' : 'block';
|
||
document.getElementById('tbody').innerHTML = rows.map(function(r){
|
||
var targets = (r.target_labels||[]).join(', ') || '—';
|
||
var st = r.state===1
|
||
? '<span class="tag tag-on">'+_t('state_enabled','启用')+'</span>'
|
||
: '<span class="tag tag-off">'+_t('state_disabled','禁用')+'</span>';
|
||
// 小模型列：显示名称 + 文件状态徽标
|
||
var smCell = '—';
|
||
if(r.flow_type === 4){
|
||
var parts = [];
|
||
if(r.detector_model_name){
|
||
parts.push('<div><span style="font-size:10px;color:#64748b;">YOLO</span> <b>'+esc(r.detector_model_name)+'</b></div>');
|
||
}
|
||
if(r.small_model_name){
|
||
parts.push('<div><span style="font-size:10px;color:#64748b;">ReID</span> <b>'+esc(r.small_model_name)+'</b></div>');
|
||
}
|
||
smCell = parts.length ? parts.join('') : '—';
|
||
} else if(r.small_model_name){
|
||
var hasFile = !!r.small_model_file_exists;
|
||
var badge = hasFile
|
||
? '<span class="model-badge ok">✓就绪</span>'
|
||
: '<span class="model-badge miss">✗'+(r.small_model_file?'文件缺失':'未配置')+'</span>';
|
||
var sub = hasFile
|
||
? '<span class="model-sub">'+esc(r.small_model_engine||'')+(r.small_model_file?' · '+esc(r.small_model_file):'')+'</span>'
|
||
: '<span class="model-sub">'+(r.small_model_file?('文件: '+esc(r.small_model_file)):'未配置模型文件')+'</span>';
|
||
smCell = '<div class="model-name-wrap"><b>'+esc(r.small_model_name)+'</b>'+badge+'</div>'+sub;
|
||
}
|
||
return '<tr>'
|
||
+'<td class="biz-id-cell">'+r.id+'</td>'
|
||
+'<td><b>'+esc(r.name)+'</b></td>'
|
||
+'<td><span class="tag tag-flow">'+esc(r.flow_type_name)+'</span></td>'
|
||
+'<td>'+smCell+'</td>'
|
||
+'<td style="max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="'+esc(targets)+'">'+esc(targets)+'</td>'
|
||
+'<td>'+esc(r.llm_name||'—')+'</td>'
|
||
+'<td><span class="tag tag-post">'+esc(r.post_process_name)+'</span></td>'
|
||
+'<td>'+(r.zone_count||0)+'</td>'
|
||
+'<td>'+st+'</td>'
|
||
+'<td><div class="biz-actions">'
|
||
+'<button class="btn" onclick="openEdit('+r.id+')">'+_t('btn_edit','编辑')+'</button>'
|
||
+'<button class="btn" onclick="openAssignModal('+r.id+')">'+_t('biz_assign','分配')+'</button>'
|
||
+'<button class="btn" onclick="delRow('+r.id+')">'+_t('btn_delete','删除')+'</button>'
|
||
+'</div></td></tr>';
|
||
}).join('');
|
||
});
|
||
}
|
||
|
||
function openAdd(){
|
||
document.getElementById('modalTitle').textContent = _t('biz_algo_add','添加业务算法');
|
||
document.getElementById('f_id').value = '';
|
||
document.getElementById('f_name').value = '';
|
||
document.getElementById('f_flow_type').value = '1';
|
||
document.getElementById('f_detector_model').value = '';
|
||
document.getElementById('f_small_model').value = '';
|
||
document.getElementById('f_llm').value = '';
|
||
document.getElementById('f_llm_prompt').value = '';
|
||
document.getElementById('f_llm_validate').value = '';
|
||
document.getElementById('f_post_process').value = 'AREA';
|
||
document.getElementById('f_forward_count_threshold').value = '0';
|
||
document.getElementById('f_reverse_count_threshold').value = '0';
|
||
document.getElementById('f_state').value = '1';
|
||
onFlowChange();
|
||
onPostChange();
|
||
fillTargetSelect([], []);
|
||
onSmallModelChange();
|
||
document.getElementById('modal').classList.add('show');
|
||
}
|
||
|
||
function openEdit(id){
|
||
Api.get('/algorithm/openIndex').then(function(res){
|
||
var r = (res.data||[]).find(function(x){ return x.id===id; });
|
||
if(!r) return;
|
||
document.getElementById('modalTitle').textContent = _t('biz_algo_edit','编辑业务算法');
|
||
document.getElementById('f_id').value = r.id;
|
||
document.getElementById('f_name').value = r.name;
|
||
document.getElementById('f_flow_type').value = String(r.flow_type);
|
||
onFlowChange();
|
||
document.getElementById('f_detector_model').value = r.detector_model_id || '';
|
||
document.getElementById('f_small_model').value = r.small_model_id || '';
|
||
if(r.flow_type === 4){
|
||
var det = (g_options.small_models||[]).find(function(x){ return x.id===r.detector_model_id; });
|
||
fillTargetSelect(det ? det.labels : [], r.target_labels || []);
|
||
onDetectorModelChange();
|
||
} else {
|
||
var m = (g_options.small_models||[]).find(function(x){ return x.id===r.small_model_id; });
|
||
fillTargetSelect(m ? m.labels : [], r.target_labels || []);
|
||
}
|
||
onSmallModelChange();
|
||
(function(){
|
||
var llSel = document.getElementById('f_llm');
|
||
// 清理上次编辑时插入的“已禁用回显项”
|
||
Array.from(llSel.querySelectorAll('option[data-echo="1"]')).forEach(function(o){ o.remove(); });
|
||
// 若引用的 LLM 被禁用（不在启用列表中），补一个回显项，避免看起来像配置丢失
|
||
if (r.llm_id && !llSel.querySelector('option[value="'+r.llm_id+'"]')) {
|
||
var opt = document.createElement('option');
|
||
opt.value = r.llm_id;
|
||
opt.textContent = (r.llm_name || ('#'+r.llm_id)) + ' ['+_t('state_disabled','禁用')+']';
|
||
opt.setAttribute('data-echo','1');
|
||
llSel.appendChild(opt);
|
||
}
|
||
llSel.value = r.llm_id || '';
|
||
})();
|
||
document.getElementById('f_llm_prompt').value = r.llm_prompt || '';
|
||
document.getElementById('f_llm_validate').value = r.llm_validate || '';
|
||
document.getElementById('f_post_process').value = r.post_process || 'AREA';
|
||
document.getElementById('f_forward_count_threshold').value = r.forward_count_threshold || 0;
|
||
document.getElementById('f_reverse_count_threshold').value = r.reverse_count_threshold || 0;
|
||
document.getElementById('f_state').value = String(r.state);
|
||
onPostChange();
|
||
document.getElementById('modal').classList.add('show');
|
||
});
|
||
}
|
||
|
||
function closeModal(){ document.getElementById('modal').classList.remove('show'); }
|
||
|
||
function saveForm(){
|
||
var payload = {
|
||
id: document.getElementById('f_id').value,
|
||
name: document.getElementById('f_name').value.trim(),
|
||
flow_type: getFlowType(),
|
||
small_model_id: document.getElementById('f_small_model').value,
|
||
detector_model_id: document.getElementById('f_detector_model').value,
|
||
target_labels: getSelectedTargets(),
|
||
llm_id: document.getElementById('f_llm').value,
|
||
llm_prompt: document.getElementById('f_llm_prompt').value.trim(),
|
||
llm_validate: document.getElementById('f_llm_validate').value.trim(),
|
||
post_process: document.getElementById('f_post_process').value,
|
||
forward_count_threshold: parseInt(document.getElementById('f_forward_count_threshold').value, 10) || 0,
|
||
reverse_count_threshold: parseInt(document.getElementById('f_reverse_count_threshold').value, 10) || 0,
|
||
state: document.getElementById('f_state').value
|
||
};
|
||
var url = payload.id ? '/algorithm/openEdit' : '/algorithm/openAdd';
|
||
Api.post(url, payload).then(function(res){
|
||
if(res.code===1000){ closeModal(); loadList(); showToast(res.msg||_t('msg_success','成功'), 'success'); }
|
||
else showToast(res.msg||_t('msg_failed','失败'), 'error');
|
||
});
|
||
}
|
||
|
||
function delRow(id){
|
||
// 删除前先查询该算法是否被布控引用，有引用则直接弹提示，不进入删除流程
|
||
Api.get('/algorithm/openAssignContext', {biz_algorithm_id: id}).then(function(res){
|
||
if(res.code!==1000 || !res.data){
|
||
// 查询失败，回退到直接删除（后端会再次校验）
|
||
_doDelBiz(id);
|
||
return;
|
||
}
|
||
var zones = (res.data.zones || []).filter(function(z){ return z.selected; });
|
||
if(zones.length){
|
||
var names = zones.map(function(z){
|
||
return (z.stream_name||('#'+z.stream_id)) + '/' + (z.zone_name||('#'+z.id));
|
||
}).join('、');
|
||
showToast('该算法已被 '+zones.length+' 个布控引用，请先在「分配布控」中解除绑定后再删除：'+names, 'error', 6000);
|
||
return;
|
||
}
|
||
_doDelBiz(id);
|
||
}).catch(function(){ _doDelBiz(id); });
|
||
}
|
||
|
||
function _doDelBiz(id){
|
||
if(!confirm(_t('confirm_delete','确定删除？'))) return;
|
||
Api.post('/algorithm/openDel', {id:id}).then(function(res){
|
||
if(res.code===1000) loadList();
|
||
showToast(res.msg||(res.code===1000?_t('msg_success','成功'):_t('msg_failed','失败')), res.code===1000?'success':'error');
|
||
});
|
||
}
|
||
|
||
function openAssignModal(bizId){
|
||
g_assignBizId = bizId;
|
||
document.getElementById('assignModal').classList.add('show');
|
||
Api.get('/algorithm/openAssignContext', {biz_algorithm_id: bizId}).then(function(res){
|
||
if(res.code!==1000){ showToast(res.msg||_t('msg_failed','失败'), 'error'); return; }
|
||
var biz = res.data.biz_algorithm || {};
|
||
document.getElementById('assignTitle').textContent = _t('biz_assign_for','分配布控 · ')+ (biz.name||('#'+bizId));
|
||
var zones = res.data.zones || [];
|
||
var list = document.getElementById('assignList');
|
||
if(!zones.length){
|
||
list.innerHTML = '<div class="assign-empty">'+_t('biz_no_zones','暂无布控区域，请先到布控管理添加')+'</div>';
|
||
updateAssignCount();
|
||
return;
|
||
}
|
||
list.innerHTML = zones.map(function(z){
|
||
var stateTag = z.state === 1
|
||
? ''
|
||
: ' · <span style="color:#9ca3af;">'+_t('zone_disabled','禁用')+'</span>';
|
||
return '<label class="assign-item">'
|
||
+'<input type="checkbox" value="'+z.id+'"'+(z.selected?' checked':'')+'>'
|
||
+'<span class="nm">'+esc(z.zone_name)+stateTag+'</span>'
|
||
+'<span class="sub">'+esc(z.stream_name||('stream#'+z.stream_id))+'</span>'
|
||
+'</label>';
|
||
}).join('');
|
||
list.querySelectorAll('input').forEach(function(cb){ cb.addEventListener('change', updateAssignCount); });
|
||
updateAssignCount();
|
||
});
|
||
}
|
||
|
||
function closeAssignModal(){ document.getElementById('assignModal').classList.remove('show'); }
|
||
|
||
function toggleAllZones(check){
|
||
document.querySelectorAll('#assignList input[type=checkbox]').forEach(function(cb){ cb.checked = check; });
|
||
updateAssignCount();
|
||
}
|
||
|
||
function updateAssignCount(){
|
||
var n = document.querySelectorAll('#assignList input[type=checkbox]:checked').length;
|
||
document.getElementById('assignCount').textContent = _t('biz_zones_selected','已选 {n} 个布控').replace('{n}', n);
|
||
}
|
||
|
||
function submitAssign(){
|
||
var ids = Array.from(document.querySelectorAll('#assignList input[type=checkbox]:checked')).map(function(cb){
|
||
return parseInt(cb.value, 10);
|
||
});
|
||
Api.post('/algorithm/openAssignZones', {biz_algorithm_id: g_assignBizId, zone_ids: ids}).then(function(res){
|
||
showToast(res.msg||(res.code===1000?_t('msg_success','成功'):_t('msg_failed','失败')), res.code===1000?'success':'error');
|
||
if(res.code===1000){ closeAssignModal(); loadList(); }
|
||
});
|
||
}
|
||
|
||
document.addEventListener('keydown', function(e){
|
||
if(e.key!=='Escape') return;
|
||
if(document.getElementById('modal').classList.contains('show')) closeModal();
|
||
if(document.getElementById('assignModal').classList.contains('show')) closeAssignModal();
|
||
if(document.getElementById('postHelpModal').classList.contains('show')) closePostHelp();
|
||
});
|
||
|
||
// 后处理说明弹框
|
||
function openPostHelp(){ document.getElementById('postHelpModal').classList.add('show'); }
|
||
function closePostHelp(){ document.getElementById('postHelpModal').classList.remove('show'); }
|
||
|
||
// 下拉联动：切换提示文案
|
||
var POST_HINTS = {
|
||
'AREA': '{{ T.biz_post_area_hint|default:"目标中心进入布控多边形即触发报警" }}',
|
||
'LINE_CROSS': '{{ T.biz_post_line_cross_hint|default:"目标轨迹跨过警戒线 line_a→line_b 触发，需在布控区域配置警戒线" }}',
|
||
'LINE_COUNT': '{{ T.biz_post_line_count_hint|default:"按方向线 A→B 统计正向/逆向过线，达到阈值报警；布控需绘制矩形+方向线" }}',
|
||
'DIRECTION': '{{ T.biz_post_direction_hint|default:"目标移动方向匹配 ref_angle 触发，参考角度 0=东 90=南 180=西 270=北" }}',
|
||
'DENSITY': '{{ T.biz_post_density_hint|default:"区域内目标数 ≥ density_threshold 触发，需在布控区域配置密度阈值" }}',
|
||
'DWELL': '{{ T.biz_post_dwell_hint|default:"目标在区域内停留 ≥ loiter_threshold 秒触发" }}'
|
||
};
|
||
function onPostChange(){
|
||
var v = document.getElementById('f_post_process').value;
|
||
document.getElementById('postHint').textContent = POST_HINTS[v] || '';
|
||
var panel = document.getElementById('panelLineCount');
|
||
if(panel) panel.style.display = (v === 'LINE_COUNT') ? 'block' : 'none';
|
||
}
|
||
document.getElementById('f_post_process').addEventListener('change', onPostChange);
|
||
|
||
loadOptions(function(){ loadList(); });
|
||
</script>
|
||
{% endblock %}
|