1620 lines
58 KiB
JavaScript
1620 lines
58 KiB
JavaScript
// API 基础 URL
|
||
const API_BASE_URL = '/api';
|
||
|
||
// 当前时间范围
|
||
let currentTimeRange = '24h';
|
||
|
||
// 自定义时间范围
|
||
let customStartTime = '';
|
||
let customEndTime = '';
|
||
|
||
// 当前选中的设备ID
|
||
let currentDeviceID = 'default';
|
||
|
||
// 当前时间区间（默认10秒）
|
||
let currentInterval = '10s';
|
||
|
||
// WebSocket连接
|
||
let ws = null;
|
||
// WebSocket重连次数
|
||
let wsReconnectAttempts = 0;
|
||
// WebSocket最大重连次数
|
||
const wsMaxReconnectAttempts = 5;
|
||
// WebSocket重连延迟（毫秒）
|
||
let wsReconnectDelay = 1000;
|
||
|
||
// 格式化字节数，根据用户要求：只在MB和GB之间转换
|
||
function formatBytes(bytes, decimals = 2, isRate = false) {
|
||
if (bytes === 0) {
|
||
return isRate ? '0 MB/s' : '0 MB';
|
||
}
|
||
|
||
const mb = 1024 * 1024;
|
||
const gb = mb * 1024;
|
||
const dm = decimals < 0 ? 0 : decimals;
|
||
|
||
// 对于速率（bytes/s）：默认显示MB/s，超过1024MB/s显示GB/s
|
||
if (isRate) {
|
||
if (bytes >= gb) {
|
||
return parseFloat((bytes / gb).toFixed(dm)) + ' GB/s';
|
||
} else {
|
||
return parseFloat((bytes / mb).toFixed(dm)) + ' MB/s';
|
||
}
|
||
}
|
||
// 对于流量（bytes）：默认显示MB，超过1024MB显示GB
|
||
else {
|
||
if (bytes >= gb) {
|
||
return parseFloat((bytes / gb).toFixed(dm)) + ' GB';
|
||
} else {
|
||
return parseFloat((bytes / mb).toFixed(dm)) + ' MB';
|
||
}
|
||
}
|
||
}
|
||
|
||
// 图表实例对象
|
||
const charts = {};
|
||
|
||
// 初始化应用
|
||
function initApp() {
|
||
// 初始化页面切换
|
||
initPageSwitch();
|
||
|
||
// 绑定事件
|
||
bindEvents();
|
||
|
||
// 加载设备列表
|
||
loadDevices();
|
||
|
||
// 初始化WebSocket连接
|
||
initWebSocket();
|
||
|
||
// 初始化图表
|
||
initCharts();
|
||
|
||
// 初始化首页图表
|
||
initHomeCharts();
|
||
|
||
// 初始化服务器详情页面图表
|
||
initServerCharts();
|
||
|
||
// 加载首页数据
|
||
loadHomeData();
|
||
|
||
// 加载所有设备状态
|
||
loadAllDevicesStatus();
|
||
|
||
// 加载服务器数量
|
||
loadServerCount();
|
||
|
||
// 设置定时刷新（每30秒）
|
||
setInterval(loadMetrics, 30000);
|
||
setInterval(loadAllDevicesStatus, 30000);
|
||
setInterval(loadServerCount, 30000);
|
||
}
|
||
|
||
// 加载服务器数量
|
||
async function loadServerCount() {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/devices/`);
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch devices');
|
||
}
|
||
|
||
const data = await response.json();
|
||
const devices = data.devices;
|
||
|
||
// 更新服务器卡片上的服务器数量
|
||
const serverCountElement = document.getElementById('serverCount');
|
||
if (serverCountElement) {
|
||
serverCountElement.textContent = devices.length;
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load server count:', error);
|
||
}
|
||
}
|
||
|
||
// 初始化页面切换
|
||
function initPageSwitch() {
|
||
// 页面加载时初始化页面显示
|
||
switchPage();
|
||
|
||
// 监听hashchange事件，当URL的hash值变化时触发页面切换
|
||
window.addEventListener('hashchange', switchPage);
|
||
}
|
||
|
||
// 页面切换函数
|
||
function switchPage() {
|
||
// 获取当前URL的hash值
|
||
const hash = window.location.hash;
|
||
|
||
// 隐藏所有内容区域
|
||
document.getElementById('homeContent').classList.add('hidden');
|
||
document.getElementById('dashboardContent').classList.add('hidden');
|
||
document.getElementById('serversContent').classList.add('hidden');
|
||
document.getElementById('devicesContent').classList.add('hidden');
|
||
document.getElementById('dashboardActions').classList.add('hidden');
|
||
|
||
// 根据hash值显示对应的内容区域
|
||
if (hash === '#dashboard' || hash === '#servers') {
|
||
// 显示仪表盘内容，包含所有监控服务器的列表
|
||
document.getElementById('dashboardContent').classList.remove('hidden');
|
||
document.getElementById('dashboardActions').classList.remove('hidden');
|
||
// 加载所有设备状态
|
||
loadAllDevicesStatus();
|
||
// 加载设备列表
|
||
loadDevices();
|
||
} else if (hash === '#devices') {
|
||
// 显示设备管理页面
|
||
document.getElementById('devicesContent').classList.remove('hidden');
|
||
// 加载设备管理列表
|
||
loadDeviceManagementList();
|
||
} else {
|
||
// 显示首页内容
|
||
document.getElementById('homeContent').classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
// 初始化首页图表
|
||
function initHomeCharts() {
|
||
// 近一周告警/跟进走势图表
|
||
const alarmTrendCtx = document.getElementById('alarmTrendChart');
|
||
if (alarmTrendCtx) {
|
||
new Chart(alarmTrendCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['11-24', '11-25', '11-26', '11-27', '11-28', '11-29', '11-30'],
|
||
datasets: [
|
||
{
|
||
label: '报警',
|
||
data: [50, 60, 75, 80, 90, 100, 112],
|
||
borderColor: '#ef4444',
|
||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
},
|
||
{
|
||
label: '提醒',
|
||
data: [20, 25, 30, 35, 38, 38, 38],
|
||
borderColor: '#f59e0b',
|
||
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
},
|
||
{
|
||
label: '登记',
|
||
data: [80, 85, 90, 95, 100, 100, 100],
|
||
borderColor: '#eab308',
|
||
backgroundColor: 'rgba(234, 179, 8, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
},
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false,
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
grid: {
|
||
display: false,
|
||
},
|
||
},
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: {
|
||
color: 'rgba(0, 0, 0, 0.05)',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
// 初始化服务器详情页面图表
|
||
function initServerCharts() {
|
||
// 服务器品牌分布饼图
|
||
const serverBrandCtx = document.getElementById('serverBrandChart');
|
||
if (serverBrandCtx) {
|
||
new Chart(serverBrandCtx, {
|
||
type: 'pie',
|
||
data: {
|
||
labels: ['戴尔', '惠普', '联想', '华为'],
|
||
datasets: [
|
||
{
|
||
data: [24, 18, 12, 30],
|
||
backgroundColor: [
|
||
'#3b82f6', // 蓝色
|
||
'#10b981', // 绿色
|
||
'#f59e0b', // 黄色
|
||
'#ef4444', // 红色
|
||
],
|
||
borderWidth: 0,
|
||
},
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'bottom',
|
||
},
|
||
tooltip: {
|
||
callbacks: {
|
||
label: function(context) {
|
||
const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
|
||
const percentage = ((context.parsed / total) * 100).toFixed(1);
|
||
return `${context.label}: ${context.parsed} 台 (${percentage}%)`;
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
|
||
// 近一周告警趋势线图
|
||
const serverAlarmTrendCtx = document.getElementById('serverAlarmTrendChart');
|
||
if (serverAlarmTrendCtx) {
|
||
new Chart(serverAlarmTrendCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['11-24', '11-25', '11-26', '11-27', '11-28', '11-29', '11-30'],
|
||
datasets: [
|
||
{
|
||
label: 'CPU告警',
|
||
data: [12, 15, 18, 14, 20, 22, 25],
|
||
borderColor: '#ef4444',
|
||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
},
|
||
{
|
||
label: '内存告警',
|
||
data: [8, 10, 12, 9, 14, 16, 18],
|
||
borderColor: '#f59e0b',
|
||
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
},
|
||
{
|
||
label: '磁盘告警',
|
||
data: [5, 7, 9, 6, 11, 13, 15],
|
||
borderColor: '#eab308',
|
||
backgroundColor: 'rgba(234, 179, 8, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
},
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
grid: {
|
||
display: false,
|
||
},
|
||
},
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: {
|
||
color: 'rgba(0, 0, 0, 0.05)',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载首页数据
|
||
function loadHomeData() {
|
||
// 加载业务视图数据
|
||
loadBusinessViewData();
|
||
|
||
// 加载告警列表数据
|
||
loadAlarmListData();
|
||
}
|
||
|
||
// 加载业务视图数据
|
||
function loadBusinessViewData() {
|
||
// 模拟数据
|
||
const businessData = [
|
||
{
|
||
name: 'LIS',
|
||
ip: '192.129.6.108',
|
||
os: 'Linux',
|
||
status: 'P1',
|
||
cpuAlarm: 5,
|
||
},
|
||
{
|
||
name: '互联网医院（苹果站）',
|
||
ip: '192.129.6.57',
|
||
os: 'Linux',
|
||
status: 'P3',
|
||
cpuAlarm: 3,
|
||
},
|
||
{
|
||
name: 'HIS',
|
||
ip: '192.129.51.21',
|
||
os: 'Windows',
|
||
status: 'P2',
|
||
cpuAlarm: 3,
|
||
},
|
||
{
|
||
name: 'OA',
|
||
ip: '192.129.6.42',
|
||
os: 'Linux',
|
||
status: 'P2',
|
||
cpuAlarm: 2,
|
||
},
|
||
{
|
||
name: 'HR数据库',
|
||
ip: '192.129.17.11',
|
||
os: 'Linux',
|
||
status: 'P1',
|
||
cpuAlarm: 2,
|
||
},
|
||
{
|
||
name: '测试环境',
|
||
ip: '192.129.7.199',
|
||
os: 'Linux',
|
||
status: 'P4',
|
||
cpuAlarm: 2,
|
||
},
|
||
{
|
||
name: '眼科专科',
|
||
ip: '192.129.5.70',
|
||
os: 'Linux',
|
||
status: 'P3',
|
||
cpuAlarm: 1,
|
||
},
|
||
{
|
||
name: '两腺科',
|
||
ip: '192.129.5.40',
|
||
os: 'Linux',
|
||
status: 'P3',
|
||
cpuAlarm: 1,
|
||
},
|
||
];
|
||
|
||
// 更新业务视图表格
|
||
const tableBody = document.getElementById('businessViewTableBody');
|
||
if (tableBody) {
|
||
tableBody.innerHTML = '';
|
||
|
||
businessData.forEach(item => {
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.name}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.ip}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.os}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.status}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<div class="flex items-center gap-1">
|
||
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
|
||
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
||
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
<div class="w-32 bg-gray-200 rounded-full h-2">
|
||
<div class="bg-green-500 h-2 rounded-full" style="width: ${Math.min(item.cpuAlarm * 20, 100)}%"></div>
|
||
</div>
|
||
</td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载告警列表数据
|
||
function loadAlarmListData() {
|
||
// 模拟数据
|
||
const alarmData = [
|
||
{
|
||
level: 'warning',
|
||
message: 'CPU使用率超过阈值',
|
||
device: '192.129.6.108',
|
||
time: '2023-11-30 14:30:00',
|
||
},
|
||
{
|
||
level: 'error',
|
||
message: '内存使用率超过阈值',
|
||
device: '192.129.6.57',
|
||
time: '2023-11-30 14:28:00',
|
||
},
|
||
{
|
||
level: 'warning',
|
||
message: '磁盘使用率超过阈值',
|
||
device: '192.129.51.21',
|
||
time: '2023-11-30 14:25:00',
|
||
},
|
||
{
|
||
level: 'info',
|
||
message: '网络流量异常',
|
||
device: '192.129.6.42',
|
||
time: '2023-11-30 14:20:00',
|
||
},
|
||
];
|
||
|
||
// 更新告警列表
|
||
const alarmList = document.getElementById('alarmList');
|
||
if (alarmList) {
|
||
alarmList.innerHTML = '';
|
||
|
||
alarmData.forEach(item => {
|
||
const alarmItem = document.createElement('div');
|
||
alarmItem.className = 'p-3 bg-gray-50 rounded-md border-l-4 ';
|
||
|
||
// 根据告警级别设置不同的边框颜色
|
||
let borderColor = '';
|
||
let iconColor = '';
|
||
let levelText = '';
|
||
switch (item.level) {
|
||
case 'error':
|
||
borderColor = 'border-red-500';
|
||
iconColor = 'text-red-500';
|
||
levelText = '错误';
|
||
break;
|
||
case 'warning':
|
||
borderColor = 'border-yellow-500';
|
||
iconColor = 'text-yellow-500';
|
||
levelText = '警告';
|
||
break;
|
||
case 'info':
|
||
borderColor = 'border-blue-500';
|
||
iconColor = 'text-blue-500';
|
||
levelText = '信息';
|
||
break;
|
||
}
|
||
|
||
alarmItem.className += borderColor;
|
||
alarmItem.innerHTML = `
|
||
<div class="flex justify-between items-start">
|
||
<div class="flex items-center gap-2">
|
||
<svg class="w-5 h-5 ${iconColor}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||
</svg>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-900">${item.message}</p>
|
||
<p class="text-xs text-gray-500">${item.device}</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-gray-500">${item.time}</div>
|
||
</div>
|
||
`;
|
||
alarmList.appendChild(alarmItem);
|
||
});
|
||
}
|
||
}
|
||
|
||
// 绑定事件
|
||
function bindEvents() {
|
||
// 设备选择事件
|
||
document.getElementById('deviceSelect').addEventListener('change', function() {
|
||
currentDeviceID = this.value;
|
||
loadMetrics();
|
||
});
|
||
|
||
// 时间设置选择器事件
|
||
document.getElementById('timeSettings').addEventListener('change', function() {
|
||
// 获取选择的值
|
||
let selectedValue = this.value;
|
||
|
||
// 转换时间范围，将1d、3d、5d转换为对应的小时数
|
||
switch (selectedValue) {
|
||
case '1d':
|
||
currentTimeRange = '24h';
|
||
break;
|
||
case '3d':
|
||
currentTimeRange = '72h';
|
||
break;
|
||
case '5d':
|
||
currentTimeRange = '120h';
|
||
break;
|
||
default:
|
||
currentTimeRange = selectedValue;
|
||
}
|
||
|
||
// 根据时间范围自动调整时间区间
|
||
if (currentTimeRange === '5s') {
|
||
// 5秒时间范围，使用5秒时间区间
|
||
currentInterval = '5s';
|
||
} else if (currentTimeRange === '10s' || currentTimeRange === '15s' || currentTimeRange === '30s') {
|
||
// 10秒到30秒时间范围，使用10秒时间区间
|
||
currentInterval = '10s';
|
||
} else if (currentTimeRange === '1h' || currentTimeRange === '3h' || currentTimeRange === '5h') {
|
||
// 中等时间范围，使用中等时间区间
|
||
currentInterval = '1m';
|
||
} else if (currentTimeRange === '24h' || currentTimeRange === '72h' || currentTimeRange === '120h') {
|
||
// 长时间范围，使用较大的时间区间
|
||
currentInterval = '1h';
|
||
} else {
|
||
// 自定义时间范围，默认使用1小时区间
|
||
currentInterval = '1h';
|
||
}
|
||
|
||
// 隐藏自定义时间范围选择器
|
||
document.getElementById('customTimeRange').classList.add('hidden');
|
||
|
||
// 加载数据
|
||
loadMetrics();
|
||
});
|
||
|
||
// 刷新按钮事件
|
||
document.getElementById('refreshBtn').addEventListener('click', function() {
|
||
loadMetrics();
|
||
loadAllDevicesStatus();
|
||
});
|
||
}
|
||
|
||
// 初始化WebSocket连接
|
||
function initWebSocket() {
|
||
// 动态生成WebSocket URL，确保协议一致性
|
||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||
const wsUrl = `${protocol}//${window.location.host}/api/ws`;
|
||
|
||
console.log(`正在连接WebSocket: ${wsUrl}`);
|
||
|
||
// 创建WebSocket连接
|
||
ws = new WebSocket(wsUrl);
|
||
|
||
// 连接打开事件
|
||
ws.onopen = function() {
|
||
console.log('WebSocket连接已打开');
|
||
// 重置重连计数和延迟
|
||
wsReconnectAttempts = 0;
|
||
wsReconnectDelay = 1000;
|
||
};
|
||
|
||
// 接收消息事件
|
||
ws.onmessage = function(event) {
|
||
try {
|
||
// 解析消息
|
||
const message = JSON.parse(event.data);
|
||
|
||
// 处理不同类型的消息
|
||
switch(message.type) {
|
||
case 'metrics_update':
|
||
handleMetricsUpdate(message);
|
||
break;
|
||
default:
|
||
console.log('未知消息类型:', message.type);
|
||
}
|
||
} catch (error) {
|
||
console.error('解析WebSocket消息失败:', error);
|
||
}
|
||
};
|
||
|
||
// 连接关闭事件
|
||
ws.onclose = function(event) {
|
||
console.log(`WebSocket连接已关闭: ${event.code} - ${event.reason}`);
|
||
|
||
// 尝试重连
|
||
if (wsReconnectAttempts < wsMaxReconnectAttempts) {
|
||
wsReconnectAttempts++;
|
||
// 指数退避重连
|
||
wsReconnectDelay *= 2;
|
||
console.log(`尝试重新连接WebSocket (${wsReconnectAttempts}/${wsMaxReconnectAttempts})，${wsReconnectDelay}ms后重试`);
|
||
setTimeout(initWebSocket, wsReconnectDelay);
|
||
} else {
|
||
console.error('WebSocket重连失败，已达到最大重连次数');
|
||
}
|
||
};
|
||
|
||
// 连接错误事件
|
||
ws.onerror = function(error) {
|
||
console.error('WebSocket连接错误:', error);
|
||
};
|
||
}
|
||
|
||
// 处理指标更新消息
|
||
function handleMetricsUpdate(message) {
|
||
const { device_id, metrics } = message;
|
||
|
||
// 如果是当前选中的设备，更新状态卡片和图表
|
||
if (device_id === currentDeviceID) {
|
||
// 更新状态卡片
|
||
updateStatusCardsFromWebSocket(metrics);
|
||
// 重新加载指标数据，更新图表
|
||
loadMetrics();
|
||
}
|
||
|
||
// 无论是否选中，都更新设备概览
|
||
loadAllDevicesStatus();
|
||
}
|
||
|
||
// 从WebSocket更新状态卡片
|
||
function updateStatusCardsFromWebSocket(metrics) {
|
||
// 更新CPU状态卡片
|
||
if (metrics.cpu !== undefined) {
|
||
document.getElementById('cpuValue').textContent = `${metrics.cpu.toFixed(1)}%`;
|
||
}
|
||
|
||
// 更新内存状态卡片
|
||
if (metrics.memory !== undefined) {
|
||
document.getElementById('memoryValue').textContent = `${metrics.memory.toFixed(1)}%`;
|
||
}
|
||
|
||
// 更新磁盘状态卡片
|
||
if (metrics.disk !== undefined) {
|
||
// 如果是按挂载点分组的对象
|
||
if (typeof metrics.disk === 'object' && metrics.disk !== null && !Array.isArray(metrics.disk)) {
|
||
// 计算所有挂载点的平均使用率
|
||
let totalUsage = 0;
|
||
let mountpointCount = 0;
|
||
|
||
for (const mountpoint in metrics.disk) {
|
||
const usage = metrics.disk[mountpoint];
|
||
totalUsage += usage;
|
||
mountpointCount++;
|
||
}
|
||
|
||
if (mountpointCount > 0) {
|
||
const averageUsage = totalUsage / mountpointCount;
|
||
document.getElementById('diskValue').textContent = `${averageUsage.toFixed(1)}%`;
|
||
}
|
||
} else {
|
||
// 兼容旧格式，直接使用数值
|
||
document.getElementById('diskValue').textContent = `${metrics.disk.toFixed(1)}%`;
|
||
}
|
||
}
|
||
|
||
// 更新网络状态卡片
|
||
if (metrics.network) {
|
||
const sentMB = (metrics.network.bytes_sent / (1024 * 1024)).toFixed(2);
|
||
const receivedMB = (metrics.network.bytes_received / (1024 * 1024)).toFixed(2);
|
||
document.getElementById('networkSent').textContent = sentMB;
|
||
document.getElementById('networkReceived').textContent = receivedMB;
|
||
document.getElementById('networkValue').textContent = `${Math.max(parseFloat(sentMB), parseFloat(receivedMB)).toFixed(2)} MB/s`;
|
||
}
|
||
}
|
||
|
||
|
||
// 加载设备列表
|
||
async function loadDevices() {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/devices/`);
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch devices');
|
||
}
|
||
|
||
const data = await response.json();
|
||
const devices = data.devices;
|
||
|
||
// 更新设备选择器
|
||
const deviceSelect = document.getElementById('deviceSelect');
|
||
deviceSelect.innerHTML = '';
|
||
|
||
// 添加设备选项
|
||
devices.forEach(device => {
|
||
const option = document.createElement('option');
|
||
option.value = device.id;
|
||
option.textContent = device.name || device.id;
|
||
if (device.id === currentDeviceID) {
|
||
option.selected = true;
|
||
}
|
||
deviceSelect.appendChild(option);
|
||
});
|
||
|
||
// 如果设备列表为空，显示提示信息
|
||
if (devices.length === 0) {
|
||
console.warn('No devices available');
|
||
// 可以添加显示提示信息的逻辑
|
||
return;
|
||
}
|
||
|
||
// 如果没有选中的设备（即currentDeviceID不存在于设备列表中），则自动选择第一个设备
|
||
if (!deviceSelect.value) {
|
||
currentDeviceID = devices[0].id;
|
||
deviceSelect.value = currentDeviceID;
|
||
}
|
||
|
||
// 加载数据
|
||
loadMetrics();
|
||
} catch (error) {
|
||
console.error('Failed to load devices:', error);
|
||
// 显示友好的错误提示
|
||
alert('加载设备列表失败，请稍后重试');
|
||
}
|
||
}
|
||
|
||
// 加载所有监控指标
|
||
async function loadMetrics() {
|
||
try {
|
||
// 检查currentDeviceID是否有效
|
||
if (!currentDeviceID || currentDeviceID === 'default') {
|
||
console.warn('No valid device selected, skipping metrics load');
|
||
return;
|
||
}
|
||
|
||
// 并行加载所有指标
|
||
const [cpuData, memoryData, diskData, networkSumData, networkRateData] = await Promise.all([
|
||
fetchMetric('cpu'),
|
||
fetchMetric('memory'),
|
||
fetchMetric('disk'),
|
||
fetchMetric('network', 'sum'), // 获取总流量数据
|
||
fetchMetric('network', 'average') // 获取速率数据
|
||
]);
|
||
|
||
// 更新状态卡片（同时使用总流量和速率数据）
|
||
updateStatusCards(cpuData, memoryData, diskData, networkSumData, networkRateData);
|
||
|
||
// 更新图表
|
||
updateCharts(cpuData, memoryData, diskData, networkSumData, networkRateData);
|
||
} catch (error) {
|
||
console.error('Failed to load metrics:', error);
|
||
// 显示友好的错误提示
|
||
alert('加载监控数据失败，请稍后重试');
|
||
}
|
||
}
|
||
|
||
// 获取单个指标数据
|
||
async function fetchMetric(metricType, aggregation = 'average') {
|
||
// 构建查询参数
|
||
const params = new URLSearchParams();
|
||
|
||
// 设置设备ID
|
||
params.append('device_id', currentDeviceID);
|
||
|
||
// 设置时间范围参数
|
||
if (currentTimeRange === 'custom') {
|
||
if (customStartTime && customEndTime) {
|
||
params.append('start_time', customStartTime);
|
||
params.append('end_time', customEndTime);
|
||
}
|
||
} else {
|
||
params.append('start_time', `-${currentTimeRange}`);
|
||
params.append('end_time', 'now()');
|
||
}
|
||
|
||
// 设置聚合方式
|
||
params.append('aggregation', aggregation);
|
||
|
||
// 设置时间区间
|
||
params.append('interval', currentInterval);
|
||
|
||
// 发送请求
|
||
const response = await fetch(`${API_BASE_URL}/metrics/${metricType}?${params.toString()}`);
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`Failed to fetch ${metricType} metrics`);
|
||
}
|
||
|
||
const data = await response.json();
|
||
return data.data;
|
||
}
|
||
|
||
// 更新状态卡片
|
||
function updateStatusCards(cpuData, memoryData, diskData, networkSumData, networkRateData) {
|
||
// 更新CPU状态卡片
|
||
if (cpuData && cpuData.length > 0) {
|
||
const latestCPU = cpuData[cpuData.length - 1].value;
|
||
document.getElementById('cpuValue').textContent = `${latestCPU.toFixed(1)}%`;
|
||
}
|
||
|
||
// 更新内存状态卡片
|
||
if (memoryData && memoryData.length > 0) {
|
||
const latestMemory = memoryData[memoryData.length - 1].value;
|
||
document.getElementById('memoryValue').textContent = `${latestMemory.toFixed(1)}%`;
|
||
}
|
||
|
||
// 更新磁盘状态卡片
|
||
if (diskData && typeof diskData === 'object') {
|
||
// 计算所有挂载点的平均使用率
|
||
let totalUsage = 0;
|
||
let mountpointCount = 0;
|
||
|
||
// 如果是按挂载点分组的map
|
||
if (diskData.constructor === Object && !Array.isArray(diskData)) {
|
||
for (const mountpoint in diskData) {
|
||
const data = diskData[mountpoint];
|
||
if (data && data.length > 0) {
|
||
const latestValue = data[data.length - 1].value;
|
||
totalUsage += latestValue;
|
||
mountpointCount++;
|
||
}
|
||
}
|
||
} else if (Array.isArray(diskData) && diskData.length > 0) {
|
||
// 兼容旧格式，直接使用第一个值
|
||
const latestDisk = diskData[diskData.length - 1].value;
|
||
document.getElementById('diskValue').textContent = `${latestDisk.toFixed(1)}%`;
|
||
return;
|
||
}
|
||
|
||
// 计算平均值
|
||
if (mountpointCount > 0) {
|
||
const averageUsage = totalUsage / mountpointCount;
|
||
document.getElementById('diskValue').textContent = `${averageUsage.toFixed(1)}%`;
|
||
}
|
||
}
|
||
|
||
// 更新网络状态卡片
|
||
if (networkSumData && networkSumData.sent && networkSumData.received &&
|
||
networkRateData && networkRateData.sent && networkRateData.received) {
|
||
|
||
// 获取最新的总流量数据
|
||
const latestSentSum = networkSumData.sent[networkSumData.sent.length - 1].value;
|
||
const latestReceivedSum = networkSumData.received[networkSumData.received.length - 1].value;
|
||
|
||
// 计算当前时间段内的平均速率
|
||
const calculateAverageRate = (data) => {
|
||
if (data.length === 0) return 0;
|
||
let sum = 0;
|
||
for (const item of data) {
|
||
sum += item.y;
|
||
}
|
||
return sum / data.length;
|
||
};
|
||
|
||
const avgSentRate = calculateAverageRate(networkRateData.sent);
|
||
const avgReceivedRate = calculateAverageRate(networkRateData.received);
|
||
|
||
// 格式化总流量和速率
|
||
const sentSumFormatted = formatBytes(latestSentSum, 2, false);
|
||
const receivedSumFormatted = formatBytes(latestReceivedSum, 2, false);
|
||
const sentRateFormatted = formatBytes(avgSentRate * 1024 * 1024, 2, true);
|
||
const receivedRateFormatted = formatBytes(avgReceivedRate * 1024 * 1024, 2, true);
|
||
|
||
// 大字区域显示总流量（显示较大的那个值）
|
||
const maxSum = Math.max(latestSentSum, latestReceivedSum);
|
||
document.getElementById('networkValue').textContent = formatBytes(maxSum, 2, false);
|
||
|
||
// 小字区域显示当前时间段内的平均速率
|
||
document.getElementById('networkSent').textContent = sentRateFormatted;
|
||
document.getElementById('networkReceived').textContent = receivedRateFormatted;
|
||
}
|
||
}
|
||
|
||
// 初始化图表
|
||
function initCharts() {
|
||
// 图表配置
|
||
const chartConfig = {
|
||
type: 'line',
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
interaction: {
|
||
intersect: false,
|
||
mode: 'index',
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: true,
|
||
position: 'top',
|
||
},
|
||
tooltip: {
|
||
mode: 'index',
|
||
intersect: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
let label = context.dataset.label || '';
|
||
if (label) {
|
||
label += ': ';
|
||
}
|
||
if (context.parsed.y !== null) {
|
||
// 根据数据集标签判断是流量还是速率
|
||
const isRate = label.includes('速率');
|
||
// 注意：context.parsed.y 已经是转换为MB的值，所以需要转换回bytes
|
||
label += formatBytes(context.parsed.y * 1024 * 1024, 2, isRate);
|
||
}
|
||
return label;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
type: 'category',
|
||
grid: {
|
||
display: false,
|
||
},
|
||
ticks: {
|
||
maxRotation: 0, // 水平显示标签，减少占用空间
|
||
minRotation: 0,
|
||
maxTicksLimit: 8, // 减少最大刻度数量，避免过于密集
|
||
autoSkip: true, // 自动跳过标签
|
||
autoSkipPadding: 10, // 标签之间的最小间距
|
||
callback: function(value, index, values) {
|
||
// 进一步优化，只显示部分标签
|
||
// 对于长时间范围，只显示每n个标签中的一个
|
||
if (currentTimeRange === '24h' || currentTimeRange === '72h' || currentTimeRange === '120h') {
|
||
// 对于天级时间范围，每4个标签显示一个
|
||
return index % 4 === 0 ? value : '';
|
||
} else if (currentTimeRange === '1h' || currentTimeRange === '3h' || currentTimeRange === '5h') {
|
||
// 对于小时级时间范围，每2个标签显示一个
|
||
return index % 2 === 0 ? value : '';
|
||
}
|
||
// 短时间范围，显示所有标签
|
||
return value;
|
||
}
|
||
},
|
||
},
|
||
y: {
|
||
beginAtZero: true,
|
||
grid: {
|
||
color: 'rgba(0, 0, 0, 0.05)',
|
||
},
|
||
ticks: {
|
||
callback: function(value) {
|
||
// 根据数据集标签判断是流量还是速率
|
||
const dataset = this.chart.data.datasets[0];
|
||
const isRate = dataset.label.includes('速率');
|
||
// 注意：value 已经是转换为MB的值，所以需要转换回bytes
|
||
return formatBytes(value * 1024 * 1024, 2, isRate);
|
||
},
|
||
maxTicksLimit: 8, // 限制y轴刻度数量
|
||
}
|
||
},
|
||
},
|
||
animation: {
|
||
duration: 750,
|
||
},
|
||
},
|
||
};
|
||
|
||
// CPU 图表
|
||
charts.cpu = new Chart(
|
||
document.getElementById('cpuChart'),
|
||
{
|
||
...chartConfig,
|
||
data: {
|
||
datasets: [{
|
||
label: 'CPU 使用率',
|
||
data: [],
|
||
borderColor: '#3b82f6', // 蓝色
|
||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
}],
|
||
},
|
||
options: {
|
||
...chartConfig.options,
|
||
scales: {
|
||
...chartConfig.options.scales,
|
||
y: {
|
||
...chartConfig.options.scales.y,
|
||
max: 100,
|
||
ticks: {
|
||
callback: function(value) {
|
||
return value + '%';
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
}
|
||
);
|
||
|
||
// 内存 图表
|
||
charts.memory = new Chart(
|
||
document.getElementById('memoryChart'),
|
||
{
|
||
...chartConfig,
|
||
data: {
|
||
datasets: [{
|
||
label: '内存使用率',
|
||
data: [],
|
||
borderColor: '#10b981', // 绿色
|
||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
}],
|
||
},
|
||
options: {
|
||
...chartConfig.options,
|
||
scales: {
|
||
...chartConfig.options.scales,
|
||
y: {
|
||
...chartConfig.options.scales.y,
|
||
max: 100,
|
||
ticks: {
|
||
callback: function(value) {
|
||
return value + '%';
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
}
|
||
);
|
||
|
||
// 磁盘 图表，支持多个挂载点
|
||
charts.disk = new Chart(
|
||
document.getElementById('diskChart'),
|
||
{
|
||
...chartConfig,
|
||
data: {
|
||
datasets: [],
|
||
},
|
||
options: {
|
||
...chartConfig.options,
|
||
scales: {
|
||
...chartConfig.options.scales,
|
||
y: {
|
||
...chartConfig.options.scales.y,
|
||
max: 100,
|
||
ticks: {
|
||
callback: function(value) {
|
||
return value + '%';
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
}
|
||
);
|
||
|
||
// 网络 图表
|
||
charts.network = new Chart(
|
||
document.getElementById('networkChart'),
|
||
{
|
||
...chartConfig,
|
||
data: {
|
||
datasets: [{
|
||
label: '发送流量',
|
||
data: [],
|
||
borderColor: '#8b5cf6', // 紫色
|
||
backgroundColor: 'rgba(139, 92, 246, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
}, {
|
||
label: '接收流量',
|
||
data: [],
|
||
borderColor: '#ec4899', // 粉色
|
||
backgroundColor: 'rgba(236, 72, 153, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
}],
|
||
},
|
||
}
|
||
);
|
||
|
||
// 网络速率图表
|
||
charts.networkRate = new Chart(
|
||
document.getElementById('networkRateChart'),
|
||
{
|
||
...chartConfig,
|
||
data: {
|
||
datasets: [{
|
||
label: '发送速率',
|
||
data: [],
|
||
borderColor: '#8b5cf6', // 紫色
|
||
backgroundColor: 'rgba(139, 92, 246, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
}, {
|
||
label: '接收速率',
|
||
data: [],
|
||
borderColor: '#ec4899', // 粉色
|
||
backgroundColor: 'rgba(236, 72, 153, 0.1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
}],
|
||
},
|
||
}
|
||
);
|
||
}
|
||
|
||
// 格式化时间，根据时间范围动态调整格式
|
||
function formatTime(timeStr) {
|
||
// timeStr是ISO格式的UTC时间字符串，如"2025-12-02T01:53:19Z"
|
||
const date = new Date(timeStr);
|
||
|
||
// 格式化年、月、日
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
|
||
// 格式化时、分、秒
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
// 根据当前时间范围动态调整时间格式
|
||
if (currentTimeRange === '5s' || currentTimeRange === '10s' || currentTimeRange === '15s' || currentTimeRange === '30s') {
|
||
// 短时间范围（秒级），显示完整时间格式
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
} else if (currentTimeRange === '1h' || currentTimeRange === '3h' || currentTimeRange === '5h') {
|
||
// 中等时间范围（小时级），显示到分钟，不显示秒
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||
} else {
|
||
// 长时间范围（天级），显示到小时，不显示分钟和秒
|
||
return `${year}-${month}-${day} ${hours}:00`;
|
||
}
|
||
}
|
||
|
||
// 更新图表数据
|
||
function updateCharts(cpuData, memoryData, diskData, networkSumData, networkRateData) {
|
||
// 数据点排序函数
|
||
const sortDataByTime = (data) => {
|
||
return [...data].sort((a, b) => {
|
||
return new Date(a.time) - new Date(b.time);
|
||
});
|
||
};
|
||
|
||
// 更新CPU图表
|
||
if (cpuData && cpuData.length > 0) {
|
||
const sortedData = sortDataByTime(cpuData);
|
||
charts.cpu.data.datasets[0].data = sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value
|
||
}));
|
||
charts.cpu.update();
|
||
}
|
||
|
||
// 更新内存图表
|
||
if (memoryData && memoryData.length > 0) {
|
||
const sortedData = sortDataByTime(memoryData);
|
||
charts.memory.data.datasets[0].data = sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value
|
||
}));
|
||
charts.memory.update();
|
||
}
|
||
|
||
// 更新磁盘图表，支持多个挂载点
|
||
if (diskData && typeof diskData === 'object') {
|
||
// 定义不同的颜色，用于区分不同的挂载点
|
||
const colors = [
|
||
{ border: '#f59e0b', background: 'rgba(245, 158, 11, 0.1)' }, // 黄色
|
||
{ border: '#ef4444', background: 'rgba(239, 68, 68, 0.1)' }, // 红色
|
||
{ border: '#10b981', background: 'rgba(16, 185, 129, 0.1)' }, // 绿色
|
||
{ border: '#3b82f6', background: 'rgba(59, 130, 246, 0.1)' }, // 蓝色
|
||
{ border: '#8b5cf6', background: 'rgba(139, 92, 246, 0.1)' }, // 紫色
|
||
{ border: '#ec4899', background: 'rgba(236, 72, 153, 0.1)' }, // 粉色
|
||
];
|
||
|
||
// 清空现有的数据集
|
||
charts.disk.data.datasets = [];
|
||
|
||
// 为每个挂载点创建独立的数据集
|
||
let colorIndex = 0;
|
||
for (const [mountpoint, data] of Object.entries(diskData)) {
|
||
if (data && data.length > 0) {
|
||
// 获取颜色
|
||
const color = colors[colorIndex % colors.length];
|
||
colorIndex++;
|
||
|
||
// 排序数据
|
||
const sortedData = sortDataByTime(data);
|
||
|
||
// 创建数据集
|
||
const dataset = {
|
||
label: `磁盘使用率 (${mountpoint})`,
|
||
data: sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value
|
||
})),
|
||
borderColor: color.border,
|
||
backgroundColor: color.background,
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
};
|
||
|
||
// 添加数据集
|
||
charts.disk.data.datasets.push(dataset);
|
||
}
|
||
}
|
||
|
||
// 更新图表
|
||
charts.disk.update();
|
||
}
|
||
|
||
// 更新网络流量趋势图表（总流量）
|
||
if (networkSumData && networkSumData.sent && networkSumData.received) {
|
||
if (networkSumData.sent.length > 0) {
|
||
const sortedData = sortDataByTime(networkSumData.sent);
|
||
charts.network.data.datasets[0].data = sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value / (1024 * 1024) // 转换为MB，图表会自动格式化
|
||
}));
|
||
}
|
||
|
||
if (networkSumData.received.length > 0) {
|
||
const sortedData = sortDataByTime(networkSumData.received);
|
||
charts.network.data.datasets[1].data = sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value / (1024 * 1024) // 转换为MB，图表会自动格式化
|
||
}));
|
||
}
|
||
|
||
charts.network.update();
|
||
}
|
||
|
||
// 更新网络速率图表
|
||
if (networkRateData && networkRateData.sent && networkRateData.received) {
|
||
if (networkRateData.sent.length > 0) {
|
||
const sortedData = sortDataByTime(networkRateData.sent);
|
||
charts.networkRate.data.datasets[0].data = sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value / (1024 * 1024) // 转换为MB/s，图表会自动格式化
|
||
}));
|
||
}
|
||
|
||
if (networkRateData.received.length > 0) {
|
||
const sortedData = sortDataByTime(networkRateData.received);
|
||
charts.networkRate.data.datasets[1].data = sortedData.map(item => ({
|
||
x: formatTime(item.time),
|
||
y: item.value / (1024 * 1024) // 转换为MB/s，图表会自动格式化
|
||
}));
|
||
}
|
||
|
||
charts.networkRate.update();
|
||
}
|
||
}
|
||
|
||
// 更新图表时间轴配置 - 已废弃，使用time轴后不再需要
|
||
function updateChartTimeRange(timeRange) {
|
||
// 对于time scale，Chart.js会自动处理时间轴配置
|
||
// 此函数保留用于向后兼容
|
||
}
|
||
|
||
// 加载所有设备状态概览
|
||
async function loadAllDevicesStatus() {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/devices/status`);
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch devices status');
|
||
}
|
||
|
||
const data = await response.json();
|
||
const devices = data.devices;
|
||
|
||
// 更新设备概览表格
|
||
const devicesTableBody = document.getElementById('devicesTableBody');
|
||
if (devicesTableBody) {
|
||
devicesTableBody.innerHTML = '';
|
||
|
||
devices.forEach(device => {
|
||
const row = document.createElement('tr');
|
||
// 优先显示设备名称，如果没有则显示设备IP地址
|
||
const displayName = device.name || device.ip || device.device_id;
|
||
row.innerHTML = `
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${displayName}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.device_id}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.status.cpu ? device.status.cpu.toFixed(1) : 'N/A'}%</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.status.memory ? device.status.memory.toFixed(1) : 'N/A'}%</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.status.disk ? device.status.disk.toFixed(1) : 'N/A'}%</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.status.network_sent ? (device.status.network_sent / (1024 * 1024)).toFixed(2) : 'N/A'} MB/s</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.status.network_received ? (device.status.network_received / (1024 * 1024)).toFixed(2) : 'N/A'} MB/s</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||
在线
|
||
</span>
|
||
</td>
|
||
`;
|
||
devicesTableBody.appendChild(row);
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load devices status:', error);
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后初始化应用
|
||
document.addEventListener('DOMContentLoaded', initApp);
|
||
|
||
// 设备管理相关功能
|
||
|
||
// 加载设备管理列表
|
||
async function loadDeviceManagementList() {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/devices/all`);
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch devices');
|
||
}
|
||
|
||
const data = await response.json();
|
||
const devices = data.devices;
|
||
|
||
// 更新设备管理表格
|
||
const deviceManagementTableBody = document.getElementById('deviceManagementTableBody');
|
||
if (deviceManagementTableBody) {
|
||
deviceManagementTableBody.innerHTML = '';
|
||
|
||
devices.forEach(device => {
|
||
const row = document.createElement('tr');
|
||
// 格式化创建时间
|
||
const createdAt = new Date(device.created_at * 1000).toLocaleString();
|
||
|
||
row.innerHTML = `
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${device.name}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.id}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${device.ip || 'N/A'}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<div class="flex items-center">
|
||
<span class="text-sm text-gray-500 truncate max-w-[150px]">${device.token}</span>
|
||
<button class="ml-2 text-blue-600 hover:text-blue-900 copy-token-btn" data-token="${device.token}" title="复制token">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap">
|
||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColorClass(device.status)}">
|
||
${getStatusText(device.status)}
|
||
</span>
|
||
</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${createdAt}</td>
|
||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||
<button class="text-blue-600 hover:text-blue-900 mr-3 edit-device-btn" data-id="${device.id}">编辑</button>
|
||
<button class="text-red-600 hover:text-red-900 delete-device-btn" data-id="${device.id}">删除</button>
|
||
</td>
|
||
`;
|
||
deviceManagementTableBody.appendChild(row);
|
||
});
|
||
|
||
// 绑定设备操作事件（包括复制token）
|
||
bindDeviceActionEvents();
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load device management list:', error);
|
||
}
|
||
}
|
||
|
||
// 根据状态获取颜色类
|
||
function getStatusColorClass(status) {
|
||
switch (status) {
|
||
case 'active':
|
||
return 'bg-green-100 text-green-800';
|
||
case 'inactive':
|
||
return 'bg-yellow-100 text-yellow-800';
|
||
case 'offline':
|
||
return 'bg-red-100 text-red-800';
|
||
default:
|
||
return 'bg-gray-100 text-gray-800';
|
||
}
|
||
}
|
||
|
||
// 根据状态获取文本
|
||
function getStatusText(status) {
|
||
switch (status) {
|
||
case 'active':
|
||
return '活跃';
|
||
case 'inactive':
|
||
return '非活跃';
|
||
case 'offline':
|
||
return '离线';
|
||
default:
|
||
return status;
|
||
}
|
||
}
|
||
|
||
// 绑定设备操作事件
|
||
function bindDeviceActionEvents() {
|
||
// 编辑按钮事件
|
||
document.querySelectorAll('.edit-device-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const deviceId = this.getAttribute('data-id');
|
||
editDevice(deviceId);
|
||
});
|
||
});
|
||
|
||
// 删除按钮事件
|
||
document.querySelectorAll('.delete-device-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const deviceId = this.getAttribute('data-id');
|
||
deleteDevice(deviceId);
|
||
});
|
||
});
|
||
|
||
// 复制token按钮事件
|
||
document.querySelectorAll('.copy-token-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const token = this.getAttribute('data-token');
|
||
navigator.clipboard.writeText(token).then(() => {
|
||
// 显示复制成功提示
|
||
const originalIcon = this.innerHTML;
|
||
this.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
|
||
setTimeout(() => {
|
||
this.innerHTML = originalIcon;
|
||
}, 1000);
|
||
}).catch(err => {
|
||
console.error('Failed to copy token:', err);
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
// 编辑设备
|
||
async function editDevice(deviceId) {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/devices/${deviceId}`);
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch device');
|
||
}
|
||
|
||
const data = await response.json();
|
||
const device = data.device;
|
||
|
||
// 填充表单
|
||
document.getElementById('deviceId').value = device.id;
|
||
document.getElementById('deviceName').value = device.name;
|
||
document.getElementById('deviceIdInput').value = device.id;
|
||
document.getElementById('deviceIp').value = device.ip || '';
|
||
document.getElementById('deviceStatus').value = device.status;
|
||
|
||
// 显示模态框
|
||
document.getElementById('modalTitle').textContent = '编辑设备';
|
||
document.getElementById('deviceModal').classList.remove('hidden');
|
||
} catch (error) {
|
||
console.error('Failed to edit device:', error);
|
||
alert('编辑设备失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// 删除设备
|
||
async function deleteDevice(deviceId) {
|
||
if (confirm('确定要删除该设备吗？')) {
|
||
try {
|
||
const response = await fetch(`${API_BASE_URL}/devices/${deviceId}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to delete device');
|
||
}
|
||
|
||
// 重新加载设备列表
|
||
loadDeviceManagementList();
|
||
} catch (error) {
|
||
console.error('Failed to delete device:', error);
|
||
alert('删除设备失败: ' + error.message);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 初始化设备管理功能
|
||
function initDeviceManagement() {
|
||
// 添加设备按钮事件
|
||
document.getElementById('addDeviceBtn').addEventListener('click', function() {
|
||
// 重置表单
|
||
document.getElementById('deviceForm').reset();
|
||
document.getElementById('deviceId').value = '';
|
||
document.getElementById('deviceStatus').value = 'inactive';
|
||
|
||
// 显示模态框
|
||
document.getElementById('modalTitle').textContent = '添加设备';
|
||
document.getElementById('deviceModal').classList.remove('hidden');
|
||
});
|
||
|
||
// 取消按钮事件
|
||
document.getElementById('cancelBtn').addEventListener('click', function() {
|
||
// 隐藏模态框
|
||
document.getElementById('deviceModal').classList.add('hidden');
|
||
});
|
||
|
||
// 表单提交事件
|
||
document.getElementById('deviceForm').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
|
||
const deviceId = document.getElementById('deviceId').value;
|
||
const name = document.getElementById('deviceName').value;
|
||
const id = document.getElementById('deviceIdInput').value;
|
||
const ip = document.getElementById('deviceIp').value;
|
||
const status = document.getElementById('deviceStatus').value;
|
||
|
||
const deviceData = {
|
||
name,
|
||
id,
|
||
ip,
|
||
status
|
||
};
|
||
|
||
try {
|
||
let response;
|
||
if (deviceId) {
|
||
// 更新设备
|
||
response = await fetch(`${API_BASE_URL}/devices/${deviceId}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(deviceData)
|
||
});
|
||
} else {
|
||
// 添加设备
|
||
response = await fetch(`${API_BASE_URL}/devices/`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(deviceData)
|
||
});
|
||
}
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to save device');
|
||
}
|
||
|
||
// 隐藏模态框
|
||
document.getElementById('deviceModal').classList.add('hidden');
|
||
|
||
// 重新加载设备列表
|
||
loadDeviceManagementList();
|
||
} catch (error) {
|
||
console.error('Failed to save device:', error);
|
||
alert('保存设备失败: ' + error.message);
|
||
}
|
||
});
|
||
|
||
// 状态过滤事件
|
||
document.getElementById('statusFilter').addEventListener('change', function() {
|
||
filterDevices();
|
||
});
|
||
|
||
// 搜索设备事件
|
||
document.getElementById('searchDevice').addEventListener('input', function() {
|
||
filterDevices();
|
||
});
|
||
}
|
||
|
||
// 过滤设备
|
||
function filterDevices() {
|
||
const statusFilter = document.getElementById('statusFilter').value;
|
||
const searchTerm = document.getElementById('searchDevice').value.toLowerCase();
|
||
const rows = document.querySelectorAll('#deviceManagementTableBody tr');
|
||
|
||
rows.forEach(row => {
|
||
// 状态列的索引从4变成了5，因为添加了认证令牌列
|
||
const status = row.querySelector('td:nth-child(5) span').textContent.toLowerCase();
|
||
const name = row.querySelector('td:nth-child(1)').textContent.toLowerCase();
|
||
const id = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
|
||
|
||
let showRow = true;
|
||
|
||
// 状态过滤
|
||
if (statusFilter !== 'all') {
|
||
const statusText = getStatusText(statusFilter);
|
||
if (status !== statusText.toLowerCase()) {
|
||
showRow = false;
|
||
}
|
||
}
|
||
|
||
// 搜索过滤
|
||
if (searchTerm) {
|
||
if (!name.includes(searchTerm) && !id.includes(searchTerm)) {
|
||
showRow = false;
|
||
}
|
||
}
|
||
|
||
// 显示或隐藏行
|
||
if (showRow) {
|
||
row.classList.remove('hidden');
|
||
} else {
|
||
row.classList.add('hidden');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化设备管理功能
|
||
initDeviceManagement(); |