399 lines
10 KiB
Vue
399 lines
10 KiB
Vue
<template>
|
|
<div class="bim-roaming main-page">
|
|
<div id="bimRoaming" :key="elId">
|
|
<div id="bimRoamingContainer" class="bimRoamingContainer"></div>
|
|
|
|
<div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
|
|
<transition name="left">
|
|
<div class="data-content" v-show="leftShow">
|
|
<div class="div-row">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
模型结构树
|
|
</div>
|
|
<div class="model-tree">
|
|
<el-tree
|
|
v-if="showTree"
|
|
ref="tree"
|
|
:default-expanded-keys="[0, 1]"
|
|
:props="{
|
|
children: 'children',
|
|
label: 'title',
|
|
}"
|
|
node-key="key"
|
|
@check="onCheckTree"
|
|
:load="loadTreeNode" lazy
|
|
show-checkbox></el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
|
|
</div>
|
|
|
|
<div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
|
|
<transition name="right">
|
|
<div class="data-content" v-show="leftShow">
|
|
<div class="div-row r33">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
漫游方案
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div-row r66">
|
|
<div class="row-title">
|
|
<svg-icon icon-class="signal"></svg-icon>
|
|
视点列表
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="div-tools">
|
|
<div class="tool-item" @click="resetScene">
|
|
<div class="icon">
|
|
<svg-icon icon-class="home" />
|
|
</div>
|
|
<span class="sp-text">默认视点</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from "lodash.debounce";
|
|
export default {
|
|
name: "BIMRoaming",
|
|
data() {
|
|
return {
|
|
dpi: "",
|
|
selProject: null,
|
|
leftSrc: "./bimImages/arrow_left_retract.png",
|
|
rightSrc: "./bimImages/arrow_right_retract.png",
|
|
leftShow: true,
|
|
models: [],
|
|
showTree:false,
|
|
modelTrees: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch("ChangeNav", 702);
|
|
this.dpi = this.$dpi();
|
|
window.addEventListener("resize", () => {
|
|
if (this.dpi != this.$dpi()) {
|
|
this.dpi = this.$dpi();
|
|
}
|
|
});
|
|
this.$bus.$on(
|
|
"projectChange",
|
|
debounce((prj) => {
|
|
this.selProject = prj;
|
|
this.elId++;
|
|
this.initEngine();
|
|
})
|
|
);
|
|
this.selProject = this.$store.getters.selProject;
|
|
this.initEngine();
|
|
},
|
|
methods: {
|
|
onCheckTree() {},
|
|
arrowRetract() {
|
|
if (this.leftShow == true) {
|
|
this.rightSrc = "./images/arrow_right_open.png";
|
|
this.leftSrc = "./images/arrow_left_open.png";
|
|
$("#arrowLeft").animate({ left: 10 + "px" }, 300);
|
|
$("#arrowRight").animate({ right: 10 + "px" }, 300);
|
|
} else {
|
|
this.rightSrc = "./images/arrow_right_retract.png";
|
|
this.leftSrc = "./images/arrow_left_retract.png";
|
|
|
|
$("#arrowLeft").animate({ left: 490 + "px" }, 300);
|
|
$("#arrowRight").animate({ right: 490 + "px" }, 300);
|
|
}
|
|
this.leftShow = !this.leftShow;
|
|
},
|
|
initEngine() {
|
|
this.elId++;
|
|
this.activeMenu = 0;
|
|
setTimeout(() => {
|
|
this.loadEngine();
|
|
}, 10);
|
|
},
|
|
loadEngine() {
|
|
window.bimMgrApi = new SAPI(
|
|
{
|
|
serverIP: window.config.serverIP, //服务ip地址
|
|
port: window.config.port, //HTTP端口
|
|
useHttps: window.config.useHttps, //使用Https
|
|
container: "bimRoamingContainer", //[必须]容器id
|
|
secretKey: window.config.secretKey,
|
|
openEarth: window.config.openEarth, //[可选]开启Gis场景
|
|
bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
|
|
tintColor: window.config.tintColor, //[可选]osgb单体化颜色
|
|
sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
|
|
cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
|
|
},
|
|
() => {
|
|
this.initSuccess = true;
|
|
console.log("初始化成功");
|
|
setTimeout(() => {
|
|
this.initLoadModel();
|
|
}, 10);
|
|
let mapOptions = {
|
|
imgs: {
|
|
// 六面图片
|
|
top: "/cdn/bim/sapi/img/top.png",
|
|
bottom: "/cdn/bim/sapi/img/under.png",
|
|
east: "/cdn/bim/sapi/img/east.png",
|
|
south: "/cdn/bim/sapi/img/south.png",
|
|
west: "/cdn/bim/sapi/img/west.png",
|
|
north: "/cdn/bim/sapi/img/north.png",
|
|
},
|
|
offset: {
|
|
// 屏幕坐标偏移
|
|
corner: GLENavigationCube.RightTop,
|
|
x: 25,
|
|
y: 20,
|
|
},
|
|
cube: {
|
|
hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
|
|
size: 32, // 导航立方尺寸
|
|
hotPointSize: 7, // 导航立方棱角热点区域尺寸
|
|
cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
|
|
cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
|
|
cubeFillColor: "#374769cc", // cube 各个面填充颜色
|
|
},
|
|
zoomRatios: 1, // 缩放倍率
|
|
show: true, // 是否显示
|
|
showAxes: true, // 是否显示XYZ轴线
|
|
};
|
|
bimMgrApi.Plugin.initNavCube(mapOptions);
|
|
}
|
|
);
|
|
},
|
|
initLoadModel() {
|
|
this.$api.bim
|
|
.listBimModel({
|
|
pageNum: 1,
|
|
pageSize: 100,
|
|
comId: this.currentComId,
|
|
projectId: this.currentPrjId,
|
|
})
|
|
.then((d) => {
|
|
this.models = d.rows || [];
|
|
if (this.models.length == 0) {
|
|
this.$modal.msgError("暂无模型，请先关联模型");
|
|
} else {
|
|
this.models.forEach((item) => {
|
|
this.addModel(item.lightweightName);
|
|
});
|
|
this.loadModelTree();
|
|
}
|
|
});
|
|
},
|
|
loadModelTree() {
|
|
this.modelTrees = [
|
|
{
|
|
title: "项目模型",
|
|
level: 0,
|
|
type: "root",
|
|
key: "root",
|
|
children: [],
|
|
hadLoad: true,
|
|
},
|
|
];
|
|
this.models
|
|
.map((d) => {
|
|
d.gis = JSON.parse(d.gisJson);
|
|
return d;
|
|
})
|
|
.forEach((d) => {
|
|
this.modelTrees[0].children.push({
|
|
title: d.modelName,
|
|
level: 1,
|
|
type: "model",
|
|
hasLoad: false,
|
|
modelId: d.lightweightName,
|
|
key: d.lightweightName,
|
|
externalId: "0",
|
|
glid: "",
|
|
children: [],
|
|
data: d,
|
|
});
|
|
});
|
|
this.showTree=true;
|
|
},
|
|
loadTreeNode(node, resolve, reject){
|
|
if(node.level==0){
|
|
resolve([this.modelTrees[0]])
|
|
return;
|
|
}
|
|
if(node.level==1){
|
|
let objs=this.modelTrees[0].children;
|
|
resolve(objs)
|
|
return;
|
|
}
|
|
|
|
resolve([{title:'aaa'}])
|
|
return;
|
|
|
|
console.log(nd)
|
|
// this.$api.bim.getModelTree(nd.modelId,nd.glid).then(res=>{
|
|
// console.log(res)
|
|
// })
|
|
},
|
|
addModel(modelId, cb) {
|
|
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
|
console.log(modelId, url);
|
|
bimMgrApi.Model.add(
|
|
url,
|
|
modelId,
|
|
() => {},
|
|
() => {
|
|
cb && cb();
|
|
console.log("加载模型成功");
|
|
setTimeout(() => {
|
|
bimMgrApi.Camera.getViewPort((p) => {
|
|
this.viewPoint = p;
|
|
});
|
|
}, 1000);
|
|
}
|
|
);
|
|
},
|
|
resetScene() {
|
|
bimMgrApi.Camera.stopImmersiveRoam();
|
|
bimMgrApi.Model.location(bimMgrApi.m_model.keys().toArray()[0]);
|
|
bimMgrApi.Plugin.deleteMiniMap();
|
|
if (this.viewPoint) {
|
|
bimMgrApi.Camera.setViewPort(this.viewPoint);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.bim-roaming {
|
|
height: 100%;
|
|
position: relative;
|
|
#bimRoaming {
|
|
height: 100%;
|
|
#bimRoamingContainer {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.div-left {
|
|
top: 10vh;
|
|
left: 5%;
|
|
position: absolute;
|
|
height: 70vh;
|
|
width: 14%;
|
|
&.isHide {
|
|
left: 0%;
|
|
wdith: 0%;
|
|
#arrowLeft {
|
|
left: 0px !important;
|
|
}
|
|
}
|
|
#arrowLeft {
|
|
top: calc(50% - 50px);
|
|
right: -21px;
|
|
left: unset !important;
|
|
}
|
|
.div-row {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.div-right {
|
|
top: 10vh;
|
|
right: 5%;
|
|
position: absolute;
|
|
height: 70vh;
|
|
width: 14%;
|
|
&.isHide {
|
|
right: 0%;
|
|
width: 0%;
|
|
}
|
|
#arrowRight {
|
|
top: calc(50% - 50px);
|
|
left: -21px;
|
|
}
|
|
.div-row {
|
|
&.r33 {
|
|
height: 33.33%;
|
|
}
|
|
&.r66 {
|
|
height: 66.66%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.data-content {
|
|
height: 100%;
|
|
.div-row {
|
|
border: solid 1px #75fbfdaa;
|
|
background-color: #06445b81;
|
|
.row-title {
|
|
background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
|
|
padding-left: 10px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
.svg-icon {
|
|
fill: #75fbfd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.div-tools {
|
|
position: absolute;
|
|
bottom: 25vh;
|
|
left: 50%;
|
|
margin-left: -34px;
|
|
display: flex;
|
|
background: #00000080;
|
|
border-radius: 10px;
|
|
.tool-item {
|
|
display: flex;
|
|
flex-flow: column;
|
|
padding: 10px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
&.is-active {
|
|
.icon {
|
|
background: #097fca94;
|
|
.svg-icon {
|
|
fill: #75fbfd;
|
|
}
|
|
}
|
|
.sp-text {
|
|
color: #75fbfd;
|
|
}
|
|
}
|
|
.icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #c0c4cca1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 15px;
|
|
.svg-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
.sp-text {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|