部署二次开发环境
1. 安装前准备
1.1. 部署扩展包开发环境
前提
本次环境配置，只需在 “扩展包开发环境” 的基础上增加二开扩展包环境即可，用户预先安装扩展包开发环境，部署方式请参考 扩展包开发环境部署。
| 注意 |
|---|
如已部署 “扩展包开发环境” ，此步骤可跳过 |
1.2. 附件下载
2. 添加webpack环境
将二开扩展包环境 “wepbackZip” 解压缩放到 src 目录下，与 web 同级。
3. 修改build.xml文件
可参考附件下载中的build.xml修改以下内容。
① 通过clean命令中添加删除webpack编译内容；
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<delete dir="${basedir}/src/web/vision/dist" /> |
② 通过jar命令添加排除webpack路径下的内容；
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<exclude name="**/webpack/" /> |
③ 添加webpack命令；
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<target name="webpack" description="webpack npm build">
<exec executable="cmd.exe">
<arg line="/c "cd ${basedir}/src/webpack && npm run build " "/>
</exec>
</target> |
④ 修改dist命令编译部分如下，添加webpack相关的清除及编译；
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<parallel failonany="true">
<echo>==============</echo>
<antcall target="clean" />
<antcall target="webpack" />
<echo>webpack npm build</echo>
<echo>${ant.project.name}: dist</echo>
<echo>==============</echo>
<antcall target="compile" />
</parallel> |
⑤ 修改打包名称；
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<project name="barZone" default="dist">
<property name="ext_name" value="barZone" />
</project> |
效果如下：
入门示例
1. 添加仪表盘组件
1.1. 需求场景
在仪表盘组件工具中，新增一个组件，组件中显示一个简单的文字 “hello”。
1.2. 预期效果
1.3. 操作步骤
（1）在根目录下的 “SmartbiPluginsApp/webpack/src/plugins/addExtenders” 下创建组件文件夹，添加文件夹 “HelloView” 并在文件夹下创建两个文件：“index.js”、“HelloView.vue”
（2）在 “index.js” 文件中实现 “provideMetaInfo” 方法，返回的是一个对象。
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
import HelloView from './HelloView.vue'
const provideMetaInfo = () => {
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 {
provideMetaInfo
} |
（3）在 “HelloView.vue” 中编写自己的业务代码
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<template>
<div>hello</div>
</template>
<script>
export default {
name: 'hello'
}
</script> |
2. 扩展仪表盘示例
2.1. 需求场景
在仪表盘预览菜单栏，点击工具栏弹出hello。
2.2. 预期效果
2.3. 操作步骤
（1）在根目录下的 “SmartbiPluginsApp/webpack/src/plugins/modifyExtenders” 下创建组件文件夹。下面以仪表盘预览菜单栏为例，添加文件夹“sxExtension”，并在文件夹下创建两个文件：“index.js”、“Extender.js”。
（2）在 “index.js” 文件中实现 “provdieMetaInfo” 方法，Extender导出的是一个 EditorMetaInfo 对象。
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
import Extender from './Extender1'
const provideMetaInfo = {
// 二开文件
implement: Extender1
}
export default {
provideMetaInfo
} |
（3）在 “Extender.js” 文件中， 实例化二次接口仪表盘菜单初始化事件(预览模式下)onFlexMenuInit，供仪表盘接口对象 iDashboard 和仪表盘菜单接口对象 iFlexMenu。
- Extender.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 |
参考以上步骤进行就可以完成一个简单的组件添加了。基础要求：
（1）首先通过安装包：node-v16.14.2-win-x64.zip 安装node环境，详情可参考：node环境安装文档；
（2）此版本已经自带npm，对于二开人员：
环境配置
| 注意 |
|---|
（1）V10.5以下版本不支持仪表盘二次开发； （2）对于仪表盘二次开发：可在原有扩展包基础上加上包：webpack .zip； |
1.进入扩展包根目录的src
解压webpack项目，打开终端控制台cd 到webpack目录，运行下载smartbi二开环境基础包命令：
| 代码块 | ||
|---|---|---|
| ||
npm install smartbi-ext-env |
