diff --git a/sdcard/web/index.htm b/sdcard/web/index.htm index 2084a82..61ad358 100644 --- a/sdcard/web/index.htm +++ b/sdcard/web/index.htm @@ -63,16 +63,17 @@ background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 8px; - padding: 8px 12px; + border-radius: 6px; + padding: 4px 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; - gap: 6px; - font-size: 0.85rem; + gap: 4px; + font-size: 0.7rem; color: white; font-weight: 500; + z-index: 10; } .language-switcher:hover { @@ -82,7 +83,7 @@ } .language-switcher .lang-icon { - font-size: 1rem; + font-size: 0.8rem; } .language-switcher .lang-text { @@ -171,6 +172,9 @@ box-shadow: 0 8px 32px rgba(0,0,0,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); + width: 100%; + box-sizing: border-box; + overflow: hidden; } .card-header { @@ -223,6 +227,8 @@ border-radius: 10px; overflow: hidden; margin: 5px 0; + position: relative; + box-sizing: border-box; } .progress-fill { @@ -235,6 +241,9 @@ color: white; font-size: 12px; font-weight: bold; + position: relative; + box-sizing: border-box; + max-width: 100%; } .cpu-cores { @@ -273,8 +282,8 @@ /* 推理服务器 CPU 柱状图样式 */ .cpu-chart { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding: 10px; @@ -285,13 +294,13 @@ .cpu-bar-item { display: flex; align-items: center; - gap: 10px; - height: 30px; + gap: 8px; + height: 28px; } .cpu-bar-label { - width: 60px; - font-size: 0.85rem; + width: 50px; + font-size: 0.8rem; font-weight: 500; color: #666; text-align: left; @@ -300,9 +309,9 @@ .cpu-bar-container { flex: 1; - height: 20px; + height: 18px; background-color: #e0e0e0; - border-radius: 10px; + border-radius: 9px; overflow: hidden; position: relative; } @@ -310,22 +319,61 @@ .cpu-bar-fill { height: 100%; background: linear-gradient(90deg, #4CAF50, #45a049); - border-radius: 10px; + border-radius: 9px; transition: width 0.3s ease; position: relative; - min-width: 45px; /* 确保即使是0%也有最小宽度来显示文字 */ + min-width: 0; /* 移除最小宽度限制 */ } .cpu-bar-value { - font-size: 0.75rem; + font-size: 0.6rem; /* 缩小字体 */ font-weight: bold; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); position: absolute; - right: 8px; + right: 4px; /* 减小右边距 */ top: 50%; transform: translateY(-50%); z-index: 2; + white-space: nowrap; /* 防止文字换行 */ + min-width: max-content; /* 确保文字完整显示 */ + } + + /* 内存、显存、GPU监控专用样式 */ + .memory-chart { + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 10px; + padding: 10px; + background: #f8f9fa; + border-radius: 10px; + } + + .memory-item { + display: flex; + flex-direction: column; + gap: 8px; + } + + .memory-metric { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; + } + + .memory-metric-label { + font-size: 0.9rem; + font-weight: 500; + color: #666; + margin: 0 !important; + } + + .memory-metric-value { + font-size: 0.85rem; + font-weight: bold; + color: #323232; } /* 推理服务器 温度监控柱状图样式 */ @@ -394,16 +442,24 @@ .lpmu-temperature-grid { display: grid; - grid-template-columns: repeat(5, 1fr); + grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; + width: 100%; + box-sizing: border-box; + overflow: hidden; } .disk-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(6, 200px); gap: 10px; margin-top: 10px; + justify-content: start; + width: 100%; + box-sizing: border-box; + overflow-x: auto; + overflow-y: hidden; } .disk-item { @@ -412,14 +468,25 @@ padding: 12px; text-align: left; border: 1px solid #e9ecef; + min-height: 120px; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + box-sizing: border-box; + overflow: hidden; } .disk-label { - font-size: 0.85rem; + font-size: 0.75rem; color: #666; margin-bottom: 8px; font-weight: 500; text-align: left; + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .disk-usage { @@ -442,13 +509,20 @@ padding: 10px; text-align: left; border: 1px solid #e9ecef; + width: 100%; + box-sizing: border-box; + overflow: hidden; } .temp-label { - font-size: 0.9rem; + font-size: 0.75rem; color: #666; margin-bottom: 5px; text-align: left; + line-height: 1.2; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .temp-value { @@ -518,11 +592,11 @@ @media (max-width: 1200px) { .lpmu-temperature-grid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); } .disk-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(4, 200px); } } @@ -543,6 +617,18 @@ padding: 0; } + /* 移动端语言切换按钮进一步缩小 */ + .language-switcher { + padding: 3px 6px; + font-size: 0.65rem; + gap: 3px; + border-radius: 4px; + } + + .language-switcher .lang-icon { + font-size: 0.7rem; + } + .header h1 { font-size: 1.8rem; } @@ -563,6 +649,16 @@ grid-template-columns: 1fr; } + /* 移动端减少间距 */ + .main-panel { + margin: 40px 0 20px 0; /* 移动端减少上边距从100px到40px */ + padding: 20px; /* 移动端减少内边距 */ + } + + .system-section { + margin-bottom: 25px; /* 移动端减少系统区块间距从40px到25px */ + } + .lpmu-dashboard, .lpmu-row-1, .lpmu-row-2 { @@ -574,23 +670,24 @@ } .lpmu-temperature-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); } .disk-grid { - grid-template-columns: 1fr; + grid-template-columns: repeat(2, 200px); } .system-header h2 { font-size: 1.3rem; } + + /* 移动端 CPU 图表单列显示 */ + .cpu-chart { + grid-template-columns: 1fr; + } } /* 监控卡片内容对齐样式 */ - .memory-metric-label, - .power-metric-label, - .gpu-metric-label, - .lpmu-memory-metric-label, .system-metric-label { margin-left: 0px !important; } @@ -724,18 +821,18 @@

推理模组监控

系统信息
-
-
- 最后更新 - - +
+
+ 最后更新 + -
-
- 连接时间 - - +
+ 连接时间 + -
-
- 数据包 - 0 +
+ 数据包 + 0
@@ -782,18 +879,18 @@

应用模组监控

系统信息
-
-
- 最后更新 - - +
+
+ 最后更新 + -
-
- 连接时间 - - +
+ 连接时间 + -
-
- 数据包 - 0 +
+ 数据包 + 0
@@ -975,11 +1072,14 @@

应用模组监控

const usage = parseFloat(core.usage) || 0; const coreLabel = getTranslation('core', '核心'); + // 确保进度条有足够宽度显示文字，减小最小宽度 + const barWidth = Math.max(usage, 15); // 减小到15%最小宽度 + html += `
${coreLabel} ${core.id}
-
+
${usage.toFixed(1)}%
@@ -995,17 +1095,19 @@

应用模组监控

if (!memoryData) return; const content = document.getElementById('memoryContent'); - let html = '
'; + let html = '
'; if (memoryData.ram) { const ramUsagePercent = ((memoryData.ram.used / memoryData.ram.total) * 100).toFixed(1); html += ` -
- RAM - ${memoryData.ram.used}/${memoryData.ram.total} MB -
-
-
${ramUsagePercent}%
+
+
+ RAM + ${memoryData.ram.used}/${memoryData.ram.total} MB +
+
+
${ramUsagePercent}%
+
`; } @@ -1014,12 +1116,14 @@

应用模组监控

const swapUsagePercent = memoryData.swap.total > 0 ? ((memoryData.swap.used / memoryData.swap.total) * 100).toFixed(1) : 0; html += ` -
- SWAP - ${memoryData.swap.used}/${memoryData.swap.total} MB -
-
-
${swapUsagePercent}%
+
+
+ SWAP + ${memoryData.swap.used}/${memoryData.swap.total} MB +
+
+
${swapUsagePercent}%
+
`; } @@ -1089,7 +1193,7 @@

应用模组监控

if (!powerData) return; const content = document.getElementById('powerContent'); - let html = '
'; + let html = '
'; const powerItems = [ { label: 'GPU+SoC', data: powerData.gpu_soc }, @@ -1101,9 +1205,11 @@

应用模组监控

powerItems.forEach(item => { if (item.data && item.data.current !== undefined) { html += ` -
- ${item.label} - ${item.data.current} ${item.data.unit || 'mW'} +
+
+ ${item.label} + ${item.data.current} ${item.data.unit || 'mW'} +
`; } @@ -1117,24 +1223,26 @@

应用模组监控

if (!gpuData) return; const content = document.getElementById('gpuContent'); - let html = '
'; + let html = '
'; if (gpuData.gr3d_freq !== undefined) { const gpuFreqLabel = getTranslation('gpu-freq', '3D GPU 频率'); html += ` -
- ${gpuFreqLabel} - ${gpuData.gr3d_freq}% -
-
-
${gpuData.gr3d_freq}%
+
+
+ ${gpuFreqLabel} + ${gpuData.gr3d_freq}% +
+
+
${gpuData.gr3d_freq}%
+
`; } html += '
'; const noDataText = getTranslation('no-gpu-data', '暂无 GPU 数据'); - content.innerHTML = html || `
${noDataText}
`; + content.innerHTML = html || `
${noDataText}
`; } updateConnectionStatus(status, message) { @@ -1143,6 +1251,37 @@

应用模组监控

indicator.className = `status-indicator status-${status}`; statusText.textContent = message; + + // 保存当前状态用于语言切换时刷新 + this.currentStatus = status; + } + + // 刷新连接状态显示（用于语言切换） + refreshConnectionStatus() { + if (this.currentStatus) { + let messageKey = ''; + let fallbackMessage = ''; + + switch(this.currentStatus) { + case 'connecting': + messageKey = 'connecting-inference'; + fallbackMessage = '正在连接到 推理服务器...'; + break; + case 'connected': + messageKey = 'connected-inference'; + fallbackMessage = '已连接到 推理服务器'; + break; + case 'disconnected': + messageKey = 'disconnected-inference'; + fallbackMessage = '推理服务器 连接已断开'; + break; + } + + if (messageKey) { + const message = getTranslation(messageKey, fallbackMessage); + document.getElementById('agxStatusText').textContent = message; + } + } } scheduleReconnect() { @@ -1303,11 +1442,14 @@

应用模组监控

const usage = parseFloat(core.usage) || 0; const coreLabel = getTranslation('core', '核心'); + // 确保进度条有足够宽度显示文字，减小最小宽度 + const barWidth = Math.max(usage, 15); // 减小到15%最小宽度 + html += `
${coreLabel} ${core.id}
-
+
${usage.toFixed(1)}%
@@ -1323,35 +1465,39 @@

应用模组监控

if (!memoryData) return; const content = document.getElementById('lpmuMemoryContent'); - let html = '
'; + let html = '
'; if (memoryData.ram) { html += ` -
- RAM - ${memoryData.ram.used}/${memoryData.ram.total} ${memoryData.ram.unit} -
-
-
${memoryData.ram.percent.toFixed(1)}%
+
+
+ RAM + ${memoryData.ram.used}/${memoryData.ram.total} ${memoryData.ram.unit} +
+
+
${memoryData.ram.percent.toFixed(1)}%
+
`; } if (memoryData.swap) { html += ` -
- SWAP - ${memoryData.swap.used}/${memoryData.swap.total} ${memoryData.swap.unit} -
-
-
${memoryData.swap.percent.toFixed(1)}%
+
+
+ SWAP + ${memoryData.swap.used}/${memoryData.swap.total} ${memoryData.swap.unit} +
+
+
${memoryData.swap.percent.toFixed(1)}%
+
`; } html += '
'; const noDataText = getTranslation('no-memory-data', '暂无内存数据'); - content.innerHTML = html || `
${noDataText}
`; + content.innerHTML = html || `
${noDataText}
`; } updateTemperatureDisplay(tempData) { @@ -1437,6 +1583,37 @@

应用模组监控

indicator.className = `status-indicator status-${status}`; statusText.textContent = message; + + // 保存当前状态用于语言切换时刷新 + this.currentStatus = status; + } + + // 刷新连接状态显示（用于语言切换） + refreshConnectionStatus() { + if (this.currentStatus) { + let messageKey = ''; + let fallbackMessage = ''; + + switch(this.currentStatus) { + case 'connecting': + messageKey = 'connecting-application'; + fallbackMessage = '正在连接到 应用服务器...'; + break; + case 'connected': + messageKey = 'connected-application'; + fallbackMessage = '已连接到 应用服务器'; + break; + case 'disconnected': + messageKey = 'disconnected-application'; + fallbackMessage = '应用服务器 连接已断开'; + break; + } + + if (messageKey) { + const message = getTranslation(messageKey, fallbackMessage); + document.getElementById('lpmuStatusText').textContent = message; + } + } } scheduleReconnect() { @@ -1465,8 +1642,9 @@

应用模组监控

// 页面加载完成后初始化监控 document.addEventListener('DOMContentLoaded', () => { - new 推理服务器Monitor(); - new 应用服务器Monitor(); + // 初始化监控类并保存为全局变量以便语言切换时使用 + window.agxMonitor = new 推理服务器Monitor(); + window.应用服务器Monitor = new 应用服务器Monitor(); // 添加滚动监听器来实现文字颜色渐变 initScrollColorTransition(); @@ -1582,10 +1760,26 @@

应用模组监控

elements.forEach(element => { const key = element.getAttribute('data-translate'); if (translations[language] && translations[language][key]) { + // 特殊处理连接状态文本，保持当前实际状态 + if (key === 'connecting-inference' || key === 'connecting-application' || + key === 'connected-inference' || key === 'connected-application' || + key === 'disconnected-inference' || key === 'disconnected-application' || + key === 'connection-error-inference' || key === 'connection-error-application') { + // 跳过连接状态文本的翻译，让Monitor类来管理这些状态 + return; + } element.textContent = translations[language][key]; } }); + // 刷新各个监控器的连接状态显示 + if (window.agxMonitor && typeof window.agxMonitor.refreshConnectionStatus === 'function') { + window.agxMonitor.refreshConnectionStatus(); + } + if (window.应用服务器Monitor && typeof window.应用服务器Monitor.refreshConnectionStatus === 'function') { + window.应用服务器Monitor.refreshConnectionStatus(); + } + // 更新文档标题 if (language === 'en') { document.title = 'RM-01 Dashboard - RobOS Monitor';