| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>恒达视觉智能监控平台</title>
- <link rel="icon" href="/logo.ico" type="image/x-icon">
- <link rel="icon" href="/logo.png" type="image/png">
- <style>
- *{margin:0;padding:0;box-sizing:border-box}
- body{font-family:system-ui,sans-serif;background:#1a1a2e;color:#eee}
- .header{background:#16213e;padding:12px 24px;display:flex;align-items:center;gap:16px;border-bottom:2px solid #0f3460}
- .header h1{font-size:18px;color:#e94560}
- .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:bold}
- .status-on{background:#27ae60;color:#fff}
- .status-off{background:#e74c3c;color:#fff}
- .main{display:flex;height:calc(100vh - 52px)}
- .sidebar{width:320px;background:#16213e;padding:16px;overflow-y:auto;border-right:1px solid #0f3460}
- .sidebar h3{color:#e94560;margin-bottom:12px;font-size:14px}
- .form-group{margin-bottom:14px}
- .form-group label{display:block;font-size:13px;color:#aaa;margin-bottom:4px}
- .form-group input,.form-group select{width:100%;padding:8px;border:1px solid #0f3460;border-radius:6px;background:#1a1a2e;color:#eee;font-size:13px}
- .form-group input[type=number]{width:100px}
- .form-group input[type=checkbox]{width:15px;height:15px;cursor:pointer;vertical-align:-2px}
- .form-group input[type=time]{width:140px}
- .rly-tbl{width:100%;border-collapse:collapse;font-size:13px}
- .rly-tbl td,.rly-tbl th{padding:5px 3px;border-bottom:1px solid #0f3460;text-align:center}
- .rly-tbl th{font-size:12px;color:#888;font-weight:normal}
- .rly-tbl select,.rly-tbl input[type=number]{padding:3px;background:#1a1a2e;color:#eee;border:1px solid #0f3460;font-size:13px;width:80px}
- .led{display:inline-block;width:12px;height:12px;background:#555;vertical-align:middle}
- .led.on{background:#27ae60}
- .btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:bold}
- .btn-primary{background:#e94560;color:#fff}
- .btn-primary:hover{background:#c0392b}
- .btn-success{background:#27ae60;color:#fff}
- .btn-danger{background:#e74c3c;color:#fff}
- .btn-outline{background:transparent;border:1px solid #555;color:#aaa}
- .btn-outline:hover{border-color:#e94560;color:#e94560}
- .btn-row{display:flex;gap:8px;margin-bottom:14px}
- .fence-list{margin-top:12px}
- .fence-item{background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:10px;margin-bottom:8px;position:relative}
- .fence-item .name{font-weight:bold;color:#3498db}
- .fence-item .pts{font-size:11px;color:#888;margin-top:4px}
- .fence-item .actions{position:absolute;top:8px;right:8px;display:flex;gap:4px}
- .fence-item .actions button{padding:2px 8px;font-size:11px}
- .canvas-area{flex:1;position:relative;overflow:hidden;background:#000}
- .channel-tabs{position:absolute;top:8px;left:8px;display:flex;gap:4px;z-index:10}
- .channel-tabs .tab{padding:6px 16px;background:rgba(22,33,62,0.9);border:1px solid #0f3460;border-radius:6px;cursor:pointer;font-size:13px;color:#aaa}
- .channel-tabs .tab.active{border-color:#e94560;color:#e94560}
- .channel-tabs .tab.offline{color:#e74c3c;border-color:#e74c3c;background:rgba(231,76,60,0.15)}
- .channel-tabs .tab.offline::after{content:" (离线)"}
- .info-bar{position:absolute;bottom:8px;left:8px;background:rgba(22,33,62,0.9);padding:8px 16px;border-radius:6px;font-size:12px;z-index:10}
- .info-bar span{margin-right:16px}
- .info-bar .val{color:#3498db}
- .nav-tabs{display:flex;border-bottom:1px solid #0f3460;margin-bottom:12px}
- .nav-tab{padding:8px 16px;cursor:pointer;font-size:13px;color:#888;border-bottom:2px solid transparent}
- .nav-tab.active{color:#e94560;border-bottom-color:#e94560}
- .nav-content{display:none}
- .nav-content.active{display:block}
- .alarm-item{background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:10px;margin-bottom:8px;cursor:pointer}
- .alarm-item:hover{border-color:#e94560}
- .alarm-item .time{font-size:11px;color:#888}
- .alarm-item .info{font-size:13px;margin-top:4px}
- .alarm-item .info .ch{color:#3498db}
- .alarm-item .info .fence{color:#27ae60}
- .alarm-item .info .cls{color:#e94560}
- .alarm-item .conf{font-size:11px;color:#888}
- .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:100;justify-content:center;align-items:center}
- .modal-overlay.show{display:flex}
- .modal{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;width:500px;max-height:90vh;overflow-y:auto}
- .modal h3{margin-bottom:16px;color:#e94560}
- .modal img{width:100%;border-radius:8px;margin-bottom:12px}
- .modal .meta{font-size:12px;color:#aaa;line-height:1.8}
- .modal .btn-row{margin-top:16px}
- .alarm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
- .alarm-count{font-size:12px;color:#888}
- /* 硬朗风格: 全局直角 */
- *{border-radius:0 !important}
- </style>
- </head>
- <body>
- <div class="header">
- <img src="/logo.png" alt="logo" style="height:34px;display:block">
- <h1>恒达视觉智能监控平台</h1>
- <span id="statusBadge" class="status-badge status-on">在线</span>
- <span style="font-size:12px;color:#888" id="modelInfo">-</span>
- <div style="flex:1"></div>
- <button class="btn btn-outline" onclick="location.reload()">刷新</button>
- </div>
- <div class="main">
- <div class="sidebar">
- <div class="nav-tabs">
- <div class="nav-tab active" onclick="switchTab('config')">配置</div>
- <div class="nav-tab" onclick="switchTab('fence')">围栏</div>
- <div class="nav-tab" onclick="switchTab('alarm')">报警<span id="alarmBadge" style="display:none;background:#e94560;color:#fff;border-radius:8px;padding:1px 6px;font-size:10px;margin-left:4px">0</span></div>
- <div class="nav-tab" onclick="switchTab('relay')">继电器</div>
- <div class="nav-tab" onclick="switchTab('system')">系统配置</div>
- </div>
- <div id="tabConfig" class="nav-content active">
- <h3>系统参数</h3>
- <div class="form-group">
- <label>跳帧数 (每N帧推理一次)</label>
- <input type="number" id="cfgSkip" min="0" max="30" value="3">
- </div>
- <div class="form-group">
- <label>置信度阈值</label>
- <input type="number" id="cfgConf" min="0.1" max="1" step="0.05" value="0.35">
- </div>
- <div class="form-group">
- <label>报警保留天数 (超期自动清理)</label>
- <input type="number" id="cfgRetention" min="1" max="3650" value="30">
- </div>
- <h3 style="margin-top:16px">入侵目标 (勾选后进入围栏才报警)</h3>
- <div id="targetList" style="display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;font-size:13px"></div>
- <div class="btn-row">
- <button class="btn btn-primary" onclick="saveConfig()">保存参数</button>
- </div>
- </div>
- <div id="tabRelay" class="nav-content">
- <h3>继电器控制</h3>
- <div id="relayOnline" style="font-size:13px;margin-bottom:12px">
- 设备状态: <span class="val" style="color:#e74c3c">离线</span>
- </div>
- <h3>连接配置</h3>
- <div class="form-group">
- <label>设备IP</label>
- <input type="text" id="rlyHost" value="192.168.1.253">
- </div>
- <div style="display:flex;gap:10px">
- <div class="form-group" style="flex:1">
- <label>端口</label>
- <input type="number" id="rlyPort" min="1" max="65535" value="1030" style="width:100%">
- </div>
- <div class="form-group" style="flex:1">
- <label>设备地址</label>
- <input type="number" id="rlyAddr" min="0" max="254" value="1" style="width:100%">
- </div>
- </div>
- <h3>报警策略</h3>
- <div style="display:flex;gap:10px">
- <div class="form-group" style="flex:1">
- <label>脉冲时长(秒)</label>
- <input type="number" id="rlyPulse" min="1" max="3600" value="3" style="width:100%">
- </div>
- <div class="form-group" style="flex:1">
- <label>单回合上限(秒, 0=不限)</label>
- <input type="number" id="rlyMaxSec" min="0" max="3600" value="30" style="width:100%">
- </div>
- <div class="form-group" style="flex:1">
- <label>重新武装(秒)</label>
- <input type="number" id="rlyRearm" min="1" max="600" value="10" style="width:100%">
- </div>
- </div>
- <div style="font-size:11px;color:#888;margin-bottom:10px">
- 报警出现立即输出一个脉冲; 状态持续则每脉冲时长重复, 单回合累计达上限后静默;
- 目标消除/DI复位持续重新武装秒数后, 恢复下次报警判断. 围栏与输入联动共用.
- </div>
- <div class="btn-row">
- <button class="btn btn-primary" onclick="saveRelayConfig()">保存连接配置</button>
- </div>
- <h3 style="margin-top:16px">输出控制 Y1-Y8</h3>
- <div style="font-size:11px;color:#888;margin-bottom:6px">
- 状态列点击手动开关; 周期交替=按间隔反复开/闭(程序驱动); 手动控制会自动切回正常模式
- </div>
- <table class="rly-tbl" id="ymodeTbl"></table>
- <div class="btn-row" style="margin-top:10px">
- <button class="btn btn-primary" onclick="saveYModes()">保存输出模式</button>
- </div>
- <div style="font-size:11px;color:#888">测试=以当前行参数运行周期交替6秒后自动恢复</div>
- <h3 style="margin-top:16px">输入联动矩阵</h3>
- <div style="font-size:11px;color:#888;margin-bottom:6px">
- 左侧灯=X实时信号(亮=有信号), 勾选Y=该输入触发哪些输出(闭合脉冲时长后自动断开)
- </div>
- <table class="rly-tbl" id="bindTbl"></table>
- <div class="btn-row" style="margin-top:10px">
- <button class="btn btn-primary" onclick="saveBindings()">保存联动绑定</button>
- </div>
- </div>
- <div id="tabSystem" class="nav-content">
- <h3>系统配置</h3>
- <h3 style="margin-top:4px">自动重启</h3>
- <div class="form-group" style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
- <input type="checkbox" id="sysRebootEn">
- <label for="sysRebootEn" style="margin:0;font-weight:bold;color:#eee;cursor:pointer">启用自动重启</label>
- </div>
- <div class="form-group">
- <label>重启周期 (每N天, 1=每天)</label>
- <input type="number" id="sysRebootCycle" min="1" max="365" value="1">
- </div>
- <div class="form-group">
- <label>重启时间</label>
- <input type="time" id="sysRebootTime" value="03:30">
- </div>
- <div class="btn-row">
- <button class="btn btn-primary" onclick="saveSystemConfig()">保存配置</button>
- </div>
- <h3 style="margin-top:16px">设备操作</h3>
- <div class="btn-row">
- <button class="btn btn-danger" onclick="rebootNow()">立即重启</button>
- </div>
- <div style="font-size:13px;color:#888">重启期间视频流将中断约1-2分钟</div>
- </div>
- <div id="tabFence" class="nav-content">
- <h3>电子围栏 - <span id="curChannel">CH0</span></h3>
- <div class="btn-row">
- <button class="btn btn-primary" onclick="startDraw()">+ 新建围栏</button>
- <button class="btn btn-danger" onclick="cancelDraw()">取消绘制</button>
- </div>
- <div style="font-size:11px;color:#888;margin-bottom:8px">
- 点击画布添加顶点, 双击或右键闭合多边形
- </div>
- <div class="fence-list" id="fenceList"></div>
- </div>
- <div id="tabAlarm" class="nav-content">
- <div class="alarm-header">
- <h3>报警历史</h3>
- <div>
- <span class="alarm-count" id="alarmCount"></span>
- <button class="btn btn-danger" style="font-size:11px;padding:4px 10px" onclick="clearAlarms()">清空</button>
- </div>
- </div>
- <div id="alarmList"></div>
- </div>
- </div>
- <div class="canvas-area">
- <div class="channel-tabs">
- <div class="tab" onclick="switchChannel(0)">CH0 通道1</div>
- <div class="tab active" onclick="switchChannel(1)">CH1 通道2</div>
- </div>
- <img id="stream0" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;z-index:1;display:none">
- <img id="stream1" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;z-index:1">
- <canvas id="fenceCanvas" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;cursor:crosshair"></canvas>
- <div id="drawHint" style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(233,69,96,0.9);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:5;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,0.5)">
- 绘制模式: 点击添加顶点 | 双击/右键闭合 | ESC取消
- </div>
- <div class="info-bar">
- <span>通道: <span class="val" id="infoCh">0</span></span>
- <span>围栏: <span class="val" id="infoFences">0</span></span>
- <span>鼠标: <span class="val" id="infoMouse">-</span></span>
- </div>
- </div>
- </div>
- <div class="modal-overlay" id="renameModal">
- <div class="modal" style="width:400px">
- <h3>围栏命名</h3>
- <div class="form-group">
- <label>名称</label>
- <input type="text" id="fenceNameInput" placeholder="例: 入口区域">
- </div>
- <div class="btn-row">
- <button class="btn btn-primary" onclick="confirmRename()">确定</button>
- <button class="btn btn-outline" onclick="cancelRename()">取消</button>
- </div>
- </div>
- </div>
- <div class="modal-overlay" id="bindModal">
- <div class="modal" style="width:400px">
- <h3>围栏绑定输出 - <span id="bindFenceName"></span></h3>
- <div style="font-size:12px;color:#888;margin-bottom:10px">该围栏报警时闭合勾选的继电器, 脉冲时长后自动断开</div>
- <div id="bindYList" style="display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;font-size:13px"></div>
- <div class="btn-row">
- <button class="btn btn-primary" onclick="confirmFenceBind()">确定</button>
- <button class="btn btn-outline" onclick="document.getElementById('bindModal').classList.remove('show')">取消</button>
- </div>
- </div>
- </div>
- <div class="modal-overlay" id="alarmModal">
- <div class="modal">
- <h3>报警详情</h3>
- <img id="alarmScreenshot" src="">
- <div class="meta" id="alarmMeta"></div>
- <div class="btn-row">
- <button class="btn btn-outline" onclick="closeAlarmModal()">关闭</button>
- </div>
- </div>
- </div>
- <script>
- const canvas = document.getElementById('fenceCanvas');
- const ctx = canvas.getContext('2d');
- let fences = {0:[], 1:[]};
- let curChannel = 1;
- let drawing = false;
- let tempPoints = [];
- let imgW = 640, imgH = 360;
- let viewS = 1, viewOX = 0, viewOY = 0;
- let renameIdx = -1;
- function switchTab(name) {
- document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
- document.querySelectorAll('.nav-content').forEach(c => c.classList.remove('active'));
- event.target.classList.add('active');
- document.getElementById('tab' + name.charAt(0).toUpperCase() + name.slice(1)).classList.add('active');
- if (name === 'alarm') loadAlarms();
- if (name === 'relay') { loadRelayStatus(); loadBindings(); }
- }
- function resizeCanvas() {
- const r = canvas.parentElement.getBoundingClientRect();
- canvas.width = r.width;
- canvas.height = r.height;
- updateView();
- }
- function updateView() {
- viewS = Math.min(canvas.width / imgW, canvas.height / imgH);
- viewOX = (canvas.width - imgW * viewS) / 2;
- viewOY = (canvas.height - imgH * viewS) / 2;
- draw();
- }
- window.addEventListener('resize', resizeCanvas);
- setTimeout(resizeCanvas, 100);
- function switchChannel(ch) {
- curChannel = ch;
- document.querySelectorAll('.channel-tabs .tab').forEach((t,i) => {
- t.className = 'tab' + (i===ch?' active':'');
- });
- document.getElementById('curChannel').textContent = 'CH' + ch;
- document.getElementById('infoCh').textContent = ch;
- for (let i = 0; i < 2; i++) {
- document.getElementById('stream' + i).style.display = i===ch ? 'block' : 'none';
- }
- tempPoints = [];
- drawing = false;
- loadChannelSize();
- draw();
- renderFenceList();
- }
- function startDraw() {
- drawing = true;
- tempPoints = [];
- canvas.style.cursor = 'crosshair';
- const bar = document.getElementById('drawHint');
- if (bar) bar.style.display = 'flex';
- }
- function hideDrawHint() {
- const bar = document.getElementById('drawHint');
- if (bar) bar.style.display = 'none';
- }
- function cancelDraw() {
- drawing = false;
- tempPoints = [];
- hideDrawHint();
- draw();
- }
- function fenceColor(f, alpha) {
- const a = alpha || 1;
- if (!f.active) return `rgba(128,128,128,${a})`;
- const hue = (f.id * 47) % 360;
- return `hsla(${hue},80%,55%,${a})`;
- }
- function draw() {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.save();
- ctx.setTransform(viewS, 0, 0, viewS, viewOX, viewOY);
- const chFences = fences[curChannel] || [];
- chFences.forEach((f) => {
- if (f.polygon.length < 3) return;
- ctx.beginPath();
- ctx.moveTo(f.polygon[0][0], f.polygon[0][1]);
- for (let i = 1; i < f.polygon.length; i++)
- ctx.lineTo(f.polygon[i][0], f.polygon[i][1]);
- ctx.closePath();
- ctx.fillStyle = fenceColor(f, 0.2);
- ctx.fill();
- ctx.strokeStyle = fenceColor(f);
- ctx.lineWidth = 2 / viewS;
- ctx.stroke();
- if (f.name) {
- ctx.font = `${14/viewS}px sans-serif`;
- ctx.fillStyle = fenceColor(f);
- ctx.fillText(f.name, f.polygon[0][0], f.polygon[0][1] - 8/viewS);
- }
- f.polygon.forEach(p => {
- ctx.beginPath();
- ctx.arc(p[0], p[1], 4/viewS, 0, Math.PI*2);
- ctx.fillStyle = fenceColor(f);
- ctx.fill();
- });
- });
- if (tempPoints.length > 0) {
- ctx.beginPath();
- ctx.moveTo(tempPoints[0][0], tempPoints[0][1]);
- for (let i = 1; i < tempPoints.length; i++)
- ctx.lineTo(tempPoints[i][0], tempPoints[i][1]);
- ctx.strokeStyle = '#e94560';
- ctx.lineWidth = 2 / viewS;
- ctx.setLineDash([6/viewS, 4/viewS]);
- ctx.stroke();
- ctx.setLineDash([]);
- tempPoints.forEach(p => {
- ctx.beginPath();
- ctx.arc(p[0], p[1], 5/viewS, 0, Math.PI*2);
- ctx.fillStyle = '#e94560';
- ctx.fill();
- });
- }
- ctx.restore();
- document.getElementById('infoFences').textContent = chFences.length;
- }
- function canvasToImg(e) {
- const r = canvas.getBoundingClientRect();
- const x = (e.clientX - r.left - viewOX) / viewS;
- const y = (e.clientY - r.top - viewOY) / viewS;
- return [Math.round(x), Math.round(y)];
- }
- canvas.addEventListener('mousemove', e => {
- const [x, y] = canvasToImg(e);
- document.getElementById('infoMouse').textContent = `${x}, ${y}`;
- });
- canvas.addEventListener('click', e => {
- if (!drawing) return;
- tempPoints.push(canvasToImg(e));
- draw();
- });
- canvas.addEventListener('dblclick', e => {
- if (!drawing || tempPoints.length < 3) return;
- finishDraw();
- });
- canvas.addEventListener('contextmenu', e => {
- e.preventDefault();
- if (!drawing || tempPoints.length < 3) return;
- finishDraw();
- });
- document.addEventListener('keydown', e => {
- if (e.key === 'Escape' && drawing) cancelDraw();
- });
- function finishDraw() {
- drawing = false;
- canvas.style.cursor = 'crosshair';
- hideDrawHint();
- const newFence = {
- id: Date.now() % 100000,
- name: 'Fence' + ((fences[curChannel]||[]).length + 1),
- active: true,
- relays: [],
- polygon: tempPoints
- };
- tempPoints = [];
- if (!fences[curChannel]) fences[curChannel] = [];
- fences[curChannel].push(newFence);
- saveFences();
- draw();
- renderFenceList();
- }
- function renderFenceList() {
- const el = document.getElementById('fenceList');
- const chFences = fences[curChannel] || [];
- el.innerHTML = chFences.map((f, i) => `
- <div class="fence-item" style="border-left:3px solid ${fenceColor(f)}">
- <div style="display:flex;justify-content:space-between;align-items:center">
- <span class="name">${f.name}</span>
- <span style="font-size:11px;color:${f.active?'#27ae60':'#888'}">${f.active?'启用':'禁用'}</span>
- </div>
- <div class="pts">${f.polygon.length}个顶点 · 绑定${(f.relays||[]).length ? f.relays.map(r=>'Y'+parseInt(r.slice(1))).join(',') : '无'}</div>
- <div class="actions">
- <button class="btn btn-outline" onclick="toggleFence(${i})">${f.active?'禁用':'启用'}</button>
- <button class="btn btn-outline" onclick="renameFence(${i})">命名</button>
- <button class="btn btn-outline" onclick="openFenceBind(${i})">绑定</button>
- <button class="btn btn-danger" onclick="deleteFence(${i})">删除</button>
- </div>
- </div>
- `).join('');
- }
- function toggleFence(i) {
- fences[curChannel][i].active = !fences[curChannel][i].active;
- saveFences(); draw(); renderFenceList();
- }
- function renameFence(i) {
- renameIdx = i;
- document.getElementById('fenceNameInput').value = fences[curChannel][i].name;
- document.getElementById('renameModal').classList.add('show');
- document.getElementById('fenceNameInput').focus();
- }
- function confirmRename() {
- if (renameIdx >= 0) {
- fences[curChannel][renameIdx].name = document.getElementById('fenceNameInput').value;
- saveFences(); draw(); renderFenceList();
- }
- document.getElementById('renameModal').classList.remove('show');
- }
- function cancelRename() {
- document.getElementById('renameModal').classList.remove('show');
- }
- let bindIdx = -1;
- function openFenceBind(i) {
- bindIdx = i;
- const f = fences[curChannel][i];
- document.getElementById('bindFenceName').textContent = f.name || ('Fence' + (i+1));
- let html = '';
- for (let y = 1; y <= (rlyNy || 8); y++) {
- const ch = 'y' + String(y).padStart(2, '0');
- const on = (f.relays || []).includes(ch);
- html += `<label style="cursor:pointer;display:flex;align-items:center;gap:4px">
- <input type="checkbox" class="fy-ck" value="${ch}" ${on?'checked':''}>Y${y}</label>`;
- }
- document.getElementById('bindYList').innerHTML = html;
- document.getElementById('bindModal').classList.add('show');
- }
- function confirmFenceBind() {
- if (bindIdx >= 0) {
- fences[curChannel][bindIdx].relays =
- Array.from(document.querySelectorAll('.fy-ck:checked')).map(c => c.value);
- saveFences();
- renderFenceList();
- }
- document.getElementById('bindModal').classList.remove('show');
- }
- function deleteFence(i) {
- if (!confirm('删除围栏 ' + fences[curChannel][i].name + '?')) return;
- fences[curChannel].splice(i, 1);
- saveFences(); draw(); renderFenceList();
- }
- async function loadFences() {
- try {
- const r = await fetch('/api/fences');
- const data = await r.json();
- for (let k in data) fences[k] = data[k];
- renderFenceList();
- draw();
- } catch(e) {}
- }
- async function saveFences() {
- try {
- await fetch('/api/fences', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify(fences)
- });
- } catch(e) {}
- }
- async function loadStatus() {
- try {
- const r = await fetch('/api/status');
- const d = await r.json();
- document.getElementById('statusBadge').className = 'status-badge ' + (d.running?'status-on':'status-off');
- document.getElementById('statusBadge').textContent = d.running ? '在线' : '离线';
- document.getElementById('modelInfo').textContent = (d.npu || d.model || '-') + ' | NPU';
- document.querySelectorAll('.channel-tabs .tab').forEach((t,i) => {
- const info = (d.channels || []).find(c => c.id === i);
- t.classList.toggle('offline', info ? !info.online : false);
- });
- applyChannelSize(d);
- } catch(e) {}
- }
- const TARGET_CLASSES = [
- ['person','人'], ['bicycle','自行车'], ['car','汽车'],
- ['motorcycle','摩托车'], ['bus','公交车'], ['truck','卡车'], ['train','火车']
- ];
- function renderTargets() {
- const el = document.getElementById('targetList');
- el.innerHTML = TARGET_CLASSES.map(([name,label]) => `
- <label style="cursor:pointer;display:flex;align-items:center;gap:4px">
- <input type="checkbox" class="target-ck" value="${name}">${label}
- </label>`).join('');
- }
- function getSelectedClasses() {
- return Array.from(document.querySelectorAll('.target-ck:checked')).map(c => c.value);
- }
- function setSelectedClasses(list) {
- const set = new Set(list || []);
- document.querySelectorAll('.target-ck').forEach(c => c.checked = set.has(c.value));
- }
- async function loadConfig() {
- try {
- const r = await fetch('/api/status');
- const d = await r.json();
- if (d.skip_frames !== undefined) document.getElementById('cfgSkip').value = d.skip_frames;
- if (d.conf_thresh !== undefined) document.getElementById('cfgConf').value = d.conf_thresh;
- if (d.alarm_retention_days !== undefined) document.getElementById('cfgRetention').value = d.alarm_retention_days;
- setSelectedClasses(d.alarm_classes);
- } catch(e) {}
- }
- async function saveConfig() {
- const body = {
- skip_frames: parseInt(document.getElementById('cfgSkip').value),
- conf_thresh: parseFloat(document.getElementById('cfgConf').value),
- alarm_retention_days: parseInt(document.getElementById('cfgRetention').value),
- alarm_classes: getSelectedClasses()
- };
- try {
- await fetch('/api/config', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify(body)
- });
- alert('已保存');
- } catch(e) { alert('保存失败'); }
- }
- let rlyX = Array(8).fill(0);
- let rlyY = Array(8).fill(0);
- let rlyCfgLoaded = false;
- let rlyModesLoaded = false;
- let rlyNx = 0, rlyNy = 0;
- let lastBindings = {};
- function ensureTables(nx, ny) {
- if (!document.getElementById('ymodeTbl').children.length ||
- !document.getElementById('bindTbl').children.length ||
- nx !== rlyNx || ny !== rlyNy) {
- rlyNx = nx; rlyNy = ny;
- renderYTable(ny);
- renderBindTable(lastBindings, nx, ny);
- }
- }
- function renderYTable(ny) {
- const el = document.getElementById('ymodeTbl');
- let html = '<tr><th>通道</th><th>状态</th><th>输出模式</th><th>间隔(秒)</th><th>操作</th></tr>';
- for (let i = 1; i <= ny; i++) {
- const saved = savedModes[i-1] || {mode:'normal', interval:1};
- html += `<tr>
- <td style="color:#aaa">Y${i}</td>
- <td><button class="btn btn-outline" id="ybtn${i}" style="width:56px;padding:4px 0" onclick="toggleY(${i})">关</button></td>
- <td><select id="ymsel${i}">
- <option value="normal" ${saved.mode==='normal'?'selected':''}>正常</option>
- <option value="cycle" ${saved.mode==='cycle'?'selected':''}>周期交替</option>
- </select></td>
- <td><input type="number" id="ymin${i}" step="0.1" min="0.1" max="3600" value="${saved.interval}"></td>
- <td><button class="btn btn-outline" id="ytest${i}" style="padding:4px 10px" onclick="testY(${i})">测试</button></td>
- </tr>`;
- }
- el.innerHTML = html;
- }
- let savedModes = Array.from({length: 8}, () => ({mode: 'normal', interval: 1}));
- async function postMode(items) {
- const r = await fetch('/api/relay/mode', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify({items})
- });
- return r.json();
- }
- async function saveYModes() {
- const items = [];
- for (let i = 1; i <= rlyNy; i++) {
- const sel = document.getElementById('ymsel' + i);
- if (!sel) continue;
- items.push({
- channel: 'y' + String(i).padStart(2, '0'),
- mode: sel.value,
- interval_sec: parseFloat(document.getElementById('ymin' + i).value) || 1
- });
- }
- try {
- const d = await postMode(items);
- if (d.ok) {
- for (let i = 1; i <= items.length; i++)
- savedModes[i-1] = {mode: items[i-1].mode, interval: items[i-1].interval_sec};
- alert('输出模式已保存');
- } else alert('保存失败');
- } catch(e) { alert('保存失败'); }
- loadRelayStatus();
- }
- let testingIdx = -1;
- async function testY(i) {
- if (testingIdx >= 0) return;
- testingIdx = i;
- const btn = document.getElementById('ytest' + i);
- const ch = 'y' + String(i).padStart(2, '0');
- const itv = parseFloat(document.getElementById('ymin' + i).value) || 1;
- btn.textContent = '测试中';
- try {
- await postMode([{channel: ch, mode: 'cycle', interval_sec: itv}]);
- setTimeout(async () => {
- await postMode([{channel: ch, mode: savedModes[i-1].mode,
- interval_sec: savedModes[i-1].interval}]);
- btn.textContent = '测试';
- testingIdx = -1;
- loadRelayStatus();
- }, 6000);
- } catch(e) { btn.textContent = '测试'; testingIdx = -1; }
- }
- function renderBindTable(bindings, nx, ny) {
- lastBindings = bindings || {};
- const el = document.getElementById('bindTbl');
- if (!ny) ny = 8;
- if (!nx) nx = 8;
- let html = '<tr><th>X</th><th>信号</th>';
- for (let y = 1; y <= ny; y++) html += `<th>Y${y}</th>`;
- html += '</tr>';
- for (let x = 1; x <= nx; x++) {
- html += `<tr><td style="color:#aaa">X${x}</td><td><span class="led" id="xled${x}"></span></td>`;
- const bound = lastBindings['x' + x] || [];
- for (let y = 1; y <= ny; y++) {
- const ch = 'y' + String(y).padStart(2, '0');
- html += `<td><input type="checkbox" class="bind-ck" data-x="${x}" value="${ch}" ${bound.includes(ch)?'checked':''}></td>`;
- }
- html += '</tr>';
- }
- el.innerHTML = html;
- }
- function updateRelayView(d) {
- document.getElementById('relayOnline').innerHTML =
- '设备状态: <span class="val" style="color:' + (d.online?'#27ae60':'#e74c3c') + '">' +
- (d.online ? '在线' : '离线') + '</span>';
- if (!rlyCfgLoaded && d.host) {
- document.getElementById('rlyHost').value = d.host;
- document.getElementById('rlyPort').value = d.port;
- document.getElementById('rlyAddr').value = d.device_addr;
- document.getElementById('rlyPulse').value = d.pulse_sec;
- if (d.rearm_sec !== undefined)
- document.getElementById('rlyRearm').value = d.rearm_sec;
- if (d.alarm_max_sec !== undefined)
- document.getElementById('rlyMaxSec').value = d.alarm_max_sec;
- rlyCfgLoaded = true;
- }
- ensureTables(d.nx || 8, d.ny || 8);
- rlyX = d.x || rlyX;
- rlyY = d.y || rlyY;
- for (let i = 0; i < (d.nx || 8); i++) {
- const led = document.getElementById('xled' + (i+1));
- if (led) led.className = 'led' + (rlyX[i] ? ' on' : '');
- }
- for (let i = 0; i < (d.ny || 8); i++) {
- const btn = document.getElementById('ybtn' + (i+1));
- if (btn) {
- const on = !!rlyY[i];
- btn.className = 'btn ' + (on ? 'btn-success' : 'btn-outline');
- btn.textContent = on ? '开' : '关';
- btn.style.opacity = d.online ? 1 : 0.5;
- }
- if (!rlyModesLoaded && d.ymode) {
- const sel = document.getElementById('ymsel' + (i+1));
- const inp = document.getElementById('ymin' + (i+1));
- if (sel) {
- sel.value = d.ymode[i] === 'cycle' ? 'cycle' : 'normal';
- if (inp && d.ycyc !== undefined && d.ycyc[i] !== undefined)
- inp.value = d.ycyc[i];
- savedModes[i] = {mode: sel.value,
- interval: parseFloat(inp ? inp.value : 1) || 1};
- if (i === (d.ny || 8) - 1) rlyModesLoaded = true;
- }
- }
- }
- }
- async function loadRelayStatus() {
- try {
- const r = await fetch('/api/relay/status');
- updateRelayView(await r.json());
- } catch(e) {}
- }
- async function toggleY(i) {
- if (i > rlyNy) return;
- const ch = 'y' + String(i).padStart(2, '0');
- const next = rlyY[i-1] ? 0 : 1;
- try {
- await fetch('/api/relay', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify({channel: ch, state: next})
- });
- } catch(e) {}
- loadRelayStatus();
- }
- async function saveRelayConfig() {
- const body = {
- host: document.getElementById('rlyHost').value.trim(),
- port: parseInt(document.getElementById('rlyPort').value),
- device_addr: parseInt(document.getElementById('rlyAddr').value),
- pulse_sec: parseInt(document.getElementById('rlyPulse').value),
- alarm_max_sec: parseInt(document.getElementById('rlyMaxSec').value),
- rearm_sec: parseInt(document.getElementById('rlyRearm').value)
- };
- try {
- const r = await fetch('/api/relay/config', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify(body)
- });
- const d = await r.json();
- alert(d.ok ? '已保存, 正在重连设备' : '保存失败');
- } catch(e) { alert('保存失败'); }
- }
- async function loadBindings() {
- try {
- const r = await fetch('/api/relay/bindings');
- const d = await r.json();
- renderBindTable(d, rlyNx || 8, rlyNy || 8);
- } catch(e) {}
- }
- async function saveBindings() {
- const out = {};
- document.querySelectorAll('.bind-ck:checked').forEach(c => {
- const k = 'x' + c.dataset.x;
- (out[k] = out[k] || []).push(c.value);
- });
- try {
- const r = await fetch('/api/relay/bindings', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify(out)
- });
- const d = await r.json();
- alert(d.ok ? '联动绑定已保存' : '保存失败');
- } catch(e) { alert('保存失败'); }
- }
- async function loadSystemConfig() {
- try {
- const r = await fetch('/api/system');
- const d = await r.json();
- document.getElementById('sysRebootEn').checked = !!d.reboot_enabled;
- if (d.reboot_cycle !== undefined) document.getElementById('sysRebootCycle').value = d.reboot_cycle;
- if (d.reboot_time) document.getElementById('sysRebootTime').value = d.reboot_time;
- } catch(e) {}
- }
- async function saveSystemConfig() {
- const body = {
- auto_reboot: {
- enabled: document.getElementById('sysRebootEn').checked,
- cycle: Math.max(1, parseInt(document.getElementById('sysRebootCycle').value) || 1),
- time: document.getElementById('sysRebootTime').value || '03:30'
- }
- };
- try {
- const r = await fetch('/api/config', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify(body)
- });
- const d = await r.json();
- alert(d.ok ? '已保存' : '保存失败');
- } catch(e) { alert('保存失败'); }
- }
- async function rebootNow() {
- if (!confirm('确认立即重启设备?')) return;
- try {
- const r = await fetch('/api/reboot', {method:'POST'});
- const d = await r.json();
- if (d.ok) alert('重启命令已发送, 设备即将重启...');
- else alert('重启失败');
- } catch(e) {}
- }
- let alarmPollTimer = null;
- async function loadAlarms() {
- try {
- const r = await fetch('/api/alarms');
- const d = await r.json();
- document.getElementById('alarmCount').textContent = d.total + '条';
- const badge = document.getElementById('alarmBadge');
- if (d.total > 0) { badge.style.display = 'inline'; badge.textContent = d.total > 99 ? '99+' : d.total; }
- else { badge.style.display = 'none'; }
- const el = document.getElementById('alarmList');
- el.innerHTML = d.items.map(a => `
- <div class="alarm-item" onclick="showAlarm(${a.id},'${a.screenshot.replace(/'/g,"\\'")}','${a.timestamp}','${a.channel}','${a.fence_name}','${a.class_name}',${a.confidence})">
- <div class="time">${a.timestamp}</div>
- <div class="info">
- <span class="ch">CH${a.channel}</span>
- <span class="fence">${a.fence_name}</span>
- <span class="cls">${a.class_name}</span>
- </div>
- <div class="conf">${(a.confidence*100).toFixed(0)}%</div>
- </div>
- `).join('') || '<div style="color:#888;font-size:13px;text-align:center;padding:20px">暂无报警记录</div>';
- } catch(e) {}
- }
- function showAlarm(id, screenshot, time, ch, fence, cls, conf) {
- document.getElementById('alarmScreenshot').src = '/' + screenshot;
- document.getElementById('alarmMeta').innerHTML =
- `时间: ${time}<br>通道: CH${ch}<br>围栏: ${fence}<br>目标: ${cls}<br>置信度: ${(conf*100).toFixed(1)}%`;
- document.getElementById('alarmModal').classList.add('show');
- }
- function closeAlarmModal() {
- document.getElementById('alarmModal').classList.remove('show');
- }
- async function deleteAlarm(id, e) {
- e.stopPropagation();
- if (!confirm('删除此报警记录?')) return;
- try {
- await fetch('/api/alarms/delete', {
- method:'POST',
- headers:{'Content-Type':'application/json'},
- body: JSON.stringify({id})
- });
- loadAlarms();
- } catch(e) {}
- }
- async function clearAlarms() {
- if (!confirm('清空所有报警记录?')) return;
- try {
- await fetch('/api/alarms/clear', {method:'POST'});
- loadAlarms();
- } catch(e) {}
- }
- function connectStream(ch) {
- const img = document.getElementById('stream' + ch);
- clearTimeout(img._retry);
- img.dataset.active = '1';
- img.src = '/mjpeg/' + ch + '?t=' + Date.now();
- }
- for (let i = 0; i < 2; i++) {
- const img = document.getElementById('stream' + i);
- img.addEventListener('error', () => {
- if (img.dataset.active !== '1') return;
- img.dataset.active = '0';
- img._retry = setTimeout(() => connectStream(i), 1500);
- });
- }
- connectStream(0);
- connectStream(1);
- async function loadChannelSize() {
- try {
- const r = await fetch('/api/status');
- applyChannelSize(await r.json());
- } catch(e) {}
- }
- function applyChannelSize(d) {
- const info = (d.channels || []).find(c => c.id === curChannel);
- if (info && info.width > 0 && info.height > 0 &&
- (info.width !== imgW || info.height !== imgH)) {
- imgW = info.width;
- imgH = info.height;
- updateView();
- }
- }
- loadStatus();
- renderTargets();
- loadConfig();
- loadFences();
- loadSystemConfig();
- ensureTables(8, 8);
- loadRelayStatus();
- loadBindings();
- setInterval(loadStatus, 5000);
- setInterval(loadAlarms, 10000);
- setInterval(loadRelayStatus, 1000);
- </script>
- </body>
- </html>
|