default
d54e53e0b7
FastAPI + SQLAlchemy + asyncio TCP 服务器，支持设备管理、实时定位、 告警、考勤打卡、蓝牙记录、指令下发、TTS语音播报等功能。
2626 lines
159 KiB
HTML
2626 lines
159 KiB
HTML
<!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>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<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; }
|
||
#addBeaconMapDiv .leaflet-pane, #editBeaconMapDiv .leaflet-pane { z-index: 0 !important; }
|
||
#addBeaconMapDiv .leaflet-control, #editBeaconMapDiv .leaflet-control { z-index: 1 !important; }
|
||
.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; }
|
||
.leaflet-container { background: #111827; }
|
||
.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; }
|
||
.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>
|
||
<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>
|
||
<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>：支持 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>
|
||
<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>
|
||
</div>
|
||
<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden mb-6" style="height: 500px;">
|
||
<div id="locationMap" style="height: 100%; width: 100%;"></div>
|
||
</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>
|
||
<th>设备ID</th>
|
||
<th>类型</th>
|
||
<th>纬度</th>
|
||
<th>经度</th>
|
||
<th>地址</th>
|
||
<th>速度</th>
|
||
<th>卫星数</th>
|
||
<th>时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="locationsTableBody">
|
||
<tr><td colspan="8" class="text-center text-gray-500 py-8">请选择设备并查询</td></tr>
|
||
</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>：SOS 紧急求助、低电量、设备拆除、围栏进出、跌倒等</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>：GPS 定位显示卫星图标，基站/WiFi 定位显示信号塔图标，自动反向地理编码获取中文地址</div></div>
|
||
<div class="guide-step"><div class="step-num">4</div><div class="step-text"><strong>与蓝牙打卡区别</strong>：GPS考勤(0xB0/0xB1)记录完整定位数据；蓝牙打卡(0xB2)记录信标信息，请在「蓝牙记录」页面查看</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>
|
||
<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>
|
||
<th>位置</th>
|
||
<th>电量/信号</th>
|
||
<th>基站</th>
|
||
<th>时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="attendanceTableBody">
|
||
<tr><td colspan="6" class="text-center text-gray-500 py-8">加载中...</td></tr>
|
||
</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>：RSSI 越接近 0 信号越强（-40dBm = 很近，-80dBm = 较远）；信标电量显示为电压(V)或百分比(%)</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 兼容的蓝牙信标硬件（推荐：KKM KBeacon、天工测控 SKYLAB 系列等），覆盖范围通常 10-30 米<br>
|
||
<strong>第二步</strong>：使用信标厂商提供的 APP（如 KBeaconPro）配置信标参数：UUID、Major ID、Minor ID、广播间隔（建议 300-500ms）、发射功率<br>
|
||
<strong>第三步</strong>：将信标安装在打卡点或需要定位的区域（门口、走廊、会议室等），建议距地面 2-3 米<br>
|
||
<strong>第四步</strong>：P241 工牌会自动扫描附近信标并上报数据，打卡数据通过 0xB2 协议上传，定位数据通过 0xB3 协议上传<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 地址格式：AA:BB:CC:DD:EE:FF（冒号分隔，大写十六进制），可从信标厂商 APP 或 0xB2/0xB3 蓝牙记录中获取</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>
|
||
|
||
<!-- ==================== 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>：向设备屏幕推送文字消息（UTF-16 编码，支持中文）</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> 所有下发功能仅对当前在线（TCP 已连接）设备有效，离线设备无法接收</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;
|
||
let dashAlarmChart = null;
|
||
let alarmTypeChart = null;
|
||
|
||
// Side panel state
|
||
let panelDevices = [];
|
||
let panelBeacons = [];
|
||
let selectedPanelDeviceId = null;
|
||
let selectedPanelBeaconId = null;
|
||
|
||
// 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();
|
||
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: '位置追踪',
|
||
alarms: '告警管理', attendance: '考勤记录', bluetooth: '蓝牙记录', beacons: '信标管理', commands: '指令管理'
|
||
};
|
||
|
||
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 = []; }
|
||
|
||
switch (page) {
|
||
case 'dashboard': loadDashboard(); dashboardInterval = setInterval(loadDashboard, 30000); break;
|
||
case 'devices': loadDevices(); break;
|
||
case 'locations': initLocationMap(); loadDeviceSelectors(); break;
|
||
case 'alarms': loadAlarmStats(); loadAlarms(); loadDeviceSelectors(); break;
|
||
case 'attendance': loadAttendanceStats(); loadAttendance(); loadDeviceSelectors(); break;
|
||
case 'bluetooth': loadBluetooth(); loadDeviceSelectors(); break;
|
||
case 'beacons': loadBeacons(); break;
|
||
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' },
|
||
};
|
||
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');
|
||
// Only invalidate map size when on locations page
|
||
if (currentPage === 'locations' && locationMap) {
|
||
setTimeout(() => locationMap.invalidateSize(), PANEL_TRANSITION_MS + 50);
|
||
}
|
||
}
|
||
|
||
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' });
|
||
if (autoLocate && deviceId) loadLatestPosition();
|
||
}
|
||
|
||
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号，15-20位数字</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('');
|
||
}
|
||
|
||
// --- 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>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px">
|
||
${_btn('satellite-dish', 'GPS 开启', 'GPSON#', '#0d9488')}
|
||
${_btn('bluetooth-b', '蓝牙开启', 'BTON#', '#2563eb')}
|
||
${_btn('broadcast-tower', 'BLE扫描', 'BTSCAN,1#', '#7c3aed')}
|
||
</div>
|
||
<div style="font-size:11px;color:#6b7280;margin-bottom:10px">工作模式:</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px">
|
||
${_btn('clock', '定时定位', 'MODE,1#', '#4b5563')}
|
||
${_btn('brain', '智能模式', 'MODE,3#', '#4b5563')}
|
||
</div>
|
||
<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')}
|
||
${_btn('stopwatch', '定时器', 'TIMER#', '#374151')}
|
||
${_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');
|
||
}
|
||
}
|
||
|
||
// ==================== MAP PROVIDER ====================
|
||
// Switch tile provider: 'gaode' | 'tianditu'
|
||
// 高德: GCJ-02 tiles, need coordinate conversion; 天地图: WGS-84 native
|
||
const MAP_PROVIDER = 'gaode';
|
||
|
||
// WGS-84 → GCJ-02 coordinate conversion (for 高德 tiles)
|
||
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];
|
||
}
|
||
|
||
// Convert WGS-84 coords for current map provider
|
||
function toMapCoord(lat, lng) {
|
||
if (MAP_PROVIDER === 'gaode') return wgs84ToGcj02(lat, lng);
|
||
return [lat, lng]; // tianditu uses WGS-84 natively
|
||
}
|
||
|
||
// ==================== LOCATIONS ====================
|
||
function initLocationMap() {
|
||
if (locationMap) return;
|
||
setTimeout(() => {
|
||
locationMap = L.map('locationMap').setView(toMapCoord(39.9042, 116.4074), 10);
|
||
if (MAP_PROVIDER === 'gaode') {
|
||
// 高德矢量底图 (GCJ-02, standard Mercator, no API key needed)
|
||
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=2&style=8&x={x}&y={y}&z={z}', {
|
||
subdomains: '1234', maxZoom: 18,
|
||
attribution: '© 高德地图',
|
||
}).addTo(locationMap);
|
||
} else {
|
||
// 天地图矢量底图 + 中文注记 (WGS-84)
|
||
const TDT_KEY = '1918548e81a5ae3ff0cb985537341146';
|
||
L.tileLayer('https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' + TDT_KEY, {
|
||
subdomains: ['0','1','2','3','4','5','6','7'], maxZoom: 18,
|
||
}).addTo(locationMap);
|
||
L.tileLayer('https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=' + TDT_KEY, {
|
||
subdomains: ['0','1','2','3','4','5','6','7'], maxZoom: 18,
|
||
attribution: '© 天地图',
|
||
}).addTo(locationMap);
|
||
}
|
||
locationMap.invalidateSize();
|
||
}, 100);
|
||
}
|
||
|
||
function clearMapOverlays() {
|
||
mapMarkers.forEach(m => locationMap.removeLayer(m));
|
||
mapMarkers = [];
|
||
if (mapPolyline) { locationMap.removeLayer(mapPolyline); mapPolyline = null; }
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
const latlngs = [];
|
||
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);
|
||
latlngs.push([mLat, mLng]);
|
||
const isFirst = i === 0;
|
||
const isLast = i === locations.length - 1;
|
||
const marker = L.circleMarker([mLat, mLng], {
|
||
radius: isFirst || isLast ? 8 : 4,
|
||
fillColor: isFirst ? '#22c55e' : isLast ? '#ef4444' : '#3b82f6',
|
||
color: '#fff', weight: 1, fillOpacity: 0.9,
|
||
}).addTo(locationMap);
|
||
marker.bindPopup(`
|
||
<b>${isFirst ? '起点' : isLast ? '终点' : `点 #${i + 1}`}</b><br>
|
||
类型: ${loc.location_type || '-'}<br>
|
||
坐标: ${lat.toFixed(6)}, ${lng.toFixed(6)}<br>
|
||
${loc.address ? `地址: ${escapeHtml(loc.address)}<br>` : ''}
|
||
时间: ${formatTime(loc.recorded_at || loc.created_at)}
|
||
`);
|
||
mapMarkers.push(marker);
|
||
}
|
||
});
|
||
|
||
if (latlngs.length > 1) {
|
||
mapPolyline = L.polyline(latlngs, { color: '#3b82f6', weight: 3, opacity: 0.8 }).addTo(locationMap);
|
||
locationMap.fitBounds(mapPolyline.getBounds().pad(0.1));
|
||
} else if (latlngs.length === 1) {
|
||
locationMap.setView(latlngs[0], 15);
|
||
}
|
||
|
||
showToast(`已加载 ${locations.length} 个轨迹点`);
|
||
} catch (err) {
|
||
showToast('加载轨迹失败: ' + err.message, 'error');
|
||
}
|
||
}
|
||
|
||
async function loadLatestPosition() {
|
||
const deviceId = document.getElementById('locDeviceSelect').value;
|
||
if (!deviceId) { showToast('请选择设备', 'error'); return; }
|
||
|
||
try {
|
||
const loc = await apiCall(`${API_BASE}/locations/latest/${deviceId}`);
|
||
if (!loc) { showToast('暂无位置数据', 'info'); return; }
|
||
if (!locationMap) initLocationMap();
|
||
clearMapOverlays();
|
||
|
||
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);
|
||
const marker = L.marker([mLat, mLng]).addTo(locationMap);
|
||
marker.bindPopup(`
|
||
<b>最新位置</b><br>
|
||
类型: ${loc.location_type || '-'}<br>
|
||
坐标: ${lat.toFixed(6)}, ${lng.toFixed(6)}<br>
|
||
${loc.address ? `地址: ${escapeHtml(loc.address)}<br>` : ''}
|
||
速度: ${loc.speed || '-'}<br>
|
||
时间: ${formatTime(loc.recorded_at || loc.created_at)}
|
||
`).openPopup();
|
||
mapMarkers.push(marker);
|
||
locationMap.setView([mLat, mLng], 15);
|
||
showToast('已显示最新位置');
|
||
// Auto-load records table
|
||
loadLocationRecords(1);
|
||
} catch (err) {
|
||
showToast('获取最新位置失败: ' + err.message, 'error');
|
||
}
|
||
}
|
||
|
||
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 || [];
|
||
const tbody = document.getElementById('locationsTableBody');
|
||
|
||
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(l => `
|
||
<tr>
|
||
<td class="font-mono text-xs">${escapeHtml(l.device_id || '-')}</td>
|
||
<td>${escapeHtml(l.location_type || '-')}</td>
|
||
<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>
|
||
<td>${l.gps_satellites != null ? l.gps_satellites : '-'}</td>
|
||
<td class="text-xs text-gray-400">${formatTime(l.recorded_at || l.created_at)}</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
renderPagination('locationsPagination', data.total || 0, data.page || p, data.page_size || ps, 'loadLocationRecords');
|
||
} catch (err) {
|
||
showToast('加载位置记录失败: ' + err.message, 'error');
|
||
document.getElementById('locationsTableBody').innerHTML = '<tr><td colspan="8" class="text-center text-red-400 py-8">加载失败</td></tr>';
|
||
} 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;
|
||
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}`;
|
||
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) {
|
||
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-gray-500 py-8">没有考勤记录</td></tr>';
|
||
} 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}` : '-';
|
||
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>
|
||
<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');
|
||
document.getElementById('attendanceTableBody').innerHTML = '<tr><td colspan="6" class="text-center text-red-400 py-8">加载失败</td></tr>';
|
||
} 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');
|
||
}
|
||
}
|
||
|
||
// ---- 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;
|
||
|
||
_beaconPickerMap = L.map(mapDivId, {zoomControl: true}).setView([mLat, mLng], zoom);
|
||
L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=2&style=8&x={x}&y={y}&z={z}', {
|
||
subdomains: '1234', maxZoom: 18,
|
||
attribution: '© 高德地图',
|
||
}).addTo(_beaconPickerMap);
|
||
|
||
if (hasInit) {
|
||
_beaconPickerMarker = L.marker([mLat, mLng]).addTo(_beaconPickerMap);
|
||
}
|
||
|
||
_beaconPickerMap.on('click', async (e) => {
|
||
const gcjLat = e.latlng.lat, gcjLng = e.latlng.lng;
|
||
const [wgsLat, wgsLng] = gcj02ToWgs84(gcjLat, gcjLng);
|
||
document.getElementById(latInputId).value = wgsLat.toFixed(6);
|
||
document.getElementById(lonInputId).value = wgsLng.toFixed(6);
|
||
if (_beaconPickerMarker) _beaconPickerMarker.setLatLng([gcjLat, gcjLng]);
|
||
else _beaconPickerMarker = L.marker([gcjLat, gcjLng]).addTo(_beaconPickerMap);
|
||
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);
|
||
if (_beaconPickerMarker) _beaconPickerMarker.setLatLng([mLat, mLng]);
|
||
else _beaconPickerMarker = L.marker([mLat, mLng]).addTo(_beaconPickerMap);
|
||
_beaconPickerMap.setView([mLat, mLng], 16);
|
||
}
|
||
};
|
||
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) {
|
||
if (_beaconPickerMarker) _beaconPickerMarker.setLatLng([gcjLat, gcjLng]);
|
||
else _beaconPickerMarker = L.marker([gcjLat, gcjLng]).addTo(_beaconPickerMap);
|
||
_beaconPickerMap.setView([gcjLat, gcjLng], 16);
|
||
}
|
||
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() {
|
||
if (_beaconPickerMap) { _beaconPickerMap.remove(); _beaconPickerMap = null; }
|
||
_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>
|