部署二次开发环境
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
其它相关文档
文档 | 文档概述 |
---|---|
仪表盘组件开发场景 | 组件开发实际业务场景,如下钻、过滤等 |
组件和系统交互的接口列表及详细说明 | |
仪表盘扩展接口列表及详细说明 |