企业官网建设流程全解析

smc.peering.tw是一款专注台湾对外海底电缆的实时状态看板，其中的海缆时间线视图能把过去 2 年的断线记录，压缩成一条条彩色时间轴：一眼看出哪条海缆断过线、断了多久、可用率有多高。本指南带你从零读懂这个时间线，学会回溯每一次断线事件。

上面是 smc.peering.tw 的主界面：深色地图上用红、蓝线条标出各条海缆的断线／正常状态，右侧面板则列出正在发生（Active）的断线事件与持续天数。

如何打开海缆时间线视图

时间线是侧边栏四个 Tab（事件／时间轴／拓扑／关于）之一：

• 桌面端：点击右侧面板顶部带「历史」图标的按钮，弹出时间线对话框（Timeline.tsx）；
• 移动端：底部 Tab 栏点「时间轴」，抽屉上滑即展示（Sidebar.tsx）。

时间线默认回看最近 365 天的窗口，起点在数据加载时动态计算（Timeline.tsx）。

💡 界面默认画一年，但底层事件库实际保留过去 2 年（730 天）的断线记录，供时间轴与事件列表共同使用——见下文「数据从哪来」。

读懂海缆时间轴：四种状态颜色一眼看懂

时间线把每条海缆画成一条横条，按状态上色（颜色定义见 index.css）：

同一时间区间若出现多种状态，按「最严重」显示，优先级为disconnected > partial_disconnected > notice > online（TimelineContent.tsx）。

海缆可用率是怎么算出来的？

每条海缆右上角都有一个百分比，即可用率（Uptime），算法在 computeUptimePercent：

可用率 = 时间窗口内「正常」状态累计时长 ÷ 窗口总时长 × 100%

结果只保留一位小数。例如某条缆一年里断线累计 10 天，可用率约为97.3%——数字越高，代表这条对外链路越稳定。

时间线如何智能缩放：从按天到按周

横条被切成一个个小桶，桶的宽度与该时间段真实时长成正比。分桶粒度会自动切换（TimelineContent.tsx）：

• 窗口 ≤ 90 天：以「天」为最小粒度；
• 窗口 > 90 天（默认 365 天即属此类）：以「周」为最小粒度。

因此默认视图里一格大致代表一周，既能看清整年轮廓，又不会把屏幕塞满。

悬停查看每一次断线：事件详情

把鼠标停在任意一段彩色横条上，会弹出提示框，显示（TimelineContent.tsx）：

1. 当前状态（断线／部分断线…）
2. 该段起止时间
3. 关联事件的描述文字

若描述里出现CLS、ETR、Shunt等专业词，悬停还会自动展开名词解释，规则来自 incident-glossary.ts。

结合事件列表，回溯断线原因

时间轴看「什么时候断」，事件列表看「为什么断」。在 IncidentList.tsx 中，每条事件都会标注：

• 持续天数（calcDays）
• 断线原因：维护、地震、渔业拖网、台风、设备老化、人为破坏等
• 预计修复时间（ETR）与排除时间

切换顶部「发生中事件／历史事件」下拉框，即可在当前故障与过去 2 年记录间来回查看。

数据从哪来：过去 2 年记录的自动更新

断线数据并非手写，而是一条自动化管道：

1. 运营方把事件维护在 Google Spreadsheet 中；
2. 仓库通过 GitHub Actions 定时抓取，运行 convert_incidents.py；
3. 脚本只保留过去 730 天（2 年）的事件，转成静态incidents.json供页面读取（convert_incidents.py）。

时间线与事件列表共读这一份数据，保证「你看到的断线记录」与「地图上正在报障的线路」始终一致。

小结

smc.peering.tw的时间线，把散落在表格里的断线记录，变成一条条一眼可读的时间轴——无论你是运维、学生，还是单纯好奇台湾网络命脉的人，都能快速看懂过去 2 年的每一次断线。