【仪表盘】二次开发快速入门

部署二次开发环境

1. 安装前准备

1.1. 部署扩展包开发环境

本次环境配置，只需在 “扩展包开发环境” 的基础上增加二开扩展包环境即可。因此需要用户预先部署好 “扩展包开发环境” ，部署方式请参考扩展包开发环境部署。

如已部署 “扩展包开发环境” ，此步骤可跳过

1.2. 附件下载

文件	下载链接
二开扩展包	webpack.zip
build.xml	build.xml

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” 文件中实现 “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>

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

参考以上步骤进行就可以完成一个简单的组件添加了。

关注我们

服务支持

页面树结构