❤
npm
Sign UpSign In

cbim-render-ui

1.5.37 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i cbim-render-ui

Weekly Downloads

6

Version

1.5.37

License

ISC

Unpacked Size

1.83 MB

Total Files

6

Last publish

Collaborators

  • jimmylo
  • tianjian
Try on RunKit
Report malware