一、任务与问题
任务是交付一套机房平面布置图：PPT 版示意图 + CAD 版图纸。
动手之后才发现，难的不是画图，是编号。运营商机房里的机柜、网络设备、ODF、光分，长期存在多套编号并行：
| 编号类型 | 来源 | 特点 |
|---|---|---|
| 物理标签编号 | 现场纸质标签 | 老工程遗留，格式不统一 |
| 资管系统编号 | 资源管理平台 | 生产运维标准 ID |
| 网管设备编号 | SNMP / 网管槽位 | 厂商起始号不同，华为多为 0，H3C 多为 1 |
| 竣工图纸编号 | 早期竣工图 | 往往与现场已不一致 |
四套编号互不统一，直接后果就是：画图时编号混乱、对不上、漏号跳号。传统做法用 CAD 或 Visio，还有三个绕不开的痛点：
图面堆砌：多套编号同时标注，密密麻麻，看图的人分不清主次；
改一处动全身：设备位置一挪，编号标注要手动重排，极易出错；
数据脱节：图纸、资管系统、现场实际三者之间没有联动，更新滞后。
二、解决思路
1. 编号体系：确立主编号，其余降级为属性
核心原则一句话：只选一套编号作为图面主编号，其余编号存进设备属性，不上图面。
推荐以资管系统编号作为主编号——运维查资源、割接、故障处理时可以拿着图纸直接对照，不需要二次翻译。旧标签号、网管 ID 等存为附属字段，需要时在台账里查阅，或另附一张《编号映射对照表》放在图纸副页。
其中有一条实践得来的经验：允许跳号，不要为了数字连续去改编号。机房常有拆除、利旧，编号不连续是正常现象，图纸应当如实反映现状；强行补全反而是在制造假数据。
遇到重复编号，先现场核对资管系统，判断哪一个是历史遗留的错误标签：正确编号保留为主编号，错误编号移入映射表备注并安排现场整改换签，图纸上不标注错误编号。
新上架、尚未录入资管的设备，分配临时编号，并在映射表中明确标注「临时，待资管录入」，录入完成后转正。
2. 数据模型：以物理位置为锚点
编号会变，物理位置不会。机柜在机房里的行列坐标（A01、B03）是根本不变的，因此数据模型以它作锚点，主编号负责展示，其余编号作为附属属性：
| 字段 | 定位 | 示例 |
|---|---|---|
physicalPos | 物理行列锚点（不变） | A01 |
mainCode | 主编号（图面显示） | 资管系统编号 |
oldLabelCode | 旧标签编号（属性） | 现场纸质标签 |
resCode | 资管系统编号 | 资管平台 ID |
netMgrId | 网管 ID / 槽位 | 设备内部编号 |
deviceName | 设备名称 | NE40、MA5800 |
status | 设备状态 | 在用 / 拆除 / 待录入 |
这样设计的好处是：即使资管编号发生变更，底层的物理行列号仍然可以作为对齐基准，图纸布局不必推倒重来。
关于槽位号还有一个容易踩的坑：不同厂商设备槽位起始号不一致（华为部分从 0、H3C 部分从 1），图纸统一使用资管槽位编号，网管原生起始号放进映射表，避免图纸与网管对不上。
3. 工具选型：轻量级 Web 编辑器替代 CAD
既然痛点在「编号与数据的联动」，而不是绘图本身，那就没必要在 CAD 里反复手动调整标注。思路是做一个轻量级可视化编辑器：以 CAD 平面图作底图，在上面叠加设备方块并录入编号台账，实现「图 — 表 — 数据」三位一体。
四条设计约束：
纯前端单文件：一个 HTML 文件，双击即运行，无需安装环境；
零外部依赖：原生 HTML + CSS + JavaScript + SVG，不引入任何框架和库；
数据本地化：全部数据存在浏览器本地，不上传服务器；
导入导出齐全：PNG / JSON / CSV / CAD 属性文本导出，JSON 导入实现备份恢复。
三、实践结果
最终产出一个单文件 HTML 编辑器，约 58KB，双击即可在 Chrome / Edge 中运行，实测底图为 1191×842、含 5489 条<path>的 3.1MB 矢量 CAD 图。
画布层
导入 PNG / SVG 底图作为背景，滚轮缩放（0.2x ~ 5x）、拖拽平移，以鼠标位置为锚点缩放；
三类设备方块按颜色区分：物理机柜（绿）、网络设备（橙红）、对拖 / ODF / 光分（蓝），白底着色边框，保证黑白打印也能分辨；
方块支持拖拽移动与多方向缩放控制点，坐标自动限制在画布范围内。
编号台账
右侧表格展示全部字段，单元格直接编辑，无需弹窗；
画布与表格双向联动：点方块→表格行高亮；点表格行→方块闪烁定位；
mainCode重复自动标红并提示「主编号重复，请核查资管/现场」；physicalPos不强制唯一（同一机柜内可有多台设备），但悬浮提示「该位置已有 N 台设备」；表头点击排序，顶部搜索框模糊匹配编号与名称。
持久化与导入导出
设备数据与视图状态存
localStorage，底图存IndexedDB（突破 5MB 限制）；导出 PNG（2000px 宽，用于打印贴柜）、JSON（工程快照）、CSV（台账，带 BOM 头防 Excel 中文乱码）、CAD 属性文本（纯 txt）；
导入 JSON 支持覆盖 / 合并两种模式。
交互细节
Ctrl+Z / Ctrl+Y撤销重做（上限 50 步）；方向键微移 1px，
Shift+方向键 10px；框选批量选中，支持批量删除、批量改状态；
新建设备自动编号：
PHY-001/NET-001/XCON-001；状态可视化：在用（白色）、拆除（灰色 + 删除线 + 方块半透明）、待录入（浅橙）。
完整工作流
用 PyMuPDF 把 CAD 导出的 PDF 转成 SVG（保留矢量、文字可编辑）；
打开编辑器，导入 SVG 作为底图；
选择设备类型，在底图对应位置点击放置方块；
在右侧表格中录入编号、名称、状态等属性；
导出 PNG 打印贴柜、导出 CSV 交资管核对、导出 JSON 作工程备份。
与传统方式对比
| 对比项 | CAD / Visio | 本编辑器 |
|---|---|---|
| 安装部署 | 需安装专业软件 | 双击 HTML 即可 |
| 编号管理 | 多套编号堆在图上 | 主编号显示，其余存属性 |
| 图表联动 | 无 | 画布与台账双向联动 |
| 数据导出 | 截图或手工整理 | PNG / JSON / CSV 一键导出 |
| 学习成本 | 高 | 会操作浏览器即可 |
| 数据流向 | 文件本地存储 | 浏览器本地存储，不上传 |
四、心得与反思
1. 三条最值得记住的结论
先梳理，再画图。动手前必须先用 Excel 把现场信息采集完整——机柜位置、资管编号、旧标签号、设备型号、网管 ID、ODF 架号。这一步省不得，跳过它直接开画，后面一定要返工。
物理位置是唯一锚点。编号规则会变、资管数据会脏、设备会拆旧上新，只有机房里的行列坐标是稳定的。数据模型围绕它建，图纸才不会因为一次编号变更就推倒重来。
工具的价值在「轻」，不在「强」。这个编辑器替代不了 CAD，也不需要替代。现场人员不需要学专业软件，会开浏览器就能把设备位置和编号录成一份可维护的数字台账——这才是它的意义。
2. 不足
文章开头说「难的不是画图」，但踩完坑还有一句该补上：难的是把多套编号真正统一到一处，而这一步工具帮不上忙。
数据安全的边界：数据全在浏览器本地，不上传服务器，换来的是免部署；代价是浏览器清缓存、换电脑、换浏览器都可能丢数据，必须靠手动导出 JSON 备份。真要长期使用，仍需要一个服务端或共享存储。
编号梳理无法自动化：多套编号的对应关系只能靠现场核对与人工确认，工具能做的是「把确认好的结果结构化」，而不是替人做判断。
仍有功能性缺口：底图导入尚不能自动识别图纸上的机柜框线，仍需手动放置方块；撤销栈上限 50 步；不支持多人协同编辑。
依赖底图质量：底图必须是矢量或足够清晰的位图。若只有低分辨率扫描件，设备位置的对齐精度会明显下降。
3. 后续可以做的事
增加「一键从底图矢量轮廓识别候选机柜框」的半自动放置，把重复劳动压下去；
增加台账与资管系统导出格式的对接，让「图 — 资 — 现场」三统一少一道手工转换；
把本地 JSON 备份做成定时提醒，降低数据丢失风险。
五、小结
机房平面布置图的核心难点不在画图，而在编号体系的梳理。
先确立「物理位置为锚点、资管编号为主编号、其余编号降级为属性」的数据模型，再用轻量级工具实现图表联动，就能把混乱的多套编号整理成一份清晰的台账。
工具的价值不在于替代 CAD，而在于让非专业人员也能快速上手，把现场的设备位置与编号，录成一份可持续维护的数字资产。