# 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 打包工具配合使用。

```sh
npm i pit-bimwim-ui
```

## 快速上手

### 完整引入

在 main.js 中写入以下内容

```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 组件

加载一个模型及相关的配置

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