index.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <header>
  4. <meta charset="utf-8" />
  5. <title>Air8101 控制中心</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. #sendBtn {
  60. background-color: #27ae60;
  61. }
  62. #sendBtn:hover {
  63. background-color: #229954;
  64. }
  65. #scanBtn {
  66. background-color: #9b59b6;
  67. }
  68. #scanBtn:hover {
  69. background-color: #8e44ad;
  70. }
  71. #wifiResults {
  72. margin-top: 15px;
  73. max-height: 300px;
  74. overflow-y: auto;
  75. border: 1px solid #ddd;
  76. border-radius: 5px;
  77. padding: 10px;
  78. background-color: #f9f9f9;
  79. }
  80. #wifiResults ul {
  81. list-style: none;
  82. padding: 0;
  83. margin: 0;
  84. }
  85. #wifiResults li {
  86. padding: 8px;
  87. margin: 2px 0;
  88. background-color: white;
  89. border-radius: 4px;
  90. border: 1px solid #eee;
  91. }
  92. .ssid {
  93. font-weight: bold;
  94. margin-right: 10px;
  95. }
  96. .rssi-strong {
  97. color: #27ae60;
  98. }
  99. .rssi-medium {
  100. color: #f39c12;
  101. }
  102. .rssi-weak {
  103. color: #e74c3c;
  104. }
  105. </style>
  106. <script type="text/javascript">
  107. function sendText() {
  108. var text = document.getElementById("inputText").value;
  109. if (text.trim() === "") {
  110. alert("请输入文本内容");
  111. return;
  112. }
  113. // 添加调试日志
  114. console.log("发送文本:", text);
  115. fetch("/send/text", {
  116. method: "POST",
  117. headers: {
  118. "Content-Type": "text/plain"
  119. },
  120. body: text
  121. }).then(function(resp) {
  122. console.log("响应状态:", resp.status);
  123. if (resp.status == 200) {
  124. document.getElementById("status").textContent = "文本已发送至设备日志";
  125. document.getElementById("inputText").value = "";
  126. } else {
  127. document.getElementById("status").textContent = "发送失败: " + resp.status;
  128. }
  129. }).catch(function(error) {
  130. console.error("发送错误:", error);
  131. document.getElementById("status").textContent = "发送出错: " + error.message;
  132. });
  133. }
  134. // 按下回车键时发送文本
  135. function handleKeyPress(event) {
  136. if (event.key === "Enter") {
  137. sendText();
  138. }
  139. }
  140. // WiFi扫描功能
  141. function scanWifi() {
  142. document.getElementById("status").textContent = "正在扫描WiFi...";
  143. document.getElementById("wifiResults").innerHTML = "";
  144. fetch("/scan/go")
  145. .then(function(resp) {
  146. if (resp.status == 200) {
  147. document.getElementById("status").textContent = "扫描已开始,正在获取结果...";
  148. // 等待1秒后获取扫描结果
  149. setTimeout(getWifiResults, 1000);
  150. } else {
  151. document.getElementById("status").textContent = "扫描失败: " + resp.status;
  152. }
  153. })
  154. .catch(function(error) {
  155. console.error("扫描错误:", error);
  156. document.getElementById("status").textContent = "扫描出错: " + error.message;
  157. });
  158. }
  159. // 获取WiFi扫描结果
  160. function getWifiResults() {
  161. fetch("/scan/list")
  162. .then(function(resp) {
  163. if (resp.status == 200) {
  164. return resp.json();
  165. } else {
  166. throw new Error("获取结果失败: " + resp.status);
  167. }
  168. })
  169. .then(function(data) {
  170. const resultsDiv = document.getElementById("wifiResults");
  171. if (data && data.data && data.data.length > 0) {
  172. let html = "<ul>";
  173. data.data.forEach(function(ap) {
  174. let rssiClass = "rssi-weak";
  175. if (ap.rssi > -70) rssiClass = "rssi-strong";
  176. else if (ap.rssi > -85) rssiClass = "rssi-medium";
  177. html += `<li><span class="ssid">${ap.ssid}</span> <span class="${rssiClass}">信号: ${ap.rssi} dBm</span></li>`;
  178. });
  179. html += "</ul>";
  180. resultsDiv.innerHTML = html;
  181. document.getElementById("status").textContent = "扫描完成,共发现 " + data.data.length + " 个WiFi网络";
  182. } else {
  183. resultsDiv.innerHTML = "未发现WiFi网络";
  184. document.getElementById("status").textContent = "扫描完成,未发现WiFi网络";
  185. }
  186. })
  187. .catch(function(error) {
  188. console.error("获取结果错误:", error);
  189. document.getElementById("status").textContent = "获取结果出错: " + error.message;
  190. });
  191. }
  192. </script>
  193. </header>
  194. <body>
  195. <div class="container">
  196. <h2>Air8101 控制中心</h2>
  197. <!-- 文本发送功能 -->
  198. <div class="control-panel">
  199. <h4>文本发送</h4>
  200. <label for="inputText">输入文本:</label>
  201. <input type="text" id="inputText" placeholder="请输入要发送到设备日志的文本" onkeypress="handleKeyPress(event)">
  202. <button id="sendBtn" onclick="sendText()">发送文本</button>
  203. </div>
  204. <!-- WiFi扫描功能 -->
  205. <div class="control-panel">
  206. <h4>WiFi扫描</h4>
  207. <button id="scanBtn" onclick="scanWifi()">扫描WiFi网络</button>
  208. <div id="wifiResults">请点击上方按钮开始扫描</div>
  209. </div>
  210. <!-- 状态显示 -->
  211. <div class="status" id="status">就绪</div>
  212. </div>
  213. </body>
  214. </html>