vpn_based_remote_access_system
Version:
毕设：基于OpenVPN的远程访问系统
131 lines (113 loc) • 5.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统管理员界面</title>
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
margin-top: 5px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>系统管理员界面</h2>
<button type="button" class="collapsible">用户管理</button>
<div class="content">
<p>系统内用户信息如下</p>
<div id="userManagement"></div>
</div>
<button type="button" class="collapsible">日志管理</button>
<div class="content">
<p>日志信息如下</p>
<select id="logDates" onchange="loadLogs(this.value)"></select>
<pre id="logContent"></pre>
</div>
<button type="button" class="collapsible">连接管理</button>
<div class="content">
<p>代理服务器连接情况如下</p>
<div id="linkManagement"></div>
</div>
<script>
let lastLogTime = '';
const coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
const content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
async function loadUsers() {
const response = await fetch('/adminUsers');
const data = await response.json();
const container = document.getElementById('userManagement');
let html = `<table border="1"><tr><th>用户名</th><th>邮箱</th><th>IP地址</th><th>分配端口</th><th>登录时间</th><th>注册时间</th></tr>`;
data.data.forEach(user => {
html += `<tr><td>${user.username}</td><td>${user.email}</td><td>${user.ip}</td><td>${user.port}</td><td>${user.last_login_at}</td><td>${user.registered_at}</td></tr>`;
});
html += `</table>`;
container.innerHTML = html;
}
async function loadLogs(date = '') {
const url = `/adminLogs?date=${date}` + (lastLogTime ? `&lastLogTime=${encodeURIComponent(lastLogTime)}` : '');
const response = await fetch(url);
const data = await response.json();
if (data.log) {
const logContent = document.getElementById('logContent');
logContent.textContent += data.log + '\n'; // 追加新的日志内容
}
if (data.newLastLogTime) {
lastLogTime = data.newLastLogTime; // 更新 lastLogTime 为最新的日志时间戳
}
}
async function loadUserIps() {
const response = await fetch('/adminUser_ips');
const data = await response.json();
const container = document.getElementById('linkManagement');
let htmlRunning = `<h3>正在运行的服务器</h3><table border="1"><tr><th>用户名</th><th>IP地址</th><th>分配端口</th><th>上次服务器运行时长</th><th>上次服务器启动时间<tr><th>`;
data.data.running.forEach(userIp => {
htmlRunning += `<tr><td>${userIp.username}</td><td>${userIp.ip}</td><td>${userIp.port}</td><td>${userIp.serverStartDuration}</td><td>${userIp.serverStartTime}</td></tr>`;
});
htmlRunning += `</table>`;
let htmlNotRunning = `<h3>未运行的服务器</h3><table border="1"><tr><th>用户名</th><th>IP地址</th><th>分配端口</th><th>上次服务器运行时长</th><th>上次服务器启动时间<tr><th>`;
data.data.notRunning.forEach(userIp => {
htmlNotRunning += `<tr><td>${userIp.username}</td><td>${userIp.ip}</td><td>${userIp.port}</td><td>${userIp.serverStartDuration}</td><td>${userIp.serverStartTime}</td></tr>`;
});
htmlNotRunning += `</table>`;
container.innerHTML = htmlRunning + htmlNotRunning;
}
setInterval(() => {
const today = new Date().toISOString().slice(0, 10);
loadLogs(today);
loadUserIps()
}, 3000); // 每 3 秒更新一次
document.addEventListener('DOMContentLoaded', function () {
loadUsers();
loadUserIps();
});
</script>
</body>
</html>