Demo  |   文档  |   博客  |   支持库  |   论坛  |   关于  |   EN
  • 首页
  • 产品
  • 解决方案
  • 下载
  • 合作
  • TWAVER DOCUMENT CENTER
    • 开发指南 – TWaver Doodle
      • 产品概述
      • 场景编辑器
      • 机柜面板编辑器
      • 设备面板编辑器
      • 组件模板编辑器
137 views. Last update: March 22, 2016
  1. TWAVER DOCUMENT CENTER
  2. 开发指南 – TWaver Doodle
  3. 机柜面板编辑器
Print

IN THIS PAGE

  • 1 功能介绍
  • 2 组成部份
    • 2.1 工具栏
    • 2.2 设备栏
    • 2.3 工作区
    • 2.4 属性框
  • 3 系统集成

功能介绍

机柜面板编辑器是可视化摆放机柜里面的设备的编辑工具。

组成部份

主要分为4个部分,上边为工具栏,左边为设备栏,中间为工作区,工作区右上角为设备属性框。如下图所示
rackEditor1

工具栏

  • OverView:全局视图。点击按钮,可以最大化显示工作区里的内容。滚动鼠标滚轮缩放或者拖拽视图后,可以点击该按钮快速重置机柜视图。
  • Export:导出数据。点击按钮,可以导出已经编辑完的结果。
  • Save:保存数据。点击按钮,可以保存数据到localStorage中,key值等于机柜对象的id加上”_children”,例如:”JsonObject06B260EA52F24CC697B3A1577554EEFA_children”

设备栏

显示make中注册的模型,类别为”设备”的所有模型。如果在make中注册设备,请参照make使用手册。

工作区

默认显示需要编辑设备位置的机柜前视图。在左边的设备栏中,选择设备,按住鼠标左键拖拽到工作区中,会实时显示虚化的设备在将要排放的位置。例如拖拽6U设备,到31U位置,设备右边文字会显示”31U-36U”,属性框中会显示当前位置在31U位置。

  • 工作区中机柜已经没有位置可以摆放设备,那么将没有拖拽效果。鼠标处没有圆形绿色背景的”+”图标,机柜中也没有虚化的设备。
  • 拖拽过程中想取消动作,可以拖出工作区。
  • 删除摆放后的设备,可以选中设备,点击键盘delete键删除。

属性框

显示当前选中设备可以编辑属性,支持bid(业务ID)、name(别名)、loc(位置)、panel(面板)属性。

  1. bid(业务ID):将bid设定为业务id,建立3D模型和业务之间的关联关系。
  2. name(别名):设备别名。
  3. loc(位置):设备位置,可以直接输入数值来修改机柜位置信息。
  4. panel(面板):设备面板视图。默认为”twaver.idc.equipment.newPanel”,如果需要修改设备面板,可以指定新的面板名称。

系统集成

  1. 指定make路径
  2. 取得显示编辑器的容器jquery对象
  3. 实例化doodle.RackEditor对象
  4. 全局视图,调用zoomOverview()方法
  5. 编辑结果,调用getData()方法
  6. 初始化加载机柜背板,调用loadParent(modelClass, args)方法
    JavaScript
    1
              rackEditor.loadParent('twaver.idc.rack42', {objectId: '机柜对象的id'});
  7. 初始化加载设备摆放结果,调用批量加载setData(data)方法
    JavaScript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
        var 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);
JavaScript
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);
详细可以参考RackEditor.js

137 views. Last update: March 22, 2016
Print