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
自动布局
//其中type类型可为circular|symmetric|towardnorth|towardsouth|towardeast|towardwest|hierarchical七种自动布局类
autoLayout = new ht.layout.AutoLayout(graphView);
autoLayout.layout('circular', function(){
graphView.fitContent(true);
});
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)
保存并更新拓扑