html
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>设备管理仪表盘</title><script src="https://cdn.tailwindcss.com"></script><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><style>.hidden {display: none;}.chart {width: 100%;height: 300px;}</style>
</head><body class="flex h-screen bg-gray-100"><!-- 登录页面 --><div id="loginPage" class="hidden flex items-center justify-center w-full bg-gray-100"><div class="bg-white p-8 rounded-lg shadow-md w-96"><div class="text-center mb-6"><h1 class="text-3xl font-bold text-gray-800">CM Box</h1><p class="text-gray-500 mt-2">请输入您的登录凭证</p></div><form id="loginForm" class="space-y-4"><div><label class="block text-gray-700 mb-2">用户名</label><input type="text" id="username" class="w-full p-2 border rounded" placeholder="请输入用户名" /></div><div><label class="block text-gray-700 mb-2">密码</label><input type="password" id="password" class="w-full p-2 border rounded" placeholder="请输入密码" /></div><button type="submit" class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700">登录</button></form></div></div><!-- 主界面容器 --><div id="mainContainer" class="w-full flex"><!-- 侧边栏 --><div class="w-64 bg-white shadow-md flex flex-col"><div class="flex-grow"><div class="p-6 border-b"><h1 class="text-2xl font-bold text-gray-800">仪表盘</h1></div><nav class="p-4"><!-- 设备概览 --><div id="overviewTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded bg-blue-100 text-blue-600"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="7" height="9" rx="1" stroke="currentColor" stroke-width="2" /><rect x="3" y="15" width="7" height="6" rx="1" stroke="currentColor" stroke-width="2" /><rect x="14" y="3" width="7" height="6" rx="1" stroke="currentColor" stroke-width="2" /><rect x="14" y="12" width="7" height="9" rx="1" stroke="currentColor" stroke-width="2" /></svg>设备概览</div><!-- 固件升级 --><div id="firmwareTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="16" height="10" rx="1" stroke="currentColor" stroke-width="2" /><path d="M8 12H10V14H8V12Z" fill="currentColor" /><path d="M12 12H14V14H12V12Z" fill="currentColor" /><path d="M16 12H18V14H16V12Z" fill="currentColor" /><path d="M12 4L12 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M9 6L12 3L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>固件升级</div><!-- 日志管理 --><div id="logTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5C15 6.10457 14.1046 7 13 7H11C9.89543 7 9 6.10457 9 5Z" stroke="currentColor" stroke-width="2" /><path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M8 16H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>日志管理</div><!-- 网络配置 --><div id="networkTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="4" width="8" height="6" rx="1" stroke="currentColor" stroke-width="2" /><rect x="4" y="14" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" /><rect x="14" y="14" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" /><path d="M12 10V12" stroke="currentColor" stroke-width="2" /><path d="M7 14V12H17V14" stroke="currentColor" stroke-width="2" /><circle cx="17" cy="8" r="1.5" fill="currentColor" /></svg>网络配置</div><!-- 配置文件 --><div id="configFileTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 6H6C4.89543 6 4 6.89543 4 8V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M11 13L20.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M15 4L20 4L20 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>配置文件</div><!-- 安全设置 --><!-- 安全设置 - 新图标 --><div id="securityTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L4 7V11C4 15.4183 7.58172 19 12 19C16.4183 19 20 15.4183 20 11V7L12 3Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /><path d="M10 12.5C10 11.6716 10.6716 11 11.5 11H12.5C13.3284 11 14 11.6716 14 12.5C14 13.3284 13.3284 14 12.5 14H11.5C10.6716 14 10 13.3284 10 12.5Z" stroke="currentColor" stroke-width="2" /><path d="M12 14V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M12 9V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>安全设置</div><!-- 设备维护 --><div id="maintenanceTab" class="tab flex items-center p-3 mb-2 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 6H13.5V14H10.5V6Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /><path d="M13.5 18C13.5 19.1046 12.6046 20 11.5 20C10.3954 20 9.5 19.1046 9.5 18C9.5 16.8954 10.3954 16 11.5 16C12.6046 16 13.5 16.8954 13.5 18Z" stroke="currentColor" stroke-width="2" /><path d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path d="M17 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>设备维护</div></nav></div><!-- 登出按钮 --><div class="p-4 border-t"><div id="logoutTab" class="tab flex items-center p-3 cursor-pointer rounded hover:bg-gray-100"><svg class="mr-3" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L14.586 9H7a1 1 0 110-2h7.586l-1.293-1.293a1 1 0 010-1.414z" /></svg>退出登录</div></div></div><!-- 主内容区 --><div class="flex-1 p-6 overflow-y-auto"><div id="content" style="height: 100%"><!-- 设备概览 --><div class="space-y-6" id="overview"><div class="flex justify-between items-center mb-6"><h2 class="text-3xl font-semibold text-gray-800">设备概览</h2></div><!-- 设备基本信息卡片 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg><h3 class="text-lg font-semibold text-gray-800">设备信息</h3></div><div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6"><!-- 设备名称 --><div class="flex flex-col"><span class="text-sm font-medium text-gray-500 mb-1">设备名称</span><div class="flex items-center"><svg class="w-5 h-5 text-gray-400 mr-2" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg><span class="text-xl font-bold text-gray-800">Computer Module Box</span></div></div><!-- 固件版本 --><div class="flex flex-col"><span class="text-sm font-medium text-gray-500 mb-1">固件版本</span><div class="flex items-center"><svg class="w-5 h-5 text-gray-400 mr-2" 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg><span class="text-xl font-bold text-gray-800">v2.5.3</span></div></div><!-- 工作模式 - 重新设计与SN码对称 --><div class="flex flex-col"><span class="text-sm font-medium text-gray-500 mb-1">工作模式</span><div class="relative"><div class="flex items-center bg-gray-50 p-3 rounded-lg border border-gray-200"><div class="flex-shrink-0 mr-3"><!-- 性能模式图标 --><div class="w-10 h-10 flex items-center justify-center"><svg class="w-8 h-8 text-blue-500" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div></div><div><span class="text-lg font-bold text-gray-800">性能模式</span><div class="text-xs text-gray-500 mt-0.5">高性能 · 标准功耗</div></div><!-- 模式切换按钮 --><button class="absolute right-3 top-3 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors" title="切换模式"><svg class="w-5 h-5" 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 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg></button></div></div></div><!-- 设备序列号 (SN) - 特别设计 --><div class="flex flex-col"><span class="text-sm font-medium text-gray-500 mb-1">设备序列号 (SN)</span><div class="relative"><div class="flex items-center bg-gray-50 p-3 rounded-lg border border-gray-200"><div class="flex-shrink-0 mr-3"><!-- 条形码风格图形 --><div class="w-10 h-10 flex flex-col justify-between"><div class="flex space-x-0.5"><div class="w-0.5 h-10 bg-gray-800"></div><div class="w-1 h-10 bg-gray-800"></div><div class="w-0.5 h-10 bg-gray-800"></div><div class="w-2 h-10 bg-gray-800"></div><div class="w-0.5 h-10 bg-gray-800"></div><div class="w-1.5 h-10 bg-gray-800"></div></div></div></div><div><span class="text-lg font-mono font-bold text-gray-800 tracking-wider">CM2023120500389</span><div class="text-xs text-gray-500 mt-0.5">© Seyond制造</div></div><!-- 复制按钮 --><button class="absolute right-3 top-3 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors" title="复制SN码"><svg class="w-5 h-5" 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 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></button></div></div></div></div></div><!-- 运行状态部分 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg><h3 class="text-lg font-semibold text-gray-800">运行状态</h3><div class="ml-auto flex space-x-2"><button class="text-sm px-3 py-1 border border-gray-200 rounded-md text-gray-600 bg-white hover:bg-gray-50 transition-colors">30分钟</button><button class="text-sm px-3 py-1 border border-gray-200 rounded-md text-gray-600 bg-white hover:bg-gray-50 transition-colors">1天</button><button class="text-sm px-3 py-1 border border-gray-200 rounded-md text-gray-600 bg-white hover:bg-gray-50 transition-colors">全部</button></div></div><!-- 快速状态卡片 --><div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"><!-- CPU状态卡片 --><div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-lg border border-blue-100"><div class="flex items-center justify-between"><div class="flex items-center space-x-2"><svg class="w-5 h-5 text-blue-600" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg><h4 class="text-sm font-medium text-gray-800">CPU</h4></div><span class="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full">6核12线程</span></div><div class="mt-2 text-3xl font-bold text-gray-800">32<span class="text-lg">%</span></div><div class="flex items-center justify-between mt-2"><span class="text-xs text-gray-500">温度: 45°C</span><span class="text-xs text-gray-500">主频: 3.8GHz</span></div></div><!-- 内存状态卡片 --><div class="bg-gradient-to-br from-purple-50 to-pink-50 p-4 rounded-lg border border-purple-100"><div class="flex items-center justify-between"><div class="flex items-center space-x-2"><svg class="w-5 h-5 text-purple-600" 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="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path></svg><h4 class="text-sm font-medium text-gray-800">内存</h4></div><span class="text-xs font-medium px-2 py-0.5 bg-purple-100 text-purple-700 rounded-full">16GB</span></div><div class="mt-2 text-3xl font-bold text-gray-800">54<span class="text-lg">%</span></div><div class="flex items-center justify-between mt-2"><span class="text-xs text-gray-500">已用: 8.64GB</span><span class="text-xs text-gray-500">可用: 7.36GB</span></div></div><!-- GPU状态卡片 - 新增 --><div class="bg-gradient-to-br from-green-50 to-teal-50 p-4 rounded-lg border border-green-100"><div class="flex items-center justify-between"><div class="flex items-center space-x-2"><svg class="w-5 h-5 text-green-600" 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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg><h4 class="text-sm font-medium text-gray-800">GPU</h4></div><span class="text-xs font-medium px-2 py-0.5 bg-green-100 text-green-700 rounded-full">RTX 4080</span></div><div class="mt-2 text-3xl font-bold text-gray-800">47<span class="text-lg">%</span></div><div class="flex items-center justify-between mt-2"><span class="text-xs text-gray-500">温度: 65°C</span><span class="text-xs text-gray-500">功耗: 180W</span></div></div><!-- 显存状态卡片 - 新增 --><div class="bg-gradient-to-br from-amber-50 to-orange-50 p-4 rounded-lg border border-amber-100"><div class="flex items-center justify-between"><div class="flex items-center space-x-2"><svg class="w-5 h-5 text-amber-600" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg><h4 class="text-sm font-medium text-gray-800">显存</h4></div><span class="text-xs font-medium px-2 py-0.5 bg-amber-100 text-amber-700 rounded-full">16GB</span></div><div class="mt-2 text-3xl font-bold text-gray-800">68<span class="text-lg">%</span></div><div class="flex items-center justify-between mt-2"><span class="text-xs text-gray-500">已用: 10.88GB</span><span class="text-xs text-gray-500">可用: 5.12GB</span></div></div></div><!-- ECharts图表网格布局 --><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"><div class="p-5 bg-gray-50 rounded-lg border border-gray-200"><h4 class="text-md font-medium mb-3 text-gray-700">CPU 使用率</h4><div id="cpuChart" class="h-64 chart"></div></div><div class="p-5 bg-gray-50 rounded-lg border border-gray-200"><h4 class="text-md font-medium mb-3 text-gray-700">内存使用率</h4><div id="memoryChart" class="h-64 chart"></div></div><!-- GPU使用率图表 - 新增 --><div class="p-5 bg-gray-50 rounded-lg border border-gray-200"><h4 class="text-md font-medium mb-3 text-gray-700">GPU 使用率</h4><div id="gpuChart" class="h-64 chart"></div></div><!-- 显存使用率图表 - 新增 --><div class="p-5 bg-gray-50 rounded-lg border border-gray-200"><h4 class="text-md font-medium mb-3 text-gray-700">显存使用率</h4><div id="vramChart" class="h-64 chart"></div></div></div><!-- 设备异常状态 --><div class="bg-white border border-gray-200 rounded-lg"><div class="p-4 border-b border-gray-200 flex items-center"><svg class="w-5 h-5 text-red-500 mr-2" 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="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><h3 class="text-lg font-semibold text-gray-800">设备异常</h3></div><div class="p-4 space-y-3"><div class="flex justify-between items-center bg-red-50 px-4 py-3 rounded-lg border border-red-100"><div class="flex items-center"><span class="w-2 h-2 bg-red-500 rounded-full mr-3 animate-pulse"></span><span class="text-red-700 font-medium">温度过高</span><span class="ml-2 text-xs text-red-600">GPU温度已超过安全阈值</span></div><div class="flex items-center space-x-3"><span class="text-xs font-medium text-red-600 bg-red-100 px-2 py-1 rounded-full">高风险</span></div></div><div class="flex justify-between items-center bg-orange-50 px-4 py-3 rounded-lg border border-orange-100"><div class="flex items-center"><span class="w-2 h-2 bg-orange-500 rounded-full mr-3"></span><span class="text-orange-700 font-medium">内存不足</span><span class="ml-2 text-xs text-orange-600">系统内存使用率超过80%</span></div><div class="flex items-center space-x-3"><span class="text-xs font-medium text-orange-600 bg-orange-100 px-2 py-1 rounded-full">中风险</span></div></div><div class="flex justify-between items-center bg-yellow-50 px-4 py-3 rounded-lg border border-yellow-100"><div class="flex items-center"><span class="w-2 h-2 bg-yellow-500 rounded-full mr-3"></span><span class="text-yellow-700 font-medium">网络连接不稳定</span><span class="ml-2 text-xs text-yellow-600">过去10分钟出现3次连接中断</span></div><div class="flex items-center space-x-3"><span class="text-xs font-medium text-yellow-600 bg-yellow-100 px-2 py-1 rounded-full">低风险</span></div></div></div></div></div></div><!-- 固件升级 --><div class="space-y-6 hidden" id="firmware"><div class="flex justify-between items-center mb-6"><h2 class="text-3xl font-semibold text-gray-800">固件升级</h2></div><div class="bg-white p-6 rounded-xl shadow-md border border-gray-100"><!-- 当前系统信息 --><div class="mb-6 pb-6 border-b border-gray-200"><div class="flex items-center mb-4"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><h3 class="text-lg font-semibold text-gray-800">当前系统信息</h3></div><div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm"><div class="flex items-center"><span class="text-gray-500 w-24">当前版本:</span><span class="font-medium">V2.5.3-build220617</span></div><div class="flex items-center"><span class="text-gray-500 w-24">发布日期:</span><span class="font-medium">2022-06-17</span></div><div class="flex items-center"><span class="text-gray-500 w-24">运行状态:</span><span class="font-medium text-green-600">Running</span></div></div></div><!-- 固件选择和上传部分 --><div class="mb-6"><div class="flex items-center mb-4"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg><h3 class="text-lg font-semibold text-gray-800">上传固件</h3></div><div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-5 rounded-md"><div class="flex"><svg class="w-5 h-5 text-yellow-600 mr-3 mt-0.5" 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="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-yellow-700 font-medium">固件升级提示</p><p class="text-yellow-600 text-sm mt-1">请确保选择的固件包适用于当前设备，升级过程中请勿断电或重启设备，否则可能导致系统无法启动。</p></div></div></div><div class="mb-6"><label class="block text-gray-700 font-medium mb-2">选择固件包</label><div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors"><svg class="w-12 h-12 text-gray-400 mx-auto mb-3" 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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg><p class="text-sm text-gray-500 mb-3">拖放固件文件到此处或点击选择文件</p><input type="file" id="firmwareFile" accept=".bin,.zip,.img" class="hidden" /><button onclick="document.getElementById('firmwareFile').click()" class="px-4 py-2 bg-gray-200 rounded-md text-gray-700 hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">选择文件</button><div class="text-orange-500 text-sm mt-3">支持的格式: .bin, .img (最大文件大小: 10GB)</div></div></div><!-- 整体进度条 --><div id="overallProgressContainer" class="mb-5 hidden"><div class="flex justify-between mb-2"><div class="text-gray-700 font-medium">总体进度</div><div class="text-gray-700 font-medium" id="percentageLabel">0%</div></div><div class="w-full bg-gray-200 rounded-full h-3"><div id="overallProgress" class="bg-blue-600 h-3 rounded-full transition-all duration-300" style="width: 0%"></div></div></div><!-- 升级阶段状态 --><div id="upgradeStages" class="mt-6 space-y-4 hidden bg-gray-50 p-5 rounded-lg border border-gray-200"><h4 class="font-medium text-gray-700 mb-3">升级进度</h4><div id="stage1" class="flex items-center"><svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" /></svg><div class="flex-1"><div class="flex justify-between"><span class="font-medium">1. U盘拷贝</span><span class="text-gray-500 text-sm">等待中</span></div></div></div><div id="stage2" class="flex items-center"><svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" /></svg><div class="flex-1"><div class="flex justify-between"><span class="font-medium">2. 文件校验</span><span class="text-gray-500 text-sm">等待中</span></div></div></div><div id="stage3" class="flex items-center"><svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" /></svg><div class="flex-1"><div class="flex justify-between"><span class="font-medium">3. 下载固件</span><span class="text-gray-500 text-sm">等待中</span></div></div></div><div id="stage4" class="flex items-center"><svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" /></svg><div class="flex-1"><div class="flex justify-between"><span class="font-medium">4. 固件烧录</span><span class="text-gray-500 text-sm">等待中</span></div></div></div><div id="stage5" class="flex items-center"><svg class="w-6 h-6 mr-3 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 10l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd" /></svg><div class="flex-1"><div class="flex justify-between"><span class="font-medium">5. 系统重启</span><span class="text-gray-500 text-sm">等待中</span></div></div></div></div><div class="flex justify-end mt-6"><button id="uploadBtn" class="flex items-center bg-blue-600 text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"><svg class="w-5 h-5 mr-2" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>开始上传</button></div></div></div></div><!-- 日志管理 --><div class="space-y-6 flex flex-col h-full hidden" id="log"><!-- 顶部标题和操作栏 --><div class="flex justify-between items-center"><div class="flex items-center space-x-4"><h2 class="text-3xl font-semibold text-gray-800">日志管理</h2><button id="toggleLogList" class="bg-gray-100 text-gray-700 px-3 py-1.5 rounded-lg hover:bg-gray-200 transition flex items-center border border-gray-200 shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg><span id="toggleLogListText" class="font-medium">隐藏列表</span></button></div><div class="flex space-x-3"><button id="exportAllLogs" class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1.5 rounded-lg hover:from-blue-600 hover:to-blue-700 transition flex items-center shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg><span class="font-medium">技术支持</span></button></div></div><!-- 主要内容区域 --><div class="bg-white rounded-xl shadow-lg overflow-hidden flex-1"><div class="flex h-full"><!-- 日志列表区域 --><div id="logListContainer" class="w-64 bg-gray-50 border-r min-w-64"><div id="log-item" class="divide-y"><div class="p-4 border-b border-gray-200 bg-gray-50"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" /></svg><h3 class="text-lg font-semibold text-gray-700">日志文件列表</h3></div></div><div class="log-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-log="cm-app"><div><div class="font-semibold text-gray-700">cm_app.log</div><div class="text-xs text-gray-500">/opt/cm/cm_app.log</div></div></div><div class="log-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-log="cm-app-1"><div><div class="font-semibold text-gray-700">cm_app.1.log</div><div class="text-xs text-gray-500">/opt/cm/cm_app.1.log</div></div></div><div class="log-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-log="messages"><div><div class="font-semibold text-gray-700">messages</div><div class="text-xs text-gray-500">/var/log/messages</div></div></div></div></div><!-- 日志内容预览区域 --><div class="flex flex-col flex-grow p-6 overflow-hidden"><div id="logContentHeader" class="flex justify-between items-center mb-4 pb-3 border-b border-gray-200"><div class="flex items-center space-x-3"><div class="bg-blue-100 p-2 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg></div><div><h3 class="text-lg font-semibold text-gray-800">日志内容</h3></div></div><div class="flex items-center space-x-2"><button class="text-gray-600 hover:bg-gray-100 p-2 rounded-lg transition"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg></button><button id="downloadLogBtn" class="flex items-center px-3 py-1.5 text-green-700 bg-green-50 hover:bg-green-100 rounded-lg transition border border-green-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg><span class="font-medium">下载日志</span></button></div></div><div id="logContent" class="whitespace-pre-wrap flex-1 bg-gray-50 p-4 rounded-lg min-h-[24rem] max-h-[calc(100vh-150px)] overflow-y-auto font-mono text-sm leading-relaxed"><p class="text-gray-500 text-center py-10">请选择一个日志文件查看内容</p></div></div></div></div></div><!-- 配置文件管理 --><div class="space-y-6 flex flex-col h-full hidden" id="configFile"><!-- 顶部标题和操作栏 --><div class="flex justify-between items-center"><div class="flex items-center space-x-4"><h2 class="text-3xl font-semibold text-gray-800">配置文件管理</h2></div></div><!-- 主要内容区域 --><div class="bg-white rounded-xl shadow-lg overflow-hidden flex-1"><div class="flex h-full"><!-- 配置列表区域 --><div id="configListContainer" class="w-64 bg-gray-50 border-r min-w-64"><div id="config-items" class="divide-y"><div class="flex flex-col p-4 border-b border-gray-200 bg-gray-50"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /></svg><h3 class="text-lg font-semibold text-gray-700">配置文件列表</h3></div></div><div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_base"><div><div class="font-semibold text-gray-700">cm_internal_file_base</div><div class="text-xs text-gray-500">基础配置文件</div></div></div><div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_NTP"><div><div class="font-semibold text-gray-700">cm_internal_file_NTP</div><div class="text-xs text-gray-500">NTP服务配置文件</div></div></div><div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_gPTP"><div><div class="font-semibold text-gray-700">cm_internal_file_gPTP</div><div class="text-xs text-gray-500">gPTP服务配置文件</div></div></div><div class="config-item p-4 hover:bg-blue-50 cursor-pointer flex justify-between items-center" data-config="cm_internal_file_faults"><div><div class="font-semibold text-gray-700">cm_internal_file_faults</div><div class="text-xs text-gray-500">faults配置文件</div></div></div></div></div><!-- 配置内容预览区域 --><div class="flex flex-col flex-grow p-6 overflow-hidden"><div id="configContentHeader" class="flex justify-between items-center mb-4 pb-3 border-b border-gray-200"><div class="flex items-center space-x-3"><div class="bg-blue-100 p-2 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg></div><div><h3 class="text-lg font-semibold text-gray-800">配置文件内容</h3></div></div><div class="flex space-x-2"><button id="recovConfigBtn" class="px-3 py-1.5 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors flex items-center"> <svg class="w-4 h-4 mr-1" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path> </svg> 恢复默认 </button> <button id="editConfigBtn" class="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center"><svg class="w-4 h-4 mr-1" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>编辑</button><button id="saveConfigBtn" class="px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors flex items-center hidden"><svg class="w-4 h-4 mr-1" 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>保存</button><button id="cancelEditBtn" class="px-3 py-1.5 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors flex items-center hidden"><svg class="w-4 h-4 mr-1" 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="M6 18L18 6M6 6l12 12"></path></svg>取消</button></div></div><div id="configContent" class="whitespace-pre-wrap flex-1 bg-gray-50 p-4 rounded-lg min-h-[24rem] max-h-[calc(100vh-150px)] overflow-y-auto font-mono text-sm leading-relaxed"><p id="configContentpra" class="text-gray-500 text-center py-10">请选择一个配置文件查看内容</p><textarea id="configEditTextarea" class="hidden w-full h-full min-h-[24rem] bg-white border border-gray-200 p-4 rounded-md text-gray-800 font-mono text-sm leading-relaxed shadow-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out placeholder-gray-400"></textarea></div></div></div></div></div><!-- 安全设置 --><div class="space-y-6 hidden" id="security"><div class="flex justify-between items-center mb-4"><h2 class="text-3xl font-semibold text-gray-800">安全设置</h2></div><div class="bg-white p-8 rounded-xl shadow-md border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg><h3 class="text-xl font-medium text-gray-800">修改管理密码</h3></div><!-- 密码修改提示 --><div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 rounded-md"><div class="flex"><svg class="w-5 h-5 text-blue-600 mr-3" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><div><p class="text-blue-700 font-medium">密码安全建议</p><ul class="text-blue-600 text-sm mt-1 list-disc pl-5"><li>使用至少12个字符，并包含大小写字母、数字和特殊符号</li><li>避免使用容易猜测的个人信息，如生日或姓名</li><li>定期更换密码以提高安全性</li></ul></div></div></div><div class="space-y-5 max-w-lg"><!-- 当前密码 --><div><label class="block text-gray-700 font-medium mb-2">当前密码</label><div class="relative"><div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><svg class="w-5 h-5 text-gray-400" 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div><input type="password" class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="输入当前密码" /><button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3"><svg class="w-5 h-5 text-gray-400 hover:text-gray-600" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></button></div></div><!-- 新密码 --><div><label class="block text-gray-700 font-medium mb-2">新密码</label><div class="relative"><div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><svg class="w-5 h-5 text-gray-400" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg></div><input type="password" id="newPassword" class="w-full pl-10 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="输入新密码" /><button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3"><svg class="w-5 h-5 text-gray-400 hover:text-gray-600" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></button></div><!-- 密码强度指示器 --><div class="mt-2"><div class="w-full bg-gray-200 rounded-full h-1.5"><div class="bg-gray-400 h-1.5 rounded-full w-0" id="passwordStrength"></div></div><div class="flex justify-between text-xs text-gray-500 mt-1"><span>弱</span><span>中</span><span>强</span></div></div></div><!-- 确认新密码 --><div><label class="block text-gray-700 font-medium mb-2">确认新密码</label><div class="relative"><div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><svg class="w-5 h-5 text-gray-400" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg></div><input type="password" class="w-full pl-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" placeholder="再次输入新密码" /></div><p class="text-xs text-gray-500 mt-1 hidden" id="passwordMismatch">两次输入的密码不一致</p></div><div class="pt-2"><button class="bg-green-600 text-white px-6 py-2.5 rounded-lg hover:bg-green-700 transition focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 flex items-center"><svg class="w-5 h-5 mr-2" 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>修改密码</button></div></div></div><!-- 其他安全选项 --><div class="bg-white p-8 rounded-xl shadow-md border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path></svg><h3 class="text-xl font-medium text-gray-800">高级安全设置（暂不实现）</h3></div><div class="space-y-5"><!-- 登录保护 --><div class="flex items-center justify-between pb-4 border-b border-gray-100"><div><h4 class="font-medium text-gray-800">登录尝试限制</h4><p class="text-sm text-gray-500 mt-1">限制登录失败次数，防止暴力破解攻击</p></div><div class="relative inline-block w-12 h-6"><input type="checkbox" id="loginProtection" class="opacity-0 w-0 h-0" checked><label for="loginProtection" class="block absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-green-500 transition duration-300 rounded-full"><span class="absolute left-1 bottom-1 bg-white w-4 h-4 transition rounded-full transform translate-x-6"></span></label></div></div><!-- 自动锁定 --><div class="flex items-center justify-between pb-4 border-b border-gray-100"><div><h4 class="font-medium text-gray-800">自动锁定</h4><p class="text-sm text-gray-500 mt-1">无操作10分钟后自动锁定系统</p></div><div class="relative inline-block w-12 h-6"><input type="checkbox" id="autoLock" class="opacity-0 w-0 h-0"><label for="autoLock" class="block absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 transition duration-300 rounded-full"><span class="absolute left-1 bottom-1 bg-white w-4 h-4 transition rounded-full"></span></label></div></div><!-- 登录通知 --><div class="flex items-center justify-between"><div><h4 class="font-medium text-gray-800">异常登录通知</h4><p class="text-sm text-gray-500 mt-1">检测到异常登录时发送通知</p></div><div class="relative inline-block w-12 h-6"><input type="checkbox" id="loginNotification" class="opacity-0 w-0 h-0" checked><label for="loginNotification" class="block absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-green-500 transition duration-300 rounded-full"><span class="absolute left-1 bottom-1 bg-white w-4 h-4 transition rounded-full transform translate-x-6"></span></label></div></div></div></div></div><!-- 网络配置 --><div class="space-y-6 hidden" id="network"><div class="flex justify-between items-center mb-6"><h2 class="text-3xl font-semibold text-gray-800">网络配置</h2></div><!-- 网络状态概览卡片 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path></svg><h3 class="text-lg font-semibold text-gray-800">网络状态</h3><div class="ml-auto"><button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"><svg class="w-4 h-4 mr-1" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>刷新状态</button></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6"><!-- 当前连接信息 --><div class="bg-gradient-to-br from-gray-50 to-slate-100 p-5 rounded-lg border border-gray-200 shadow-sm"><div class="flex items-center justify-between mb-4"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg><h4 class="text-md font-medium text-gray-700">当前连接(eth0)</h4></div><span class="px-2.5 py-1 bg-green-100 text-green-800 text-xs rounded-full flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-1.5 animate-pulse"></span>Active</span></div><!-- 连接信息卡片 --><div class="bg-white p-4 rounded-lg border border-gray-200 mb-4"><div class="flex items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /></svg><span class="text-sm font-medium text-gray-700">设备标识</span></div><div class="pl-6 space-y-2"><div class="flex items-center justify-between pb-2"><span class="text-sm text-gray-500">MAC地址</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">00:1B:44:11:3A:B7</span></div></div></div><!-- IP信息卡片 --><div class="bg-white p-4 rounded-lg border border-gray-200"><div class="flex items-center mb-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg><span class="text-sm font-medium text-gray-700">网络配置</span></div><div class="pl-6 space-y-2"><div class="flex items-center justify-between pb-2"><span class="text-sm text-gray-500">IP地址</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">192.168.1.105</span></div><div class="flex items-center justify-between pb-2"><span class="text-sm text-gray-500">子网掩码</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">255.255.255.0</span></div><div class="flex items-center justify-between pb-2"><span class="text-sm text-gray-500">默认网关</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">192.168.1.1</span></div><div class="flex items-center justify-between"><span class="text-sm text-gray-500">DNS服务器</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">8.8.8.8</span></div><div class="flex items-center justify-between"><span class="text-sm text-gray-500">DHCP</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">Disable</span></div><div class="flex items-center justify-between"><span class="text-sm text-gray-500">MTU</span><span class="text-sm font-medium font-mono bg-gray-50 px-2 py-0.5 rounded">1500</span></div></div></div></div><!-- 网络性能区域 --><div class="bg-gradient-to-br from-gray-50 to-slate-100 p-5 rounded-lg border border-gray-200 shadow-sm"><div class="flex items-center justify-between mb-3"><div class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg><h4 class="text-md font-medium text-gray-700">网络性能监测</h4></div></div><!-- 网卡选择 --><div class="mb-4"><div class="flex items-center justify-between mb-2"><div class="flex items-center "><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg><span class="text-sm text-gray-600">选择网卡</span></div><div class="flex justify-between items-center"><button class="text-xs text-indigo-600 hover:text-indigo-800 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>刷新数据</button></div></div><div class="flex flex-wrap gap-2 mb-2 bg-white p-2 rounded-lg border border-gray-200"><button class="px-2.5 py-1.5 bg-indigo-100 text-indigo-700 text-xs font-medium rounded-md flex items-center border border-indigo-200 shadow-sm"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>eth0</button><button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>switchport1</button><button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>switchport2</button><button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>switchport3</button><button class="px-2.5 py-1.5 bg-white text-gray-700 text-xs font-medium rounded-md flex items-center border border-gray-200 hover:bg-gray-50"><svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>switchport4</button></div></div><!-- 上行网络数据 --><div class="bg-white p-4 rounded-lg border border-gray-200 mb-4"><div class="flex items-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-600 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" /></svg><span class="text-sm font-medium text-gray-700">上行数据</span><span class="ml-auto text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded">发送</span></div><div class="space-y-3"><div><div class="flex justify-between items-center mb-1"><span class="text-xs text-gray-500">带宽使用</span><span class="text-xs font-medium text-blue-700">28.3 Mbps</span></div><div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden"><div class="bg-gradient-to-r from-blue-400 to-blue-600 h-2.5 rounded-full" style="width: 65%"></div></div></div><div><div class="flex justify-between items-center mb-1"><span class="text-xs text-gray-500">丢包率</span><span class="text-xs font-medium text-blue-700">0.5%</span></div><div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden"><div class="bg-gradient-to-r from-blue-300 to-blue-500 h-2.5 rounded-full" style="width: 5%"></div></div></div></div></div><!-- 下行网络数据 --><div class="bg-white p-4 rounded-lg border border-gray-200"><div class="flex items-center mb-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-600 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" /></svg><span class="text-sm font-medium text-gray-700">下行数据</span><span class="ml-auto text-xs bg-green-50 text-green-600 px-2 py-0.5 rounded">接收</span></div><div class="space-y-3"><div><div class="flex justify-between items-center mb-1"><span class="text-xs text-gray-500">带宽使用</span><span class="text-xs font-medium text-green-700">12.2 Mbps</span></div><div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden"><div class="bg-gradient-to-r from-green-400 to-green-600 h-2.5 rounded-full" style="width: 25%"></div></div></div><div><div class="flex justify-between items-center mb-1"><span class="text-xs text-gray-500">丢包率</span><span class="text-xs font-medium text-green-700">1.2%</span></div><div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden"><div class="bg-gradient-to-r from-green-300 to-green-500 h-2.5 rounded-full" style="width: 12%"></div></div></div></div></div></div></div></div><!-- 网络设置卡片 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg><h3 class="text-lg font-semibold text-gray-800">网络设置</h3></div><div class="mb-6"><!-- 以太网配置表单 --><div class="space-y-6 bg-gray-50 p-6 rounded-lg border border-gray-200"><div class="flex items-center justify-between mb-4"><div class="flex items-center"><svg class="w-5 h-5 text-gray-600 mr-2" 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 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg><h4 class="font-medium text-gray-800">以太网配置 (eth0)</h4></div><div class="flex items-center"><span class="text-sm text-gray-500 mr-2">使用DHCP</span><label class="inline-flex relative items-center cursor-pointer"><input type="checkbox" value="" id="dhcp-toggle" class="sr-only peer" checked><div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div></label></div></div><div id="static-ip-form" class="space-y-4 hidden"><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div><label class="block text-sm font-medium text-gray-700 mb-1">IP地址</label><input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="192.168.1.100"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">子网掩码</label><input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="255.255.255.0"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">默认网关</label><input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="192.168.1.1"></div><div><label class="block text-sm font-medium text-gray-700 mb-1">首选DNS服务器</label><input type="text" class="w-full p-2 border border-gray-300 rounded-md" value="8.8.8.8"></div></div></div><div id="dhcp-info" class="space-y-4"><div class="bg-blue-50 border border-blue-100 rounded-md p-4"><div class="flex"><svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><div><p class="text-blue-700 font-medium">已启用DHCP</p><p class="text-sm text-blue-600 mt-1">设备将自动从DHCP服务器获取网络配置</p></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div><label class="block text-sm font-medium text-gray-700 mb-1">获取的IP地址</label><div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">192.168.1.105</div></div><div><label class="block text-sm font-medium text-gray-700 mb-1">子网掩码</label><div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">255.255.255.0</div></div><div><label class="block text-sm font-medium text-gray-700 mb-1">默认网关</label><div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">192.168.1.1</div></div><div><label class="block text-sm font-medium text-gray-700 mb-1">DNS服务器</label><div class="p-2 bg-gray-100 border border-gray-200 rounded-md text-gray-700 font-mono">192.168.1.1</div></div></div></div><div class="pt-4 border-t border-gray-200 flex justify-end space-x-3"><button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition">取消</button><button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">应用设置</button></div></div></div></div><!-- 网络诊断工具卡片 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg><h3 class="text-lg font-semibold text-gray-800">网络诊断工具</h3></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"><div class="bg-gray-50 p-4 rounded-lg border border-gray-200 flex flex-col"><h4 class="text-md font-medium text-gray-700 mb-2">Ping测试</h4><div class="space-y-3 flex-grow"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" placeholder="输入主机名或IP (例如: www.baidu.com)"></div><button class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">开始测试</button></div><div class="bg-gray-50 p-4 rounded-lg border border-gray-200 flex flex-col"><h4 class="text-md font-medium text-gray-700 mb-2">路由追踪</h4><div class="space-y-3 flex-grow"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" placeholder="输入目标主机名或IP"></div><button class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">开始追踪</button></div></div><div class="bg-gray-800 text-green-400 p-4 rounded-lg font-mono text-sm h-58 overflow-y-auto"><div>$ ping www.baidu.com -c 4</div><div class="mt-1">PING www.a.shifen.com (110.242.68.3): 56 data bytes</div><div class="mt-1">64 bytes from 110.242.68.3: icmp_seq=0 ttl=52 time=28.853 ms</div><div>64 bytes from 110.242.68.3: icmp_seq=1 ttl=52 time=28.264 ms</div><div>64 bytes from 110.242.68.3: icmp_seq=2 ttl=52 time=28.652 ms</div><div>64 bytes from 110.242.68.3: icmp_seq=3 ttl=52 time=28.526 ms</div><div class="mt-1">--- www.a.shifen.com ping statistics ---</div><div>4 packets transmitted, 4 packets received, 0.0% packet loss</div><div>round-trip min/avg/max/stddev = 28.264/28.574/28.853/0.211 ms</div></div></div></div><!-- 设备维护页面 --><div class="space-y-6 hidden" id="maintenance"><div class="flex justify-between items-center mb-6"><h2 class="text-3xl font-semibold text-gray-800">设备维护</h2></div><!-- 温度阈值配置区块 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg><h3 class="text-lg font-semibold text-gray-800">低功耗模式温度阈值配置</h3></div><div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6 rounded"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg></div><div class="ml-3"><p class="text-sm text-blue-700">设置温度阈值后，当设备温度超过阈值时，系统将自动切换到低功耗模式以保护硬件。 </br>配置两个阈值可以创建温度滞后区间：温度超过进入阈值时系统将切换到低功耗模式，只有当温度降至退出阈值以下时才会恢复正常功耗。这可避免温度在临界点频繁波动导致的模式切换。</p></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><!-- CPU温度阈值配置 --><div class="p-4 border border-gray-200 rounded-lg"><div class="flex items-center justify-between mb-4"><div class="flex items-center"><svg class="w-5 h-5 text-gray-600 mr-2" 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="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path></svg><h4 class="font-medium text-gray-800">CPU温度阈值</h4></div><div class="relative inline-block w-12 align-middle select-none"><input type="checkbox" name="cpuToggle" id="cpuToggle" class="absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-blue-600" checked /><label for="cpuToggle" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer checked:bg-blue-600"></label></div></div><div class="space-y-4"><!-- 进入低功耗模式阈值 --><div><div class="flex justify-between mb-1"><span class="text-sm font-medium text-gray-700">进入低功耗模式阈值</span><span class="text-sm font-medium text-blue-600" id="cpuTempEnterValue">85°C</span></div><input id="cpuTempEnterSlider" type="range" min="60" max="95" value="85" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"><div class="flex justify-between text-xs text-gray-500 px-1 mt-1"><span>60°C</span><span>95°C</span></div></div><!-- 退出低功耗模式阈值 (新增) --><div><div class="flex justify-between mb-1"><span class="text-sm font-medium text-gray-700">退出低功耗模式阈值</span><span class="text-sm font-medium text-green-600" id="cpuTempExitValue">75°C</span></div><input id="cpuTempExitSlider" type="range" min="55" max="90" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-green-600"><div class="flex justify-between text-xs text-gray-500 px-1 mt-1"><span>55°C</span><span>90°C</span></div></div><!-- 阈值差值说明 --><div class="bg-gray-50 p-2 rounded-md text-xs text-gray-600"><span>当前阈值差：<span id="cpuThresholdDiff" class="font-medium text-blue-600">10°C</span></span><div class="mt-1">推荐保持5-15°C的阈值差，以避免频繁切换模式</div></div></div></div><!-- GPU温度阈值配置 --><div class="p-4 border border-gray-200 rounded-lg"><div class="flex items-center justify-between mb-4"><div class="flex items-center"><svg class="w-5 h-5 text-gray-600 mr-2" 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="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg><h4 class="font-medium text-gray-800">GPU温度阈值</h4></div><div class="relative inline-block w-12 align-middle select-none"><input type="checkbox" name="gpuToggle" id="gpuToggle" class="absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-blue-600" checked /><label for="gpuToggle" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer checked:bg-blue-600"></label></div></div><div class="space-y-4"><!-- 进入低功耗模式阈值 --><div><div class="flex justify-between mb-1"><span class="text-sm font-medium text-gray-700">进入低功耗模式阈值</span><span class="text-sm font-medium text-blue-600" id="gpuTempEnterValue">80°C</span></div><input id="gpuTempEnterSlider" type="range" min="55" max="90" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"><div class="flex justify-between text-xs text-gray-500 px-1 mt-1"><span>55°C</span><span>90°C</span></div></div><!-- 退出低功耗模式阈值 (新增) --><div><div class="flex justify-between mb-1"><span class="text-sm font-medium text-gray-700">退出低功耗模式阈值</span><span class="text-sm font-medium text-green-600" id="gpuTempExitValue">70°C</span></div><input id="gpuTempExitSlider" type="range" min="50" max="85" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-green-600"><div class="flex justify-between text-xs text-gray-500 px-1 mt-1"><span>50°C</span><span>85°C</span></div></div><!-- 阈值差值说明 --><div class="bg-gray-50 p-2 rounded-md text-xs text-gray-600"><span>当前阈值差：<span id="gpuThresholdDiff" class="font-medium text-blue-600">10°C</span></span><div class="mt-1">推荐保持5-15°C的阈值差，以避免频繁切换模式</div></div></div></div></div><div class="mt-6 flex justify-end"><button id="resetDefaults" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 mr-2 hover:bg-gray-50">重置为默认值</button><button id="saveThresholds" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">保存设置</button></div></div><!-- 设备自我诊断区块 --><div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><div class="flex items-center mb-6"><svg class="w-6 h-6 text-blue-600 mr-2" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg><h3 class="text-lg font-semibold text-gray-800">设备自我诊断</h3></div><div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg></div><div class="ml-3"><p class="text-sm text-yellow-700">启动诊断可能会临时影响系统性能，建议在非关键任务期间执行。完整诊断预计需要3-5分钟。</p></div></div></div><!-- 诊断选项卡 --><div class="border border-gray-200 rounded-lg mb-6"><div class="flex border-b border-gray-200"><button class="px-4 py-3 text-blue-600 border-b-2 border-blue-600 font-medium text-sm flex-1">快速检查</button><button class="px-4 py-3 text-gray-500 hover:text-gray-700 font-medium text-sm flex-1">标准诊断</button><button class="px-4 py-3 text-gray-500 hover:text-gray-700 font-medium text-sm flex-1">深度诊断</button><button class="px-4 py-3 text-gray-500 hover:text-gray-700 font-medium text-sm flex-1">自定义</button></div><!-- 诊断项目选择 --><div class="p-4"><div class="grid grid-cols-2 md:grid-cols-3 gap-3"><label class="flex items-center space-x-2"><input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><span class="text-sm text-gray-700">系统状态检查</span></label><label class="flex items-center space-x-2"><input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><span class="text-sm text-gray-700">硬件基本测试</span></label><label class="flex items-center space-x-2"><input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><span class="text-sm text-gray-700">存储健康检查</span></label><label class="flex items-center space-x-2"><input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><span class="text-sm text-gray-700">网络连接测试</span></label><label class="flex items-center space-x-2"><input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><span class="text-sm text-gray-700">内存压力测试</span></label><label class="flex items-center space-x-2"><input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"><span class="text-sm text-gray-700">GPU性能测试</span></label></div></div></div><!-- 诊断结果 --><div id="diagnosticResults" class="hidden"><h4 class="font-medium text-gray-800 mb-4">诊断结果</h4><div class="space-y-4"><div class="bg-green-50 p-4 rounded-lg"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></div><div class="ml-3"><h5 class="text-sm font-medium text-green-800">系统状态检查</h5><p class="text-sm text-green-700 mt-1">所有系统服务运行正常。</p></div></div></div><div class="bg-green-50 p-4 rounded-lg"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></div><div class="ml-3"><h5 class="text-sm font-medium text-green-800">硬件基本测试</h5><p class="text-sm text-green-700 mt-1">CPU和内存正常工作。</p></div></div></div><div class="bg-yellow-50 p-4 rounded-lg"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg></div><div class="ml-3"><h5 class="text-sm font-medium text-yellow-800">存储健康检查</h5><p class="text-sm text-yellow-700 mt-1">SSD磁盘空间低于15%。建议清理不必要文件。</p></div></div></div><div class="bg-green-50 p-4 rounded-lg"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg></div><div class="ml-3"><h5 class="text-sm font-medium text-green-800">网络连接测试</h5><p class="text-sm text-green-700 mt-1">网络连接正常，延迟: 28ms。</p></div></div></div></div><div class="mt-6 flex justify-between"><button class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">导出诊断报告</button><button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">发送报告至技术支持</button></div></div><!-- 诊断进度（默认隐藏） --><div id="diagnosticProgress" class="hidden space-y-4"><div class="flex items-center justify-between mb-2"><h4 class="font-medium text-gray-800">诊断进行中</h4><span class="text-sm text-gray-500" id="progressPercentage">25%</span></div><div class="w-full bg-gray-200 rounded-full h-2.5"><div class="bg-blue-600 h-2.5 rounded-full progress-animation" style="width: 25%"></div></div><div class="flex justify-between text-sm text-gray-600"><span>当前执行: 系统状态检查</span><span>预计剩余时间: 2分15秒</span></div><button id="cancelDiagnostic" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 inline-flex items-center"><svg class="w-4 h-4 mr-1" 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="M6 18L18 6M6 6l12 12"></path></svg>取消诊断</button></div><!-- 开始诊断按钮 --><div id="startDiagnosticContainer" class="mt-6 flex justify-end"><button id="startDiagnostic" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center"><svg class="w-5 h-5 mr-2" 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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>开始诊断</button></div></div></div><!-- 退出登录 --><div class="space-y-6 hidden" id="logout"></div></div></div></div></html>js
// 全局DOM元素
const DOM = {loginPage: document.getElementById("loginPage"),mainContainer: document.getElementById("mainContainer"),loginForm: document.getElementById("loginForm"),logoutTab: document.getElementById("logoutTab"),tabs: document.querySelectorAll(".tab"),contentSections: document.querySelectorAll("#content > div"),uploadBtn: document.getElementById("uploadBtn"),firmwareFile: document.getElementById("firmwareFile"),overallProgressContainer: document.getElementById("overallProgressContainer"),overallProgress: document.getElementById("overallProgress"),upgradeStages: document.getElementById("upgradeStages")
};// 标签ID与内容ID的映射
const TAB_TO_CONTENT_MAP = {overviewTab: "overview",firmwareTab: "firmware",securityTab: "security",logoutTab: "logout",networkTab: "network",maintenanceTab: "maintenance",logTab: "log",configFileTab: "configFile"
};// =====================
// 登录和用户认证模块
// =====================
const AuthModule = (() => {function handleLogin(e) {e.preventDefault();const username = document.getElementById("username").value;const password = document.getElementById("password").value;// 简单的登录验证（实际应用中应该使用后端验证）if (username !== null && password !== null) {DOM.loginPage.classList.add("hidden");DOM.mainContainer.classList.remove("hidden");TabModule.switchToTab("overviewTab");} else {alert("用户名或密码错误");}}function handleLogout() {DOM.mainContainer.classList.add("hidden");DOM.loginPage.classList.remove("hidden");// 重置登录表单document.getElementById("username").value = "";document.getElementById("password").value = "";}function init() {DOM.loginForm.addEventListener("submit", handleLogin);DOM.logoutTab.addEventListener("click", handleLogout);}return { init };
})();// =====================
// 标签切换模块
// =====================
const TabModule = (() => {function switchToTab(tabId) {// 隐藏所有内容区域DOM.contentSections.forEach(section => {section.classList.add("hidden");});// 显示选定的内容区域const contentId = TAB_TO_CONTENT_MAP[tabId];if (contentId) {document.getElementById(contentId).classList.remove("hidden");}// 更新标签样式DOM.tabs.forEach(tab => {tab.classList.remove("bg-blue-100", "text-blue-600");tab.classList.add("hover:bg-gray-100");if (tab.id === tabId) {tab.classList.add("bg-blue-100", "text-blue-600");}});}function init() {DOM.tabs.forEach(tab => {tab.addEventListener("click", () => switchToTab(tab.id));});}return { init, switchToTab };
})();// =====================
// 图表和数据可视化模块
// =====================
const ChartModule = (() => {let charts = {};function createChart(elementId, option) {const chart = echarts.init(document.getElementById(elementId));chart.setOption(option);return chart;}function initCpuChart() {const cpuOption = {tooltip: {trigger: "axis",axisPointer: { type: "line" }},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},xAxis: {type: "category",boundaryGap: false,data: ["11:10", "11:11", "11:12", "11:13", "11:14", "11:15"]},yAxis: {type: "value",min: 0,max: 100,axisLabel: { formatter: "{value}%" }},series: [{name: "CPU使用率",type: "line",smooth: true,data: [50, 45, 35, 42, 30, 35],itemStyle: { color: "#8884d8" },areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(136, 132, 216, 0.8)" },{ offset: 1, color: "rgba(136, 132, 216, 0.2)" }])}}]};return createChart("cpuChart", cpuOption);}function initMemoryChart() {const memoryOption = {tooltip: {trigger: "axis",axisPointer: { type: "line" }},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},xAxis: {type: "category",boundaryGap: false,data: ["11:10", "11:11", "11:12", "11:13", "11:14", "11:15"]},yAxis: {type: "value",min: 0,max: 100,axisLabel: { formatter: "{value}%" }},series: [{name: "内存使用率",type: "line",smooth: true,data: [40, 35, 20, 30, 25, 30],itemStyle: { color: "#82ca9d" },areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(130, 202, 157, 0.8)" },{ offset: 1, color: "rgba(130, 202, 157, 0.2)" }])}}]};return createChart("memoryChart", memoryOption);}function initGpuChart() {const gpuOption = {tooltip: {trigger: "axis",formatter: "{b}<br />{a}: {c}%"},grid: {left: "3%",right: "4%",bottom: "3%",top: "3%",containLabel: true},xAxis: {type: "category",boundaryGap: false,data: ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30"],axisLine: { lineStyle: { color: "#ddd" } },axisLabel: { color: "#666" }},yAxis: {type: "value",min: 0,max: 100,axisLine: { show: false },axisLabel: {color: "#666",formatter: "{value}%"},splitLine: { lineStyle: { color: "#eee" } }},series: [{name: "GPU使用率",type: "line",smooth: true,data: [35, 47, 89, 75, 42, 47, 47],areaStyle: {color: {type: "linear",x: 0, y: 0, x2: 0, y2: 1,colorStops: [{ offset: 0, color: "rgba(34, 197, 94, 0.5)" },{ offset: 1, color: "rgba(34, 197, 94, 0.1)" }]}},itemStyle: { color: "#22c55e" },lineStyle: { width: 3, color: "#22c55e" },symbolSize: 6}]};return createChart("gpuChart", gpuOption);}function initVramChart() {const vramOption = {tooltip: {trigger: "axis",formatter: "{b}<br />{a}: {c}%"},grid: {left: "3%",right: "4%",bottom: "3%",top: "3%",containLabel: true},xAxis: {type: "category",boundaryGap: false,data: ["00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30"],axisLine: { lineStyle: { color: "#ddd" } },axisLabel: { color: "#666" }},yAxis: {type: "value",min: 0,max: 100,axisLine: { show: false },axisLabel: {color: "#666",formatter: "{value}%"},splitLine: { lineStyle: { color: "#eee" } }},series: [{name: "显存使用率",type: "line",smooth: true,data: [58, 62, 72, 68, 71, 69, 68],areaStyle: {color: {type: "linear",x: 0, y: 0, x2: 0, y2: 1,colorStops: [{ offset: 0, color: "rgba(245, 158, 11, 0.5)" },{ offset: 1, color: "rgba(245, 158, 11, 0.1)" }]}},itemStyle: { color: "#f59e0b" },lineStyle: { width: 3, color: "#f59e0b" },symbolSize: 6}]};return createChart("vramChart", vramOption);}function handleResize() {Object.values(charts).forEach(chart => {if (chart && typeof chart.resize === 'function') {chart.resize();}});}function init() {charts = {cpu: initCpuChart(),memory: initMemoryChart(),gpu: initGpuChart(),vram: initVramChart()};// 窗口大小变化时重新渲染图表window.addEventListener("resize", handleResize);}return { init };
})();// =====================
// 固件升级模块
// =====================
const FirmwareModule = (() => {const UPGRADE_STAGES = [{ id: "stage1", duration: 2000, name: "U盘拷贝" },{ id: "stage2", duration: 2000, name: "文件校验" },{ id: "stage3", duration: 3000, name: "下载固件" },{ id: "stage4", duration: 4000, name: "固件烧录" },{ id: "stage5", duration: 2000, name: "系统重启" }];function simulateUpgrade() {let currentStage = 0;function updateStage() {if (currentStage >= UPGRADE_STAGES.length) {// 升级完成DOM.overallProgress.style.width = "100%";DOM.uploadBtn.disabled = false;DOM.uploadBtn.textContent = "升级完成";return;}const stage = UPGRADE_STAGES[currentStage];const stageEl = document.getElementById(stage.id);const svg = stageEl.querySelector("svg");// 更新进度DOM.overallProgress.style.width = `${((currentStage + 1) / UPGRADE_STAGES.length) * 100}%`;// 模拟阶段执行svg.classList.remove("text-gray-400");svg.classList.add("text-green-500");setTimeout(() => {currentStage++;updateStage();}, stage.duration);}updateStage();}function handleUpgrade() {if (!DOM.firmwareFile.files.length) {alert("请先选择固件文件");return;}// 重置状态DOM.overallProgressContainer.classList.remove("hidden");DOM.upgradeStages.classList.remove("hidden");DOM.uploadBtn.disabled = true;DOM.uploadBtn.textContent = "升级中...";// 重置阶段状态UPGRADE_STAGES.forEach(stage => {const stageEl = document.getElementById(stage.id);const svg = stageEl.querySelector("svg");svg.classList.remove("text-green-500", "text-red-500");svg.classList.add("text-gray-400");});// 模拟升级过程simulateUpgrade();}function init() {DOM.uploadBtn.addEventListener("click", handleUpgrade);}return { init };
})();// =====================
// 日志管理模块
// =====================
const LogModule = (() => {// 日志内容示例
const cm_app_log = `2024-12-16 07:06:51.414 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.421 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_sw_version. From 172.168.1.100
2024-12-16 07:06:51.421 [ INFO] 865 pcs.cpp:983 command get_sw_version ret=0 result= VERSION: 5.5.0-rw-nio-pcs-rc1-arm-public
BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
BUILD_TIME: 09:46:21 Dec 4 2024
API: 3.0.12.20241204094014
API_BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
API_BUILD_TIME: 09:41:21 Dec 4 2024
2024-12-16 07:06:51.423 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:51.428 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/command/?.*$ query: get_sn. From 172.168.1.100
2024-12-16 07:06:51.428 [ INFO] 865 pcs.cpp:983 command get_sn ret=0 result= 531942453212
2024-12-16 07:06:51.429 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.432 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_DID_SUPPLIER_HW_VER. From 172.168.1.100
2024-12-16 07:06:51.432 [ INFO] 865 pcs.cpp:983 command get_DID_SUPPLIER_HW_VER ret=0 result= {"DID_SUPPLIER_HW_VER": "W7"}
2024-12-16 07:06:51.433 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:51.436 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/command/?.*$ query: get_fw_version. From 172.168.1.100
2024-12-16 07:06:51.438 [ INFO] 865 pcs.cpp:983 command get_fw_version ret=0 result= App Version: release-5.5.0-rw-nio-lidarapp-rc5.robinw-696
build-time: 2024-12-05-17-47-42
FPGA Datecode: 0x241203b3
BOARD: W7
R5: 274.2024-12-05-09-58-14
Firmware Version: robinw-release-1943.2024-12-11-09-02-39build-tag: robinw-release-1943build-seq: 1943build-time: 2024-12-11-09-02-39build-git-tag: 1.0.13board-type: robinwcustomer: normal2024-12-16 07:06:51.439 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.442 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_DID_SUPPLIER_HW_VER. From 172.168.1.100
2024-12-16 07:06:51.444 [ INFO] 865 pcs.cpp:983 command get_DID_SUPPLIER_HW_VER ret=0 result= {"DID_SUPPLIER_HW_VER": "W7"}
2024-12-16 07:06:51.445 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:51.448 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/capture/?.*$ query: type=pcd&duration=1&request_time=1734332811446. From 172.168.1.100
2024-12-16 07:06:51.950 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:51.953 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/capture/?.*$ query: type=pcd&duration=1&request_time=1734332811446. From 172.168.1.100
2024-12-16 07:06:52.455 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c001d30. message: End of file
2024-12-16 07:06:52.459 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/capture/?.*$ query: type=pcd&duration=1&request_time=1734332811446. From 172.168.1.100
2024-12-16 07:06:52.962 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:06:52.967 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_security_state. From 172.168.1.100
2024-12-16 07:06:55.168 [ INFO] 878 [FROM_PTP4L]:7999 sync_rx : info_tx - time_tx (215220 : 215200 - 215157), offset 100ms(0) 10ms(0) 1ms(0) 100us(0) 50us(0) 10us(5); [2024-12-16 07:06:55.167746]
2024-12-16 07:06:58.987 [ INFO] 842 window_blockage.cpp:177 WindowBlockageCNN block count: 0 0 0 0 0
2024-12-16 07:06:59.775 [ INFO] 862 status_report.cpp:359 counters: point_data_packet_sent=50398552 point_sent=6548472317 message_packet_sent=1 raw_data_read=880976199680 total_frame=271208 total_polygon_rotation=600 total_polygon_facet= 4 power_up_time_in_second=27128 process_up_time_in_second=27125 lose_ptp_sync=42 bad_data[4]=0/0/0/0 data_drop[8]=0/0/0/0/0/0/0/0 latency_10us_average[6]=5/81/33/68/65/0 latency_10us_variation[6]=21/43/11/27/34/0 latency_10us_max[6]=449/489/127/521/1023/0 big_latency_frame=0 bad_frame=0 big_gap_frame=0 small_gap_frame=0 cpu_percentage=200 mem_percentage=28 netstat_rx speed/drop/err=1kBps/0/0 netstat_tx speed/drop/err=12528kBps/0/0 sys_cpu_percentage=49/41/55/53 motor(std/min/max1/max2/mean)=7400/39008/31748/34070/11425 in_faults=4 ex_faults=0; sensor_readings: t_fpga=470 t_laser=540 t_det=460 m_rpm_1000th=600000 motor_current_ma=36[LogStormControl: 854:window_blockage.cpp:427, count=1; 842:lidar_clock_ptp.cpp:128, count=1; 842:lidar_clock_ptp.cpp:105, count=1; 878:[FROM_FW]:7999, count=7; 878:[FROM_PTP4L]:7999, count=2; 842:lidar_clock_ptp.cpp:123, count=1; 865:pcs.cpp:1982, count=36]
2024-12-16 07:07:04.553 [ INFO] 842 lidar_clock_ptp.cpp:83 recv time msg [214800-214800] fpga_clock=5426214339610 ts=2024-12-16 07:07:04 diff_10us=0 bootup_utc=1734305692.928302
2024-12-16 07:07:04.678 [ INFO] 842 lidar_clock.cpp:197 update time=214800, config=1-PTP state=7-PTP_LOCKED, fpga_clock=5426214339610 ts=2024-12-16 07:07:04 utc=1734332824 bootup_utc=1734305692.928302, bootup_utc offset >100ms(0) >10ms(0) >1ms(0) >100us(1), ppm >1000(0) >500(0) >100(0) >40(0).
2024-12-16 07:07:04.777 [ INFO] 862 status_report.cpp:359 counters: point_data_packet_sent=50407971 point_sent=6549699932 message_packet_sent=1 raw_data_read=881138663424 total_frame=271258 total_polygon_rotation=600 total_polygon_facet= 4 power_up_time_in_second=27133 process_up_time_in_second=27130 lose_ptp_sync=42 bad_data[4]=0/0/0/0 data_drop[8]=0/0/0/0/0/0/0/0 latency_10us_average[6]=5/81/33/68/65/0 latency_10us_variation[6]=21/43/11/27/34/0 latency_10us_max[6]=449/489/127/521/1023/0 big_latency_frame=0 bad_frame=0 big_gap_frame=0 small_gap_frame=0 cpu_percentage=200 mem_percentage=28 netstat_rx speed/drop/err=1kBps/0/0 netstat_tx speed/drop/err=12526kBps/0/0 sys_cpu_percentage=48/41/51/54 motor(std/min/max1/max2/mean)=7400/39008/31748/34070/11425 in_faults=4 ex_faults=0; sensor_readings: t_fpga=470 t_laser=540 t_det=460 m_rpm_1000th=600000 motor_current_ma=39
2024-12-16 07:07:05.177 [ INFO] 878 [FROM_PTP4L]:7999 sync_rx : info_tx - time_tx (215300 : 215280 - 215237), offset 100ms(0) 10ms(0) 1ms(0) 100us(0) 50us(0) 10us(5); [2024-12-16 07:07:05.177430]
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 read queue#0 added=1 finished=0 dropped=0 blocked=0 wait=0us process=0us drop=0us pid=854
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 signal queue#0 added=13446238 finished=13446238 dropped=0 blocked=0 wait=48us process=795us drop=0us pid=842 elapsed_time=120001/27130259ms active_time=47322/10698895ms ratio=39.44%/39.44%
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 noise queue#0 added=13446238 finished=13446238 dropped=0 blocked=0 wait=16us process=296us drop=0us pid=838 elapsed_time=120001/27130259ms active_time=17604/3988729ms ratio=14.67%/14.70%
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 angle queue#0 added=11683158 finished=11683157 dropped=0 blocked=0 wait=12us process=702us drop=0us pid=836 elapsed_time=120001/27130259ms active_time=36727/8210877ms ratio=30.61%/30.26%
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 deliver2 queue#0 added=9353541 finished=9353541 dropped=0 blocked=0 wait=75us process=582us drop=0us pid=831 elapsed_time=120001/27130259ms active_time=24393/5449471ms ratio=20.33%/20.09%
2024-12-16 07:07:07.054 [ INFO] 836 stage_read.cpp:168 StageRead: XXX TODO,raw_data_read_: 881212653568
2024-12-16 07:07:07.054 [ INFO] 836 stage_signal.cpp:2156 StageRobinSignal: dropped=0 0:0 1:0 2:0 3:0 4:0 5:0 6:0 7:0 8:0 9:0 10:0
2024-12-16 07:07:07.054 [ INFO] 836 stage_noise_filter.cpp:46 Stage_n0:jobs_dropped=0 jobs_skipped=0 revive=0 noise=(16170/0/0/0) (0/0/0/0) real=(72182/0/0/0) (0/0/0/0) mean/dev/min/max noise=0/0/0/0 real=0/0/0/0 noise_intensity=(0/0 0/0 0/0 0/0) (0/0 0/0 0/0 0/0) noise_distance=(0/0 0/0 0/0 0/0) (0/0 0/0 0/0 0/0) noise_elongation=(0/0 0/0 0/0 0/0) (0/0 0/0 0/0 0/0) frames=271281 lost-frames=0
2024-12-16 07:07:07.054 [ INFO] 836 stage_angle.cpp:1156 StageRobinAngle: dropped=0 delivered=11683158 read(wait=55.9/214.9/4498.2 run=0.0/0.0/0.0) signal(wait=815.9/439.6/4897.5 run=0.0/0.0/0.0) noise(wait=332.8/112.4/1277.6 run=0.0/0.0/0.0) angle(wait=686.9/271.5/5219.4 run=0.0/0.0/0.0) sum=1891.5/740.5/7046.0ms callback=0.00/0.00/0.00/0 frames=271281 points=18991141916
2024-12-16 07:07:07.054 [ INFO] 836 stage_deliver2.cpp:39 StageDeliver2: dropped=0delivered=9353541 callback=0.10/0.09/9.39/50412269
2024-12-16 07:07:07.054 [ INFO] 836 consumer_producer.cpp:486 AsyncLogThread_Manager queue#0 added=64716 finished=64710 dropped=0 blocked=0 wait=180us process=244us drop=0us pid=554 elapsed_time=120001/27131663ms active_time=70/15851ms ratio=0.06%/0.06%
2024-12-16 07:07:08.201 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c000f10. path: ^/command/?.*$ query: get_fw_version. From 172.168.1.100
2024-12-16 07:07:08.202 [ INFO] 865 pcs.cpp:983 command get_fw_version ret=0 result= App Version: release-5.5.0-rw-nio-lidarapp-rc5.robinw-696
build-time: 2024-12-05-17-47-42
FPGA Datecode: 0x241203b3
BOARD: W7
R5: 274.2024-12-05-09-58-14
Firmware Version: robinw-release-1943.2024-12-11-09-02-39build-tag: robinw-release-1943build-seq: 1943build-time: 2024-12-11-09-02-39build-git-tag: 1.0.13board-type: robinwcustomer: normal
2024-12-16 07:07:08.203 [ INFO] 865 server_ws.cpp:51 Server: Event in connection 0x7f9c000f10. message: End of file
2024-12-16 07:07:08.205 [ INFO] 865 server_ws.cpp:104 Server: Connect connection 0x7f9c001d30. path: ^/command/?.*$ query: get_sw_version. From 172.168.1.100
2024-12-16 07:07:08.205 [ INFO] 865 pcs.cpp:983 command get_sw_version ret=0 result= VERSION: 5.5.0-rw-nio-pcs-rc1-arm-public
BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
BUILD_TIME: 09:46:21 Dec 4 2024
API: 3.0.12.20241204094014
API_BUILD_TAG: release-5.5.0-rw-nio-pcs-rc1-arm
API_BUILD_TIME: 09:41:21 Dec 4 2024`
const cm_app_1_log = `2021-12-19 19:46:53.050 [ INFO] ----------------------------------------------
2021-12-19 19:46:53.050 [ INFO] restart_counter = 498
2021-12-19 19:46:53.050 [ INFO] [ 463] utils.cc:978 set cpu1 online
2021-12-19 19:46:53.051 [ INFO] [ 463] utils.cc:978 set cpu2 online
2021-12-19 19:46:53.052 [ INFO] [ 463] utils.cc:978 set cpu3 online
2021-12-19 19:46:53.052 [ INFO] [ 463] utils.cc:978 set cpu4 online
2021-12-19 19:46:53.052 [ INFO] [ 463] utils.cc:978 set cpu5 online
2021-12-19 19:46:53.053 [ INFO] [ 463] utils.cc:978 set cpu6 online
2021-12-19 19:46:53.053 [ INFO] [ 463] utils.cc:978 set cpu7 online
2021-12-19 19:46:54.536 [ INFO] [ 463] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:54.547 [ INFO] [ 463] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:54.558 [ INFO] [ 463] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:54.569 [ INFO] [ 463] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:54.581 [ INFO] [ 463] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:54.594 [ INFO] [ 463] utils.cc:1097 kill process ntpd
2021-12-19 19:46:54.605 [ INFO] [ 463] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:59.870 [ INFO] [ 478] sysmon.cc:93 FSI initialized
2021-12-19 19:46:59.890 [ INFO] [ 827] sysmon.cc:931 MonitorEthernetPHYTimer: ret=0 up=1, link=1
2021-12-19 19:47:05.022 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:14.991 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:25.133 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:46:52.832 [ INFO] [ 463] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:52.846 [ INFO] [ 463] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:52.855 [ INFO] [ 463] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:52.865 [ INFO] [ 463] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:52.880 [ INFO] [ 463] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:52.890 [ INFO] [ 463] utils.cc:1097 kill process ntpd
2021-12-19 19:46:52.899 [ INFO] [ 463] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:53.115 [ INFO] ----------------------------------------------
2021-12-19 19:46:53.115 [ INFO] restart_counter = 499
2021-12-19 19:46:53.115 [ INFO] [ 463] utils.cc:978 set cpu1 online
2021-12-19 19:46:53.116 [ INFO] [ 463] utils.cc:978 set cpu2 online
2021-12-19 19:46:53.117 [ INFO] [ 463] utils.cc:978 set cpu3 online
2021-12-19 19:46:53.117 [ INFO] [ 463] utils.cc:978 set cpu4 online
2021-12-19 19:46:53.118 [ INFO] [ 463] utils.cc:978 set cpu5 online
2021-12-19 19:46:53.118 [ INFO] [ 463] utils.cc:978 set cpu6 online
2021-12-19 19:46:53.118 [ INFO] [ 463] utils.cc:978 set cpu7 online
2021-12-19 19:46:54.603 [ INFO] [ 463] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:54.615 [ INFO] [ 463] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:54.626 [ INFO] [ 463] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:54.637 [ INFO] [ 463] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:54.648 [ INFO] [ 463] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:54.659 [ INFO] [ 463] utils.cc:1097 kill process ntpd
2021-12-19 19:46:54.670 [ INFO] [ 463] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:59.870 [ INFO] [ 478] sysmon.cc:93 FSI initialized
2021-12-19 19:46:59.963 [ INFO] [ 827] sysmon.cc:931 MonitorEthernetPHYTimer: ret=0 up=1, link=1
2021-12-19 19:47:05.076 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:14.760 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:47:25.252 [ WARN] [ 827] sysmon.cc:1666 process dropbear is not running
2021-12-19 19:46:52.771 [ INFO] [ 461] utils.cc:1097 kill process ptp_start.sh
2021-12-19 19:46:52.783 [ INFO] [ 461] utils.cc:1097 kill process ptp4l
2021-12-19 19:46:52.793 [ INFO] [ 461] utils.cc:1097 kill process ptp_diag.sh
2021-12-19 19:46:52.802 [ INFO] [ 461] utils.cc:1097 kill process ntp_start.sh
2021-12-19 19:46:52.812 [ INFO] [ 461] utils.cc:1097 kill process ntpdate
2021-12-19 19:46:52.821 [ INFO] [ 461] utils.cc:1097 kill process ntpd
2021-12-19 19:46:52.830 [ INFO] [ 461] utils.cc:1097 kill process phc2sys
2021-12-19 19:46:53.046 [ INFO] ----------------------------------------------`const logContents = {"cm-app": cm_app_log,"cm-app-1": cm_app_1_log,"messages": "Syslog content goes here..."};let currentlogName = null;function toggleLogList() {const logListContainer = document.getElementById("logListContainer");const toggleLogListText = document.getElementById("toggleLogListText");// 切换列表可见性const isListVisible = !logListContainer.classList.contains("hidden");if (isListVisible) {// 隐藏列表logListContainer.classList.add("hidden");toggleLogListText.textContent = "显示列表";} else {// 显示列表logListContainer.classList.remove("hidden");toggleLogListText.textContent = "隐藏列表";}}function showLogContent(logName) {// 移除所有日志项的选中状态document.querySelectorAll(".log-item").forEach(el => {el.classList.remove("bg-blue-100");});// 为当前点击项添加选中状态document.querySelector(`.log-item[data-log="${logName}"]`).classList.add("bg-blue-100");// 获取日志内容currentlogName = logName;const logContent = document.getElementById("logContent");logContent.innerHTML = `<pre class="text-gray-700 whitespace-pre-wrap">${logContents[logName]}</pre>`;// 启用下载和复制按钮document.getElementById("downloadLogBtn").disabled = false;document.getElementById("copyLogBtn").disabled = false;}function downloadLog() {if (!currentlogName) return;const logContent = logContents[currentlogName];const blob = new Blob([logContent], { type: "text/plain" });const url = URL.createObjectURL(blob);const a = document.createElement("a");a.href = url;a.download = `${currentlogName}_log_${new Date().toISOString().split("T")[0]}.txt`;a.click();URL.revokeObjectURL(url);}function init() {// 初始化日志列表切换const toggleLogListBtn = document.getElementById("toggleLogList");if (toggleLogListBtn) {toggleLogListBtn.addEventListener("click", toggleLogList);}// 初始化日志项点击事件document.querySelectorAll(".log-item").forEach(item => {item.addEventListener("click", () => showLogContent(item.getAttribute("data-log")));});// 初始化下载按钮const downloadLogBtn = document.getElementById("downloadLogBtn");if (downloadLogBtn) {downloadLogBtn.addEventListener("click", downloadLog);}}return { init };
})();// =====================
// 配置文件模块
// =====================
const ConfigModule = (() => {
// 配置文件示例
const baseConfigContentExample = `# CM base configuration file
[log]
log_level = 4
log_file = /var/log/cm.log
log_size = 30M
log_count = 3
udp_send = 1
udp_port = 514
udp_ip = 192.168.1.201
`
const gPTPConfigContentExample = `# Automotive Profile example configuration for slaves containing those
# attributes which differ from the defaults. See the file, default.cfg, for
# the complete list of available options.
#[global]
#
# Options carried over from gPTP.
#gmCapable 1
priority1 254
priority2 254
utc_offset 0
logSyncInterval -3
syncReceiptTimeout 3
neighborPropDelayThresh 800000
min_neighbor_prop_delay -20000000
assume_two_step 1
path_trace_enabled 1
follow_up_info 1
transportSpecific 0x1
ptp_dst_mac 01:80:C2:00:00:0E
network_transport L2
delay_mechanism P2P
tx_timestamp_timeout 1000
clock_servo linreg
step_threshold 1.0
first_step_threshold 0.0001
logging_level 4#
# Automotive Profile specific options
#BMCA noop
slaveOnly 1
inhibit_announce 1
asCapable true
ignore_source_id 1
# Required to quickly correct Time Jumps in master
#operLogSyncInterval 0
#operLogPdelayReqInterval 2
msg_interval_request 0
#servo_offset_threshold 20000
#servo_num_offset_values 3`
const NTPConfigContentExample = `# 允许从本地网络同步时间
restrict 192.168.1.0 mask 255.255.255.0 nomodify notrap # 默认拒绝所有访问
restrict default kod nomodify notrap nopeer noquery
restrict -6 default kod nomodify notrap nopeer noquery # 允许本地主机访问
restrict 127.0.0.1
restrict -6 ::1 # NTP服务器
server 0.cn.pool.ntp.org iburst
server 1.cn.pool.ntp.org iburst
server 2.cn.pool.ntp.org iburst
server 3.cn.pool.ntp.org iburst # 使用本地时钟作为备用时间源
server 127.127.1.0
fudge 127.127.1.0 stratum 10 # 漂移文件记录时钟频率偏差
driftfile /var/lib/ntp/ntp.drift # 日志文件
logfile /var/log/ntp.log # 统计信息目录
statsdir /var/log/ntpstats/
statistics loopstats peerstats clockstats
filegen loopstats file loopstats type day enable
filegen peerstats file peerstats type day enable
filegen clockstats file clockstats type day enable`
const faultsConfigContentExample = `{"SEYOND_CM_FAULT_CPU_OVERHEAT": {"enable": true, // 开启、关闭该Fault的检测，默认开启"set_threshold": 110, // 设置故障的阈值"set_interval": 2, // 设置故障，超过阈值的持续周期"heal_threshold": 100, // 清除故障的阈值"heal_interval": 2, // 清除故障，小于阈值的持续周期"interval": 15 // 判断周期，单位：秒},"SEYOND_CM_FAULT_CPU_OVERLOAD1": {"enable": true,"set_threshold": 85,"set_interval": 2,"heal_threshold": 80,"heal_interval": 2,"interval": 15},"SEYOND_CM_FAULT_PHY_DOWN": {"enable": true,"set_interval": 2,"heal_interval": 2,"interval": 3},"SEYOND_CM_FAULT_PHY_PACKET_LOSS": {"enable": true,"set_threshold": 3,"set_interval": 2,"heal_threshold": 3,"heal_interval": 1,"interval": 5}
}`const configContents = {"cm_internal_file_base": baseConfigContentExample,"cm_internal_file_NTP": NTPConfigContentExample,"cm_internal_file_gPTP": gPTPConfigContentExample,"cm_internal_file_faults": faultsConfigContentExample};let currentConfigName = null;let inEditMode = false;const editConfigBtn = document.getElementById("editConfigBtn");const saveConfigBtn = document.getElementById("saveConfigBtn");const cancelEditBtn = document.getElementById("cancelEditBtn");function showConfigContent(configName) {// 移除所有配置文件项的选中状态document.querySelectorAll(".config-item").forEach(el => {el.classList.remove("bg-blue-100");});if (inEditMode) {// 退出编辑模式exitEdit();}editConfigBtn.disabled = false;// 为当前点击项添加选中状态document.querySelector(`.config-item[data-config="${configName}"]`).classList.add("bg-blue-100");// 获取配置文件内容currentConfigName = configName;const configContent = document.getElementById("configContent");configContent.innerHTML = `<pre id="configContentpre" class="text-gray-700 whitespace-pre-wrap">${configContents[configName]}</pre>`;}function editConfig() {inEditMode = true;const configContent = document.getElementById("configContent");configContent.innerHTML = `<textarea id="configEditTextarea" class="w-full h-[calc(100%-8px)] min-h-[24rem] bg-white border border-gray-200 p-4 rounded-md text-gray-800 font-mono text-sm leading-relaxed shadow-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out placeholder-gray-400 overflow-y-auto"></textarea>`;const configEditTextarea = document.getElementById("configEditTextarea")configEditTextarea.textContent = configContents[currentConfigName];editConfigBtn.classList.add("hidden");saveConfigBtn.classList.remove("hidden");cancelEditBtn.classList.remove("hidden");}function saveConfig() {const configEditTextarea = document.getElementById("configEditTextarea");configContents[currentConfigName] = configEditTextarea.value;exitEdit();}function exitEdit() {const configContent = document.getElementById("configContent");configContent.innerHTML = `<pre id="configContentpre" class="text-gray-700 whitespace-pre-wrap">${configContents[currentConfigName]}</pre>`;editConfigBtn.classList.remove("hidden");saveConfigBtn.classList.add("hidden");cancelEditBtn.classList.add("hidden");inEditMode = false;}function init() {// 初始化配置文件项点击事件document.querySelectorAll(".config-item").forEach(item => {item.addEventListener("click", () => showConfigContent(item.getAttribute("data-config")));});// 初始化编辑按钮editConfigBtn.addEventListener("click", editConfig);editConfigBtn.disabled = true;// 初始化保存按钮saveConfigBtn.addEventListener("click", saveConfig);// 初始化取消按钮cancelEditBtn.addEventListener("click", exitEdit);}return { init };})();// =====================
// 网络配置模块
// =====================
const NetworkModule = (() => {function handleDhcpToggle() {const staticForm = document.getElementById("static-ip-form");const dhcpInfo = document.getElementById("dhcp-info");if (this.checked) {staticForm.classList.add("hidden");dhcpInfo.classList.remove("hidden");} else {staticForm.classList.remove("hidden");dhcpInfo.classList.add("hidden");}}function handleNetworkCardSelection() {// 移除所有按钮的选中状态document.querySelectorAll(".bg-white.p-2.rounded-lg button").forEach(btn => {btn.classList.remove("bg-indigo-100", "text-indigo-700", "border-indigo-200");btn.classList.add("bg-white", "text-gray-700", "border-gray-200");});// 设置当前按钮为选中状态this.classList.remove("bg-white", "text-gray-700", "border-gray-200");this.classList.add("bg-indigo-100", "text-indigo-700", "border-indigo-200");// 更新当前显示文本document.querySelector(".text-xs.text-gray-500").textContent = "当前显示：" + this.textContent.trim();}function init() {// DHCP切换const dhcpToggle = document.getElementById("dhcp-toggle");if (dhcpToggle) {dhcpToggle.addEventListener("change", handleDhcpToggle);}// 网卡选择document.querySelectorAll(".bg-white.p-2.rounded-lg button").forEach(button => {button.addEventListener("click", handleNetworkCardSelection);});// UDP配置面板const toggleUdpSettingsBtn = document.getElementById("toggleUdpSettings");if (toggleUdpSettingsBtn) {toggleUdpSettingsBtn.addEventListener("click", toggleUdpSettings);}}return { init };
})();// =====================
// 安全设置模块
// =====================
const SecurityModule = (() => {function updatePasswordStrength(e) {const password = e.target.value;const strength = document.getElementById("passwordStrength");if (password.length === 0) {strength.style.width = "0%";strength.className = "bg-gray-400 h-1.5 rounded-full";} else if (password.length < 6) {strength.style.width = "33%";strength.className = "bg-red-500 h-1.5 rounded-full";} else if (password.length < 10) {strength.style.width = "66%";strength.className = "bg-yellow-500 h-1.5 rounded-full";} else {strength.style.width = "100%";strength.className = "bg-green-500 h-1.5 rounded-full";}}function init() {const newPasswordInput = document.getElementById("newPassword");if (newPasswordInput) {newPasswordInput.addEventListener("input", updatePasswordStrength);}}return { init };
})();// =====================
// 诊断模块
// =====================
const DiagnosticModule = (() => {const elements = {startDiagnostic: document.getElementById("startDiagnostic"),diagnosticProgress: document.getElementById("diagnosticProgress"),diagnosticResults: document.getElementById("diagnosticResults"),startDiagnosticContainer: document.getElementById("startDiagnosticContainer"),cancelDiagnostic: document.getElementById("cancelDiagnostic")};function startDiagnostic() {// 隐藏开始诊断按钮elements.startDiagnosticContainer.classList.add("hidden");// 显示诊断进度elements.diagnosticProgress.classList.remove("hidden");// 模拟诊断完成，5秒后显示结果setTimeout(function () {elements.diagnosticProgress.classList.add("hidden");elements.diagnosticResults.classList.remove("hidden");}, 5000);}function cancelDiagnostic() {elements.diagnosticProgress.classList.add("hidden");elements.startDiagnosticContainer.classList.remove("hidden");}function init() {if (elements.startDiagnostic) {elements.startDiagnostic.addEventListener("click", startDiagnostic);}if (elements.cancelDiagnostic) {elements.cancelDiagnostic.addEventListener("click", cancelDiagnostic);}}return { init };
})();// =====================
// 主应用入口
// =====================
function initApplication() {// 初始化所有模块AuthModule.init();TabModule.init();FirmwareModule.init();LogModule.init();ConfigModule.init();NetworkModule.init();SecurityModule.init();DiagnosticModule.init();// 页面加载完成后初始化图表ChartModule.init();
}// 文档加载完成后初始化应用
document.addEventListener("DOMContentLoaded", initApplication);
