当前位置：首页 > news >正文

nVisual 前端集成SDK使用说明

news 来源：原创 2025/6/23 14:22:33

目前客户需要搭建自己的可视化产品,但需要使用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 主流程:

1. nvisual-sdk.js 入口文件 ->登录配置基本参数加载第三方依赖如

2. 加载各个视图的主文件

3. 加载基础方法集合 collectionMethodsBase.js

4. 各个视图的方法集合比如 collectionMethodsMainView.js

5. 调用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登录用的用户名密码, 可以去所在客户的标准版里面账号管理页面中添加.

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);

}

});

})

六、案例展示

一、具体功能介绍

二、构建思路

三、项目结构和搭建

四、具体开发细节

五、sdk的使用方法

相关文章：