数据洞察支持扩展添加新的菜单标签页。基于提供的一系列接口，您还可以在新的菜单标签页中扩展左侧数据目录区，右侧主体工作区及右上角的工具栏图标的内容（详见：数据洞察界面组成）。

扩展菜单标签页步骤

扩展菜单标签页前，请先阅读数据洞察 WebApp 扩展流程。本节仅介绍菜单标签页的扩展开发步骤。

第一步：在创建的菜单标签页 js 文件中，实例化 iDataInsights.Plugins.MenuTabsExtension，代码如下所示：

const menuTab = [{

    id: "custom-tab-id",

    name: '示例',

    icon: "supermapol-icons-link"

}, {

    id: "custom-tab-id2",

    name: '我的',

    icon: "supermapol-icons-link"

}]

const menuTabInstance = new iDataInsights.Plugins.MenuTabsExtension(menuTab);

其中：

    • id，菜单的id

    • name，菜单的名称

    • icon，菜单字体图标

    注意：如果用户的id使用了 iDataInsights.Plugins.menuTabsExtension.defaultMenuTabsId 中的某一个，则会导致其对应面板按照系统默认模式展现。如果用户想要自定义各面板内容，请勿使用这三个id。

第二步：调用 initPane 初始化面板

const paneId = [{

    id: "custom-tab-id",

    catalogID: "custom-catalog-id11",

    containerID: "custom-container-id",

}, {

    id: "custom-tab-id2",//tabID

    catalogID: "custom-catalog-id22",

    containerID: "custom-container-id22",

}]

menuTabInstance.initPane(paneId)

其中：

    • id，创建实例时的菜单id（必须是创建实例时传入的 id 之一）

    • catalogID，该菜单id对应显示的左侧数据目录面板 ID

    • containerID，该菜单id对应显示的右侧主体面板 ID

第三步：创建用户自定义组件

function creatMyComponents() {

    let catalogDom = document.querySelector("#custom-catalog-id22");

    //左侧目录面板---添加按钮

    let btnDom = createButton('custom-btn1', "添加数据");

    btnDom.onclick = () => {

       comComponents.openAddDataWindow();

    }

    catalogDom.appendChild(btnDom);

}

// 向指定容器添加用户自定义组件

menuTabInstance.createComponents(creatMyComponents);

其中：

    • creatMyComponents，用户自定义创建组件的函数

    • openAddDataWindow，数据洞察提供的 CommonComponents 的实例方法，用于打开添加数据的弹窗

第四步：调用 addCustomToolBarBtn 添加用户自定义工具条图标按钮

const myToolBarBtn = [{

    id:"custom-my",

    text: '我的',

    func: function () { console.log('我的') },

    hasText: true,

    icon: "supermapol-icons-link",

    otherClass:'',

}, {

    id:"custom-btn",

    text: '示例',

    func: function () { console.log('示例') },

    hasText: true,

    icon: "supermapol-icons-link",

    otherClass:'',

}]

menuTabInstance.addCustomToolBarBtn("custom-tab-id2", myToolBarBtn);

其中：

    • "custom-tab-id2"，菜单tab的id

    • myToolBarBtn.id：按钮id

    • myToolBarBtn.text：按钮名称

    • myToolBarBtn.func：点击按钮时要执行的函数（点击事件）

    • myToolBarBtn.hasText：按钮图标是否要显示按钮名称

    • myToolBarBtn.icon：按钮字体图标

    • myToolBarBtn.otherClass：该按钮的其它类名

    • addCustomToolBarBtn：该接口默认，第二个参数传入的按钮，在该菜单页被选中时都需要显示

第五步：调用 setDefaultToolBarBtnShow 设置工具条图标按钮的显示与隐藏

menuTabInstance.setDefaultToolBarBtnShow(customMenuTabId, [tooBarBtnId1, tooBarBtnId2, tooBarBtnId3,tooBarBtnId4]);

其中：

    • 第一个参数： 菜单tab的id

    • 第二个参数： 该菜单tab上对应要显示的工具条图标按钮id数组（此数组id是数据洞察中已提供的图标按钮id，参见：defaultToolBarButtonId）；

    注：如果不需要显示数据洞察提供的图标，则无需调用此接口

第六步：调用 setDefaultAddDataWindowTabs 设置添加数据窗口要显示的菜单页

menuTabInstance.setDefaultAddDataWindowTabs([menuTabID1, menuTabID2, menuTabID3]);

其中：

 

参考：