193 lines
13 KiB
HTML
193 lines
13 KiB
HTML
<h2>报告预览页</h2>
|
|
<p class="subtitle">从列表点击报告名称或"预览"按钮进入。右上角按钮根据状态动态切换。</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">预览页 — 状态：数据已就绪（待生成文档）</div>
|
|
<div class="mockup-body">
|
|
|
|
<!-- Header -->
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #e2e8f0;margin-bottom:20px">
|
|
<div style="display:flex;align-items:center;gap:16px">
|
|
<span style="color:#94a3b8;font-size:18px;cursor:pointer">←</span>
|
|
<div>
|
|
<h2 style="font-size:22px;font-weight:700;color:#0f172a;margin:0">月报</h2>
|
|
<span style="font-size:13px;color:#64748b">2026-04-01 ~ 2026-04-30</span>
|
|
</div>
|
|
<span style="display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:500;background:#fef3c7;color:#92400e">
|
|
<span style="width:6px;height:6px;border-radius:50%;background:#f59e0b"></span>
|
|
数据已就绪
|
|
</span>
|
|
</div>
|
|
<button class="mock-button" style="background:#059669;color:#fff">生成报告文档</button>
|
|
</div>
|
|
|
|
<!-- KPI Row -->
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px">
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px">工单总数</div>
|
|
<div style="font-size:28px;font-weight:700;color:#0f172a">12</div>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px">已解决</div>
|
|
<div style="font-size:28px;font-weight:700;color:#059669">10</div>
|
|
<div style="font-size:11px;color:#94a3b8">83.3%</div>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px">整体可用性</div>
|
|
<div style="font-size:28px;font-weight:700;color:#f59e0b">98.52%</div>
|
|
<div style="font-size:11px;color:#94a3b8">低于99%</div>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px">平均处理时长</div>
|
|
<div style="font-size:28px;font-weight:700;color:#0f172a">240</div>
|
|
<div style="font-size:11px;color:#94a3b8">分钟</div>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
|
|
<div style="font-size:12px;color:#64748b;margin-bottom:4px">进行中</div>
|
|
<div style="font-size:28px;font-weight:700;color:#0369a1">2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ch1 -->
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-bottom:12px">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
|
|
<div style="display:flex;align-items:center;gap:10px">
|
|
<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:6px;font-size:12px;font-weight:700">1</span>
|
|
<span style="font-size:15px;font-weight:600;color:#1e293b">设备概况</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:32px;padding:16px 20px">
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<div style="width:44px;height:44px;border-radius:10px;background:#dbeafe;display:flex;align-items:center;justify-content:center;font-size:20px">🖥</div>
|
|
<div><span style="font-size:24px;font-weight:700;color:#0f172a">8</span><span style="font-size:13px;color:#64748b;margin-left:4px">台 GPU 服务器</span></div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<div style="width:44px;height:44px;border-radius:10px;background:#fef3c7;display:flex;align-items:center;justify-content:center;font-size:20px">🗄</div>
|
|
<div><span style="font-size:24px;font-weight:700;color:#0f172a">3</span><span style="font-size:13px;color:#64748b;margin-left:4px">台 存储服务器</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ch2 -->
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-bottom:12px">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
|
|
<div style="display:flex;align-items:center;gap:10px">
|
|
<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#8b5cf6;color:#fff;border-radius:6px;font-size:12px;font-weight:700">2</span>
|
|
<span style="font-size:15px;font-weight:600;color:#1e293b">运营数据</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:24px;padding:16px 20px">
|
|
<div style="font-size:13px;color:#64748b">故障工单 <span style="font-weight:700;color:#d97706;font-size:16px;margin-left:4px">8</span> 件</div>
|
|
<div style="font-size:13px;color:#64748b">涉及设备 <span style="font-weight:700;color:#0f172a;font-size:16px;margin-left:4px">5</span> 台</div>
|
|
<div style="font-size:13px;color:#64748b">无故障天数 <span style="font-weight:700;color:#059669;font-size:16px;margin-left:4px">24</span> 天</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ch3 -->
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;margin-bottom:12px">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
|
|
<div style="display:flex;align-items:center;gap:10px">
|
|
<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#f59e0b;color:#fff;border-radius:6px;font-size:12px;font-weight:700">3</span>
|
|
<span style="font-size:15px;font-weight:600;color:#1e293b">故障分类</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:16px;padding:16px 20px">
|
|
<div style="flex:1;padding:12px;border-radius:8px;background:#fff7ed;text-align:center">
|
|
<div style="font-size:20px;font-weight:700;color:#f59e0b">5</div>
|
|
<div style="font-size:12px;color:#64748b">GPU 故障</div>
|
|
<div style="width:100%;height:4px;background:#fef3c7;border-radius:2px;margin-top:6px"><div style="width:62.5%;height:100%;background:#f59e0b;border-radius:2px"></div></div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-top:2px">62.5%</div>
|
|
</div>
|
|
<div style="flex:1;padding:12px;border-radius:8px;background:#fff7ed;text-align:center">
|
|
<div style="font-size:20px;font-weight:700;color:#f59e0b">1</div>
|
|
<div style="font-size:12px;color:#64748b">存储故障</div>
|
|
<div style="width:100%;height:4px;background:#fef3c7;border-radius:2px;margin-top:6px"><div style="width:12.5%;height:100%;background:#f59e0b;border-radius:2px"></div></div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-top:2px">12.5%</div>
|
|
</div>
|
|
<div style="flex:1;padding:12px;border-radius:8px;background:#eff6ff;text-align:center">
|
|
<div style="font-size:20px;font-weight:700;color:#3b82f6">2</div>
|
|
<div style="font-size:12px;color:#64748b">其他工单</div>
|
|
<div style="width:100%;height:4px;background:#dbeafe;border-radius:2px;margin-top:6px"><div style="width:25%;height:100%;background:#3b82f6;border-radius:2px"></div></div>
|
|
<div style="font-size:11px;color:#94a3b8;margin-top:2px">25.0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ch4 -->
|
|
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
|
|
<div style="display:flex;align-items:center;gap:10px">
|
|
<span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#10b981;color:#fff;border-radius:6px;font-size:12px;font-weight:700">4</span>
|
|
<span style="font-size:15px;font-weight:600;color:#1e293b">服务可用性</span>
|
|
</div>
|
|
</div>
|
|
<div style="padding:16px 20px">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
|
|
<span style="font-size:13px;color:#64748b">整体可用性：</span>
|
|
<span style="font-size:22px;font-weight:700;color:#f59e0b">98.52%</span>
|
|
</div>
|
|
<table style="width:100%;font-size:13px;border-collapse:collapse">
|
|
<thead>
|
|
<tr style="border-bottom:2px solid #e2e8f0;text-align:left">
|
|
<th style="padding:8px 12px;color:#64748b;font-weight:500">IP 地址</th>
|
|
<th style="padding:8px 12px;color:#64748b;font-weight:500">设备类型</th>
|
|
<th style="padding:8px 12px;color:#64748b;font-weight:500">故障时长</th>
|
|
<th style="padding:8px 12px;color:#64748b;font-weight:500">可用性</th>
|
|
<th style="padding:8px 12px;color:#64748b;font-weight:500">状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom:1px solid #f1f5f9">
|
|
<td style="padding:8px 12px;font-weight:500;color:#0f172a">10.0.0.35</td>
|
|
<td style="padding:8px 12px;color:#64748b">GPU</td>
|
|
<td style="padding:8px 12px;color:#dc2626;font-weight:500">2,160 分钟</td>
|
|
<td style="padding:8px 12px;font-weight:700;color:#dc2626">95.12%</td>
|
|
<td style="padding:8px 12px"><span style="display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:#fef2f2;color:#dc2626">进行中</span></td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid #f1f5f9">
|
|
<td style="padding:8px 12px;font-weight:500;color:#0f172a">10.0.0.42</td>
|
|
<td style="padding:8px 12px;color:#64748b">GPU</td>
|
|
<td style="padding:8px 12px;color:#0f172a">1,440 分钟</td>
|
|
<td style="padding:8px 12px;font-weight:700;color:#f59e0b">96.78%</td>
|
|
<td style="padding:8px 12px"><span style="display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:#dcfce7;color:#15803d">已恢复</span></td>
|
|
</tr>
|
|
<tr style="border-bottom:1px solid #f1f5f9">
|
|
<td style="padding:8px 12px;font-weight:500;color:#0f172a">10.0.0.18</td>
|
|
<td style="padding:8px 12px;color:#64748b">存储</td>
|
|
<td style="padding:8px 12px;color:#0f172a">720 分钟</td>
|
|
<td style="padding:8px 12px;font-weight:700;color:#f59e0b">98.41%</td>
|
|
<td style="padding:8px 12px"><span style="display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:#dcfce7;color:#15803d">已恢复</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="font-size:11px;color:#94a3b8;margin-top:8px">共 3 个 IP 可用性低于 100%，其余设备保持 100% 在线</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 不同状态下的按钮变化 -->
|
|
<div class="section">
|
|
<h3>右上角按钮 — 按状态切换</h3>
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px">
|
|
<div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:12px;text-align:center">
|
|
<div style="font-size:11px;color:#a16207;margin-bottom:6px">数据已就绪</div>
|
|
<span style="display:inline-block;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;background:#059669;color:#fff">生成报告文档</span>
|
|
</div>
|
|
<div style="background:#dbeafe;border:1px solid #bfdbfe;border-radius:8px;padding:12px;text-align:center">
|
|
<div style="font-size:11px;color:#1e40af;margin-bottom:6px">文档生成中</div>
|
|
<span style="display:inline-block;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;background:#94a3b8;color:#fff">生成中...</span>
|
|
</div>
|
|
<div style="background:#dcfce7;border:1px solid #bbf7d0;border-radius:8px;padding:12px;text-align:center">
|
|
<div style="font-size:11px;color:#15803d;margin-bottom:6px">已完成</div>
|
|
<span style="display:inline-block;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;background:#2563eb;color:#fff">⬇ 下载报告</span>
|
|
</div>
|
|
<div style="background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px;text-align:center">
|
|
<div style="font-size:11px;color:#b91c1c;margin-bottom:6px">生成失败</div>
|
|
<span style="display:inline-block;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;background:#f59e0b;color:#fff">重新生成</span>
|
|
</div>
|
|
</div>
|