cbim-render-ui-test v1.0.23

CBIM 渲染引擎组件

引用方式

import './cbim_Render_UI/icons'
import CbimRenderUI from 'cbim-render-ui'
import 'cbim-render-ui/style'
// ...
createApp(App)
    .use(sth) // ... 引入store等
    .use(CbimRenderUI)
    .mount('#app')

组件使用

<template>
    <cbim-model-layer>
        <template #mainLayer>
            <cbim-model-viewer 
                ref="modelContainer"
                <!-- 模型id -->
                :model-id="$route.params.id"
                <!-- 使用的图形分支（不传为默认） -->
                :env="env"
                <!-- 模型加载中回调 -->
                @loading="loaded=false"
                <!-- 模型加载完成回调 -->
                @loaded="loaded=true"
                <!-- 引擎连接错误回调 -->
                @error="loaded=false"/>
        </template>
        <template #menuLayer v-if="loaded">
            <cbim-left-menu ref="leftToolbar"/>
        </template>
        <template #toolLayer v-if="loaded">
            <!-- 底部工具栏 -->
            <cbim-toolbar ref="bottomToolbar"></cbim-toolbar>
            <!-- 右边工具栏边栏 -->
            <cbim-right-toolbar ref="rightToolbar"/>
        </template>
    </cbim-model-layer>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'model',
    data() {
        return {
            loaded: false,
            env: '/data/autoDeploy/bin/Release/test'
        }
    }
})
</script>

组件说明

1、CbimModelLayer

布局

<cbim-model-layer>
    <template #mainLayer></template>
    <template #menuLayer></template>
    <template #toolLayer></template>
</cbim-model-layer>

• 插槽

  名称	说明
  mainLayer	主视口，可以用来放置模型视图、二维图纸视图等
  menuLayer	左侧菜单视口，可以用来放置左侧菜单
  toolLayer	工具栏视口，用来放置底部及右侧工具栏

2、CbimModel

模型显示组件

<cbim-model :model-id="1234"></cbim-model>

• 属性

  属性	说明	类型	默认值
  modelId	模型id	Number	-
  env	图形引擎分支	String	"/data/autoDeploy/bin/Release/test"

• 事件

  事件名称	说明
  loading	加载中的回调函数
  loaded	加载完成的回调函数
  error	发生错误的回调函数

3、CbimToolbar

底部工具条组件

<cbim-toolbar></cbim-toolbar>

• 属性

  属性	说明	类型	默认值
  menuConfig	菜单配置	Array	默认配置

• 事件

  事件名称	说明	返回结果
  callback	菜单关闭/开启时回调	MenuObject

4、CbimLeftMenu

左侧菜单栏组件

<cbim-left-menu></cbim-left-menu>

• 属性

  属性	说明	类型	默认值
  menuConfig	菜单配置	Object	默认配置

• 事件

  事件名称	说明	返回结果
  callback	菜单关闭/开启时回调	MenuObject

5、CbimRightToolbar

右侧工具条组件

<cbim-right-toolbar></cbim-right-toolbar>

• 属性

  属性	说明	类型	默认值
  menuConfig	菜单配置	Array	默认配置

• 事件

  事件名称	说明	返回结果
  callback	菜单关闭/开启时回调	MenuObject