feat: BIM模型构件隐藏和着色
This commit is contained in:
kun
parent
222532953a
commit
606ef8f7d1
@ -8,9 +8,11 @@
|
||||
<div id="domId" style="width: 100%; height: 95vh"></div>
|
||||
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
|
||||
<script>
|
||||
let model3D;
|
||||
let viewer3D;
|
||||
let app;
|
||||
let modelState;
|
||||
const bimCallback = viewToken => {
|
||||
let viewer3D
|
||||
let app
|
||||
// let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
|
||||
let loaderConfig = new BimfaceSDKLoaderConfig()
|
||||
loaderConfig.viewToken = viewToken
|
||||
@ -22,6 +24,24 @@
|
||||
app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig)
|
||||
app.addView(viewToken)
|
||||
viewer3D = app.getViewer()
|
||||
// 监听添加view完成的事件
|
||||
viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
|
||||
// 调用viewer3D对象的Method，可以继续扩展功能
|
||||
// 从viewer3D对象中获取模型对象model3D
|
||||
model3D = viewer3D.getModel();
|
||||
// 获取模型状态
|
||||
modelState = viewer3D.getCurrentState();
|
||||
// 渲染3D模型
|
||||
viewer3D.render();
|
||||
});
|
||||
// 添加构件单击事件
|
||||
viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, (data) => {
|
||||
console.log(data)
|
||||
setTimeout(() => {
|
||||
// 往父级传递
|
||||
window.parent.postMessage({ msg: data.elementId })
|
||||
}, 200)
|
||||
});
|
||||
}
|
||||
|
||||
function failureCallback(error) {
|
||||
@ -29,14 +49,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('message', function(e) {
|
||||
window.addEventListener('message', async function(e) {
|
||||
// const modelId = e.data.modelId
|
||||
const data = e.data || {}
|
||||
console.log('eeeeeeeeeee',e)
|
||||
if (data.token) {
|
||||
// removeModel(modelId)
|
||||
bimCallback(data.token)
|
||||
await bimCallback(data.token)
|
||||
}
|
||||
if(data.hideArr && data.colorArr){
|
||||
console.log(data.hideArr)
|
||||
console.log(data.colorArr)
|
||||
setTimeout(() => {
|
||||
// 恢复模型状态
|
||||
viewer3D.setState(modelState);
|
||||
console.log(model3D)
|
||||
model3D.hideComponentsById(data.hideArr);
|
||||
data.colorArr.map(item => {
|
||||
model3D.overrideComponentsColorById([item.name], new Glodon.Web.Graphics.Color(item.color, 1));
|
||||
})
|
||||
viewer3D.render();
|
||||
}, 1000)
|
||||
}
|
||||
// console.log(e.data, '父级页面传来的数据')
|
||||
// setTimeout(() => {
|
||||
// window.parent.postMessage({ msg: 'hello' })
|
||||
|
||||
@ -51,6 +51,8 @@ export const deleteJlwUploadApi = data => get('/xmgl/bimface/deleteProjectBim',
|
||||
export const startJlwApi = data => get('/xmgl/bimface/updateEnabled', data); // 启用所对应的bim
|
||||
export const getJlwConfigApi = data => get('/xmgl/bimface/getConfigStatus', data); // 获取项目中bimface配置信息
|
||||
export const getJlwTokenApi = data => get('/xmgl/bimface/getViewTokenByFileId', data); // 通过文件标识获取ViewToken
|
||||
export const getJlwDetailsApi = data => get('/xmgl/bimface/getDetailsByFileIdAndProjectSn', data); // 通过文件标识获取详情(包括ViewToken)
|
||||
export const saveBimfaceConfig = data => post('/xmgl/bimface/edit', data); // 保存BIMFACE相关配置
|
||||
|
||||
|
||||
|
||||
|
||||
@ -82,7 +82,7 @@ if (process.env.NODE_ENV == 'development') {
|
||||
// axios.defaults.baseURL ='http://huli.zjzhiliao.com/jxjgdapi/' //金林湾测试线上
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45001/' //上海张江
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45011/' //上海优益（上海建工）
|
||||
axios.defaults.baseURL = 'http://192.168.34.221:30002/' //郭圣雄本地
|
||||
axios.defaults.baseURL = 'http://192.168.34.221:28888/' //郭圣雄本地
|
||||
// axios.defaults.baseURL ='http://192.168.34.221:30012/' //郭圣雄本地
|
||||
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
|
||||
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
|
||||
|
||||
@ -104,8 +104,8 @@ export default new Vuex.Store({
|
||||
// FILEURL: 'http://118.121.198.147:23232/image/',//四川成润（正式）
|
||||
// UPLOADURL: 'http://121.196.214.246/api/upload/image',//金林湾
|
||||
// FILEURL: 'http://121.196.214.246/api/image/',//金林湾
|
||||
UPLOADURL: 'http://192.168.34.221:30002/upload/image',//郭圣雄本地
|
||||
FILEURL: 'http://192.168.34.221:30002/image/',//郭圣雄本地
|
||||
UPLOADURL: 'http://192.168.34.221:28888/upload/image',//郭圣雄本地
|
||||
FILEURL: 'http://192.168.34.221:28888/image/',//郭圣雄本地
|
||||
// UPLOADURL: 'http://101.43.164.214:45011/upload/image',//上海优益
|
||||
// FILEURL: 'http://101.43.164.214:45011/image/',//上海优益
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
:class="{ active: activeBuildIndex == index }"
|
||||
@click="changeBuildFn(item, index)"
|
||||
>
|
||||
<div>{{ item.modelName }}</div>
|
||||
<div :title="item.modelName">{{ item.modelName }}</div>
|
||||
<div class="flex2">
|
||||
<el-switch
|
||||
v-model="item.isEnable"
|
||||
@ -563,7 +563,12 @@ export default {
|
||||
line-height: 43px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
>div:nth-child(1){
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.active {
|
||||
background-color: rgba(81, 129, 246, 0.1);
|
||||
|
||||
|
||||
@ -1,11 +1,46 @@
|
||||
<template>
|
||||
<div class="fullHeight">
|
||||
<iframe :src="url" frameborder="0" width="100%" height="100%" id="iframe" @load="load"></iframe>
|
||||
<div class="bimModel-operate">
|
||||
<div class="select-operate">
|
||||
<span>模型构件操作：</span>
|
||||
<el-select v-model="formData.type" placeholder="请选择" size="small">
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="data-show">
|
||||
<span>选中的数据值：</span>
|
||||
<div class="selected-box" v-if="formData.type == 1">
|
||||
<div v-for="(item,index) in selectedHideList" :key="index">
|
||||
<span>{{item}}</span>
|
||||
<i class="el-icon-close" @click="deleteSelected(1,index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selected-box" v-if="formData.type == 2">
|
||||
<div v-for="(item,index) in selectedColorList" :key="index">
|
||||
<span>{{item.name}}：{{ item.color }}</span>
|
||||
<i class="el-icon-close" @click="deleteSelected(2,index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<el-color-picker v-model="formData.color" v-if="formData.type == 2" style="margin-right: 15px;"></el-color-picker>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="saveSelected"
|
||||
>保存</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<iframe :src="url" frameborder="0" width="100%" height="92%" id="iframe" @load="load"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getJlwTokenApi,projectJlwBimListApi } from "@/assets/js/api/project";
|
||||
import { getJlwDetailsApi,projectJlwBimListApi, saveBimfaceConfig } from "@/assets/js/api/project";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -13,6 +48,17 @@ export default {
|
||||
model:1,
|
||||
url:'',
|
||||
iframe:null,
|
||||
formData: {
|
||||
type: 1,
|
||||
color: ""
|
||||
},
|
||||
typeOptions: [
|
||||
{label: "隐藏", value: 1},
|
||||
{label: "着色", value: 2},
|
||||
],
|
||||
selectedHideList: [],
|
||||
selectedColorList: [],
|
||||
resData: {}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@ -49,12 +95,48 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 保存选中数据
|
||||
saveSelected(){
|
||||
let that = this
|
||||
saveBimfaceConfig({ id: this.resData.id,hiddenComponentId:this.selectedHideList.join(','),componentColorJson: JSON.stringify(this.selectedColorList) }).then(res => {
|
||||
if(res.code == 200){
|
||||
that.iframe.contentWindow.postMessage({ hideArr: this.selectedHideList,colorArr: this.selectedColorList })
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除选中数据
|
||||
deleteSelected(type,index) {
|
||||
if(type == 1){
|
||||
this.selectedHideList.splice(index,1)
|
||||
} else if(type == 2){
|
||||
this.selectedColorList.splice(index,1)
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
load() {
|
||||
// console.log(this.iframe,'iframe')
|
||||
this.iframe.contentWindow.postMessage('Message from parent：load complate！')
|
||||
this.iframe.contentWindow.postMessage("我进来啦")
|
||||
},
|
||||
getIframeMessage(e) {
|
||||
// console.log('Message from iframe：', e.data)
|
||||
console.log('Message from iframe：', e.data.msg)
|
||||
if(this.formData.type == 1) {
|
||||
let dataIndex = null;
|
||||
dataIndex = this.selectedHideList.find(item => {
|
||||
return item == e.data.msg
|
||||
})
|
||||
if(!dataIndex){
|
||||
this.selectedHideList.push(e.data.msg)
|
||||
}
|
||||
} else {
|
||||
let dataIndex = null;
|
||||
dataIndex = this.selectedHideList.find(item => {
|
||||
return item.name == e.data.msg
|
||||
})
|
||||
if(!dataIndex){
|
||||
this.selectedColorList.push({name: e.data.msg, color: this.formData.color})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
getModelList() {
|
||||
projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||
@ -68,9 +150,13 @@ export default {
|
||||
})
|
||||
},
|
||||
getToken(fileId) {
|
||||
getJlwTokenApi({ fileId, projectSn: this.$store.state.projectSn }).then(res => {
|
||||
const token = res.result
|
||||
this.iframe.contentWindow.postMessage({ token })
|
||||
getJlwDetailsApi({ fileId, projectSn: this.$store.state.projectSn }).then(res => {
|
||||
console.log(res)
|
||||
this.resData = res.result;
|
||||
const token = res.result.viewToken;
|
||||
this.selectedHideList = this.resData.hiddenComponentId.split(',');
|
||||
this.selectedColorList = JSON.parse(this.resData.componentColorJson);
|
||||
this.iframe.contentWindow.postMessage({ token, hideArr: this.selectedHideList,colorArr: this.selectedColorList })
|
||||
})
|
||||
}
|
||||
// getToken() {
|
||||
@ -92,5 +178,44 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped lang="scss">
|
||||
@mixin flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bimModel-operate{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 5px;
|
||||
.select-operate{
|
||||
@include flex;
|
||||
}
|
||||
.data-show{
|
||||
width: max-content;
|
||||
@include flex;
|
||||
margin-top: 10px;
|
||||
.selected-box{
|
||||
min-width: 208px;
|
||||
min-height: 32px;
|
||||
border: 1px solid #c0c4cc;
|
||||
border-radius: 4px;
|
||||
@include flex;
|
||||
padding-left: 6px;
|
||||
margin-right: 15px;
|
||||
>div{
|
||||
@include flex;
|
||||
background-color: #f4f4f5;
|
||||
padding: 3px 5px;
|
||||
margin: 3px 6px 3px 0;
|
||||
span{
|
||||
color: #909399;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.el-icon-close{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user