119 lines
4.5 KiB
HTML
119 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<link rel="stylesheet" href="/css/win10ui.css">
|
|
<link rel="stylesheet" href="/css/theme.css">
|
|
<link rel="stylesheet" href="/lib/layui/css/layui.css">
|
|
<link rel="stylesheet" href="/T4/css/task.css">
|
|
<link rel="stylesheet" href="/T4/css/hardware.css">
|
|
<link rel="stylesheet" href="/T4/css/font.css">
|
|
<link rel="stylesheet" href="/T4/css/chart.css">
|
|
<link rel="stylesheet" href="/T4/css/cmd.css">
|
|
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<script src="/assets/js/socket/Socket.IO.js"></script>
|
|
<script src="/assets/js/core/echarts.min.js"></script>
|
|
|
|
<script>window.breadcrumbs = [{ name: "首页", url: "" }, { name: "Termination4", url: "" }, { name: "TLog" }];</script>
|
|
<script src="/js/address.bar.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="layui-container" style="margin-top: 20px;">
|
|
<div class="layui-row">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">系统日志<button class="layui-btn" onclick="socket.emit('T4CMDCommand', {'PCMachineGUID': PCMachineGUID, 'PCSID': PCSID, 'work': 'GetLog', 'Command': [1, 200]});" style="margin-left: 30px;">刷新</button></div>
|
|
<div class="layui-card-body">
|
|
<div id="logContainer" style="height: 600px; overflow-y: auto; background-color: #f2f2f2; padding: 10px; font-family: monospace; white-space: pre-wrap;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
layui.use(['layer', 'jquery'], function(){
|
|
var layer = layui.layer;
|
|
var $ = layui.jquery;
|
|
|
|
// 连接到Socket.IO服务器
|
|
socket = io("/Termination4SocketIOSpace");
|
|
|
|
// 初始化日志容器
|
|
var logContainer = document.getElementById('logContainer');
|
|
var loading=false;
|
|
|
|
// 加载初始日志
|
|
// loadLogs(1, 200);
|
|
|
|
// 监听滚动事件，实现无限滚动
|
|
logContainer.addEventListener('scroll', function() {
|
|
if (logContainer.scrollTop === 0 && !loading) {
|
|
var currentLines = logContainer.textContent.split('\n').filter(Boolean).length;
|
|
loadLogs(currentLines + 2, currentLines + 200);
|
|
}
|
|
});
|
|
|
|
// 加载日志函数
|
|
function loadLogs(start, end) {
|
|
loading = true;
|
|
showLoading();
|
|
// 发送获取日志的请求
|
|
socket.emit('T4CMDCommand', {
|
|
PCMachineGUID: PCMachineGUID,
|
|
'work': 'GetLog',
|
|
'Command': [start, end]
|
|
});
|
|
}
|
|
|
|
// 显示加载中状态
|
|
function showLoading() {
|
|
var loadElem = document.createElement('div');
|
|
loadElem.id = 'logLoading';
|
|
loadElem.style.textAlign = 'center';
|
|
loadElem.style.padding = '10px';
|
|
loadElem.innerHTML = '<div class="layui-anim layui-anim-rotate layui-icon layui-icon-loading"></div> 加载中...';
|
|
logContainer.insertBefore(loadElem, logContainer.firstChild);
|
|
}
|
|
|
|
// 隐藏加载中状态
|
|
function hideLoading() {
|
|
var loadElem = document.getElementById('logLoading');
|
|
if (loadElem) {
|
|
logContainer.removeChild(loadElem);
|
|
}
|
|
}
|
|
|
|
// 监听日志返回事件
|
|
socket.on(PCMachineGUID+'CMDRLog', function(data) {
|
|
// 先隐藏加载中状态
|
|
hideLoading();
|
|
|
|
// 处理返回的日志数据
|
|
var newLogs = data.Log;
|
|
// 获取当前滚动位置和高度
|
|
var scrollTop = logContainer.scrollTop;
|
|
var scrollHeight = logContainer.scrollHeight;
|
|
// 插入新日志到顶部
|
|
var currentContent = logContainer.textContent;
|
|
if (currentContent) {
|
|
logContainer.textContent = newLogs + '\n' + currentContent;
|
|
} else {
|
|
logContainer.textContent = newLogs;
|
|
}
|
|
// 恢复滚动位置，保持用户体验
|
|
var newScrollHeight = logContainer.scrollHeight;
|
|
logContainer.scrollTop = scrollTop + (newScrollHeight - scrollHeight);
|
|
// 重置加载状态
|
|
loading = false;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |