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 Array[0]| - | | edit | 编辑属性 | data: 属性数据 ObjectparentType: 类型uuid: 构件uuid Array[0] | | delete | 删除属性 | data: 属性数据 ObjectparentType: 类型uuid: 构件uuid Array[0] | | 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>