BIM-UI-Component 项目文档

1. 项目概述

BIM-UI-Component 是一个基于 Vue 3 + TypeScript 开发的 BIM（建筑信息模型）前端组件库，提供了模型加载、构件管理、测量、剖切等核心功能，可用于建筑模型的可视化和交互操作。

2. 目录结构

src/
├── api/              # API 接口定义
│   ├── customize/    # 自定义构件相关接口
│   ├── sadiAuth/     # 授权码相关接口
│   ├── sadiCore/     # 核心功能相关接口
│   ├── sadiShare/    # 分享码相关接口
│   └── index.ts      # API 接口导出
├── assets/           # 静态资源
│   ├── fontIcon/     # 字体图标
│   └── modulesEdit/  # 模块编辑相关图片
├── components/       # 功能组件
│   ├── Core/         # 核心功能组件
│   │   └── measure/  # 测量功能
│   ├── CutModel/     # 模型剖切功能
│   │   ├── index.vue # 剖切主组件
│   │   └── heightSetModel.vue # 标高设置组件
│   ├── Freeze/       # 冻结构件功能
│   ├── InitModules/  # 模型初始化功能
│   ├── Isolate/      # 构件隔离功能
│   ├── Positioning/  # 构件定位功能
│   ├── allShow/      # 构件全部显示功能
│   ├── classTree/    # 构件分类树功能
│   ├── hideComponents/ # 隐藏构件功能
│   ├── lookInfo/     # 查看构件信息功能
│   │   ├── index.vue # 查看信息主组件
│   │   └── viewInfoBox.vue # 信息展示框
│   └── BimSvgIcon.vue # SVG 图标组件
├── modules/          # 模型模块
│   └── model.vue     # 模型加载模块
├── modulesAuth/      # 授权码模型模块
│   └── index.vue     # 授权码模型加载
├── modulesShare/     # 分享码模型模块
│   └── index.vue     # 分享码模型加载
├── style/            # 样式文件
│   └── index.scss    # 主样式文件
├── utils/            # 工具函数
│   ├── fbim.ts       # BIM 相关工具
│   ├── request.ts    # 请求工具
│   └── tool.ts       # 通用工具
└── index.ts          # 项目入口文件

3. 核心模块

3.1 模型加载模块 (Model)

功能：加载和初始化 BIM 模型，支持通过凭证或直接 URL 加载模型。

参数：

• modelParam：模型获取凭证，包含 projectId、sadiId、token
• directModelParam：直接加载模型参数，包含 bimUrl、modelSize、token
• serverUrl：模型请求地址
• sceneContextParam：模型场景参数
• modelId：模型实例的 ID

事件：

• modelLoaded：模型加载完成时触发，返回模型实例

3.2 授权码模型模块 (ModuleAuth)

功能：通过授权码加载模型。

3.3 分享码模型模块 (ModuleShare)

功能：通过分享码加载模型。

4. 功能组件

4.1 构件分类树 (ClassTree)

功能：展示构件分类树，支持显示/隐藏构件、定位构件、选择构件。

主要功能：

• 获取构件分类树数据（支持凭证、授权码）
• 切换构件显示/隐藏状态（支持原生构件和自定义构件）
• 定位构件到视图中心
• 选择构件（支持多选和勾选）
• 支持分享码模式（无构件树接口）

参数说明：

• 无直接参数，组件通过内部状态管理

4.2 查看构件信息 (LookInfo)

功能：查看选中构件的详细属性信息。

主要功能：

• 获取最后选中构件的详细信息
• 区分原生构件和自定义构件，调用不同的接口
• 在弹窗中展示构件信息

使用要求：

• 需要先选择构件

4.3 构件全部显示 (AllShow)

功能：恢复显示所有被隐藏的构件。

主要功能：

• 恢复剖切框
• 显示所有构件
• 清空隐藏构件索引列表
• 清空隐藏自定义构件ID列表
• 清空选中构件列表

4.4 隐藏构件 (HideComponents)

功能：隐藏当前选中的构件。

主要功能：

• 隐藏选中的构件
• 区分处理主模型构件和自定义构件
• 记录隐藏构件的索引和ID
• 取消构件高亮

使用要求：

• 需要先选择构件

4.5 构件隔离 (Isolate)

功能：隔离显示选中的构件，隐藏其他未选中的构件。

主要功能：

• 设置隔离高亮状态
• 清空高亮元素
• 隐藏空间

使用要求：

• 需要先选择构件

4.6 测量模块 (Measure)

功能：测量模型中的距离、面积等（基础组件，功能由BIM核心实现）。

4.7 模型剖切 (CutModel)

功能：对模型进行剖切操作，支持多种剖切方式。

子功能：

4.7.1 面剖切 (FaceSectioning)

• 功能：通过选择面进行剖切
• 操作：选择一个面进行剖切
• 取消：关闭面剖切状态，清除高亮，隐藏空间

4.7.2 正交剖切 (OrthogonalSectioning)

• 功能：进行正交剖切
• 操作：切换正交剖切状态
• 同步：同步剖切框显示状态

4.7.3 标高设置 (HeightSetModel)

• 功能：设置剖切的顶面标高和底面标高
• 参数：
  • height：初始高度值（必填）
  • type：标高类型，'top'（顶面）或 'bottom'（底面）（必填）
  • limitValue：限制值（可选，默认为0）
• 验证：
  • 顶面标高不能小于限制值
  • 顶面标高不能大于模型高度
  • 底面标高不能大于限制值
  • 底面标高不能小于模型高度
• 事件：
  • setFormHeight：设置完成时触发，返回（标高值*1000, 类型）

4.8 定位构件 (Positioning)

功能：定位视图到选中的构件位置。

主要功能：

• 获取选中的构件
• 将视图定位到构件位置

使用要求：

• 需要先选择构件

4.9 冻结构件 (Freeze)

功能：冻结构件，防止其被编辑（待完善）。

4.10 初始化模型 (InitModules)

功能：初始化模型相关模块。

4.11 SVG 图标组件 (BimSvgIcon)

功能：提供 SVG 图标显示功能。

参数：

• type：图标类型（svg、svgTip、iconTip）
• name：图标名称
• size：图标大小
• svgSize：SVG 图标大小
• color：图标颜色
• tips：图标提示信息
• disabled：是否禁用

5. 工具函数

5.1 get3DPosition

功能：根据屏幕坐标获取 3D 坐标。

5.2 coordinateConvert

功能：坐标转换。

5.3 其他工具函数 (tool.ts)

功能：提供通用工具函数，如树结构扁平化等。

5.4 BIM相关工具 (fbim.ts)

功能：提供BIM模型操作的常用工具：

• getBimInstance()：获取BIM实例
• getElementDetail()：获取构件详细信息
• sadiBimData：BIM数据存储
• getFacePosition：面位置获取工具

6. API 接口

项目使用了多个 API 接口，主要包括：

• 模型下载接口
• 构件分类树获取接口
• 自定义构件相关接口
• 隐藏构件获取接口
• 授权码相关接口
• 分享码相关接口

7. 使用方法

7.1 安装

npm install bim-ui-component

7.2 引入样式

使用组件库前，需要引入样式文件：

import 'bim-ui-component/dist/bim-ui-component.css';

7.3 全局注册

import BimUIComponent from 'bim-ui-component';
import 'bim-ui-component/dist/bim-ui-component.css';
app.use(BimUIComponent);

7.4 局部导入

<template>
  <div>
    <Model :modelParam="modelParam" @modelLoaded="handleModelLoaded" />
    <div style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
      <ClassTree />
      <LookInfo />
      <HideComponents />
      <Isolate />
      <Positioning />
      <AllShow />
      <CutModel />
    </div>
  </div>
</template>

<script setup>
import { Model, ClassTree, LookInfo, HideComponents, Isolate, Positioning, AllShow, CutModel } from 'bim-ui-component';
import 'bim-ui-component/dist/bim-ui-component.css';

const modelParam = {
  projectId: 'projectId',
  sadiId: 'sadiId',
  token: 'token'
};

const handleModelLoaded = (modelInstance) => {
  console.log('Model loaded:', modelInstance);
};
</script>

8. 配置说明

8.1 模型加载配置

• 通过凭证加载：提供 modelParam 对象，包含 projectId、sadiId、token
• 直接加载：提供 directModelParam 对象，包含 bimUrl、modelSize、token

8.2 场景参数配置

通过 sceneContextParam 配置模型场景参数，如边缘颜色、宽度等。

9. 注意事项

• 组件依赖 Element Plus，使用前需确保已安装
• 模型加载需要有效的凭证或 URL
• 部分功能需要后端 API 支持
• 使用构件选择相关功能时，需要先选择构件
• 分享码模式下部分功能不可用（如构件分类树）

10. 版本信息

当前版本：0.0.63

11. 开发与构建

11.1 安装依赖

npm install

11.2 构建

npm run build

构建产物将输出到 dist 目录，包含：

• index.es.js：ES 模块格式
• index.umd.js：UMD 格式
• bim-ui-component.css：样式文件
• 类型声明文件

12. 组件完整导出列表

项目导出的所有组件和功能包括：

核心模块：

• Model
• ModuleAuth
• ModuleShare

功能组件：

• ClassTree（构件分类树）
• LookInfo（查看构件信息）
• AllShow（构件全部显示）
• HideComponents（隐藏构件）
• Isolate（构件隔离）
• Measure（测量功能）
• CutModel（模型剖切）
• Positioning（定位构件）
• Freeze（冻结构件）
• InitModules（初始化模型）
• BimSvgIcon（SVG图标）

插件安装：

• install 函数（全局注册所有组件）

此文档提供了 BIM-UI-Component 项目的基本信息和使用方法，详细的 API 文档和示例请参考项目代码和注释。