# cbim-render-ui

> 渲染端UI组件

Latest version **1.5.37** (published 2024-06-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install cbim-render-ui
pnpm add cbim-render-ui
yarn add cbim-render-ui
bun add cbim-render-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.37 |
| Published | 2024-06-13 |
| First published | 2022-11-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+25 in 3 direct dependencies) |
| Install scripts | no |
| Author | JimmyLo |
| Maintainers | jimmylo, tianjian |
| Keywords | cbim, 渲染, 组件, UI |

## Links

- npm: https://www.npmjs.com/package/cbim-render-ui
- npm.io page: https://npm.io/package/cbim-render-ui

## Dependencies (8)

- [vuex](https://npm.io/package/vuex.md) ^4.0.2
- [axios](https://npm.io/package/axios.md) ^0.26.1
- [echarts](https://npm.io/package/echarts.md) ^5.3.3
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.2
- [element-plus](https://npm.io/package/element-plus.md) 2.2.12
- [cbim-render-sdk](https://npm.io/package/cbim-render-sdk.md) ^1.5.85
- [vue-video-player](https://npm.io/package/vue-video-player.md) ^5.0.2
- [cbim-render-viewcube](https://npm.io/package/cbim-render-viewcube.md) ^1.0.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.5.37 (latest) — 2024-06-13
- 1.5.28-test (1.5.28.2) — 2023-11-29
- 1.5.23-patch2 (v1.5.23.3) — 2023-11-03
- 1.5.23-patch (1.5.23.2) — 2023-10-19
- 1.0.19-patch (1.0.19.2) — 2023-06-14
- 1.0.18-patch (1.0.18.2) — 2023-06-14
- 1.5.36 — 2024-06-13
- 1.5.35 — 2024-06-13
- 1.5.34 — 2024-05-08
- 1.5.33 — 2024-02-29
- 1.5.32 — 2024-02-02
- 1.5.31 — 2024-01-29
- 1.5.30 — 2023-12-28
- 1.5.29 — 2023-12-14
- 1.5.28 — 2023-11-28
- … 31 more at https://npm.io/package/cbim-render-ui/versions

## README

## CBIM 渲染引擎组件

### 引用方式
```javascript
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')
```
### 组件使用
```vue
<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
整体布局组件
```vue
<cbim-model-layer>
    <template #mainLayer></template>
    <template #menuLayer></template>
    <template #toolLayer></template>
</cbim-model-layer>
```
* 插槽

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

#### 2、CbimModel
模型显示组件
```vue
<cbim-model :model-id="1234"></cbim-model>
```
* 属性

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

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


#### 3、CbimToolbar
底部工具条组件
```vue
<cbim-toolbar></cbim-toolbar>
```
* 属性

  | 属性 | 说明 | 类型 | 默认值 |
  | :---: | :--- |:---:|:---|
  | menuConfig | 菜单配置 | Array | [默认配置](http://ren.cbim.org.cn/static/lib/cbim_render_web/toolbar.json) |
  | visible | 菜单显隐 | Boolean | true |
  | size | 底部菜单尺寸 | string | "big"或"default" |
  | isShowFirstLevelTitle | 底部一级菜单是否显示中文 | boolean | false |

* 事件

  | 事件名称 | 说明 | 返回结果 |
  | :---: | :--- | :--- |
  | callback | 菜单关闭/开启时回调 | MenuObject |
#### 4、CbimLeftMenu
左侧菜单栏组件
```vue
<cbim-left-menu></cbim-left-menu>
```
* 属性

  | 属性 | 说明 | 类型 | 默认值 |
  | :---: | :--- | :---: |:--- |
  | menuConfig | 菜单配置 | Object | [默认配置](http://ren.cbim.org.cn/) |

* 事件

  | 事件名称 | 说明 | 返回结果 |
  | :---: | :--- | :--- |
  | callback | 菜单关闭/开启时回调 | MenuObject |
#### 5、CbimRightToolbar
右侧工具条组件
```vue
<cbim-right-toolbar></cbim-right-toolbar>
```
* 属性

  | 属性 | 说明 | 类型 | 默认值 |
  | :---: | :--- | :---: | :--- |
  | menuConfig | 菜单配置 | Array | [默认配置](http://ren.cbim.org.cn/static/lib/cbim_render_web/rightToolbar.json) |
  | visible | 菜单显隐 | Boolean | true |
* 事件

  | 事件名称 | 说明 | 返回结果 |
  | :---: | :--- | :--- |
  | callback | 菜单关闭/开启时回调 | MenuObject |
#### 6、CbimToolbarItemTeleport
工具条传送门组件,用于将组件传送到指定的工具按钮位置
```vue
<cbim-toolbar-item-teleport></cbim-toolbar-item-teleport>
```
* 属性

  | 属性 | 说明 | 类型 | 默认值 |
  | :---: | :--- | :---: | :--- |
  | id | 容器id | string | '' |
#### 7、CbimAnnotationColorPicker
批注颜色选择器
```vue
<cbim-annotation-color-picker v-model:color="color"></cbim-annotation-color-picker>
```
* 属性

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

* 事件

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

#### 8、CbimComponentAttributesPanel
构件属性面板
```vue
<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<br>parentType: 类型<br>uuid: 构件uuid Array[0] |
  | delete | 删除属性 | data: 属性数据 Object<br>parentType: 类型<br>uuid: 构件uuid Array[0] |
  | callback | 回调（返回属性type列表） | type: 返回类型<br>data: 返回的数据 |
  | close | 关闭事件 | - |
```vue
<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
楼层选择器
```vue
<cbim-floor-select @floor_change="handleFloorChange"/>
```
* 事件

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

#### 10、CbimModelNavigationMap
3维模型小地图
```vue
<cbim-model-navigation-map :width="300" :height="300"/>
```
* 属性

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

#### 11、CbimSettingPanel
设置面板
```vue
<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
批注图钉
```vue
<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
构件树/资源树面板
```vue
<cbim-component-tree-panel @callback="handleCallback" />
```
* 事件

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

* 插槽

  | 插槽名称 | 说明 |
  | :---: | :--- |
  | treeNodeTitle | 构件树节点名称后缀 |
  | tabSuffix | 面板tab区域后缀 |
```vue
<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>
```

---
_Source: https://npm.io/package/cbim-render-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._