112 views. Last update: March 22, 2016
IN THIS PAGE
功能介绍
设备面板编辑器是可视化创建设备面板的编辑工具。
组成部份
主要分为4个部分,上边为工具栏,左边为组件栏,中间为工作区,工作区右上角为设备属性框。如下图所示
工具栏
-
对齐方式
-
分布方式
-
拖拽模式(默认)/框选模式:
点击切换空白区域鼠标操作模式。
- 拖拽模式(默认):鼠标在空白处拖动时,整个视图一起移动。
- 框选模式:鼠标拖动时,会出现选择框,可以批量选中图元。
-
开启鼠标编辑(默认)/关闭鼠标编辑:
点击切换选中节点上的鼠标操作模式。
-
OverView:全局视图
点击按钮,可以最大化显示工作区里的内容。滚动鼠标滚轮缩放或者拖拽视图后,可以点击该按钮快速重置机柜视图。
-
Export:导出数据
-
Save:保存数据
。
点击按钮,可以保存数据到localStorage中,key值等于弹框中输入的名称。默认为设备的client中的panel属性值。
组件栏
显示make中注册的模型,类别为”设备”的所有模型。如果在make中注册设备,请参照make使用手册。
设备面板:注册的默认设备面板背板。默认有1U到8U的背板
面板部件面板上可以添加的部件。
工作区
- 默认根据设备的高度现实对应高度的背板。在左边的背板部件栏中,拖拽部件到背板上。
- 拖拽过程中想取消动作,可以拖出工作区。
- 删除摆放后的设备,可以选中设备,点击键盘delete键删除。
- 选中部件按空格可以顺时针旋转90度。
-
选中部件按ctrl键,在鼠标位置会显示选中部件的边框,点击时在该位置复制该部件。
属性框
显示当前选中设备可以编辑属性,支持bid(业务ID)、name(别名)、width(宽度)、height(高度)、x(位置X)、y(位置Y)、angle(角度)属性。
- bid:将bid设定为业务id,建立3D模型和业务之间的关联关系。
- name:部件别名。
- width(宽度):部件的宽度。
- height(高度)部件的高度。
- x(位置X):部件的X坐标。
- y(位置Y):部件的Y坐标。
- angle(角度):部件的旋转角度。
系统集成
- 指定make路径
- 取得显示编辑器的容器jquery对象
- 实例化doodle.DeviceEditor对象
- 对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle
- 分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver
- 调用setDragToPan方法,切换拖拽模式(默认)和框选模式。 true-拖拽模式 false-框选模式
- 调用setMouseEditable方法,切换开启鼠标编辑(默认)和关闭鼠标编辑 true-开启鼠标编辑 false-关闭鼠标编辑
- 取得编辑结果,调用getData()方法
- 加载编辑结果,调用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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
//指定make路径 make.Default.path = 'make/'; //取得显示编辑器的容器jquery对象 var parentView = $('.main'); //实例化doodle.DeviceEditor对象 var deviceEditor = window.deviceEditor = new doodle.DeviceEditor(parentView); //对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle $('.alignBox').on('click', 'input', function (e) { var type = $(this).data('type'); deviceEditor.align(type); }); //分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver $('#flowBox').on('click', 'input', function (e) { var type = $(this).data('type'); var padding = prompt('请输入间距', 5); padding = parseFloat(padding); if (isNaN(padding)) { return; } deviceEditor.flow(type, padding); }); //全局视图 $("#overview").click(function () { deviceEditor.zoomOverview(); }); //拖拽模式(默认)/框选模式 true-拖拽模式 false-框选模式 $('#panModel').on('click', function () { $(this).toggleClass('panModel'); if ($(this).hasClass('panModel')) { deviceEditor.setDragToPan(true) $(this).val('框选模式'); } else { deviceEditor.setDragToPan(false) $(this).val('拖拽模式'); } }) //开启鼠标编辑(默认)/关闭鼠标编辑 true-开启鼠标编辑 false-关闭鼠标编辑 $('#editable').on('click', function (e) { $(this).toggleClass('editable'); if ($(this).hasClass('editable')) { deviceEditor.setMouseEditable(true) $(this).val('禁止鼠标编辑'); } else { deviceEditor.setMouseEditable(false) $(this).val('开启鼠标编辑'); } }); //取得模型的面板名称 var panelName = doodle.Utils.getUrlParam('panelName'); //调用 getData方法,取得编辑结果. $("#save").click(function () { var data = deviceEditor.getData(); console.log(data); data = JSON.stringify(data); var mess = 'twaver.idc.equipment.newPanel'; if (panelName && panelName.length > 0 && panelName != 'undefined') { mess = panelName; } var id = prompt('请输入面板名称', mess); localStorage.setItem(id, data); alert('save success'); }); //export json $('#export').click(function () { var text = deviceEditor.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 }); }); |