Duguay/ALL-teach_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化导航页面，增强Windows用户体验

Browse Source 
- 添加Windows用户快速启动指南
- 增加控制面板和快速操作按钮
- 优化中文字体显示（使用微软雅黑）
- 添加平台检测和项目路径显示
- 增加产业图标和更友好的界面
- 提供详细的Windows启动方法说明
This commit is contained in:
KQL
2025-09-24 14:53:09 +08:00
parent acea5e4b56
commit 0780353493
1 changed files with 379 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

653
index.html
View File

@@ -12,7 +12,7 @@
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@@ -24,7 +24,7 @@
.header { .header {
text-align: center; text-align: center;
color: white; color: white;
margin-bottom: 40px; margin-bottom: 30px;
animation: fadeInDown 0.8s ease; animation: fadeInDown 0.8s ease;
} }
@@ -37,6 +37,96 @@
.header p { .header p {
font-size: 1.1rem; font-size: 1.1rem;
opacity: 0.95; opacity: 0.95;
margin-bottom: 20px;
}
.control-panel {
background: white;
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
animation: fadeIn 0.8s ease;
}
.control-panel h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.3rem;
}
.control-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.control-btn {
padding: 12px 25px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
color: white;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-start-all {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.btn-start-all:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.btn-stop-all {
background: linear-gradient(135deg, #f093fb, #f5576c);
}
.btn-stop-all:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
}
.btn-refresh {
background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.btn-refresh:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(79, 172, 254, 0.4);
}
.btn-launcher {
background: linear-gradient(135deg, #fa709a, #fee140);
}
.btn-launcher:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(250, 112, 154, 0.4);
}
.platform-info {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 15px;
margin-top: 20px;
color: white;
text-align: center;
}
.platform-info code {
background: rgba(0, 0, 0, 0.2);
padding: 2px 8px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', monospace;
} }
.container { .container {
@@ -48,16 +138,16 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px; gap: 25px;
margin-bottom: 30px;
animation: fadeInUp 0.8s ease; animation: fadeInUp 0.8s ease;
} }
.industry-card { .industry-card {
background: white; background: white;
border-radius: 12px; border-radius: 15px;
padding: 25px; padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -67,170 +157,176 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; right: 0;
height: 4px; height: 5px;
background: linear-gradient(90deg, #667eea, #764ba2); background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transition: transform 0.3s ease;
} }
.industry-card:hover { .industry-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15); box-shadow: 0 15px 50px rgba(0,0,0,0.15);
} }
.industry-card:hover::before { .industry-header {
transform: scaleX(1);
}
.card-header {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
} }
.industry-icon { .industry-name {
width: 50px; font-size: 1.2rem;
height: 50px; font-weight: 600;
border-radius: 10px; color: #333;
}
.industry-number {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.5rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.industry-name {
font-size: 1.3rem;
font-weight: 600;
color: #333;
flex: 1;
margin-left: 15px;
}
.status-indicator {
display: flex;
align-items: center;
gap: 5px;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.status-dot.online {
background: #10b981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.status-dot.offline {
background: #ef4444;
animation: none;
}
.status-dot.checking {
background: #f59e0b;
animation: pulse 1s infinite;
}
.status-text {
font-size: 0.9rem; font-size: 0.9rem;
color: #666; font-weight: bold;
} }
@keyframes pulse { .industry-info {
0%, 100% { opacity: 1; } margin-bottom: 20px;
50% { opacity: 0.5; }
}
.card-info {
display: flex;
flex-direction: column;
gap: 10px;
} }
.info-item { .info-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; margin-bottom: 8px;
color: #666; color: #666;
font-size: 0.95rem; font-size: 0.95rem;
} }
.info-label { .info-label {
font-weight: 500; font-weight: 500;
min-width: 60px; margin-right: 8px;
color: #999;
} }
.info-value { .status {
color: #333; display: inline-flex;
font-family: 'Courier New', monospace; align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
} }
.card-footer { .status-running {
margin-top: 20px; background: #d4f4dd;
padding-top: 15px; color: #2e7d46;
border-top: 1px solid #e5e7eb;
} }
.launch-btn { .status-stopped {
width: 100%; background: #ffeaa7;
color: #d63031;
}
.status-checking {
background: #e3f2fd;
color: #1976d2;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.status-running .status-dot {
background: #2e7d46;
}
.status-stopped .status-dot {
background: #d63031;
animation: none;
}
.industry-actions {
display: flex;
gap: 10px;
}
.btn {
flex: 1;
padding: 10px; padding: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 0.95rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.launch-btn:hover { .btn-primary {
transform: scale(1.02); background: linear-gradient(135deg, #667eea, #764ba2);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.launch-btn:disabled {
background: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
transform: scale(1);
}
.controls {
display: flex;
gap: 15px;
margin-bottom: 30px;
animation: fadeInUp 0.8s ease;
}
.control-btn {
padding: 12px 24px;
background: white;
color: #667eea;
border: 2px solid white;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.control-btn:hover {
background: transparent;
color: white; color: white;
} }
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: #f5f5f5;
color: #666;
}
.btn-secondary:hover {
background: #e0e0e0;
}
.footer {
text-align: center;
color: white;
margin-top: 40px;
padding: 20px;
opacity: 0.9;
}
.instruction-box {
background: rgba(255, 255, 255, 0.95);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.instruction-box h3 {
color: #333;
margin-bottom: 15px;
font-size: 1.1rem;
}
.instruction-box ol {
margin-left: 20px;
color: #666;
line-height: 1.8;
}
.instruction-box code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
color: #d63031;
font-family: Consolas, Monaco, monospace;
}
@keyframes fadeInDown { @keyframes fadeInDown {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-20px); transform: translateY(-30px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -241,7 +337,7 @@
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(30px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -249,224 +345,233 @@
} }
} }
.toast { @keyframes fadeIn {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 20px;
background: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
display: none;
animation: slideIn 0.3s ease;
}
.toast.show {
display: block;
}
@keyframes slideIn {
from { from {
transform: translateX(100%); opacity: 0;
} }
to { to {
transform: translateX(0); opacity: 1;
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(46, 125, 70, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(46, 125, 70, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(46, 125, 70, 0);
} }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h1>🎓 教务系统产业导航</h1> <h1>🎓 教务系统产业管理中心</h1>
<p>选择您要访问的产业系统</p> <p>智能化多产业教务管理平台 - 支持12个产业独立运行</p>
</div> </div>
<div class="container"> <div class="container">
<div class="controls"> <!-- Windows用户使用说明 -->
<button class="control-btn" onclick="checkAllStatus()">🔄 刷新状态</button> <div class="instruction-box">
<button class="control-btn" onclick="launchAll()">🚀 启动全部</button> <h3>💡 Windows 用户快速启动指南</h3>
<button class="control-btn" onclick="openTerminal()">💻 打开终端</button> <ol>
<li><strong>方法一：</strong>双击运行 <code>start-industry.bat</code> 文件</li>
<li><strong>方法二：</strong>打开命令提示符（CMD），输入 <code>start-industry.bat</code></li>
<li><strong>方法三：</strong>使用 PowerShell 运行 <code>.\start-industry.ps1</code></li>
<li><strong>方法四：</strong>直接在本页面点击下方的控制按钮</li>
</ol>
</div> </div>
<div class="industry-grid" id="industryGrid"> <!-- 控制面板 -->
<!-- 产业卡片将通过JavaScript动态生成 --> <div class="control-panel">
<h2>🎛️ 快速控制中心</h2>
<div class="control-buttons">
<button class="control-btn btn-start-all" onclick="startAllIndustries()">
▶️ 启动所有产业
</button>
<button class="control-btn btn-stop-all" onclick="stopAllIndustries()">
⏹️ 停止所有产业
</button>
<button class="control-btn btn-refresh" onclick="checkAllStatus()">
🔄 刷新状态
</button>
<a href="#" class="control-btn btn-launcher" onclick="openLauncher()">
🚀 打开启动器 (Windows)
</a>
</div>
<div class="platform-info">
<p>💻 当前系统: <span id="platformInfo"></span></p>
<p>📁 项目路径: <code id="projectPath"></code></p>
</div>
</div>
<!-- 产业卡片网格 -->
<div class="industry-grid" id="industryGrid"></div>
<!-- 页脚 -->
<div class="footer">
<p>⏰ 状态每10秒自动刷新 | 📖 <a href="README.md" style="color: white;">查看文档</a></p>
<p style="margin-top: 10px; opacity: 0.8;">© 2024 教务系统 - 智能产业管理平台</p>
</div> </div>
</div> </div>
<div class="toast" id="toast"></div>
<script> <script>
// 产业配置 // 产业配置
const industries = [ const industries = [
{ name: '文旅产业', dir: 'frontend', port: 5150, icon: '🏛️' }, { id: 1, name: '文旅产业', dir: 'frontend', port: 5150, icon: '🏛️' },
{ name: '智能制造', dir: 'frontend_智能制造', port: 5151, icon: '🏭' }, { id: 2, name: '智能制造', dir: 'frontend_智能制造', port: 5151, icon: '🏭' },
{ name: '智能开发', dir: 'frontend_智能开发', port: 5152, icon: '💻' }, { id: 3, name: '智能开发', dir: 'frontend_智能开发', port: 5152, icon: '💻' },
{ name: '财经商贸', dir: 'frontend_财经商贸', port: 5153, icon: '💰' }, { id: 4, name: '财经商贸', dir: 'frontend_财经商贸', port: 5153, icon: '💰' },
{ name: '视觉设计', dir: 'frontend_视觉设计', port: 5154, icon: '🎨' }, { id: 5, name: '视觉设计', dir: 'frontend_视觉设计', port: 5154, icon: '🎨' },
{ name: '交通物流', dir: 'frontend_交通物流', port: 5155, icon: '🚚' }, { id: 6, name: '交通物流', dir: 'frontend_交通物流', port: 5155, icon: '🚚' },
{ name: '大健康', dir: 'frontend_大健康', port: 5156, icon: '🏥' }, { id: 7, name: '大健康', dir: 'frontend_大健康', port: 5156, icon: '🏥' },
{ name: '土木水利', dir: 'frontend_土木水利', port: 5157, icon: '🏗️' }, { id: 8, name: '土木水利', dir: 'frontend_土木水利', port: 5157, icon: '🏗️' },
{ name: '食品产业', dir: 'frontend_食品', port: 5158, icon: '🍽️' }, { id: 9, name: '食品产业', dir: 'frontend_食品', port: 5158, icon: '🍽️' },
{ name: '化工产业', dir: 'frontend_化工', port: 5159, icon: '⚗️' }, { id: 10, name: '化工产业', dir: 'frontend_化工', port: 5159, icon: '⚗️' },
{ name: '能源产业', dir: 'frontend_能源', port: 5160, icon: '⚡' }, { id: 11, name: '能源产业', dir: 'frontend_能源', port: 5160, icon: '⚡' },
{ name: '环保产业', dir: 'frontend_环保', port: 5161, icon: '🌱' } { id: 12, name: '环保产业', dir: 'frontend_环保', port: 5161, icon: '🌱' }
]; ];
// 初始化页面 // 检测平台信息
function initPage() { function detectPlatform() {
renderIndustryCards(); const platform = navigator.platform;
checkAllStatus(); const userAgent = navigator.userAgent;
// 每10秒自动检查状态 let osInfo = '未知系统';
setInterval(checkAllStatus, 10000);
if (platform.indexOf('Win') !== -1) {
osInfo = 'Windows';
} else if (platform.indexOf('Mac') !== -1) {
osInfo = 'macOS';
} else if (platform.indexOf('Linux') !== -1) {
osInfo = 'Linux';
}
document.getElementById('platformInfo').textContent = osInfo;
document.getElementById('projectPath').textContent = window.location.pathname.replace('/index.html', '');
} }
// 渲染产业卡片 // 创建产业卡片
function renderIndustryCards() { function createIndustryCard(industry) {
const grid = document.getElementById('industryGrid'); return `
grid.innerHTML = ''; <div class="industry-card">
<div class="industry-header">
industries.forEach((industry, index) => { <span class="industry-name">${industry.icon} ${industry.name}</span>
const card = document.createElement('div'); <span class="industry-number">${industry.id}</span>
card.className = 'industry-card';
card.innerHTML = `
<div class="card-header">
<div class="industry-icon">${industry.icon}</div>
<div class="industry-name">${industry.name}</div>
<div class="status-indicator">
<span class="status-dot checking" id="status-${industry.port}"></span>
<span class="status-text" id="text-${industry.port}">检测中</span>
</div>
</div> </div>
<div class="card-info"> <div class="industry-info">
<div class="info-item"> <div class="info-item">
<span class="info-label">端口：</span> <span class="info-label">端口:</span>
<span class="info-value">${industry.port}</span> <span>${industry.port}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">目录：</span> <span class="info-label">目录:</span>
<span class="info-value">${industry.dir}</span> <span>${industry.dir}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label">地址：</span> <span class="info-label">状态:</span>
<span class="info-value"> <span class="status status-checking" id="status-${industry.port}">
<a href="http://localhost:${industry.port}" <span class="status-dot"></span>
target="_blank" 检查中...
id="link-${industry.port}"
style="color: #667eea; text-decoration: none;">
http://localhost:${industry.port}
</a>
</span> </span>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="industry-actions">
<button class="launch-btn" <button class="btn btn-primary" onclick="openIndustry(${industry.port})">
id="btn-${industry.port}"
onclick="launchIndustry(${index})">
访问系统 访问系统
</button> </button>
<button class="btn btn-secondary" onclick="toggleIndustry(${industry.id})">
启动/停止
</button>
</div> </div>
`; </div>
grid.appendChild(card); `;
});
} }
// 检查所有产业状态 // 初始化页面
async function checkAllStatus() { function initPage() {
industries.forEach(industry => { detectPlatform();
checkPortStatus(industry.port); const grid = document.getElementById('industryGrid');
}); grid.innerHTML = industries.map(industry => createIndustryCard(industry)).join('');
checkAllStatus();
} }
// 检查单个端口状态 // 检查单个产业状态
async function checkPortStatus(port) { async function checkStatus(port) {
const statusDot = document.getElementById(`status-${port}`); const statusEl = document.getElementById(`status-${port}`);
const statusText = document.getElementById(`text-${port}`);
const btn = document.getElementById(`btn-${port}`);
const link = document.getElementById(`link-${port}`);
statusDot.className = 'status-dot checking';
statusText.textContent = '检测中';
try { try {
// 尝试访问端口 // 尝试访问端口
const response = await fetch(`http://localhost:${port}`, { const response = await fetch(`http://localhost:${port}`, {
method: 'HEAD',
mode: 'no-cors', mode: 'no-cors',
cache: 'no-cache' cache: 'no-cache'
}); });
// 如果能访问，认为是运行中 // 使用图片加载来检测
statusDot.className = 'status-dot online'; const img = new Image();
statusText.textContent = '运行中'; img.src = `http://localhost:${port}/favicon.ico?t=${Date.now()}`;
statusText.style.color = '#10b981';
btn.textContent = '访问系统'; await new Promise((resolve, reject) => {
btn.disabled = false; img.onload = resolve;
btn.onclick = () => window.open(`http://localhost:${port}`, '_blank'); img.onerror = reject;
link.style.pointerEvents = 'auto'; setTimeout(reject, 2000);
link.style.color = '#667eea'; });
statusEl.className = 'status status-running';
statusEl.innerHTML = '<span class="status-dot"></span> 运行中';
} catch (error) { } catch (error) {
// 无法访问，认为是未启动 statusEl.className = 'status status-stopped';
statusDot.className = 'status-dot offline'; statusEl.innerHTML = '<span class="status-dot"></span> 已停止';
statusText.textContent = '未启动';
statusText.style.color = '#ef4444';
btn.textContent = '启动服务';
btn.disabled = false;
btn.onclick = () => startIndustry(port);
link.style.pointerEvents = 'none';
link.style.color = '#9ca3af';
} }
} }
// 启动产业服务 // 检查所有状态
function startIndustry(port) { function checkAllStatus() {
const industry = industries.find(i => i.port === port); industries.forEach(industry => {
if (industry) { checkStatus(industry.port);
showToast(`⚠️ 请在终端运行: ./start-industry.sh ${industries.indexOf(industry) + 1}`, 'warning'); });
openTerminal();
}
} }
// 启动单个产业 // 打开产业系统
function launchIndustry(index) { function openIndustry(port) {
const industry = industries[index]; window.open(`http://localhost:${port}`, '_blank');
const statusDot = document.getElementById(`status-${industry.port}`); }
if (statusDot.className.includes('online')) { // 启动/停止产业（提示用户使用启动器）
window.open(`http://localhost:${industry.port}`, '_blank'); function toggleIndustry(id) {
} else { alert(`请使用启动器控制产业 ${id}:\n\nWindows用户:\n- 运行 start-industry.bat\n- 选择选项 ${id}\n\nMac/Linux用户:\n- 运行 ./start-industry.sh\n- 选择选项 ${id}`);
showToast(`⚠️ ${industry.name}未启动，请先在终端启动服务`, 'warning');
}
} }
// 启动所有产业 // 启动所有产业
function launchAll() { function startAllIndustries() {
showToast('📋 请在终端运行: ./start-industry.sh all', 'info'); if (confirm('启动所有产业需要使用系统启动器。\n\nWindows: 运行 start-industry.bat 选择 [0]\nMac/Linux: 运行 ./start-industry.sh 选择 [0]\n\n是否打开启动器？')) {
openTerminal(); openLauncher();
}
} }
// 打开终端（提示） // 停止所有产业
function openTerminal() { function stopAllIndustries() {
showToast('💡 提示：请手动打开终端并运行启动脚本', 'info'); if (confirm('停止所有产业需要使用系统启动器。\n\nWindows: 运行 start-industry.bat 选择 [A]\nMac/Linux: 运行 ./start-industry.sh 选择 [A]\n\n是否打开启动器？')) {
// 复制命令到剪贴板 openLauncher();
navigator.clipboard.writeText('./start-industry.sh'); }
setTimeout(() => {
showToast('✅ 启动命令已复制到剪贴板', 'success');
}, 500);
} }
// 显示提示消息 // 打开启动器
function showToast(message, type = 'info') { function openLauncher() {
const toast = document.getElementById('toast'); const platform = navigator.platform;
toast.textContent = message; if (platform.indexOf('Win') !== -1) {
toast.className = `toast show ${type}`; alert('Windows 启动方法:\n\n1. 打开文件资源管理器\n2. 找到 start-industry.bat 文件\n3. 双击运行\n\n或者:\n1. 按 Win+R 打开运行对话框\n2. 输入 cmd 并回车\n3. 导航到项目目录\n4. 输入 start-industry.bat 并回车');
} else {
setTimeout(() => { alert('Mac/Linux 启动方法:\n\n1. 打开终端\n2. 导航到项目目录\n3. 运行: ./start-industry.sh\n\n如果没有执行权限:\nchmod +x start-industry.sh');
toast.className = 'toast'; }
}, 3000);
} }
// 页面加载完成后初始化 // 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initPage); document.addEventListener('DOMContentLoaded', initPage);
// 自动刷新状态（每10秒）
setInterval(checkAllStatus, 10000);
</script> </script>
</body> </body>
</html> </html>