页面历史

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

（1）V10.5以下版本不支持仪表盘二次开发；

（2）对于仪表盘二次开发：可在原有扩展包基础上加上包：webpack .zip；（包含下面两个示例的基础文件，下载后按说明可直接使用）

npm install smartbi-ext-env

npm run dev  //开发调试命令

npm run build  //打包命令

npm run dev 

this.on(PAGE_ON_FLEX_MENU_INIT, iFlexMenu => {
      iFlexMenu.removeItem(1)
      iFlexMenu.insertItem(3, {
        id: 'TEST',
        icon: 'sx-icon-like',
        label: '测试',
        color: '#ed6b1f',
        handler: () => {
          alert('测试按钮')
        }
      })
    })
  }  

}

export default FlexMenuExtender

import NewTableView from './NewTableView.vue'
function provideMetaInfo () {
  return {
    name: '新清单表', // 组件名称
    type: 'NEW_TABLE', // 组件类型
    svg: 'db-left-widget__table-list',
    icon: 'sx-icon-widget-table-list icon-16',
    class: 'TABLE_LIST',
    entry: { // 组件入口
      id: 'Table', // 组件入口中的分类类别 Chart | Table | Indicator，默认为Custom
      index: 1, // 组件入口中的顺序，默认放在最后，注意：这里是分类中包含所有子类型的排序
      canSwitch: true // 是否能切换组件
    },
    freeSize: {
      width: 400,
      height: 260
    },
    fieldRules: [{ // 字段区配置，可以理解为行列区和标记区配置
      areaType: 'cols',
      tips: '',
      rule: {
        fieldCount: {
          min: 0
        }
      }
    }],
    // 组件文件
    portletImplement: NewTableView
  }
}

export default {
  provideMetaInfo
}

<template>
   <div slot="notEmpty" style="height: 100%;" >
     <table v-if = "gridDataModel">
       <th>
         <td
           v-for="field in gridDataModel.getFields()"
           :key="field.uniqueId">
           {{ field.alias }}
         </td>
       </th>
       <tr
         v-for="row in gridDataModel.getRowCount()"
         :key="row">
         <td
           v-for="field in gridDataModel.getFields()"
           :key="row + field.uniqueId">
           {{ gridDataModel.getDisplayValueByRowAndUid(row - 1, field.uniqueId) }}
         </td>
       </tr>
     </table>
   </div>
</template>
<script>
export default {
  name: 'NewTableView',
  data () {
      return {
        options: {},
        gridDataModel: null
      }
   },
   props: {
       pageProxy: {}
   },
  smartbi: {
    main: {
      refresh () {
        this.fetchData()
      }
    }
  }, {
    methodsmain: {
      async fetchDatarefresh () {
        consolethis.logfetchData(123)
      }
 let queryFields = this.generateQueryFields()}
  },
     if (queryFields.length === 0)methods: {
      async fetchData () {
return         }console.log(123)
        let optionsqueryFields = await this.pageProxy.api.fetchPortletDatagenerateQueryFields(queryFields)
        let {
   if (queryFields.length === 0) {
      gridDataModel, // 二维表模型，提供基本的数据获取方法  return
        gridData,}
// 原始二维表对象       let    queryFields: fields, // 实际取数查询的字段
  options = await this.pageProxy.api.fetchPortletData(queryFields)
       drillableFields, //let 可下钻字段{
          drilledFieldPathgridDataModel, // 二维表模型，提供基本的数据获取方法
当前下钻字段路径         } =gridData, options// 原始二维表对象
       this.options = options queryFields: fields, // 实际取数查询的字段
    this.gridDataModel = gridDataModel    drillableFields, // 可下钻字段
   // 刷新取数完成后需调用commitRefresh通知系统该组件已完成刷新，否则可能影响导出截图和定时刷新功能      drilledFieldPath // 当前下钻字段路径
 this.pageProxy.portlet.commitRefresh(true)       }, = options
    generateQueryFields  () { this.options = options
     let queryFields = this.pageProxy.field.getFieldsByZones(['cols'])gridDataModel = gridDataModel
         // 不需要groupBy的字段如提示区的字段可通过接口生成对应的groupBy字段，在取数时不groupBy
刷新取数完成后需调用commitRefresh通知系统该组件已完成刷新，否则可能影响导出截图和定时刷新功能
       let tooltipFields = this.pageProxy.fieldportlet.getFieldsByZonecommitRefresh('tooltip'true)
      },
      returngenerateQueryFields queryFields.concat(tooltipFields.map(field =>() {
        let queryFields return= this.pageProxy.field.createGroupByField(field, false)
getFieldsByZones(['cols'])
        // 不需要groupBy的字段如提示区的字段可通过接口生成对应的groupBy字段，在取数时不groupBy
       })) let tooltipFields = this.pageProxy.field.getFieldsByZone('tooltip')
  }     } }
</script>

}
</script>

本地打包非必要时候，不建议使用！

如果有需要本地打包的话，请配置添加localBuild.xml文件。

<exclude name="**/webpack/" />

<target name="webpack"  description="webpack npm build">
   <exec executable="cmd.exe">
      <arg line="/c "cd ${basedir}/src/webpack && npm run build " "/>
   </exec>
</target>

<target name="dist" depends="init">
   <parallel failonany="true">
      <echo>==============</echo>
      <antcall target="webpack" />
      <echo>webpack npm build</echo>
      <echo>${ant.project.name}: dist</echo>
      <echo>==============</echo>
      <antcall target="compile" />
   </parallel>
   <antcall target="jar" />
</target>