二开通信方式

使用参考

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 接收BI交互输出的指令消息
  window.emitter.on('post-inside-message', (data) => {
    console.log(data)
  })
  // 给BI发送指令信息
  window.emitter.emit('post-outside-message', data)
})
</script>

回传数据结构

属性	说明	类型
type	类型，如frontopTabs、frontopMutual、frontopDynamic、frontopAssembly	String
data	[{ id: '', info: {} }, ...]数据信息，如下所示	Array

点击查看参数格式-frontopTabs

{
  "type": "frontopTabs",
  "data": [
    {
      "id": "组件id",
      "info": {
        "label": "选项一",
        "value": 2
      }
    },
    // 支持多个
    ...
  ]
}

点击查看参数格式-frontopMutual

{
  "type": "frontopMutual",
  "data": [
    {
      "id": "组件id",
      "info": {
        "label": "区域点击",
        "value": 2
      }
    },
    // 支持多个
    ...
  ]
}

点击查看参数格式-frontopDynamic

{
  "type": "frontopDynamic",
  "data": [
    {
      "id": "动态组件id",
      "info": {
        "status": 2,
        "list": [ // 若要操作动态面板内部组件可传该字段数据，格式跟第一层相同
          {
            "id": "动态组件中的组件id",
            "info": {
              "data": [ /* 静态是数据 */],
              "dataQuery": "id=1" /* 接口参数 */
            }
          },
          ...
        ]
      }
    },
    // 支持多个
    ...
  ]
}

点击查看参数格式-frontopAssembly

{
  "type": "frontopAssembly",
  "data": [
    {
      "id": "组件id",
      "info": {
        "loadAnimation": {
          "direction": "right",  // right 显示， right-reverse 隐藏
          "type": "slide-in"
        },
        "data": [ /* 静态是数据 */],
        "dataQuery": "id=1" /* 接口参数 */
      }
    },
    // 支持多个
    ...
  ]
}

回传数据结构-data

属性	说明	类型
id	组件id	String
info	该组件需要更新的信息，如下所示	Object

回传数据结构-data-info

属性	说明	类型
loadAnimation	入场动画，默认 {direction: 'right',type: 'slide-in'}； 类似right显示， right-reverse隐藏	Object
label	切换选项卡对应的名称	String
value	切换选项卡对应的数值	String
status	切换动态面板对应的状态	Number
data	组件静态数据	Array/Object
dataQuery	组件第三方接口参数，如： id=1	String
list	动态面板内部组件可传该字段数据，，如下所示	Array
info	切换动态面板对应的状态，内部的需要更新的信息, 结构如下： {data: [{seriesName:'系列一', value: 10}], dataQuery: 'id=1'}	Object