目前客户需要搭建自己的可视化产品,但需要使用nVisual的可视化视图功能,根据目前项目实施需求,决定做了一款简单版的SDK视图插件,这个小插件的主要功能是嵌入到客户项目里给客户提供 '详细视图''拓扑视图'或者是'主视图'的展示功能.目前已经开发完毕,这里做一下简单介绍.
一、具体功能介绍
主要功能是展示 Nvisual 的四个视图面板、一个属性面板和所有封装好的api接口,分别是 主视图、 详细视图、拓扑视图、链路查看、流量查看、属性面板 ,以及目前正在Nvisual标准版中所有的api接口(意思让客户直接调用封装好的方法,而不是客户自己去处理大量接口)
二、构建思路
主要思路是为了和标准版代码保持完全同步, 就在标准版项目内容重新建立了一个打包项目, 主要是webpack来打包主页面中所用到的所有js文件.webpack的特性就是模块化打包将关联的js文件打包到一起.
这种方式保持了一致性,不需要另外开发一套代码, 但是缺点也比较明显那就是体积比较大,打包后大小为 4.6MB.
三、项目结构和搭建
具体项目结构需要用截图来展示;
1.最外层的Nvisual(NVISUAL)
是标准版代码的文件夹,下面存放的包括 标准版 和 sdk项目的所有文件;
2.Nvisual(NVISUAL)下面的一级文件
这些文件属于标准版,规则都是VUE脚手架的项目结构,这里不做描述;
3.nvisual_HtSdk_demo
这个文件夹是SDK项目的所有代码
4.nvisual_HtSdk_demo下一级的目录
Build -- webpack.base.conf.js // webpack 的配置公共
Build -- webpack.dev.conf.js // webpack 的测试配置
Build -- webpack.prod.conf.js // webpack 的打包配置
Public // 是用来存放不需要编译打包的独立的第三方插件和一些静态文件的
Src // 是用来存放打包入口文件、demo文件 和 全部的sdk源代码
Src -- index.js // demo的入口文件 ,里面主要是 demo的交互逻辑点击事件等
Src -- index.html // demo的页面
Src -- sdk // sdk 源码部分
Src -- sdk -- nvisual-sdk.js // sdk源码的入口文件
Src -- sdk -- collectionMethodsBase.js // 不需要视图的基础方法集合"主要是获取数据, 比如 获取目录树、模型库数据的增删改查、工单数据的增删改查
Src -- sdk -- collectionMethodsDetailedView.js // 对外提供详细视图的方法集合;
Src -- sdk -- collectionMethodsLinkView.js // 对外提供的链路视图的方法集合
Src -- sdk -- collectionMethodsMainView.js // 对外提供的主视图的方法集合
Src -- sdk -- collectionMethodsTopologyView.js // 对外提供的拓扑视图的方法集合
Src -- sdk -- view -- * // 这个文件夹下的文件都是各个视图的入口文件
Src -- sdk -- nvisual -- index.js // 标准版代码的入口文件
Src -- sdk -- axios- index.js // sdk的axios请求配置
四、具体开发细节
主要流程:
Sdk 主流程:
-
nvisual-sdk.js 入口文件 ->登录 配置基本参数 加载第三方依赖如
-
加载各个视图的主文件
-
加载基础方法集合 collectionMethodsBase.js
-
各个视图的方法集合 比如 collectionMethodsMainView.js
-
调用CreateView 创建视图 返回对应的视图对象(方法合集) 实例化 标准版代码;
demo的主流程:
从打包入口文件nvisual_HtSdk_demo/src/index.js开始,初始化dom. 初始化点击事件、初始化Nvisual插件对象
五、sdk的使用方法
// 1.创建
Nvisual 对象
this.data.Nvisual = new Nvisual({
customApiUrl:
'http://172.18.0.183:8081/wapi/', // 可选项 api拼接的域名, 没有则用当前域名
release 172.18.0.175:8081 / prdct 172.18.0.183:8081
customImgHost:
'https://project.nvisual.com/', // 可选项 图片拼接的域名, 没有则用当前域名
customImgPath:
'/img/nvisual/modelLibrary/', // 可选项 图片拼接的图片地址 (有头部'/', 有尾部 '/')
// * sdk登录用的用户名密码, 可以去所在客户的标准版里面账号管理页面中添加.
login: {
account: '****', // * 账号
password: '********', // * 密码
},
data: {
// * 初始化时用到的
diagramid, 默认为视图的起点,如果不传递, 会让一些小功能找不到数据
diagramId: '24000000000001',
}
}, () => {
// 主函数初始化完毕的回调
// 创建 this.data.Nvisual
对象后 才可以创建视图
// 创建主视图
this.data.NvisualExampleMainView =
this.data.Nvisual.CreateView({
viewType: 'mainView', // * type:
mainView 主视图 \ detailedView 详细视图
data: {
diagramId: '24000000000001', // * 初始化时用到的
diagramid
viewId: 'main-view-body', // * 视图的容器id
viewDomObj: this.data.mainView, // * 视图的容器dom对象
},
// 可选项当前视图点击的内容
getClickData: function(data) {
console.error('当前主视图点击的内容',
data);
}
})
// 创建 详细视图 CreateView 'C'大写
this.data.NvisualExampleDetailedView =
this.data.Nvisual.CreateView({
viewType: 'detailedView',
data: {
diagramId: '24000000000001',
viewId: 'detailed-view-body',
viewDomObj: this.data.detailedView,
},
getClickData: function(data) {
console.error('当前详细视图点击的内容',
data);
}
});
})
六、案例展示
