fix: 解决冲突

This commit is contained in:
kun 2023-12-05 13:41:43 +08:00
commit 45810bde91
6 changed files with 9852 additions and 9653 deletions

View File

@ -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>

View File

@ -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', // 普通版

View File

@ -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相关配置

View File

@ -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);

View File

@ -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 parentload 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>

19216
yarn.lock

File diff suppressed because it is too large Load Diff