Spaces:
Paused
Paused
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>设备监控</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| background: white; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| width: 300px; | |
| } | |
| .count { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| color: #3a7bd5; | |
| margin: 0.5rem 0; | |
| } | |
| .label { | |
| font-size: 1.2rem; | |
| color: #666; | |
| } | |
| .refresh { | |
| margin-top: 1rem; | |
| padding: 0.5rem 1rem; | |
| background: #3a7bd5; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: background 0.3s; | |
| } | |
| .refresh:hover { | |
| background: #2c5fb3; | |
| } | |
| .version { | |
| font-size: 0.8rem; | |
| color: #999; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="label">当前设备数</div> | |
| <div class="version">Version: v0.6.2</div> | |
| <div class="count" id="deviceCount">0</div> | |
| <button class="refresh" onclick="fetchDeviceCount()">刷新数据</button> | |
| </div> | |
| <script> | |
| // 初始加载设备数量 | |
| document.addEventListener('DOMContentLoaded', fetchDeviceCount); | |
| // 获取设备数量 | |
| async function fetchDeviceCount() { | |
| try { | |
| const response = await fetch('/api/devices'); | |
| const devices = await response.json(); | |
| document.getElementById('deviceCount').textContent = devices.length; | |
| } catch (error) { | |
| console.error('获取设备数量失败:', error); | |
| document.getElementById('deviceCount').textContent = "错误"; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |