2026-03-27 10:19:34 +00:00
<!DOCTYPE html>
< html lang = "zh-CN" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > KKS 工牌管理系统< / title >
< script src = "https://cdn.tailwindcss.com" > < / script >
2026-03-27 13:04:11 +00:00
< script src = "https://webapi.amap.com/maps?v=2.0&key=9c2fe56bb2bad44d238dd9b4be249e33&plugin=AMap.MouseTool,AMap.PolygonEditor,AMap.CircleEditor" > < / script >
2026-03-27 10:19:34 +00:00
< script src = "https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" > < / script >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" / >
< style >
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #111827; color: #e5e7eb; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }
.sidebar { width: 240px; min-height: 100vh; background: #1f2937; position: fixed; left: 0; top: 0; z-index: 40; transition: transform 0.3s; }
.main-content { margin-left: 240px; min-height: 100vh; }
.nav-item { display: flex; align-items: center; padding: 12px 20px; color: #9ca3af; cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; }
.nav-item:hover { background: #374151; color: #e5e7eb; }
.nav-item.active { background: #374151; color: #60a5fa; border-left-color: #60a5fa; }
.nav-item i { width: 24px; margin-right: 12px; text-align: center; }
.page { display: none; }
.page.active { display: block; }
.stat-card { background: #1f2937; border-radius: 12px; padding: 24px; border: 1px solid #374151; transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #1f2937; border-radius: 12px; padding: 24px; max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; border: 1px solid #374151; }
.beacon-search-item:hover { background: #1e3a5f; }
2026-03-27 13:04:11 +00:00
.amap-container { z-index: 0 !important; }
2026-03-27 10:19:34 +00:00
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 20px; border-radius: 8px; color: white; font-size: 14px; animation: slideIn 0.3s ease; min-width: 250px; display: flex; align-items: center; gap: 8px; }
.toast.success { background: #059669; }
.toast.error { background: #dc2626; }
.toast.info { background: #2563eb; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.badge { padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.badge-online { background: #065f46; color: #6ee7b7; }
.badge-offline { background: #7f1d1d; color: #fca5a5; }
.badge-pending { background: #78350f; color: #fde68a; }
.badge-sent { background: #1e3a5f; color: #93c5fd; }
.badge-success { background: #065f46; color: #6ee7b7; }
.badge-failed { background: #7f1d1d; color: #fca5a5; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px 16px; background: #111827; color: #9ca3af; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #374151; }
td { padding: 12px 16px; border-bottom: 1px solid #1f2937; font-size: 14px; }
tr:hover td { background: #1a2332; }
.btn { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: #059669; color: white; }
.btn-success:hover { background: #047857; }
.btn-secondary { background: #4b5563; color: white; }
.btn-secondary:hover { background: #374151; }
.btn-warning { background: #d97706; color: white; }
.btn-warning:hover { background: #b45309; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
input, select, textarea {
background: #111827; border: 1px solid #374151; color: #e5e7eb; padding: 8px 12px;
border-radius: 8px; font-size: 14px; width: 100%; outline: none; transition: border-color 0.2s;
}
select option { background: #1f2937; color: #e5e7eb; }
input:focus, select:focus, textarea:focus { border-color: #2563eb; }
label { display: block; margin-bottom: 4px; font-size: 14px; color: #9ca3af; }
.form-group { margin-bottom: 16px; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #374151; border-top-color: #60a5fa; border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay { position: absolute; inset: 0; background: rgba(17,24,39,0.7); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 12px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.pagination button { padding: 6px 12px; background: #374151; color: #e5e7eb; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.pagination button:hover { background: #4b5563; }
.pagination button.active { background: #2563eb; }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
2026-03-27 13:04:11 +00:00
.amap-container { background: #111827; }
2026-03-27 10:19:34 +00:00
.alarm-sos { color: #ef4444; }
.alarm-low_battery { color: #f97316; }
.alarm-remove { color: #eab308; }
.alarm-fence { color: #a855f7; }
.alarm-default { color: #6b7280; }
/* Help Guide */
.page-guide { background: linear-gradient(135deg, #1e293b 0%, #1a2332 100%); border: 1px solid #334155; border-radius: 12px; margin-bottom: 20px; overflow: hidden; transition: all 0.3s ease; }
.page-guide.collapsed .guide-body { display: none; }
.guide-header { display: flex; align-items: center; justify-content: between; padding: 12px 18px; cursor: pointer; user-select: none; }
.guide-header:hover { background: rgba(59,130,246,0.05); }
.guide-header .guide-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
.guide-header .guide-title { flex: 1; font-size: 14px; font-weight: 600; color: #94a3b8; }
.guide-header .guide-toggle { color: #64748b; font-size: 12px; transition: transform 0.3s; padding: 4px 8px; }
.page-guide.collapsed .guide-toggle { transform: rotate(-90deg); }
.guide-body { padding: 0 18px 16px 18px; }
.guide-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.guide-step { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: rgba(30,41,59,0.6); border-radius: 8px; border: 1px solid #1e293b; }
.guide-step .step-num { width: 22px; height: 22px; background: #3b82f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; margin-top: 1px; }
.guide-step .step-text { font-size: 13px; color: #94a3b8; line-height: 1.5; }
.guide-step .step-text strong { color: #e2e8f0; font-weight: 600; }
.guide-tips { margin-top: 10px; padding: 10px 14px; background: rgba(59,130,246,0.06); border-radius: 8px; border-left: 3px solid #3b82f6; }
.guide-tips p { font-size: 12px; color: #64748b; line-height: 1.6; }
.guide-tips p i { color: #3b82f6; margin-right: 4px; }
/* === Side Panel === */
.page-with-panel { display: flex; gap: 16px; height: calc(100vh - 140px); }
.side-panel { width: 280px; min-width: 280px; background: #1f2937; border: 1px solid #374151; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transition: width 0.3s, min-width 0.3s, opacity 0.3s; }
.side-panel.collapsed { width: 0; min-width: 0; border: none; opacity: 0; }
.page-main-content { flex: 1; min-width: 0; overflow-y: auto; }
.panel-header { padding: 12px 14px; border-bottom: 1px solid #374151; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.panel-header .panel-title { font-size: 14px; font-weight: 600; color: #e5e7eb; flex: 1; }
.panel-toggle-btn { background: none; border: none; color: #9ca3af; cursor: pointer; padding: 4px; font-size: 14px; }
.panel-toggle-btn:hover { color: #e5e7eb; }
.panel-search { padding: 8px 12px; border-bottom: 1px solid #374151; flex-shrink: 0; }
.panel-search-wrap { position: relative; }
.panel-search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 12px; }
.panel-search-wrap input { padding-left: 30px; font-size: 13px; }
.panel-list { flex: 1; overflow-y: auto; padding: 8px; }
.panel-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-bottom: 6px; transition: all 0.15s; position: relative; }
.panel-item:hover { background: #374151; border-color: #4b5563; }
.panel-item.active { background: #1e3a5f; border-color: #2563eb; }
.panel-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.panel-item-name { font-size: 13px; font-weight: 600; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.panel-item-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.panel-item-status.online { background: #34d399; }
.panel-item-status.offline { background: #f87171; }
.panel-item-status.active { background: #34d399; }
.panel-item-status.inactive { background: #f87171; }
.panel-item-sub { font-size: 11px; color: #9ca3af; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: #6b7280; }
.battery-bar { width: 28px; height: 10px; background: #374151; border-radius: 2px; border: 1px solid #4b5563; overflow: hidden; display: inline-block; }
.battery-bar-fill { height: 100%; border-radius: 1px; }
.panel-item-actions { position: absolute; right: 8px; top: 8px; display: none; gap: 4px; }
.panel-item:hover .panel-item-actions { display: flex; }
.panel-action-btn { width: 24px; height: 24px; border-radius: 4px; border: none; background: #4b5563; color: #e5e7eb; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.panel-action-btn:hover { background: #2563eb; }
2026-03-30 04:26:29 +00:00
.fence-tab { padding: 8px 16px; border: none; background: transparent; color: #9ca3af; cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; transition: all 0.2s; }
.fence-tab:hover { color: #e5e7eb; background: #374151; }
.fence-tab.active { color: #60a5fa; border-bottom-color: #3b82f6; background: rgba(59,130,246,0.1); }
2026-03-27 10:19:34 +00:00
.panel-footer { padding: 6px 12px; border-top: 1px solid #374151; font-size: 11px; color: #6b7280; text-align: center; flex-shrink: 0; }
.panel-expand-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #1f2937; border: 1px solid #374151; border-left: none; border-radius: 0 6px 6px 0; padding: 8px 4px; color: #9ca3af; cursor: pointer; z-index: 5; display: none; }
.side-panel.collapsed ~ .page-main-content .panel-expand-btn { display: block; }
@media (max-width: 768px) { .page-with-panel { flex-direction: column; height: auto; } .side-panel { width: 100%; min-width: 100%; max-height: 300px; } .side-panel.collapsed { max-height: 0; } }
< / style >
< / head >
< body >
<!-- Toast Container -->
< div id = "toastContainer" class = "toast-container" > < / div >
<!-- Sidebar -->
< aside class = "sidebar" id = "sidebar" >
< div class = "p-5 border-b border-gray-700" >
< h1 class = "text-xl font-bold text-blue-400" > < i class = "fas fa-id-badge mr-2" > < / i > KKS 工牌管理< / h1 >
< p class = "text-xs text-gray-500 mt-1" > Badge Management System< / p >
< / div >
< nav class = "mt-4" >
< div class = "nav-item active" data-page = "dashboard" onclick = "navigateTo('dashboard')" >
< i class = "fas fa-tachometer-alt" > < / i > < span > 仪表盘< / span >
< / div >
< div class = "nav-item" data-page = "devices" onclick = "navigateTo('devices')" >
< i class = "fas fa-microchip" > < / i > < span > 设备管理< / span >
< / div >
< div class = "nav-item" data-page = "locations" onclick = "navigateTo('locations')" >
< i class = "fas fa-map-marker-alt" > < / i > < span > 位置追踪< / span >
< / div >
< div class = "nav-item" data-page = "alarms" onclick = "navigateTo('alarms')" >
< i class = "fas fa-bell" > < / i > < span > 告警管理< / span >
< / div >
< div class = "nav-item" data-page = "attendance" onclick = "navigateTo('attendance')" >
< i class = "fas fa-clipboard-check" > < / i > < span > 考勤记录< / span >
< / div >
< div class = "nav-item" data-page = "bluetooth" onclick = "navigateTo('bluetooth')" >
< i class = "fab fa-bluetooth-b" > < / i > < span > 蓝牙记录< / span >
< / div >
< div class = "nav-item" data-page = "beacons" onclick = "navigateTo('beacons')" >
< i class = "fas fa-broadcast-tower" > < / i > < span > 信标管理< / span >
< / div >
2026-03-27 13:04:11 +00:00
< div class = "nav-item" data-page = "fences" onclick = "navigateTo('fences')" >
< i class = "fas fa-draw-polygon" > < / i > < span > 围栏管理< / span >
< / div >
< div class = "nav-item" data-page = "datalog" onclick = "navigateTo('datalog')" >
< i class = "fas fa-database" > < / i > < span > 数据日志< / span >
< / div >
2026-03-27 10:19:34 +00:00
< div class = "nav-item" data-page = "commands" onclick = "navigateTo('commands')" >
< i class = "fas fa-terminal" > < / i > < span > 指令管理< / span >
< / div >
< / nav >
< div class = "absolute bottom-0 left-0 right-0 p-4 border-t border-gray-700" >
< div class = "flex items-center gap-3" >
< div class = "w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold" > A< / div >
< div >
< div class = "text-sm font-medium" > 管理员< / div >
< div class = "text-xs text-gray-500" > Administrator< / div >
< / div >
< / div >
< / div >
< / aside >
<!-- Main Content -->
< main class = "main-content" >
<!-- Top Bar -->
< header class = "bg-gray-800 border-b border-gray-700 px-6 py-3 flex items-center justify-between sticky top-0 z-30" >
< div class = "flex items-center gap-4" >
< h2 id = "pageTitle" class = "text-lg font-semibold" > 仪表盘< / h2 >
< / div >
< div class = "flex items-center gap-4" >
< span id = "healthStatus" class = "text-sm text-gray-400" > < i class = "fas fa-circle text-gray-600 mr-1 text-xs" > < / i > 检查中...< / span >
< span class = "text-sm text-gray-500" id = "currentTime" > < / span >
< / div >
< / header >
< div class = "p-6" >
<!-- ==================== DASHBOARD PAGE ==================== -->
< div id = "page-dashboard" class = "page active" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 仪表盘 — 系统全局概览< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 设备状态< / strong > ：实时显示设备总数、在线/离线数量及 TCP 连接数< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 告警概览< / strong > ：汇总告警总数、未确认/已确认数量一目了然< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 类型分布< / strong > ：饼图展示各告警类型占比，快速定位高频问题< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 最近告警< / strong > ：滚动列表显示最新 10 条告警事件< / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-sync-alt" > < / i > 数据每 30 秒自动刷新，无需手动操作< / p > < / div >
< / div >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6" >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 设备总数< / p >
< p class = "text-3xl font-bold mt-1" id = "dashTotalDevices" > -< / p >
< / div >
< div class = "w-12 h-12 bg-blue-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-microchip text-blue-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 在线设备< / p >
< p class = "text-3xl font-bold mt-1 text-green-400" id = "dashOnlineDevices" > -< / p >
< / div >
< div class = "w-12 h-12 bg-green-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-wifi text-green-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 离线设备< / p >
< p class = "text-3xl font-bold mt-1 text-red-400" id = "dashOfflineDevices" > -< / p >
< / div >
< div class = "w-12 h-12 bg-red-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-plug text-red-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 已连接设备< / p >
< p class = "text-3xl font-bold mt-1 text-purple-400" id = "dashConnectedDevices" > -< / p >
< / div >
< div class = "w-12 h-12 bg-purple-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-link text-purple-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6" >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 告警总数< / p >
< p class = "text-3xl font-bold mt-1 text-yellow-400" id = "dashTotalAlarms" > -< / p >
< / div >
< div class = "w-12 h-12 bg-yellow-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-bell text-yellow-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 未确认告警< / p >
< p class = "text-3xl font-bold mt-1 text-orange-400" id = "dashUnackAlarms" > -< / p >
< / div >
< div class = "w-12 h-12 bg-orange-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-exclamation-triangle text-orange-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 已确认告警< / p >
< p class = "text-3xl font-bold mt-1 text-teal-400" id = "dashAckAlarms" > -< / p >
< / div >
< div class = "w-12 h-12 bg-teal-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-check-circle text-teal-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< div class = "stat-card" >
< div class = "flex items-center justify-between" >
< div >
< p class = "text-gray-400 text-sm" > 系统状态< / p >
< p class = "text-lg font-bold mt-1 text-green-400" id = "dashSystemStatus" > -< / p >
< / div >
< div class = "w-12 h-12 bg-green-900/50 rounded-xl flex items-center justify-center" >
< i class = "fas fa-heartbeat text-green-400 text-xl" > < / i >
< / div >
< / div >
< / div >
< / div >
< div class = "grid grid-cols-1 lg:grid-cols-2 gap-6" >
< div class = "stat-card" >
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-chart-pie mr-2 text-blue-400" > < / i > 告警类型分布< / h3 >
< div style = "max-height: 300px; display: flex; justify-content: center;" >
< canvas id = "dashAlarmChart" > < / canvas >
< / div >
< / div >
< div class = "stat-card" >
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-list mr-2 text-red-400" > < / i > 最近告警< / h3 >
< div id = "dashRecentAlarms" class = "space-y-2" style = "max-height: 300px; overflow-y: auto;" >
< p class = "text-gray-500 text-sm" > 加载中...< / p >
< / div >
< / div >
< / div >
< / div >
<!-- ==================== DEVICES PAGE ==================== -->
< div id = "page-devices" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 设备管理 — 注册、监控与维护工牌设备< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 搜索设备< / strong > ：在搜索框输入 IMEI 或设备名称，按 Enter 检索< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 筛选状态< / strong > ：下拉选择"在线"或"离线"快速过滤< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 添加设备< / strong > ：点击右上角蓝色按钮，填写 IMEI(15-20位) 和设备类型< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 查看详情< / strong > ：点击表格行查看设备详细信息，支持编辑和删除< / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-info-circle" > < / i > 设备首次通过 TCP 连接登录时会自动注册，也可手动添加预注册< / p > < / div >
< / div >
< / div >
< div class = "flex flex-wrap items-center justify-between gap-4 mb-6" >
< div class = "flex flex-wrap items-center gap-3" >
< div class = "relative" >
< i class = "fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" > < / i >
< input type = "text" id = "deviceSearch" placeholder = "搜索 IMEI / 名称..." class = "pl-10" style = "width:240px" onkeyup = "if(event.key==='Enter')loadDevices()" >
< / div >
< select id = "deviceStatusFilter" style = "width:140px" onchange = "loadDevices()" >
< option value = "" > 全部状态< / option >
< option value = "online" > 在线< / option >
< option value = "offline" > 离线< / option >
< / select >
< button class = "btn btn-secondary" onclick = "loadDevices()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< / div >
< button class = "btn btn-primary" onclick = "showAddDeviceModal()" > < i class = "fas fa-plus" > < / i > 添加设备< / button >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "devicesLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > IMEI< / th >
< th > 名称< / th >
< th > 类型< / th >
< th > 状态< / th >
< th > 电量< / th >
< th > 信号< / th >
< th > 最后登录< / th >
< th > 最后心跳< / th >
< / tr >
< / thead >
< tbody id = "devicesTableBody" >
< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
< / tbody >
< / table >
< / div >
< div id = "devicesPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
<!-- ==================== LOCATIONS PAGE ==================== -->
< div id = "page-locations" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 位置追踪 — 地图定位与轨迹回放< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 选择设备< / strong > ：从下拉框选择要查看的工牌设备< / div > < / div >
2026-03-30 04:26:29 +00:00
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 最新位置< / strong > ： < / div > < / div >
2026-03-27 10:19:34 +00:00
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 轨迹回放< / strong > ：设定日期范围后点击"显示轨迹"查看移动路径< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 定位类型< / strong > ：支持 GPS / LBS 基站 / WiFi 及其 4G 变体筛选< / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-map-marked-alt" > < / i > 轨迹以蓝色折线显示，绿色标记为起点，红色标记为终点< / p > < / div >
< / div >
< / div >
< div class = "page-with-panel" >
<!-- Left: Device Panel -->
< div class = "side-panel" id = "locSidePanel" >
< div class = "panel-header" >
< i class = "fas fa-microchip text-blue-400" style = "font-size:14px" > < / i >
< span class = "panel-title" > 设备列表< / span >
< span id = "locPanelCount" style = "font-size:11px;color:#6b7280" > < / span >
< button class = "panel-toggle-btn" onclick = "toggleSidePanel('locSidePanel')" title = "收起面板" > < i class = "fas fa-chevron-left" > < / i > < / button >
< / div >
< div class = "panel-search" > < div class = "panel-search-wrap" > < i class = "fas fa-search" > < / i > < input type = "text" id = "locPanelSearch" placeholder = "搜索设备..." oninput = "filterPanelItems('locations')" > < / div > < / div >
< div class = "panel-list" id = "locPanelList" >
< div style = "text-align:center;padding:20px;color:#6b7280" > < div class = "spinner" > < / div > < p style = "margin-top:8px;font-size:12px" > 加载设备...< / p > < / div >
< / div >
< div class = "panel-footer" id = "locPanelFooter" > 加载中...< / div >
< / div >
<!-- Right: Main Content -->
< div class = "page-main-content" style = "position:relative" >
< button class = "panel-expand-btn" onclick = "toggleSidePanel('locSidePanel')" title = "展开设备面板" > < i class = "fas fa-chevron-right" > < / i > < / button >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< select id = "locDeviceSelect" style = "width:200px" >
< option value = "" > 选择设备...< / option >
< / select >
< select id = "locTypeFilter" style = "width:150px" >
< option value = "" > 全部类型< / option >
< option value = "gps" > GPS< / option >
< option value = "gps_4g" > GPS 4G< / option >
< option value = "wifi" > WiFi< / option >
< option value = "wifi_4g" > WiFi 4G< / option >
< option value = "lbs" > LBS< / option >
< option value = "lbs_4g" > LBS 4G< / option >
< / select >
< input type = "date" id = "locStartDate" style = "width:160px" >
< input type = "date" id = "locEndDate" style = "width:160px" >
< button class = "btn btn-primary" onclick = "loadTrack()" > < i class = "fas fa-route" > < / i > 显示轨迹< / button >
2026-03-27 13:04:11 +00:00
< button class = "btn btn-primary" onclick = "playTrack()" style = "background:#7c3aed" > < i class = "fas fa-play" > < / i > 路径回放< / button >
2026-03-27 10:19:34 +00:00
< button class = "btn btn-success" onclick = "loadLatestPosition()" > < i class = "fas fa-crosshairs" > < / i > 最新位置< / button >
< button class = "btn btn-secondary" onclick = "loadLocationRecords()" > < i class = "fas fa-list" > < / i > 查询记录< / button >
2026-03-30 04:26:29 +00:00
< button class = "btn" style = "background:#dc2626;color:#fff" onclick = "batchDeleteNoCoordLocations()" > < i class = "fas fa-broom" > < / i > 清除无坐标< / button >
< button class = "btn" style = "background:#b91c1c;color:#fff" id = "btnBatchDeleteLoc" onclick = "batchDeleteSelectedLocations()" disabled > < i class = "fas fa-trash-alt" > < / i > 删除选中 (< span id = "locSelCount" > 0< / span > )< / button >
2026-03-27 10:19:34 +00:00
< / div >
2026-03-30 04:26:29 +00:00
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden mb-6" style = "height: 500px; position: relative;" >
2026-03-27 10:19:34 +00:00
< div id = "locationMap" style = "height: 100%; width: 100%;" > < / div >
2026-03-30 04:26:29 +00:00
< div id = "mapLegend" style = "display:none;position:absolute;bottom:10px;left:10px;background:rgba(30,30,40,0.85);border:1px solid #4b5563;border-radius:8px;padding:8px 12px;font-size:11px;color:#d1d5db;z-index:10;line-height:1.8" >
< span style = "color:#3b82f6" > ● < / span > GPS
< span style = "color:#06b6d4;margin-left:8px" > ● < / span > WiFi < span style = "color:#9ca3af" > (~80m)< / span >
< span style = "color:#f59e0b;margin-left:8px" > ○ < / span > LBS < span style = "color:#9ca3af" > (~1km)< / span >
< span style = "color:#a855f7;margin-left:8px" > ● < / span > 蓝牙
< / div >
2026-03-27 10:19:34 +00:00
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "locationsLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
2026-03-30 04:26:29 +00:00
< th style = "width:32px" > < input type = "checkbox" id = "locSelectAll" onchange = "toggleAllLocCheckboxes(this.checked)" title = "全选" > < / th >
2026-03-27 10:19:34 +00:00
< th > 设备ID< / th >
< th > 类型< / th >
< th > 纬度< / th >
< th > 经度< / th >
< th > 地址< / th >
< th > 速度< / th >
2026-03-27 13:04:11 +00:00
< th > 质量< / th >
2026-03-27 10:19:34 +00:00
< th > 时间< / th >
2026-03-27 13:04:11 +00:00
< th > 操作< / th >
2026-03-27 10:19:34 +00:00
< / tr >
< / thead >
< tbody id = "locationsTableBody" >
2026-03-30 04:26:29 +00:00
< tr > < td colspan = "10" class = "text-center text-gray-500 py-8" > 请选择设备并查询< / td > < / tr >
2026-03-27 10:19:34 +00:00
< / tbody >
< / table >
< / div >
< div id = "locationsPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
< / div >
< / div >
<!-- ==================== ALARMS PAGE ==================== -->
< div id = "page-alarms" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 告警管理 — 查看、处理设备告警事件< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 告警类型< / strong > ： < / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 筛选查看< / strong > ：按设备、类型、确认状态和日期范围组合筛选< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 确认告警< / strong > ：点击行末"确认"按钮标记已处理，可反复切换< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 统计图表< / strong > ：顶部展示告警数量统计与类型分布饼图< / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-exclamation-circle" > < / i > SOS 告警为最高优先级，建议优先处理未确认的 SOS 事件< / p > < / div >
< / div >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-4 gap-4 mb-6" >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 告警总数< / p >
< p class = "text-2xl font-bold mt-1" id = "alarmStatTotal" > -< / p >
< / div >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 未确认< / p >
< p class = "text-2xl font-bold mt-1 text-orange-400" id = "alarmStatUnack" > -< / p >
< / div >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 已确认< / p >
< p class = "text-2xl font-bold mt-1 text-green-400" id = "alarmStatAck" > -< / p >
< / div >
< div class = "stat-card" style = "display:flex;align-items:center;justify-content:center;" >
< canvas id = "alarmTypeChart" style = "max-height:120px;" > < / canvas >
< / div >
< / div >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< select id = "alarmDeviceFilter" style = "width:180px" >
< option value = "" > 全部设备< / option >
< / select >
< select id = "alarmTypeFilter" style = "width:150px" >
< option value = "" > 全部类型< / option >
< option value = "sos" > SOS< / option >
< option value = "low_battery" > 低电量< / option >
< option value = "vibration" > 振动< / option >
< option value = "power_cut" > 断电< / option >
< option value = "remove" > 拆除< / option >
< option value = "enter_fence" > 进入围栏< / option >
< option value = "exit_fence" > 离开围栏< / option >
< option value = "power_on" > 开机< / option >
< option value = "power_off" > 关机< / option >
< option value = "voice_alarm" > 声控报警< / option >
< option value = "fake_base_station" > 伪基站< / option >
< / select >
< select id = "alarmAckFilter" style = "width:150px" >
< option value = "" > 全部状态< / option >
< option value = "false" > 未确认< / option >
< option value = "true" > 已确认< / option >
< / select >
< input type = "date" id = "alarmStartDate" style = "width:160px" >
< input type = "date" id = "alarmEndDate" style = "width:160px" >
< button class = "btn btn-primary" onclick = "loadAlarms()" > < i class = "fas fa-search" > < / i > 查询< / button >
< button class = "btn btn-secondary" onclick = "loadAlarms()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "alarmsLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > 设备ID< / th >
< th > 类型< / th >
< th > 来源< / th >
< th > 位置< / th >
< th > 电量< / th >
< th > 信号< / th >
< th > 状态< / th >
< th > 时间< / th >
< th > 操作< / th >
< / tr >
< / thead >
< tbody id = "alarmsTableBody" >
< tr > < td colspan = "9" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
< / tbody >
< / table >
< / div >
< div id = "alarmsPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
<!-- ==================== ATTENDANCE PAGE ==================== -->
< div id = "page-attendance" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 考勤记录 — 工牌打卡签到与统计< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > GPS考勤 (0xB0/0xB1)< / strong > ：工牌到达打卡区域时通过 GPS+基站+WiFi 综合定位自动打卡，记录精确位置和地址< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 签到/签退< / strong > ：系统根据终端状态码自动判断 clock_in(签到) 或 clock_out(签退)< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 位置信息< / strong > ： < / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 与蓝牙打卡区别< / strong > ： < / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-clock" > < / i > 考勤数据由工牌设备自动上报，包含 GPS 坐标、基站、WiFi AP、电量、信号强度等完整信息< / p > < / div >
< / div >
< / div >
< div class = "grid grid-cols-1 md:grid-cols-4 gap-4 mb-6" >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 总记录数< / p >
< p class = "text-2xl font-bold mt-1" id = "attStatTotal" > -< / p >
< / div >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 签到次数< / p >
< p class = "text-2xl font-bold mt-1 text-green-400" id = "attStatCheckIn" > -< / p >
< / div >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 签退次数< / p >
< p class = "text-2xl font-bold mt-1 text-blue-400" id = "attStatCheckOut" > -< / p >
< / div >
< div class = "stat-card" >
< p class = "text-gray-400 text-sm" > 其他< / p >
< p class = "text-2xl font-bold mt-1 text-gray-400" id = "attStatOther" > -< / p >
< / div >
< / div >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< select id = "attDeviceFilter" style = "width:180px" >
< option value = "" > 全部设备< / option >
< / select >
< select id = "attTypeFilter" style = "width:150px" >
< option value = "" > 全部类型< / option >
< option value = "clock_in" > 签到< / option >
< option value = "clock_out" > 签退< / option >
< / select >
2026-03-30 04:26:29 +00:00
< select id = "attSourceFilter" style = "width:150px" >
< option value = "" > 全部来源< / option >
< option value = "device" > 设备打卡< / option >
< option value = "bluetooth" > 蓝牙打卡< / option >
< option value = "fence" > 围栏自动< / option >
< / select >
2026-03-27 10:19:34 +00:00
< input type = "date" id = "attStartDate" style = "width:160px" >
< input type = "date" id = "attEndDate" style = "width:160px" >
< button class = "btn btn-primary" onclick = "loadAttendance()" > < i class = "fas fa-search" > < / i > 查询< / button >
< button class = "btn btn-secondary" onclick = "loadAttendance()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "attendanceLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > 设备ID< / th >
< th > 类型< / th >
2026-03-30 04:26:29 +00:00
< th > 来源< / th >
2026-03-27 10:19:34 +00:00
< th > 位置< / th >
< th > 电量/信号< / th >
< th > 基站< / th >
< th > 时间< / th >
< / tr >
< / thead >
< tbody id = "attendanceTableBody" >
2026-03-30 04:26:29 +00:00
< tr > < td colspan = "7" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
2026-03-27 10:19:34 +00:00
< / tbody >
< / table >
< / div >
< div id = "attendancePagination" class = "pagination p-4" > < / div >
< / div >
< / div >
<!-- ==================== BLUETOOTH PAGE ==================== -->
< div id = "page-bluetooth" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 蓝牙记录 — 蓝牙打卡与近场定位数据< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 蓝牙打卡 (0xB2)< / strong > ：工牌靠近 iBeacon 信标时自动触发打卡，记录信标 MAC/UUID/Major/Minor、RSSI 信号强度、信标电量、签到/签退类型< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 蓝牙定位 (0xB3)< / strong > ：工牌定时扫描周围所有 iBeacon 信标，上报各信标的 RSSI 值用于室内三角定位。一次可上报多个信标数据< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 信标部署< / strong > ：需在打卡点/定位区域部署 iBeacon 信标硬件（如 KKM KBeacon 系列），使用信标厂商 APP 配置 UUID、Major、Minor 等参数< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 数据解读< / strong > ： < / div > < / div >
< / div >
< div class = "guide-tips" >
< p > < i class = "fab fa-bluetooth-b" > < / i > < strong > 如何添加蓝牙信标？< / strong > < / p >
< p style = "margin:6px 0 0 0;line-height:1.8;color:#9ca3af;" >
< strong > 第一步< / strong > ：购买 iBeacon 兼容的蓝牙信标硬件（ ： < br >
< strong > 第二步< / strong > ：使用信标厂商提供的 APP（ ） ： （ ） < br >
< strong > 第三步< / strong > ：将信标安装在打卡点或需要定位的区域（门口、走廊、会议室等），建议距地面 2-3 米< br >
< strong > 第四步< / strong > ： < br >
< strong > 注意< / strong > ：不同信标的 UUID/Major/Minor 应设置为不同值以区分位置；同一区域建议部署 3+ 个信标以实现三角定位
< / p >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< select id = "btDeviceFilter" style = "width:180px" >
< option value = "" > 全部设备< / option >
< / select >
< select id = "btTypeFilter" style = "width:150px" >
< option value = "" > 全部类型< / option >
< option value = "punch" > 打卡< / option >
< option value = "location" > 定位< / option >
< / select >
< input type = "date" id = "btStartDate" style = "width:160px" >
< input type = "date" id = "btEndDate" style = "width:160px" >
< button class = "btn btn-primary" onclick = "loadBluetooth()" > < i class = "fas fa-search" > < / i > 查询< / button >
< button class = "btn btn-secondary" onclick = "loadBluetooth()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "bluetoothLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > 设备ID< / th >
< th > 类型< / th >
< th > 信标MAC< / th >
< th > UUID / Major / Minor< / th >
< th > RSSI< / th >
< th > 信标电量< / th >
< th > 打卡< / th >
< th > 时间< / th >
< / tr >
< / thead >
< tbody id = "bluetoothTableBody" >
< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
< / tbody >
< / table >
< / div >
< div id = "bluetoothPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
<!-- ==================== BEACONS PAGE ==================== -->
< div id = "page-beacons" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 信标管理 — 蓝牙信标注册与位置配置< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 注册信标< / strong > ：在此页面添加已部署的 iBeacon 蓝牙信标，填写 MAC 地址、UUID、Major、Minor 等参数< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 设置位置< / strong > ：为每个信标配置安装位置（名称、楼层、区域、经纬度），用于室内定位< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 自动关联< / strong > ：当工牌上报蓝牙数据(0xB2/0xB3)时，系统自动根据信标 MAC 匹配已注册信标的位置信息< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 室内定位< / strong > ：多信标场景下，系统取 RSSI 信号最强的已注册信标位置作为工牌当前位置< / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-info-circle" > < / i > 信标 MAC 地址格式： （ ， ） ， < / p > < / div >
< / div >
< / div >
< div class = "page-with-panel" >
<!-- Left: Beacon Panel -->
< div class = "side-panel" id = "beaconSidePanel" >
< div class = "panel-header" >
< i class = "fas fa-broadcast-tower text-green-400" style = "font-size:14px" > < / i >
< span class = "panel-title" > 信标列表< / span >
< span id = "beaconPanelCount" style = "font-size:11px;color:#6b7280" > < / span >
< button class = "panel-toggle-btn" onclick = "toggleSidePanel('beaconSidePanel')" title = "收起面板" > < i class = "fas fa-chevron-left" > < / i > < / button >
< / div >
< div class = "panel-search" > < div class = "panel-search-wrap" > < i class = "fas fa-search" > < / i > < input type = "text" id = "beaconPanelSearch" placeholder = "搜索信标..." oninput = "filterPanelItems('beacons')" > < / div > < / div >
< div class = "panel-list" id = "beaconPanelList" >
< div style = "text-align:center;padding:20px;color:#6b7280" > < div class = "spinner" > < / div > < p style = "margin-top:8px;font-size:12px" > 加载信标...< / p > < / div >
< / div >
< div class = "panel-footer" id = "beaconPanelFooter" > 加载中...< / div >
< / div >
<!-- Right: Main Content -->
< div class = "page-main-content" style = "position:relative" >
< button class = "panel-expand-btn" onclick = "toggleSidePanel('beaconSidePanel')" title = "展开信标面板" > < i class = "fas fa-chevron-right" > < / i > < / button >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< input type = "text" id = "beaconSearch" placeholder = "搜索 MAC / 名称 / 区域" style = "width:220px" >
< select id = "beaconStatusFilter" style = "width:150px" >
< option value = "" > 全部状态< / option >
< option value = "active" > 启用< / option >
< option value = "inactive" > 停用< / option >
< / select >
< button class = "btn btn-primary" onclick = "loadBeacons()" > < i class = "fas fa-search" > < / i > 查询< / button >
< button class = "btn btn-secondary" onclick = "loadBeacons()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< div style = "flex:1" > < / div >
< button class = "btn btn-primary" onclick = "showAddBeaconModal()" > < i class = "fas fa-plus" > < / i > 添加信标< / button >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "beaconsLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > MAC 地址< / th >
< th > 名称< / th >
< th > UUID / Major / Minor< / th >
< th > 楼层 / 区域< / th >
< th > 坐标< / th >
< th > 状态< / th >
< th > 更新时间< / th >
< th > 操作< / th >
< / tr >
< / thead >
< tbody id = "beaconsTableBody" >
< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
< / tbody >
< / table >
< / div >
< div id = "beaconsPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
< / div >
< / div >
2026-03-27 13:04:11 +00:00
<!-- ==================== FENCES PAGE ==================== -->
< div id = "page-fences" class = "page" >
< div class = "page-with-panel" >
<!-- Left: Fence Panel -->
< div class = "side-panel" id = "fenceSidePanel" >
< div class = "panel-header" >
< i class = "fas fa-draw-polygon text-green-400" style = "font-size:14px" > < / i >
< span class = "panel-title" > 围栏列表< / span >
< span id = "fencePanelCount" style = "font-size:11px;color:#6b7280" > < / span >
< button class = "panel-toggle-btn" onclick = "toggleSidePanel('fenceSidePanel')" title = "收起面板" > < i class = "fas fa-chevron-left" > < / i > < / button >
< / div >
< div class = "panel-search" > < div class = "panel-search-wrap" > < i class = "fas fa-search" > < / i > < input type = "text" id = "fencePanelSearch" placeholder = "搜索围栏..." oninput = "filterPanelItems('fences')" > < / div > < / div >
< div style = "padding:6px 10px;display:flex;gap:4px;flex-wrap:wrap" >
< button class = "btn" style = "font-size:11px;padding:3px 8px;background:#065f46;border:none;color:#6ee7b7;border-radius:4px" onclick = "toggleAllFencesVisible(true)" > < i class = "fas fa-eye" > < / i > 全部显示< / button >
< button class = "btn" style = "font-size:11px;padding:3px 8px;background:#7f1d1d;border:none;color:#fca5a5;border-radius:4px" onclick = "toggleAllFencesVisible(false)" > < i class = "fas fa-eye-slash" > < / i > 全部隐藏< / button >
< / div >
< div class = "panel-list" id = "fencePanelList" >
< div style = "text-align:center;padding:20px;color:#6b7280" > < div class = "spinner" > < / div > < p style = "margin-top:8px;font-size:12px" > 加载围栏...< / p > < / div >
< / div >
< div class = "panel-footer" id = "fencePanelFooter" > 加载中...< / div >
< / div >
<!-- Right: Main Content -->
< div class = "page-main-content" style = "display:flex;flex-direction:column;flex:1;overflow:hidden" >
< button class = "panel-expand-btn" onclick = "toggleSidePanel('fenceSidePanel')" title = "展开围栏面板" > < i class = "fas fa-chevron-right" > < / i > < / button >
< div class = "flex flex-wrap items-center gap-3 mb-3" >
< button class = "btn btn-primary" onclick = "loadFences()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< div style = "flex:1;display:flex;gap:6px;max-width:400px" >
< input type = "text" id = "fenceMapSearchInput" placeholder = "搜索地点..." style = "flex:1" onkeydown = "if(event.key==='Enter')searchFenceMapLocation()" >
< button class = "btn btn-secondary" onclick = "searchFenceMapLocation()" > < i class = "fas fa-search" > < / i > < / button >
< / div >
< div style = "flex:1" > < / div >
< button class = "btn btn-primary" onclick = "showAddFenceModal()" > < i class = "fas fa-plus" > < / i > 添加围栏< / button >
< / div >
< div id = "fenceMapContainer" style = "flex:1;min-height:400px;border-radius:12px;border:1px solid #374151;margin-bottom:12px;position:relative;" >
< div id = "fenceMap" style = "height:100%;width:100%;border-radius:12px;" > < / div >
< / div >
2026-03-30 04:26:29 +00:00
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" style = "max-height:300px;overflow-y:auto" >
2026-03-27 13:04:11 +00:00
< div id = "fencesLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
2026-03-30 04:26:29 +00:00
<!-- Tabs -->
< div style = "display:flex;border-bottom:1px solid #374151;background:#1f2937" >
< button id = "fenceTabList" class = "fence-tab active" onclick = "switchFenceTab('list')" > < i class = "fas fa-list" > < / i > 围栏列表< / button >
< button id = "fenceTabBindings" class = "fence-tab" onclick = "switchFenceTab('bindings')" > < i class = "fas fa-link" > < / i > 设备绑定< / button >
< / div >
<!-- Tab: Fence List -->
< div id = "fenceTabContentList" class = "overflow-x-auto" >
2026-03-27 13:04:11 +00:00
< table >
< thead >
< tr >
< th > 名称< / th >
< th > 类型< / th >
< th > 颜色< / th >
< th > 半径/顶点< / th >
< th > 描述< / th >
< th > 状态< / th >
< th > 更新时间< / th >
< th > 操作< / th >
< / tr >
< / thead >
< tbody id = "fencesTableBody" >
< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
< / tbody >
< / table >
< / div >
2026-03-30 04:26:29 +00:00
<!-- Tab: Device Bindings -->
< div id = "fenceTabContentBindings" style = "display:none;padding:12px" >
< div style = "display:flex;gap:8px;margin-bottom:10px;align-items:center" >
< select id = "fenceBindSelect" style = "flex:1;max-width:240px" onchange = "loadFenceBindingTab()" >
< option value = "" > 选择围栏...< / option >
< / select >
< select id = "fenceBindDeviceAdd" style = "flex:1;max-width:240px" >
< option value = "" > 选择设备添加绑定...< / option >
< / select >
< button class = "btn btn-primary" style = "white-space:nowrap" onclick = "quickBindDevice()" > < i class = "fas fa-plus" > < / i > 绑定< / button >
< / div >
< div id = "fenceBindTableWrap" class = "overflow-x-auto" >
< table >
< thead > < tr >
< th > 设备名称< / th > < th > IMEI< / th > < th > 围栏状态< / th > < th > 最后检测< / th > < th > 操作< / th >
< / tr > < / thead >
< tbody id = "fenceBindTableBody" >
< tr > < td colspan = "5" class = "text-center text-gray-500 py-4" > 请选择围栏< / td > < / tr >
< / tbody >
< / table >
< / div >
< / div >
2026-03-27 13:04:11 +00:00
< / div >
< / div >
< / div >
< / div >
<!-- ==================== DATA LOG PAGE ==================== -->
< div id = "page-datalog" class = "page" >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< select id = "logDeviceFilter" style = "width:160px" > < option value = "" > 全部设备< / option > < / select >
< select id = "logTypeFilter" style = "width:140px" >
< option value = "" > 全部类型< / option >
< option value = "location" > 位置< / option >
< option value = "alarm" > 告警< / option >
< option value = "heartbeat" > 心跳< / option >
< option value = "attendance" > 考勤< / option >
< option value = "bluetooth" > 蓝牙< / option >
< / select >
< input type = "date" id = "logStartDate" style = "width:150px" >
< input type = "date" id = "logEndDate" style = "width:150px" >
< button class = "btn btn-primary" onclick = "loadDataLog()" > < i class = "fas fa-search" > < / i > 查询< / button >
< button class = "btn btn-secondary" onclick = "loadDataLog()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< / div >
< div class = "grid grid-cols-5 gap-3 mb-4" >
< div class = "stat-card" style = "padding:14px;text-align:center;cursor:pointer" onclick = "document.getElementById('logTypeFilter').value='location';loadDataLog()" >
< div style = "font-size:22px;font-weight:700;color:#3b82f6" id = "logCountLoc" > -< / div >
< div style = "font-size:12px;color:#9ca3af" > 位置记录< / div >
< / div >
< div class = "stat-card" style = "padding:14px;text-align:center;cursor:pointer" onclick = "document.getElementById('logTypeFilter').value='alarm';loadDataLog()" >
< div style = "font-size:22px;font-weight:700;color:#ef4444" id = "logCountAlarm" > -< / div >
< div style = "font-size:12px;color:#9ca3af" > 告警记录< / div >
< / div >
< div class = "stat-card" style = "padding:14px;text-align:center;cursor:pointer" onclick = "document.getElementById('logTypeFilter').value='heartbeat';loadDataLog()" >
< div style = "font-size:22px;font-weight:700;color:#10b981" id = "logCountHb" > -< / div >
< div style = "font-size:12px;color:#9ca3af" > 心跳记录< / div >
< / div >
< div class = "stat-card" style = "padding:14px;text-align:center;cursor:pointer" onclick = "document.getElementById('logTypeFilter').value='attendance';loadDataLog()" >
< div style = "font-size:22px;font-weight:700;color:#f59e0b" id = "logCountAtt" > -< / div >
< div style = "font-size:12px;color:#9ca3af" > 考勤记录< / div >
< / div >
< div class = "stat-card" style = "padding:14px;text-align:center;cursor:pointer" onclick = "document.getElementById('logTypeFilter').value='bluetooth';loadDataLog()" >
< div style = "font-size:22px;font-weight:700;color:#8b5cf6" id = "logCountBt" > -< / div >
< div style = "font-size:12px;color:#9ca3af" > 蓝牙记录< / div >
< / div >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "datalogLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > ID< / th >
< th > 类型< / th >
< th > 设备ID< / th >
< th > IMEI< / th >
< th > 详情< / th >
< th > 坐标< / th >
< th > 地址< / th >
< th > 时间< / th >
< / tr >
< / thead >
< tbody id = "datalogTableBody" >
< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 选择筛选条件后点击查询< / td > < / tr >
< / tbody >
< / table >
< / div >
< div id = "datalogPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
2026-03-27 10:19:34 +00:00
<!-- ==================== COMMANDS PAGE ==================== -->
< div id = "page-commands" class = "page" >
< div class = "page-guide" onclick = "this.classList.toggle('collapsed')" >
< div class = "guide-header" >
< div class = "guide-icon" > < i class = "fas fa-lightbulb text-white text-sm" > < / i > < / div >
< span class = "guide-title" > 指令管理 — 远程控制设备与消息下发< / span >
< i class = "fas fa-chevron-down guide-toggle" > < / i >
< / div >
< div class = "guide-body" >
< div class = "guide-steps" >
< div class = "guide-step" > < div class = "step-num" > 1< / div > < div class = "step-text" > < strong > 发送指令< / strong > ：选择在线设备，填写指令类型和内容后发送控制命令< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 2< / div > < div class = "step-text" > < strong > 发送消息< / strong > ： （ < / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 3< / div > < div class = "step-text" > < strong > 语音播报< / strong > ：输入文字内容，设备通过 TTS 引擎语音朗读播报< / div > < / div >
< div class = "guide-step" > < div class = "step-num" > 4< / div > < div class = "step-text" > < strong > 历史查询< / strong > ：按设备和状态筛选已发送的指令/消息/语音记录< / div > < / div >
< / div >
< div class = "guide-tips" > < p > < i class = "fas fa-exclamation-triangle" > < / i > 所有下发功能仅对当前在线（ < / p > < / div >
< / div >
< / div >
< div class = "grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6" >
< div class = "stat-card" >
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-paper-plane mr-2 text-blue-400" > < / i > 发送指令< / h3 >
< div class = "form-group" >
< label > 目标设备< / label >
< select id = "cmdDeviceSelect" >
< option value = "" > 选择设备...< / option >
< / select >
< / div >
< div class = "form-group" >
< label > 指令类型< / label >
< input type = "text" id = "cmdType" placeholder = "如: LOCATE, POWEROFF, RESTART..." >
< / div >
< div class = "form-group" >
< label > 指令内容< / label >
< textarea id = "cmdContent" rows = "3" placeholder = "指令参数内容..." > < / textarea >
< / div >
< button class = "btn btn-primary w-full" onclick = "sendCommand()" > < i class = "fas fa-paper-plane" > < / i > 发送指令< / button >
< / div >
< div class = "stat-card" >
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-comment mr-2 text-green-400" > < / i > 发送消息< / h3 >
< div class = "form-group" >
< label > 目标设备< / label >
< select id = "msgDeviceSelect" >
< option value = "" > 选择设备...< / option >
< / select >
< / div >
< div class = "form-group" >
< label > 消息内容< / label >
< textarea id = "msgContent" rows = "5" placeholder = "输入要发送给设备的消息..." > < / textarea >
< / div >
< button class = "btn btn-success w-full" onclick = "sendMessage()" > < i class = "fas fa-comment" > < / i > 发送消息< / button >
< / div >
< div class = "stat-card" >
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-volume-up mr-2 text-purple-400" > < / i > 语音播报< / h3 >
< div class = "form-group" >
< label > 目标设备< / label >
< select id = "ttsDeviceSelect" >
< option value = "" > 选择设备...< / option >
< / select >
< / div >
< div class = "form-group" >
< label > 播报文本< / label >
< textarea id = "ttsContent" rows = "3" placeholder = "输入语音播报内容，设备将通过 TTS 引擎朗读..." > < / textarea >
< / div >
< div class = "flex items-center gap-2 mb-3" >
< span class = "text-xs text-gray-500" > < i class = "fas fa-info-circle mr-1" > < / i > 最多 200 字，支持中英文混合< / span >
< span class = "text-xs text-gray-500 ml-auto" id = "ttsCharCount" > 0/200< / span >
< / div >
< button class = "btn w-full" style = "background:linear-gradient(135deg,#7c3aed,#6366f1);color:white;" onclick = "sendTTS()" > < i class = "fas fa-volume-up" > < / i > 语音下发< / button >
< / div >
< / div >
< div class = "flex flex-wrap items-center gap-3 mb-4" >
< h3 class = "text-lg font-semibold" > < i class = "fas fa-history mr-2 text-gray-400" > < / i > 指令历史< / h3 >
< div class = "flex-1" > < / div >
< select id = "cmdHistoryDeviceFilter" style = "width:180px" >
< option value = "" > 全部设备< / option >
< / select >
< select id = "cmdStatusFilter" style = "width:140px" >
< option value = "" > 全部状态< / option >
< option value = "pending" > 待发送< / option >
< option value = "sent" > 已发送< / option >
< option value = "success" > 成功< / option >
< option value = "failed" > 失败< / option >
< / select >
< button class = "btn btn-secondary" onclick = "loadCommands()" > < i class = "fas fa-sync-alt" > < / i > 刷新< / button >
< / div >
< div class = "bg-gray-800 rounded-xl border border-gray-700 overflow-hidden relative" >
< div id = "commandsLoading" class = "loading-overlay" style = "display:none" > < div class = "spinner" > < / div > < / div >
< div class = "overflow-x-auto" >
< table >
< thead >
< tr >
< th > ID< / th >
< th > 设备< / th >
< th > 指令类型< / th >
< th > 内容< / th >
< th > 状态< / th >
< th > 响应< / th >
< th > 创建时间< / th >
< th > 更新时间< / th >
< / tr >
< / thead >
< tbody id = "commandsTableBody" >
< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 加载中...< / td > < / tr >
< / tbody >
< / table >
< / div >
< div id = "commandsPagination" class = "pagination p-4" > < / div >
< / div >
< / div >
< / div >
< / main >
<!-- Modal Container -->
< div id = "modalContainer" > < / div >
< script >
// ==================== CORE UTILITIES ====================
const API_BASE = '/api';
let currentPage = 'dashboard';
let dashboardInterval = null;
let locationMap = null;
let mapMarkers = [];
let mapPolyline = null;
2026-03-27 13:04:11 +00:00
let mapInfoWindows = []; // store {infoWindow, position} for each track point
2026-03-30 04:26:29 +00:00
let _locTableItems = []; // cached location records from table for on-the-fly marker creation
2026-03-27 13:04:11 +00:00
let trackPlayTimer = null;
let trackMovingMarker = null;
2026-03-27 10:19:34 +00:00
let dashAlarmChart = null;
let alarmTypeChart = null;
// Side panel state
let panelDevices = [];
let panelBeacons = [];
2026-03-27 13:04:11 +00:00
let panelFences = [];
2026-03-27 10:19:34 +00:00
let selectedPanelDeviceId = null;
let selectedPanelBeaconId = null;
2026-03-27 13:04:11 +00:00
let selectedPanelFenceId = null;
2026-03-27 10:19:34 +00:00
// Pagination state
const pageState = {
devices: { page: 1, pageSize: 20 },
locations: { page: 1, pageSize: 20 },
alarms: { page: 1, pageSize: 20 },
attendance: { page: 1, pageSize: 20 },
bluetooth: { page: 1, pageSize: 20 },
beacons: { page: 1, pageSize: 20 },
commands: { page: 1, pageSize: 20 },
};
function showToast(message, type = 'success') {
const container = document.getElementById('toastContainer');
const toast = document.createElement('div');
toast.className = `toast ${type}`;
const icon = type === 'success' ? 'check-circle' : type === 'error' ? 'times-circle' : 'info-circle';
toast.innerHTML = `< i class = "fas fa-${icon}" > < / i > ${message}`;
container.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'fadeOut 0.3s ease forwards';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
async function apiCall(url, options = {}) {
try {
const response = await fetch(url, {
headers: { 'Content-Type': 'application/json', ...options.headers },
...options,
});
const data = await response.json();
if (!response.ok) {
const detail = data.detail;
const msg = data.message || (typeof detail === 'string' ? detail : Array.isArray(detail) ? detail.map(e => e.msg || JSON.stringify(e)).join('; ') : null) || `HTTP ${response.status}`;
throw new Error(msg);
}
if (data.code !== undefined & & data.code !== 0) {
throw new Error(data.message || '请求失败');
}
return data.data !== undefined ? data.data : data;
} catch (err) {
console.error('API Error:', err);
throw err;
}
}
function showLoading(id) {
const el = document.getElementById(id);
if (el) el.style.display = 'flex';
}
function hideLoading(id) {
const el = document.getElementById(id);
if (el) el.style.display = 'none';
}
function formatTime(t) {
if (!t) return '-';
try {
const d = new Date(t);
if (isNaN(d.getTime())) return t;
return d.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
} catch { return t; }
}
function escapeHtml(str) {
if (str === null || str === undefined) return '';
const div = document.createElement('div');
div.textContent = String(str);
return div.innerHTML;
}
function truncate(str, len = 40) {
if (!str) return '-';
str = String(str);
return str.length > len ? str.substring(0, len) + '...' : str;
}
function statusBadge(status) {
if (status === 'online') return '< span class = "badge badge-online" > 在线< / span > ';
return '< span class = "badge badge-offline" > 离线< / span > ';
}
function commandStatusBadge(status) {
const map = {
pending: '< span class = "badge badge-pending" > 待发送< / span > ',
sent: '< span class = "badge badge-sent" > 已发送< / span > ',
success: '< span class = "badge badge-success" > 成功< / span > ',
failed: '< span class = "badge badge-failed" > 失败< / span > ',
};
return map[status] || `< span class = "badge badge-pending" > ${escapeHtml(status)}< / span > `;
}
function alarmTypeName(type) {
const map = {
normal: '正常', sos: 'SOS', power_cut: '断电',
vibration: '振动', enter_fence: '进入围栏', exit_fence: '离开围栏',
over_speed: '超速', displacement: '位移',
enter_gps_dead_zone: '进入GPS盲区', exit_gps_dead_zone: '离开GPS盲区',
power_on: '开机', gps_first_fix: 'GPS首次定位',
low_battery: '低电量', low_battery_protection: '低电保护',
sim_change: 'SIM卡更换', power_off: '关机',
airplane_mode: '飞行模式', remove: '拆除',
door: '门', shutdown: '关机',
voice_alarm: '声控报警', fake_base_station: '伪基站',
cover_open: '开盖', internal_low_battery: '内部低电',
acc_on: 'ACC开', acc_off: 'ACC关',
};
return map[type] || type || '-';
}
function alarmTypeClass(type) {
const map = {
sos: 'alarm-sos', low_battery: 'alarm-low_battery',
remove: 'alarm-remove', enter_fence: 'alarm-fence',
exit_fence: 'alarm-fence', vibration: 'alarm-default',
power_cut: 'alarm-default', voice_alarm: 'alarm-default',
};
return map[type] || 'alarm-default';
}
function attendanceTypeName(type) {
const map = { clock_in: '签到', clock_out: '签退', check_in: '签到', check_out: '签退' };
return map[type] || type || '-';
}
function btTypeName(type) {
const map = { punch: '打卡', location: '定位' };
return map[type] || type || '-';
}
function animateCounter(elementId, targetValue) {
const el = document.getElementById(elementId);
if (!el) return;
const target = parseInt(targetValue) || 0;
const duration = 800;
const startTime = performance.now();
const startValue = parseInt(el.textContent) || 0;
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
const current = Math.round(startValue + (target - startValue) * eased);
el.textContent = current;
if (progress < 1 ) requestAnimationFrame ( update ) ;
}
requestAnimationFrame(update);
}
function renderPagination(containerId, total, page, pageSize, loadFn) {
const container = document.getElementById(containerId);
if (!container) return;
const totalPages = Math.ceil(total / pageSize) || 1;
if (totalPages < = 1) { container.innerHTML = ''; return; }
let html = `< button $ { page < = 1 ? ' disabled ' : ' ' } onclick = "${loadFn}(${page - 1})" > < i class = "fas fa-chevron-left" > < / i > < / button > `;
const maxVisible = 5;
let start = Math.max(1, page - Math.floor(maxVisible / 2));
let end = Math.min(totalPages, start + maxVisible - 1);
if (end - start < maxVisible - 1 ) start = Math.max(1, end - maxVisible + 1 ) ;
if (start > 1) { html += `< button onclick = "${loadFn}(1)" > 1< / button > `; if (start > 2) html += `< span class = "text-gray-500 px-1" > ...< / span > `; }
for (let i = start; i < = end; i++) {
html += `< button class = "${i === page ? 'active' : ''}" onclick = "${loadFn}(${i})" > ${i}< / button > `;
}
if (end < totalPages ) { if ( end < totalPages - 1 ) html + = ` < span class = "text-gray-500 px-1" > ...< / span > `; html += `< button onclick = "${loadFn}(${totalPages})" > ${totalPages}< / button > `; }
html += `< button $ { page > = totalPages ? 'disabled' : ''} onclick="${loadFn}(${page + 1})">< i class = "fas fa-chevron-right" > < / i > < / button > `;
html += `< span class = "text-gray-500 text-sm ml-2" > 共 ${total} 条< / span > `;
container.innerHTML = html;
}
function showModal(html) {
const container = document.getElementById('modalContainer');
container.innerHTML = `< div class = "modal-backdrop" onclick = "if(event.target===this)closeModal()" > < div class = "modal-content" > ${html}< / div > < / div > `;
}
function closeModal() {
if (typeof destroyBeaconPickerMap === 'function') destroyBeaconPickerMap();
2026-03-27 13:04:11 +00:00
if (typeof destroyFenceDrawMap === 'function') destroyFenceDrawMap();
2026-03-27 10:19:34 +00:00
document.getElementById('modalContainer').innerHTML = '';
}
function updateClock() {
const now = new Date();
document.getElementById('currentTime').textContent = now.toLocaleString('zh-CN');
}
setInterval(updateClock, 1000);
updateClock();
// ==================== NAVIGATION ====================
const pageTitles = {
dashboard: '仪表盘', devices: '设备管理', locations: '位置追踪',
2026-03-27 13:04:11 +00:00
alarms: '告警管理', attendance: '考勤记录', bluetooth: '蓝牙记录', beacons: '信标管理', fences: '围栏管理', datalog: '数据日志', commands: '指令管理'
2026-03-27 10:19:34 +00:00
};
function navigateTo(page) {
currentPage = page;
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
document.getElementById('page-' + page).classList.add('active');
document.querySelector(`.nav-item[data-page="${page}"]`).classList.add('active');
document.getElementById('pageTitle').textContent = pageTitles[page] || page;
if (dashboardInterval) { clearInterval(dashboardInterval); dashboardInterval = null; }
// Clean up panel state when leaving panel pages
if (page !== 'locations') { selectedPanelDeviceId = null; panelDevices = []; }
if (page !== 'beacons') { selectedPanelBeaconId = null; panelBeacons = []; }
2026-03-27 13:04:11 +00:00
if (page !== 'fences') { selectedPanelFenceId = null; panelFences = []; }
2026-03-27 10:19:34 +00:00
switch (page) {
case 'dashboard': loadDashboard(); dashboardInterval = setInterval(loadDashboard, 30000); break;
case 'devices': loadDevices(); break;
2026-03-27 13:04:11 +00:00
case 'locations': initLocationMap(); loadDeviceSelectors(); loadLocationRecords(1); break;
2026-03-27 10:19:34 +00:00
case 'alarms': loadAlarmStats(); loadAlarms(); loadDeviceSelectors(); break;
case 'attendance': loadAttendanceStats(); loadAttendance(); loadDeviceSelectors(); break;
case 'bluetooth': loadBluetooth(); loadDeviceSelectors(); break;
case 'beacons': loadBeacons(); break;
2026-03-27 13:04:11 +00:00
case 'fences': initFenceMap(); loadFences(); break;
case 'datalog': loadDataLogStats(); loadDataLog(); loadDeviceSelectors(); break;
2026-03-27 10:19:34 +00:00
case 'commands': loadCommands(); loadDeviceSelectors(); break;
}
}
// ==================== SIDE PANEL ====================
// Panel element ID config (centralized, easy to extend for new panel pages)
const PANEL_IDS = {
locations: { panel: 'locSidePanel', list: 'locPanelList', count: 'locPanelCount', footer: 'locPanelFooter', search: 'locPanelSearch' },
beacons: { panel: 'beaconSidePanel', list: 'beaconPanelList', count: 'beaconPanelCount', footer: 'beaconPanelFooter', search: 'beaconPanelSearch' },
2026-03-27 13:04:11 +00:00
fences: { panel: 'fenceSidePanel', list: 'fencePanelList', count: 'fencePanelCount', footer: 'fencePanelFooter', search: 'fencePanelSearch' },
2026-03-27 10:19:34 +00:00
};
const PANEL_TRANSITION_MS = 300; // must match CSS transition duration
function toggleSidePanel(panelId) {
const panel = document.getElementById(panelId);
if (!panel) return;
panel.classList.toggle('collapsed');
2026-03-27 13:04:11 +00:00
// Resize map when panel toggled
2026-03-27 10:19:34 +00:00
if (currentPage === 'locations' & & locationMap) {
2026-03-27 13:04:11 +00:00
setTimeout(() => { if (locationMap) locationMap.resize(); }, PANEL_TRANSITION_MS + 50);
}
if (currentPage === 'fences' & & fenceMap) {
setTimeout(() => { if (fenceMap) fenceMap.resize(); }, PANEL_TRANSITION_MS + 50);
2026-03-27 10:19:34 +00:00
}
}
function formatTimeAgo(t) {
if (!t) return '-';
try {
const diff = Math.floor((Date.now() - new Date(t).getTime()) / 1000);
if (isNaN(diff) || diff < 0 ) return ' - ' ;
if (diff < 60 ) return ' 刚刚 ' ;
if (diff < 3600 ) return Math . floor ( diff / 60 ) + ' 分钟前 ' ;
if (diff < 86400 ) return Math . floor ( diff / 3600 ) + ' 小时前 ' ;
if (diff < 2592000 ) return Math . floor ( diff / 86400 ) + ' 天前 ' ;
return formatTime(t);
} catch { return '-'; }
}
/** Generic panel render helper — sets count & footer text, returns container or null */
function _initPanelRender(ids, items, statusField, statusValue, emptyText, countFmt, footerFmt) {
const container = document.getElementById(ids.list);
const countEl = document.getElementById(ids.count);
const footerEl = document.getElementById(ids.footer);
if (!container) return null;
const activeCount = items.filter(it => it[statusField] === statusValue).length;
if (countEl) countEl.textContent = countFmt(activeCount, items.length);
if (footerEl) footerEl.textContent = footerFmt(activeCount, items.length);
if (items.length === 0) {
container.innerHTML = `< div style = "text-align:center;padding:20px;color:#6b7280;font-size:13px" > ${emptyText}< / div > `;
return null;
}
return container;
}
function renderDevicePanel(devices) {
panelDevices = devices;
const container = _initPanelRender(
PANEL_IDS.locations, devices, 'status', 'online', '暂无设备',
(a, t) => `${a}/${t}`, (a, t) => `共 ${t} 台设备，${a} 台在线`
);
if (!container) return;
container.innerHTML = devices.map(d => {
const isActive = (d.id || d.device_id) == selectedPanelDeviceId;
const statusClass = d.status === 'online' ? 'online' : 'offline';
const deviceId = d.id || d.device_id || '';
const imeiShort = d.imei ? '...' + d.imei.slice(-8) : '-';
const bp = d.battery_level;
const bColor = bp != null ? (bp < 20 ? ' # f87171 ' : bp < 50 ? ' # fbbf24 ' : ' # 34d399 ' ) : ' # 4b5563 ' ;
const lastActive = d.last_heartbeat || d.last_login;
const timeAgo = lastActive ? formatTimeAgo(lastActive) : '无活动';
return `< div class = "panel-item ${isActive ? 'active' : ''}" data-device-id = "${deviceId}" data-search-text = "${(d.name||'').toLowerCase()} ${(d.imei||'').toLowerCase()}" onclick = "selectPanelDevice('${deviceId}')" >
< div class = "panel-item-actions" >
< button class = "panel-action-btn" onclick = "event.stopPropagation();selectPanelDevice('${deviceId}')" title = "定位" > < i class = "fas fa-crosshairs" > < / i > < / button >
< button class = "panel-action-btn" onclick = "event.stopPropagation();showDeviceDetail('${deviceId}')" title = "详情" > < i class = "fas fa-info-circle" > < / i > < / button >
< / div >
< div class = "panel-item-header" >
< span class = "panel-item-name" > ${escapeHtml(d.name || d.imei || deviceId)}< / span >
< div class = "panel-item-status ${statusClass}" > < / div >
< / div >
< div class = "panel-item-sub" > ${escapeHtml(imeiShort)}< / div >
< div class = "panel-item-meta" >
${bp != null ? `< span style = "display:flex;align-items:center;gap:3px" > < span class = "battery-bar" > < span class = "battery-bar-fill" style = "width:${bp}%;background:${bColor}" > < / span > < / span > < span > ${bp}%< / span > < / span > ` : ''}
${d.gsm_signal != null ? `< span > < i class = "fas fa-signal" style = "font-size:10px" > < / i > ${d.gsm_signal}< / span > ` : ''}
< span style = "margin-left:auto" > < i class = "far fa-clock" style = "font-size:10px" > < / i > ${timeAgo}< / span >
< / div >
< / div > `;
}).join('');
}
function renderBeaconPanel(beacons) {
panelBeacons = beacons;
const container = _initPanelRender(
PANEL_IDS.beacons, beacons, 'status', 'active', '暂无信标',
(a, t) => `${a}/${t}`, (a, t) => `共 ${t} 个信标，${a} 个启用`
);
if (!container) return;
container.innerHTML = beacons.map(b => {
const isActive = b.id == selectedPanelBeaconId;
const statusClass = b.status === 'active' ? 'active' : 'inactive';
const floorArea = [b.floor, b.area].filter(Boolean).join(' / ') || '未设置';
const macShort = b.beacon_mac ? b.beacon_mac.slice(-8) : '-';
return `< div class = "panel-item ${isActive ? 'active' : ''}" data-beacon-id = "${b.id}" data-search-text = "${(b.name||'').toLowerCase()} ${(b.beacon_mac||'').toLowerCase()} ${(b.area||'').toLowerCase()}" onclick = "selectPanelBeacon(${b.id})" >
< div class = "panel-item-actions" >
< button class = "panel-action-btn" onclick = "event.stopPropagation();showEditBeaconModal(${b.id})" title = "编辑" > < i class = "fas fa-edit" > < / i > < / button >
< / div >
< div class = "panel-item-header" >
< span class = "panel-item-name" > ${escapeHtml(b.name || b.beacon_mac)}< / span >
< div class = "panel-item-status ${statusClass}" > < / div >
< / div >
< div class = "panel-item-sub" > ${escapeHtml(macShort)}< / div >
< div class = "panel-item-meta" >
< span > < i class = "fas fa-layer-group" style = "font-size:10px" > < / i > ${escapeHtml(floorArea)}< / span >
${b.latitude & & b.longitude ? '< span style = "color:#34d399" > < i class = "fas fa-map-pin" style = "font-size:10px" > < / i > 已定位< / span > ' : '< span style = "color:#6b7280" > 未定位< / span > '}
< / div >
< / div > `;
}).join('');
}
function filterPanelItems(type) {
const ids = PANEL_IDS[type];
if (!ids) return;
const inputEl = document.getElementById(ids.search);
const listEl = document.getElementById(ids.list);
if (!inputEl || !listEl) return;
const keyword = (inputEl.value || '').toLowerCase().trim();
listEl.querySelectorAll('.panel-item').forEach(item => {
item.style.display = (!keyword || (item.dataset.searchText || '').includes(keyword)) ? '' : 'none';
});
}
function selectPanelDevice(deviceId, autoLocate = true) {
selectedPanelDeviceId = deviceId;
document.querySelectorAll('#locPanelList .panel-item').forEach(el => {
el.classList.toggle('active', el.dataset.deviceId == deviceId);
});
const select = document.getElementById('locDeviceSelect');
if (select) select.value = deviceId;
const activeCard = document.querySelector(`#locPanelList .panel-item[data-device-id="${deviceId}"]`);
if (activeCard) activeCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
2026-03-27 13:04:11 +00:00
// Don't auto-locate on panel selection, user clicks "最新位置" manually
2026-03-27 10:19:34 +00:00
}
function selectPanelBeacon(beaconId) {
selectedPanelBeaconId = beaconId;
document.querySelectorAll('#beaconPanelList .panel-item').forEach(el => {
el.classList.toggle('active', el.dataset.beaconId == beaconId);
});
}
function sortDevicesByActivity(devices) {
return [...devices].sort((a, b) => {
if (a.status === 'online' & & b.status !== 'online') return -1;
if (a.status !== 'online' & & b.status === 'online') return 1;
const tA = new Date(a.last_heartbeat || a.last_login || 0).getTime();
const tB = new Date(b.last_heartbeat || b.last_login || 0).getTime();
return tB - tA;
});
}
function autoSelectActiveDevice(devices) {
if (!devices || devices.length === 0) return;
const sorted = sortDevicesByActivity(devices);
const best = sorted[0];
const bestId = best.id || best.device_id;
if (bestId) selectPanelDevice(bestId, true);
}
// ==================== DEVICE SELECTOR HELPER ====================
let cachedDevices = null;
async function loadDeviceSelectors() {
try {
const data = await apiCall(`${API_BASE}/devices?page=1&page_size=100`);
const devices = data.items || [];
cachedDevices = devices;
const selectors = ['locDeviceSelect', 'alarmDeviceFilter', 'attDeviceFilter', 'btDeviceFilter', 'cmdDeviceSelect', 'msgDeviceSelect', 'ttsDeviceSelect', 'cmdHistoryDeviceFilter'];
selectors.forEach(id => {
const sel = document.getElementById(id);
if (!sel) return;
const currentVal = sel.value;
const firstOption = sel.options[0].outerHTML;
sel.innerHTML = firstOption;
devices.forEach(d => {
const opt = document.createElement('option');
opt.value = d.id || d.device_id || '';
opt.textContent = `${d.name || d.imei || d.id} (${d.imei || ''})`;
sel.appendChild(opt);
});
if (currentVal) sel.value = currentVal;
});
// Render device panel on locations page
if (currentPage === 'locations' & & document.getElementById('locPanelList')) {
const sorted = sortDevicesByActivity(devices);
renderDevicePanel(sorted);
if (!selectedPanelDeviceId) autoSelectActiveDevice(sorted);
}
} catch (err) {
console.error('Failed to load device selectors:', err);
}
}
// ==================== DASHBOARD ====================
async function loadDashboard() {
try {
const [deviceStats, alarmStats, health] = await Promise.allSettled([
apiCall(`${API_BASE}/devices/stats`),
apiCall(`${API_BASE}/alarms/stats`),
apiCall('/health'),
]);
if (deviceStats.status === 'fulfilled') {
const ds = deviceStats.value;
animateCounter('dashTotalDevices', ds.total || 0);
animateCounter('dashOnlineDevices', ds.online || 0);
animateCounter('dashOfflineDevices', ds.offline || 0);
}
if (alarmStats.status === 'fulfilled') {
const as = alarmStats.value;
animateCounter('dashTotalAlarms', as.total || 0);
animateCounter('dashUnackAlarms', as.unacknowledged || 0);
animateCounter('dashAckAlarms', as.acknowledged || 0);
renderAlarmDoughnut('dashAlarmChart', as.by_type, false);
}
if (health.status === 'fulfilled') {
const h = health.value;
const status = h.status || 'unknown';
const connected = h.connected_devices || 0;
animateCounter('dashConnectedDevices', connected);
document.getElementById('dashSystemStatus').textContent = status === 'ok' || status === 'healthy' ? '正常运行' : status;
document.getElementById('healthStatus').innerHTML = `< i class = "fas fa-circle text-green-500 mr-1 text-xs" > < / i > 在线 (${connected}台)`;
} else {
document.getElementById('healthStatus').innerHTML = `< i class = "fas fa-circle text-red-500 mr-1 text-xs" > < / i > 离线`;
document.getElementById('dashSystemStatus').textContent = '无法连接';
}
// Load recent alarms
try {
const alarms = await apiCall(`${API_BASE}/alarms?page=1&page_size=10`);
const items = alarms.items || [];
const container = document.getElementById('dashRecentAlarms');
if (items.length === 0) {
container.innerHTML = '< p class = "text-gray-500 text-sm text-center py-4" > 暂无告警< / p > ';
} else {
container.innerHTML = items.map(a => `
< div class = "flex items-center justify-between p-2 rounded-lg hover:bg-gray-700/50 transition-colors" >
< div class = "flex items-center gap-3" >
< i class = "fas fa-exclamation-circle ${alarmTypeClass(a.alarm_type)}" > < / i >
< div >
< span class = "text-sm font-medium ${alarmTypeClass(a.alarm_type)}" > ${alarmTypeName(a.alarm_type)}< / span >
< span class = "text-xs text-gray-500 ml-2" > 设备: ${escapeHtml(a.device_id || '-')}< / span >
< / div >
< / div >
< div class = "flex items-center gap-2" >
${a.acknowledged ? '< span class = "badge badge-online" > 已确认< / span > ' : '< span class = "badge badge-offline" > 未确认< / span > '}
< span class = "text-xs text-gray-500" > ${formatTime(a.recorded_at)}< / span >
< / div >
< / div >
`).join('');
}
} catch (err) {
document.getElementById('dashRecentAlarms').innerHTML = '< p class = "text-gray-500 text-sm" > 加载失败< / p > ';
}
} catch (err) {
console.error('Dashboard load error:', err);
}
}
function renderAlarmDoughnut(canvasId, byType, isSmall) {
const canvas = document.getElementById(canvasId);
if (!canvas) return;
const labels = [];
const values = [];
const colors = [];
const colorMap = { sos: '#ef4444', low_battery: '#f97316', remove: '#eab308', fence: '#a855f7', fall: '#3b82f6' };
const nameMap = { sos: 'SOS', low_battery: '低电量', remove: '拆除', fence: '围栏', fall: '跌倒' };
if (byType & & typeof byType === 'object') {
Object.entries(byType).forEach(([key, val]) => {
labels.push(nameMap[key] || key);
values.push(val);
colors.push(colorMap[key] || '#6b7280');
});
}
if (labels.length === 0) {
labels.push('无数据');
values.push(1);
colors.push('#374151');
}
const existingChart = canvasId === 'dashAlarmChart' ? dashAlarmChart : alarmTypeChart;
if (existingChart) existingChart.destroy();
const chart = new Chart(canvas, {
type: 'doughnut',
data: { labels, datasets: [{ data: values, backgroundColor: colors, borderWidth: 0 }] },
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '60%',
plugins: {
legend: { position: isSmall ? 'bottom' : 'right', labels: { color: '#9ca3af', padding: 12, font: { size: isSmall ? 10 : 12 } } }
}
}
});
if (canvasId === 'dashAlarmChart') dashAlarmChart = chart;
else alarmTypeChart = chart;
}
// ==================== DEVICES ====================
async function loadDevices(page) {
if (page) pageState.devices.page = page;
const p = pageState.devices.page;
const ps = pageState.devices.pageSize;
const search = document.getElementById('deviceSearch').value.trim();
const status = document.getElementById('deviceStatusFilter').value;
let url = `${API_BASE}/devices?page=${p}&page_size=${ps}`;
if (search) url += `&search=${encodeURIComponent(search)}`;
if (status) url += `&status=${status}`;
showLoading('devicesLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('devicesTableBody');
if (items.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 没有找到设备< / td > < / tr > ';
} else {
tbody.innerHTML = items.map(d => `
< tr style = "cursor:pointer" onclick = "showDeviceDetail('${d.id || d.device_id || ''}')" >
< td class = "font-mono text-sm" > ${escapeHtml(d.imei)}< / td >
< td > ${escapeHtml(d.name || '-')}< / td >
< td > ${escapeHtml(d.device_type || '-')}< / td >
< td > ${statusBadge(d.status)}< / td >
< td > ${d.battery_level !== undefined & & d.battery_level !== null ? `< span class = "${d.battery_level < 20 ? 'text-red-400' : 'text-green-400'}" > ${d.battery_level}%< / span > ` : '-'}< / td >
< td > ${d.gsm_signal !== undefined & & d.gsm_signal !== null ? d.gsm_signal : '-'}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(d.last_login)}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(d.last_heartbeat)}< / td >
< / tr >
`).join('');
}
renderPagination('devicesPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadDevices');
} catch (err) {
showToast('加载设备列表失败: ' + err.message, 'error');
document.getElementById('devicesTableBody').innerHTML = '< tr > < td colspan = "8" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
} finally {
hideLoading('devicesLoading');
}
}
function showAddDeviceModal() {
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-plus-circle mr-2 text-blue-400" > < / i > 添加设备< / h3 >
< div class = "form-group" > < label > IMEI < span class = "text-red-400" > *< / span > < / label > < input type = "text" id = "addDeviceImei" placeholder = "15-20位IMEI号" maxlength = "20" > < p class = "text-xs text-gray-500 mt-1" > 设备背面标签上的IMEI号， < / p > < / div >
< div class = "form-group" > < label > 设备类型 < span class = "text-red-400" > *< / span > < / label > < select id = "addDeviceType" > < option value = "P240" > P240< / option > < option value = "P241" > P241< / option > < option value = "badge" > badge< / option > < option value = "watch" > watch< / option > < / select > < p class = "text-xs text-gray-500 mt-1" > 选择设备型号< / p > < / div >
< div class = "form-group" > < label > 名称< / label > < input type = "text" id = "addDeviceName" placeholder = "如: 张三的工牌" > < p class = "text-xs text-gray-500 mt-1" > 可选，方便识别的设备名称< / p > < / div >
< div class = "form-group" > < label > 时区< / label > < input type = "text" id = "addDeviceTimezone" placeholder = "+8 或 Asia/Shanghai" value = "+8" > < p class = "text-xs text-gray-500 mt-1" > 默认 +8（ ） < / p > < / div >
< div class = "form-group" > < label > 语言< / label > < select id = "addDeviceLang" > < option value = "cn" > cn - 中文< / option > < option value = "en" > en - English< / option > < / select > < / div >
< div class = "flex gap-3 mt-6" >
< button class = "btn btn-primary flex-1" onclick = "submitAddDevice()" > < i class = "fas fa-check" > < / i > 确认添加< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 取消< / button >
< / div >
`);
}
async function submitAddDevice() {
const imei = document.getElementById('addDeviceImei').value.trim();
const deviceType = document.getElementById('addDeviceType').value.trim();
if (!imei) { showToast('请输入IMEI号', 'error'); return; }
if (imei.length < 15 | | imei . length > 20) { showToast('IMEI号长度应为15-20位', 'error'); return; }
if (!deviceType) { showToast('请选择设备类型', 'error'); return; }
const body = { imei, device_type: deviceType };
const name = document.getElementById('addDeviceName').value.trim();
const timezone = document.getElementById('addDeviceTimezone').value.trim();
const language = document.getElementById('addDeviceLang').value.trim();
if (name) body.name = name;
if (timezone) body.timezone = timezone;
if (language) body.language = language;
try {
await apiCall(`${API_BASE}/devices`, { method: 'POST', body: JSON.stringify(body) });
showToast('设备添加成功');
closeModal();
loadDevices();
} catch (err) {
showToast('添加失败: ' + err.message, 'error');
}
}
function _locTypeLabel(t) {
const map = { gps: 'GPS', gps_4g: 'GPS 4G', lbs: 'LBS 基站', lbs_4g: 'LBS 4G', wifi: 'WiFi', wifi_4g: 'WiFi 4G', bluetooth: '蓝牙' };
return map[t] || t || '-';
}
function _locModeBadges(locType) {
const modes = [
{ label: 'GPS', match: ['gps','gps_4g'] },
{ label: 'LBS', match: ['lbs','lbs_4g'] },
{ label: 'WiFi', match: ['wifi','wifi_4g'] },
{ label: '蓝牙', match: ['bluetooth'] },
];
return modes.map(m => {
const active = m.match.includes(locType);
const color = active ? '#10b981' : '#4b5563';
const bg = active ? 'rgba(16,185,129,0.15)' : 'rgba(75,85,99,0.2)';
return `< span style = "display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:12px;border:1px solid ${color};background:${bg};color:${color};margin:2px" > ${active?'●':'○'} ${m.label}< / span > `;
}).join('');
}
2026-03-27 13:04:11 +00:00
// --- Map info window builder (black text for readability) ---
function _buildInfoContent(title, loc, lat, lng) {
const q = _locQuality(loc);
return `< div style = "color:#333;font-size:13px;line-height:1.6;min-width:200px" >
< b style = "font-size:14px;color:#111" > ${title}< / b >
< span style = "display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;background:${q.bg};color:${q.fg};margin-left:6px" > ${q.label}< / span > < br >
< span style = "color:#666" > 类型:< / span > ${_locTypeLabel(loc.location_type)}< br >
< span style = "color:#666" > 坐标:< / span > ${lat.toFixed(6)}, ${lng.toFixed(6)}< br >
${loc.address ? `< span style = "color:#666" > 地址:< / span > ${escapeHtml(loc.address)}< br > ` : ''}
${loc.speed != null ? `< span style = "color:#666" > 速度:< / span > ${loc.speed} km/h< br > ` : ''}
< span style = "color:#666" > 时间:< / span > ${formatTime(loc.recorded_at || loc.created_at)}
< / div > `;
}
// --- Track playback animation ---
function playTrack() {
if (mapInfoWindows.length < 2 ) { showToast ( ' 请先加载轨迹 ( 至少2个点 ) ' , ' error ' ) ; return ; }
// Stop existing playback
if (trackPlayTimer) { cancelAnimationFrame(trackPlayTimer); trackPlayTimer = null; }
if (trackMovingMarker) { locationMap.remove(trackMovingMarker); trackMovingMarker = null; }
const positions = mapInfoWindows.map(iw => iw.position);
trackMovingMarker = new AMap.Marker({
position: positions[0],
icon: new AMap.Icon({ size: new AMap.Size(24, 34), image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png', imageSize: new AMap.Size(24, 34) }),
offset: new AMap.Pixel(-12, -34),
zIndex: 200,
});
trackMovingMarker.setMap(locationMap);
showToast('路径回放中...', 'info');
2026-03-30 04:26:29 +00:00
locationMap.setCenter(positions[0]);
locationMap.setZoom(16);
2026-03-27 13:04:11 +00:00
mapInfoWindows[0].infoWindow.open(locationMap, positions[0]);
let segIdx = 0; // current segment (from segIdx to segIdx+1)
let segProgress = 0; // 0~1 progress within segment
const DURATION_PER_SEG = 1200; // ms per segment
const STEPS_PER_SEG = 60;
let lastTime = null;
function animate(timestamp) {
if (!lastTime) lastTime = timestamp;
const dt = timestamp - lastTime;
lastTime = timestamp;
segProgress += dt / DURATION_PER_SEG;
if (segProgress >= 1) {
segProgress = 0;
segIdx++;
if (segIdx >= positions.length - 1) {
// Arrived at last point
trackMovingMarker.setPosition(positions[positions.length - 1]);
locationMap.setCenter(positions[positions.length - 1]);
mapInfoWindows.forEach(iw => iw.infoWindow.close());
mapInfoWindows[positions.length - 1].infoWindow.open(locationMap, positions[positions.length - 1]);
showToast('回放结束');
trackPlayTimer = null;
return;
}
// Show info at each waypoint
mapInfoWindows.forEach(iw => iw.infoWindow.close());
mapInfoWindows[segIdx].infoWindow.open(locationMap, positions[segIdx]);
}
// Interpolate position between segIdx and segIdx+1
const from = positions[segIdx];
const to = positions[segIdx + 1];
const curLng = from[0] + (to[0] - from[0]) * segProgress;
const curLat = from[1] + (to[1] - from[1]) * segProgress;
trackMovingMarker.setPosition([curLng, curLat]);
locationMap.setCenter([curLng, curLat]);
trackPlayTimer = requestAnimationFrame(animate);
}
trackPlayTimer = requestAnimationFrame(animate);
}
// --- Focus a location on map by record id (called from table row) ---
2026-03-30 04:26:29 +00:00
let _focusInfoWindow = null; // single info window for table-click focus
let _focusMarker = null; // single marker for table-click focus
2026-03-27 13:04:11 +00:00
function focusMapPoint(locId) {
2026-03-30 04:26:29 +00:00
if (!locationMap) initLocationMap();
// Wait for map init
if (!locationMap) { showToast('地图初始化中，请稍后重试', 'info'); return; }
// First try existing track markers
const existing = mapInfoWindows.find(iw => iw.locId === locId);
if (existing) {
locationMap.setCenter(existing.position);
locationMap.setZoom(17);
mapInfoWindows.forEach(iw => iw.infoWindow.close());
if (_focusInfoWindow) _focusInfoWindow.close();
if (_focusMarker) { locationMap.remove(_focusMarker); _focusMarker = null; }
existing.infoWindow.open(locationMap, existing.position);
document.getElementById('locationMap').scrollIntoView({ behavior: 'smooth', block: 'center' });
return;
}
// Fallback: create marker on-the-fly from cached table data
const loc = _locTableItems.find(l => l.id === locId);
if (!loc) { showToast('记录数据不可用', 'info'); return; }
const lat = loc.latitude || loc.lat;
const lng = loc.longitude || loc.lng || loc.lon;
if (!lat || !lng) { showToast('该记录无坐标', 'info'); return; }
const [mLat, mLng] = toMapCoord(lat, lng);
// Remove previous focus marker
if (_focusMarker) { locationMap.remove(_focusMarker); _focusMarker = null; }
if (_focusInfoWindow) _focusInfoWindow.close();
// Create marker
_focusMarker = new AMap.Marker({ position: [mLng, mLat] });
_focusMarker.setMap(locationMap);
// Create and open info window
const content = _buildInfoContent('位置记录', loc, lat, lng);
_focusInfoWindow = new AMap.InfoWindow({ content, offset: new AMap.Pixel(0, -30) });
_focusInfoWindow.open(locationMap, [mLng, mLat]);
_focusMarker.on('click', () => _focusInfoWindow.open(locationMap, [mLng, mLat]));
locationMap.setCenter([mLng, mLat]);
locationMap.setZoom(17);
2026-03-27 13:04:11 +00:00
document.getElementById('locationMap').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
// --- Location quality indicator ---
function _locQuality(l) {
const type = l.location_type || '';
const hasCoord = l.latitude != null & & l.longitude != null;
if (!hasCoord) return { label: '无坐标', bg: '#7f1d1d', fg: '#fca5a5' };
// GPS with satellites
if (type.startsWith('gps')) {
const sat = l.gps_satellites || 0;
if (sat >= 6) return { label: `GPS ${sat}星`, bg: '#065f46', fg: '#6ee7b7' };
if (sat >= 3) return { label: `GPS ${sat}星`, bg: '#78350f', fg: '#fde68a' };
return { label: `GPS ${sat}星`, bg: '#7f1d1d', fg: '#fca5a5' };
}
// LBS — low accuracy (~500m-2km)
if (type.startsWith('lbs')) return { label: 'LBS 低精度', bg: '#78350f', fg: '#fde68a' };
// WiFi — medium accuracy (~30-100m)
if (type.startsWith('wifi')) return { label: 'WiFi 中精度', bg: '#1e3a5f', fg: '#93c5fd' };
// Bluetooth — depends on beacon config
if (type === 'bluetooth') return { label: '蓝牙', bg: '#3b1f5f', fg: '#c4b5fd' };
return { label: type || '未知', bg: '#374151', fg: '#9ca3af' };
}
async function deleteLocationRecord(id) {
if (!confirm('确定删除这条位置记录？')) return;
try {
await apiCall(`${API_BASE}/locations/${id}`, { method: 'DELETE' });
showToast('已删除');
loadLocationRecords();
} catch (err) {
showToast('删除失败: ' + err.message, 'error');
}
}
2026-03-30 04:26:29 +00:00
function toggleAllLocCheckboxes(checked) {
document.querySelectorAll('.loc-sel-cb').forEach(cb => { cb.checked = checked; });
updateLocSelCount();
}
function updateLocSelCount() {
const count = document.querySelectorAll('.loc-sel-cb:checked').length;
document.getElementById('locSelCount').textContent = count;
document.getElementById('btnBatchDeleteLoc').disabled = count === 0;
}
async function batchDeleteSelectedLocations() {
const ids = Array.from(document.querySelectorAll('.loc-sel-cb:checked')).map(cb => parseInt(cb.value));
if (ids.length === 0) { showToast('请先勾选要删除的记录', 'info'); return; }
if (!confirm(`确定批量删除选中的 ${ids.length} 条位置记录？`)) return;
try {
const result = await apiCall(`${API_BASE}/locations/batch-delete`, {
method: 'POST',
body: JSON.stringify({ location_ids: ids }),
});
showToast(`已删除 ${result.deleted} 条记录`);
loadLocationRecords();
} catch (err) {
showToast('批量删除失败: ' + err.message, 'error');
}
}
async function batchDeleteNoCoordLocations() {
const deviceId = document.getElementById('locDeviceSelect').value || null;
const startTime = document.getElementById('locStartDate').value || null;
const endTime = document.getElementById('locEndDate').value || null;
const filterDesc = [
deviceId ? `设备ID=${deviceId}` : '所有设备',
startTime ? `从${startTime}` : '',
endTime ? `到${endTime}` : '',
].filter(Boolean).join(', ');
if (!confirm(`确定删除无坐标(经纬度为空)的位置记录？\n范围: ${filterDesc}\n\n此操作不可撤销！
try {
const body = {};
if (deviceId) body.device_id = parseInt(deviceId);
if (startTime) body.start_time = startTime + 'T00:00:00';
if (endTime) body.end_time = endTime + 'T23:59:59';
const result = await apiCall(`${API_BASE}/locations/delete-no-coords`, {
method: 'POST',
body: JSON.stringify(body),
});
showToast(`已清除 ${result.deleted} 条无坐标记录`);
loadLocationRecords();
} catch (err) {
showToast('清除失败: ' + err.message, 'error');
}
}
2026-03-27 10:19:34 +00:00
// --- Quick command sender for device detail panel ---
async function _quickCmd(deviceId, cmd, btnEl) {
if (btnEl) { btnEl.disabled = true; btnEl.style.opacity = '0.5'; }
try {
const res = await apiCall(`${API_BASE}/commands/send`, {
method: 'POST',
body: JSON.stringify({ device_id: parseInt(deviceId), command_type: 'online_cmd', command_content: cmd }),
});
showToast(`已发送: ${cmd}`);
// Poll for response (device replies via 0x81)
const cmdId = res & & res.id;
if (cmdId) _pollCmdResponse(cmdId, cmd);
} catch (err) {
showToast(`发送失败: ${err.message}`, 'error');
} finally {
if (btnEl) { btnEl.disabled = false; btnEl.style.opacity = '1'; }
}
}
async function _pollCmdResponse(cmdId, cmdName) {
for (let i = 0; i < 6 ; i + + ) {
await new Promise(r => setTimeout(r, 1500));
try {
const cmd = await apiCall(`${API_BASE}/commands/${cmdId}`);
if (cmd.response_content) {
const el = document.getElementById('detailCmdResult');
if (el) el.innerHTML = `< span class = "text-gray-400" style = "font-size:11px" > ${escapeHtml(cmdName)}:< / span > < span style = "font-size:12px;color:#d1d5db" > ${escapeHtml(cmd.response_content)}< / span > `;
return;
}
} catch (_) {}
}
}
async function _quickTts(deviceId) {
const input = document.getElementById('detailTtsInput');
if (!input || !input.value.trim()) { showToast('请输入语音内容', 'error'); return; }
try {
await apiCall(`${API_BASE}/commands/tts`, {
method: 'POST',
body: JSON.stringify({ device_id: parseInt(deviceId), text: input.value.trim() }),
});
showToast('TTS 已发送');
input.value = '';
} catch (err) {
showToast(`TTS失败: ${err.message}`, 'error');
}
}
async function showDeviceDetail(id) {
if (!id) return;
try {
const [device, latestLoc] = await Promise.all([
apiCall(`${API_BASE}/devices/${id}`),
apiCall(`${API_BASE}/locations/latest/${id}`).catch(() => null),
]);
const d = device;
const did = d.id || d.device_id;
const loc = latestLoc;
const locType = loc ? loc.location_type : null;
const locTime = loc ? formatTime(loc.recorded_at) : '-';
const locAddr = loc & & loc.address ? escapeHtml(loc.address) : '-';
const locCoord = loc & & loc.latitude ? `${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}` : '-';
const online = d.status === 'online';
const disabledAttr = online ? '' : 'disabled style="opacity:0.4;cursor:not-allowed"';
const _btn = (icon, label, cmd, color) =>
`< button class = "btn" style = "font-size:12px;padding:5px 10px;background:${color};border:none;color:#fff;border-radius:6px;cursor:pointer" $ { disabledAttr } onclick = "_quickCmd('${did}','${cmd}',this)" > < i class = "fas fa-${icon}" > < / i > ${label}< / button > `;
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-microchip mr-2 text-blue-400" > < / i > 设备详情 — ${escapeHtml(d.name || d.imei)}< / h3 >
<!-- 基本信息 -->
< div class = "grid grid-cols-2 gap-3 text-sm" >
< div > < span class = "text-gray-400" > IMEI:< / span > < br > < span class = "font-mono" > ${escapeHtml(d.imei)}< / span > < / div >
< div > < span class = "text-gray-400" > 型号:< / span > < br > ${escapeHtml(d.device_type || '-')}< / div >
< div > < span class = "text-gray-400" > 状态:< / span > < br > ${statusBadge(d.status)}< / div >
< div > < span class = "text-gray-400" > 电量:< / span > < br > ${d.battery_level != null ? d.battery_level + '%' : '-'} ${d.gsm_signal != null ? ' | 信号: ' + d.gsm_signal : ''}< / div >
< div > < span class = "text-gray-400" > ICCID:< / span > < br > < span class = "font-mono" style = "font-size:11px" > ${escapeHtml(d.iccid || '-')}< / span > < / div >
< div > < span class = "text-gray-400" > 时区/语言:< / span > < br > ${escapeHtml(d.timezone || '-')} / ${escapeHtml(d.language || '-')}< / div >
< div > < span class = "text-gray-400" > 最后登录:< / span > < br > ${formatTime(d.last_login)}< / div >
< div > < span class = "text-gray-400" > 最后心跳:< / span > < br > ${formatTime(d.last_heartbeat)}< / div >
< / div >
<!-- 定位信息 -->
< div style = "margin-top:14px;padding:12px;background:#111827;border-radius:8px;border:1px solid #374151" >
< div style = "font-size:13px;font-weight:600;color:#9ca3af;margin-bottom:8px" > < i class = "fas fa-map-marker-alt mr-1 text-green-400" > < / i > 定位信息< / div >
< div class = "grid grid-cols-2 gap-3 text-sm" >
< div > < span class = "text-gray-400" > 当前模式:< / span > < br > < span style = "color:#10b981;font-weight:600" > ${_locTypeLabel(locType)}< / span > < / div >
< div > < span class = "text-gray-400" > 定位时间:< / span > < br > ${locTime}< / div >
< div class = "col-span-2" > < span class = "text-gray-400" > 地址:< / span > < br > ${locAddr}< / div >
< / div >
< div style = "margin-top:8px" > ${_locModeBadges(locType)}< / div >
< / div >
<!-- 功能开关 -->
< div style = "margin-top:14px;padding:12px;background:#111827;border-radius:8px;border:1px solid #374151" >
< div style = "font-size:13px;font-weight:600;color:#9ca3af;margin-bottom:10px" > < i class = "fas fa-sliders-h mr-1 text-yellow-400" > < / i > 功能开关${online ? '' : ' < span style = "color:#ef4444;font-weight:400;font-size:11px" > (设备离线，无法操作)< / span > '}< / div >
2026-03-27 13:04:11 +00:00
< div style = "font-size:11px;color:#6b7280;margin-bottom:6px" > 定位功能:< / div >
< div style = "display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px" >
${_btn('satellite-dish', 'GPS 开', 'GPSON#', '#0d9488')}
${_btn('satellite-dish', 'GPS 关', 'GPSOFF#', '#991b1b')}
${_btn('crosshairs', '立即定位', 'WHERE#', '#0369a1')}
< / div >
< div style = "font-size:11px;color:#6b7280;margin-bottom:6px" > 蓝牙功能:< / div >
2026-03-27 10:19:34 +00:00
< div style = "display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px" >
2026-03-27 13:04:11 +00:00
${_btn('bluetooth-b', '蓝牙 开', 'BTON#', '#2563eb')}
${_btn('bluetooth-b', '蓝牙 关', 'BTOFF#', '#991b1b')}
${_btn('broadcast-tower', 'BLE扫描 开', 'BTSCAN,1#', '#7c3aed')}
${_btn('broadcast-tower', 'BLE扫描 关', 'BTSCAN,0#', '#991b1b')}
2026-03-27 10:19:34 +00:00
< / div >
2026-03-27 13:04:11 +00:00
< div style = "font-size:11px;color:#6b7280;margin-bottom:6px" > 工作模式:< / div >
2026-03-27 10:19:34 +00:00
< div style = "display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px" >
${_btn('clock', '定时定位', 'MODE,1#', '#4b5563')}
${_btn('brain', '智能模式', 'MODE,3#', '#4b5563')}
< / div >
2026-03-27 13:04:11 +00:00
< div style = "font-size:11px;color:#6b7280;margin-bottom:6px" > 上报间隔:< / div >
< div style = "display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px" >
${_btn('stopwatch', '10秒', 'TIMER,10#', '#374151')}
${_btn('stopwatch', '30秒', 'TIMER,30#', '#374151')}
${_btn('stopwatch', '60秒', 'TIMER,60#', '#374151')}
${_btn('stopwatch', '5分钟', 'TIMER,300#', '#374151')}
${_btn('stopwatch', '10分钟', 'TIMER,600#', '#374151')}
< / div >
< div style = "display:flex;gap:6px;margin-bottom:10px;align-items:center" >
< input id = "detailTimerInput" type = "number" placeholder = "自定义秒数" min = "5" max = "86400" style = "width:120px;background:#1f2937;border:1px solid #374151;border-radius:6px;padding:5px 8px;color:#e5e7eb;font-size:12px" $ { online ? ' ' : ' disabled ' } >
< button class = "btn" style = "font-size:12px;padding:5px 10px;background:#0d9488;border:none;color:#fff;border-radius:6px" $ { disabledAttr } onclick = "const v=document.getElementById('detailTimerInput').value;if(v&&v>=5)_quickCmd('${did}','TIMER,'+v+'#',this);else showToast('请输入5~86400秒','error')" > < i class = "fas fa-paper-plane" > < / i > 设置< / button >
< / div >
< div style = "font-size:11px;color:#6b7280;margin-bottom:6px" > SOS 号码 (最多3个, 逗号分隔):< / div >
< div style = "display:flex;gap:6px;margin-bottom:10px;align-items:center" >
< input id = "detailSosInput" type = "text" placeholder = "如: 13800001111,13800002222" maxlength = "60" style = "flex:1;background:#1f2937;border:1px solid #374151;border-radius:6px;padding:5px 8px;color:#e5e7eb;font-size:12px" $ { online ? ' ' : ' disabled ' } >
< button class = "btn" style = "font-size:12px;padding:5px 10px;background:#dc2626;border:none;color:#fff;border-radius:6px" $ { disabledAttr } onclick = "const v=document.getElementById('detailSosInput').value.trim();if(v)_quickCmd('${did}','SOS,A,'+v+'#',this);else showToast('请输入号码','error')" > < i class = "fas fa-phone" > < / i > 设置SOS< / button >
< button class = "btn" style = "font-size:12px;padding:5px 10px;background:#991b1b;border:none;color:#fff;border-radius:6px" $ { disabledAttr } onclick = "if(confirm('确定清空所有SOS号码？ > < i class = "fas fa-trash" > < / i > 清空< / button >
< / div >
2026-03-27 10:19:34 +00:00
< div style = "font-size:11px;color:#6b7280;margin-bottom:6px" > 信息查询:< / div >
< div style = "display:flex;flex-wrap:wrap;gap:6px" >
${_btn('info-circle', '设备状态', 'STATUS#', '#374151')}
${_btn('cog', '参数查询', 'PARAM#', '#374151')}
${_btn('code-branch', '固件版本', 'VERSION#', '#374151')}
2026-03-27 13:04:11 +00:00
${_btn('stopwatch', '定时器查询', 'TIMER#', '#374151')}
2026-03-27 10:19:34 +00:00
${_btn('clipboard-check', '完整信息', 'CHECK#', '#374151')}
< / div >
< div id = "detailCmdResult" style = "margin-top:10px;padding:8px;background:#0d1117;border-radius:6px;min-height:20px;font-family:monospace;word-break:break-all;display:${online?'block':'none'}" > < / div >
< / div >
<!-- TTS -->
< div style = "margin-top:14px;padding:12px;background:#111827;border-radius:8px;border:1px solid #374151${online?'':'display:none'}" >
< div style = "font-size:13px;font-weight:600;color:#9ca3af;margin-bottom:8px" > < i class = "fas fa-volume-up mr-1 text-purple-400" > < / i > 语音播报 (TTS)< / div >
< div style = "display:flex;gap:8px" >
< input id = "detailTtsInput" type = "text" placeholder = "输入语音内容 (最多200字)" maxlength = "200" style = "flex:1;background:#1f2937;border:1px solid #374151;border-radius:6px;padding:6px 10px;color:#e5e7eb;font-size:13px" $ { online ? ' ' : ' disabled ' } >
< button class = "btn" style = "font-size:12px;padding:6px 14px;background:#7c3aed;border:none;color:#fff;border-radius:6px;white-space:nowrap" $ { disabledAttr } onclick = "_quickTts('${did}')" > < i class = "fas fa-play" > < / i > 播报< / button >
< / div >
< / div >
<!-- 危险操作 -->
< div style = "margin-top:14px;padding:12px;background:rgba(127,29,29,0.15);border-radius:8px;border:1px solid #7f1d1d${online?'':'display:none'}" >
< div style = "font-size:13px;font-weight:600;color:#fca5a5;margin-bottom:8px" > < i class = "fas fa-exclamation-triangle mr-1" > < / i > 系统操作< / div >
< div style = "display:flex;gap:8px;flex-wrap:wrap" >
< button class = "btn" style = "font-size:12px;padding:5px 10px;background:#991b1b;border:none;color:#fff;border-radius:6px" $ { disabledAttr } onclick = "if(confirm('确定重启设备？'))_quickCmd('${did}','RESET#',this)" > < i class = "fas fa-power-off" > < / i > 重启设备< / button >
< / div >
< / div >
< div class = "flex gap-3 mt-5" >
< button class = "btn btn-primary flex-1" onclick = "showEditDeviceModal('${did}')" > < i class = "fas fa-edit" > < / i > 编辑< / button >
< button class = "btn btn-danger flex-1" onclick = "confirmDeleteDevice('${did}', '${escapeHtml(d.name || d.imei)}')" > < i class = "fas fa-trash" > < / i > 删除< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 关闭< / button >
< / div >
`);
} catch (err) {
showToast('加载设备详情失败: ' + err.message, 'error');
}
}
async function showEditDeviceModal(id) {
try {
const d = await apiCall(`${API_BASE}/devices/${id}`);
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-edit mr-2 text-yellow-400" > < / i > 编辑设备< / h3 >
< div class = "form-group" > < label > 名称< / label > < input type = "text" id = "editDeviceName" value = "${escapeHtml(d.name || '')}" > < / div >
< div class = "form-group" > < label > 状态< / label >
< select id = "editDeviceStatus" >
< option value = "online" $ { d . status = == ' online ' ? ' selected ' : ' ' } > 在线< / option >
< option value = "offline" $ { d . status = == ' offline ' ? ' selected ' : ' ' } > 离线< / option >
< / select >
< / div >
< div class = "form-group" > < label > 时区< / label > < input type = "text" id = "editDeviceTimezone" value = "${escapeHtml(d.timezone || '')}" > < / div >
< div class = "form-group" > < label > 语言< / label > < input type = "text" id = "editDeviceLang" value = "${escapeHtml(d.language || '')}" > < / div >
< div class = "flex gap-3 mt-6" >
< button class = "btn btn-primary flex-1" onclick = "submitEditDevice('${id}')" > < i class = "fas fa-check" > < / i > 保存< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 取消< / button >
< / div >
`);
} catch (err) {
showToast('加载设备信息失败: ' + err.message, 'error');
}
}
async function submitEditDevice(id) {
const body = {};
const name = document.getElementById('editDeviceName').value.trim();
const status = document.getElementById('editDeviceStatus').value;
const timezone = document.getElementById('editDeviceTimezone').value.trim();
const language = document.getElementById('editDeviceLang').value.trim();
if (name !== '') body.name = name;
if (status) body.status = status;
if (timezone) body.timezone = timezone;
if (language) body.language = language;
try {
await apiCall(`${API_BASE}/devices/${id}`, { method: 'PUT', body: JSON.stringify(body) });
showToast('设备更新成功');
closeModal();
loadDevices();
} catch (err) {
showToast('更新失败: ' + err.message, 'error');
}
}
function confirmDeleteDevice(id, name) {
showModal(`
< h3 class = "text-lg font-semibold mb-4 text-red-400" > < i class = "fas fa-exclamation-triangle mr-2" > < / i > 确认删除< / h3 >
< p class = "text-gray-300 mb-6" > 确定要删除设备 < strong > "${name}"< / strong > 吗？此操作不可恢复。< / p >
< div class = "flex gap-3" >
< button class = "btn btn-danger flex-1" onclick = "deleteDevice('${id}')" > < i class = "fas fa-trash" > < / i > 确认删除< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 取消< / button >
< / div >
`);
}
async function deleteDevice(id) {
try {
await apiCall(`${API_BASE}/devices/${id}`, { method: 'DELETE' });
showToast('设备已删除');
closeModal();
loadDevices();
} catch (err) {
showToast('删除失败: ' + err.message, 'error');
}
}
2026-03-27 13:04:11 +00:00
// ==================== MAP COORDINATE CONVERSION ====================
// WGS-84 → GCJ-02 (高德 JS API uses GCJ-02 natively)
2026-03-27 10:19:34 +00:00
const _gcj_a = 6378245.0, _gcj_ee = 0.00669342162296594;
function _outOfChina(lat, lng) { return lng < 72.004 | | lng > 137.8347 || lat < 0.8293 | | lat > 55.8271; }
function _transformLat(x, y) {
let r = -100.0 + 2.0*x + 3.0*y + 0.2*y*y + 0.1*x*y + 0.2*Math.sqrt(Math.abs(x));
r += (20.0*Math.sin(6.0*x*Math.PI) + 20.0*Math.sin(2.0*x*Math.PI)) * 2.0/3.0;
r += (20.0*Math.sin(y*Math.PI) + 40.0*Math.sin(y/3.0*Math.PI)) * 2.0/3.0;
r += (160.0*Math.sin(y/12.0*Math.PI) + 320.0*Math.sin(y*Math.PI/30.0)) * 2.0/3.0;
return r;
}
function _transformLng(x, y) {
let r = 300.0 + x + 2.0*y + 0.1*x*x + 0.1*x*y + 0.1*Math.sqrt(Math.abs(x));
r += (20.0*Math.sin(6.0*x*Math.PI) + 20.0*Math.sin(2.0*x*Math.PI)) * 2.0/3.0;
r += (20.0*Math.sin(x*Math.PI) + 40.0*Math.sin(x/3.0*Math.PI)) * 2.0/3.0;
r += (150.0*Math.sin(x/12.0*Math.PI) + 300.0*Math.sin(x/30.0*Math.PI)) * 2.0/3.0;
return r;
}
function wgs84ToGcj02(lat, lng) {
if (_outOfChina(lat, lng)) return [lat, lng];
let dLat = _transformLat(lng - 105.0, lat - 35.0);
let dLng = _transformLng(lng - 105.0, lat - 35.0);
const radLat = lat / 180.0 * Math.PI;
let magic = Math.sin(radLat);
magic = 1 - _gcj_ee * magic * magic;
const sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((_gcj_a * (1 - _gcj_ee)) / (magic * sqrtMagic) * Math.PI);
dLng = (dLng * 180.0) / (_gcj_a / sqrtMagic * Math.cos(radLat) * Math.PI);
return [lat + dLat, lng + dLng];
}
function gcj02ToWgs84(gcjLat, gcjLng) {
if (_outOfChina(gcjLat, gcjLng)) return [gcjLat, gcjLng];
let dLat = _transformLat(gcjLng - 105.0, gcjLat - 35.0);
let dLng = _transformLng(gcjLng - 105.0, gcjLat - 35.0);
const radLat = gcjLat / 180.0 * Math.PI;
let magic = Math.sin(radLat);
magic = 1 - _gcj_ee * magic * magic;
const sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((_gcj_a * (1 - _gcj_ee)) / (magic * sqrtMagic) * Math.PI);
dLng = (dLng * 180.0) / (_gcj_a / sqrtMagic * Math.cos(radLat) * Math.PI);
return [gcjLat - dLat, gcjLng - dLng];
}
2026-03-27 13:04:11 +00:00
// Convert WGS-84 coords to GCJ-02 for 高德地图
2026-03-27 10:19:34 +00:00
function toMapCoord(lat, lng) {
2026-03-27 13:04:11 +00:00
return wgs84ToGcj02(lat, lng);
2026-03-27 10:19:34 +00:00
}
// ==================== LOCATIONS ====================
function initLocationMap() {
if (locationMap) return;
setTimeout(() => {
2026-03-27 13:04:11 +00:00
const [mLat, mLng] = toMapCoord(30.605, 103.936);
locationMap = new AMap.Map('locationMap', {
viewMode: '3D',
pitch: 45,
rotation: -15,
rotateEnable: true,
pitchEnable: true,
zoom: 10,
zooms: [2, 20],
center: [mLng, mLat],
mapStyle: 'amap://styles/normal',
});
2026-03-27 10:19:34 +00:00
}, 100);
}
function clearMapOverlays() {
2026-03-27 13:04:11 +00:00
mapMarkers.forEach(m => locationMap.remove(m));
2026-03-27 10:19:34 +00:00
mapMarkers = [];
2026-03-27 13:04:11 +00:00
mapInfoWindows = [];
if (mapPolyline) { locationMap.remove(mapPolyline); mapPolyline = null; }
if (trackPlayTimer) { cancelAnimationFrame(trackPlayTimer); trackPlayTimer = null; }
if (trackMovingMarker) { locationMap.remove(trackMovingMarker); trackMovingMarker = null; }
2026-03-30 04:26:29 +00:00
if (_focusInfoWindow) { _focusInfoWindow.close(); _focusInfoWindow = null; }
if (_focusMarker) { locationMap.remove(_focusMarker); _focusMarker = null; }
const legend = document.getElementById('mapLegend');
if (legend) legend.style.display = 'none';
2026-03-27 10:19:34 +00:00
}
async function loadTrack() {
const deviceId = document.getElementById('locDeviceSelect').value;
if (!deviceId) { showToast('请选择设备', 'error'); return; }
let startTime = document.getElementById('locStartDate').value;
let endTime = document.getElementById('locEndDate').value;
// Default to today if not specified
if (!startTime) {
const today = new Date();
startTime = today.toISOString().split('T')[0];
document.getElementById('locStartDate').value = startTime;
}
if (!endTime) {
const today = new Date();
endTime = today.toISOString().split('T')[0];
document.getElementById('locEndDate').value = endTime;
}
let url = `${API_BASE}/locations/track/${deviceId}?start_time=${startTime}T00:00:00&end_time=${endTime}T23:59:59`;
try {
showToast('正在加载轨迹...', 'info');
const data = await apiCall(url);
const locations = Array.isArray(data) ? data : (data.items || []);
if (!locationMap) initLocationMap();
clearMapOverlays();
if (locations.length === 0) {
showToast('该时间段没有轨迹数据', 'info');
return;
}
2026-03-27 13:04:11 +00:00
const path = [];
const total = locations.length;
2026-03-27 10:19:34 +00:00
locations.forEach((loc, i) => {
const lat = loc.latitude || loc.lat;
const lng = loc.longitude || loc.lng || loc.lon;
if (lat & & lng) {
const [mLat, mLng] = toMapCoord(lat, lng);
2026-03-27 13:04:11 +00:00
path.push([mLng, mLat]);
2026-03-27 10:19:34 +00:00
const isFirst = i === 0;
2026-03-27 13:04:11 +00:00
const isLast = i === total - 1;
2026-03-30 04:26:29 +00:00
const lt = loc.location_type || '';
const isLbs = lt.startsWith('lbs');
const isWifi = lt.startsWith('wifi');
const isBt = lt === 'bluetooth';
// Color by location type: GPS=blue, WiFi=cyan, LBS=orange, BT=purple
let dotColor = '#3b82f6';
if (isFirst) dotColor = '#22c55e';
else if (isLast) dotColor = '#ef4444';
else if (isLbs) dotColor = '#f59e0b';
else if (isWifi) dotColor = '#06b6d4';
else if (isBt) dotColor = '#a855f7';
2026-03-27 13:04:11 +00:00
const marker = new AMap.CircleMarker({
center: [mLng, mLat],
2026-03-30 04:26:29 +00:00
radius: isFirst || isLast ? 12 : 8,
fillColor: dotColor,
strokeColor: isLbs ? '#f59e0b' : '#fff',
strokeWeight: isLbs ? 2 : 1,
strokeOpacity: isLbs ? 0.6 : 1,
fillOpacity: isLbs ? 0.6 : 0.9,
zIndex: 120, cursor: 'pointer',
2026-03-27 13:04:11 +00:00
});
marker.setMap(locationMap);
2026-03-30 04:26:29 +00:00
// Add accuracy radius ring for LBS points (~1000m) and WiFi (~80m)
if (isLbs & & !isFirst & & !isLast) {
const ring = new AMap.Circle({
center: [mLng, mLat], radius: 1000,
strokeColor: '#f59e0b', strokeWeight: 1, strokeOpacity: 0.3, strokeStyle: 'dashed',
fillColor: '#f59e0b', fillOpacity: 0.05, bubble: true,
});
ring.setMap(locationMap);
mapMarkers.push(ring);
} else if (isWifi & & !isFirst & & !isLast) {
const ring = new AMap.Circle({
center: [mLng, mLat], radius: 80,
strokeColor: '#06b6d4', strokeWeight: 1, strokeOpacity: 0.3, strokeStyle: 'dashed',
fillColor: '#06b6d4', fillOpacity: 0.05, bubble: true,
});
ring.setMap(locationMap);
mapMarkers.push(ring);
}
2026-03-27 13:04:11 +00:00
const label = isFirst ? `起点 (1/${total})` : isLast ? `终点 (${i+1}/${total})` : `第 ${i+1}/${total} 点`;
const content = _buildInfoContent(label, loc, lat, lng);
const infoWindow = new AMap.InfoWindow({ content, offset: new AMap.Pixel(0, -5) });
marker.on('click', () => infoWindow.open(locationMap, [mLng, mLat]));
2026-03-27 10:19:34 +00:00
mapMarkers.push(marker);
2026-03-27 13:04:11 +00:00
mapInfoWindows.push({ infoWindow, position: [mLng, mLat], locId: loc.id });
2026-03-27 10:19:34 +00:00
}
});
2026-03-27 13:04:11 +00:00
if (path.length > 1) {
mapPolyline = new AMap.Polyline({ path, strokeColor: '#3b82f6', strokeWeight: 3, strokeOpacity: 0.8, lineJoin: 'round' });
mapPolyline.setMap(locationMap);
locationMap.setFitView([mapPolyline], false, [50, 50, 50, 50]);
} else if (path.length === 1) {
2026-03-30 04:26:29 +00:00
locationMap.setCenter(path[0]);
locationMap.setZoom(15);
2026-03-27 10:19:34 +00:00
}
2026-03-30 04:26:29 +00:00
const legend = document.getElementById('mapLegend');
if (legend) legend.style.display = 'block';
2026-03-27 13:04:11 +00:00
showToast(`已加载 ${total} 个轨迹点`);
2026-03-27 10:19:34 +00:00
} catch (err) {
showToast('加载轨迹失败: ' + err.message, 'error');
}
}
async function loadLatestPosition() {
const deviceId = document.getElementById('locDeviceSelect').value;
if (!deviceId) { showToast('请选择设备', 'error'); return; }
2026-03-30 04:26:29 +00:00
const btn = document.querySelector('.btn-success');
const origHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '< i class = "fas fa-spinner fa-spin" > < / i > 获取中...';
2026-03-27 10:19:34 +00:00
try {
2026-03-30 04:26:29 +00:00
// Record timestamp before sending command
const sentAt = new Date().toISOString();
2026-03-27 13:04:11 +00:00
// Send WHERE# to request fresh position from device
try {
await apiCall(`${API_BASE}/commands/send`, {
method: 'POST',
body: JSON.stringify({ device_id: parseInt(deviceId), command_type: 'online_cmd', command_content: 'WHERE#' }),
});
showToast('已发送定位指令，等待设备回传...', 'info');
2026-03-30 04:26:29 +00:00
} catch (e) {
showToast('设备可能离线: ' + e.message, 'error');
btn.disabled = false;
btn.innerHTML = origHtml;
return;
}
// Poll for new location (up to 30s, every 3s)
let loc = null;
const maxPolls = 10;
const pollInterval = 3000;
for (let i = 0; i < maxPolls ; i + + ) {
await new Promise(r => setTimeout(r, pollInterval));
try {
const result = await apiCall(`${API_BASE}/locations/latest/${deviceId}`);
if (result & & (result.latitude != null || result.longitude != null)) {
const recTime = new Date(result.recorded_at || result.created_at);
if (recTime >= new Date(sentAt) - 5000) {
loc = result;
break;
}
}
} catch (_) {}
const elapsed = (i + 1) * pollInterval / 1000;
btn.innerHTML = `< i class = "fas fa-spinner fa-spin" > < / i > 等待回传 ${elapsed}s...`;
}
if (!loc) {
showToast('设备未在30秒内回传位置，
return;
}
2026-03-27 13:04:11 +00:00
2026-03-27 10:19:34 +00:00
if (!locationMap) initLocationMap();
clearMapOverlays();
const lat = loc.latitude || loc.lat;
const lng = loc.longitude || loc.lng || loc.lon;
2026-03-30 04:26:29 +00:00
if (!lat || !lng) { showToast('设备回传了数据但无有效坐标', 'info'); return; }
2026-03-27 10:19:34 +00:00
const [mLat, mLng] = toMapCoord(lat, lng);
2026-03-27 13:04:11 +00:00
const marker = new AMap.Marker({ position: [mLng, mLat] });
marker.setMap(locationMap);
2026-03-30 04:26:29 +00:00
// Add accuracy radius for LBS/WiFi latest position
const _lt = loc.location_type || '';
if (_lt.startsWith('lbs')) {
const ring = new AMap.Circle({
center: [mLng, mLat], radius: 1000,
strokeColor: '#f59e0b', strokeWeight: 1, strokeOpacity: 0.4, strokeStyle: 'dashed',
fillColor: '#f59e0b', fillOpacity: 0.06, bubble: true,
});
ring.setMap(locationMap);
mapMarkers.push(ring);
} else if (_lt.startsWith('wifi')) {
const ring = new AMap.Circle({
center: [mLng, mLat], radius: 80,
strokeColor: '#06b6d4', strokeWeight: 1, strokeOpacity: 0.4, strokeStyle: 'dashed',
fillColor: '#06b6d4', fillOpacity: 0.06, bubble: true,
});
ring.setMap(locationMap);
mapMarkers.push(ring);
}
const infoContent = _buildInfoContent('实时定位', loc, lat, lng);
2026-03-27 13:04:11 +00:00
const infoWindow = new AMap.InfoWindow({ content: infoContent, offset: new AMap.Pixel(0, -30) });
infoWindow.open(locationMap, [mLng, mLat]);
marker.on('click', () => infoWindow.open(locationMap, [mLng, mLat]));
2026-03-27 10:19:34 +00:00
mapMarkers.push(marker);
2026-03-30 04:26:29 +00:00
locationMap.setCenter([mLng, mLat]);
locationMap.setZoom(15);
showToast('已获取设备实时位置');
2026-03-27 10:19:34 +00:00
loadLocationRecords(1);
} catch (err) {
2026-03-30 04:26:29 +00:00
showToast('获取位置失败: ' + err.message, 'error');
} finally {
btn.disabled = false;
btn.innerHTML = origHtml;
2026-03-27 10:19:34 +00:00
}
}
async function loadLocationRecords(page) {
if (page) pageState.locations.page = page;
const p = pageState.locations.page;
const ps = pageState.locations.pageSize;
const deviceId = document.getElementById('locDeviceSelect').value;
const locType = document.getElementById('locTypeFilter').value;
const startTime = document.getElementById('locStartDate').value;
const endTime = document.getElementById('locEndDate').value;
let url = `${API_BASE}/locations?page=${p}&page_size=${ps}`;
if (deviceId) url += `&device_id=${deviceId}`;
if (locType) url += `&location_type=${locType}`;
if (startTime) url += `&start_time=${startTime}T00:00:00`;
if (endTime) url += `&end_time=${endTime}T23:59:59`;
showLoading('locationsLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
2026-03-30 04:26:29 +00:00
_locTableItems = items; // cache for focusMapPoint
2026-03-27 10:19:34 +00:00
const tbody = document.getElementById('locationsTableBody');
if (items.length === 0) {
2026-03-30 04:26:29 +00:00
tbody.innerHTML = '< tr > < td colspan = "10" class = "text-center text-gray-500 py-8" > 没有位置记录< / td > < / tr > ';
2026-03-27 10:19:34 +00:00
} else {
2026-03-27 13:04:11 +00:00
tbody.innerHTML = items.map(l => {
const q = _locQuality(l);
const hasCoord = l.latitude != null & & l.longitude != null;
return `< tr style = "cursor:${hasCoord?'pointer':'default'}" $ { hasCoord ? ` onclick = "focusMapPoint(${l.id})" ` : ' ' } >
2026-03-30 04:26:29 +00:00
< td onclick = "event.stopPropagation()" > < input type = "checkbox" class = "loc-sel-cb" value = "${l.id}" onchange = "updateLocSelCount()" > < / td >
2026-03-27 10:19:34 +00:00
< td class = "font-mono text-xs" > ${escapeHtml(l.device_id || '-')}< / td >
2026-03-27 13:04:11 +00:00
< td > ${_locTypeLabel(l.location_type)}< / td >
2026-03-27 10:19:34 +00:00
< td > ${l.latitude != null ? Number(l.latitude).toFixed(6) : '-'}< / td >
< td > ${l.longitude != null ? Number(l.longitude).toFixed(6) : '-'}< / td >
< td class = "text-xs" > ${escapeHtml(l.address || '-')}< / td >
< td > ${l.speed != null ? l.speed : '-'}< / td >
2026-03-27 13:04:11 +00:00
< td > < span class = "badge" style = "background:${q.bg};color:${q.fg}" > ${q.label}< / span > < / td >
2026-03-27 10:19:34 +00:00
< td class = "text-xs text-gray-400" > ${formatTime(l.recorded_at || l.created_at)}< / td >
2026-03-27 13:04:11 +00:00
< td >
${hasCoord ? `< button class = "btn btn-sm" style = "color:#3b82f6;font-size:11px" onclick = "event.stopPropagation();focusMapPoint(${l.id})" title = "定位" > < i class = "fas fa-map-marker-alt" > < / i > < / button > ` : ''}
< button class = "btn btn-sm" style = "color:#ef4444;font-size:11px" onclick = "event.stopPropagation();deleteLocationRecord(${l.id})" title = "删除" > < i class = "fas fa-trash" > < / i > < / button >
< / td >
< / tr > `;
}).join('');
2026-03-27 10:19:34 +00:00
}
2026-03-30 04:26:29 +00:00
document.getElementById('locSelectAll').checked = false;
updateLocSelCount();
2026-03-27 10:19:34 +00:00
renderPagination('locationsPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadLocationRecords');
} catch (err) {
showToast('加载位置记录失败: ' + err.message, 'error');
2026-03-30 04:26:29 +00:00
document.getElementById('locationsTableBody').innerHTML = '< tr > < td colspan = "10" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
2026-03-27 10:19:34 +00:00
} finally {
hideLoading('locationsLoading');
}
}
// ==================== ALARMS ====================
async function loadAlarmStats() {
try {
const stats = await apiCall(`${API_BASE}/alarms/stats`);
document.getElementById('alarmStatTotal').textContent = stats.total || 0;
document.getElementById('alarmStatUnack').textContent = stats.unacknowledged || 0;
document.getElementById('alarmStatAck').textContent = stats.acknowledged || 0;
renderAlarmDoughnut('alarmTypeChart', stats.by_type, true);
} catch (err) {
console.error('Failed to load alarm stats:', err);
}
}
async function loadAlarms(page) {
if (page) pageState.alarms.page = page;
const p = pageState.alarms.page;
const ps = pageState.alarms.pageSize;
const deviceId = document.getElementById('alarmDeviceFilter').value;
const alarmType = document.getElementById('alarmTypeFilter').value;
const ack = document.getElementById('alarmAckFilter').value;
const startTime = document.getElementById('alarmStartDate').value;
const endTime = document.getElementById('alarmEndDate').value;
let url = `${API_BASE}/alarms?page=${p}&page_size=${ps}`;
if (deviceId) url += `&device_id=${deviceId}`;
if (alarmType) url += `&alarm_type=${alarmType}`;
if (ack) url += `&acknowledged=${ack}`;
if (startTime) url += `&start_time=${startTime}T00:00:00`;
if (endTime) url += `&end_time=${endTime}T23:59:59`;
showLoading('alarmsLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('alarmsTableBody');
if (items.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "9" class = "text-center text-gray-500 py-8" > 没有告警记录< / td > < / tr > ';
} else {
tbody.innerHTML = items.map(a => `
< tr >
< td class = "font-mono text-xs" > ${escapeHtml(a.device_id || '-')}< / td >
< td > < span class = "${alarmTypeClass(a.alarm_type)} font-semibold" > ${alarmTypeName(a.alarm_type)}< / span > < / td >
< td > ${escapeHtml(a.alarm_source || '-')}< / td >
< td class = "text-xs" > ${a.address ? escapeHtml(a.address) : (a.latitude != null ? Number(a.latitude).toFixed(6) + ', ' + Number(a.longitude).toFixed(6) : '-')}< / td >
< td > ${a.battery_level != null ? a.battery_level + '%' : '-'}< / td >
< td > ${a.gsm_signal != null ? a.gsm_signal : '-'}< / td >
< td > ${a.acknowledged ? '< span class = "badge badge-online" > 已确认< / span > ' : '< span class = "badge badge-offline" > 未确认< / span > '}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(a.recorded_at)}< / td >
< td >
${a.acknowledged
? `< button class = "btn btn-warning btn-sm" onclick = "toggleAlarmAck('${a.id}', false)" > < i class = "fas fa-undo" > < / i > < / button > `
: `< button class = "btn btn-success btn-sm" onclick = "toggleAlarmAck('${a.id}', true)" > < i class = "fas fa-check" > < / i > < / button > `
}
< / td >
< / tr >
`).join('');
}
renderPagination('alarmsPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadAlarms');
} catch (err) {
showToast('加载告警失败: ' + err.message, 'error');
document.getElementById('alarmsTableBody').innerHTML = '< tr > < td colspan = "9" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
} finally {
hideLoading('alarmsLoading');
}
}
async function toggleAlarmAck(id, acknowledged) {
try {
await apiCall(`${API_BASE}/alarms/${id}/acknowledge`, {
method: 'PUT',
body: JSON.stringify({ acknowledged }),
});
showToast(acknowledged ? '告警已确认' : '告警已取消确认');
loadAlarms();
loadAlarmStats();
} catch (err) {
showToast('操作失败: ' + err.message, 'error');
}
}
// ==================== ATTENDANCE ====================
async function loadAttendanceStats() {
try {
const deviceId = document.getElementById('attDeviceFilter')?.value || '';
const startTime = document.getElementById('attStartDate')?.value || '';
const endTime = document.getElementById('attEndDate')?.value || '';
let url = `${API_BASE}/attendance/stats?`;
if (deviceId) url += `device_id=${deviceId}&`;
if (startTime) url += `start_time=${startTime}T00:00:00&`;
if (endTime) url += `end_time=${endTime}T23:59:59&`;
const stats = await apiCall(url);
document.getElementById('attStatTotal').textContent = stats.total || 0;
document.getElementById('attStatCheckIn').textContent = stats.by_type?.clock_in || stats.check_in || 0;
document.getElementById('attStatCheckOut').textContent = stats.by_type?.clock_out || stats.check_out || 0;
const other = stats.total - (stats.by_type?.clock_in || 0) - (stats.by_type?.clock_out || 0);
document.getElementById('attStatOther').textContent = other > 0 ? other : 0;
} catch (err) {
console.error('Failed to load attendance stats:', err);
}
}
async function loadAttendance(page) {
if (page) pageState.attendance.page = page;
const p = pageState.attendance.page;
const ps = pageState.attendance.pageSize;
const deviceId = document.getElementById('attDeviceFilter').value;
const attType = document.getElementById('attTypeFilter').value;
2026-03-30 04:26:29 +00:00
const attSource = document.getElementById('attSourceFilter').value;
2026-03-27 10:19:34 +00:00
const startTime = document.getElementById('attStartDate').value;
const endTime = document.getElementById('attEndDate').value;
let url = `${API_BASE}/attendance?page=${p}&page_size=${ps}`;
if (deviceId) url += `&device_id=${deviceId}`;
if (attType) url += `&attendance_type=${attType}`;
2026-03-30 04:26:29 +00:00
if (attSource) url += `&attendance_source=${attSource}`;
2026-03-27 10:19:34 +00:00
if (startTime) url += `&start_time=${startTime}T00:00:00`;
if (endTime) url += `&end_time=${endTime}T23:59:59`;
showLoading('attendanceLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('attendanceTableBody');
if (items.length === 0) {
2026-03-30 04:26:29 +00:00
tbody.innerHTML = '< tr > < td colspan = "7" class = "text-center text-gray-500 py-8" > 没有考勤记录< / td > < / tr > ';
2026-03-27 10:19:34 +00:00
} else {
tbody.innerHTML = items.map(a => {
const posStr = a.address || (a.latitude != null ? `${Number(a.latitude).toFixed(6)}, ${Number(a.longitude).toFixed(6)}` : '-');
const gpsIcon = a.gps_positioned ? '< i class = "fas fa-satellite text-green-400" title = "GPS定位" > < / i > ' : '< i class = "fas fa-broadcast-tower text-yellow-400" title = "基站/WiFi定位" > < / i > ';
const battStr = a.battery_level != null ? `${a.battery_level}%` : '-';
const sigStr = a.gsm_signal != null ? `GSM:${a.gsm_signal}` : '';
const lbsStr = a.mcc != null ? `${a.mcc}/${a.mnc || 0}/${a.lac || 0}/${a.cell_id || 0}` : '-';
2026-03-30 04:26:29 +00:00
const srcLabel = {'device':'< i class = "fas fa-mobile-alt" > < / i > 设备','bluetooth':'< i class = "fab fa-bluetooth-b" > < / i > 蓝牙','fence':'< i class = "fas fa-draw-polygon" > < / i > 围栏'}[a.attendance_source] || a.attendance_source || '设备';
const srcColor = {'device':'#9ca3af','bluetooth':'#818cf8','fence':'#34d399'}[a.attendance_source] || '#9ca3af';
2026-03-27 10:19:34 +00:00
return `< tr >
< td class = "font-mono text-xs" > ${escapeHtml(a.device_id || '-')}< / td >
< td > < span class = "${a.attendance_type === 'clock_in' ? 'text-green-400' : 'text-blue-400'} font-semibold" > ${attendanceTypeName(a.attendance_type)}< / span > < / td >
2026-03-30 04:26:29 +00:00
< td style = "color:${srcColor};font-size:12px" > ${srcLabel}< / td >
2026-03-27 10:19:34 +00:00
< td class = "text-xs" > ${gpsIcon} ${escapeHtml(posStr)}< / td >
< td class = "text-xs" > ${battStr} ${sigStr}< / td >
< td class = "text-xs font-mono" > ${lbsStr}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(a.recorded_at)}< / td >
< / tr > `;
}).join('');
}
renderPagination('attendancePagination', data.total || 0, data.page || p, data.page_size || ps, 'loadAttendance');
} catch (err) {
showToast('加载考勤记录失败: ' + err.message, 'error');
2026-03-30 04:26:29 +00:00
document.getElementById('attendanceTableBody').innerHTML = '< tr > < td colspan = "7" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
2026-03-27 10:19:34 +00:00
} finally {
hideLoading('attendanceLoading');
}
}
// ==================== BLUETOOTH ====================
async function loadBluetooth(page) {
if (page) pageState.bluetooth.page = page;
const p = pageState.bluetooth.page;
const ps = pageState.bluetooth.pageSize;
const deviceId = document.getElementById('btDeviceFilter').value;
const recordType = document.getElementById('btTypeFilter').value;
const startTime = document.getElementById('btStartDate').value;
const endTime = document.getElementById('btEndDate').value;
let url = `${API_BASE}/bluetooth?page=${p}&page_size=${ps}`;
if (deviceId) url += `&device_id=${deviceId}`;
if (recordType) url += `&record_type=${recordType}`;
if (startTime) url += `&start_time=${startTime}T00:00:00`;
if (endTime) url += `&end_time=${endTime}T23:59:59`;
showLoading('bluetoothLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('bluetoothTableBody');
if (items.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 没有蓝牙记录< / td > < / tr > ';
} else {
tbody.innerHTML = items.map(b => {
const typeIcon = b.record_type === 'punch' ? '< i class = "fas fa-fingerprint text-purple-400" > < / i > ' : '< i class = "fas fa-map-marker-alt text-cyan-400" > < / i > ';
const typeName = b.record_type === 'punch' ? '打卡' : '定位';
const mac = b.beacon_mac || '-';
const uuid = b.beacon_uuid ? `< span title = "${escapeHtml(b.beacon_uuid)}" > ${escapeHtml(b.beacon_uuid?.substring(0, 8) || '')}...< / span > ` : '-';
const majorMinor = b.beacon_major != null ? `${b.beacon_major} / ${b.beacon_minor}` : '';
const uuidLine = uuid !== '-' ? `${uuid}< br > < span class = "text-gray-500" > ${majorMinor}< / span > ` : '-';
const rssiBar = b.rssi != null ? `< span class = "${b.rssi > -60 ? 'text-green-400' : b.rssi > -80 ? 'text-yellow-400' : 'text-red-400'}" > ${b.rssi} dBm< / span > ` : '-';
const battStr = b.beacon_battery != null ? `${Number(b.beacon_battery).toFixed(2)}${b.beacon_battery_unit || 'V'}` : '-';
const attStr = b.attendance_type ? `< span class = "${b.attendance_type === 'clock_in' ? 'text-green-400' : 'text-blue-400'}" > ${attendanceTypeName(b.attendance_type)}< / span > ` : '-';
return `< tr >
< td class = "font-mono text-xs" > ${escapeHtml(b.device_id || '-')}< / td >
< td > ${typeIcon} < span class = "font-semibold" > ${typeName}< / span > < / td >
< td class = "font-mono text-xs" > ${escapeHtml(mac)}< / td >
< td class = "text-xs" > ${uuidLine}< / td >
< td class = "text-xs" > ${rssiBar}< / td >
< td class = "text-xs" > ${battStr}< / td >
< td class = "text-xs" > ${attStr}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(b.recorded_at)}< / td >
< / tr > `;
}).join('');
}
renderPagination('bluetoothPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadBluetooth');
} catch (err) {
showToast('加载蓝牙记录失败: ' + err.message, 'error');
document.getElementById('bluetoothTableBody').innerHTML = '< tr > < td colspan = "8" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
} finally {
hideLoading('bluetoothLoading');
}
}
// ==================== BEACONS ====================
async function loadBeacons(page) {
if (page) pageState.beacons.page = page;
const p = pageState.beacons.page;
const ps = pageState.beacons.pageSize;
const search = document.getElementById('beaconSearch').value.trim();
const status = document.getElementById('beaconStatusFilter').value;
let url = `${API_BASE}/beacons?page=${p}&page_size=${ps}`;
if (search) url += `&search=${encodeURIComponent(search)}`;
if (status) url += `&status=${status}`;
showLoading('beaconsLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('beaconsTableBody');
if (items.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 暂无信标记录，点击右上角"添加信标"注册新信标< / td > < / tr > ';
} else {
tbody.innerHTML = items.map(b => {
const uuid = b.beacon_uuid ? `< span title = "${escapeHtml(b.beacon_uuid)}" > ${escapeHtml(b.beacon_uuid.substring(0, 8))}...< / span > ` : '-';
const majorMinor = b.beacon_major != null ? `${b.beacon_major} / ${b.beacon_minor}` : '';
const uuidLine = b.beacon_uuid ? `${uuid}< br > < span class = "text-gray-500" > ${majorMinor}< / span > ` : (majorMinor || '-');
const floorArea = [b.floor, b.area].filter(Boolean).join(' / ') || '-';
const coords = (b.latitude & & b.longitude) ? `< span class = "text-green-400" > ${Number(b.latitude).toFixed(5)}, ${Number(b.longitude).toFixed(5)}< / span > ` : '< span class = "text-gray-500" > 未设置< / span > ';
const statusBadge = b.status === 'active'
? '< span style = "padding:2px 8px;border-radius:9999px;background:#065f4620;color:#34d399;font-size:12px" > 启用< / span > '
: '< span style = "padding:2px 8px;border-radius:9999px;background:#7f1d1d20;color:#f87171;font-size:12px" > 停用< / span > ';
return `< tr >
< td class = "font-mono text-xs" > ${escapeHtml(b.beacon_mac)}< / td >
< td class = "font-semibold" > ${escapeHtml(b.name)}< / td >
< td class = "text-xs" > ${uuidLine}< / td >
< td class = "text-xs" > ${escapeHtml(floorArea)}< / td >
< td class = "text-xs" > ${coords}< / td >
< td > ${statusBadge}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(b.updated_at || b.created_at)}< / td >
< td >
< button class = "btn btn-secondary" style = "padding:4px 10px;font-size:12px" onclick = "showEditBeaconModal(${b.id})" > < i class = "fas fa-edit" > < / i > < / button >
< button class = "btn btn-secondary" style = "padding:4px 10px;font-size:12px;color:#f87171" onclick = "confirmDeleteBeacon(${b.id}, '${escapeHtml(b.name)}')" > < i class = "fas fa-trash" > < / i > < / button >
< / td >
< / tr > `;
}).join('');
}
renderPagination('beaconsPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadBeacons');
// Render beacon side panel
renderBeaconPanel(items);
} catch (err) {
showToast('加载信标列表失败: ' + err.message, 'error');
document.getElementById('beaconsTableBody').innerHTML = '< tr > < td colspan = "8" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
} finally {
hideLoading('beaconsLoading');
}
}
2026-03-27 13:04:11 +00:00
// ==================== DATA LOG ====================
let logPageState = { page: 1, pageSize: 30 };
let logDeviceMap = {}; // {device_id: {imei, name}}
async function loadDataLogStats() {
// Load counts for each type (today)
const today = new Date().toISOString().split('T')[0];
const base = `&start_time=${today}T00:00:00&end_time=${today}T23:59:59`;
try {
const [loc, alarm, hb, att, bt] = await Promise.all([
apiCall(`${API_BASE}/locations?page=1& page_size=1${base}`),
apiCall(`${API_BASE}/alarms?page=1& page_size=1`),
apiCall(`${API_BASE}/heartbeats?page=1& page_size=1`),
apiCall(`${API_BASE}/attendance?page=1& page_size=1`),
apiCall(`${API_BASE}/bluetooth?page=1& page_size=1`),
]);
document.getElementById('logCountLoc').textContent = loc.total || 0;
document.getElementById('logCountAlarm').textContent = alarm.total || 0;
document.getElementById('logCountHb').textContent = hb.total || 0;
document.getElementById('logCountAtt').textContent = att.total || 0;
document.getElementById('logCountBt').textContent = bt.total || 0;
} catch (_) {}
// Populate device filter + build IMEI map
const sel = document.getElementById('logDeviceFilter');
if (sel.options.length < = 1) {
try {
const devs = await apiCall(`${API_BASE}/devices?page=1&page_size=100`);
(devs.items || []).forEach(d => {
logDeviceMap[d.id] = { imei: d.imei, name: d.name || d.imei };
const opt = document.createElement('option');
opt.value = d.id;
opt.textContent = `${d.name || d.imei} (ID:${d.id})`;
sel.appendChild(opt);
});
} catch (_) {}
}
}
async function loadDataLog(page) {
if (page) logPageState.page = page;
const p = logPageState.page;
const ps = logPageState.pageSize;
const deviceId = document.getElementById('logDeviceFilter').value;
const logType = document.getElementById('logTypeFilter').value;
const startDate = document.getElementById('logStartDate').value;
const endDate = document.getElementById('logEndDate').value;
// Determine which API endpoint to call based on type
const type = logType || 'location'; // default to location
const endpointMap = {
location: 'locations', alarm: 'alarms', heartbeat: 'heartbeats',
attendance: 'attendance', bluetooth: 'bluetooth',
};
const endpoint = endpointMap[type] || 'locations';
let url = `${API_BASE}/${endpoint}?page=${p}&page_size=${ps}`;
if (deviceId) url += `&device_id=${deviceId}`;
if (startDate) url += `&start_time=${startDate}T00:00:00`;
if (endDate) url += `&end_time=${endDate}T23:59:59`;
showLoading('datalogLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('datalogTableBody');
if (items.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 暂无记录< / td > < / tr > ';
} else {
tbody.innerHTML = items.map(r => {
const detail = _logDetail(type, r);
const lat = r.latitude != null ? Number(r.latitude).toFixed(6) : '-';
const lng = r.longitude != null ? Number(r.longitude).toFixed(6) : '-';
const coord = r.latitude != null ? `${lat}, ${lng}` : '-';
const addr = r.address || '-';
const time = r.recorded_at || r.alarm_time || r.heartbeat_time || r.created_at;
const typeBadge = _logTypeBadge(type);
return `< tr >
< td class = "font-mono text-xs" > ${r.id}< / td >
< td > ${typeBadge}< / td >
< td > ${r.device_id || '-'}< / td >
< td class = "font-mono text-xs" > ${escapeHtml(r.imei || (logDeviceMap[r.device_id] || {}).imei || '-')}< / td >
< td class = "text-xs" style = "max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title = "${escapeHtml(detail)}" > ${escapeHtml(detail)}< / td >
< td class = "font-mono text-xs" > ${coord}< / td >
< td class = "text-xs" > ${escapeHtml(addr)}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(time)}< / td >
< / tr > `;
}).join('');
}
renderPagination('datalogPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadDataLog');
} catch (err) {
document.getElementById('datalogTableBody').innerHTML = '< tr > < td colspan = "8" class = "text-center text-red-400 py-8" > 加载失败: ' + escapeHtml(err.message) + '< / td > < / tr > ';
} finally {
hideLoading('datalogLoading');
}
}
function _logTypeBadge(type) {
const map = {
location: { label: '位置', bg: '#1e3a5f', fg: '#93c5fd' },
alarm: { label: '告警', bg: '#7f1d1d', fg: '#fca5a5' },
heartbeat: { label: '心跳', bg: '#065f46', fg: '#6ee7b7' },
attendance: { label: '考勤', bg: '#78350f', fg: '#fde68a' },
bluetooth: { label: '蓝牙', bg: '#3b1f5f', fg: '#c4b5fd' },
};
const m = map[type] || { label: type, bg: '#374151', fg: '#9ca3af' };
return `< span class = "badge" style = "background:${m.bg};color:${m.fg}" > ${m.label}< / span > `;
}
function _logDetail(type, r) {
switch (type) {
case 'location':
return `${_locTypeLabel(r.location_type)} | 速度:${r.speed ?? '-'} | 卫星:${r.gps_satellites ?? '-'}`;
case 'alarm':
return `${r.alarm_type || '-'} | 来源:${r.alarm_source || '-'} | ${r.acknowledged ? '已确认' : '未确认'}`;
case 'heartbeat':
return `电量:${r.battery_level ?? '-'}% | 信号:${r.gsm_signal ?? '-'} | 步数:${r.step_count ?? '-'}`;
case 'attendance':
return `${r.attendance_type === 'clock_in' ? '签到' : r.attendance_type === 'clock_out' ? '签退' : r.attendance_type || '-'} | ${_locTypeLabel(r.location_type)}`;
case 'bluetooth':
return `${r.record_type === 'punch' ? '打卡' : '定位'} | MAC:${r.beacon_mac || '-'} | RSSI:${r.rssi ?? '-'}`;
default:
return '-';
}
}
// ==================== FENCES ====================
let fenceMap = null;
let fenceMouseTool = null;
let fenceOverlays = {}; // {fenceId: overlay} rendered on map
let fenceSearchMarker = null;
function initFenceMap() {
if (fenceMap) return;
setTimeout(() => {
const [mLat, mLng] = toMapCoord(30.605, 103.936);
fenceMap = new AMap.Map('fenceMap', {
viewMode: '3D',
pitch: 40,
rotation: -15,
rotateEnable: true,
pitchEnable: true,
zoom: 12,
zooms: [2, 20],
center: [mLng, mLat],
mapStyle: 'amap://styles/normal',
});
}, 100);
}
function clearFenceOverlays() {
Object.values(fenceOverlays).forEach(o => { if (o) fenceMap.remove(o); });
fenceOverlays = {};
}
function _createFenceOverlay(f) {
const color = f.color || '#3b82f6';
const opts = { strokeColor: color, strokeWeight: 2, fillColor: f.fill_color || color, fillOpacity: f.fill_opacity || 0.2 };
if (f.fence_type === 'circle' & & f.center_lat != null & & f.center_lng != null & & f.radius) {
const [mLat, mLng] = toMapCoord(f.center_lat, f.center_lng);
return new AMap.Circle({ center: [mLng, mLat], radius: f.radius, ...opts });
} else if ((f.fence_type === 'polygon' || f.fence_type === 'rectangle') & & f.points) {
let pts; try { pts = JSON.parse(f.points); } catch (_) { return null; }
const path = pts.map(p => { const [mLat, mLng] = toMapCoord(p[1], p[0]); return [mLng, mLat]; });
return new AMap.Polygon({ path, ...opts });
}
return null;
}
function renderFencesOnMap(fences) {
if (!fenceMap) return;
clearFenceOverlays();
fences.forEach(f => {
const overlay = _createFenceOverlay(f);
if (overlay) {
overlay.setMap(fenceMap);
const typeLabel = f.fence_type === 'circle' ? '圆形' : f.fence_type === 'polygon' ? '多边形' : '矩形';
const detail = f.fence_type === 'circle' ? `半径: ${f.radius}m` : '';
const infoWindow = new AMap.InfoWindow({
content: `< div style = "color:#333;font-size:13px;line-height:1.6" > < b style = "color:#111" > ${escapeHtml(f.name)}< / b >
< span style = "padding:1px 6px;border-radius:4px;font-size:11px;background:${f.color};color:#fff;margin-left:4px" > ${typeLabel}< / span > < br >
${detail ? detail + '< br > ' : ''}${f.description ? escapeHtml(f.description) : ''}< / div > `,
offset: new AMap.Pixel(0, -5),
});
overlay.on('click', (e) => infoWindow.open(fenceMap, e.lnglat));
fenceOverlays[f.id] = overlay;
// Respect visibility: hide inactive
if (!f.is_active) overlay.hide();
}
});
const visible = Object.values(fenceOverlays).filter(o => o);
if (visible.length) fenceMap.setFitView(visible, false, [50, 50, 50, 50]);
}
function toggleFenceVisible(fenceId, show) {
const overlay = fenceOverlays[fenceId];
if (overlay) { show ? overlay.show() : overlay.hide(); }
}
function toggleAllFencesVisible(show) {
Object.values(fenceOverlays).forEach(o => { if (o) show ? o.show() : o.hide(); });
// Update panel checkbox UI
document.querySelectorAll('.fence-vis-cb').forEach(cb => cb.checked = show);
}
function focusFenceOnMap(fenceId) {
const overlay = fenceOverlays[fenceId];
if (!overlay || !fenceMap) return;
overlay.show();
fenceMap.setFitView([overlay], false, [80, 80, 80, 80]);
selectedPanelFenceId = fenceId;
// Highlight in panel
document.querySelectorAll('#fencePanelList .panel-item').forEach(el => el.classList.toggle('active', el.dataset.fenceId == fenceId));
}
function renderFencePanel(fences) {
panelFences = fences;
const container = _initPanelRender(
PANEL_IDS.fences, fences, 'is_active', true, '暂无围栏',
(a, t) => `${a}/${t}`, (a, t) => `共 ${t} 个围栏，${a} 个启用`
);
if (!container) return;
container.innerHTML = fences.map(f => {
const isActive = f.id == selectedPanelFenceId;
const typeLabel = f.fence_type === 'circle' ? '圆形' : f.fence_type === 'polygon' ? '多边形' : '矩形';
return `< div class = "panel-item ${isActive ? 'active' : ''}" data-fence-id = "${f.id}" data-search-text = "${(f.name||'').toLowerCase()} ${(f.description||'').toLowerCase()}" onclick = "focusFenceOnMap(${f.id})" >
< div class = "panel-item-actions" style = "display:flex;gap:4px;align-items:center" >
< input type = "checkbox" class = "fence-vis-cb" $ { f . is_active ? ' checked ' : ' ' } onclick = "event.stopPropagation();toggleFenceVisible(${f.id},this.checked)" title = "显示/隐藏" style = "cursor:pointer" >
< button class = "panel-action-btn" onclick = "event.stopPropagation();showEditFenceModal(${f.id})" title = "编辑" > < i class = "fas fa-edit" > < / i > < / button >
< button class = "panel-action-btn" style = "color:#10b981" onclick = "event.stopPropagation();showFenceBindingsModal(${f.id},'${escapeHtml(f.name)}')" title = "绑定设备" > < i class = "fas fa-link" > < / i > < / button >
< / div >
< div class = "panel-item-header" >
< span style = "display:inline-block;width:10px;height:10px;border-radius:2px;background:${f.color};margin-right:4px" > < / span >
< span class = "panel-item-name" > ${escapeHtml(f.name)}< / span >
< / div >
< div class = "panel-item-sub" > ${typeLabel}${f.fence_type === 'circle' & & f.radius ? ' · ' + f.radius + 'm' : ''}< / div >
< div class = "panel-item-meta" >
< span > ${f.description ? escapeHtml(f.description.substring(0, 20)) : '-'}< / span >
< span style = "color:${f.is_active ? '#34d399' : '#6b7280'}" > ${f.is_active ? '启用' : '停用'}< / span >
< / div >
< / div > `;
}).join('');
}
async function searchFenceMapLocation() {
const query = document.getElementById('fenceMapSearchInput').value.trim();
if (!query) return;
try {
const res = await apiCall(`${API_BASE}/geocode/search?keyword=${encodeURIComponent(query)}`);
if (!res.results || !res.results.length) { showToast('未找到该地点', 'info'); return; }
const r = res.results[0];
const [lng, lat] = r.location.split(',').map(Number);
if (fenceSearchMarker) fenceMap.remove(fenceSearchMarker);
fenceSearchMarker = new AMap.Marker({ position: [lng, lat] });
fenceSearchMarker.setMap(fenceMap);
const iw = new AMap.InfoWindow({
content: `< div style = "color:#333;font-size:13px" > < b > ${escapeHtml(r.name)}< / b > < br > ${escapeHtml(r.address || '')}< / div > `,
offset: new AMap.Pixel(0, -30),
});
iw.open(fenceMap, [lng, lat]);
fenceMap.setZoomAndCenter(16, [lng, lat]);
} catch (err) {
showToast('搜索失败: ' + err.message, 'error');
}
}
async function loadFences() {
showLoading('fencesLoading');
try {
const data = await apiCall(`${API_BASE}/fences?page=1&page_size=100`);
const items = data.items || [];
renderFencesOnMap(items);
renderFencePanel(items);
document.getElementById('fencesTableBody').innerHTML = items.length === 0
? '< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 暂无围栏< / td > < / tr > '
: items.map(f => {
const typeLabel = f.fence_type === 'circle' ? '圆形' : f.fence_type === 'polygon' ? '多边形' : '矩形';
return `< tr style = "cursor:pointer" onclick = "focusFenceOnMap(${f.id})" >
< td > ${escapeHtml(f.name)}< / td >
< td > < span class = "badge" style = "background:${f.fence_type === 'circle' ? '#1e3a5f' : '#3b1f5f'};color:#93c5fd" > ${typeLabel}< / span > < / td >
< td > < span style = "display:inline-block;width:20px;height:20px;border-radius:4px;background:${f.color};vertical-align:middle;border:1px solid #555" > < / span > ${f.color}< / td >
< td > ${f.fence_type === 'circle' ? (f.radius ? f.radius + 'm' : '-') : (f.points ? JSON.parse(f.points).length + '个点' : '-')}< / td >
< td > ${f.description ? escapeHtml(f.description) : '-'}< / td >
< td > < span class = "badge ${f.is_active ? 'badge-online' : 'badge-offline'}" > ${f.is_active ? '启用' : '停用'}< / span > < / td >
< td > ${formatTime(f.updated_at || f.created_at)}< / td >
< td >
< button class = "btn btn-sm" onclick = "event.stopPropagation();showEditFenceModal(${f.id})" > < i class = "fas fa-edit" > < / i > < / button >
< button class = "btn btn-sm" style = "color:#10b981" onclick = "event.stopPropagation();showFenceBindingsModal(${f.id},'${escapeHtml(f.name)}')" title = "绑定设备" > < i class = "fas fa-link" > < / i > < / button >
< button class = "btn btn-sm" style = "color:#ef4444" onclick = "event.stopPropagation();deleteFence(${f.id},'${escapeHtml(f.name)}')" > < i class = "fas fa-trash" > < / i > < / button >
< / td >
< / tr > `;
}).join('');
} catch (err) {
document.getElementById('fencesTableBody').innerHTML = '< tr > < td colspan = "8" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
} finally {
hideLoading('fencesLoading');
}
}
function showAddFenceModal() {
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-draw-polygon mr-2 text-blue-400" > < / i > 添加围栏< / h3 >
< div class = "form-group" > < label > 围栏名称 < span class = "text-red-400" > *< / span > < / label > < input type = "text" id = "addFenceName" placeholder = "如: 办公区域 A" > < / div >
< div class = "form-group" > < label > 围栏类型< / label >
< select id = "addFenceType" onchange = "toggleFenceTypeFields('add')" >
< option value = "polygon" selected > 多边形< / option >
< option value = "circle" > 圆形< / option >
< / select >
< / div >
< div class = "form-group" > < label > 描述< / label > < input type = "text" id = "addFenceDesc" placeholder = "可选描述" > < / div >
< div class = "grid grid-cols-2 gap-3" >
< div class = "form-group" > < label > 边框颜色< / label > < input type = "color" id = "addFenceColor" value = "#3b82f6" style = "height:38px;padding:2px" > < / div >
< div class = "form-group" > < label > 填充透明度< / label > < input type = "number" id = "addFenceOpacity" value = "0.2" min = "0" max = "1" step = "0.1" > < / div >
< / div >
< div class = "form-group" > < label > < i class = "fas fa-search" > < / i > 搜索地点定位< / label >
< div style = "display:flex;gap:6px" >
< input type = "text" id = "addFenceSearchInput" placeholder = "输入地点名称搜索..." style = "flex:1" onkeydown = "if(event.key==='Enter')searchFenceModalLocation('add')" >
< button class = "btn btn-secondary" onclick = "searchFenceModalLocation('add')" style = "white-space:nowrap" > < i class = "fas fa-search" > < / i > 搜索< / button >
< / div >
< div id = "addFenceSearchResults" style = "max-height:120px;overflow-y:auto;margin-top:4px" > < / div >
< / div >
< div style = "background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px 12px;margin-bottom:12px" >
< p class = "text-xs text-yellow-300 mb-1" style = "font-weight:600" > < i class = "fas fa-mouse-pointer" > < / i > 绘图操作说明< / p >
< p class = "text-xs text-gray-300" id = "addFenceDrawGuide" > < b > 多边形< / b > ：鼠标< span style = "color:#60a5fa" > 左键点击< / span > 依次选择顶点，< span style = "color:#60a5fa" > 双击< / span > 或< span style = "color:#f87171" > 右键< / span > 结束绘制。重新绘制会替换上一个图形。< / p >
< / div >
< div id = "addFenceMapDiv" style = "height:350px;border-radius:8px;margin-bottom:12px;border:1px solid #374151;" > < / div >
< div id = "addFenceCircleFields" class = "grid grid-cols-3 gap-3" style = "display:none" >
< div class = "form-group" > < label > 纬度< / label > < input type = "text" id = "addFenceLat" placeholder = "自动" readonly > < / div >
< div class = "form-group" > < label > 经度< / label > < input type = "text" id = "addFenceLng" placeholder = "自动" readonly > < / div >
< div class = "form-group" > < label > 半径(米)< / label > < input type = "text" id = "addFenceRadius" placeholder = "自动" readonly > < / div >
< / div >
< div id = "addFencePolyFields" > < div class = "form-group" > < label > 顶点数据< / label > < textarea id = "addFencePoints" rows = "2" readonly placeholder = "在地图上绘制后自动生成" style = "font-size:12px" > < / textarea > < / div > < / div >
< div class = "flex gap-3 mt-4" >
< button class = "btn btn-primary flex-1" onclick = "saveFence()" > < i class = "fas fa-save" > < / i > 保存< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > 取消< / button >
< / div >
`);
setTimeout(() => initFenceDrawMap('addFenceMapDiv', 'add'), 200);
}
let _fenceDrawMap = null;
let _fenceDrawTool = null;
let _fenceDrawnOverlay = null;
let _fenceDrawMode = 'add'; // 'add' or 'edit'
function toggleFenceTypeFields(prefix) {
const type = document.getElementById(prefix + 'FenceType').value;
const circleEl = document.getElementById(prefix + 'FenceCircleFields');
const polyEl = document.getElementById(prefix + 'FencePolyFields');
if (circleEl) circleEl.style.display = type === 'circle' ? 'grid' : 'none';
if (polyEl) polyEl.style.display = type !== 'circle' ? 'block' : 'none';
// Update drawing guide text
const guideEl = document.getElementById(prefix + 'FenceDrawGuide');
if (guideEl) {
guideEl.innerHTML = type === 'circle'
? '< b > 圆形< / b > ：鼠标< span style = "color:#60a5fa" > 左键按住拖拽< / span > 绘制圆形区域，松开完成。重新绘制会替换上一个图形。'
: '< b > 多边形< / b > ：鼠标< span style = "color:#60a5fa" > 左键点击< / span > 依次选择顶点，< span style = "color:#60a5fa" > 双击< / span > 或< span style = "color:#f87171" > 右键< / span > 结束绘制。重新绘制会替换上一个图形。';
}
// Reset drawn overlay
if (_fenceDrawnOverlay) { _fenceDrawMap.remove(_fenceDrawnOverlay); _fenceDrawnOverlay = null; }
startFenceDraw(prefix);
}
function initFenceDrawMap(mapDivId, prefix) {
_fenceDrawMode = prefix;
const [mLat, mLng] = toMapCoord(30.605, 103.936);
_fenceDrawMap = new AMap.Map(mapDivId, {
zoom: 14, center: [mLng, mLat], mapStyle: 'amap://styles/normal',
});
startFenceDraw(prefix);
}
function startFenceDraw(prefix) {
if (_fenceDrawTool) _fenceDrawTool.close(false); // false = keep drawn overlays on map
_fenceDrawTool = new AMap.MouseTool(_fenceDrawMap);
const color = document.getElementById(prefix + 'FenceColor').value || '#3b82f6';
const opacity = parseFloat(document.getElementById(prefix + 'FenceOpacity').value) || 0.2;
const type = document.getElementById(prefix + 'FenceType').value;
const opts = { strokeColor: color, fillColor: color, fillOpacity: opacity, strokeWeight: 2 };
if (type === 'circle') {
_fenceDrawTool.circle(opts);
} else {
_fenceDrawTool.polygon(opts);
}
_fenceDrawTool.on('draw', (e) => {
// Remove previous drawn overlay, keep the new one
if (_fenceDrawnOverlay) _fenceDrawMap.remove(_fenceDrawnOverlay);
_fenceDrawnOverlay = e.obj;
if (type === 'circle') {
const center = e.obj.getCenter();
const [wLat, wLng] = gcj02ToWgs84(center.getLat(), center.getLng());
document.getElementById(prefix + 'FenceLat').value = wLat.toFixed(6);
document.getElementById(prefix + 'FenceLng').value = wLng.toFixed(6);
document.getElementById(prefix + 'FenceRadius').value = Math.round(e.obj.getRadius());
} else {
const path = e.obj.getPath();
const wgsPoints = path.map(p => {
const [wLat, wLng] = gcj02ToWgs84(p.getLat(), p.getLng());
return [parseFloat(wLng.toFixed(6)), parseFloat(wLat.toFixed(6))];
});
document.getElementById(prefix + 'FencePoints').value = JSON.stringify(wgsPoints);
}
// Allow redraw (new tool, keeps current overlay visible)
setTimeout(() => startFenceDraw(prefix), 100);
});
}
function destroyFenceDrawMap() {
if (_fenceDrawTool) { _fenceDrawTool.close(false); _fenceDrawTool = null; }
if (_fenceModalSearchMarker) { _fenceModalSearchMarker = null; }
if (_fenceDrawMap) { _fenceDrawMap.destroy(); _fenceDrawMap = null; }
_fenceDrawnOverlay = null;
}
let _fenceModalSearchMarker = null;
async function searchFenceModalLocation(prefix) {
const input = document.getElementById(prefix + 'FenceSearchInput');
const resultsDiv = document.getElementById(prefix + 'FenceSearchResults');
if (!input || !resultsDiv) return;
const query = input.value.trim();
if (!query) { resultsDiv.innerHTML = ''; return; }
try {
const res = await apiCall(`${API_BASE}/geocode/search?keyword=${encodeURIComponent(query)}`);
if (!res.results || !res.results.length) { resultsDiv.innerHTML = '< div style = "padding:6px;color:#9ca3af;font-size:12px" > 未找到结果< / div > '; return; }
resultsDiv.innerHTML = res.results.map((r, i) => {
const [lng, lat] = r.location.split(',');
return `< div class = "beacon-search-item" style = "padding:6px 8px;cursor:pointer;border-bottom:1px solid #374151;font-size:12px;color:#d1d5db" onclick = "selectFenceModalSearchResult('${prefix}', ${lng}, ${lat}, '${escapeHtml(r.name)}')" >
< i class = "fas fa-map-marker-alt text-blue-400 mr-1" > < / i > < b > ${escapeHtml(r.name)}< / b >
< span style = "color:#6b7280;margin-left:6px" > ${escapeHtml(r.address || '')}< / span >
< / div > `;
}).join('');
} catch (err) {
resultsDiv.innerHTML = `< div style = "padding:6px;color:#f87171;font-size:12px" > 搜索失败: ${err.message}< / div > `;
}
}
function selectFenceModalSearchResult(prefix, lng, lat, name) {
if (!_fenceDrawMap) return;
// Clear search results
const resultsDiv = document.getElementById(prefix + 'FenceSearchResults');
if (resultsDiv) resultsDiv.innerHTML = '';
// Move map to location
if (_fenceModalSearchMarker) _fenceDrawMap.remove(_fenceModalSearchMarker);
_fenceModalSearchMarker = new AMap.Marker({ position: [lng, lat] });
_fenceModalSearchMarker.setMap(_fenceDrawMap);
const iw = new AMap.InfoWindow({
content: `< div style = "color:#333;font-size:13px" > < b > ${name}< / b > < / div > `,
offset: new AMap.Pixel(0, -30),
});
iw.open(_fenceDrawMap, [lng, lat]);
_fenceDrawMap.setZoomAndCenter(16, [lng, lat]);
}
async function saveFence() {
const prefix = _fenceDrawMode;
const name = document.getElementById(prefix + 'FenceName').value.trim();
if (!name) { showToast('请输入围栏名称', 'error'); return; }
const fenceType = document.getElementById(prefix + 'FenceType').value;
const color = document.getElementById(prefix + 'FenceColor').value;
const opacity = parseFloat(document.getElementById(prefix + 'FenceOpacity').value) || 0.2;
const desc = document.getElementById(prefix + 'FenceDesc').value.trim();
const body = { name, fence_type: fenceType, color, fill_color: color, fill_opacity: opacity, description: desc || null, is_active: true };
if (fenceType === 'circle') {
const lat = parseFloat(document.getElementById(prefix + 'FenceLat').value);
const lng = parseFloat(document.getElementById(prefix + 'FenceLng').value);
const radius = parseFloat(document.getElementById(prefix + 'FenceRadius').value);
if (isNaN(lat) || isNaN(lng) || isNaN(radius)) { showToast('请在地图上画一个圆形围栏', 'error'); return; }
body.center_lat = lat; body.center_lng = lng; body.radius = radius;
} else {
const points = document.getElementById(prefix + 'FencePoints').value;
if (!points) { showToast('请在地图上画一个多边形围栏', 'error'); return; }
body.points = points;
// Calculate centroid for display
try {
const pts = JSON.parse(points);
body.center_lng = pts.reduce((s, p) => s + p[0], 0) / pts.length;
body.center_lat = pts.reduce((s, p) => s + p[1], 0) / pts.length;
} catch (_) {}
}
try {
if (prefix === 'edit') {
const id = document.getElementById('editFenceId').value;
await apiCall(`${API_BASE}/fences/${id}`, { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) });
showToast('围栏已更新');
} else {
await apiCall(`${API_BASE}/fences`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) });
showToast('围栏已创建');
}
destroyFenceDrawMap();
closeModal();
loadFences();
} catch (err) {
showToast('保存失败: ' + err.message, 'error');
}
}
async function showEditFenceModal(id) {
try {
const f = await apiCall(`${API_BASE}/fences/${id}`);
const isCircle = f.fence_type === 'circle';
const guideText = isCircle
? '< b > 圆形< / b > ：鼠标< span style = "color:#60a5fa" > 左键按住拖拽< / span > 绘制圆形区域，松开完成。重新绘制会替换上一个图形。'
: '< b > 多边形< / b > ：鼠标< span style = "color:#60a5fa" > 左键点击< / span > 依次选择顶点，< span style = "color:#60a5fa" > 双击< / span > 或< span style = "color:#f87171" > 右键< / span > 结束绘制。重新绘制会替换上一个图形。';
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-edit mr-2 text-blue-400" > < / i > 编辑围栏< / h3 >
< input type = "hidden" id = "editFenceId" value = "${f.id}" >
< div class = "form-group" > < label > 围栏名称 < span class = "text-red-400" > *< / span > < / label > < input type = "text" id = "editFenceName" value = "${escapeHtml(f.name)}" > < / div >
< div class = "form-group" > < label > 围栏类型< / label >
< select id = "editFenceType" onchange = "toggleFenceTypeFields('edit')" >
< option value = "polygon" $ { f . fence_type = == ' polygon ' ? ' selected ' : ' ' } > 多边形< / option >
< option value = "circle" $ { isCircle ? ' selected ' : ' ' } > 圆形< / option >
< / select >
< / div >
< div class = "form-group" > < label > 描述< / label > < input type = "text" id = "editFenceDesc" value = "${f.description ? escapeHtml(f.description) : ''}" > < / div >
< div class = "grid grid-cols-2 gap-3" >
< div class = "form-group" > < label > 边框颜色< / label > < input type = "color" id = "editFenceColor" value = "${f.color || '#3b82f6'}" style = "height:38px;padding:2px" > < / div >
< div class = "form-group" > < label > 填充透明度< / label > < input type = "number" id = "editFenceOpacity" value = "${f.fill_opacity || 0.2}" min = "0" max = "1" step = "0.1" > < / div >
< / div >
< div class = "form-group" > < label > < i class = "fas fa-search" > < / i > 搜索地点定位< / label >
< div style = "display:flex;gap:6px" >
< input type = "text" id = "editFenceSearchInput" placeholder = "输入地点名称搜索..." style = "flex:1" onkeydown = "if(event.key==='Enter')searchFenceModalLocation('edit')" >
< button class = "btn btn-secondary" onclick = "searchFenceModalLocation('edit')" style = "white-space:nowrap" > < i class = "fas fa-search" > < / i > 搜索< / button >
< / div >
< div id = "editFenceSearchResults" style = "max-height:120px;overflow-y:auto;margin-top:4px" > < / div >
< / div >
< div style = "background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px 12px;margin-bottom:12px" >
< p class = "text-xs text-yellow-300 mb-1" style = "font-weight:600" > < i class = "fas fa-mouse-pointer" > < / i > 绘图操作说明< / p >
< p class = "text-xs text-gray-300" id = "editFenceDrawGuide" > ${guideText}< / p >
< / div >
< div id = "editFenceMapDiv" style = "height:350px;border-radius:8px;margin-bottom:12px;border:1px solid #374151;" > < / div >
< div id = "editFenceCircleFields" class = "grid grid-cols-3 gap-3" $ { ! isCircle ? ' style = "display:none" ' : ' ' } >
< div class = "form-group" > < label > 纬度< / label > < input type = "text" id = "editFenceLat" value = "${f.center_lat || ''}" readonly > < / div >
< div class = "form-group" > < label > 经度< / label > < input type = "text" id = "editFenceLng" value = "${f.center_lng || ''}" readonly > < / div >
< div class = "form-group" > < label > 半径(米)< / label > < input type = "text" id = "editFenceRadius" value = "${f.radius || ''}" readonly > < / div >
< / div >
< div id = "editFencePolyFields" $ { isCircle ? ' style = "display:none" ' : ' ' } > < div class = "form-group" > < label > 顶点数据< / label > < textarea id = "editFencePoints" rows = "2" readonly style = "font-size:12px" > ${f.points || ''}< / textarea > < / div > < / div >
< div class = "flex gap-3 mt-4" >
< button class = "btn btn-primary flex-1" onclick = "saveFence()" > < i class = "fas fa-save" > < / i > 保存< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > 取消< / button >
< / div >
`);
setTimeout(() => {
initFenceDrawMap('editFenceMapDiv', 'edit');
// Render existing fence on edit map
if (f.fence_type === 'circle' & & f.center_lat & & f.center_lng & & f.radius) {
const [mLat, mLng] = toMapCoord(f.center_lat, f.center_lng);
const circle = new AMap.Circle({ center: [mLng, mLat], radius: f.radius, strokeColor: f.color, fillColor: f.color, fillOpacity: f.fill_opacity || 0.2, strokeWeight: 2 });
circle.setMap(_fenceDrawMap);
_fenceDrawMap.setFitView([circle]);
} else if (f.points) {
try {
const pts = JSON.parse(f.points).map(p => { const [mLat, mLng] = toMapCoord(p[1], p[0]); return [mLng, mLat]; });
const poly = new AMap.Polygon({ path: pts, strokeColor: f.color, fillColor: f.color, fillOpacity: f.fill_opacity || 0.2, strokeWeight: 2 });
poly.setMap(_fenceDrawMap);
_fenceDrawMap.setFitView([poly]);
} catch (_) {}
}
}, 200);
} catch (err) {
showToast('加载围栏失败: ' + err.message, 'error');
}
}
async function deleteFence(id, name) {
if (!confirm(`确定删除围栏 "${name}" ?`)) return;
try {
await apiCall(`${API_BASE}/fences/${id}`, { method: 'DELETE' });
showToast('围栏已删除');
loadFences();
} catch (err) {
showToast('删除失败: ' + err.message, 'error');
}
}
// ==================== FENCE DEVICE BINDING ====================
async function showFenceBindingsModal(fenceId, fenceName) {
let boundDevices = [];
try {
boundDevices = await apiCall(`${API_BASE}/fences/${fenceId}/devices`);
} catch (err) {
showToast('加载绑定设备失败: ' + err.message, 'error');
return;
}
const boundHtml = boundDevices.length === 0
? '< p class = "text-gray-500 text-center py-4" > 暂无绑定设备< / p > '
: `< table style = "width:100%;font-size:13px" > < thead > < tr >
< th > 设备< / th > < th > IMEI< / th > < th > 状态< / th > < th > 最后检测< / th > < th > 操作< / th >
< / tr > < / thead > < tbody > ${boundDevices.map(d => `< tr >
< td > ${escapeHtml(d.device_name || '-')}< / td >
< td class = "font-mono text-xs" > ${escapeHtml(d.imei || '-')}< / td >
< td > < span class = "badge ${d.is_inside ? 'badge-online' : 'badge-offline'}" > ${d.is_inside ? '围栏内' : '围栏外'}< / span > < / td >
< td class = "text-xs text-gray-400" > ${d.last_check_at ? formatTime(d.last_check_at) : '-'}< / td >
< td > < button class = "btn btn-sm" style = "color:#ef4444;font-size:11px" onclick = "unbindDeviceFromFence(${fenceId},${d.device_id},'${escapeHtml(d.device_name||d.imei||" " ) } ' ) " > < i class = "fas fa-unlink" > < / i > < / button > < / td >
< / tr > `).join('')}< / tbody > < / table > `;
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-link mr-2 text-blue-400" > < / i > 围栏绑定设备 — ${escapeHtml(fenceName)}< / h3 >
< input type = "hidden" id = "bindFenceId" value = "${fenceId}" >
< div class = "mb-4" >
< label class = "block text-sm text-gray-400 mb-1" > 当前绑定设备< / label >
< div id = "fenceBindingsBody" style = "max-height:250px;overflow-y:auto;border:1px solid #374151;border-radius:8px;padding:8px" > ${boundHtml}< / div >
< / div >
< hr style = "border-color:#374151;margin:16px 0" >
< div class = "form-group" >
< label > < i class = "fas fa-plus-circle text-green-400" > < / i > 添加绑定设备< / label >
< div id = "fenceBindDeviceSelector" style = "max-height:200px;overflow-y:auto;border:1px solid #374151;border-radius:8px;padding:8px" >
< p class = "text-gray-500 text-center py-2" > 加载设备列表...< / p >
< / div >
< / div >
< div class = "flex gap-3 mt-4" >
< button class = "btn btn-primary flex-1" onclick = "confirmBindDevices()" > < i class = "fas fa-link" > < / i > 确认绑定选中设备< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > 关闭< / button >
< / div >
`);
// Load all devices for binding selector
try {
const devData = await apiCall(`${API_BASE}/devices?page=1&page_size=100`);
const allDevices = devData.items || [];
const boundIds = new Set(boundDevices.map(d => d.device_id));
const unbound = allDevices.filter(d => !boundIds.has(d.id));
const selector = document.getElementById('fenceBindDeviceSelector');
if (unbound.length === 0) {
selector.innerHTML = '< p class = "text-gray-500 text-center py-2" > 所有设备已绑定< / p > ';
} else {
selector.innerHTML = unbound.map(d => `
< label style = "display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer" >
< input type = "checkbox" class = "fence-bind-cb" value = "${d.id}" >
< span > ${escapeHtml(d.name || '-')}< / span >
< span class = "font-mono text-xs text-gray-400" > ${escapeHtml(d.imei)}< / span >
< / label >
`).join('');
}
} catch (err) {
document.getElementById('fenceBindDeviceSelector').innerHTML = '< p class = "text-red-400 text-center py-2" > 加载设备失败< / p > ';
}
}
async function confirmBindDevices() {
const fenceId = document.getElementById('bindFenceId').value;
const checkboxes = document.querySelectorAll('.fence-bind-cb:checked');
if (checkboxes.length === 0) { showToast('请选择要绑定的设备', 'info'); return; }
const deviceIds = Array.from(checkboxes).map(cb => parseInt(cb.value));
try {
const result = await apiCall(`${API_BASE}/fences/${fenceId}/devices`, {
method: 'POST',
body: JSON.stringify({ device_ids: deviceIds }),
});
showToast(`绑定成功: 新增${result.created || 0}个`);
closeModal();
} catch (err) {
showToast('绑定失败: ' + err.message, 'error');
}
}
async function unbindDeviceFromFence(fenceId, deviceId, deviceName) {
if (!confirm(`确定解绑设备 "${deviceName}" ?`)) return;
try {
await apiCall(`${API_BASE}/fences/${fenceId}/devices`, {
method: 'DELETE',
body: JSON.stringify({ device_ids: [deviceId] }),
});
showToast('已解绑');
// Refresh the modal
const fence = panelFences.find(f => f.id == fenceId);
showFenceBindingsModal(fenceId, fence ? fence.name : '');
} catch (err) {
showToast('解绑失败: ' + err.message, 'error');
}
}
2026-03-30 04:26:29 +00:00
// ---- Fence Tab switching & binding tab ----
function switchFenceTab(tab) {
document.getElementById('fenceTabList').classList.toggle('active', tab === 'list');
document.getElementById('fenceTabBindings').classList.toggle('active', tab === 'bindings');
document.getElementById('fenceTabContentList').style.display = tab === 'list' ? '' : 'none';
document.getElementById('fenceTabContentBindings').style.display = tab === 'bindings' ? '' : 'none';
if (tab === 'bindings') initFenceBindingTab();
}
async function initFenceBindingTab() {
const sel = document.getElementById('fenceBindSelect');
if (sel.options.length < = 1) {
// Populate fence dropdown
try {
const data = await apiCall(`${API_BASE}/fences?page=1&page_size=100`);
const items = data.items || [];
sel.innerHTML = '< option value = "" > 选择围栏...< / option > ' + items.map(f =>
`< option value = "${f.id}" > ${escapeHtml(f.name)} (${f.fence_type === 'circle' ? '圆形' : '多边形'})< / option > `
).join('');
} catch (_) {}
}
// Populate device add dropdown
const devSel = document.getElementById('fenceBindDeviceAdd');
if (devSel.options.length < = 1) {
try {
const devData = await apiCall(`${API_BASE}/devices?page=1&page_size=100`);
const allDevices = devData.items || [];
devSel.innerHTML = '< option value = "" > 选择设备添加绑定...< / option > ' + allDevices.map(d =>
`< option value = "${d.id}" > ${escapeHtml(d.name || d.imei)} (${d.imei})< / option > `
).join('');
} catch (_) {}
}
}
async function loadFenceBindingTab() {
const fenceId = document.getElementById('fenceBindSelect').value;
const tbody = document.getElementById('fenceBindTableBody');
if (!fenceId) {
tbody.innerHTML = '< tr > < td colspan = "5" class = "text-center text-gray-500 py-4" > 请选择围栏< / td > < / tr > ';
return;
}
try {
const devices = await apiCall(`${API_BASE}/fences/${fenceId}/devices`);
if (devices.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "5" class = "text-center text-gray-500 py-4" > 暂无绑定设备，请从上方添加< / td > < / tr > ';
} else {
tbody.innerHTML = devices.map(d => `< tr >
< td > ${escapeHtml(d.device_name || '-')}< / td >
< td class = "font-mono text-xs" > ${escapeHtml(d.imei || '-')}< / td >
< td > < span class = "badge ${d.is_inside ? 'badge-online' : 'badge-offline'}" > ${d.is_inside ? '围栏内' : '围栏外'}< / span > < / td >
< td class = "text-xs text-gray-400" > ${d.last_check_at ? formatTime(d.last_check_at) : '-'}< / td >
< td > < button class = "btn btn-sm" style = "color:#ef4444;font-size:11px" onclick = "quickUnbindDevice(${fenceId},${d.device_id},'${escapeHtml(d.device_name||d.imei||" " ) } ' ) " > < i class = "fas fa-unlink" > < / i > 解绑< / button > < / td >
< / tr > `).join('');
}
} catch (err) {
tbody.innerHTML = '< tr > < td colspan = "5" class = "text-center text-red-400 py-4" > 加载失败< / td > < / tr > ';
}
}
async function quickBindDevice() {
const fenceId = document.getElementById('fenceBindSelect').value;
const deviceId = document.getElementById('fenceBindDeviceAdd').value;
if (!fenceId) { showToast('请先选择围栏', 'info'); return; }
if (!deviceId) { showToast('请选择要绑定的设备', 'info'); return; }
try {
await apiCall(`${API_BASE}/fences/${fenceId}/devices`, {
method: 'POST',
body: JSON.stringify({ device_ids: [parseInt(deviceId)] }),
});
showToast('绑定成功');
loadFenceBindingTab();
} catch (err) {
showToast('绑定失败: ' + err.message, 'error');
}
}
async function quickUnbindDevice(fenceId, deviceId, name) {
if (!confirm(`确定解绑设备 "${name}" ?`)) return;
try {
await apiCall(`${API_BASE}/fences/${fenceId}/devices`, {
method: 'DELETE',
body: JSON.stringify({ device_ids: [deviceId] }),
});
showToast('已解绑');
loadFenceBindingTab();
} catch (err) {
showToast('解绑失败: ' + err.message, 'error');
}
}
2026-03-27 10:19:34 +00:00
// ---- Beacon map picker ----
let _beaconPickerMap = null;
let _beaconPickerMarker = null;
let _beaconSearchTimeout = null;
function initBeaconPickerMap(mapDivId, latInputId, lonInputId, addrInputId, initLat, initLon) {
setTimeout(() => {
const defaultCenter = [30.605, 103.936];
const hasInit = initLat & & initLon;
const wgsCenter = hasInit ? [initLat, initLon] : defaultCenter;
const [mLat, mLng] = toMapCoord(wgsCenter[0], wgsCenter[1]);
const zoom = hasInit ? 16 : 12;
2026-03-27 13:04:11 +00:00
_beaconPickerMap = new AMap.Map(mapDivId, {
zoom: zoom,
center: [mLng, mLat],
mapStyle: 'amap://styles/normal',
});
2026-03-27 10:19:34 +00:00
if (hasInit) {
2026-03-27 13:04:11 +00:00
_beaconPickerMarker = new AMap.Marker({ position: [mLng, mLat] });
_beaconPickerMarker.setMap(_beaconPickerMap);
2026-03-27 10:19:34 +00:00
}
_beaconPickerMap.on('click', async (e) => {
2026-03-27 13:04:11 +00:00
const gcjLng = e.lnglat.getLng(), gcjLat = e.lnglat.getLat();
2026-03-27 10:19:34 +00:00
const [wgsLat, wgsLng] = gcj02ToWgs84(gcjLat, gcjLng);
document.getElementById(latInputId).value = wgsLat.toFixed(6);
document.getElementById(lonInputId).value = wgsLng.toFixed(6);
2026-03-27 13:04:11 +00:00
if (_beaconPickerMarker) _beaconPickerMarker.setPosition([gcjLng, gcjLat]);
else { _beaconPickerMarker = new AMap.Marker({ position: [gcjLng, gcjLat] }); _beaconPickerMarker.setMap(_beaconPickerMap); }
2026-03-27 10:19:34 +00:00
try {
const res = await apiCall(`${API_BASE}/geocode/reverse?lat=${wgsLat.toFixed(6)}&lon=${wgsLng.toFixed(6)}`);
if (res.address) document.getElementById(addrInputId).value = res.address;
} catch (_) {}
});
const syncMarker = () => {
const lat = parseFloat(document.getElementById(latInputId).value);
const lon = parseFloat(document.getElementById(lonInputId).value);
if (!isNaN(lat) & & !isNaN(lon) & & lat >= -90 & & lat < = 90 & & lon >= -180 & & lon < = 180) {
const [mLat, mLng] = toMapCoord(lat, lon);
2026-03-27 13:04:11 +00:00
if (_beaconPickerMarker) _beaconPickerMarker.setPosition([mLng, mLat]);
else { _beaconPickerMarker = new AMap.Marker({ position: [mLng, mLat] }); _beaconPickerMarker.setMap(_beaconPickerMap); }
_beaconPickerMap.setZoomAndCenter(16, [mLng, mLat]);
2026-03-27 10:19:34 +00:00
}
};
document.getElementById(latInputId).addEventListener('change', syncMarker);
document.getElementById(lonInputId).addEventListener('change', syncMarker);
}, 150);
}
async function searchBeaconLocation(query, resultsId, latInputId, lonInputId, addrInputId) {
if (_beaconSearchTimeout) clearTimeout(_beaconSearchTimeout);
const container = document.getElementById(resultsId);
if (!query || query.length < 2 ) { container . innerHTML = '' ; return ; }
_beaconSearchTimeout = setTimeout(async () => {
try {
const res = await apiCall(`${API_BASE}/geocode/search?keyword=${encodeURIComponent(query)}`);
if (!res.results || !res.results.length) {
container.innerHTML = '< div style = "color:#9ca3af;font-size:12px;padding:8px;" > 无搜索结果< / div > ';
return;
}
container.innerHTML = res.results.map(r => {
const [lng, lat] = r.location.split(',').map(Number);
return `< div class = "beacon-search-item" onclick = "selectBeaconSearchResult(${lat},${lng},'${latInputId}','${lonInputId}','${addrInputId}','${resultsId}')" style = "padding:6px 8px;cursor:pointer;border-bottom:1px solid #374151;font-size:13px;" >
< div style = "color:#93c5fd;" > ${escapeHtml(r.name)}< / div >
< div style = "color:#9ca3af;font-size:11px;" > ${escapeHtml(r.address || '')}< / div >
< / div > `;
}).join('');
} catch (_) { container.innerHTML = ''; }
}, 400);
}
function selectBeaconSearchResult(gcjLat, gcjLng, latInputId, lonInputId, addrInputId, resultsId) {
const [wgsLat, wgsLng] = gcj02ToWgs84(gcjLat, gcjLng);
document.getElementById(latInputId).value = wgsLat.toFixed(6);
document.getElementById(lonInputId).value = wgsLng.toFixed(6);
document.getElementById(resultsId).innerHTML = '';
if (_beaconPickerMap) {
2026-03-27 13:04:11 +00:00
if (_beaconPickerMarker) _beaconPickerMarker.setPosition([gcjLng, gcjLat]);
else { _beaconPickerMarker = new AMap.Marker({ position: [gcjLng, gcjLat] }); _beaconPickerMarker.setMap(_beaconPickerMap); }
_beaconPickerMap.setZoomAndCenter(16, [gcjLng, gcjLat]);
2026-03-27 10:19:34 +00:00
}
apiCall(`${API_BASE}/geocode/reverse?lat=${wgsLat.toFixed(6)}& lon=${wgsLng.toFixed(6)}`)
.then(res => { if (res.address) document.getElementById(addrInputId).value = res.address; })
.catch(() => {});
}
function destroyBeaconPickerMap() {
2026-03-27 13:04:11 +00:00
if (_beaconPickerMap) { _beaconPickerMap.destroy(); _beaconPickerMap = null; }
2026-03-27 10:19:34 +00:00
_beaconPickerMarker = null;
}
function showAddBeaconModal() {
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-broadcast-tower mr-2 text-blue-400" > < / i > 添加蓝牙信标< / h3 >
< div class = "form-group" > < label > MAC 地址 < span class = "text-red-400" > *< / span > < / label > < input type = "text" id = "addBeaconMac" placeholder = "AA:BB:CC:DD:EE:FF" maxlength = "20" > < p class = "text-xs text-gray-500 mt-1" > 信标的蓝牙 MAC 地址，冒号分隔大写十六进制< / p > < / div >
< div class = "form-group" > < label > 名称 < span class = "text-red-400" > *< / span > < / label > < input type = "text" id = "addBeaconName" placeholder = "如: 前台大门 / A区3楼走廊" > < p class = "text-xs text-gray-500 mt-1" > 信标安装位置的描述性名称< / p > < / div >
< div class = "form-group" > < label > UUID< / label > < input type = "text" id = "addBeaconUuid" placeholder = "iBeacon UUID (可选)" maxlength = "36" > < p class = "text-xs text-gray-500 mt-1" > iBeacon 协议的 UUID 标识符，用于匹配设备上报的信标数据< / p > < / div >
< div class = "grid grid-cols-2 gap-3" >
< div class = "form-group" > < label > Major< / label > < input type = "number" id = "addBeaconMajor" placeholder = "0-65535" min = "0" max = "65535" > < p class = "text-xs text-gray-500 mt-1" > iBeacon Major 值，区分信标组< / p > < / div >
< div class = "form-group" > < label > Minor< / label > < input type = "number" id = "addBeaconMinor" placeholder = "0-65535" min = "0" max = "65535" > < p class = "text-xs text-gray-500 mt-1" > iBeacon Minor 值，区分组内信标< / p > < / div >
< / div >
< p style = "font-size:11px;color:#f59e0b;margin:8px 0 4px;" > < i class = "fas fa-map-marker-alt mr-1" > < / i > 位置信息 — 设置后蓝牙打卡/定位记录将自动关联此坐标< / p >
< div class = "form-group" > < label > < i class = "fas fa-search mr-1" > < / i > 搜索位置< / label >
< input type = "text" id = "addBeaconSearch" placeholder = "输入地址或地点名称搜索..." oninput = "searchBeaconLocation(this.value,'addBeaconSearchResults','addBeaconLat','addBeaconLon','addBeaconAddress')" >
< div id = "addBeaconSearchResults" style = "max-height:120px;overflow-y:auto;background:#111827;border-radius:6px;margin-top:4px;" > < / div >
< / div >
< div id = "addBeaconMapDiv" style = "height:220px;border-radius:8px;margin-bottom:8px;border:1px solid #374151;" > < / div >
< p style = "font-size:11px;color:#9ca3af;margin:-4px 0 12px;" > < i class = "fas fa-mouse-pointer mr-1" > < / i > 点击地图选择位置，或手动输入坐标< / p >
< div class = "grid grid-cols-2 gap-3" >
< div class = "form-group" > < label > 纬度< / label > < input type = "number" id = "addBeaconLat" step = "0.000001" placeholder = "如: 30.12345" > < / div >
< div class = "form-group" > < label > 经度< / label > < input type = "number" id = "addBeaconLon" step = "0.000001" placeholder = "如: 120.12345" > < / div >
< / div >
< div class = "form-group" > < label > 详细地址< / label > < input type = "text" id = "addBeaconAddress" placeholder = "点击地图或搜索自动填充" > < p class = "text-xs text-gray-500 mt-1" > 点击地图或搜索位置后自动填充< / p > < / div >
< div class = "flex gap-3 mt-6" >
< button class = "btn btn-primary flex-1" onclick = "submitAddBeacon()" > < i class = "fas fa-check" > < / i > 确认添加< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 取消< / button >
< / div >
`);
initBeaconPickerMap('addBeaconMapDiv', 'addBeaconLat', 'addBeaconLon', 'addBeaconAddress', null, null);
}
async function submitAddBeacon() {
const mac = document.getElementById('addBeaconMac').value.trim().toUpperCase();
const name = document.getElementById('addBeaconName').value.trim();
if (!mac) { showToast('请输入 MAC 地址', 'error'); return; }
if (!name) { showToast('请输入信标名称', 'error'); return; }
if (!/^([0-9A-F]{2}:){5}[0-9A-F]{2}$/.test(mac)) { showToast('MAC 地址格式错误，应为 AA:BB:CC:DD:EE:FF', 'error'); return; }
const body = { beacon_mac: mac, name };
const uuid = document.getElementById('addBeaconUuid').value.trim();
const major = document.getElementById('addBeaconMajor').value;
const minor = document.getElementById('addBeaconMinor').value;
const lat = document.getElementById('addBeaconLat').value;
const lon = document.getElementById('addBeaconLon').value;
const address = document.getElementById('addBeaconAddress').value.trim();
if (uuid) body.beacon_uuid = uuid;
if (major !== '') body.beacon_major = parseInt(major);
if (minor !== '') body.beacon_minor = parseInt(minor);
if (lat !== '') body.latitude = parseFloat(lat);
if (lon !== '') body.longitude = parseFloat(lon);
if (address) body.address = address;
try {
await apiCall(`${API_BASE}/beacons`, { method: 'POST', body: JSON.stringify(body) });
showToast('信标添加成功');
closeModal();
loadBeacons();
} catch (err) {
showToast('添加失败: ' + err.message, 'error');
}
}
async function showEditBeaconModal(id) {
try {
const b = await apiCall(`${API_BASE}/beacons/${id}`);
showModal(`
< h3 class = "text-lg font-semibold mb-4" > < i class = "fas fa-edit mr-2 text-yellow-400" > < / i > 编辑信标< / h3 >
< div class = "form-group" > < label > MAC 地址< / label > < input type = "text" value = "${escapeHtml(b.beacon_mac)}" disabled style = "opacity:0.5" > < p class = "text-xs text-gray-500 mt-1" > MAC 地址不可修改，设备通过此地址匹配信标< / p > < / div >
< div class = "form-group" > < label > 名称 < span class = "text-red-400" > *< / span > < / label > < input type = "text" id = "editBeaconName" value = "${escapeHtml(b.name || '')}" > < p class = "text-xs text-gray-500 mt-1" > 信标安装位置的描述性名称< / p > < / div >
< div class = "form-group" > < label > UUID< / label > < input type = "text" id = "editBeaconUuid" value = "${escapeHtml(b.beacon_uuid || '')}" maxlength = "36" > < p class = "text-xs text-gray-500 mt-1" > iBeacon 协议的 UUID 标识符，用于匹配设备上报的信标数据< / p > < / div >
< div class = "grid grid-cols-2 gap-3" >
< div class = "form-group" > < label > Major< / label > < input type = "number" id = "editBeaconMajor" value = "${b.beacon_major != null ? b.beacon_major : ''}" min = "0" max = "65535" > < p class = "text-xs text-gray-500 mt-1" > iBeacon Major 值，区分信标组< / p > < / div >
< div class = "form-group" > < label > Minor< / label > < input type = "number" id = "editBeaconMinor" value = "${b.beacon_minor != null ? b.beacon_minor : ''}" min = "0" max = "65535" > < p class = "text-xs text-gray-500 mt-1" > iBeacon Minor 值，区分组内信标< / p > < / div >
< / div >
< p style = "font-size:11px;color:#f59e0b;margin:8px 0 4px;" > < i class = "fas fa-map-marker-alt mr-1" > < / i > 位置信息 — 设置后蓝牙打卡/定位记录将自动关联此坐标< / p >
< div class = "form-group" > < label > < i class = "fas fa-search mr-1" > < / i > 搜索位置< / label >
< input type = "text" id = "editBeaconSearch" placeholder = "输入地址或地点名称搜索..." oninput = "searchBeaconLocation(this.value,'editBeaconSearchResults','editBeaconLat','editBeaconLon','editBeaconAddress')" >
< div id = "editBeaconSearchResults" style = "max-height:120px;overflow-y:auto;background:#111827;border-radius:6px;margin-top:4px;" > < / div >
< / div >
< div id = "editBeaconMapDiv" style = "height:220px;border-radius:8px;margin-bottom:8px;border:1px solid #374151;" > < / div >
< p style = "font-size:11px;color:#9ca3af;margin:-4px 0 12px;" > < i class = "fas fa-mouse-pointer mr-1" > < / i > 点击地图选择位置，或手动输入坐标< / p >
< div class = "grid grid-cols-2 gap-3" >
< div class = "form-group" > < label > 纬度< / label > < input type = "number" id = "editBeaconLat" step = "0.000001" value = "${b.latitude != null ? b.latitude : ''}" > < / div >
< div class = "form-group" > < label > 经度< / label > < input type = "number" id = "editBeaconLon" step = "0.000001" value = "${b.longitude != null ? b.longitude : ''}" > < / div >
< / div >
< div class = "form-group" > < label > 详细地址< / label > < input type = "text" id = "editBeaconAddress" value = "${escapeHtml(b.address || '')}" > < p class = "text-xs text-gray-500 mt-1" > 点击地图或搜索位置后自动填充< / p > < / div >
< div class = "form-group" > < label > 状态< / label >
< select id = "editBeaconStatus" >
< option value = "active" $ { b . status = == ' active ' ? ' selected ' : ' ' } > 启用< / option >
< option value = "inactive" $ { b . status ! = = ' active ' ? ' selected ' : ' ' } > 停用< / option >
< / select >
< p class = "text-xs text-gray-500 mt-1" > 停用后蓝牙记录将不再关联此信标位置< / p >
< / div >
< div class = "flex gap-3 mt-6" >
< button class = "btn btn-primary flex-1" onclick = "submitEditBeacon(${id})" > < i class = "fas fa-check" > < / i > 保存< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 取消< / button >
< / div >
`);
initBeaconPickerMap('editBeaconMapDiv', 'editBeaconLat', 'editBeaconLon', 'editBeaconAddress',
b.latitude || null, b.longitude || null);
} catch (err) {
showToast('加载信标信息失败: ' + err.message, 'error');
}
}
async function submitEditBeacon(id) {
const body = {};
const name = document.getElementById('editBeaconName').value.trim();
const uuid = document.getElementById('editBeaconUuid').value.trim();
const major = document.getElementById('editBeaconMajor').value;
const minor = document.getElementById('editBeaconMinor').value;
const lat = document.getElementById('editBeaconLat').value;
const lon = document.getElementById('editBeaconLon').value;
const address = document.getElementById('editBeaconAddress').value.trim();
const status = document.getElementById('editBeaconStatus').value;
if (name) body.name = name;
body.beacon_uuid = uuid || null;
if (major !== '') body.beacon_major = parseInt(major); else body.beacon_major = null;
if (minor !== '') body.beacon_minor = parseInt(minor); else body.beacon_minor = null;
if (lat !== '') body.latitude = parseFloat(lat); else body.latitude = null;
if (lon !== '') body.longitude = parseFloat(lon); else body.longitude = null;
body.address = address || null;
body.status = status;
try {
await apiCall(`${API_BASE}/beacons/${id}`, { method: 'PUT', body: JSON.stringify(body) });
showToast('信标已更新');
closeModal();
loadBeacons();
} catch (err) {
showToast('更新失败: ' + err.message, 'error');
}
}
function confirmDeleteBeacon(id, name) {
showModal(`
< h3 class = "text-lg font-semibold mb-4 text-red-400" > < i class = "fas fa-exclamation-triangle mr-2" > < / i > 确认删除< / h3 >
< p class = "text-gray-300 mb-6" > 确定要删除信标 < strong > "${name}"< / strong > 吗？删除后蓝牙记录将不再关联此信标位置。< / p >
< div class = "flex gap-3" >
< button class = "btn btn-danger flex-1" onclick = "deleteBeacon(${id})" > < i class = "fas fa-trash" > < / i > 确认删除< / button >
< button class = "btn btn-secondary flex-1" onclick = "closeModal()" > < i class = "fas fa-times" > < / i > 取消< / button >
< / div >
`);
}
async function deleteBeacon(id) {
try {
await apiCall(`${API_BASE}/beacons/${id}`, { method: 'DELETE' });
showToast('信标已删除');
closeModal();
loadBeacons();
} catch (err) {
showToast('删除失败: ' + err.message, 'error');
}
}
// ==================== COMMANDS ====================
async function sendCommand() {
const deviceId = document.getElementById('cmdDeviceSelect').value;
const commandType = document.getElementById('cmdType').value.trim();
const commandContent = document.getElementById('cmdContent').value.trim();
if (!deviceId) { showToast('请选择设备', 'error'); return; }
if (!commandType) { showToast('请输入指令类型', 'error'); return; }
try {
await apiCall(`${API_BASE}/commands/send`, {
method: 'POST',
body: JSON.stringify({ device_id: parseInt(deviceId), command_type: commandType, command_content: commandContent }),
});
showToast('指令已发送');
document.getElementById('cmdType').value = '';
document.getElementById('cmdContent').value = '';
loadCommands();
} catch (err) {
showToast('发送指令失败: ' + err.message, 'error');
}
}
async function sendMessage() {
const deviceId = document.getElementById('msgDeviceSelect').value;
const message = document.getElementById('msgContent').value.trim();
if (!deviceId) { showToast('请选择设备', 'error'); return; }
if (!message) { showToast('请输入消息内容', 'error'); return; }
try {
await apiCall(`${API_BASE}/commands/message`, {
method: 'POST',
body: JSON.stringify({ device_id: parseInt(deviceId), message }),
});
showToast('消息已发送');
document.getElementById('msgContent').value = '';
loadCommands();
} catch (err) {
showToast('发送消息失败: ' + err.message, 'error');
}
}
// TTS character counter
const ttsTextarea = document.getElementById('ttsContent');
if (ttsTextarea) {
ttsTextarea.addEventListener('input', () => {
const count = ttsTextarea.value.length;
const el = document.getElementById('ttsCharCount');
if (el) {
el.textContent = `${count}/200`;
el.style.color = count > 200 ? '#ef4444' : '#6b7280';
}
});
}
async function sendTTS() {
const deviceId = document.getElementById('ttsDeviceSelect').value;
const text = document.getElementById('ttsContent').value.trim();
if (!deviceId) { showToast('请选择目标设备', 'error'); return; }
if (!text) { showToast('请输入语音播报内容', 'error'); return; }
if (text.length > 200) { showToast('播报文本不能超过 200 字', 'error'); return; }
try {
await apiCall(`${API_BASE}/commands/tts`, {
method: 'POST',
body: JSON.stringify({ device_id: parseInt(deviceId), text }),
});
showToast('语音已下发');
document.getElementById('ttsContent').value = '';
document.getElementById('ttsCharCount').textContent = '0/200';
loadCommands();
} catch (err) {
showToast('语音下发失败: ' + err.message, 'error');
}
}
async function loadCommands(page) {
if (page) pageState.commands.page = page;
const p = pageState.commands.page;
const ps = pageState.commands.pageSize;
const deviceId = document.getElementById('cmdHistoryDeviceFilter').value;
const status = document.getElementById('cmdStatusFilter').value;
let url = `${API_BASE}/commands?page=${p}&page_size=${ps}`;
if (deviceId) url += `&device_id=${deviceId}`;
if (status) url += `&status=${status}`;
showLoading('commandsLoading');
try {
const data = await apiCall(url);
const items = data.items || [];
const tbody = document.getElementById('commandsTableBody');
if (items.length === 0) {
tbody.innerHTML = '< tr > < td colspan = "8" class = "text-center text-gray-500 py-8" > 没有指令记录< / td > < / tr > ';
} else {
tbody.innerHTML = items.map(c => `
< tr >
< td class = "font-mono text-xs" > ${escapeHtml(c.id || '-')}< / td >
< td class = "font-mono text-xs" > ${escapeHtml(c.device_id || c.imei || '-')}< / td >
< td > ${escapeHtml(c.command_type || '-')}< / td >
< td class = "text-xs" style = "max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title = "${escapeHtml(c.command_content || '')}" > ${escapeHtml(truncate(c.command_content || '-', 40))}< / td >
< td > ${commandStatusBadge(c.status)}< / td >
< td class = "text-xs" style = "max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title = "${escapeHtml(c.response_content || '')}" > ${escapeHtml(truncate(c.response_content || '-', 30))}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(c.created_at)}< / td >
< td class = "text-xs text-gray-400" > ${formatTime(c.response_at || c.sent_at)}< / td >
< / tr >
`).join('');
}
renderPagination('commandsPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadCommands');
} catch (err) {
showToast('加载指令记录失败: ' + err.message, 'error');
document.getElementById('commandsTableBody').innerHTML = '< tr > < td colspan = "8" class = "text-center text-red-400 py-8" > 加载失败< / td > < / tr > ';
} finally {
hideLoading('commandsLoading');
}
}
// ==================== INITIALIZATION ====================
document.addEventListener('DOMContentLoaded', () => {
navigateTo('dashboard');
});
< / script >
< / body >
< / html >
