app.js篇

本篇主要根据策略协同中拓扑已封装的app.js,来梳理其中的属性方法

属性

构造函数参数

new App(conf,dom,flag,showInfoPopo, isImportTopo, callback)

conf (Object)

拓扑的详细配置信息,包括用户登录验证Token、拓扑Id、节点设备地址数据。。。。

dom (DOM)

拓扑的主渲染DOM

flag (Boolean)

是否打开编辑模式的控制参数

showInfoPopo (Boolean)

是否显示详情弹窗,一般用在预览模式下右击事件

isImportTopo (String)

是否为导入的拓扑
项目中为从sessionStorage中获取:
const isImportTopo = sessionStorage.getItem('importTopo');

callback (Function)

自定义回调函数,通过参数对象的type属性来控制拓扑的状态,异常弹窗(openAlert)、信息提示(infoMessage)、隐藏编辑按钮(hideEditor)等
this.g2d._callback = callback;

封装其他属性

isLoad (Boolean)

拓扑的加载状态

eventService (Class)

事件发射器
通过EventKey.OPEN_INFO_DIALOG、EventKey.DELETE_TOPO等标记来触发指定功能函数
this.eventService = conf.eventService;
this.g2d.eventService = this.eventService;

dm (Class)

拓扑的数据模型类 this.dm = new magic.DataModel();
作为承载Data数据的模型,管理着Data数据的增删以及变化事件派发。

HT框架所有组件都是通过绑定DataModel,以不同的形式呈现到用户界面;同时组件也会监听DataModel模型的变化事件,实时同步更新界面数据信息,掌握了DataModel的操作就掌握了所有组件的模型驱动方式

g2d (Class)

2D拓扑图形组件 this.g2d = new magic.graph.GraphView(this.dm);
可视化呈现数据模型中的图元数据关系。GraphView具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能。

  • this.g2d.to25DFlag
  • this.g2d.startDate
  • this.g2d.endDate
  • this.g2d.getView()
    获取拓扑组件的根层div
  • this.g2d.timerSchedule
  • this.g2d.preview

isFirstLoad (Bollean)

拓扑是否第一次加载的控制

currentEdge (Number)

点击时拓扑选中连线

bg (Object)

预设背景图片地址和背景颜色
this.bg = { bgUrl: undefined, bgColor: undefined };

old2DJson

2D JSON数据

topoData

绘图数据

magicGroupRect

转2.5D把可缩放区域转为可转换2.5D的区域

magicEdge

转2.5D把可缩放区域转为可转换2.5D的区域

hover

???

autoLayout

自动布局

  1. //其中type类型可为circular|symmetric|towardnorth|towardsouth|towardeast|towardwest|hierarchical七种自动布局类
  2. autoLayout = new ht.layout.AutoLayout(graphView);
  3. autoLayout.layout('circular', function(){
  4. graphView.fitContent(true);
  5. });

hoverElement

方法

对内执行方法

execute(conf)

根据构造函数中conf对象对一些属性属性初始化。

loadTopo(state)

加载后台拓扑json
参数为初始化后的conf对象

deviceLoad(state)

加载后台设备拓扑
参数为初始化后的conf对象

load(deviceTopo, format, state)

加载后端查询的JSON, 绘制topo
参数:
deviceTopo:需要加载的JSON对象
format(Boolean):是否需要JSON格式化
state(Object):初始化后的conf对象

serviceError()

调用this.g2d._callback,JSON加载报错提示

createDeviceArea(groupName = ‘区域’, x = 0, y = 0)

绘制可缩放的区域
参数:
groupName(String):区域名
x/y(Number):区域位置

layoutSaveAndUpdate(save, update, updateJson, direction)

拓扑布局的保存和更新
参数:
save(Boolean):是否保存
update(Boolean):是否更新
updateJson:更新的JSON
direction(String):布局选项(圆形布局、朝南、朝北等)

对外暴露方法

rebuildJson()

重新加载拓扑

setBackgroundColor(isBg, bg, baseUrl)

设置背景颜色
参数:
isBg(Boolean):false为设置bg背景色,true为设置背景图Url
bg(String):背景色
BaseUrl(String):背景图Url

preDateTime(num)

返回距当前时间,num(Number)天前的时间

createDeviceNode(item)

绘制节点
参数:
item(Object):设备信息

saveAndUpdate(updateJson, type)

保存并更新拓扑