水库大坝三维模型开发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-treeclass="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 fineencodedText.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 stringsconst 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.tokenconst 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>