fix: 解决冲突
This commit is contained in:
commit
45810bde91
@ -6,42 +6,93 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="domId" style="width: 100%; height: 95vh"></div>
|
<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
|
||||||
|
src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
|
||||||
|
charset="utf-8"
|
||||||
|
></script>
|
||||||
<script>
|
<script>
|
||||||
const bimCallback = viewToken => {
|
let model3D;
|
||||||
let viewer3D
|
let viewer3D;
|
||||||
let app
|
let app;
|
||||||
|
let modelState;
|
||||||
|
let configValue = {
|
||||||
|
hideArr: [],
|
||||||
|
colorArr: [],
|
||||||
|
};
|
||||||
|
const bimCallback = (viewToken) => {
|
||||||
// let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
|
// let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
|
||||||
let loaderConfig = new BimfaceSDKLoaderConfig()
|
let loaderConfig = new BimfaceSDKLoaderConfig();
|
||||||
loaderConfig.viewToken = viewToken
|
loaderConfig.viewToken = viewToken;
|
||||||
BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback)
|
BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
|
||||||
function successCallback(viewMetaData) {
|
function successCallback(viewMetaData) {
|
||||||
let domShow = document.getElementById('domId')
|
let domShow = document.getElementById("domId");
|
||||||
let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig()
|
let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
|
||||||
webAppConfig.domElement = domShow
|
webAppConfig.domElement = domShow;
|
||||||
app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig)
|
app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
|
||||||
app.addView(viewToken)
|
app.addView(viewToken);
|
||||||
viewer3D = app.getViewer()
|
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();
|
||||||
|
// 操作模型
|
||||||
|
renderConfigModel();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 添加构件单击事件
|
||||||
|
viewer3D.addEventListener(
|
||||||
|
Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
|
||||||
|
(data) => {
|
||||||
|
console.log(data);
|
||||||
|
setTimeout(() => {
|
||||||
|
// 往父级传递
|
||||||
|
window.parent.postMessage({ msg: data.elementId });
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function failureCallback(error) {
|
function failureCallback(error) {
|
||||||
console.log(error)
|
console.log(error);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
function renderConfigModel() {
|
||||||
|
// 恢复模型状态
|
||||||
|
viewer3D.setState(modelState);
|
||||||
|
model3D.hideComponentsById(configValue.hideArr);
|
||||||
|
configValue.colorArr.map((item) => {
|
||||||
|
model3D.overrideComponentsColorById(
|
||||||
|
[item.name],
|
||||||
|
new Glodon.Web.Graphics.Color(item.color, 1)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
viewer3D.render();
|
||||||
}
|
}
|
||||||
|
// 监听父组件的信息传递
|
||||||
window.addEventListener('message', function(e) {
|
window.addEventListener("message", async function(e) {
|
||||||
// const modelId = e.data.modelId
|
// const modelId = e.data.modelId
|
||||||
const data = e.data || {}
|
const data = e.data || {};
|
||||||
console.log('eeeeeeeeeee',e)
|
|
||||||
if (data.token) {
|
if (data.token) {
|
||||||
// removeModel(modelId)
|
// removeModel(modelId)
|
||||||
bimCallback(data.token)
|
document.getElementById("domId").innerHTML = "";
|
||||||
|
await bimCallback(data.token);
|
||||||
|
if (data.hideArr && data.colorArr) {
|
||||||
|
configValue.hideArr = data.hideArr;
|
||||||
|
configValue.colorArr = data.colorArr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// console.log(e.data, '父级页面传来的数据')
|
// console.log(e.data, '父级页面传来的数据')
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// window.parent.postMessage({ msg: 'hello' })
|
// window.parent.postMessage({ msg: 'hello' })
|
||||||
// }, 2000)
|
// }, 2000)
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -20,7 +20,7 @@ var COMPANY = '' //通用
|
|||||||
// COMPANY = 'shjg'//上海优益(上海建工)
|
// COMPANY = 'shjg'//上海优益(上海建工)
|
||||||
// COMPANY = 'syhy'//沈阳和盈
|
// COMPANY = 'syhy'//沈阳和盈
|
||||||
// COMPANY = 'jxwjj'//嘉兴王江泾公用码头项目
|
// COMPANY = 'jxwjj'//嘉兴王江泾公用码头项目
|
||||||
// COMPANY = 'gxbs'//广西百色
|
COMPANY = 'gxbs'//广西百色
|
||||||
|
|
||||||
var PROJECT = {
|
var PROJECT = {
|
||||||
local_test: 'common', // 普通版
|
local_test: 'common', // 普通版
|
||||||
|
|||||||
@ -51,6 +51,8 @@ export const deleteJlwUploadApi = data => get('/xmgl/bimface/deleteProjectBim',
|
|||||||
export const startJlwApi = data => get('/xmgl/bimface/updateEnabled', data); // 启用所对应的bim
|
export const startJlwApi = data => get('/xmgl/bimface/updateEnabled', data); // 启用所对应的bim
|
||||||
export const getJlwConfigApi = data => get('/xmgl/bimface/getConfigStatus', data); // 获取项目中bimface配置信息
|
export const getJlwConfigApi = data => get('/xmgl/bimface/getConfigStatus', data); // 获取项目中bimface配置信息
|
||||||
export const getJlwTokenApi = data => get('/xmgl/bimface/getViewTokenByFileId', data); // 通过文件标识获取ViewToken
|
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相关配置
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
:class="{ active: activeBuildIndex == index }"
|
:class="{ active: activeBuildIndex == index }"
|
||||||
@click="changeBuildFn(item, index)"
|
@click="changeBuildFn(item, index)"
|
||||||
>
|
>
|
||||||
<div>{{ item.modelName }}</div>
|
<div :title="item.modelName">{{ item.modelName }}</div>
|
||||||
<div class="flex2">
|
<div class="flex2">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="item.isEnable"
|
v-model="item.isEnable"
|
||||||
@ -422,7 +422,7 @@ export default {
|
|||||||
|
|
||||||
//获取模型列表
|
//获取模型列表
|
||||||
loadData() {
|
loadData() {
|
||||||
projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(
|
projectJlwBimListApi({ projectSn: this.$store.state.projectSn, pageSize: 9999 }).then(
|
||||||
res => {
|
res => {
|
||||||
console.log("------模型列表---", res);
|
console.log("------模型列表---", res);
|
||||||
this.buildList = res.result.page.records;
|
this.buildList = res.result.page.records;
|
||||||
@ -563,7 +563,12 @@ export default {
|
|||||||
line-height: 43px;
|
line-height: 43px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
>div:nth-child(1){
|
||||||
|
width: 100px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
&.active {
|
&.active {
|
||||||
background-color: rgba(81, 129, 246, 0.1);
|
background-color: rgba(81, 129, 246, 0.1);
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fullHeight">
|
<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">
|
||||||
|
<template v-show="selectedHideList.length > 0">
|
||||||
|
<div v-for="(item,index) in selectedHideList" :key="index">
|
||||||
|
<span>{{item}}</span>
|
||||||
|
<i class="el-icon-close" @click="deleteSelected(1,index)"></i>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="selected-box" v-if="formData.type == 2">
|
||||||
|
<template v-show="selectedColorList.length > 0">
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
</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%" id="iframe" style="flex: 1"></iframe>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getJlwTokenApi,projectJlwBimListApi } from "@/assets/js/api/project";
|
import { getJlwDetailsApi,projectJlwBimListApi, saveBimfaceConfig } from "@/assets/js/api/project";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -13,6 +53,17 @@ export default {
|
|||||||
model:1,
|
model:1,
|
||||||
url:'',
|
url:'',
|
||||||
iframe:null,
|
iframe:null,
|
||||||
|
formData: {
|
||||||
|
type: 1,
|
||||||
|
color: ""
|
||||||
|
},
|
||||||
|
typeOptions: [
|
||||||
|
{label: "隐藏", value: 1},
|
||||||
|
{label: "着色", value: 2},
|
||||||
|
],
|
||||||
|
selectedHideList: [],
|
||||||
|
selectedColorList: [],
|
||||||
|
resData: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -27,7 +78,7 @@ export default {
|
|||||||
this.url = window.location.origin + '/bim.html',
|
this.url = window.location.origin + '/bim.html',
|
||||||
this.iframe = document.getElementById('iframe')
|
this.iframe = document.getElementById('iframe')
|
||||||
window.addEventListener('message', this.getIframeMessage)
|
window.addEventListener('message', this.getIframeMessage)
|
||||||
this.getModelList()
|
// this.getModelList()
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
fileId: {
|
fileId: {
|
||||||
@ -49,28 +100,71 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
load() {
|
// 保存选中数据
|
||||||
// console.log(this.iframe,'iframe')
|
saveSelected(){
|
||||||
this.iframe.contentWindow.postMessage('Message from parent:load complate!')
|
let that = this
|
||||||
},
|
saveBimfaceConfig({ id: this.resData.id,hiddenComponentId:this.selectedHideList.join(','),componentColorJson: JSON.stringify(this.selectedColorList) }).then(res => {
|
||||||
getIframeMessage(e) {
|
if(res.code == 200){
|
||||||
// console.log('Message from iframe:', e.data)
|
this.$message.success("操作成功")
|
||||||
},
|
that.iframe.contentWindow.postMessage({ token: this.resData.viewToken,hideArr: this.selectedHideList,colorArr: this.selectedColorList })
|
||||||
getModelList() {
|
|
||||||
projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
|
||||||
this.buildList = res.result.page.records
|
|
||||||
res.result.page.records.forEach(item => {
|
|
||||||
if (item.isEnable) {
|
|
||||||
this.getToken(item.fileId)
|
|
||||||
// this.getToken()
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
// 删除选中数据
|
||||||
|
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("我进来啦")
|
||||||
|
this.getModelList()
|
||||||
|
},
|
||||||
|
getIframeMessage(e) {
|
||||||
|
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() {
|
||||||
|
this.getToken(this.fileId)
|
||||||
|
// projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||||
|
// this.buildList = res.result.page.records
|
||||||
|
// res.result.page.records.forEach(item => {
|
||||||
|
// if (item.isEnable) {
|
||||||
|
// // this.getToken()
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
},
|
},
|
||||||
getToken(fileId) {
|
getToken(fileId) {
|
||||||
getJlwTokenApi({ fileId, projectSn: this.$store.state.projectSn }).then(res => {
|
console.log("我切换了-------------------",fileId)
|
||||||
const token = res.result
|
getJlwDetailsApi({ fileId, projectSn: this.$store.state.projectSn }).then(res => {
|
||||||
this.iframe.contentWindow.postMessage({ token })
|
console.log(res)
|
||||||
|
this.resData = res.result;
|
||||||
|
const token = res.result.viewToken;
|
||||||
|
this.selectedHideList = this.resData.hiddenComponentId?this.resData.hiddenComponentId.split(','):[];
|
||||||
|
this.selectedColorList = this.resData.componentColorJson?JSON.parse(this.resData.componentColorJson):[];
|
||||||
|
this.iframe.contentWindow.postMessage({ token, hideArr: this.selectedHideList,colorArr: this.selectedColorList })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// getToken() {
|
// getToken() {
|
||||||
@ -92,5 +186,52 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped lang="scss">
|
||||||
|
@mixin flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.fullHeight {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.bimModel-operate{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 5px;
|
||||||
|
.select-operate{
|
||||||
|
@include flex;
|
||||||
|
}
|
||||||
|
.data-show{
|
||||||
|
width: max-content;
|
||||||
|
max-width: 100%;
|
||||||
|
@include flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
.selected-box{
|
||||||
|
flex: 1%;
|
||||||
|
min-width: 208px;
|
||||||
|
min-height: 32px;
|
||||||
|
border: 1px solid #c0c4cc;
|
||||||
|
border-radius: 4px;
|
||||||
|
@include flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
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>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user