724 lines
39 KiB
JavaScript
724 lines
39 KiB
JavaScript
/**
|
||
* 页面渲染模块
|
||
* 包含各类型页面的渲染函数
|
||
*/
|
||
|
||
// 渲染日志查看页面
|
||
function renderLogViewerPage(config) {
|
||
return `
|
||
<div class="bg-white rounded-lg shadow-sm mb-6">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-100">
|
||
<h2 class="text-lg font-medium">${config.title}</h2>
|
||
<div class="flex items-center space-x-2">
|
||
<button onclick="SystemService.refreshLogs()" class="px-3 py-1.5 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors">
|
||
<i class="fa fa-refresh mr-1"></i>刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<!-- 日志类型切换 -->
|
||
<div class="flex items-center mb-4">
|
||
<div class="flex bg-gray-100 rounded-lg p-1">
|
||
<button id="logTabSystem" onclick="SystemService.switchLogTab('system')" class="px-4 py-1.5 text-sm rounded-md transition-colors bg-white shadow-sm text-primary">
|
||
系统日志
|
||
</button>
|
||
<button id="logTabTraining" onclick="SystemService.switchLogTab('training')" class="px-4 py-1.5 text-sm rounded-md transition-colors text-gray-600 hover:text-gray-800">
|
||
训练日志
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统日志选项 -->
|
||
<div id="systemLogOptions">
|
||
<!-- 日期选择 -->
|
||
<div class="flex items-center flex-wrap gap-4 mb-4">
|
||
<div class="flex items-center">
|
||
<label class="text-sm text-gray-600 mr-3">选择日期:</label>
|
||
<input type="date" id="logDatePicker" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none" onchange="SystemService.loadLogFiles()">
|
||
</div>
|
||
<div class="flex items-center">
|
||
<label class="text-sm text-gray-600 mr-3">自动刷新:</label>
|
||
<select id="logRefreshInterval" onchange="SystemService.setRefreshInterval()" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||
<option value="0">关闭</option>
|
||
<option value="5">5秒</option>
|
||
<option value="10" selected>10秒</option>
|
||
<option value="30">30秒</option>
|
||
<option value="60">60秒</option>
|
||
</select>
|
||
</div>
|
||
<div id="logRefreshCountdown" class="text-sm text-gray-500 hidden">
|
||
<i class="fa fa-clock-o mr-1"></i><span>下次刷新: <span id="countdownNumber">10</span>秒</span>
|
||
</div>
|
||
</div>
|
||
<!-- 日志类型选择 -->
|
||
<div class="flex items-center mb-4">
|
||
<label class="text-sm text-gray-600 mr-3">日志类型:</label>
|
||
<select id="logTypeSelect" onchange="SystemService.loadSelectedLog()" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||
<option value="">请选择日志文件</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 训练日志选项（初始隐藏） -->
|
||
<div id="trainingLogOptions" class="hidden">
|
||
<div class="flex items-center mb-4">
|
||
<label class="text-sm text-gray-600 mr-3">训练日志:</label>
|
||
<select id="trainingLogSelect" onchange="SystemService.loadSelectedTrainingLog()" class="px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none flex-1">
|
||
<option value="">请选择训练日志</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日志内容显示 -->
|
||
<div class="border border-gray-200 rounded-lg">
|
||
<div class="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200">
|
||
<span class="text-sm text-gray-600" id="logFileInfo">请选择日志文件</span>
|
||
<div class="flex items-center space-x-3">
|
||
<input type="text" id="logSearchInput" placeholder="搜索日志..." oninput="SystemService.filterLogContent()" class="px-2 py-1 text-xs border border-gray-300 rounded focus:border-primary focus:outline-none">
|
||
<span id="logMatchCount" class="text-xs text-gray-500"></span>
|
||
<button onclick="SystemService.clearLogContent()" class="text-xs text-gray-500 hover:text-primary">清空</button>
|
||
</div>
|
||
</div>
|
||
<pre id="logContent" class="p-4 text-xs font-mono bg-gray-900 text-gray-100 overflow-auto max-h-[600px]" style="white-space: pre-wrap; word-wrap: break-word;">日志内容将在这里显示...</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 渲染工具卡片页面
|
||
function renderToolsPage(config) {
|
||
const renderToolCard = (tool, canDelete = false, isCustom = false) => `
|
||
<div class="relative group border border-gray-200 rounded-lg p-6 cursor-pointer hover:border-primary hover:shadow-md transition-all" onclick="navigateToTool('${tool.id}', '${tool.url || ''}', ${isCustom})">
|
||
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
|
||
<i class="fa ${tool.icon} text-xl text-primary"></i>
|
||
</div>
|
||
<h3 class="text-base font-medium text-gray-800 mb-2">${tool.name}</h3>
|
||
<p class="text-sm text-gray-500">${tool.description}</p>
|
||
${canDelete ? `
|
||
<button onclick="event.stopPropagation(); editCustomTool('${tool.id}')" class="absolute top-2 right-10 w-6 h-6 rounded-full bg-gray-100 hover:bg-blue-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10" title="修改">
|
||
<i class="fa fa-pencil text-gray-400 hover:text-blue-500 text-xs"></i>
|
||
</button>
|
||
<button onclick="event.stopPropagation(); deleteCustomTool('${tool.id}')" class="absolute top-2 right-2 w-6 h-6 rounded-full bg-gray-100 hover:bg-red-100 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10" title="删除">
|
||
<i class="fa fa-times text-gray-400 hover:text-red-500 text-xs"></i>
|
||
</button>
|
||
` : ''}
|
||
</div>
|
||
`;
|
||
|
||
const defaultCards = config.defaultTools.map(t => renderToolCard(t, false, false)).join('');
|
||
const customCards = config.customTools.map(t => renderToolCard(t, true, true)).join('');
|
||
|
||
return `
|
||
<div class="bg-white rounded-lg shadow-sm mb-6">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-100">
|
||
<h2 class="text-lg font-medium">${config.title}</h2>
|
||
<button onclick="showCreateToolModal()" class="bg-primary text-white px-3 py-1.5 rounded text-sm hover:bg-primary/90 transition-colors">
|
||
<i class="fa fa-plus mr-1"></i>添加自定义工具
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 默认工具 -->
|
||
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">默认工具</h3>
|
||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||
${defaultCards || '<p class="text-gray-400 text-sm col-span-3">暂无默认工具</p>'}
|
||
</div>
|
||
|
||
<!-- 自定义工具 -->
|
||
<h3 class="text-sm font-semibold text-gray-700 mb-4 pb-2 border-b border-gray-100">自定义工具</h3>
|
||
<div class="grid grid-cols-3 gap-6">
|
||
${customCards || '<p class="text-gray-400 text-sm col-span-3">暂无自定义工具，点击右上角添加</p>'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 删除自定义工具
|
||
function deleteCustomTool(toolId) {
|
||
window.showConfirm('确认删除', '确定要删除这个自定义工具吗？', () => {
|
||
const config = window.tableConfigs['data-generate'];
|
||
config.customTools = config.customTools.filter(t => t.id !== toolId);
|
||
localStorage.setItem('customTools', JSON.stringify(config.customTools));
|
||
document.getElementById('page-content').innerHTML = renderToolsPage(config);
|
||
});
|
||
}
|
||
|
||
// 修改自定义工具
|
||
function editCustomTool(toolId) {
|
||
const config = window.tableConfigs['data-generate'];
|
||
const tool = config.customTools.find(t => t.id === toolId);
|
||
if (tool) {
|
||
localStorage.setItem('editTool', JSON.stringify(tool));
|
||
window.location.href = 'custom-tool-create.html?edit=true';
|
||
}
|
||
}
|
||
|
||
// 显示创建工具弹窗
|
||
function showCreateToolModal() {
|
||
window.location.href = 'custom-tool-create.html';
|
||
}
|
||
|
||
// 跳转到工具页面
|
||
function navigateToTool(toolId, url, isCustom = false) {
|
||
if (isCustom && url) {
|
||
if (url.startsWith('http')) {
|
||
window.open(url, '_blank');
|
||
} else {
|
||
window.location.href = url;
|
||
}
|
||
} else if (toolId === 'data-generate') {
|
||
window.location.href = 'data-generate.html';
|
||
} else if (toolId === 'json2jsonl') {
|
||
window.showMessage('提示', 'JSON转JSONL 工具开发中...', 'info');
|
||
} else if (toolId === 'md-convert') {
|
||
window.showMessage('提示', '转换Markdown 工具开发中...', 'info');
|
||
} else {
|
||
window.showMessage('提示', `${toolId} 功能开发中...`, 'info');
|
||
}
|
||
}
|
||
|
||
// 渲染配置页面（硬件监控）
|
||
function renderConfigPage(config, data) {
|
||
return `
|
||
<div class="bg-white rounded-lg shadow-sm mb-6">
|
||
<div class="flex items-center justify-between p-4 border-b border-gray-100">
|
||
<h2 class="text-lg font-medium">${config.title}</h2>
|
||
<div class="flex items-center text-sm text-gray-500">
|
||
<i class="fa fa-refresh mr-2"></i>
|
||
<span class="mr-2">刷新频率:</span>
|
||
<select id="refreshInterval" onchange="changeRefreshRate()" class="px-2 py-1 border border-gray-300 rounded text-sm focus:border-primary focus:outline-none">
|
||
<option value="1000">1秒</option>
|
||
<option value="3000">3秒</option>
|
||
<option value="5000" selected>5秒</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 第一行：CPU、内存、磁盘 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<!-- CPU监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-microchip text-blue-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">CPU 使用率</h3>
|
||
<p class="text-xs text-gray-500" id="cpuCores">4 核心</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-2xl font-medium text-gray-800" id="cpuPercent">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-4 bg-gray-100 rounded-full overflow-hidden">
|
||
<div id="cpuBar" class="absolute left-0 top-0 h-full bg-gradient-to-r from-green-400 to-blue-500 transition-all duration-500" style="width: 0%"></div>
|
||
</div>
|
||
<div class="mt-4 grid grid-cols-4 gap-2" id="cpuCoresList">
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心1</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core1">0%</div>
|
||
</div>
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心2</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core2">0%</div>
|
||
</div>
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心3</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core3">0%</div>
|
||
</div>
|
||
<div class="text-center p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">核心4</div>
|
||
<div class="text-sm font-medium text-gray-800" id="core4">0%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内存监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-database text-purple-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">内存使用</h3>
|
||
<p class="text-xs text-gray-500" id="memoryTotal">总计: 16 GB</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-2xl font-medium text-gray-800" id="memoryPercent">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-4 bg-gray-100 rounded-full overflow-hidden">
|
||
<div id="memoryBar" class="absolute left-0 top-0 h-full bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-500" style="width: 0%"></div>
|
||
</div>
|
||
<div class="mt-4 flex justify-between text-sm">
|
||
<div class="text-center">
|
||
<div class="text-xs text-gray-500">已用</div>
|
||
<div class="text-sm font-medium text-gray-800" id="memoryUsed">0 GB</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-xs text-gray-500">可用</div>
|
||
<div class="text-sm font-medium text-gray-800" id="memoryAvailable">0 GB</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-xs text-gray-500">缓存</div>
|
||
<div class="text-sm font-medium text-gray-800" id="memoryCached">0 GB</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 磁盘监控 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-hdd-o text-green-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">磁盘使用</h3>
|
||
<p class="text-xs text-gray-500" id="diskTotal">SSD 512 GB</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-2xl font-medium text-gray-800" id="diskPercent">0%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-4 bg-gray-100 rounded-full overflow-hidden">
|
||
<div id="diskBar" class="absolute left-0 top-0 h-full bg-gradient-to-r from-emerald-400 to-teal-500 transition-all duration-500" style="width: 0%"></div>
|
||
</div>
|
||
<div class="mt-4 grid grid-cols-3 gap-2 text-center">
|
||
<div class="p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">已用空间</div>
|
||
<div class="text-sm font-medium text-gray-800" id="diskUsed">0 GB</div>
|
||
</div>
|
||
<div class="p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">可用空间</div>
|
||
<div class="text-sm font-medium text-gray-800" id="diskAvailable">0 GB</div>
|
||
</div>
|
||
<div class="p-2 bg-gray-50 rounded">
|
||
<div class="text-xs text-gray-500">读写速度</div>
|
||
<div class="text-sm font-medium text-gray-800" id="diskSpeed">0 MB/s</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行：GPU监控 -->
|
||
<div class="mb-6">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-microchip text-red-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">GPU监控</h3>
|
||
<p class="text-xs text-gray-500" id="gpuCount">多GPU并行监控</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="gpuList" style="max-height: 400px; overflow-y: auto;">
|
||
<!-- GPU卡片由initGPUList()动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三行：网络和系统 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- 网络流量 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-cyan-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-globe text-cyan-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">网络流量</h3>
|
||
<p class="text-xs text-gray-500">实时带宽使用</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="p-3 bg-blue-50 rounded-lg">
|
||
<div class="flex items-center mb-2">
|
||
<i class="fa fa-arrow-down text-blue-600 mr-2"></i>
|
||
<span class="text-xs text-gray-600">下载速度</span>
|
||
</div>
|
||
<div class="text-lg font-medium text-gray-800" id="downloadSpeed">0 MB/s</div>
|
||
</div>
|
||
<div class="p-3 bg-green-50 rounded-lg">
|
||
<div class="flex items-center mb-2">
|
||
<i class="fa fa-arrow-up text-green-600 mr-2"></i>
|
||
<span class="text-xs text-gray-600">上传速度</span>
|
||
</div>
|
||
<div class="text-lg font-medium text-gray-800" id="uploadSpeed">0 MB/s</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 flex justify-between text-xs text-gray-500">
|
||
<span>总流入: <span id="totalDownload">0 GB</span></span>
|
||
<span>总流出: <span id="totalUpload">0 GB</span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统信息 -->
|
||
<div class="border border-gray-200 rounded-lg p-5">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center mr-3">
|
||
<i class="fa fa-info-circle text-indigo-600 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-800">系统信息</h3>
|
||
<p class="text-xs text-gray-500">服务器状态</p>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-3 text-sm">
|
||
<div class="flex justify-between py-2 border-b border-gray-100">
|
||
<span class="text-gray-500">操作系统</span>
|
||
<span class="text-gray-800 font-medium" id="osInfo">Ubuntu 22.04 LTS</span>
|
||
</div>
|
||
<div class="flex justify-between py-2 border-b border-gray-100">
|
||
<span class="text-gray-500">运行时间</span>
|
||
<span class="text-gray-800 font-medium" id="uptime">0 天 0 时 0 分</span>
|
||
</div>
|
||
<div class="flex justify-between py-2 border-b border-gray-100">
|
||
<span class="text-gray-500">进程数</span>
|
||
<span class="text-gray-800 font-medium" id="processCount">0</span>
|
||
</div>
|
||
<div class="flex justify-between py-2">
|
||
<span class="text-gray-500">负载均值</span>
|
||
<span class="text-gray-800 font-medium" id="loadAvg">0.00, 0.00, 0.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 刷新间隔定时器
|
||
let refreshTimer = null;
|
||
let currentRefreshInterval = 5000;
|
||
|
||
// 刷新硬件信息
|
||
async function refreshHardwareInfo() {
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/system-info`);
|
||
const result = await response.json();
|
||
|
||
if (result.code === 0 && result.data) {
|
||
const data = result.data;
|
||
|
||
// 更新CPU
|
||
const cpu = data.cpu || {};
|
||
const cpuPercent = cpu.percent || 0;
|
||
const cpuEl = document.getElementById('cpuPercent');
|
||
if (cpuEl) {
|
||
cpuEl.textContent = cpuPercent + '%';
|
||
document.getElementById('cpuBar').style.width = cpuPercent + '%';
|
||
document.getElementById('cpuCores').textContent = (cpu.cores || 0) + ' 核心';
|
||
}
|
||
|
||
// 更新内存
|
||
const mem = data.memory || {};
|
||
const memUsed = mem.used_gb || 0;
|
||
const memTotal = mem.total_gb || 0;
|
||
const memPercent = mem.percent || 0;
|
||
document.getElementById('memoryPercent').textContent = memPercent + '%';
|
||
document.getElementById('memoryBar').style.width = memPercent + '%';
|
||
document.getElementById('memoryUsed').textContent = memUsed + ' GB';
|
||
document.getElementById('memoryAvailable').textContent = (mem.available_gb || 0) + ' GB';
|
||
document.getElementById('memoryCached').textContent = (mem.cached_gb || 0) + ' GB';
|
||
|
||
// 更新磁盘
|
||
const disk = data.disk || {};
|
||
const diskUsed = disk.used_gb || 0;
|
||
const diskTotal = disk.total_gb || 0;
|
||
const diskPercent = disk.percent || 0;
|
||
document.getElementById('diskPercent').textContent = diskPercent + '%';
|
||
document.getElementById('diskBar').style.width = diskPercent + '%';
|
||
document.getElementById('diskUsed').textContent = diskUsed + ' GB';
|
||
document.getElementById('diskAvailable').textContent = (diskTotal - diskUsed) + ' GB';
|
||
|
||
// 更新网络
|
||
const net = data.network || {};
|
||
document.getElementById('totalDownload').textContent = (net.download_mb || 0) + ' GB';
|
||
document.getElementById('totalUpload').textContent = (net.upload_mb || 0) + ' GB';
|
||
|
||
// 更新系统信息
|
||
const sys = data.system || {};
|
||
const uptime = sys.uptime_seconds || 0;
|
||
const days = Math.floor(uptime / 86400);
|
||
const hours = Math.floor((uptime % 86400) / 3600);
|
||
const mins = Math.floor((uptime % 3600) / 60);
|
||
document.getElementById('uptime').textContent = days + ' 天 ' + hours + ' 时 ' + mins + ' 分';
|
||
document.getElementById('processCount').textContent = sys.process_count || 0;
|
||
|
||
// 更新GPU信息
|
||
updateGPUInfo(data.gpu || []);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取系统信息失败:', error);
|
||
useMockData();
|
||
}
|
||
}
|
||
|
||
// 使用模拟数据
|
||
function useMockData() {
|
||
const cpuUsage = Math.floor(Math.random() * 30) + 20;
|
||
document.getElementById('cpuPercent').textContent = cpuUsage + '%';
|
||
document.getElementById('cpuBar').style.width = cpuUsage + '%';
|
||
document.getElementById('core1').textContent = Math.floor(Math.random() * 40 + 20) + '%';
|
||
document.getElementById('core2').textContent = Math.floor(Math.random() * 40 + 15) + '%';
|
||
document.getElementById('core3').textContent = Math.floor(Math.random() * 40 + 25) + '%';
|
||
document.getElementById('core4').textContent = Math.floor(Math.random() * 40 + 10) + '%';
|
||
|
||
const memUsed = (Math.random() * 4 + 6).toFixed(1);
|
||
const memTotal = 16;
|
||
const memPercent = Math.floor((memUsed / memTotal) * 100);
|
||
document.getElementById('memoryPercent').textContent = memPercent + '%';
|
||
document.getElementById('memoryBar').style.width = memPercent + '%';
|
||
document.getElementById('memoryUsed').textContent = memUsed + ' GB';
|
||
document.getElementById('memoryAvailable').textContent = (memTotal - memUsed).toFixed(1) + ' GB';
|
||
document.getElementById('memoryCached').textContent = (Math.random() * 3 + 1).toFixed(1) + ' GB';
|
||
|
||
const diskUsed = Math.floor(Math.random() * 100 + 150);
|
||
const diskTotal = 512;
|
||
const diskPercent = Math.floor((diskUsed / diskTotal) * 100);
|
||
document.getElementById('diskPercent').textContent = diskPercent + '%';
|
||
document.getElementById('diskBar').style.width = diskPercent + '%';
|
||
document.getElementById('diskUsed').textContent = diskUsed + ' GB';
|
||
document.getElementById('diskAvailable').textContent = (diskTotal - diskUsed) + ' GB';
|
||
document.getElementById('diskSpeed').textContent = (Math.random() * 500 + 100).toFixed(0) + ' MB/s';
|
||
|
||
updateGPUInfo();
|
||
|
||
document.getElementById('downloadSpeed').textContent = (Math.random() * 100 + 10).toFixed(1) + ' MB/s';
|
||
document.getElementById('uploadSpeed').textContent = (Math.random() * 50 + 5).toFixed(1) + ' MB/s';
|
||
document.getElementById('totalDownload').textContent = (Math.random() * 500 + 100).toFixed(1) + ' GB';
|
||
document.getElementById('totalUpload').textContent = (Math.random() * 200 + 50).toFixed(1) + ' GB';
|
||
|
||
const days = Math.floor(Math.random() * 30);
|
||
const hours = Math.floor(Math.random() * 24);
|
||
const mins = Math.floor(Math.random() * 60);
|
||
document.getElementById('uptime').textContent = days + ' 天 ' + hours + ' 时 ' + mins + ' 分';
|
||
document.getElementById('processCount').textContent = Math.floor(Math.random() * 200 + 100);
|
||
document.getElementById('loadAvg').textContent = (Math.random() * 2).toFixed(2) + ', ' + (Math.random() * 1.5).toFixed(2) + ', ' + (Math.random() * 1).toFixed(2);
|
||
}
|
||
|
||
// GPU配置
|
||
const GPU_COUNT = 4;
|
||
const gpuConfigs = [
|
||
{ name: 'NVIDIA RTX 3090', memory: 24 },
|
||
{ name: 'NVIDIA RTX 4090', memory: 24 },
|
||
{ name: 'NVIDIA A100', memory: 80 },
|
||
{ name: 'NVIDIA V100', memory: 32 },
|
||
{ name: 'NVIDIA T4', memory: 16 },
|
||
{ name: 'NVIDIA L40S', memory: 48 },
|
||
{ name: 'NVIDIA H100', memory: 80 },
|
||
{ name: 'NVIDIA RTX 4080', memory: 16 }
|
||
];
|
||
|
||
// 初始化GPU列表
|
||
async function initGPUList() {
|
||
try {
|
||
const response = await fetch(`${window.API_BASE}/system-info`);
|
||
const result = await response.json();
|
||
const gpuData = (result.data && result.data.gpu) || [];
|
||
updateGPUInfo(gpuData);
|
||
} catch (error) {
|
||
console.error('初始化GPU列表失败:', error);
|
||
useMockGPUData();
|
||
}
|
||
}
|
||
|
||
// 更新GPU信息
|
||
function updateGPUInfo(gpuData) {
|
||
if (gpuData && gpuData.length > 0) {
|
||
const gpuCount = gpuData.length;
|
||
document.getElementById('gpuCount').textContent = `检测到 ${gpuCount} 块 GPU`;
|
||
|
||
let totalUsedMemory = 0;
|
||
let totalMemory = 0;
|
||
|
||
const gpuList = document.getElementById('gpuList');
|
||
if (gpuList) {
|
||
let gpuCardsHTML = '';
|
||
for (let i = 0; i < gpuCount; i++) {
|
||
const gpu = gpuData[i];
|
||
totalUsedMemory += gpu.memory_used_gb;
|
||
totalMemory += gpu.memory_total_gb;
|
||
|
||
gpuCardsHTML += `
|
||
<div class="border border-gray-200 rounded-lg p-2 bg-gradient-to-br from-gray-50 to-gray-100" id="gpuCard${i}">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<div class="flex items-center min-w-0">
|
||
<div class="w-6 h-6 rounded bg-red-100 flex items-center justify-center mr-2 flex-shrink-0">
|
||
<i class="fa fa-microchip text-red-600 text-xs"></i>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<div class="text-xs font-medium text-gray-800 truncate" id="gpuName${i}" title="${gpu.name}">${gpu.name}</div>
|
||
<div class="text-[10px] text-gray-400">PCIe</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-gray-800" id="gpuPercent${i}">${gpu.gpu_percent}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-1.5 bg-gray-200 rounded-full overflow-hidden mb-2">
|
||
<div id="gpuBar${i}" class="absolute left-0 top-0 h-full bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 transition-all duration-500" style="width: ${gpu.gpu_percent}%"></div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 text-center text-[10px]">
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">显存</div>
|
||
<div class="font-medium text-gray-700" id="gpuMem${i}">${gpu.memory_used_gb}/${gpu.memory_total_gb} GB</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">温度</div>
|
||
<div class="font-medium ${gpu.temperature >= 80 ? 'text-red-600' : gpu.temperature >= 70 ? 'text-yellow-600' : 'text-gray-800'}" id="gpuTemp${i}">${gpu.temperature}°C</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">功耗</div>
|
||
<div class="font-medium text-gray-700" id="gpuPower${i}">${gpu.power_w} W</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">Fan</div>
|
||
<div class="font-medium text-gray-700" id="gpuFan${i}">${gpu.fan_speed || 0}%</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-1 grid grid-cols-2 gap-1 text-center text-[9px] text-gray-400">
|
||
<div>Clock: <span id="gpuClock${i}">${gpu.clock_mhz || 0} MHz</span></div>
|
||
<div>Driver: <span id="gpuDriver${i}">${gpu.driver_version || '-'}</span></div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
// 如果GPU数量不足4个，补充显示总显存
|
||
if (gpuCount < 4) {
|
||
gpuCardsHTML += `
|
||
<div class="border border-gray-200 rounded-lg p-2 bg-gradient-to-br from-gray-50 to-gray-100">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center">
|
||
<div class="w-6 h-6 rounded bg-gray-200 flex items-center justify-center mr-2">
|
||
<i class="fa fa-server text-gray-600 text-xs"></i>
|
||
</div>
|
||
<div class="text-xs font-medium text-gray-600">总显存使用</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<span class="text-sm font-bold text-gray-800" id="gpuTotalMemory">${totalUsedMemory}/${totalMemory} GB</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
gpuList.innerHTML = gpuCardsHTML;
|
||
}
|
||
return;
|
||
}
|
||
|
||
useMockGPUData();
|
||
}
|
||
|
||
// 使用模拟GPU数据
|
||
function useMockGPUData() {
|
||
const gpuCount = Math.min(GPU_COUNT, 8);
|
||
let totalUsedMemory = 0;
|
||
let totalMemory = 0;
|
||
|
||
const gpuList = document.getElementById('gpuList');
|
||
if (gpuList) {
|
||
let gpuCardsHTML = '';
|
||
for (let i = 0; i < gpuCount; i++) {
|
||
const config = gpuConfigs[i % gpuConfigs.length];
|
||
const gpuUsage = Math.floor(Math.random() * 60 + 20);
|
||
const memUsed = (Math.random() * config.memory * 0.7 + config.memory * 0.1).toFixed(1);
|
||
const temp = Math.floor(Math.random() * 30 + 40);
|
||
const power = Math.floor(Math.random() * 150 + 100);
|
||
const fan = Math.floor(gpuUsage + Math.random() * 10);
|
||
|
||
totalUsedMemory += parseFloat(memUsed);
|
||
totalMemory += config.memory;
|
||
|
||
gpuCardsHTML += `
|
||
<div class="border border-gray-200 rounded-lg p-2 bg-gradient-to-br from-gray-50 to-gray-100" id="gpuCard${i}">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<div class="flex items-center min-w-0">
|
||
<div class="w-6 h-6 rounded bg-red-100 flex items-center justify-center mr-2 flex-shrink-0">
|
||
<i class="fa fa-microchip text-red-600 text-xs"></i>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<div class="text-xs font-medium text-gray-800 truncate" id="gpuName${i}" title="${config.name}">${config.name}</div>
|
||
<div class="text-[10px] text-gray-400">PCIe ${Math.floor(Math.random() * 4 + 1)}:00.0</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-right flex-shrink-0 ml-2">
|
||
<span class="text-sm font-bold text-gray-800" id="gpuPercent${i}">${gpuUsage}%</span>
|
||
</div>
|
||
</div>
|
||
<div class="relative h-1.5 bg-gray-200 rounded-full overflow-hidden mb-2">
|
||
<div id="gpuBar${i}" class="absolute left-0 top-0 h-full bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 transition-all duration-500" style="width: ${gpuUsage}%"></div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-1 text-center text-[10px]">
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">显存</div>
|
||
<div class="font-medium text-gray-700" id="gpuMem${i}">${parseFloat(memUsed).toFixed(1)}/${config.memory} GB</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">温度</div>
|
||
<div class="font-medium ${temp >= 80 ? 'text-red-600' : temp >= 70 ? 'text-yellow-600' : 'text-gray-800'}" id="gpuTemp${i}">${temp}°C</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">功耗</div>
|
||
<div class="font-medium text-gray-700" id="gpuPower${i}">${power} W</div>
|
||
</div>
|
||
<div class="bg-white/80 rounded py-0.5">
|
||
<div class="text-gray-400">Fan</div>
|
||
<div class="font-medium text-gray-700" id="gpuFan${i}">${fan}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
gpuList.innerHTML = gpuCardsHTML;
|
||
document.getElementById('gpuCount').textContent = `检测到 ${gpuCount} 块 GPU`;
|
||
}
|
||
|
||
const gpuTotalMem = document.getElementById('gpuTotalMemory');
|
||
if (gpuTotalMem) {
|
||
gpuTotalMem.textContent = `${totalUsedMemory.toFixed(1)}/${totalMemory} GB`;
|
||
}
|
||
}
|
||
|
||
// 启动硬件监控自动刷新
|
||
function startRefreshTimer() {
|
||
if (refreshTimer) {
|
||
clearInterval(refreshTimer);
|
||
}
|
||
refreshTimer = setInterval(refreshHardwareInfo, currentRefreshInterval);
|
||
}
|
||
|
||
// 改变刷新频率
|
||
function changeRefreshRate() {
|
||
const select = document.getElementById('refreshInterval');
|
||
currentRefreshInterval = parseInt(select.value);
|
||
startRefreshTimer();
|
||
}
|
||
|
||
// 保存配置
|
||
function saveConfig() {
|
||
window.showMessage('提示', '配置保存功能开发中...', 'info');
|
||
}
|
||
|
||
// 导出页面渲染模块
|
||
window.PageRenderer = {
|
||
renderLogViewerPage,
|
||
renderToolsPage,
|
||
renderConfigPage,
|
||
refreshHardwareInfo,
|
||
useMockData,
|
||
initGPUList,
|
||
updateGPUInfo,
|
||
useMockGPUData,
|
||
startRefreshTimer,
|
||
changeRefreshRate,
|
||
saveConfig
|
||
};
|