pit-bimwin-ui
更新日志
2023-05-20 版本:0.1.795
更新内容
- 功能按钮的优化
- 新增事件@onToolChange="onToolChange";工具切换时触发该事件;参数(type:事件类型, platform: 模型实例化对象, toolbarMenuList: 所有操作按钮的集合)
2023-05-20 版本:0.1.794
更新内容
- 暴露版本号和name
介绍
无需使用专业设计软件,用户可以在 Web 浏览器端、移动客户端中查看、操作图纸模型。基于轻量化引擎可以开发更加丰富、更有价值的 BIM 应用。
安装
npm 安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i pit-bimwim-ui
快速上手
完整引入
在 main.js 中写入以下内容
import Vue from "vue";
import PitBimWinUi from "pit-bimwin-ui";
import "pit-bimwin-ui/lib/PIT.css";
Vue.use(PitBimWinUi);
pit-bim-win-ui 组件
加载一个模型及相关的配置
<template>
<pit-bim-win-ui
ref="pitBimWinUi"
:options="options"
></pit-bim-win-ui>
</template>
<script>
export default {
data() {
return {
options: {
url: "http://172.18.1.72:9983/",
},
};
},
};
</script>
属性
参数名 | 类型 | 描述 | 参数 |
---|---|---|---|
options | object | 具体请看 options 下表 | - |
hiddenToolbar | array | 需要隐藏的底部功能按钮 | - |
customToolbar | Toolbar[] | 自定义按钮 | - |
dialogStyle | Object | 自定义弹窗样式;如:dialogStyle="{ directoryTree: { top: '10px' }, } directoryTree是弹窗的id与按钮id一致directoryTree/componentDetails/measurement | - |
Toolbar属性字段说明
参数名 | 类型 | 描述 | 示例 |
---|---|---|---|
grouping | string | 指定按钮在第几组 | 'group2' |
offset | number | 按钮在当前组往右偏移多少个 | 2 |
id | any | 按钮的唯一标识 | 'xxx' |
type | 'icon'、'img'、'text' | 按钮的类型:icon时class必填,img时imgPath与imgHoverPath必填,text时title必填 | 'el-icon-plus' |
title | string | 按钮展示的文字和toolTip,type为text,该项必填 | title: '按钮' |
imgHoverPath | string、base64 | type为img,该项必填,按钮选中时展示的图片 | - |
imgPath | string、base64 | type为img,该项必填,按钮未选中时展示的图片 | - |
isShow | boolean | 控制按钮是否显示 | - |
class | string | 按钮的class样式类名 | - |
visible | boolean | 按钮的是否选中状态 | - |
callback | function | 按钮点击时触发的方法 | - |
options 属性字段说明
参数名 | 类型 | 描述 | 参数 |
---|---|---|---|
url | string | iframe的src | - |
hiddenToolbar id 说明
id | 描述 | 分组 | 图标/图片 |
---|---|---|---|
fitView | 窗口自适应 | group1 | icon |
PanViewTool | 平移 | group1 | img |
RotateViewTool | 旋转 | group1 | img |
WindowAreaTool | 框选放大 | group1 | icon |
mainPerspective | 主视角 | group2 | icon |
currentMainPerspective | 设置当前为主视图 | group2 | img |
resetMainPerspective | 重置主视图 | group2 | img |
directoryTree | 目录树 | group2 | img |
fullScreen | 全屏 | group2 | img |
measurement | 测量 | group2 | icon |
section | 剖切 | group2 | img |
axialSection | 轴向剖切 | group2 | img |
WalkViewTool | 漫游模式 | group3 | icon |
componentDetails | 构件属性 | group3 | img |
annotation | 批注 | group3 | icon |
basicInformation | 基本信息 | group3 | icon |
test | 隐藏选中构件/显示所有构件/隔离选中构件 | group3 | icon |
事件
platform: connection.promise.then((platform))
事件名 | 返回参数 | 描述 |
---|---|---|
loadModel | platform、list(所有模型) | 模型加载成功回调 |
onModelLoaded | platform | 模型加载成功回调 |
onPropertyLoaded | platform | 模型加载成功回调 |
onPickPoint | platform/info(被点击的构建详情) | 鼠标左键点击事件 |
onToolChange | toolName、platform、toolbarMenuList | 工具切换触发事件 |
annotationSaveImage | image(base64), platform | 批注保存截图事件 |