diff --git a/templates/index.html b/templates/index.html index 3a9287f..ae9886c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -137,6 +137,9 @@

测斜仪数据

+
+ 未连接 +
@@ -177,6 +180,8 @@
+ +
@@ -187,6 +192,34 @@
+ +
+

最新传感器数据

+
+
+
传感器ID
+
--
+
+
+
X轴值
+
--
+
+
+
Y轴值
+
--
+
+
+
Z轴值
+
--
+
+
+
温度
+
--
+
℃
+
+
+
+

传感器数据图表

@@ -196,7 +229,7 @@

传感器数据表格

- + @@ -223,6 +256,7 @@ let refreshInterval = null; let allSensors = []; let currentSensorData = []; + let connectionCheckTimer = null; // 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { @@ -237,6 +271,13 @@ // 设置自动刷新 setupAutoRefresh(); + + // 检查连接状态 + checkConnectionStatus(); + connectionCheckTimer = setInterval(checkConnectionStatus, 30000); // 每30秒检查一次 + + // 获取最新数据显示 + fetchLatestData(); }); // 初始化日期选择器 @@ -274,6 +315,11 @@ document.getElementById('resetBtn').addEventListener('click', function() { resetFilters(); }); + + // 查询最新数据按钮 + document.getElementById('queryLatestBtn').addEventListener('click', function() { + queryLatestData(); + }); // 传感器选择变化 document.getElementById('sensorSelect').addEventListener('change', function() { @@ -662,6 +708,100 @@ // 清理 document.body.removeChild(link); } + + // 检查连接状态 + function checkConnectionStatus() { + fetch('/api/clients') + .then(response => response.json()) + .then(data => { + const statusElem = document.getElementById('connectionStatus'); + if (data && data.length > 0) { + const onlineClients = data.filter(client => client.isOnline); + if (onlineClients.length > 0) { + statusElem.style.backgroundColor = 'green'; + const client = onlineClients[0]; + if (onlineClients.length > 1) { + statusElem.textContent = `已连接: ${client.ip}:${client.port} (共${onlineClients.length}个设备)`; + } else { + statusElem.textContent = `已连接: ${client.ip}:${client.port}`; + } + } else { + statusElem.style.backgroundColor = 'orange'; + statusElem.textContent = '设备离线'; + } + } else { + statusElem.style.backgroundColor = 'red'; + statusElem.textContent = '未连接'; + } + }) + .catch(error => { + console.error('获取连接状态失败:', error); + const statusElem = document.getElementById('connectionStatus'); + statusElem.style.backgroundColor = 'red'; + statusElem.textContent = '状态未知'; + }); + } + + // 获取最新传感器数据 + function fetchLatestData() { + fetch('/api/data?limit=1') + .then(response => response.json()) + .then(data => { + if (data && data.length > 0) { + const latest = data[0]; + updateLatestDataDisplay(latest); + } + }) + .catch(error => { + console.error('获取最新数据失败:', error); + }); + } + + // 更新最新数据显示 + function updateLatestDataDisplay(data) { + const date = new Date(data.timestamp); + date.setHours(date.getHours() - 8); + + const formattedDate = + date.getFullYear() + '/' + + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + + date.getDate().toString().padStart(2, '0') + ' ' + + date.getHours().toString().padStart(2, '0') + ':' + + date.getMinutes().toString().padStart(2, '0') + ':' + + date.getSeconds().toString().padStart(2, '0'); + + document.getElementById('latest-time').textContent = `(${formattedDate})`; + document.getElementById('latest-sensor-id').textContent = data.sensor_id; + document.getElementById('latest-x').textContent = data.x.toFixed(3); + document.getElementById('latest-y').textContent = data.y.toFixed(3); + document.getElementById('latest-z').textContent = data.z.toFixed(3); + document.getElementById('latest-temperature').textContent = data.temperature.toFixed(1); + } + + // 查询最新数据（触发设备查询） + function queryLatestData() { + const latestDataElement = document.querySelector('.latest-data'); + latestDataElement.style.opacity = 0.5; + document.getElementById('queryLatestBtn').textContent = '查询中...'; + + // 这里会触发TCP服务器发送查询指令，等待3秒后获取最新数据 + setTimeout(() => { + fetchLatestData(); + loadData(); // 也刷新一下表格数据 + latestDataElement.style.opacity = 1; + document.getElementById('queryLatestBtn').textContent = '查询最新数据'; + }, 3000); + } + + // 页面卸载时清除定时器 + window.addEventListener('beforeunload', function() { + if (connectionCheckTimer) { + clearInterval(connectionCheckTimer); + } + if (refreshInterval) { + clearInterval(refreshInterval); + } + });