admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: BIMBASE新功能新增以及BUG修改

Browse Source
This commit is contained in:
kun 2023-12-08 18:17:33 +08:00
parent ab6076486f
commit a031f4f7e9
10 changed files with 964 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/bim.html
View File

@ -51,10 +51,8 @@
Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
(data) => {
console.log(data);
setTimeout(() => {
// 往父级传递
window.parent.postMessage({ msg: data.elementId });
}, 200);
}
);
}

139
public/bimBase.html Normal file
View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first BIMFACE app</title>
</head>
<style>
.view3d-viewer {
width: 98% !important;
height: 98% !important;
}
</style>
<body>
<div id="viewer" style="width: 100%; height: 95vh" class="my-obv-viewer"></div>
<script
src="https://api.cloud.pkpm.cn/bimviewer/viewer/v5/obv.js"
type="text/javascript"
></script>
<link
rel="stylesheet"
href="https://api.cloud.pkpm.cn/bimviewer/viewer/v5/obv.css"
type="text/css"
/>
<link
href="https://api.cloud.pkpm.cn/bimviewer/viewer/v4/locale/locale.properties"
rel="resource"
type="application/l10n"
/>
<script>
let configValue = {
viewToken: "",
urn: "",
hideArr: [],
colorArr: [],
};
async function main() {
// 创建实例需要传入的参数，部署环境serviceConfig 和 用户有效期getAccessToken
const applicationOptions = {
// 配置 OBV 服务端（BIMServer）API 服务的 origin，这个适合于私有部署的用户使用
getAccessToken: getAccessToken,
refreshAccessToken: getAccessToken,
serviceConfig: {
origin: "https://api.cloud.pkpm.cn",
apiContextPath: "/bimserver/viewing/v3",
},
};
// 定义urn，模型的唯一标识
let urn = configValue.urn;
// 实例化 Builder，用于模型加载
const builder = new OBV.Api.ObvBuilder();
// 创建 Application 对象
const application = await builder.buildApplication(applicationOptions);
// 创建 document 管理视图，加载完成后可以调用接口
const obvDocument = await builder.loadDocument(application, urn);
// 创建 viewer 容器, 创建API
const obvApi = await builder.buildViewer3d(
application,
document.getElementById("viewer")
);
// 获取三维模型视图
const viewer3dItems = obvDocument.get3dGeometryItems();
// 加载模型
builder.load3dModels(obvApi, {
obvDocument: obvDocument,
viewer3dItem: viewer3dItems[0],
});
// 设置监听事件
obvApi.addEventListener(
OBV.ViewerEventTypes.V3dSelectionChangedEvent,
(event) => {
console.log(event);
// 往父级传递
window.parent.postMessage({ msg: event.nodeIdArray });
}
);
// 监听相机改变
obvApi.addEventListener(OBV.ViewerEventTypes.V3dCameraChangeEvent, (event) => {
console.log('V3dCameraChangeEvent', event);
// 操作模型
renderConfigModel(obvApi);
});
}
function renderConfigModel(obvApi) {
console.log(obvApi);
console.log(configValue.hideArr);
let arr = [{"modelId":1,"dbId":6103}]
// 隐藏构件
if(configValue.hideArr.length > 0){
obvApi.hide(configValue.hideArr);
} else {
obvApi.showAll();
}
// 构件着色
if(configValue.colorArr.length > 0){
configValue.colorArr.map((item) => {
let firstIndex = item.color.indexOf(",");
let secondIndex = item.color.indexOf(",", firstIndex + 1);
let thirdIndex = item.color.indexOf(")", -1);
// 构件着色
obvApi.setObjectsColor(
[item],
item.color.substring(4, firstIndex),
item.color.substring(firstIndex + 2, secondIndex),
item.color.substring(secondIndex + 2, thirdIndex),
1
);
});
} else {
obvApi.restoreObjectsColor();
}
}
// 访问的令牌 getAccessToken 和 令牌有效期 expiresIn
function getAccessToken(callBack) {
callBack(configValue.viewToken);
}
// 监听父组件的信息传递
window.addEventListener("message", async function(e) {
// const modelId = e.data.modelId
const data = e.data || {};
console.log(data.token);
console.log(data.urn);
if (data.token && data.urn) {
configValue.viewToken = data.token;
configValue.urn = data.urn;
// removeModel(modelId)
document.getElementById("viewer").innerHTML = "";
// 调用main函数进行代码的实现
main();
if (data.hideArr && data.colorArr) {
configValue.hideArr = data.hideArr;
configValue.colorArr = data.colorArr;
}
}
});
</script>
</body>
</html>

2
public/js/config.js
View File

@ -20,7 +20,7 @@ var COMPANY = '' //通用
// COMPANY = 'shjg'//上海优益（上海建工）
// COMPANY = 'syhy'//沈阳和盈
// COMPANY = 'jxwjj'//嘉兴王江泾公用码头项目
COMPANY = 'gxbs'//广西百色
// COMPANY = 'gxbs'//广西百色
var PROJECT = {
local_test: 'common', // 普通版

11
src/assets/js/api/project.js
View File

@ -54,6 +54,17 @@ export const getJlwTokenApi = data => get('/xmgl/bimface/getViewTokenByFileId',
export const getJlwDetailsApi = data => get('/xmgl/bimface/getDetailsByFileIdAndProjectSn', data); // 通过文件标识获取详情(包括ViewToken)
export const saveBimfaceConfig = data => post('/xmgl/bimface/edit', data); // 保存BIMFACE相关配置
// bimBase中心
export const addBimBaseConfigApi = data => post('/xmgl/gouliPkpmConfig/add', data); // 添加配置
export const getBimBaseConfigApi = data => get('/xmgl/gouliPkpmConfig/getConfigByProjectSn', data); // 获取项目中bimface配置信息
export const projectBimBaseListApi = data => get('/xmgl/gouliPkpmModel/list', data); // 配置列表
export const addBimBaseUploadApi = data => post('/xmgl/gouliPkpmModel/add', data); // 添加新模型
export const updateBimBaseUploadApi = data => post('/xmgl/gouliPkpmModel/edit', data); // 编辑模型
export const deleteBimBaseUploadApi = data => post('/xmgl/gouliPkpmModel/delete', data); // 删除模型
export const startBimBaseApi = data => get('/xmgl/gouliPkpmModel/setEnableMainModel', data); // 启用所对应的bim
export const getBimBaseDetailsApi = data => get('/xmgl/gouliPkpmModel/getBimTokenByProjectSn', data); // 通过文件标识获取ViewToken
export const getBimBaseDetails = data => get('/xmgl/gouliPkpmModel/queryById', data); // 通过文件标识获取详情
//楼栋管理

4
src/assets/js/http.js
View File

@ -82,12 +82,12 @@ 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:30002/' //郭圣雄本地
// axios.defaults.baseURL ='http://192.168.34.221:30012/' //郭圣雄本地
// axios.defaults.baseURL = 'http://182.90.224.237:51234' //郭圣雄远程
// axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
// axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
axios.defaults.baseURL ='http://101.43.164.214:11111/' // 百色三标段项目
// axios.defaults.baseURL ='http://101.43.164.214:11111/' // 百色三标段项目
// axios.defaults.baseURL = 'http://125.88.207.86:8088/'//中建四局线上（最新）地址

7
src/router/index.js
View File

@ -1190,6 +1190,13 @@ const routes2 = [
component: () =>
import('@/views/projectFront/BIMCenter/BIMManageV3.vue'),
},
//BIMBASE中心
{
path: '/project/bim/bimBaseManage',
name: 'BIMBASE中心',
component: () =>
import('@/views/projectFront/BIMBASECenter/BIMManage.vue'),
},
//施工日志
{
path: '/project/buildersDiary/addDiary',

22
src/store/index.js
View File

@ -48,15 +48,15 @@ export default new Vuex.Store({
// FILEURL:'http://192.168.34.221:30001/image/',//郭圣雄
// UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
// FILEURL:'http://10.0.1.43:6023/image/',//测试
BASEURL: baseUrl
? baseUrl
: window.location.protocol + "//" + window.location.host + "/", //正式环境
UPLOADURL:
window.location.protocol +
"//" +
window.location.host +
"/upload/image", //正式环境
FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //正式环境
// BASEURL: baseUrl
// ? baseUrl
// : window.location.protocol + "//" + window.location.host + "/", //正式环境
// UPLOADURL:
// window.location.protocol +
// "//" +
// window.location.host +
// "/upload/image", //正式环境
// FILEURL: window.location.protocol + "//" + window.location.host + "/image/", //正式环境
//---------------------------------------------------------------------------------------------
// BASEURL: baseUrl
// ? baseUrl
@ -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:30002/upload/image',//郭圣雄本地
FILEURL: 'http://192.168.34.221:30002/image/',//郭圣雄本地
// UPLOADURL: 'http://101.43.164.214:45011/upload/image',//上海优益
// FILEURL: 'http://101.43.164.214:45011/image/',//上海优益

534
src/views/projectFront/BIMBASECenter/BIMManage.vue Normal file
View File

@ -0,0 +1,534 @@
<template>
<div class="fullHeight">
<div class="left fullHeight whiteBlock">
<div class="title">
<!-- 模型 -->
<span>{{ $t('message.BIMmanage.model') }}</span>
<!-- <p @click="configDialog=true" style="position:absolute;right:10px;top:15px">配置服务器</p> -->
<el-button
type="default"
size="mini"
@click="configDialog = true"
style="position: absolute; right: 10px; top: 15px"
>{{ $t('message.BIMmanage.confingServer') }}</el-button
>
</div>
<div class="list_content">
<vue-scroll v-if="buildList.length > 0">
<div
class="flex content_data"
v-for="(item, index) in buildList"
:key="index"
:class="{ active: activeBuildIndex == index }"
@click="changeBuildFn(item, index)"
>
<div :title="item.modelName">{{ item.modelName }}</div>
<div class="flex2">
<el-switch
v-model="item.isEnable"
@change="setToMain(item, index)"
></el-switch>
<img
style="margin-left: 8px"
@click.stop="deleteFn(item)"
src="@/assets/images/icon-delete.png"
class="icon"
/>
</div>
</div>
</vue-scroll>
<div class="placeholderBox" v-else>
{{ $t('message.personnelPosition.mapManage.no_data') }}
</div>
</div>
<div class="addFirm" @click="addFn">
<!-- {{$t('message.personnelPosition.mapManage.new_build')}} -->
<!-- 上传新模型 -->
{{ $t('message.BIMmanage.updateNewModel') }}
</div>
</div>
<div class="right fullHeight">
<div class="mapContainer whiteBlock">
<overview
:urn="buildList.length > 0 ? buildList[activeBuildIndex].urn : ''"
:fileId="
buildList.length > 0
? buildList[activeBuildIndex].id
: ''
"
:opendrawlabel="true"
></overview>
</div>
</div>
<!-- 上传新模型 -->
<el-dialog
:modal-append-to-body="false"
:title="$t('message.BIMmanage.updateNewModel')"
:visible.sync="addBuildDialog"
width="667px"
>
<div class="dialog_content">
<el-form
size="medium"
:model="addBuildForm"
ref="addBuildForm"
:rules="beaconFormRules"
label-width="120px"
class="dialogFormBox"
>
<el-form-item
:label="$t('message.BIMmanage.modelName')"
prop="modelName"
>
<el-input
v-model="addBuildForm.modelName"
:placeholder="$t('message.personnelPosition.please_enter')"
></el-input>
</el-form-item>
<el-form-item :label="'模型版本号'" prop="version">
<el-input
v-model="addBuildForm.version"
:placeholder="$t('message.personnelPosition.please_enter')"
></el-input>
</el-form-item>
<el-form-item
:label="$t('message.BIMmanage.modelFile')"
prop="urn"
>
<el-input
v-model="addBuildForm.urn"
:placeholder="$t('message.personnelPosition.please_enter')"
></el-input>
</el-form-item>
<div class="dialog-footer">
<el-button
class="cancleBtn"
@click="addBuildDialog = false"
icon="el-icon-circle-close"
size="medium"
>{{ $t('message.personnelPosition.cancel') }}</el-button
>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="submitData"
size="medium"
>{{ $t('message.personnelPosition.determine') }}</el-button
>
</div>
</el-form>
</div>
</el-dialog>
<!-- 配置服务器参数 -->
<el-dialog
:modal-append-to-body="false"
:title="$t('message.BIMmanage.confingServerData')"
:visible.sync="configDialog"
width="700px"
:close-on-click-modal="configForm.id ? true : false"
:show-close="configForm.id ? true : false"
>
<div class="dialog_content">
<p
class="redText"
v-show="configForm.id"
style="margin-bottom: 20px; text-align: center"
>
{{ $t('message.BIMmanage.warnText') }}
</p>
<el-form
size="medium"
:model="configForm"
ref="configForm"
:rules="configFormRules"
label-width="140px"
class="dialogFormBox"
>
<el-form-item :label="'Client ID:'" prop="clientId">
<el-input
v-model="configForm.clientId"
:placeholder="$t('message.personnelPosition.please_enter')"
></el-input>
</el-form-item>
<el-form-item :label="'Client Secret:'" prop="clientSecret">
<el-input
width="200"
type="password"
:show-password="true"
v-model="configForm.clientSecret"
:placeholder="$t('message.personnelPosition.please_enter')"
></el-input>
</el-form-item>
<div class="dialog-footer">
<el-button
type="primary"
icon="el-icon-circle-close"
@click="configDialog = false"
size="medium"
>{{ '取消' }}</el-button
>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="submitConfigData"
size="medium"
>{{ $t('message.personnelPosition.determine') }}</el-button
>
</div>
</el-form>
</div>
</el-dialog>
<el-dialog title="使用说明" :visible.sync="dialogTableVisible">
<img
style="width: 100%; height: 100%"
src="@/assets/images/projectImg/jlwModel.png"
/>
</el-dialog>
</div>
</template>
<script>
import {
addBimBaseConfigApi,
getBimBaseConfigApi,
projectBimBaseListApi,
addBimBaseUploadApi,
updateBimBaseUploadApi,
deleteBimBaseUploadApi,
startBimBaseApi
} from "@/assets/js/api/project";
import overview from "./overviewTwo";
export default {
components: { overview },
data() {
return {
fileId: "",
dialogTableVisible: false,
buildList: [],
addBuildDialog: false,
isAdd: true,
addBuildForm: {
version: "", // 模型版本号
modelName: "", // 模型名称
urn: "", // 文件
projectSn: ""
},
fullscreenLoading: false,
beaconFormRules: {
modelName: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur"
}
],
version: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur"
}
],
urn: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur"
}
]
},
configFormRules: {
clientId: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur"
}
],
clientSecret: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur"
}
]
},
activeBuildIndex: 0,
configDialog: false,
configForm: {
clientId: "",
clientSecret: ""
}
};
},
created(){
},
mounted() {
this.getConfigFn();
this.loadData();
},
methods: {
// 添加配置参数
submitConfigData() {
this.$refs["configForm"].validate(valid => {
if (valid) {
this.configForm.projectSn = this.$store.state.projectSn;
addBimBaseConfigApi(this.configForm).then(res => {
// console.log('--------添加',res)
this.configDialog = false;
this.loadData();
this.$message.success(
this.$t("message.BIMmanage.configSuccess") + "!"
);
});
} else {
return false;
}
});
},
// 设为主模型
setToMain(item, index) {
let currentIndex = index
for (let b in this.buildList) {
if (b != currentIndex) {
this.buildList[b].isEnable = false
}
}
startBimBaseApi({
projectSn: this.$store.state.projectSn,
id: item.id
}).then(res => {
this.loadData();
});
},
// 获取配置 是否显示弹框
getConfigFn() {
getBimBaseConfigApi({
projectSn: this.$store.state.projectSn,
}).then(res => {
console.log('-----有吗', res)
if (res.result) {
this.configForm = res.result;
this.loadData();
} else {
this.configDialog = true;
}
});
},
// 点击上传新模型 弹出弹框 清空数据
addFn() {
this.addBuildDialog = true;
this.isAdd = true;
this.addBuildForm.modelName = "";
this.addBuildForm.version = "";
this.addBuildForm.urn = "";
},
editBuildFn(item) {
this.isAdd = false;
this.addBuildForm = JSON.parse(JSON.stringify(item));
this.addBuildDialog = true;
},
changeBuildFn(item, index) {
// this.addBuildForm=JSON.parse(JSON.stringify(item))
this.activeBuildIndex = index;
if (this.buildList.length > 0) {
this.fileId = parseInt(this.buildList[this.activeBuildIndex].id)
}
},
//获取模型列表
loadData() {
projectBimBaseListApi({ projectSn: this.$store.state.projectSn }).then(
res => {
console.log("------模型列表---", res);
if(res.result && res.result.length>0){
this.buildList = res.result;
res.result.forEach((item, index) => {
if (item.isEnable == 0) {
item.isEnable = false;
} else {
item.isEnable = true;
this.activeBuildIndex = index
this.fileId = item.id
}
});
} else {
this.buildList = [];
}
}
);
},
// 上传新模型
submitData() {
this.$refs["addBuildForm"].validate(valid => {
if (valid) {
if (this.isAdd) {
this.fullscreenLoading = this.$loading({
lock: true,
text: this.$t("message.BIMmanage.loading"),
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
this.addBuildForm.projectSn = this.$store.state.projectSn
addBimBaseUploadApi(this.addBuildForm).then((res) => {
console.log('------------', res)
this.addBuildDialog = false;
this.fullscreenLoading.close();
this.loadData();
this.$message.success(
this.$t("message.personnelPosition.add_success")
); //添加成功！
});
} else {
updateBimBaseUploadApi(this.addBuildForm).then(res => {
this.addBuildDialog = false;
this.loadData();
this.$message.success(
this.$t("message.personnelPosition.edit_success")
); //编辑成功！
});
}
} else {
console.log("error submit!!");
return false;
}
});
},
// 删除
deleteFn(item) {
this.$confirm(
this.$t("message.BIMmanage.tipText4") +
"【" +
item.modelName +
"】," +
this.$t("message.BIMmanage.tipText5") +
"?",
this.$t("message.BIMmanage.tip"),
{
confirmButtonText: this.$t("message.BIMmanage.confirm"),
cancelButtonText: this.$t("message.BIMmanage.cancel"),
type: "warning"
}
)
.then(() => {
deleteBimBaseUploadApi({ id: item.id }).then(res => {
this.$message({
type: "success",
message: this.$t("message.BIMmanage.deleteSuccess") + "!"
});
this.loadData();
});
})
.catch(() => {
this.$message({
type: "info",
message: this.$t("message.BIMmanage.cancelDelete") + "!"
});
});
}
}
};
</script>
<style lang="less" scoped>
.title {
border-bottom: 1px solid rgba(220, 230, 253, 1);
color: @--color-primary;
padding-left: 24px;
font-size: 14px;
position: relative;
span {
position: relative;
padding: 16px 0 5px;
display: inline-block;
&::before {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: @--color-primary;
z-index: 2;
}
}
}
.left {
width: 212px;
float: left;
}
.list_content {
padding: 10px 0;
height: calc(100% - 87px - 20px);
position: relative;
}
.content_data {
padding: 0 20px;
box-sizing: border-box;
height: 43px;
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);
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: @--color-primary;
border-radius: 2px;
}
}
}
.mapContainer {
height: calc(100% - 40px);
padding: 20px;
position: relative;
}
.right {
float: left;
width: calc(100% - 222px);
margin-left: 10px;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex2 {
display: flex;
align-items: center;
}
.addFirm {
height: 45px;
line-height: 45px;
color: @--color-primary;
font-size: 15px;
text-align: center;
background: #fff;
border-top: 1px solid #dce6fd;
font-family: PingFangSC-Regular;
cursor: pointer;
}
.el-icon-s-home {
font-size: 20px;
opacity: 0.6;
}
</style>

258
src/views/projectFront/BIMBASECenter/overviewTwo.vue Normal file
View File

@ -0,0 +1,258 @@
<template>
<div class="fullHeight">
<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 ? item.dbId : "" }}</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 ? item.dbId : "" }}：{{ item ? 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;"
color-format="rgb"
></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>
</template>
<script>
import {
getBimBaseDetailsApi,
updateBimBaseUploadApi,
getBimBaseDetails,
} from "@/assets/js/api/project";
export default {
data() {
return {
token: "",
model: 1,
url: "",
iframe: null,
formData: {
type: 1,
color: "",
},
typeOptions: [
{ label: "隐藏", value: 1 },
{ label: "着色", value: 2 },
],
selectedHideList: [],
selectedColorList: [],
resData: {},
};
},
props: {
fileId: {
default: "10000757034823",
},
urn: {
default: "",
},
},
created() {},
mounted() {
(this.url = window.location.origin + "/bimBase.html"),
(this.iframe = document.getElementById("iframe"));
window.addEventListener("message", this.getIframeMessage);
// this.getModelList()
},
watch: {
fileId: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
// this.iframe.remove();
this.$nextTick(() => {
// this.iframe.append("<iframe id=\"iframe\" style=\"width: 100%;height: 100%\" src=\"\.bim.html\"></iframe>");
// console.log('页面还在吗',this.iframe)
// this.iframe = document.getElementById('iframe')
this.load();
window.addEventListener("message", this.getIframeMessage);
// this.getModelList();
// this.getToken()
});
}
},
deep: true,
},
},
methods: {
// 保存选中数据
saveSelected() {
let that = this;
updateBimBaseUploadApi({
id: this.resData.id,
hiddenComponentId: JSON.stringify(this.selectedHideList),
componentColorJson: JSON.stringify(this.selectedColorList),
}).then((res) => {
if (res.code == 200) {
this.$message.success("操作成功");
that.iframe.contentWindow.postMessage({
token: this.resData.viewToken,
urn: this.urn,
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("我进来啦")
this.getModelList();
},
getIframeMessage(e) {
console.log("Message from iframe：", e.data.msg);
if (e.data.msg && e.data.msg.length > 0) {
if (this.formData.type == 1) {
let dataIndex = null;
dataIndex = this.selectedHideList.find((item) => {
return item.dbId == e.data.msg[0].dbId;
});
if (!dataIndex) {
this.selectedHideList.push({
...e.data.msg[0],
});
}
} else {
let dataIndex = null;
dataIndex = this.selectedColorList.find((item) => {
return item.dbId == e.data.msg[0].dbId;
});
if (!dataIndex) {
this.selectedColorList.push({
...e.data.msg[0],
color: this.formData.color,
});
}
}
this.$forceUpdate();
}
},
getModelList() {
this.getToken();
},
async getToken() {
let token = "";
const res = await getBimBaseDetailsApi({
projectSn: this.$store.state.projectSn,
});
if (res && res.result) {
token = res.result;
}
const res2 = await getBimBaseDetails({ id: this.fileId });
if (res2 && res2.result) {
this.resData = { viewToken: token, ...res2.result };
this.selectedHideList = this.resData.hiddenComponentId
? JSON.parse(this.resData.hiddenComponentId)
: [];
this.selectedColorList = this.resData.componentColorJson
? JSON.parse(this.resData.componentColorJson)
: [];
}
this.iframe.contentWindow.postMessage({
token,
urn: this.urn,
hideArr: this.selectedHideList,
colorArr: this.selectedColorList,
});
},
},
};
</script>
<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>

2
src/views/projectFront/BIMCenter/overviewTwo.vue
View File

@ -152,7 +152,7 @@ export default {
}
} else {
let dataIndex = null;
dataIndex = this.selectedHideList.find((item) => {
dataIndex = this.selectedColorList.find((item) => {
return item.name == e.data.msg;
});
if (!dataIndex) {