部署二次开发环境
1. 安装前准备
1.1. 部署扩展包开发环境
本次环境配置,只需在 “扩展包开发环境” 的基础上增加二开扩展包环境即可。因此需要用户预先部署好 “扩展包开发环境” ,部署方式请参考 扩展包开发环境部署。
如已部署 “扩展包开发环境” ,此步骤可跳过
1.2. 附件下载
文件 | 下载链接 |
---|---|
二开扩展包 | webpack.zip |
build.xml | build.xml |
2. 操作步骤
① 将二开扩展包环境 “wepbackZip” 解压缩放到 src 目录下,与 web 同级。
② 更换 “build.xml” 文件
效果如下:
添加仪表盘组件示例
1. 需求场景
在仪表盘组件工具中,新增一个组件,组件中显示一个简单的文字 “hello”。
2. 预期效果
3. 操作步骤
1. 在 “SmartbiPluginsApp/webpack/src/plugins/addExtenders” 下创建组件文件夹,添加文件夹 “HelloView” 并在文件夹下创建两个文件:“index.js”、“HelloView.vue”
2. 在 “index.js” 文件中实现 “providerMetaInfo” 方法,返回的是一个对象,具体对象的属性可以参考 【自助仪表盘】组件接口文档
import HelloView from './HelloView.vue' const providerMetaInfo = () => { return { name: 'Hello', // 组件名称 type: 'hello', // 组件类型 svg: 'db-left-widget__chart-pie', icon: 'sx-icon-widget-chart icon-16', entry: { // 组件入口,可以从仪表盘工具栏中直接添加(不配置就只能通过智能配图切换出来) title: 'Hello入口', // 在组件入口中显示的名称,不填显示组件名称 order: 15, // 组件入口中的顺序,默认放在最后 group: { // 分组,不配置放到默认分组 id: 'basic' // 分组标识 } }, // 组件文件 portletImplement:HelloView } } export default { providerMetaInfo }
3. 在 “HelloView.vue” 中编写自己的业务代码
<template> <div>hello</div> </template> <script> export default { name: 'hello' } </script>
扩展仪表盘示例
1. 需求场景
在仪表盘预览菜单栏,点击工具栏弹出hello
2. 预期效果
3. 操作步骤
1. 在 “SmartbiPluginsApp/webpack/src/plugins/modifyExtenders” 下创建组件文件夹。下面以仪表盘预览菜单栏为例,添加文件夹“SXExtension”,并在文件夹下创建两个文件:“index.js”、“Extender1.js”。
2. 在 “index.js” 文件中实现 “provdieMetaInfo” 方法,Extender1导出的是一个 EditorMetaInfo 对象
import Extender1 from './Extender1' const provideMetaInfo = { // 二开文件 implement: Extender1 } export default { provideMetaInfo }
3. 在Extender1文件中, 实例化二次接口仪表盘菜单初始化事件(预览模式下)onFlexMenuInit,供仪表盘接口对象 iDashboard 和仪表盘菜单接口对象 iFlexMenu。
- Extender1.js 核心代码如下:
const extendObject = { dashboard: { onFlexMenuInit (iDashboard, iFlexMenu) { iFlexMenu.addItem({ id: 'Custom', icon: 'sx-icon-menu', label: 'PageInfo', color: 'rgba(97, 133, 199, 0.95)', handler () { console.log('hello') } }) } }} export default extendObject
参考以上步骤进行就可以完成一个简单的组件添加了,如果想要进行更加复杂的组件开发,可以参考 【自助仪表盘】组件接口文档 V1.0.0
基于场景的教程:(如果想要开发更加复杂组件的话)
仪表盘组件开发场景
其他资源
- 仪表盘组件接口文档
- 仪表盘二开外部资源使用文档