137 views. Last update: March 22, 2016
功能介绍
机柜面板编辑器是可视化摆放机柜里面的设备的编辑工具。
组成部份
主要分为4个部分,上边为工具栏,左边为设备栏,中间为工作区,工作区右上角为设备属性框。如下图所示
工具栏
- OverView:全局视图。点击按钮,可以最大化显示工作区里的内容。滚动鼠标滚轮缩放或者拖拽视图后,可以点击该按钮快速重置机柜视图。
- Export:导出数据。点击按钮,可以导出已经编辑完的结果。
- Save:保存数据。点击按钮,可以保存数据到localStorage中,key值等于机柜对象的id加上”_children”,例如:”JsonObject06B260EA52F24CC697B3A1577554EEFA_children”
设备栏
显示make中注册的模型,类别为”设备”的所有模型。如果在make中注册设备,请参照make使用手册。
工作区
默认显示需要编辑设备位置的机柜前视图。在左边的设备栏中,选择设备,按住鼠标左键拖拽到工作区中,会实时显示虚化的设备在将要排放的位置。例如拖拽6U设备,到31U位置,设备右边文字会显示”31U-36U”,属性框中会显示当前位置在31U位置。
- 工作区中机柜已经没有位置可以摆放设备,那么将没有拖拽效果。鼠标处没有圆形绿色背景的”+”图标,机柜中也没有虚化的设备。
- 拖拽过程中想取消动作,可以拖出工作区。
- 删除摆放后的设备,可以选中设备,点击键盘delete键删除。
属性框
显示当前选中设备可以编辑属性,支持bid(业务ID)、name(别名)、loc(位置)、panel(面板)属性。
- bid(业务ID):将bid设定为业务id,建立3D模型和业务之间的关联关系。
- name(别名):设备别名。
- loc(位置):设备位置,可以直接输入数值来修改机柜位置信息。
- panel(面板):设备面板视图。默认为”twaver.idc.equipment.newPanel”,如果需要修改设备面板,可以指定新的面板名称。
系统集成
- 指定make路径
- 取得显示编辑器的容器jquery对象
- 实例化doodle.RackEditor对象
- 全局视图,调用zoomOverview()方法
- 编辑结果,调用getData()方法
-
初始化加载机柜背板,调用loadParent(modelClass, args)方法
1rackEditor.loadParent('twaver.idc.rack42', {objectId: '机柜对象的id'}); -
初始化加载设备摆放结果,调用批量加载setData(data)方法
123456789101112var data = [{"parentObjectId": "机柜对象的id","id": "twaver.idc.equipment6","objectId": "D56669CE73E346CD96D85A4DB878EDBC","client": {"loc": 17, "panel": "twaver.idc.equipment.newPanel"}}, {"parentObjectId": "机柜对象的id","id": "twaver.idc.equipment4","objectId": "DFAFB9619BA1439B8ACEB291563E74FB","client": {"loc": 28, "panel": "twaver.idc.equipment.newPanel"}}]rackEditor.setData(data);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
//指定make路径 make.Default.path = 'make/'; //取得机柜类型 var modelClass = doodle.Utils.getUrlParam('modelClass'); //取得显示编辑器的容器jquery对象 var parentView = $('.main'); //实例化doodle.RackEditor对象,modelClass如果为空,在设备栏会显示所有机柜. var rackEditor = window.rackEditor = new doodle.RackEditor(parentView, modelClass); //全局视图 $("#overview").click(function () { rackEditor.zoomOverview(); }); //调用getData取得编辑结果. $("#save").click(function () { var data = rackEditor.getData(); console.log(data); data = JSON.stringify(data); var parent = rackEditor.parentNode.getId(); localStorage.setItem(parent + '_children', data); alert('save success'); }); //export json $('#export').click(function () { var text = rackEditor.getData(); if (!text) { alert("没有数据"); return; } text = JSON.stringify(text); var content = "<div>导出数据:<br><textarea>" + text + "</textarea></div>"; $(content).dialog({ "title": "导出json", "width": 400, "height": 500 }); }); //从localStoage中加载数据 setTimeout(function () { if (modelClass) { var objectId = doodle.Utils.getUrlParam('objectId'); rackEditor.loadParent(modelClass, {objectId: objectId}); var data = localStorage.getItem(objectId + '_children'); if (data) { data = JSON.parse(data); rackEditor.loadChildren(data); } setTimeout(function () { rackEditor.zoomOverview(); }, 800); } }, 800); |