pit-bimwin-ui

更新日志

2023-05-20 版本：0.1.795

更新内容

1. 功能按钮的优化
2. 新增事件@onToolChange="onToolChange";工具切换时触发该事件；参数(type:事件类型, platform: 模型实例化对象, toolbarMenuList: 所有操作按钮的集合)

2023-05-20 版本：0.1.794

更新内容

1. 暴露版本号和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 | 批注保存截图事件 |