水库大坝三维模型开发bim篇

效果图

开发过程

• 使用了bimface 插件
• 上传做好rvt模型到bimface
• 工程引入bimface相关的插件代码
• 加载模型
• 自定义目录树
• 定位构件
• 闪烁构件
• 展示构件信息

代码 技术交流加V:bloxed
appKey 和appSecret 换成自己的就行

<template>
    <div class="box-bim w100" ref="bimBoxRef">
        <div class="bim-tree">
            <el-card class="custom-card"  header="目录树">
            <el-tree
                class="app-tree"
                :data="treeData"
                :props="defaultProps"
                autoExpandParent
                @node-click="handleNodeClick"
                />
            </el-card>
        </div>
        <div class="toolTip" v-if="toolTipVisible">
            <div class="tooltip-item">仪器名称：{{ itemData.stnm }}</div>
            <div class="tooltip-item">监测数据：{{ itemData.dataValue }}</div>
            <div class="tooltip-item">数据时间：{{ itemData.dataTime }}</div>
        </div>
        <div id="bimId" class="h100 w100"></div>
    </div>
</template>
<script setup lang="ts">

import {getTreeData,getTooltipData} from "../index.api"


const treeData = ref<any[]>([])
const props = defineProps({
    fileId:{
        type:Number,
        default:10000894857430
    },
    damId:{
        type:Number,
        default:1
    },
    epcId:{
        type:String,
        default:""
    }
})
let viewer3D:any;
let app:any;
let loaderConfig:any = new BimfaceSDKLoaderConfig();
let viewToken= ref<any>('');
loaderConfig.viewToken = "";
const bimBoxRef = ref<any>()
import axios from 'axios';
const appKey  = 'xxxxxxxxxx';
const appSecret  = 'xxxxxxxxxxxxxxxx';
const inputText =  appKey + ":" + appSecret
const encodedText = ref<any>('')
const defaultProps = {
  children: 'child',
  label: 'name',
}
const tooltipData = ref<any>([])
const itemData = ref<any>({
    stnm: "B03",
    dataValue: "0.5mm",
    dataTime: "2024-12-22 12:00:00"
})
const toolTipVisible = ref(false)
const encodeText = () => {
    try {
        // If the input text contains only ASCII characters, this will work fine
        encodedText.value = btoa(inputText);
      } catch (e) {
        // If the input text contains non-ASCII characters, you might need a polyfill or a custom function
        // Here's a simple custom function using TextEncoder and a Blob to handle UTF-8 strings
        const encoder = new TextEncoder();
        const uint8Array = encoder.encode(inputText);
        let binaryString:any = '';
        let len = uint8Array.byteLength;
        for (let i = 0; i < len; i++) {
          binaryString += String.fromCharCode(uint8Array[i]);
        }
        encodedText.value = btoa(binaryString); // This will now work with UTF-8 strings
      }
}
const getToken = async () =>{
    const res = await axios.post('/bim/oauth2/token',{
        
    },{
        headers:{
            'Content-Type': 'application/json',
            'Authorization': 'Basic ' + encodedText.value
        }
    });
    const  accessToken = res.data.data.token
    const res1 = await axios.get('/bim/view/token',{
        headers:{
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + accessToken
        },
        params:{
            fileId:props.fileId
        }
    });
    viewToken.value = res1.data.data;
    loaderConfig.viewToken = viewToken.value;
    initBim();
}
const initBim = () =>{
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
    function successCallback(viewMetaData:any) {
        let domShow = document.getElementById('bimId');
        let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
            webAppConfig.domElement = domShow;  
            webAppConfig.Toolbars = ["MainToolbar"];    
        app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);    
        app.addView(viewToken.value);
        viewer3D = app.getViewer();  
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ToolbarHomeClick, function (event) {
            toolTipVisible.value = false;
        });
    };
    
    function failureCallback(error) {
        console.log(error);
    };
    
    
}
const getItemTreeData = async()=>{
    const res = await getTreeData({
        treeType:"ITEM",
        damId:props.damId,
        epcId:props.epcId
    })
    treeData.value = res;
    getItemData();
}
const getItemData = async()=>{
    const res = await getTooltipData({
        damId:props.damId,
        epcId:props.epcId
    })
    tooltipData.value = res;

}
const handleNodeClick =(data) =>{
    if(data.elementId){
        viewer3D.getModel().addSelectedComponentsById([data.elementId]);
         // 定位到选中的构件
         viewer3D.getModel().zoomToSelectedComponents();
          // 清除构件选中状态
          viewer3D.getModel().clearSelectedComponents();
        // ************************** 构件闪烁 **************************
        let blinkColor = new Glodon.Web.Graphics.Color("#f30b49", 0.9);
        // 打开构件强调开关
        viewer3D.enableBlinkComponents(true);
        // 给需要报警的构件添加强调状态
        viewer3D.getModel().addBlinkComponentsById([data.elementId]);
        // 设置强调状态下的颜色
        viewer3D.getModel().setBlinkColor(blinkColor);
        // 设置强调状态下的频率
        viewer3D.getModel().setBlinkIntervalTime(200);

        //添加弹窗显示数据
        // itemData.value = tooltipData.value.find((item)=>{
        //     return item.elementId === data.elementId
        // })
        setTimeout(()=>{
            toolTipVisible.value = true;
        },1000)
    }   
}
//销毁模型，同时切换模型
function changeview(){
    viewer3D.removeView(viewToken);
        viewer3D.render();
    }
onMounted(()=>{
    encodeText();
    getToken();
    getItemTreeData();
})
watch(()=>props.fileId,()=>{
    getToken();
})
</script>
<style scoped lang="scss">
.box-bim{
    height: calc(100% - 60px);
    position: relative;
}
.bim-tree{
    position: absolute;
    top: -1px;
    left: 0;
    bottom: 0;
    width: 180px;
    height: 400px;
    z-index: 999;
}
.toolTip{
    position: absolute;
    top: 20%;
    left: 55%;
    bottom: 0;
    height: 100px;
    width: 250px;
    z-index: 999;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(17,17,17,0.88);
    .tooltip-item{
        height: 30px;
        line-height: 28px;
    }
}
</style>