cbim-render-ui v1.5.33

CBIM 渲染引擎组件

引用方式

import './cbim_Render_UI/icons'
import CbimRenderUI from 'cbim-render-ui'
import 'cbim-render-ui/style'
// ...
createApp(App)
    .use(sth) // ... 引入store等
    .use(CbimRenderUI)
    // .use(CbimRenderUI, {innerNet: true, api: '//127.0.0.1'}) 内网环境配置
    .mount('#app')

组件使用

<template>
    <cbim-model-layer>
        <template #mainLayer>
            <cbim-model-viewer 
                ref="modelContainer"
                <!-- 模型id -->
                :model-id="$route.params.id"
                <!-- 使用的图形分支（不传为默认） -->
                :env="env"
                <!-- sdk 初始化连接 http请求头部 -->
                :headers="headers"
                <!-- 渲染端返回消息 -->
                @renderMessage="msgcallback"
                <!-- 模型加载中回调 -->
                @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" @callback="cb"></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	默认配置
  visible	菜单显隐	Boolean	true
  size	底部菜单尺寸	string	"big"或"default"
  isShowFirstLevelTitle	底部一级菜单是否显示中文	boolean	false

• 事件

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

4、CbimLeftMenu

左侧菜单栏组件

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

• 属性

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

• 事件

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

5、CbimRightToolbar

右侧工具条组件

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

• 属性

  属性	说明	类型	默认值
  menuConfig	菜单配置	Array	默认配置
  visible	菜单显隐	Boolean	true

• 事件

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

6、CbimToolbarItemTeleport

工具条传送门组件,用于将组件传送到指定的工具按钮位置

<cbim-toolbar-item-teleport></cbim-toolbar-item-teleport>

• 属性

  属性	说明	类型	默认值
  id	容器id	string	''

7、CbimAnnotationColorPicker

批注颜色选择器

<cbim-annotation-color-picker v-model:color="color"></cbim-annotation-color-picker>

• 属性

  属性	说明	类型	默认值
  color	颜色	string	'#ef875d'

• 事件

  事件名称	说明	返回结果
  change	颜色值改变时的事件	16进制色值如:'#ef875d'
  update:color	颜色值改变时的事件	16进制色值如:'#ef875d'

8、CbimComponentAttributesPanel

构件属性面板

<cbim-component-attributes-panel></cbim-component-attributes-panel>

• 属性

  属性	说明	类型	默认值
  addable	显示新增按钮	boolean	false
  extraData	平台新增数据	array	[]
  cellClassName	属性单元格的自定义class	string 或者 function (attr, colIndex, path /此节点及其所有父亲节点构成的数组 /) {...} 或者 Object	""
  tablePropertyCellClassName	表格类属性的单元格自定义class	string 或者 function (row, key, isTh / 是否表头 / ) {...} 或者 Object	""

extraData数据需要带id,格式如下：
const extraData = [
    {
        "name": "几何",
        "children": [
            {
		"id": 1,
                "name": "新增属性",
                "value": "sss"
            }
        ]
    },
    {
        "name": "新增类型",
	"id": 2
        "children": [
            {
		"id": 3
                "name": "新增属性",
                "value": "222"
            }
        ]

• 事件

  事件名称	说明	参数	返回结果
  add	新增属性事件	uuid: 构件的UUID Array0	-
  edit	编辑属性	data: 属性数据 ObjectparentType: 类型uuid: 构件uuid Array0
  delete	删除属性	data: 属性数据 ObjectparentType: 类型uuid: 构件uuid Array0
  callback	回调（返回属性type列表）	type: 返回类型data: 返回的数据
  close	关闭事件	-

<cbim-component-attributes-panel @add="handleAdd" @callback="handleCallback"></cbim-component-attributes-panel>
<script>
// ...
export default {
  setup() {
    // ...
    const handleAdd = (uuid) => {
      // 弹出新增属性窗口etc.
    }
    const typeList = ref([])
    const handleCallback = (data, type) => {
      if (type == 'attrTypeList') {
        typeList.value = data
      } else if (type == 'dataLoaded') {
        // 构件数据加载事件
      }
    }
    // ...
  }
}
</script>

9、CbimFloorSelect

楼层选择器

<cbim-floor-select @floor_change="handleFloorChange"/>

• 事件

  事件名称	说明	返回结果
  floor_change	楼层选择时的事件	{buildNo: "A1", height: "12.3", label: "5F"}

10、CbimModelNavigationMap

3维模型小地图

<cbim-model-navigation-map :width="300" :height="300"/>

• 属性

  属性	说明	类型	默认值
  width	长	number	-
  height	宽	number	-

11、CbimSettingPanel

设置面板

<cbim-setting-panel :tabList="tabList"/>

• 属性

  属性	说明	类型	默认值
  tabList	设置面板子页面配置	array

 tabList 是设置面板的子页面配置，里面每一项格式为: {
    name: string // 页签名称
    type: string // 页签对应的子组件名称
 } 
 原生提供这几种子组件：
 [{
    name: '基础设置',
    type: 'BaseSetting'
 }, {
     name: '显示设置',
     type: 'ShowSetting'
}, {
    name: '视角设置',
    type: 'ViewSetting'
}, {
    name: '相机参数',
    type: 'CameraSetting'
}, {
    name: '光线追踪',
    type: 'RayTracingSetting'
}, {
    name: '边缘滤波',
    type: 'EdgeFilterSetting'
}]

12、CbimAnnotationMark

批注图钉

<cbim-annotatioon-mark :params="{position: {left: 200, top: 200}, code: 10, color: '#f00',onClick: function (e) {}, style: {cursor: 'pointer'}}"/>

• 属性

  属性	说明	类型	默认值
  params	配置	Object

 params 是批注图钉的设置，里面每一项格式为: {
    position: {left: number; top: number;} // 图钉的绝对定位位置
    color: string // 图钉的填充色
    code?: string // 图钉的编号，可选
    onClick?: function // 图钉的点击事件，可选
    style?: object // 图钉的样式，可选
 } 

13、CbimComponentTreePanel

构件树/资源树面板

<cbim-component-tree-panel @callback="handleCallback" />

• 事件

  事件名称	说明	返回结果
  callback	回调事件	type: 返回类型data: 返回的数据

• 插槽

  插槽名称	说明
  treeNodeTitle	构件树节点名称后缀
  tabSuffix	面板tab区域后缀

<template>
    <cbim-component-tree-panel @callback="handleCallback" />
</template>
<script>
export default {
    setup() {
        const handleCallback = (type, data) => {
            if (type == 'componentTreeTabChange') {
                // 构件树tab切换
            } else if (type == 'componentTreeNodeLoaded') {
                // 构件树节点加载完成
            }
        }
        return {
            handleCallback
        }
    }
}
</script>