Pit-imodel-ui-test NPM

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	批注保存截图事件