pit-bimwin-ui/README.md

湖南创智艾泰克科技有限公司

# pit-bimwin-ui

无需使用专业设计软件，用户可以在 Web 浏览器端、移动客户端中查看、操作图纸模型。基于轻量化引擎可以开发更加丰富、更有价值的 BIM 应用。

[更新日志](./CHANGELOG.zh-CN.md)

## 安装

### 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"
    :headers="headers"></pit-bim-win-ui>
</template>

<script>
export default {
  data() {
    return {
      options: {
        fileId: ["93d0f57ccc0140c99835e0af35850e90"],
        url: "http://172.18.1.72:9983/",
      },
      headers: {
        token: "0e8d286ecfa84f01a97c7733b8aeb4a2dt3xrlvrghl",
        loginMark: "6Iqx6Ze05LiA5aO26YWS77yM54us6YWM5peg55u45Lqy",
      },
    };
  },
};
</script>
```

#### 属性

| 参数名         | 类型   | 描述                   | 参数 |
| -------------- | ------ | ---------------------- | ---- |
| options        | object | 具体请看 options 下表  | -    |
| headers        | object | 具体请看 headers 下表  | -    |
| visibleToolbar | array  | 需要隐藏的底部功能按钮 | -    |

#### options 属性字段说明

| 参数名 | 类型   | 描述     | 参数 |
| ------ | ------ | -------- | ---- |
| url    | string | 主机地址 | -    |
| fileId | string | 模型 id  |      |

#### headers 属性字段说明

| 参数名    | 类型   | 描述 | 参数 |
| --------- | ------ | ---- | ---- |
| token     | string | -    | -    |
| loginMark | string | -    | -    |

#### visibleToolbar id 说明

| id                     | 描述             | 分组   | 图标/图片 |
| ---------------------- | ---------------- | ------ | --------- |
| mainPerspective        | 主视角           | group1 | icon      |
| currentMainPerspective | 设置当前为主视图 | group1 | img       |
| resetMainPerspective   | 重置主视图       | group1 | img       |
| directoryTree          | 目录树           | group1 | icon      |
| fullScreen             | 全屏             | group1 | img       |
| measurement            | 测量             | group2 | icon      |
| section                | 剖切             | group2 | img       |
| axialSection           | 轴向剖切         | group2 | img       |
| roamingMode            | 漫游模式         | group2 | img       |
| componentDetails       | 构件属性         | group2 | img       |
| layer                  | 图层             | group2 | icon      |
| annotation             | 批注             | group2 | img       |
| label                  | 标签             | group2 | img       |
| setUp                  | 设置             | group3 | icon      |
| minimap                | 小地图           | group3 | img       |
| basicInformation       | 基本信息         | group3 | icon      |

#### 事件

| 事件名    | 返回参数 | 描述             |
| --------- | -------- | ---------------- |
| loadModel | platform | 模型加载成功回调 |