From 6025bdcbbab5c8cc213f373b41945defa7fb7a53 Mon Sep 17 00:00:00 2001 From: yarnom Date: Tue, 9 Sep 2025 15:58:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/index.html | 157 +++++++++++++++++++------------------------ 1 file changed, 70 insertions(+), 87 deletions(-) diff --git a/templates/index.html b/templates/index.html index dd10d8d..7238f8a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -79,6 +79,15 @@ background-color: #0056b3; } + /* 覆盖设备列表按钮的全局 button 样式，确保文字不是白色且背景为白色 */ + #deviceListInline button { + background-color: #ffffff; + color: #1f2937; /* tailwind: text-gray-800 */ + } + #deviceListInline button:hover { + background-color: #f9fafb; /* tailwind: hover:bg-gray-50 */ + } + .chart-container { margin-bottom: 20px; border: 1px solid #ddd; @@ -154,16 +163,24 @@

测斜仪数据

+
-
- 在线设备: 0 个 - | - 总设备: 0 个 -
+ +
+
+
+ 设备列表 + +
+ 最后一次在线时间 +
+
+
+
@@ -185,6 +202,7 @@
+
@@ -209,9 +227,10 @@
+
- +
@@ -237,24 +256,6 @@
- - -
@@ -266,8 +267,6 @@ let devices = []; let selectedDeviceID = ''; - let currentPage = 1; - let itemsPerPage = 10; let selectedMetric = 'x'; @@ -314,19 +313,7 @@ const metricSelect = document.getElementById('metricSelect'); if (metricSelect) metricSelect.addEventListener('change', function(){ selectedMetric = this.value; updateChart(currentSensorData); }); - const openBtn = document.getElementById('openDeviceModal'); - const showList = document.getElementById('showDeviceList'); - const closeBtn = document.getElementById('closeDeviceModal'); - if (openBtn) openBtn.addEventListener('click', openDeviceModal); - if (showList) showList.addEventListener('click', function(e){ e.preventDefault(); openDeviceModal(); }); - if (closeBtn) closeBtn.addEventListener('click', closeDeviceModal); - const prev = document.getElementById('prevPage'); - const next = document.getElementById('nextPage'); - if (prev) prev.addEventListener('click', function(){ updateDeviceList(currentPage - 1); }); - if (next) next.addEventListener('click', function(){ updateDeviceList(currentPage + 1); }); - - const modal = document.getElementById('deviceModal'); - if (modal) modal.addEventListener('click', function(e){ if (e.target === modal) { closeDeviceModal(); }}); + // 统计信息已融合到设备列表区域，无需额外滚动链接 } function findDeviceByInput() { @@ -448,65 +435,60 @@ }); } - - function openDeviceModal() { - const modal = document.getElementById('deviceModal'); - if (modal) { - modal.classList.remove('hidden'); - modal.classList.add('flex'); - updateDeviceList(1); - } - } - function closeDeviceModal() { - const modal = document.getElementById('deviceModal'); - if (modal) { - modal.classList.add('hidden'); - modal.classList.remove('flex'); - } - } - function updateDeviceList(page) { - if (!devices || devices.length === 0) return; - const totalPages = Math.max(1, Math.ceil(devices.length / itemsPerPage)); - currentPage = Math.min(Math.max(1, page), totalPages); - const cur = document.getElementById('currentPage'); - const tot = document.getElementById('totalPages'); - if (cur) cur.textContent = currentPage; - if (tot) tot.textContent = totalPages; - const prev = document.getElementById('prevPage'); - const next = document.getElementById('nextPage'); - if (prev) prev.disabled = currentPage <= 1; - if (next) next.disabled = currentPage >= totalPages; - - const startIdx = (currentPage - 1) * itemsPerPage; - const endIdx = Math.min(startIdx + itemsPerPage, devices.length); - const list = devices.slice(startIdx, endIdx); - - const container = document.getElementById('deviceList'); + // 渲染内联设备列表（按最后上报排序，新→旧） + function renderDeviceListInline() { + const container = document.getElementById('deviceListInline'); if (!container) return; container.innerHTML = ''; - list.forEach(d => { - const onlineDot = d.online ? '' : ''; - const lastSeen = d.last_seen ? new Date(d.last_seen).toLocaleString() : '—'; - const item = document.createElement('div'); - item.className = 'device-item px-5 py-3 border-b border-gray-100 flex justify-between items-center cursor-pointer hover:bg-gray-50'; - item.innerHTML = ` -
- ${onlineDot} - ${d.device_id} - (探头: ${d.sensor_count}) -
-
最后上报: ${lastSeen}
- `; + if (!devices || devices.length === 0) { + const empty = document.createElement('div'); + empty.className = 'text-gray-500 text-sm'; + empty.textContent = '没有设备'; + container.appendChild(empty); + return; + } + + const view = devices.slice().sort((a,b) => { + const ta = a.last_seen ? new Date(a.last_seen).getTime() : 0; + const tb = b.last_seen ? new Date(b.last_seen).getTime() : 0; + return tb - ta; // 新→旧 + }); + + view.forEach(d => { + const onlineDot = d.online ? '' : ''; + const lastSeen = (() => { + if (!d.last_seen) return '—'; + const dt = new Date(d.last_seen); + const y = dt.getFullYear(); + const m = (dt.getMonth()+1).toString().padStart(2,'0'); + const day = dt.getDate().toString().padStart(2,'0'); + const hh = dt.getHours().toString().padStart(2,'0'); + const mm = dt.getMinutes().toString().padStart(2,'0'); + const ss = dt.getSeconds().toString().padStart(2,'0'); + return `${y}/${m}/${day} ${hh}:${mm}:${ss}`; + })(); + const isSelected = d.device_id === selectedDeviceID; + + const item = document.createElement('button'); + item.type = 'button'; + // 一行一个，左右布局：左侧设备信息，右侧最后在线时间 + item.className = 'w-full px-3 py-2 border rounded text-sm bg-white hover:bg-gray-50 flex items-center justify-between transition text-gray-800 ' + (isSelected ? 'ring-2 ring-blue-400' : ''); + const leftHtml = `${onlineDot} + ${d.device_id} + (探头: ${d.sensor_count})`; + const rightHtml = `${lastSeen}`; + item.innerHTML = leftHtml + rightHtml; item.addEventListener('click', () => { selectedDeviceID = d.device_id; const input = document.getElementById('deviceInput'); if (input) input.value = selectedDeviceID; - closeDeviceModal(); + renderDeviceListInline(); loadSensors(); }); container.appendChild(item); }); } + // （原）updateDeviceList 已移除，改用 renderDeviceListInline() function loadDevices() { fetch('/api/devices') .then(r => r.json()) @@ -516,6 +498,7 @@ if (total) total.textContent = devices.length; const onlineEl = document.getElementById('onlineDevices'); if (onlineEl) onlineEl.textContent = devices.filter(d => d.online).length; + renderDeviceListInline(); // 默认选择 1513343 设备（若存在）并自动加载 if (!selectedDeviceID) {