page5.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>相机操作</title>
  6. <link rel="stylesheet" href="static/css/app.css">
  7. <link rel="stylesheet" href="static/css/button.css">
  8. <link rel="stylesheet" href="static/css/page5.css">
  9. </head>
  10. <body>
  11. <div class="app">
  12. <main class="view page-camera">
  13. <div class="page5-top">
  14. <div class="status-bar">
  15. <div class="status-item">
  16. <span class="label">相机服务</span>
  17. <span class="value" id="avar1">--</span>
  18. </div>
  19. <div class="status-item">
  20. <span class="label">相机总数</span>
  21. <span class="value" id="avar2">--</span>
  22. </div>
  23. <div class="status-item">
  24. <span class="label">海康数量</span>
  25. <span class="value" id="avar3">--</span>
  26. </div>
  27. <div class="status-item">
  28. <span class="label">大华数量</span>
  29. <span class="value" id="avar4">--</span>
  30. </div>
  31. </div>
  32. <div class="status-bar">
  33. <div class="status-item">
  34. <span class="label">网口相机(IP/MASK)</span>
  35. <span class="value">192.168.100.100/24</span>
  36. </div>
  37. <div class="status-item">
  38. <span class="label">电源状态</span>
  39. <span class="value" id="avar5">--</span>
  40. </div>
  41. <div class="status-item">
  42. <span class="label">相机状态</span>
  43. <span class="value" id="avar6">--</span>
  44. </div>
  45. <div class="status-item button-item"">
  46. <span style="margin:0 1px;"></span>
  47. <button class="btn" title="打开网口相机供电" onclick="cameraPower('true')">上电</button>
  48. <span style="margin:0 1px;"></span>
  49. <button class="btn" title="关闭网口相机供电" onclick="cameraPower('false')">断电</button>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="panes">
  54. <!-- 左栏 -->
  55. <div class="left-pane">
  56. <div class="card camera-card">
  57. <div class="card-header">
  58. <h2>拍照测试</h2>
  59. <div class="camera-actions">
  60. <button class="btn" onclick="takeOnePhoto()">单次拍照</button>
  61. <span style="margin:0 1px;"></span>
  62. <button class="btn" onclick="startCameraPreview()">连续拍照</button>
  63. <span style="margin:0 1px;"></span>
  64. <button class="btn" onclick="stopCameraPreview()">停止连拍</button>
  65. <span style="margin:0 1px;"></span>
  66. <button class="btn" onclick="downloadCameraImage()">下载图像</button>
  67. </div>
  68. </div>
  69. <div class="camera-image-box">
  70. <img id="camera-image">
  71. </div>
  72. <table class="camera-info-table">
  73. <tr>
  74. <td>采集状态</td>
  75. <td id="cvar1">--</td>
  76. <td>采集总帧数</td>
  77. <td id="cvar2">--</td>
  78. </tr>
  79. <tr>
  80. <td>相机型号</td>
  81. <td id="cvar3">--</td>
  82. <td>相机序列号</td>
  83. <td id="cvar4">--</td>
  84. </tr>
  85. <tr>
  86. <td>曝光时长</td>
  87. <td id="cvar5">--</td>
  88. <td>图像分辨率</td>
  89. <td id="cvar6">--</td>
  90. </tr>
  91. </table>
  92. </div>
  93. </div>
  94. <!-- 右栏 -->
  95. <div class="right-pane">
  96. <div class="card log-card">
  97. <div class="card-header">
  98. <h2>相机服务</h2>
  99. <div class="log-actions">
  100. <select class="log-level-select" id="logLevel" title="当前服务日志级别" onchange="setCameraLogLevel()">
  101. <option value="trace">trace</option>
  102. <option value="debug">debug</option>
  103. <option value="info" selected>info</option>
  104. <option value="error">error</option>
  105. <option value="fatal">fatal</option>
  106. </select>
  107. <span style="margin:0 1px;"></span>
  108. <button class="btn" title="复制当前屏显日志" onclick="copyLog('text1')">复制</button>
  109. <span style="margin:0 1px;"></span>
  110. <button class="btn" title="清除当前屏显日志" onclick="clearLog('text1')">清除</button>
  111. <span style="margin:0 1px;"></span>
  112. <button class="btn" title="下载服务日志文件" onclick="downloadCameraLogFile()">下载</button>
  113. <span style="margin:0 1px;"></span>
  114. <button class="btn" title="点击重启相机服务" onclick="restartCameraService()">重启</button>
  115. </div>
  116. </div>
  117. <div class="output" id="text1">自动实时获取数据...</div>
  118. </div>
  119. </div>
  120. <!-- 结束 -->
  121. </div>
  122. </main>
  123. </div>
  124. </body>
  125. </html>