nVisual 前端集成SDK使用说明

ops/2024/12/19 0:45:30/

目前客户需要搭建自己的可视化产品,但需要使用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登录用的用户名密码, 可以去所在客户的标准版里面账号管理页面中添加.

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

}

});

})

六、案例展示


http://www.ppmy.cn/ops/143035.html

相关文章

CSS系列(18)-- 工程化实践详解

前端技术探索系列:CSS 工程化实践详解 🏗️ 致读者:探索 CSS 工程化之路 👋 前端开发者们, 今天我们将深入探讨 CSS 工程化实践,学习如何在大型项目中管理 CSS。 工程化配置 🚀 项目结构 …

复现nnunetv1和nnunetv2过程的区别

1. 存放数据集的文件夹data内文件命名及内容不同 nnunetv1参考:nnUNetv1在linux平台上训练自己的数据集-CSDN博客 2. data.json文件内代码不同 # nnunetv2 # import setuptools # # if __name__ "__main__": # setuptools.setup() # # # import js…

深度与视差的关系及其转换

深度与视差的关系及其转换 在计算机视觉和立体视觉中,深度和视差是两个重要的概念。理解这两者之间的关系对于实现立体图像处理、三维重建以及深度估计至关重要。在这篇博客中,我们将深入探讨深度和视差的概念,并介绍它们之间的转换关系。 …

docker 搭建在线聊天应用

1、拉取阿里镜像 docker pull crpi-k5k93ldwfc7o75ip.cn-hangzhou.personal.cr.aliyuncs.com/upsnap/vocechat:latest 2、配置docker-compose.yml version: 3 services:vocechat:restart: alwaysports:- 8000:3000container_name: vocechat-servervolumes:- ./data:/home/voc…

【软件设计_设计模式】设计模式代码笔记

设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。…

Databend 为什么使用 Rust 开发?

11 月 30 日,Rust China Tour 武汉站在武汉恺德光谷城际酒店举行。本次活动汇聚了来自 Databend、GreptimeDB、华中科技大学的多位 Rust 技术专家和研究者,共同探讨 Rust 语言在前沿技术中的创新应用。Databend 数据库研发工程师张祖前在活动中带来主题演…

详解MySQL在Windows上的安装

目录 查看电脑上是否安装了MySQL 下载安装MySQL 打开MySQL官网,找到DOWNLOADS 然后往下翻,找到MySQL Community(GPL) Downloads>> 然后找到MySQL Community Server 然后下载,选择No thanks,just start my download. 然后双击进行…

跑步训练(蓝桥杯2020试题A)

【问题描述】 小明要进行一个跑步训练。初始时,小明体力充沛,体力值计为10000。小明跑步时每分钟损耗600体力值。小明休息时每分钟增加300体力值。体力值的损耗和增加都是均匀变化的。 小明打算跑一分钟,休息一分钟,再跑一分钟&am…