NVisual 设备双面建模

NVisual 设备双面建模一套功能让设备的两面都看得见目录一、一句话说清楚这个功能二、三种使用场景三、功能一标注端口和槽位属于正面还是背面四、功能二上传背面背景图建模视角切换五、功能三创建实例时自动继承无需手动操作六、功能四连线自动归属正确的面七、功能五双面机柜的正面/背面出线区分八、功能六面感知的全景视图渲染九、跨面连接的智能校验十、老数据完全兼容零迁移成本十一、改造涉及范围一览一、一句话说清楚这个功能设备建模从正反面挤在同一张图升级为正面/背面两套独立视图——端口和槽位标记属于哪一面线缆自动出现在正确的出线面。升级前后对比对比项升级前升级后建模视图只有一张视图正反面端口全部堆在上面正面/背面两套独立视图右上角可切换背景图只有一张正面面板图正面 背面各一张面板图端口布局正反面端口混在一起空间拥挤正面端口在正面视图背面端口在背面视图出线方向线缆统一从一个方向出线拓扑失真正面线缆从正面出背面线缆从背面出举例一台 48 口交换机正面 48 个 GE 口背面还有电源模块和风扇。升级前这 50 个点位全部挤在一张图上升级后正面视图只展示 48 个 GE 口切换到背面视图才看到电源和风扇。二、三种使用场景场景说明典型设备端口分面显示设备正面板和背面板各有端口分别在两面视图展示交换机、路由器、防火墙板卡分面插槽线卡插在正面槽位业务板插在背面两面独立管理高端路由器、OLT机柜正背面出线设备上架后正面端口线缆从正面容器出背面端口线从背面容器出标准 42U 机柜三、功能一标注端口和槽位属于正面还是背面在设备型号建模页面为每个端口和槽位新增了一个面属性。操作方式在端口/槽位的属性面板中选择正面(face1)或背面(face2)。// 创建端口时传入 face{name:GE0/0/1,x:100.0,y:200.0,face:1// 1正面, 2背面}效果同一设备上有正面端口和背面端口时两边的点位图互不重叠前端根据 face 在对应视图下显示/隐藏端口四、功能二正面/背面独立视图 各自背景图升级前设备建模只有一张图所有端口全部放在上面——正面 GE 口、背面电源口、管理口……点位多了根本分不清谁在哪。升级后右上角新增切换按钮2D 正面 | 2D 背面 | 3D两点改变两张独立背景图正面视图显示正面面板图背面视图显示背面面板图端口按面显隐切换到背面时正面端口自动隐藏只显示背面端口操作方式在型号管理页面上传背景图时指定flat2背面PUT /wapi/v1/node_types/{nodeTypeId}/set_background_image?flat2flat 值含义说明1正面背景默认值原有行为不变2背面背景新增上传背面设备面板图效果设备建模详情页支持切换正面/背面视图右上角新增切换按钮2D 正面 | 2D 背面 | 3D切换到背面视图时显示背面背景图正面端口自动隐藏背面端口显示五、功能三创建实例时自动继承无需手动操作这是本功能最核心的设计用户在型号上标注好正反面后创建实例时系统自动处理。自动发生了什么设备型号建模 创建设备实例 ┌──────────────┐ ┌──────────────┐ │ port GE0/0/1 │ face1 │ port GE0/0/1 │ face 自动1 │ port GE0/0/48│ face1 │ port GE0/0/48│ face 自动1 │ port PSU1 │ face2 ──→│ port PSU1 │ face 自动2 │ slot 1 │ face1 │ slot 1 │ face 自动1 └──────────────┘ └──────────────┘用户不用做不用在实例上再次标注端口面不用手动同步 vis_node 的 face不用关心存储过程或 Java 代码这一切创建实例的那一刻就自动完成了。六、功能四连线自动归属正确的面创建设备间连线时vis_link 自动带上面属性。行为连线场景vis_link.face说明正面端口 ↔ 正面端口fromFace1, toFace1线缆在正面视图展示背面端口 ↔ 背面端口fromFace2, toFace2线缆在背面视图展示正面端口 ↔ 背面端口不同设备fromFace1, toFace2两端分别在两面展示效果前端根据fromFace和toFace决定线缆从哪个面出线。用户创建连线时不需要手动选择面——系统根据端口自动判定。七、功能五双面机柜的正面/背面出线区分这是正反面建模在机柜视图下的延伸。场景双面机柜有两个容器——正面容器f和背面容器b。设备物理上架到正面容器但它背面的端口连出的线缆应该从背面容器出线。效果机柜正面容器展示设备正面 正面端口线缆机柜背面容器展示虚拟设备只展示位置和背面端口 背面端口线缆Diagram 接口新增字段backMountedNodesData告诉前端设备在背面容器中的对应位置{mountedNodesData:{containerChildId:866,// 正面容器rackPosition:42},backMountedNodesData:{containerChildId:867,// 背面容器 ← 新增rackPosition:42}}前端据此在背面容器渲染一个影子设备位置与正面一致。八、功能六全景视图渲染——前端按面过滤Diagram 详情接口现在返回完整的面信息前端据此实现按面过滤——升级前所有节点和线缆一并渲染升级后正面/背面两套视图各显各的。接口响应新增字段路径用途vis_nodes[].face每个 vis_node 属于哪一面vis_links[].fromFace、vis_links[].toFace每条线缆两端各属哪一面node_type_diagram.background2背面背景图文件名_ports[].face、_slots[].face型号建模页端口/槽位的面前端渲染策略正面视图显示 face1 和 faceNULL 的节点/线缆 正面背景图 背面视图显示 face2 的节点/线缆 背面背景图faceNULL老数据只在正面显示确保历史数据不丢。九、跨面连接的智能校验系统自动检测不合理的连接并阻止。规则场景行为同一设备内正面端口连背面端口报错800439 Cross-face connection within device not allowed不同设备间正面端口连背面端口允许正常场景比如交换机正面连服务器背面效果用户不会无意中在同一设备内部创建跨面回路减少数据错误。十、老数据完全兼容升级零冲击功能上线后历史数据的行为与升级前完全一致——所有老数据只有正面视图没有背面。老数据情况行为ports/slots face NULL默认只在正面视图展示vis_nodes face NULL默认只在正面视图展示node_types background2 NULL只有正面背景不显示背面视图切换已有链路按老规则展示在正面不影响用户可以在需要时逐步为设备型号补充背面信息不用的就维持现状。即不填补面信息的老设备表现和升级前完全一样——还是一张视图正面模式。十一、改造涉及范围一览层级涉及内容设备型号建模端口/槽位新增 face 属性上传背面背景图设备实例化创建实例时 vis_node 自动继承 face模板应用同步 face连线创建vis_link 自动带 fromFace/toFace同设备内跨面阻止Diagram 视图返回 vis_nodes.face、vis_links.fromFace/toFace、background2、backMountedNodesData机柜视图背面容器渲染虚拟设备线缆按 fromFace/toFace 分面出线数据库5 张表新增 face/background2 字段3 个索引接口10 个接口增改请求/响应新增 face 相关字段项目NVisual Lite 网络资源可视化管理系统技术栈Spring Boot 2.2.5 PostgreSQL 13 PostGIS / Vue 2 HT for Web文档版本v1.0 | 2026-07-31