机柜图管理工具 全功能完整版

核心功能详解
一、项目管理系统（多项目统筹，备份导入更灵活）

• 新建项目：可自定义项目名称和描述，支持批量生成机柜，也能创建多个独立项目，分别管理不同机房或场景。
• 项目管理：直观查看所有项目列表，显示项目更新时间和设备统计，支持一键切换、删除，删除操作带二次确认，避免误操作。
• 导入导出：支持本地JSON文件导入、JSON内容粘贴导入（适配新旧格式），导出JSON备份文件自动命名，包含完整数据，方便分享和异地同步。
• 自动备份：支持手动保存，同时自动保存到浏览器LocalStorage，保存时自动创建版本快照，实时提示"未保存"状态，避免数据丢失。

二、机柜视图与布局系统（可视化拉满，操作更便捷）

• 批量生成机柜：可配置1-100台机柜数量、任意U数高度（42U/37U/48U等）及行列布局，智能命名（单行/多行模式），可选择新增到当前项目或新建项目。
• 机柜显示：支持自定义机柜颜色，实时显示机柜名称和U数，提供50%-150%多比例缩放，网格布局搭配横向滚动，多列机柜查看无压力。
• 视图模式：支持"显示所有（正反两面）、仅正面、仅背面"三种模式，可按需切换，查看更精准。

三、设备管理与编辑（拖拽操作，精细化配置）

• 拖拽摆放：从左侧设备库直接拖拽设备至机柜，智能吸附U位，自动检测设备高度，杜绝重叠，可选择摆放正面或背面。
• 设备编辑：可全方位配置设备信息，包括基础信息（名称/型号/SN/厂商等）、详细规格（功率/IP/端口等）、接口板卡（多板卡+多端口，支持端口类型/状态配置），也可自定义设备颜色、切换正反面。
• 快捷操作：支持清空所有机柜、清空所有设备，危险操作均带二次确认，防止误删数据。

四、设备库系统（资源丰富，扩充便捷）

• 8大分类：涵盖路由与出口、网络交换机、安全防护、计算服务器、存储与备份、电源与配电、运维与基础设施、光网配线架，分类清晰、颜色区分，方便快速定位。
• 360+真实型号：每个设备均包含完整参数（U数/功率/端口/CPU等），无需手动录入，可直接使用。
• Excel批量扩充：提供专用脚本，可一键生成设备库扩充Excel，支持批量添加设备，满足个性化需求。

五、版本快照与历史系统（变更可追溯，误操作可挽回）

• 手动快照：点击即可创建快照，可自定义名称（默认带时间戳），快速保存当前布局状态。
• 历史查看：直观显示所有历史快照，包含创建时间、快照名称、版本来源（手动/自动），变更记录一目了然。
• 一键恢复：可恢复到任意历史版本，恢复前自动备份当前状态，彻底避免误恢复导致的数据丢失。

六、Excel导出功能（资产统计，汇报便捷）

• 自定义导出：可选择导出设备名称、型号、SN、IP、机柜位置等任意字段，按需导出，不冗余。
• 标准格式：导出为.xlsx格式，自动命名（项目名+时间戳），自动格式化列宽，可直接用Excel打开编辑，适配汇报、资产统计等场景。

七、精细化显示配置（按需调整，视觉更舒适）

• 字段配置：可勾选机柜设备上显示的信息（名称/IP/SN/厂商等），实时预览效果，按需展示。
• 显示模式：提供简洁模式（仅名称）、标准模式（名称+IP/SN）、详细模式（多行信息），适配不同查看需求。

八、配线互联管理系统（全新模块，重点亮点）
8.1 端口配线区
在机柜视图中选中任意设备，右侧展开配线面板，以真实U位刻度展示设备端口信息。支持：

• 端口连接管理：逐端口配置源端/对端连接关系，支持板卡分区（多板卡+多端口布局）
• 多种介质类型：单模光纤、多模光纤、以太网、电气等多种物理介质可选，不同介质用不同颜色标识
• 端口状态追踪：已连接/预连接/预留/故障等多种状态可视化，一眼识别端口使用情况
• 管理口支持：设备管理口（MGMT）独立配置，不占用业务端口编号
• 双向自动同步：配置本端端口连接时，自动同步对端设备端口信息，无需重复操作
• 端口命名规则：支持数字序号/A-Z字母/自定义命名等多种端口编号规则
• 实时高亮联动：右侧配线面板与左侧机柜视图双向联动，点击端口自动定位对应设备并高亮闪烁

8.2 互联矩阵对比
以矩阵表格形式直观展示两台机柜之间所有设备的端口互联关系：

• 机柜对选择：自动识别项目中所有存在互联关系的机柜组合，按连线数量排序
• 矩阵视图：左侧机柜设备按U位纵向排列，上方机柜设备横向排列，交叉单元格展示端口连接状态
• 颜色编码：不同介质类型用不同颜色连线，连接状态一目了然
• 详情弹窗：点击任意连接线可查看完整连接信息（两端机柜/设备/U位/端口/介质/状态）
• 跳转联动：支持从配线面板直接跳转到矩阵对比，自动选中当前设备所在机柜对

8.3 互联拓扑图
以可视化拓扑图方式展示项目中所有设备的互联关系全景：

• 自动布局：设备节点按所在机柜分组排列，直观显示跨机柜互联结构
• 正交连线：eNSP风格直角折线，多线并行时自动垂直错开，避免重叠
• 节点拖拽：支持手动拖拽调整节点位置，自定义拓扑布局
• 设备详情：点击任意节点弹出侧边栏，显示该设备所有连接的对端信息（机柜名/设备名/U位/端口）
• 画布操作：支持缩放、平移，适配大规模互联场景
• 全局预览：一键查看整个项目的互联全局视图，机柜节点按行列网格排列
• 跨机柜健壮：设备跨机柜移动后拓扑图自动更新，无需手动调整

8.4 配线数据完整性保障

• 设备同柜换U：设备在同机柜内上下移动U位，配线数据自动跟随，对端识别无影响
• 设备跨柜移动：设备跨机柜移动时，配线互联数据（portLinks + deviceWiringConfigs）自动同步rackId，对端可正确识别新位置
• 设备跨柜交换：两台不同机柜的设备互换位置，双向配线数据同步更新
• 设备删除清理：删除设备时自动清理所有关联的配线连接和端口配置，避免产生"幽灵连线"

九、机柜拖拽移位功能
支持通过鼠标拖拽机柜卡片，在二维网格布局中自由重新排列机柜位置：

• 拖拽触发：长按机柜标题区域拖动，与设备拖拽操作隔离，互不干扰
• 视觉反馈：拖拽过程中显示半透明虚线占位框 + 蓝色插入指示器，实时预览落点位置
• 跨排拖拽：支持从任意一排拖到任意排，机柜 row/col 自动重新编号
• 数据同步：拖拽放置后，2D视图、3D视图、JSON导出、Excel导出全部自动同步新位置
• 3D联动刷新：机柜移位后3D预览实时更新，无需手动切换视图
• 保护机制：拖拽阈值与设备拖拽统一（12px），误触不触发；拖拽与设备操作状态互斥，保证操作安全

十、数据可视化大屏（Dashboard）
全新的数据中心大屏展示视图，提供专业的可视化监控面板：

• 核心指标面板：实时展示设备总数、机柜总数、电源设备数、PDU数量等关键指标
• U位容量水位图：以水位刻度图形直观展示整体U位使用率，已用/空闲/总计一目了然
• 设备分类标签云：按设备类型（路由交换/安全/服务器/存储/配电/基础设施等）分类统计，彩色标签展示
• 功率负载监控：实时统计总功率，环形进度条展示负载率，TOP排行展示高负载设备
• 数据完整性检测：IP地址/SN序列号/资产编号/厂商型号/功率数据覆盖率一览
• 厂商排名：按设备数量统计厂商分布，TOP排行展示
• 机柜热力图：每台机柜U位占用率以热力条形式展示，颜色从绿到红表示空闲到高负载
• 3D机柜实景：大屏中央嵌入3D机柜预览，支持旋转/缩放交互
• 实时时钟：顶部状态栏含实时时钟、机柜/设备统计、系统运行状态指示
• 炫酷视觉：深色科幻风格主题，渐变装饰线、扫描动画、呼吸指示灯，适配数据中心监控大屏场景

十一、其他功能增强11.1 3D机柜预览增强

• 多场景复用：3D视图独立于2D视图，可在 Dashboard、3D预览、配线管理中灵活复用
• 颜色同步：支持机柜颜色/设备颜色3D渲染，与2D视图保持一致
• 实时刷新：机柜移位后3D自动刷新（通过 updatedAt 时间戳驱动，不依赖数组长度）
• 自适应布局：3D场景自适应容器大小，窗口缩放自动调整视角
• 高清截图导出：一键导出3×分辨率PNG截图，放大后设备文字清晰可读

独立HTML导出（完整功能版）：导出为完整功能的独立HTML文件，包含嵌入式Three.js库和OrbitControls，完全离线可用，无需依赖任何服务，浏览器直接打开即可使用全部功能：

• 双模式切换：支持3D自由视角模式和大屏展示模式，一键切换
• 完整交互：设备悬停提示（显示名称、U位、功率）、点击查看详情面板（完整设备信息：名称/型号/SN/资产编号/U位/IP地址/规格参数等）
• 相机控制：支持旋转、缩放、平移、视角重置，操作流畅
• 实时统计：顶部工具栏显示机柜数、设备总数、正面/背面设备数
• 视觉效果：深色科幻主题、设备颜色分类、平滑光照渲染
• 单机柜聚焦：支持聚焦查看单个机柜详情
• 响应式设计：自动适配不同屏幕尺寸，详情面板弹出时自动调整画布布局

11.2 设备库扩充

• IoT物联网类：新增霍尼韦尔IoT集线器、施耐德智能照明控制器、大唐数据采集网关、威胜能源采集网关等多款IoT网关设备
• 弱电/楼宇类：新增安科瑞电力监控仪表、施耐德C-Bus/DALI照明控制器、霍尼韦尔IBMS集成平台等
• 动环监控类：新增维谛温湿度传感器、定位漏水检测器、烟雾探测器、蓄电池巡检仪等机房传感器
• 精密空调：新增维谛Liebert PEX/DME系列精密空调（35kW/25kW/12kW/7kW多种规格）

11.3 配线导出增强

• Excel导出的对口对应表中自动包含完整的互联信息（本端/对端机柜、设备、U位、端口、介质、状态）
• 机柜详情Sheet中每个设备端口自动显示互联对端信息
• 支持管理口连接在Excel中独立标注

完整功能清单

技术架构（原创可查，稳定可靠）前端框架

• Vue 3：采用Composition API，响应式编程，交互流畅
• TypeScript：类型安全，减少开发bug，提升使用稳定性
• Vuetify 3：Material Design组件库，界面美观专业，适配运维场景
• 状态管理采用Pinia轻量级状态管理，模块化设计代码结构清晰，便于后续更新维护。
• 数据存储通过LocalStorage实现浏览器本地存储，项目数据、设备库、版本历史分别独立存储，数据安全不混淆。
• 构建工具使用Vite快速构建，通过Electron打包为桌面应用，借助electron-builder生成NSIS安装包，支持桌面端直接使用。

新增技术点

• 配线状态管理：独立管理配线连接数据，通过双重键值精确定位，与项目数据耦合但独立维护
• 跨机柜数据一致性：设备跨机柜移动时自动同步相关数据，保证所有下游模块数据一致
• 响应式数据链：数据变更自动级联更新所有视图，无需手动触发
• 3D引擎：基于Three.js实现机柜/设备实时渲染，支持多场景复用
• Excel导出增强：新增对口对应表、端口互联标注、管理口处理等功能

典型使用场景（贴合实际，即用即会）场景一：新建机房规划

• 新建项目，命名"XX机房"并填写相关描述；
• 使用"批量生成机柜"功能，创建10个42U机柜（可按需调整数量和U数）；
• 从设备库拖拽对应设备，完成机柜布局摆放；
• 创建快照保存"方案A"，调整布局后再创建"方案B"；
• 对比两个方案，导出Excel文件用于汇报审批。

场景二：现有机房文档化

• 新建项目，或导入现有JSON数据（如有历史备份）；
• 逐个添加设备，录入IP、SN、资产编号等关键信息；
• 配置设备端口信息和连接关系，完善设备详情；
• 定期创建快照，记录机柜设备变更情况；
• 导出Excel作为机房资产清单，便于日常核对和上报。

场景三：变更管理（防误操作，可追溯）

• 设备变更前，创建快照并命名"变更前-2026-05-12"，留存原始状态；
• 进行设备添加、移除、移动等变更操作；
• 变更完成后，创建快照"变更后-完成"，记录变更结果；
• 若变更后出现问题，一键恢复到"变更前"快照，快速挽回损失。

场景四：配线互联管理

• 在机柜视图中选中设备，右侧打开配线面板；
• 逐端口配置源端/对端连接关系，选择介质类型；
• 查看互联矩阵对比，确认跨机柜连接正确性；
• 打开拓扑图查看全局互联结构，拖拽调整布局；
• 导出Excel对口对应表，用于配线文档归档。

场景五：大屏监控展示

• 打开数据可视化大屏视图；
• 实时监控U位使用率、功率负载、数据完整性；
• 通过热力图快速定位高负载机柜；
• 查看设备分类分布和厂商排名统计；
• 3D预览机柜布局，旋转查看设备细节。

项目简介
这款工具主要面向数据中心管理员、机房运维人员、网络工程师，主打机柜图可视化管理，解决传统Excel管理机柜效率低、可视化差、变更难追溯的痛点。支持设备拖拽摆放、版本快照、Excel导入导出、设备库管理等全流程功能，操作简单直观，能大幅提升机柜管理效率，轻松实现数据中心设备可视化管控。

下载链接：
通过网盘分享的文件：机柜图管理工具链接: https://pan.baidu.com/s/1ZAhoFhvMp1dkiuccoFXwBg?pwd=52pj 提取码: 52pj --来自百度网盘超级会员v10的分享