54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<h2>报告预览页 — 设计方向</h2>
|
||
<p class="subtitle">当前页面只展示 4 个数字卡片 + 3 个故障分类卡片。以下三个方向兼顾数据丰富度与视觉提升，各有侧重。</p>
|
||
|
||
<div class="options" data-multiselect>
|
||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||
<div class="letter">A</div>
|
||
<div class="content">
|
||
<h3>仪表盘风格</h3>
|
||
<p>将预览页做成迷你仪表盘：顶部 KPI 卡片带环比/同比趋势箭头，中间用横向条状图展示故障分类，底部展示服务可用性分布。数据量大但不杂乱，适合快速扫读。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||
<div class="letter">B</div>
|
||
<div class="content">
|
||
<h3>摘要 + 详情分区</h3>
|
||
<p>顶部为摘要区（设备规模 + 核心指标如可用性/SLA/解决率），下方可展开的折叠面板展示故障明细（按分类、按设备、按日期）。信息层级清晰，用户按需深入。</p>
|
||
</div>
|
||
</div>
|
||
<div class="option" data-choice="c" onclick="toggleSelect(this)">
|
||
<div class="letter">C</div>
|
||
<div class="content">
|
||
<h3>单页报告预览</h3>
|
||
<p>接近真实报告的排版风格：带章节标题（一、设备概况 二、运营数据 三、故障分类 四、服务可用性），每个章节内嵌简表或数据卡片。预览即缩略版报告，视觉专业正式。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h3>共同增强的数据指标</h3>
|
||
<p>无论选哪个方向，以下字段都会从 metadata 中新增暴露：</p>
|
||
</div>
|
||
|
||
<div class="pros-cons">
|
||
<div class="pros">
|
||
<h4>新增指标</h4>
|
||
<ul>
|
||
<li>解决率（已解决 / 故障总数）</li>
|
||
<li>SLA 达标率</li>
|
||
<li>平均处理时长</li>
|
||
<li>故障分类分布（带具体数量）</li>
|
||
<li>进行中工单数</li>
|
||
<li>月报独有：设备级最低可用性 IP</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cons">
|
||
<h4>改动范围</h4>
|
||
<ul>
|
||
<li>前后端都需改：metadata 字段扩展 + 预览页 UI 重写</li>
|
||
<li>旧报告不含新字段，需兼容降级展示</li>
|
||
<li>周报/月报数据结构不同，需分别处理</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|