-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -448,8 +596,78 @@
// 添加输入框事件监听
const stationInput = document.getElementById('stationInput');
stationInput.addEventListener('input', function(e) {
- // 移除非数字字符
- this.value = this.value.replace(/[^0-9]/g, '');
+ // 允许输入数字和十六进制字符
+ this.value = this.value.toUpperCase().replace(/[^0-9A-F]/g, '');
+ });
+
+ // 设备列表模态框相关事件
+ const modal = document.getElementById('deviceModal');
+ const showDeviceListBtn = document.getElementById('showDeviceList');
+ const closeBtn = document.querySelector('.close-modal');
+ const prevPageBtn = document.getElementById('prevPage');
+ const nextPageBtn = document.getElementById('nextPage');
+
+ // 点击显示设备列表
+ showDeviceListBtn.addEventListener('click', function(e) {
+ e.preventDefault();
+ modal.style.display = 'block';
+ updateDeviceList(1);
+ });
+
+ // 分页按钮事件
+ prevPageBtn.addEventListener('click', function() {
+ if (currentPage > 1) {
+ updateDeviceList(currentPage - 1);
+ }
+ });
+
+ nextPageBtn.addEventListener('click', function() {
+ const totalPages = Math.ceil(filteredDevices.length / itemsPerPage);
+ if (currentPage < totalPages) {
+ updateDeviceList(currentPage + 1);
+ }
+ });
+
+ // 处理ID输入
+ stationInput.addEventListener('change', function() {
+ const value = this.value.trim();
+ if (value) {
+ if (isHexString(value)) {
+ // 如果是十六进制，转换为十进制
+ if (value.length <= 6) {
+ this.value = hexToDecimal(value);
+ }
+ } else {
+ // 如果是十进制，保持不变
+ const num = parseInt(value);
+ if (!isNaN(num)) {
+ this.value = num.toString();
+ }
+ }
+ }
+ });
+
+ // 点击关闭按钮
+ closeBtn.addEventListener('click', function() {
+ modal.style.display = 'none';
+ });
+
+ // 点击模态框外部关闭
+ window.addEventListener('click', function(e) {
+ if (e.target === modal) {
+ modal.style.display = 'none';
+ }
+ });
+
+ // 点击设备项自动填充并查询
+ document.getElementById('deviceList').addEventListener('click', function(e) {
+ const deviceItem = e.target.closest('.device-item');
+ if (deviceItem) {
+ const decimalId = deviceItem.getAttribute('data-decimal-id');
+ document.getElementById('stationInput').value = decimalId;
+ modal.style.display = 'none';
+ queryHistoryData();
+ }
});
});
@@ -663,12 +881,86 @@
const response = await fetch('/api/stations');
stations = await response.json();
+ // 更新WH65LP设备数量
+ const wh65lpDevices = stations.filter(station => station.device_type === 'WH65LP');
+ document.getElementById('wh65lpCount').textContent = wh65lpDevices.length;
+
displayStationsOnMap();
} catch (error) {
console.error('加载站点失败:', error);
}
}
+ // 分页相关变量
+ let currentPage = 1;
+ const itemsPerPage = 10;
+ let filteredDevices = [];
+
+ // 更新设备列表
+ function updateDeviceList(page = 1) {
+ const deviceListContainer = document.getElementById('deviceList');
+ deviceListContainer.innerHTML = '';
+
+ // 筛选WH65LP设备并按在线状态排序
+ filteredDevices = stations
+ .filter(station => station.device_type === 'WH65LP')
+ .sort((a, b) => {
+ const aOnline = new Date(a.last_update) > new Date(Date.now() - 5*60*1000);
+ const bOnline = new Date(b.last_update) > new Date(Date.now() - 5*60*1000);
+ if (aOnline === bOnline) return 0;
+ return aOnline ? -1 : 1;
+ });
+
+ // 计算分页
+ const totalPages = Math.ceil(filteredDevices.length / itemsPerPage);
+ currentPage = Math.min(Math.max(1, page), totalPages);
+
+ // 更新分页按钮状态
+ document.getElementById('currentPage').textContent = currentPage;
+ document.getElementById('totalPages').textContent = totalPages;
+ document.getElementById('prevPage').disabled = currentPage <= 1;
+ document.getElementById('nextPage').disabled = currentPage >= totalPages;
+
+ // 获取当前页的设备
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ const endIndex = startIndex + itemsPerPage;
+ const currentDevices = filteredDevices.slice(startIndex, endIndex);
+
+ currentDevices.forEach(device => {
+ const isOnline = new Date(device.last_update) > new Date(Date.now() - 5*60*1000);
+ const deviceItem = document.createElement('div');
+ deviceItem.className = 'device-item';
+ deviceItem.setAttribute('data-decimal-id', device.decimal_id);
+
+ deviceItem.innerHTML = `
+
+ ${device.decimal_id} | ${device.name} | ${device.location || '未知位置'}
+
+
${isOnline ? '在线' : '离线'}
+ `;
+
+ deviceListContainer.appendChild(deviceItem);
+ });
+
+ if (filteredDevices.length === 0) {
+ deviceListContainer.innerHTML = '
暂无WH65LP设备
';
+ }
+ }
+
+ // 十六进制和十进制转换函数
+ function isHexString(str) {
+ return /^[0-9A-F]+$/i.test(str);
+ }
+
+ function hexToDecimal(hex) {
+ return parseInt(hex, 16).toString();
+ }
+
+ function decimalToHex(decimal) {
+ const hex = parseInt(decimal).toString(16).toUpperCase();
+ return '0'.repeat(Math.max(0, 6 - hex.length)) + hex;
+ }
+
// 更新集群距离
function updateClusterDistance(zoom) {
// 动态调整聚合距离，让低缩放更容易聚合
@@ -893,8 +1185,17 @@
displayTable(data);
// 显示图表和表格
- document.getElementById('chartContainer').classList.add('show');
- document.getElementById('tableContainer').classList.add('show');
+ const chartContainer = document.getElementById('chartContainer');
+ const tableContainer = document.getElementById('tableContainer');
+
+ chartContainer.classList.add('show');
+ tableContainer.classList.add('show');
+
+ // 平滑滚动到图表位置
+ chartContainer.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
} catch (error) {
console.error('查询历史数据失败:', error);