201 lines
13 KiB
HTML
201 lines
13 KiB
HTML
<h2>报告预览页 — 最终方案</h2>
|
||
<p class="subtitle">5 KPI + 4 章节全部展开。第 4 章列出所有可用性 < 100% 的 IP。</p>
|
||
|
||
<div class="mockup">
|
||
<div class="mockup-header">完整页面布局 — 月报示例（2026年4月）</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">←</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="background:#dcfce7;color:#15803d;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600">已完成</span>
|
||
</div>
|
||
<button class="mock-button">⬇ 下载报告</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>
|
||
|
||
<!-- Chapter Sections — all expanded -->
|
||
<div style="display:flex;flex-direction:column;gap:12px">
|
||
|
||
<!-- Ch1: 设备概况 -->
|
||
<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:#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>
|
||
<span style="font-size:20px;color:#94a3b8">▾</span>
|
||
</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">
|
||
<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>
|
||
<span style="font-size:20px;color:#94a3b8">▾</span>
|
||
</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">
|
||
<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>
|
||
<span style="font-size:20px;color:#94a3b8">▾</span>
|
||
</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: 服务可用性 — 列出所有可用性 <100% 的 IP -->
|
||
<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>
|
||
<span style="font-size:20px;color:#94a3b8">▾</span>
|
||
</div>
|
||
<div style="padding:16px 20px">
|
||
<!-- Overall availability banner -->
|
||
<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>
|
||
<!-- IP table -->
|
||
<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>
|
||
|
||
<div class="section">
|
||
<h3>方案确认清单</h3>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px">
|
||
<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:14px">
|
||
<h4 style="margin:0 0 6px;font-size:14px;color:#15803d">✓ 已定</h4>
|
||
<ul style="margin:0;padding-left:18px;font-size:13px;color:#166534;line-height:1.8">
|
||
<li>5 KPI 卡片（工单总数 / 已解决 / 整体可用性 / 平均处理时长 / 进行中）</li>
|
||
<li>4 章节全部默认展开</li>
|
||
<li>Ch4 列出所有可用性 <100% 的 IP + 明细表</li>
|
||
<li>故障分类带占比进度条</li>
|
||
<li>周报/月报自适应章节内容</li>
|
||
</ul>
|
||
</div>
|
||
<div style="background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:14px">
|
||
<h4 style="margin:0 0 6px;font-size:14px;color:#c2410c">? 待确认</h4>
|
||
<ul style="margin:0;padding-left:18px;font-size:13px;color:#7c2d12;line-height:1.8">
|
||
<li>Ch3 展开后是否需要按 fault_subcategory 二级明细？</li>
|
||
<li>Ch2 展开后是否需要按日故障统计简表？</li>
|
||
<li>后端 metadata 需扩展 5-6 个新字段</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|