370 lines
10 KiB
Vue
370 lines
10 KiB
Vue
<template>
|
|
<div class="bim-setting-page app-container2">
|
|
<div id="bimSettingContainer"></div>
|
|
<div class="bim-cfg-tools">
|
|
<el-switch v-model="showGis" @change="doChangeGis"></el-switch>GIS
|
|
</div>
|
|
<model-floor-tree ref="modelFloorTree" :me="this" @change="doChange" @modelAdd="modelAdded" :projectMessage="models"
|
|
v-if="showTree"></model-floor-tree>
|
|
<div class="footer-box" v-if="showModels.length > 0">
|
|
<el-tooltip placement="top" content="主视图">
|
|
<div class="footer-btn" @click="doMenu(0)" :class="activeMenu == 0 ? 'is-active' : ''">
|
|
<svg-icon icon-class="home" />
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top" content="第一人称漫游">
|
|
<div class="footer-btn" @click="doMenu(1)" :class="activeMenu == 1 ? 'is-active' : ''">
|
|
<svg-icon icon-class="roam" />
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top" content="自定义视点漫游">
|
|
<div class="footer-btn" @click="doMenu(2)" :class="activeMenu == 2 ? 'is-active' : ''">
|
|
<svg-icon icon-class="view" />
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top" content="视点管理">
|
|
<div class="footer-btn" @click="doMenu(3)" :class="activeMenu == 3 ? 'is-active' : ''">
|
|
<svg-icon icon-class="camera" />
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top" content="构件隐藏">
|
|
<div class="footer-btn" @click="doMenu(4)" :class="activeMenu == 4 ? 'is-active' : ''">
|
|
<svg-icon icon-class="hide" />
|
|
</div>
|
|
</el-tooltip>
|
|
<el-tooltip placement="top" content="模型偏移">
|
|
<div class="footer-btn" @click="doMenu(5)" :class="activeMenu == 5 ? 'is-active' : ''">
|
|
<svg-icon icon-class="position" />
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="bim-setting-tools" v-show="(activeMenu > 0 && activeMenu != 5)">
|
|
<div class="tools-title">
|
|
<svg-icon icon-class="roam" v-if="activeMenu == 1" />
|
|
<svg-icon icon-class="view" v-if="activeMenu == 2" />
|
|
<svg-icon icon-class="camera" v-if="activeMenu == 3" />
|
|
<svg-icon icon-class="hide" v-if="activeMenu == 4" />
|
|
{{ param.title }}
|
|
</div>
|
|
<el-icon @click="doToolsClose" style="color: #000; font-size: 20px; cursor: pointer" class="tools-close">
|
|
<Close />
|
|
</el-icon>
|
|
<person-roaming v-if="activeMenu == 1" ref="personRoaming" :me="this"></person-roaming>
|
|
<custom-viewpoint v-if="activeMenu == 2" ref="customViewpoint" :me="this"></custom-viewpoint>
|
|
<viewpoint v-if="activeMenu == 3" ref="viewpoint" :me="this"></viewpoint>
|
|
<HideFeature v-show="activeMenu == 4" ref="hideFeature" :me="this"></HideFeature>
|
|
</div>
|
|
|
|
<div class="bim-setting-tools" v-show="showMove">
|
|
<div class="tools-title">
|
|
<svg-icon icon-class="position" />
|
|
{{ param.title }}
|
|
</div>
|
|
<el-icon @click="doCloseMove" style="color: #000; font-size: 20px; cursor: pointer" class="tools-close">
|
|
<Close />
|
|
</el-icon>
|
|
<MoveModel ref="moveModel" :me="this"></MoveModel>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import useUserStore from "@/store/modules/user";
|
|
import { listBimModel } from "@/api/bim/bimModel";
|
|
import { getDefaultViewPoint } from '@/api/bim/bim';
|
|
import ModelFloorTree from "./ModelFloorTree.vue";
|
|
import PersonRoaming from "./PersonRoaming.vue";
|
|
import CustomViewpoint from "./CustomViewpoint.vue";
|
|
import Viewpoint from "./Viewpoint.vue";
|
|
import MoveModel from "./MoveModel.vue";
|
|
import HideFeature from "./HideFeature.vue";
|
|
import { ElMessage, ElTooltip } from 'element-plus';
|
|
import { getProjectBimConfig } from "@/api/manage/proProjectInfo.js";
|
|
import SAPITools from './sapiTools.js'
|
|
import APITools from './apiTools.js'
|
|
export default {
|
|
components: {
|
|
ModelFloorTree,
|
|
PersonRoaming,
|
|
CustomViewpoint,
|
|
Viewpoint,
|
|
ElTooltip,
|
|
MoveModel,
|
|
HideFeature,
|
|
},
|
|
data() {
|
|
return {
|
|
userStore: {},
|
|
isAdmin: false,
|
|
projects: [],
|
|
currentPrjId: null,
|
|
currentComId: null,
|
|
subDepts: [],
|
|
models: [],
|
|
isMobile: false,
|
|
showTree: false,
|
|
initSuccess: false,
|
|
activeMenu: 0,
|
|
showModels: [],
|
|
param: {},
|
|
viewPoint: null,
|
|
showGis: false,
|
|
movePoint: null,
|
|
moveModelId: null,
|
|
isMove: false,
|
|
showMove: false,
|
|
hideParts: [],
|
|
bimCfg: {}
|
|
};
|
|
},
|
|
beforeUnmount() {
|
|
document.body.classList.remove("is-sapi");
|
|
},
|
|
mounted() {
|
|
document.body.classList.add("is-sapi");
|
|
this.userStore = useUserStore();
|
|
this.isAdmin = this.userStore.isAdmin;
|
|
this.currentPrjId = this.userStore.currentPrjId;
|
|
this.currentComId = this.userStore.currentComId;
|
|
this.initLoadModel();
|
|
|
|
getProjectBimConfig(this.currentPrjId).then(d => {
|
|
let config = this.$tryToJson(d.msg, {});
|
|
this.bimCfg = {
|
|
background: config.background || "",
|
|
showGis: config.showGis || false,
|
|
clientApi: config.clientApi || false
|
|
}
|
|
if (this.bimCfg.clientApi) {
|
|
APITools.initEngine(this);
|
|
} else {
|
|
SAPITools.initEngine(this);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
doCloseMove() {
|
|
this.$refs.moveModel.resetPosition();
|
|
this.showMove = false;
|
|
this.activeMenu = -1;
|
|
},
|
|
modelAdded(point) {
|
|
if (this.viewPoint != null) {
|
|
this.viewPoint = point;
|
|
}
|
|
},
|
|
doChangeGis() {
|
|
if (this.showGis) {
|
|
if (this.bimCfg.clientApi) {
|
|
api.Public.setGisState(true);
|
|
} else {
|
|
api.Public.setGisState(true);
|
|
api.Public.setTerrainState(false, "http://113.201.2.107:9304/layer.json", false)
|
|
api.Public.setGisState(true);
|
|
}
|
|
} else {
|
|
let color = this.bimCfg.background || "rgba(135 ,206 ,250,1)"
|
|
api.Public.setGisState(false, color);
|
|
api.Public.setSkyBoxState(0)
|
|
}
|
|
},
|
|
doChange() {
|
|
this.showModels = api.m_model.keys().toArray();
|
|
console.log("--change--");
|
|
},
|
|
resetScene() {
|
|
if (this.$refs.personRoaming) {
|
|
this.$refs.personRoaming.isRoaming = false;
|
|
}
|
|
api.Camera.stopImmersiveRoam();
|
|
api.Model.location(api.m_model.keys().toArray()[0]);
|
|
api.Plugin.deleteMiniMap();
|
|
if (this.viewPoint) {
|
|
api.Camera.setViewPort(this.viewPoint);
|
|
}
|
|
},
|
|
doMenu(n) {
|
|
if (this.activeMenu == 4) {
|
|
api.Public.clearHandler();
|
|
api.Feature.getByEvent(false);
|
|
}
|
|
if (n == this.activeMenu) {
|
|
if (n == 0) {
|
|
this.resetScene();
|
|
if (this.isMove) {
|
|
this.activeMenu = 5;
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
if (this.activeMenu == 5) {
|
|
this.doCloseMove()
|
|
}
|
|
this.activeMenu = n;
|
|
if (n == 0) {
|
|
this.resetScene();
|
|
if (this.isMove) {
|
|
this.activeMenu = 5;
|
|
}
|
|
}
|
|
if (n == 1) {
|
|
this.param.title = "第一人称漫游";
|
|
}
|
|
if (n == 2) {
|
|
this.param.title = "自定义视点漫游";
|
|
}
|
|
if (n == 3) {
|
|
this.param.title = "视点管理";
|
|
}
|
|
if (n == 4) {
|
|
this.param.title = "构件隐藏管理";
|
|
setTimeout(() => {
|
|
this.$refs.hideFeature.doHideFeatures(this.hideParts);
|
|
}, 800);
|
|
|
|
}
|
|
if (n == 5) {
|
|
this.param.title = "模型偏移管理";
|
|
this.isMove = true;
|
|
this.doModelMove();
|
|
} else {
|
|
if (this.isMove) {
|
|
this.isMove = false;
|
|
this.showMove = false;
|
|
api.Public.clearHandler(),
|
|
api.Public.pickupCoordinate(false);
|
|
}
|
|
}
|
|
},
|
|
doModelMove() {
|
|
ElMessage.info("请在场景中选择要移动的模型！");
|
|
if(this.bimCfg.clientApi){
|
|
APITools.doModelMove(this);
|
|
}else{
|
|
SAPITools.doModelMove(this);
|
|
}
|
|
},
|
|
|
|
NotificationPopup(parameter) {
|
|
this.param = parameter;
|
|
|
|
},
|
|
doToolsClose() {
|
|
this.activeMenu = 0;
|
|
this.resetScene();
|
|
},
|
|
notifClose() {
|
|
this.activeMenu = -1;
|
|
},
|
|
|
|
initLoadModel() {
|
|
getDefaultViewPoint(this.currentPrjId, 1).then(d => {
|
|
let pt = "";
|
|
if (d.data && d.data.length > 0) {
|
|
pt = d.data[0].viewPosition;
|
|
pt = this.$tryToJson(pt, null);
|
|
}
|
|
if (pt) {
|
|
this.viewPoint = pt;
|
|
}
|
|
});
|
|
listBimModel({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
comId: this.currentComId,
|
|
projectId: this.currentPrjId,
|
|
}).then((d) => {
|
|
this.models = (d.rows || []).map((it) => {
|
|
it.modelId = it.lightweightName;
|
|
it.bimCfg = this.$tryToJson(it.bimConfig || "{}", {});
|
|
it.visible = false;
|
|
it.checked = true;
|
|
it.gis = this.$tryToJson(it.gisJson || "{}", {});
|
|
return it;
|
|
});
|
|
if (this.models.length == 0) {
|
|
ElMessage.error("暂无模型，请先关联模型");
|
|
} else {
|
|
this.showTree = true;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bim-setting-page {
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
.bim-cfg-tools {
|
|
position: absolute;
|
|
left: 340px;
|
|
top: 20px;
|
|
}
|
|
|
|
#bimSettingContainer {
|
|
height: 100%;
|
|
}
|
|
|
|
.footer-box {
|
|
position: absolute;
|
|
bottom: 10vh;
|
|
left: 50%;
|
|
margin-left: -75px;
|
|
background: #274754;
|
|
border-radius: 4px;
|
|
|
|
.footer-btn {
|
|
display: inline-flex;
|
|
width: 40px;
|
|
height: 40px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: #fff;
|
|
}
|
|
|
|
&:hover {
|
|
background: #408edb97;
|
|
}
|
|
|
|
&.is-active {
|
|
svg {
|
|
fill: rgb(0, 255, 174);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bim-setting-tools {
|
|
position: absolute;
|
|
top: 80px;
|
|
right: 10px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
min-width: 300px;
|
|
min-height: 400px;
|
|
|
|
.tools-title {
|
|
padding: 10px;
|
|
color: #114c5f;
|
|
size: 24px;
|
|
}
|
|
|
|
.tools-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|