index_backup_1435.html 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>恒达视觉智能监控平台</title>
  7. <link rel="icon" href="/logo.ico" type="image/x-icon">
  8. <link rel="icon" href="/logo.png" type="image/png">
  9. <style>
  10. *{margin:0;padding:0;box-sizing:border-box}
  11. body{font-family:system-ui,sans-serif;background:#1a1a2e;color:#eee}
  12. .header{background:#16213e;padding:12px 24px;display:flex;align-items:center;gap:16px;border-bottom:2px solid #0f3460}
  13. .header h1{font-size:18px;color:#e94560}
  14. .status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:bold}
  15. .status-on{background:#27ae60;color:#fff}
  16. .status-off{background:#e74c3c;color:#fff}
  17. .main{display:flex;height:calc(100vh - 52px)}
  18. .sidebar{width:320px;background:#16213e;padding:16px;overflow-y:auto;border-right:1px solid #0f3460}
  19. .sidebar h3{color:#e94560;margin-bottom:12px;font-size:14px}
  20. .form-group{margin-bottom:14px}
  21. .form-group label{display:block;font-size:13px;color:#aaa;margin-bottom:4px}
  22. .form-group input,.form-group select{width:100%;padding:8px;border:1px solid #0f3460;border-radius:6px;background:#1a1a2e;color:#eee;font-size:13px}
  23. .form-group input[type=number]{width:100px}
  24. .form-group input[type=checkbox]{width:15px;height:15px;cursor:pointer;vertical-align:-2px}
  25. .form-group input[type=time]{width:140px}
  26. .rly-tbl{width:100%;border-collapse:collapse;font-size:13px}
  27. .rly-tbl td,.rly-tbl th{padding:5px 3px;border-bottom:1px solid #0f3460;text-align:center}
  28. .rly-tbl th{font-size:12px;color:#888;font-weight:normal}
  29. .rly-tbl select,.rly-tbl input[type=number]{padding:3px;background:#1a1a2e;color:#eee;border:1px solid #0f3460;font-size:13px;width:80px}
  30. .led{display:inline-block;width:12px;height:12px;background:#555;vertical-align:middle}
  31. .led.on{background:#27ae60}
  32. .btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:bold}
  33. .btn-primary{background:#e94560;color:#fff}
  34. .btn-primary:hover{background:#c0392b}
  35. .btn-success{background:#27ae60;color:#fff}
  36. .btn-danger{background:#e74c3c;color:#fff}
  37. .btn-outline{background:transparent;border:1px solid #555;color:#aaa}
  38. .btn-outline:hover{border-color:#e94560;color:#e94560}
  39. .btn-row{display:flex;gap:8px;margin-bottom:14px}
  40. .fence-list{margin-top:12px}
  41. .fence-item{background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:10px;margin-bottom:8px;position:relative}
  42. .fence-item .name{font-weight:bold;color:#3498db}
  43. .fence-item .pts{font-size:11px;color:#888;margin-top:4px}
  44. .fence-item .actions{position:absolute;top:8px;right:8px;display:flex;gap:4px}
  45. .fence-item .actions button{padding:2px 8px;font-size:11px}
  46. .canvas-area{flex:1;position:relative;overflow:hidden;background:#000}
  47. .channel-tabs{position:absolute;top:8px;left:8px;display:flex;gap:4px;z-index:10}
  48. .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}
  49. .channel-tabs .tab.active{border-color:#e94560;color:#e94560}
  50. .channel-tabs .tab.offline{color:#e74c3c;border-color:#e74c3c;background:rgba(231,76,60,0.15)}
  51. .channel-tabs .tab.offline::after{content:" (离线)"}
  52. .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}
  53. .info-bar span{margin-right:16px}
  54. .info-bar .val{color:#3498db}
  55. .nav-tabs{display:flex;border-bottom:1px solid #0f3460;margin-bottom:12px}
  56. .nav-tab{padding:8px 16px;cursor:pointer;font-size:13px;color:#888;border-bottom:2px solid transparent}
  57. .nav-tab.active{color:#e94560;border-bottom-color:#e94560}
  58. .nav-content{display:none}
  59. .nav-content.active{display:block}
  60. .alarm-item{background:#1a1a2e;border:1px solid #0f3460;border-radius:8px;padding:10px;margin-bottom:8px;cursor:pointer}
  61. .alarm-item:hover{border-color:#e94560}
  62. .alarm-item .time{font-size:11px;color:#888}
  63. .alarm-item .info{font-size:13px;margin-top:4px}
  64. .alarm-item .info .ch{color:#3498db}
  65. .alarm-item .info .fence{color:#27ae60}
  66. .alarm-item .info .cls{color:#e94560}
  67. .alarm-item .conf{font-size:11px;color:#888}
  68. .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:100;justify-content:center;align-items:center}
  69. .modal-overlay.show{display:flex}
  70. .modal{background:#16213e;border:1px solid #0f3460;border-radius:12px;padding:24px;width:500px;max-height:90vh;overflow-y:auto}
  71. .modal h3{margin-bottom:16px;color:#e94560}
  72. .modal img{width:100%;border-radius:8px;margin-bottom:12px}
  73. .modal .meta{font-size:12px;color:#aaa;line-height:1.8}
  74. .modal .btn-row{margin-top:16px}
  75. .alarm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  76. .alarm-count{font-size:12px;color:#888}
  77. /* 硬朗风格: 全局直角 */
  78. *{border-radius:0 !important}
  79. </style>
  80. </head>
  81. <body>
  82. <div class="header">
  83. <img src="/logo.png" alt="logo" style="height:34px;display:block">
  84. <h1>恒达视觉智能监控平台</h1>
  85. <span id="statusBadge" class="status-badge status-on">在线</span>
  86. <span style="font-size:12px;color:#888" id="modelInfo">-</span>
  87. <div style="flex:1"></div>
  88. <button class="btn btn-outline" onclick="location.reload()">刷新</button>
  89. </div>
  90. <div class="main">
  91. <div class="sidebar">
  92. <div class="nav-tabs">
  93. <div class="nav-tab active" onclick="switchTab('config')">配置</div>
  94. <div class="nav-tab" onclick="switchTab('fence')">围栏</div>
  95. <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>
  96. <div class="nav-tab" onclick="switchTab('relay')">继电器</div>
  97. <div class="nav-tab" onclick="switchTab('system')">系统配置</div>
  98. </div>
  99. <div id="tabConfig" class="nav-content active">
  100. <h3>系统参数</h3>
  101. <div class="form-group">
  102. <label>跳帧数 (每N帧推理一次)</label>
  103. <input type="number" id="cfgSkip" min="0" max="30" value="3">
  104. </div>
  105. <div class="form-group">
  106. <label>置信度阈值</label>
  107. <input type="number" id="cfgConf" min="0.1" max="1" step="0.05" value="0.35">
  108. </div>
  109. <div class="form-group">
  110. <label>报警保留天数 (超期自动清理)</label>
  111. <input type="number" id="cfgRetention" min="1" max="3650" value="30">
  112. </div>
  113. <h3 style="margin-top:16px">入侵目标 (勾选后进入围栏才报警)</h3>
  114. <div id="targetList" style="display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;font-size:13px"></div>
  115. <div class="btn-row">
  116. <button class="btn btn-primary" onclick="saveConfig()">保存参数</button>
  117. </div>
  118. </div>
  119. <div id="tabRelay" class="nav-content">
  120. <h3>继电器控制</h3>
  121. <div id="relayOnline" style="font-size:13px;margin-bottom:12px">
  122. 设备状态: <span class="val" style="color:#e74c3c">离线</span>
  123. </div>
  124. <h3>连接配置</h3>
  125. <div class="form-group">
  126. <label>设备IP</label>
  127. <input type="text" id="rlyHost" value="192.168.1.253">
  128. </div>
  129. <div style="display:flex;gap:10px">
  130. <div class="form-group" style="flex:1">
  131. <label>端口</label>
  132. <input type="number" id="rlyPort" min="1" max="65535" value="1030" style="width:100%">
  133. </div>
  134. <div class="form-group" style="flex:1">
  135. <label>设备地址</label>
  136. <input type="number" id="rlyAddr" min="0" max="254" value="1" style="width:100%">
  137. </div>
  138. </div>
  139. <h3>报警策略</h3>
  140. <div style="display:flex;gap:10px">
  141. <div class="form-group" style="flex:1">
  142. <label>脉冲时长(秒)</label>
  143. <input type="number" id="rlyPulse" min="1" max="3600" value="3" style="width:100%">
  144. </div>
  145. <div class="form-group" style="flex:1">
  146. <label>单回合上限(秒, 0=不限)</label>
  147. <input type="number" id="rlyMaxSec" min="0" max="3600" value="30" style="width:100%">
  148. </div>
  149. <div class="form-group" style="flex:1">
  150. <label>重新武装(秒)</label>
  151. <input type="number" id="rlyRearm" min="1" max="600" value="10" style="width:100%">
  152. </div>
  153. </div>
  154. <div style="font-size:11px;color:#888;margin-bottom:10px">
  155. 报警出现立即输出一个脉冲; 状态持续则每脉冲时长重复, 单回合累计达上限后静默;
  156. 目标消除/DI复位持续重新武装秒数后, 恢复下次报警判断. 围栏与输入联动共用.
  157. </div>
  158. <div class="btn-row">
  159. <button class="btn btn-primary" onclick="saveRelayConfig()">保存连接配置</button>
  160. </div>
  161. <h3 style="margin-top:16px">输出控制 Y1-Y8</h3>
  162. <div style="font-size:11px;color:#888;margin-bottom:6px">
  163. 状态列点击手动开关; 周期交替=按间隔反复开/闭(程序驱动); 手动控制会自动切回正常模式
  164. </div>
  165. <table class="rly-tbl" id="ymodeTbl"></table>
  166. <div class="btn-row" style="margin-top:10px">
  167. <button class="btn btn-primary" onclick="saveYModes()">保存输出模式</button>
  168. </div>
  169. <div style="font-size:11px;color:#888">测试=以当前行参数运行周期交替6秒后自动恢复</div>
  170. <h3 style="margin-top:16px">输入联动矩阵</h3>
  171. <div style="font-size:11px;color:#888;margin-bottom:6px">
  172. 左侧灯=X实时信号(亮=有信号), 勾选Y=该输入触发哪些输出(闭合脉冲时长后自动断开)
  173. </div>
  174. <table class="rly-tbl" id="bindTbl"></table>
  175. <div class="btn-row" style="margin-top:10px">
  176. <button class="btn btn-primary" onclick="saveBindings()">保存联动绑定</button>
  177. </div>
  178. </div>
  179. <div id="tabSystem" class="nav-content">
  180. <h3>系统配置</h3>
  181. <h3 style="margin-top:4px">自动重启</h3>
  182. <div class="form-group" style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
  183. <input type="checkbox" id="sysRebootEn">
  184. <label for="sysRebootEn" style="margin:0;font-weight:bold;color:#eee;cursor:pointer">启用自动重启</label>
  185. </div>
  186. <div class="form-group">
  187. <label>重启周期 (每N天, 1=每天)</label>
  188. <input type="number" id="sysRebootCycle" min="1" max="365" value="1">
  189. </div>
  190. <div class="form-group">
  191. <label>重启时间</label>
  192. <input type="time" id="sysRebootTime" value="03:30">
  193. </div>
  194. <div class="btn-row">
  195. <button class="btn btn-primary" onclick="saveSystemConfig()">保存配置</button>
  196. </div>
  197. <h3 style="margin-top:16px">设备操作</h3>
  198. <div class="btn-row">
  199. <button class="btn btn-danger" onclick="rebootNow()">立即重启</button>
  200. </div>
  201. <div style="font-size:13px;color:#888">重启期间视频流将中断约1-2分钟</div>
  202. </div>
  203. <div id="tabFence" class="nav-content">
  204. <h3>电子围栏 - <span id="curChannel">CH0</span></h3>
  205. <div class="btn-row">
  206. <button class="btn btn-primary" onclick="startDraw()">+ 新建围栏</button>
  207. <button class="btn btn-danger" onclick="cancelDraw()">取消绘制</button>
  208. </div>
  209. <div style="font-size:11px;color:#888;margin-bottom:8px">
  210. 点击画布添加顶点, 双击或右键闭合多边形
  211. </div>
  212. <div class="fence-list" id="fenceList"></div>
  213. </div>
  214. <div id="tabAlarm" class="nav-content">
  215. <div class="alarm-header">
  216. <h3>报警历史</h3>
  217. <div>
  218. <span class="alarm-count" id="alarmCount"></span>
  219. <button class="btn btn-danger" style="font-size:11px;padding:4px 10px" onclick="clearAlarms()">清空</button>
  220. </div>
  221. </div>
  222. <div id="alarmList"></div>
  223. </div>
  224. </div>
  225. <div class="canvas-area">
  226. <div class="channel-tabs">
  227. <div class="tab" onclick="switchChannel(0)">CH0 通道1</div>
  228. <div class="tab active" onclick="switchChannel(1)">CH1 通道2</div>
  229. </div>
  230. <img id="stream0" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;z-index:1;display:none">
  231. <img id="stream1" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;z-index:1">
  232. <canvas id="fenceCanvas" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;cursor:crosshair"></canvas>
  233. <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)">
  234. 绘制模式: 点击添加顶点 | 双击/右键闭合 | ESC取消
  235. </div>
  236. <div class="info-bar">
  237. <span>通道: <span class="val" id="infoCh">0</span></span>
  238. <span>围栏: <span class="val" id="infoFences">0</span></span>
  239. <span>鼠标: <span class="val" id="infoMouse">-</span></span>
  240. </div>
  241. </div>
  242. </div>
  243. <div class="modal-overlay" id="renameModal">
  244. <div class="modal" style="width:400px">
  245. <h3>围栏命名</h3>
  246. <div class="form-group">
  247. <label>名称</label>
  248. <input type="text" id="fenceNameInput" placeholder="例: 入口区域">
  249. </div>
  250. <div class="btn-row">
  251. <button class="btn btn-primary" onclick="confirmRename()">确定</button>
  252. <button class="btn btn-outline" onclick="cancelRename()">取消</button>
  253. </div>
  254. </div>
  255. </div>
  256. <div class="modal-overlay" id="bindModal">
  257. <div class="modal" style="width:400px">
  258. <h3>围栏绑定输出 - <span id="bindFenceName"></span></h3>
  259. <div style="font-size:12px;color:#888;margin-bottom:10px">该围栏报警时闭合勾选的继电器, 脉冲时长后自动断开</div>
  260. <div id="bindYList" style="display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px;font-size:13px"></div>
  261. <div class="btn-row">
  262. <button class="btn btn-primary" onclick="confirmFenceBind()">确定</button>
  263. <button class="btn btn-outline" onclick="document.getElementById('bindModal').classList.remove('show')">取消</button>
  264. </div>
  265. </div>
  266. </div>
  267. <div class="modal-overlay" id="alarmModal">
  268. <div class="modal">
  269. <h3>报警详情</h3>
  270. <img id="alarmScreenshot" src="">
  271. <div class="meta" id="alarmMeta"></div>
  272. <div class="btn-row">
  273. <button class="btn btn-outline" onclick="closeAlarmModal()">关闭</button>
  274. </div>
  275. </div>
  276. </div>
  277. <script>
  278. const canvas = document.getElementById('fenceCanvas');
  279. const ctx = canvas.getContext('2d');
  280. let fences = {0:[], 1:[]};
  281. let curChannel = 1;
  282. let drawing = false;
  283. let tempPoints = [];
  284. let imgW = 640, imgH = 360;
  285. let viewS = 1, viewOX = 0, viewOY = 0;
  286. let renameIdx = -1;
  287. function switchTab(name) {
  288. document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
  289. document.querySelectorAll('.nav-content').forEach(c => c.classList.remove('active'));
  290. event.target.classList.add('active');
  291. document.getElementById('tab' + name.charAt(0).toUpperCase() + name.slice(1)).classList.add('active');
  292. if (name === 'alarm') loadAlarms();
  293. if (name === 'relay') { loadRelayStatus(); loadBindings(); }
  294. }
  295. function resizeCanvas() {
  296. const r = canvas.parentElement.getBoundingClientRect();
  297. canvas.width = r.width;
  298. canvas.height = r.height;
  299. updateView();
  300. }
  301. function updateView() {
  302. viewS = Math.min(canvas.width / imgW, canvas.height / imgH);
  303. viewOX = (canvas.width - imgW * viewS) / 2;
  304. viewOY = (canvas.height - imgH * viewS) / 2;
  305. draw();
  306. }
  307. window.addEventListener('resize', resizeCanvas);
  308. setTimeout(resizeCanvas, 100);
  309. function switchChannel(ch) {
  310. curChannel = ch;
  311. document.querySelectorAll('.channel-tabs .tab').forEach((t,i) => {
  312. t.className = 'tab' + (i===ch?' active':'');
  313. });
  314. document.getElementById('curChannel').textContent = 'CH' + ch;
  315. document.getElementById('infoCh').textContent = ch;
  316. for (let i = 0; i < 2; i++) {
  317. document.getElementById('stream' + i).style.display = i===ch ? 'block' : 'none';
  318. }
  319. tempPoints = [];
  320. drawing = false;
  321. loadChannelSize();
  322. draw();
  323. renderFenceList();
  324. }
  325. function startDraw() {
  326. drawing = true;
  327. tempPoints = [];
  328. canvas.style.cursor = 'crosshair';
  329. const bar = document.getElementById('drawHint');
  330. if (bar) bar.style.display = 'flex';
  331. }
  332. function hideDrawHint() {
  333. const bar = document.getElementById('drawHint');
  334. if (bar) bar.style.display = 'none';
  335. }
  336. function cancelDraw() {
  337. drawing = false;
  338. tempPoints = [];
  339. hideDrawHint();
  340. draw();
  341. }
  342. function fenceColor(f, alpha) {
  343. const a = alpha || 1;
  344. if (!f.active) return `rgba(128,128,128,${a})`;
  345. const hue = (f.id * 47) % 360;
  346. return `hsla(${hue},80%,55%,${a})`;
  347. }
  348. function draw() {
  349. ctx.clearRect(0, 0, canvas.width, canvas.height);
  350. ctx.save();
  351. ctx.setTransform(viewS, 0, 0, viewS, viewOX, viewOY);
  352. const chFences = fences[curChannel] || [];
  353. chFences.forEach((f) => {
  354. if (f.polygon.length < 3) return;
  355. ctx.beginPath();
  356. ctx.moveTo(f.polygon[0][0], f.polygon[0][1]);
  357. for (let i = 1; i < f.polygon.length; i++)
  358. ctx.lineTo(f.polygon[i][0], f.polygon[i][1]);
  359. ctx.closePath();
  360. ctx.fillStyle = fenceColor(f, 0.2);
  361. ctx.fill();
  362. ctx.strokeStyle = fenceColor(f);
  363. ctx.lineWidth = 2 / viewS;
  364. ctx.stroke();
  365. if (f.name) {
  366. ctx.font = `${14/viewS}px sans-serif`;
  367. ctx.fillStyle = fenceColor(f);
  368. ctx.fillText(f.name, f.polygon[0][0], f.polygon[0][1] - 8/viewS);
  369. }
  370. f.polygon.forEach(p => {
  371. ctx.beginPath();
  372. ctx.arc(p[0], p[1], 4/viewS, 0, Math.PI*2);
  373. ctx.fillStyle = fenceColor(f);
  374. ctx.fill();
  375. });
  376. });
  377. if (tempPoints.length > 0) {
  378. ctx.beginPath();
  379. ctx.moveTo(tempPoints[0][0], tempPoints[0][1]);
  380. for (let i = 1; i < tempPoints.length; i++)
  381. ctx.lineTo(tempPoints[i][0], tempPoints[i][1]);
  382. ctx.strokeStyle = '#e94560';
  383. ctx.lineWidth = 2 / viewS;
  384. ctx.setLineDash([6/viewS, 4/viewS]);
  385. ctx.stroke();
  386. ctx.setLineDash([]);
  387. tempPoints.forEach(p => {
  388. ctx.beginPath();
  389. ctx.arc(p[0], p[1], 5/viewS, 0, Math.PI*2);
  390. ctx.fillStyle = '#e94560';
  391. ctx.fill();
  392. });
  393. }
  394. ctx.restore();
  395. document.getElementById('infoFences').textContent = chFences.length;
  396. }
  397. function canvasToImg(e) {
  398. const r = canvas.getBoundingClientRect();
  399. const x = (e.clientX - r.left - viewOX) / viewS;
  400. const y = (e.clientY - r.top - viewOY) / viewS;
  401. return [Math.round(x), Math.round(y)];
  402. }
  403. canvas.addEventListener('mousemove', e => {
  404. const [x, y] = canvasToImg(e);
  405. document.getElementById('infoMouse').textContent = `${x}, ${y}`;
  406. });
  407. canvas.addEventListener('click', e => {
  408. if (!drawing) return;
  409. tempPoints.push(canvasToImg(e));
  410. draw();
  411. });
  412. canvas.addEventListener('dblclick', e => {
  413. if (!drawing || tempPoints.length < 3) return;
  414. finishDraw();
  415. });
  416. canvas.addEventListener('contextmenu', e => {
  417. e.preventDefault();
  418. if (!drawing || tempPoints.length < 3) return;
  419. finishDraw();
  420. });
  421. document.addEventListener('keydown', e => {
  422. if (e.key === 'Escape' && drawing) cancelDraw();
  423. });
  424. function finishDraw() {
  425. drawing = false;
  426. canvas.style.cursor = 'crosshair';
  427. hideDrawHint();
  428. const newFence = {
  429. id: Date.now() % 100000,
  430. name: 'Fence' + ((fences[curChannel]||[]).length + 1),
  431. active: true,
  432. relays: [],
  433. polygon: tempPoints
  434. };
  435. tempPoints = [];
  436. if (!fences[curChannel]) fences[curChannel] = [];
  437. fences[curChannel].push(newFence);
  438. saveFences();
  439. draw();
  440. renderFenceList();
  441. }
  442. function renderFenceList() {
  443. const el = document.getElementById('fenceList');
  444. const chFences = fences[curChannel] || [];
  445. el.innerHTML = chFences.map((f, i) => `
  446. <div class="fence-item" style="border-left:3px solid ${fenceColor(f)}">
  447. <div style="display:flex;justify-content:space-between;align-items:center">
  448. <span class="name">${f.name}</span>
  449. <span style="font-size:11px;color:${f.active?'#27ae60':'#888'}">${f.active?'启用':'禁用'}</span>
  450. </div>
  451. <div class="pts">${f.polygon.length}个顶点 · 绑定${(f.relays||[]).length ? f.relays.map(r=>'Y'+parseInt(r.slice(1))).join(',') : '无'}</div>
  452. <div class="actions">
  453. <button class="btn btn-outline" onclick="toggleFence(${i})">${f.active?'禁用':'启用'}</button>
  454. <button class="btn btn-outline" onclick="renameFence(${i})">命名</button>
  455. <button class="btn btn-outline" onclick="openFenceBind(${i})">绑定</button>
  456. <button class="btn btn-danger" onclick="deleteFence(${i})">删除</button>
  457. </div>
  458. </div>
  459. `).join('');
  460. }
  461. function toggleFence(i) {
  462. fences[curChannel][i].active = !fences[curChannel][i].active;
  463. saveFences(); draw(); renderFenceList();
  464. }
  465. function renameFence(i) {
  466. renameIdx = i;
  467. document.getElementById('fenceNameInput').value = fences[curChannel][i].name;
  468. document.getElementById('renameModal').classList.add('show');
  469. document.getElementById('fenceNameInput').focus();
  470. }
  471. function confirmRename() {
  472. if (renameIdx >= 0) {
  473. fences[curChannel][renameIdx].name = document.getElementById('fenceNameInput').value;
  474. saveFences(); draw(); renderFenceList();
  475. }
  476. document.getElementById('renameModal').classList.remove('show');
  477. }
  478. function cancelRename() {
  479. document.getElementById('renameModal').classList.remove('show');
  480. }
  481. let bindIdx = -1;
  482. function openFenceBind(i) {
  483. bindIdx = i;
  484. const f = fences[curChannel][i];
  485. document.getElementById('bindFenceName').textContent = f.name || ('Fence' + (i+1));
  486. let html = '';
  487. for (let y = 1; y <= (rlyNy || 8); y++) {
  488. const ch = 'y' + String(y).padStart(2, '0');
  489. const on = (f.relays || []).includes(ch);
  490. html += `<label style="cursor:pointer;display:flex;align-items:center;gap:4px">
  491. <input type="checkbox" class="fy-ck" value="${ch}" ${on?'checked':''}>Y${y}</label>`;
  492. }
  493. document.getElementById('bindYList').innerHTML = html;
  494. document.getElementById('bindModal').classList.add('show');
  495. }
  496. function confirmFenceBind() {
  497. if (bindIdx >= 0) {
  498. fences[curChannel][bindIdx].relays =
  499. Array.from(document.querySelectorAll('.fy-ck:checked')).map(c => c.value);
  500. saveFences();
  501. renderFenceList();
  502. }
  503. document.getElementById('bindModal').classList.remove('show');
  504. }
  505. function deleteFence(i) {
  506. if (!confirm('删除围栏 ' + fences[curChannel][i].name + '?')) return;
  507. fences[curChannel].splice(i, 1);
  508. saveFences(); draw(); renderFenceList();
  509. }
  510. async function loadFences() {
  511. try {
  512. const r = await fetch('/api/fences');
  513. const data = await r.json();
  514. for (let k in data) fences[k] = data[k];
  515. renderFenceList();
  516. draw();
  517. } catch(e) {}
  518. }
  519. async function saveFences() {
  520. try {
  521. await fetch('/api/fences', {
  522. method:'POST',
  523. headers:{'Content-Type':'application/json'},
  524. body: JSON.stringify(fences)
  525. });
  526. } catch(e) {}
  527. }
  528. async function loadStatus() {
  529. try {
  530. const r = await fetch('/api/status');
  531. const d = await r.json();
  532. document.getElementById('statusBadge').className = 'status-badge ' + (d.running?'status-on':'status-off');
  533. document.getElementById('statusBadge').textContent = d.running ? '在线' : '离线';
  534. document.getElementById('modelInfo').textContent = (d.npu || d.model || '-') + ' | NPU';
  535. document.querySelectorAll('.channel-tabs .tab').forEach((t,i) => {
  536. const info = (d.channels || []).find(c => c.id === i);
  537. t.classList.toggle('offline', info ? !info.online : false);
  538. });
  539. applyChannelSize(d);
  540. } catch(e) {}
  541. }
  542. const TARGET_CLASSES = [
  543. ['person','人'], ['bicycle','自行车'], ['car','汽车'],
  544. ['motorcycle','摩托车'], ['bus','公交车'], ['truck','卡车'], ['train','火车']
  545. ];
  546. function renderTargets() {
  547. const el = document.getElementById('targetList');
  548. el.innerHTML = TARGET_CLASSES.map(([name,label]) => `
  549. <label style="cursor:pointer;display:flex;align-items:center;gap:4px">
  550. <input type="checkbox" class="target-ck" value="${name}">${label}
  551. </label>`).join('');
  552. }
  553. function getSelectedClasses() {
  554. return Array.from(document.querySelectorAll('.target-ck:checked')).map(c => c.value);
  555. }
  556. function setSelectedClasses(list) {
  557. const set = new Set(list || []);
  558. document.querySelectorAll('.target-ck').forEach(c => c.checked = set.has(c.value));
  559. }
  560. async function loadConfig() {
  561. try {
  562. const r = await fetch('/api/status');
  563. const d = await r.json();
  564. if (d.skip_frames !== undefined) document.getElementById('cfgSkip').value = d.skip_frames;
  565. if (d.conf_thresh !== undefined) document.getElementById('cfgConf').value = d.conf_thresh;
  566. if (d.alarm_retention_days !== undefined) document.getElementById('cfgRetention').value = d.alarm_retention_days;
  567. setSelectedClasses(d.alarm_classes);
  568. } catch(e) {}
  569. }
  570. async function saveConfig() {
  571. const body = {
  572. skip_frames: parseInt(document.getElementById('cfgSkip').value),
  573. conf_thresh: parseFloat(document.getElementById('cfgConf').value),
  574. alarm_retention_days: parseInt(document.getElementById('cfgRetention').value),
  575. alarm_classes: getSelectedClasses()
  576. };
  577. try {
  578. await fetch('/api/config', {
  579. method:'POST',
  580. headers:{'Content-Type':'application/json'},
  581. body: JSON.stringify(body)
  582. });
  583. alert('已保存');
  584. } catch(e) { alert('保存失败'); }
  585. }
  586. let rlyX = Array(8).fill(0);
  587. let rlyY = Array(8).fill(0);
  588. let rlyCfgLoaded = false;
  589. let rlyModesLoaded = false;
  590. let rlyNx = 0, rlyNy = 0;
  591. let lastBindings = {};
  592. function ensureTables(nx, ny) {
  593. if (!document.getElementById('ymodeTbl').children.length ||
  594. !document.getElementById('bindTbl').children.length ||
  595. nx !== rlyNx || ny !== rlyNy) {
  596. rlyNx = nx; rlyNy = ny;
  597. renderYTable(ny);
  598. renderBindTable(lastBindings, nx, ny);
  599. }
  600. }
  601. function renderYTable(ny) {
  602. const el = document.getElementById('ymodeTbl');
  603. let html = '<tr><th>通道</th><th>状态</th><th>输出模式</th><th>间隔(秒)</th><th>操作</th></tr>';
  604. for (let i = 1; i <= ny; i++) {
  605. const saved = savedModes[i-1] || {mode:'normal', interval:1};
  606. html += `<tr>
  607. <td style="color:#aaa">Y${i}</td>
  608. <td><button class="btn btn-outline" id="ybtn${i}" style="width:56px;padding:4px 0" onclick="toggleY(${i})">关</button></td>
  609. <td><select id="ymsel${i}">
  610. <option value="normal" ${saved.mode==='normal'?'selected':''}>正常</option>
  611. <option value="cycle" ${saved.mode==='cycle'?'selected':''}>周期交替</option>
  612. </select></td>
  613. <td><input type="number" id="ymin${i}" step="0.1" min="0.1" max="3600" value="${saved.interval}"></td>
  614. <td><button class="btn btn-outline" id="ytest${i}" style="padding:4px 10px" onclick="testY(${i})">测试</button></td>
  615. </tr>`;
  616. }
  617. el.innerHTML = html;
  618. }
  619. let savedModes = Array.from({length: 8}, () => ({mode: 'normal', interval: 1}));
  620. async function postMode(items) {
  621. const r = await fetch('/api/relay/mode', {
  622. method:'POST',
  623. headers:{'Content-Type':'application/json'},
  624. body: JSON.stringify({items})
  625. });
  626. return r.json();
  627. }
  628. async function saveYModes() {
  629. const items = [];
  630. for (let i = 1; i <= rlyNy; i++) {
  631. const sel = document.getElementById('ymsel' + i);
  632. if (!sel) continue;
  633. items.push({
  634. channel: 'y' + String(i).padStart(2, '0'),
  635. mode: sel.value,
  636. interval_sec: parseFloat(document.getElementById('ymin' + i).value) || 1
  637. });
  638. }
  639. try {
  640. const d = await postMode(items);
  641. if (d.ok) {
  642. for (let i = 1; i <= items.length; i++)
  643. savedModes[i-1] = {mode: items[i-1].mode, interval: items[i-1].interval_sec};
  644. alert('输出模式已保存');
  645. } else alert('保存失败');
  646. } catch(e) { alert('保存失败'); }
  647. loadRelayStatus();
  648. }
  649. let testingIdx = -1;
  650. async function testY(i) {
  651. if (testingIdx >= 0) return;
  652. testingIdx = i;
  653. const btn = document.getElementById('ytest' + i);
  654. const ch = 'y' + String(i).padStart(2, '0');
  655. const itv = parseFloat(document.getElementById('ymin' + i).value) || 1;
  656. btn.textContent = '测试中';
  657. try {
  658. await postMode([{channel: ch, mode: 'cycle', interval_sec: itv}]);
  659. setTimeout(async () => {
  660. await postMode([{channel: ch, mode: savedModes[i-1].mode,
  661. interval_sec: savedModes[i-1].interval}]);
  662. btn.textContent = '测试';
  663. testingIdx = -1;
  664. loadRelayStatus();
  665. }, 6000);
  666. } catch(e) { btn.textContent = '测试'; testingIdx = -1; }
  667. }
  668. function renderBindTable(bindings, nx, ny) {
  669. lastBindings = bindings || {};
  670. const el = document.getElementById('bindTbl');
  671. if (!ny) ny = 8;
  672. if (!nx) nx = 8;
  673. let html = '<tr><th>X</th><th>信号</th>';
  674. for (let y = 1; y <= ny; y++) html += `<th>Y${y}</th>`;
  675. html += '</tr>';
  676. for (let x = 1; x <= nx; x++) {
  677. html += `<tr><td style="color:#aaa">X${x}</td><td><span class="led" id="xled${x}"></span></td>`;
  678. const bound = lastBindings['x' + x] || [];
  679. for (let y = 1; y <= ny; y++) {
  680. const ch = 'y' + String(y).padStart(2, '0');
  681. html += `<td><input type="checkbox" class="bind-ck" data-x="${x}" value="${ch}" ${bound.includes(ch)?'checked':''}></td>`;
  682. }
  683. html += '</tr>';
  684. }
  685. el.innerHTML = html;
  686. }
  687. function updateRelayView(d) {
  688. document.getElementById('relayOnline').innerHTML =
  689. '设备状态: <span class="val" style="color:' + (d.online?'#27ae60':'#e74c3c') + '">' +
  690. (d.online ? '在线' : '离线') + '</span>';
  691. if (!rlyCfgLoaded && d.host) {
  692. document.getElementById('rlyHost').value = d.host;
  693. document.getElementById('rlyPort').value = d.port;
  694. document.getElementById('rlyAddr').value = d.device_addr;
  695. document.getElementById('rlyPulse').value = d.pulse_sec;
  696. if (d.rearm_sec !== undefined)
  697. document.getElementById('rlyRearm').value = d.rearm_sec;
  698. if (d.alarm_max_sec !== undefined)
  699. document.getElementById('rlyMaxSec').value = d.alarm_max_sec;
  700. rlyCfgLoaded = true;
  701. }
  702. ensureTables(d.nx || 8, d.ny || 8);
  703. rlyX = d.x || rlyX;
  704. rlyY = d.y || rlyY;
  705. for (let i = 0; i < (d.nx || 8); i++) {
  706. const led = document.getElementById('xled' + (i+1));
  707. if (led) led.className = 'led' + (rlyX[i] ? ' on' : '');
  708. }
  709. for (let i = 0; i < (d.ny || 8); i++) {
  710. const btn = document.getElementById('ybtn' + (i+1));
  711. if (btn) {
  712. const on = !!rlyY[i];
  713. btn.className = 'btn ' + (on ? 'btn-success' : 'btn-outline');
  714. btn.textContent = on ? '开' : '关';
  715. btn.style.opacity = d.online ? 1 : 0.5;
  716. }
  717. if (!rlyModesLoaded && d.ymode) {
  718. const sel = document.getElementById('ymsel' + (i+1));
  719. const inp = document.getElementById('ymin' + (i+1));
  720. if (sel) {
  721. sel.value = d.ymode[i] === 'cycle' ? 'cycle' : 'normal';
  722. if (inp && d.ycyc !== undefined && d.ycyc[i] !== undefined)
  723. inp.value = d.ycyc[i];
  724. savedModes[i] = {mode: sel.value,
  725. interval: parseFloat(inp ? inp.value : 1) || 1};
  726. if (i === (d.ny || 8) - 1) rlyModesLoaded = true;
  727. }
  728. }
  729. }
  730. }
  731. async function loadRelayStatus() {
  732. try {
  733. const r = await fetch('/api/relay/status');
  734. updateRelayView(await r.json());
  735. } catch(e) {}
  736. }
  737. async function toggleY(i) {
  738. if (i > rlyNy) return;
  739. const ch = 'y' + String(i).padStart(2, '0');
  740. const next = rlyY[i-1] ? 0 : 1;
  741. try {
  742. await fetch('/api/relay', {
  743. method:'POST',
  744. headers:{'Content-Type':'application/json'},
  745. body: JSON.stringify({channel: ch, state: next})
  746. });
  747. } catch(e) {}
  748. loadRelayStatus();
  749. }
  750. async function saveRelayConfig() {
  751. const body = {
  752. host: document.getElementById('rlyHost').value.trim(),
  753. port: parseInt(document.getElementById('rlyPort').value),
  754. device_addr: parseInt(document.getElementById('rlyAddr').value),
  755. pulse_sec: parseInt(document.getElementById('rlyPulse').value),
  756. alarm_max_sec: parseInt(document.getElementById('rlyMaxSec').value),
  757. rearm_sec: parseInt(document.getElementById('rlyRearm').value)
  758. };
  759. try {
  760. const r = await fetch('/api/relay/config', {
  761. method:'POST',
  762. headers:{'Content-Type':'application/json'},
  763. body: JSON.stringify(body)
  764. });
  765. const d = await r.json();
  766. alert(d.ok ? '已保存, 正在重连设备' : '保存失败');
  767. } catch(e) { alert('保存失败'); }
  768. }
  769. async function loadBindings() {
  770. try {
  771. const r = await fetch('/api/relay/bindings');
  772. const d = await r.json();
  773. renderBindTable(d, rlyNx || 8, rlyNy || 8);
  774. } catch(e) {}
  775. }
  776. async function saveBindings() {
  777. const out = {};
  778. document.querySelectorAll('.bind-ck:checked').forEach(c => {
  779. const k = 'x' + c.dataset.x;
  780. (out[k] = out[k] || []).push(c.value);
  781. });
  782. try {
  783. const r = await fetch('/api/relay/bindings', {
  784. method:'POST',
  785. headers:{'Content-Type':'application/json'},
  786. body: JSON.stringify(out)
  787. });
  788. const d = await r.json();
  789. alert(d.ok ? '联动绑定已保存' : '保存失败');
  790. } catch(e) { alert('保存失败'); }
  791. }
  792. async function loadSystemConfig() {
  793. try {
  794. const r = await fetch('/api/system');
  795. const d = await r.json();
  796. document.getElementById('sysRebootEn').checked = !!d.reboot_enabled;
  797. if (d.reboot_cycle !== undefined) document.getElementById('sysRebootCycle').value = d.reboot_cycle;
  798. if (d.reboot_time) document.getElementById('sysRebootTime').value = d.reboot_time;
  799. } catch(e) {}
  800. }
  801. async function saveSystemConfig() {
  802. const body = {
  803. auto_reboot: {
  804. enabled: document.getElementById('sysRebootEn').checked,
  805. cycle: Math.max(1, parseInt(document.getElementById('sysRebootCycle').value) || 1),
  806. time: document.getElementById('sysRebootTime').value || '03:30'
  807. }
  808. };
  809. try {
  810. const r = await fetch('/api/config', {
  811. method:'POST',
  812. headers:{'Content-Type':'application/json'},
  813. body: JSON.stringify(body)
  814. });
  815. const d = await r.json();
  816. alert(d.ok ? '已保存' : '保存失败');
  817. } catch(e) { alert('保存失败'); }
  818. }
  819. async function rebootNow() {
  820. if (!confirm('确认立即重启设备?')) return;
  821. try {
  822. const r = await fetch('/api/reboot', {method:'POST'});
  823. const d = await r.json();
  824. if (d.ok) alert('重启命令已发送, 设备即将重启...');
  825. else alert('重启失败');
  826. } catch(e) {}
  827. }
  828. let alarmPollTimer = null;
  829. async function loadAlarms() {
  830. try {
  831. const r = await fetch('/api/alarms');
  832. const d = await r.json();
  833. document.getElementById('alarmCount').textContent = d.total + '条';
  834. const badge = document.getElementById('alarmBadge');
  835. if (d.total > 0) { badge.style.display = 'inline'; badge.textContent = d.total > 99 ? '99+' : d.total; }
  836. else { badge.style.display = 'none'; }
  837. const el = document.getElementById('alarmList');
  838. el.innerHTML = d.items.map(a => `
  839. <div class="alarm-item" onclick="showAlarm(${a.id},'${a.screenshot.replace(/'/g,"\\'")}','${a.timestamp}','${a.channel}','${a.fence_name}','${a.class_name}',${a.confidence})">
  840. <div class="time">${a.timestamp}</div>
  841. <div class="info">
  842. <span class="ch">CH${a.channel}</span>
  843. <span class="fence">${a.fence_name}</span>
  844. <span class="cls">${a.class_name}</span>
  845. </div>
  846. <div class="conf">${(a.confidence*100).toFixed(0)}%</div>
  847. </div>
  848. `).join('') || '<div style="color:#888;font-size:13px;text-align:center;padding:20px">暂无报警记录</div>';
  849. } catch(e) {}
  850. }
  851. function showAlarm(id, screenshot, time, ch, fence, cls, conf) {
  852. document.getElementById('alarmScreenshot').src = '/' + screenshot;
  853. document.getElementById('alarmMeta').innerHTML =
  854. `时间: ${time}<br>通道: CH${ch}<br>围栏: ${fence}<br>目标: ${cls}<br>置信度: ${(conf*100).toFixed(1)}%`;
  855. document.getElementById('alarmModal').classList.add('show');
  856. }
  857. function closeAlarmModal() {
  858. document.getElementById('alarmModal').classList.remove('show');
  859. }
  860. async function deleteAlarm(id, e) {
  861. e.stopPropagation();
  862. if (!confirm('删除此报警记录?')) return;
  863. try {
  864. await fetch('/api/alarms/delete', {
  865. method:'POST',
  866. headers:{'Content-Type':'application/json'},
  867. body: JSON.stringify({id})
  868. });
  869. loadAlarms();
  870. } catch(e) {}
  871. }
  872. async function clearAlarms() {
  873. if (!confirm('清空所有报警记录?')) return;
  874. try {
  875. await fetch('/api/alarms/clear', {method:'POST'});
  876. loadAlarms();
  877. } catch(e) {}
  878. }
  879. function connectStream(ch) {
  880. const img = document.getElementById('stream' + ch);
  881. clearTimeout(img._retry);
  882. img.dataset.active = '1';
  883. img.src = '/mjpeg/' + ch + '?t=' + Date.now();
  884. }
  885. for (let i = 0; i < 2; i++) {
  886. const img = document.getElementById('stream' + i);
  887. img.addEventListener('error', () => {
  888. if (img.dataset.active !== '1') return;
  889. img.dataset.active = '0';
  890. img._retry = setTimeout(() => connectStream(i), 1500);
  891. });
  892. }
  893. connectStream(0);
  894. connectStream(1);
  895. async function loadChannelSize() {
  896. try {
  897. const r = await fetch('/api/status');
  898. applyChannelSize(await r.json());
  899. } catch(e) {}
  900. }
  901. function applyChannelSize(d) {
  902. const info = (d.channels || []).find(c => c.id === curChannel);
  903. if (info && info.width > 0 && info.height > 0 &&
  904. (info.width !== imgW || info.height !== imgH)) {
  905. imgW = info.width;
  906. imgH = info.height;
  907. updateView();
  908. }
  909. }
  910. loadStatus();
  911. renderTargets();
  912. loadConfig();
  913. loadFences();
  914. loadSystemConfig();
  915. ensureTables(8, 8);
  916. loadRelayStatus();
  917. loadBindings();
  918. setInterval(loadStatus, 5000);
  919. setInterval(loadAlarms, 10000);
  920. setInterval(loadRelayStatus, 1000);
  921. </script>
  922. </body>
  923. </html>