index.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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>PTZ 扫描轮询控制台</title>
  7. <link rel="stylesheet" href="/static/style.css">
  8. </head>
  9. <body>
  10. <div id="toolbar">
  11. <select id="group-select"></select>
  12. <button id="btn-scan">执行 360° 扫描</button>
  13. <button id="btn-poll-start">开始轮询</button>
  14. <button id="btn-poll-stop">停止轮询</button>
  15. <span id="status">状态:空闲</span>
  16. </div>
  17. <div id="video-grid"></div>
  18. <div id="panorama-panel">
  19. <div>
  20. <div id="sample-header">
  21. 扫描样本矩阵(同列同 P,同行同 T)
  22. <span id="zoom-controls">
  23. <button id="btn-zoom-out">-</button>
  24. <span id="zoom-level">100%</span>
  25. <button id="btn-zoom-in">+</button>
  26. <button id="btn-zoom-reset">重置</button>
  27. </span>
  28. </div>
  29. <div id="sample-grid-wrapper">
  30. <div id="sample-canvas"></div>
  31. </div>
  32. </div>
  33. <div id="point-list">
  34. <h3>扫描点设置</h3>
  35. <img id="selected-preview" src="" alt="选中/预览" style="width:100%;max-height:140px;object-fit:cover;background:#000;border-radius:6px;margin-bottom:10px;display:none;">
  36. <div id="point-form">
  37. <label>Pan: <input id="inp-pan" type="number" step="0.1"></label>
  38. <label>Tilt: <input id="inp-tilt" type="number" step="0.1"></label>
  39. <label>Zoom: <input id="inp-zoom" type="number" value="1"></label>
  40. <label>停留(s): <input id="inp-dwell" type="number" value="3" step="0.1"></label>
  41. <button id="btn-preview">球机预览</button>
  42. <button id="btn-add">保存扫描点</button>
  43. </div>
  44. <h4 style="margin:10px 0 6px 0;font-size:13px;color:#94a3b8;">已选扫描点</h4>
  45. <ul id="points"></ul>
  46. </div>
  47. </div>
  48. <div id="log-panel"></div>
  49. <script src="https://cdn.jsdelivr.net/npm/@antv/g6@5.1.1/dist/g6.min.js"></script>
  50. <script type="module" src="/static/app.js?v=4"></script>
  51. </body>
  52. </html>