feat: 调整页面
This commit is contained in:
fengyarnom
parent
a2d0bc8226
commit
5dceec6d38
@ -137,6 +137,9 @@
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>测斜仪数据</h1>
|
||||
<div id="connectionStatus" style="display: inline-block; padding: 5px 10px; border-radius: 4px; margin-left: 10px; background-color: red; color: white;">
|
||||
未连接
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
@ -177,6 +180,8 @@
|
||||
<div class="control-group">
|
||||
<button id="queryBtn">查询数据</button>
|
||||
<button id="resetBtn">重置筛选</button>
|
||||
<button id="queryLatestBtn">查询最新数据</button>
|
||||
<button id="exportBtn">导出CSV</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
@ -187,6 +192,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最新数据显示区域 -->
|
||||
<div class="latest-data" style="margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background-color: #f8f9fa;">
|
||||
<h3 style="margin-top: 0; margin-bottom: 10px; color: #333;">最新传感器数据 <span id="latest-time" style="font-weight: normal; font-size: 14px;"></span></h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;">
|
||||
<div style="padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: white;">
|
||||
<div style="font-weight: bold; color: #555; font-size: 12px;">传感器ID</div>
|
||||
<div style="font-size: 20px; color: #555;" id="latest-sensor-id">--</div>
|
||||
</div>
|
||||
<div style="padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: white;">
|
||||
<div style="font-weight: bold; color: #555; font-size: 12px;">X轴值</div>
|
||||
<div style="font-size: 20px; color: #555;" id="latest-x">--</div>
|
||||
</div>
|
||||
<div style="padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: white;">
|
||||
<div style="font-weight: bold; color: #555; font-size: 12px;">Y轴值</div>
|
||||
<div style="font-size: 20px; color: #555;" id="latest-y">--</div>
|
||||
</div>
|
||||
<div style="padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: white;">
|
||||
<div style="font-weight: bold; color: #555; font-size: 12px;">Z轴值</div>
|
||||
<div style="font-size: 20px; color: #555;" id="latest-z">--</div>
|
||||
</div>
|
||||
<div style="padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: white;">
|
||||
<div style="font-weight: bold; color: #555; font-size: 12px;">温度</div>
|
||||
<div style="font-size: 20px; color: #555;" id="latest-temperature">--</div>
|
||||
<div style="font-size: 12px; color: #777;">℃</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域 -->
|
||||
<div class="chart-container">
|
||||
<h2>传感器数据图表</h2>
|
||||
@ -196,7 +229,7 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-container">
|
||||
<h2>传感器数据表格</h2>
|
||||
<button id="exportBtn">导出CSV</button>
|
||||
|
||||
<table id="dataTable">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -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();
|
||||
});
|
||||
|
||||
// 初始化日期选择器
|
||||
@ -275,6 +316,11 @@
|
||||
resetFilters();
|
||||
});
|
||||
|
||||
// 查询最新数据按钮
|
||||
document.getElementById('queryLatestBtn').addEventListener('click', function() {
|
||||
queryLatestData();
|
||||
});
|
||||
|
||||
// 传感器选择变化
|
||||
document.getElementById('sensorSelect').addEventListener('change', function() {
|
||||
loadData();
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user