<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>机器人日志系统</title>
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
box-sizing: border-box;
|
}
|
body {
|
font-family: Arial, sans-serif;
|
background-color: #f0f2f5;
|
}
|
.header {
|
background-color: #1890ff;
|
color: white;
|
padding: 15px 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.header h1 {
|
font-size: 20px;
|
}
|
.header button {
|
background-color: transparent;
|
color: white;
|
border: 1px solid white;
|
padding: 5px 15px;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
.header button:hover {
|
background-color: rgba(255,255,255,0.1);
|
}
|
.container {
|
padding: 20px;
|
}
|
.refresh-btn {
|
background-color: #1890ff;
|
color: white;
|
border: none;
|
padding: 8px 16px;
|
border-radius: 4px;
|
cursor: pointer;
|
margin-bottom: 20px;
|
}
|
.refresh-btn:hover {
|
background-color: #40a9ff;
|
}
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
background-color: white;
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
}
|
th, td {
|
padding: 12px;
|
text-align: left;
|
border-bottom: 1px solid #ddd;
|
}
|
th {
|
background-color: #f5f5f5;
|
font-weight: bold;
|
}
|
tr:hover {
|
background-color: #f5f5f5;
|
}
|
.loading {
|
text-align: center;
|
padding: 20px;
|
color: #666;
|
}
|
.error {
|
text-align: center;
|
padding: 20px;
|
color: red;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="header">
|
<h1>机器人上下行日志</h1>
|
<button id="logoutBtn">登出</button>
|
</div>
|
<div class="container">
|
<button class="refresh-btn" id="refreshBtn">刷新数据</button>
|
<div id="loading" class="loading">加载中...</div>
|
<div id="error" class="error" style="display: none;"></div>
|
<table id="logTable" style="display: none;">
|
<thead>
|
<tr>
|
<th>时间</th>
|
<th>设备ID</th>
|
<th>消息类型</th>
|
<th>消息内容</th>
|
</tr>
|
</thead>
|
<tbody id="logTableBody">
|
</tbody>
|
</table>
|
</div>
|
<script>
|
// 检查登录状态
|
function checkLogin() {
|
if (!localStorage.getItem('loggedIn')) {
|
window.location.href = '/login';
|
}
|
}
|
|
// 登出功能
|
document.getElementById('logoutBtn').addEventListener('click', function() {
|
localStorage.removeItem('loggedIn');
|
window.location.href = '/login';
|
});
|
|
// 加载日志数据
|
function loadLogData() {
|
document.getElementById('loading').style.display = 'block';
|
document.getElementById('error').style.display = 'none';
|
document.getElementById('logTable').style.display = 'none';
|
|
fetch('/deviceLog/query')
|
.then(response => response.json())
|
.then(data => {
|
document.getElementById('loading').style.display = 'none';
|
if (data && data.length > 0) {
|
document.getElementById('logTable').style.display = 'table';
|
const tbody = document.getElementById('logTableBody');
|
tbody.innerHTML = '';
|
|
data.forEach(item => {
|
const row = document.createElement('tr');
|
row.innerHTML = `
|
<td>${item.time || '-'}</td>
|
<td>${item.deviceId || '-'}</td>
|
<td>${item.messageType || '-'}</td>
|
<td>${item.messageContent || '-'}</td>
|
`;
|
tbody.appendChild(row);
|
});
|
} else {
|
document.getElementById('error').textContent = '暂无日志数据';
|
document.getElementById('error').style.display = 'block';
|
}
|
})
|
.catch(error => {
|
document.getElementById('loading').style.display = 'none';
|
document.getElementById('error').textContent = '加载数据失败: ' + error.message;
|
document.getElementById('error').style.display = 'block';
|
});
|
}
|
|
// 刷新按钮点击事件
|
document.getElementById('refreshBtn').addEventListener('click', loadLogData);
|
|
// 页面加载时检查登录状态并加载数据
|
checkLogin();
|
loadLogData();
|
</script>
|
</body>
|
</html>
|
