index.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <header>
  4. <meta charset="utf-8" />
  5. <title>Air8000 控制中心</title>
  6. <style>
  7. body {
  8. font-family: Arial, sans-serif;
  9. background-color: #f5f5f5;
  10. margin: 0;
  11. padding: 20px;
  12. color: #333;
  13. }
  14. h2, h4 {
  15. color: #2c3e50;
  16. }
  17. .container {
  18. max-width: 600px;
  19. margin: auto;
  20. background: white;
  21. padding: 20px;
  22. border-radius: 8px;
  23. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  24. }
  25. button {
  26. background-color: #3498db;
  27. color: white;
  28. border: none;
  29. padding: 10px 15px;
  30. border-radius: 5px;
  31. cursor: pointer;
  32. font-size: 16px;
  33. margin: 5px 0;
  34. transition: background-color 0.3s;
  35. }
  36. button:hover {
  37. background-color: #2980b9;
  38. }
  39. input[type="text"] {
  40. width: 100%;
  41. padding: 10px;
  42. margin: 5px 0 15px;
  43. border: 1px solid #ccc;
  44. border-radius: 5px;
  45. box-sizing: border-box;
  46. }
  47. .control-panel {
  48. margin-bottom: 20px;
  49. padding: 15px;
  50. border: 1px solid #eee;
  51. border-radius: 8px;
  52. background-color: #fafafa;
  53. }
  54. .status {
  55. font-weight: bold;
  56. margin-top: 10px;
  57. color: #27ae60;
  58. }
  59. .led-buttons {
  60. display: flex;
  61. gap: 10px;
  62. }
  63. .led-buttons button {
  64. flex: 1;
  65. }
  66. #sendBtn {
  67. background-color: #27ae60;
  68. }
  69. #sendBtn:hover {
  70. background-color: #229954;
  71. }
  72. #scanBtn {
  73. background-color: #9b59b6;
  74. }
  75. #scanBtn:hover {
  76. background-color: #8e44ad;
  77. }
  78. #wifiResults {
  79. margin-top: 15px;
  80. max-height: 300px;
  81. overflow-y: auto;
  82. border: 1px solid #ddd;
  83. border-radius: 5px;
  84. padding: 10px;
  85. background-color: #f9f9f9;
  86. }
  87. #wifiResults ul {
  88. list-style: none;
  89. padding: 0;
  90. margin: 0;
  91. }
  92. #wifiResults li {
  93. padding: 8px;
  94. margin: 2px 0;
  95. background-color: white;
  96. border-radius: 4px;
  97. border: 1px solid #eee;
  98. }
  99. .ssid {
  100. font-weight: bold;
  101. margin-right: 10px;
  102. }
  103. .rssi-strong {
  104. color: #27ae60;
  105. }
  106. .rssi-medium {
  107. color: #f39c12;
  108. }
  109. .rssi-weak {
  110. color: #e74c3c;
  111. }
  112. </style>
  113. <script type="text/javascript">
  114. function led(key) {
  115. fetch("/led/" + key)
  116. .then(function(resp) {
  117. if (resp.status == 200) {
  118. document.getElementById("status").textContent = "LED已" + (key == 1 ? "开启" : "关闭");
  119. }
  120. })
  121. }
  122. function sendText() {
  123. var text = document.getElementById("inputText").value;
  124. if (text.trim() === "") {
  125. alert("请输入文本内容");
  126. return;
  127. }
  128. // 添加调试日志
  129. console.log("发送文本:", text);
  130. fetch("/send/text", {
  131. method: "POST",
  132. headers: {
  133. "Content-Type": "text/plain"
  134. },
  135. body: text
  136. }).then(function(resp) {
  137. console.log("响应状态:", resp.status);
  138. if (resp.status == 200) {
  139. document.getElementById("status").textContent = "文本已发送至设备日志";
  140. document.getElementById("inputText").value = "";
  141. } else {
  142. document.getElementById("status").textContent = "发送失败: " + resp.status;
  143. }
  144. }).catch(function(error) {
  145. console.error("发送错误:", error);
  146. document.getElementById("status").textContent = "发送出错: " + error.message;
  147. });
  148. }
  149. // 按下回车键时发送文本
  150. function handleKeyPress(event) {
  151. if (event.key === "Enter") {
  152. sendText();
  153. }
  154. }
  155. // WiFi扫描功能
  156. function scanWifi() {
  157. document.getElementById("status").textContent = "正在扫描WiFi...";
  158. document.getElementById("wifiResults").innerHTML = "";
  159. fetch("/scan/go")
  160. .then(function(resp) {
  161. if (resp.status == 200) {
  162. document.getElementById("status").textContent = "扫描已开始,正在获取结果...";
  163. // 等待1秒后获取扫描结果
  164. setTimeout(getWifiResults, 1000);
  165. } else {
  166. document.getElementById("status").textContent = "扫描失败: " + resp.status;
  167. }
  168. })
  169. .catch(function(error) {
  170. console.error("扫描错误:", error);
  171. document.getElementById("status").textContent = "扫描出错: " + error.message;
  172. });
  173. }
  174. // 获取WiFi扫描结果
  175. function getWifiResults() {
  176. fetch("/scan/list")
  177. .then(function(resp) {
  178. if (resp.status == 200) {
  179. return resp.json();
  180. } else {
  181. throw new Error("获取结果失败: " + resp.status);
  182. }
  183. })
  184. .then(function(data) {
  185. const resultsDiv = document.getElementById("wifiResults");
  186. if (data && data.data && data.data.length > 0) {
  187. let html = "<ul>";
  188. data.data.forEach(function(ap) {
  189. let rssiClass = "rssi-weak";
  190. if (ap.rssi > -70) rssiClass = "rssi-strong";
  191. else if (ap.rssi > -85) rssiClass = "rssi-medium";
  192. html += `<li><span class="ssid">${ap.ssid}</span> <span class="${rssiClass}">信号: ${ap.rssi} dBm</span></li>`;
  193. });
  194. html += "</ul>";
  195. resultsDiv.innerHTML = html;
  196. document.getElementById("status").textContent = "扫描完成,共发现 " + data.data.length + " 个WiFi网络";
  197. } else {
  198. resultsDiv.innerHTML = "未发现WiFi网络";
  199. document.getElementById("status").textContent = "扫描完成,未发现WiFi网络";
  200. }
  201. })
  202. .catch(function(error) {
  203. console.error("获取结果错误:", error);
  204. document.getElementById("status").textContent = "获取结果出错: " + error.message;
  205. });
  206. }
  207. </script>
  208. </header>
  209. <body>
  210. <div class="container">
  211. <h2>Air8000 控制中心</h2>
  212. <!-- 文本发送功能 -->
  213. <div class="control-panel">
  214. <h4>文本发送</h4>
  215. <label for="inputText">输入文本:</label>
  216. <input type="text" id="inputText" placeholder="请输入要发送到设备日志的文本" onkeypress="handleKeyPress(event)">
  217. <button id="sendBtn" onclick="sendText()">发送文本</button>
  218. </div>
  219. <!-- LED控制功能 -->
  220. <div class="control-panel">
  221. <h4>LED控制</h4>
  222. <div class="led-buttons">
  223. <button onclick="led(1)">开启LED</button>
  224. <button onclick="led(0)">关闭LED</button>
  225. </div>
  226. </div>
  227. <!-- WiFi扫描功能 -->
  228. <div class="control-panel">
  229. <h4>WiFi扫描</h4>
  230. <button id="scanBtn" onclick="scanWifi()">扫描WiFi网络</button>
  231. <div id="wifiResults">请点击上方按钮开始扫描</div>
  232. </div>
  233. <!-- 状态显示 -->
  234. <div class="status" id="status">就绪</div>
  235. </div>
  236. </body>
  237. </html>