feat: 调整页面
This commit is contained in:
fengyarnom
parent
a2d0bc8226
commit
5dceec6d38
@ -137,6 +137,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h1>测斜仪数据</h1>
|
<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>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -177,6 +180,8 @@
|
|||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<button id="queryBtn">查询数据</button>
|
<button id="queryBtn">查询数据</button>
|
||||||
<button id="resetBtn">重置筛选</button>
|
<button id="resetBtn">重置筛选</button>
|
||||||
|
<button id="queryLatestBtn">查询最新数据</button>
|
||||||
|
<button id="exportBtn">导出CSV</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
@ -187,6 +192,34 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
<div class="chart-container">
|
||||||
<h2>传感器数据图表</h2>
|
<h2>传感器数据图表</h2>
|
||||||
@ -196,7 +229,7 @@
|
|||||||
<!-- 数据表格 -->
|
<!-- 数据表格 -->
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<h2>传感器数据表格</h2>
|
<h2>传感器数据表格</h2>
|
||||||
<button id="exportBtn">导出CSV</button>
|
|
||||||
<table id="dataTable">
|
<table id="dataTable">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -223,6 +256,7 @@
|
|||||||
let refreshInterval = null;
|
let refreshInterval = null;
|
||||||
let allSensors = [];
|
let allSensors = [];
|
||||||
let currentSensorData = [];
|
let currentSensorData = [];
|
||||||
|
let connectionCheckTimer = null;
|
||||||
|
|
||||||
// 页面加载完成后执行
|
// 页面加载完成后执行
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
@ -237,6 +271,13 @@
|
|||||||
|
|
||||||
// 设置自动刷新
|
// 设置自动刷新
|
||||||
setupAutoRefresh();
|
setupAutoRefresh();
|
||||||
|
|
||||||
|
// 检查连接状态
|
||||||
|
checkConnectionStatus();
|
||||||
|
connectionCheckTimer = setInterval(checkConnectionStatus, 30000); // 每30秒检查一次
|
||||||
|
|
||||||
|
// 获取最新数据显示
|
||||||
|
fetchLatestData();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化日期选择器
|
// 初始化日期选择器
|
||||||
@ -274,6 +315,11 @@
|
|||||||
document.getElementById('resetBtn').addEventListener('click', function() {
|
document.getElementById('resetBtn').addEventListener('click', function() {
|
||||||
resetFilters();
|
resetFilters();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 查询最新数据按钮
|
||||||
|
document.getElementById('queryLatestBtn').addEventListener('click', function() {
|
||||||
|
queryLatestData();
|
||||||
|
});
|
||||||
|
|
||||||
// 传感器选择变化
|
// 传感器选择变化
|
||||||
document.getElementById('sensorSelect').addEventListener('change', function() {
|
document.getElementById('sensorSelect').addEventListener('change', function() {
|
||||||
@ -662,6 +708,100 @@
|
|||||||
// 清理
|
// 清理
|
||||||
document.body.removeChild(link);
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user