部署二次开发环境
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
其它相关文档
| 文档 | 文档概述 |
|---|---|
| 仪表盘组件开发场景 | 组件开发实际业务场景，如下钻、过滤等 |
| 组件和系统交互的接口列表及详细说明 | |
| 仪表盘扩展接口列表及详细说明 | |
| 介绍如何在自助仪表盘的二次开发里引入外部资源到系统中 |
