一、任务与问题任务是交付一套机房平面布置图PPT 版示意图 CAD 版图纸。动手之后才发现难的不是画图是编号。运营商机房里的机柜、网络设备、ODF、光分长期存在多套编号并行编号类型来源特点物理标签编号现场纸质标签老工程遗留格式不统一资管系统编号资源管理平台生产运维标准 ID网管设备编号SNMP / 网管槽位厂商起始号不同华为多为 0H3C 多为 1竣工图纸编号早期竣工图往往与现场已不一致四套编号互不统一直接后果就是画图时编号混乱、对不上、漏号跳号。传统做法用 CAD 或 Visio还有三个绕不开的痛点图面堆砌多套编号同时标注密密麻麻看图的人分不清主次改一处动全身设备位置一挪编号标注要手动重排极易出错数据脱节图纸、资管系统、现场实际三者之间没有联动更新滞后。二、解决思路1. 编号体系确立主编号其余降级为属性核心原则一句话只选一套编号作为图面主编号其余编号存进设备属性不上图面。推荐以资管系统编号作为主编号——运维查资源、割接、故障处理时可以拿着图纸直接对照不需要二次翻译。旧标签号、网管 ID 等存为附属字段需要时在台账里查阅或另附一张《编号映射对照表》放在图纸副页。其中有一条实践得来的经验允许跳号不要为了数字连续去改编号。机房常有拆除、利旧编号不连续是正常现象图纸应当如实反映现状强行补全反而是在制造假数据。遇到重复编号先现场核对资管系统判断哪一个是历史遗留的错误标签正确编号保留为主编号错误编号移入映射表备注并安排现场整改换签图纸上不标注错误编号。新上架、尚未录入资管的设备分配临时编号并在映射表中明确标注「临时待资管录入」录入完成后转正。2. 数据模型以物理位置为锚点编号会变物理位置不会。机柜在机房里的行列坐标A01、B03是根本不变的因此数据模型以它作锚点主编号负责展示其余编号作为附属属性字段定位示例physicalPos物理行列锚点不变A01mainCode主编号图面显示资管系统编号oldLabelCode旧标签编号属性现场纸质标签resCode资管系统编号资管平台 IDnetMgrId网管 ID / 槽位设备内部编号deviceName设备名称NE40、MA5800status设备状态在用 / 拆除 / 待录入这样设计的好处是即使资管编号发生变更底层的物理行列号仍然可以作为对齐基准图纸布局不必推倒重来。关于槽位号还有一个容易踩的坑不同厂商设备槽位起始号不一致华为部分从 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 限制导出 PNG2000px 宽用于打印贴柜、JSON工程快照、CSV台账带 BOM 头防 Excel 中文乱码、CAD 属性文本纯 txt导入 JSON 支持覆盖 / 合并两种模式。交互细节CtrlZ / CtrlY撤销重做上限 50 步方向键微移 1pxShift方向键 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而在于让非专业人员也能快速上手把现场的设备位置与编号录成一份可持续维护的数字资产。