大屏bim漫游功能开发
parent
c43705775b
commit
e4752ef2a6
|
|
@ -1,62 +1,116 @@
|
|||
import request from "@/utils/request";
|
||||
//获取项目的模型列表
|
||||
const listBimModel=query=>{
|
||||
const listBimModel = (query) => {
|
||||
return request({
|
||||
url: "/manage/bim/bimModel/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取BIM设备位置
|
||||
const devicePositionGet=data=>{
|
||||
const devicePositionGet = (data) => {
|
||||
return request({
|
||||
url: "/manage/api/bim/devicePosition/get",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//BIM沙盘查询监控数据
|
||||
const videoMonitorBimData=query=>{
|
||||
const videoMonitorBimData = (query) => {
|
||||
return request({
|
||||
url: "/manage/api/videoMonitor/bimGetData",
|
||||
method: "get",
|
||||
params: query,
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//BIM沙盘查询塔机数据
|
||||
const devTowerBimData=query=>{
|
||||
const devTowerBimData = (query) => {
|
||||
return request({
|
||||
url: "/manage/api/devTower/bimGetData",
|
||||
method: "get",
|
||||
params: query,
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
//BIM沙盘查询配电箱数据
|
||||
const devIotBimData=query=>{
|
||||
const devIotBimData = (query) => {
|
||||
return request({
|
||||
url: "/manage/api/devIot/bimGetData",
|
||||
method: "get",
|
||||
params: query,
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
//根据项目ID获取计划完成率
|
||||
const getRootScheduleNode=query=>{
|
||||
const getRootScheduleNode = (query) => {
|
||||
return request({
|
||||
url: "/manage/api/plan/getRootScheduleNode",
|
||||
method: "get",
|
||||
params: query,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const getModelTree = (name, pid) => {
|
||||
return request({
|
||||
url: "/manage//bim/modelInfo/modelTree/" + name + "?pid=" + pid,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
const modelTreeAllLeafChild = (name, pid) => {
|
||||
return request({
|
||||
url: "/manage//bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
const modelTreeAllChild = (name, pid) => {
|
||||
return request({
|
||||
url: "/manage//bim/modelInfo/modelTreeAllChild/" + name + "?pid=" + pid,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
const getTreeAllLeafChild = (name, pid) => {
|
||||
return request({
|
||||
url: "/manage/bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取视点信息
|
||||
*
|
||||
* @param {Object} data 请求参数对象
|
||||
* @returns {Promise} 返回Promise对象，包含请求结果
|
||||
*/
|
||||
const viewpointGet = (data) => {
|
||||
return request({
|
||||
url: "/manage/api/bim/viewpoint/get",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
};
|
||||
|
||||
const roamingGet=data=>{
|
||||
return request({
|
||||
url: "/manage/api/bim/roaming/get",
|
||||
method: "get",
|
||||
params: data,
|
||||
});
|
||||
}
|
||||
export default{
|
||||
|
||||
export default {
|
||||
listBimModel,
|
||||
devicePositionGet,
|
||||
devTowerBimData,
|
||||
videoMonitorBimData,
|
||||
devIotBimData,
|
||||
getRootScheduleNode
|
||||
}
|
||||
getRootScheduleNode,
|
||||
getModelTree,
|
||||
modelTreeAllLeafChild,
|
||||
modelTreeAllChild,
|
||||
getTreeAllLeafChild,
|
||||
viewpointGet,
|
||||
roamingGet
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3396"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 320v384h128V320H320z m256 0v384h128V320H576z" p-id="3397"></path></svg>
|
||||
|
After Width: | Height: | Size: 330 B |
|
|
@ -0,0 +1 @@
|
|||
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1907"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM383.232 287.616v448l384-223.104-384-224.896z" p-id="1908"></path></svg>
|
||||
|
After Width: | Height: | Size: 326 B |
|
|
@ -0,0 +1 @@
|
|||
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2688"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 320v384h384V320H320z" p-id="2689"></path></svg>
|
||||
|
After Width: | Height: | Size: 306 B |
|
|
@ -0,0 +1,398 @@
|
|||
<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>
|
||||
|
|
@ -1,18 +1,129 @@
|
|||
<template>
|
||||
<div class="bim-roaming main-page">
|
||||
<div id="bimRoaming">
|
||||
<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 scroll">
|
||||
<el-tree
|
||||
:key="treeKey"
|
||||
ref="tree"
|
||||
:default-expanded-keys="treeExpendedKeys"
|
||||
:props="{
|
||||
children: 'children',
|
||||
label: 'title',
|
||||
}"
|
||||
node-key="key"
|
||||
@check="onCheckTree"
|
||||
:data="modelTrees"
|
||||
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 class="roaming-list scroll">
|
||||
<div v-if="roamingLoading" class="loading">暂无数据</div>
|
||||
<div v-for="(item, index) in roamingList" :key="index" :class="{ 'is-selected': item.play != 0 }" class="roaming-item">
|
||||
<el-tooltip :content="item.name">
|
||||
<span class="roam-text">{{ item.name }}</span>
|
||||
</el-tooltip>
|
||||
<div class="roam-tool">
|
||||
<el-tooltip content="播放" v-show="item.play == 0">
|
||||
<svg-icon icon-class="play" @click="startRoaming(item)"></svg-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="暂停" v-show="item.play != 2 && item.play != 0">
|
||||
<svg-icon icon-class="pause" @click="playIRPause(item)"></svg-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="继续播放" v-show="item.play == 2">
|
||||
<svg-icon icon-class="play" @click="playContinue(item)"></svg-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-show="item.play != 0" content="停止">
|
||||
<svg-icon icon-class="stop" @click="playCancle(item)"></svg-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-row r66">
|
||||
<div class="row-title">
|
||||
<svg-icon icon-class="signal"></svg-icon>
|
||||
视点列表
|
||||
</div>
|
||||
<div class="view-point-list scroll">
|
||||
<div v-if="viewPointLoading" class="loading">暂无数据</div>
|
||||
<div v-for="(item, index) in viewpointList" :key="index" :class="{ 'is-selected': selectedViewpoint == item }" class="viewpoint-item" @click="ZoomViewpoint(item)">
|
||||
<div class="viewpoint-content">
|
||||
<el-image :src="item.imgPath" alt class="viewpoint-image" fit="scale-down" />
|
||||
<el-tooltip :content="item.remark" v-if="item.remark">
|
||||
<span class="viewpoint-title">{{ item.name }}</span>
|
||||
</el-tooltip>
|
||||
<span class="viewpoint-title" v-else>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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(){
|
||||
name: "BIMRoaming",
|
||||
data() {
|
||||
return {
|
||||
dpi: "",
|
||||
selProject:null,
|
||||
}
|
||||
selProject: null,
|
||||
leftSrc: "./bimImages/arrow_left_retract.png",
|
||||
rightSrc: "./bimImages/arrow_right_retract.png",
|
||||
leftShow: true,
|
||||
models: [],
|
||||
treeKey: 0,
|
||||
modelTrees: [],
|
||||
treeExpendedKeys: [],
|
||||
visibleList: [],
|
||||
viewpointList: [],
|
||||
selectedViewpoint: null,
|
||||
viewPointLoading: true,
|
||||
roamingList: [],
|
||||
roamingLoading: true,
|
||||
selectedRoam: null,
|
||||
modelLoaded: false,
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.$store.dispatch("ChangeNav", 702);
|
||||
this.dpi = this.$dpi();
|
||||
window.addEventListener("resize", () => {
|
||||
|
|
@ -25,18 +136,615 @@ export default {
|
|||
debounce((prj) => {
|
||||
this.selProject = prj;
|
||||
this.elId++;
|
||||
this.initEngine();
|
||||
})
|
||||
);
|
||||
this.selProject = this.$store.getters.selProject;
|
||||
this.initEngine();
|
||||
},
|
||||
methods:{
|
||||
|
||||
methods: {
|
||||
playIRPause(data) {
|
||||
data.play = 2;
|
||||
bimRoadmApi.Camera.pauseImmersiveRoam(false);
|
||||
},
|
||||
playContinue(data) {
|
||||
data.play = 1;
|
||||
bimRoadmApi.Camera.pauseImmersiveRoam(true);
|
||||
},
|
||||
playCancle(data) {
|
||||
if (data) {
|
||||
data.play = 0;
|
||||
this.selectedRoam = null;
|
||||
} else {
|
||||
if (this.roamingList.findIndex((x) => x.play === 1) > -1) {
|
||||
this.roamingList.find((x) => x.play === 1).play = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
bimRoadmApi.Camera.cancelPlayImmersiveRoam();
|
||||
this.resetScene();
|
||||
},
|
||||
startRoaming(data) {
|
||||
if (!this.modelLoaded) {
|
||||
this.$message.error("模型未加载完成，请稍后重试");
|
||||
return;
|
||||
}
|
||||
let api = bimRoadmApi;
|
||||
this.playCancle();
|
||||
|
||||
if (this.roamingList.findIndex((x) => x.play === 1) > -1) {
|
||||
this.roamingList.find((x) => x.play === 1).play = 0;
|
||||
}
|
||||
data.play = 1;
|
||||
let record = typeof data.points === "string" ? JSON.parse(data.points) : data.points;
|
||||
|
||||
api.Camera.setImmersiveRoamConfig({
|
||||
roamingMode: data.roamingMode,
|
||||
moveRate: 0.5,
|
||||
turnRate: 1,
|
||||
bRecordLocus: false,
|
||||
});
|
||||
setTimeout(() => {
|
||||
api.Camera.startImmersiveRoam([65.702301, 670.785328, 851.817162]);
|
||||
setTimeout(() => {
|
||||
this.selectedRoam = data;
|
||||
api.Camera.playImmersiveRoam({
|
||||
records: record,
|
||||
isLoopPlay: this.autoPlay,
|
||||
complete: function () {
|
||||
this.selectedRoam = null;
|
||||
data.play = 0;
|
||||
},
|
||||
});
|
||||
}, 400);
|
||||
}, 100);
|
||||
},
|
||||
onCheckTree(node, event) {
|
||||
if (!this.modelLoaded) {
|
||||
this.$message.error("模型未加载完成，请稍后重试");
|
||||
return;
|
||||
}
|
||||
this.playCancle();
|
||||
let checked = event.checkedNodes.includes(node);
|
||||
console.log(node, event, checked);
|
||||
if (node.type == "root") {
|
||||
//bimRoadmApi
|
||||
node.children.forEach((m) => {
|
||||
if (bimRoadmApi.m_model.has(m.modelId)) {
|
||||
bimRoadmApi.Model.remove(m.modelId);
|
||||
}
|
||||
if (checked) {
|
||||
this.addModel(m.modelId);
|
||||
}
|
||||
});
|
||||
} else if (node.type == "model") {
|
||||
if (bimRoadmApi.m_model.has(node.modelId)) {
|
||||
bimRoadmApi.Model.remove(node.modelId);
|
||||
}
|
||||
if (checked) {
|
||||
this.addModel(node.modelId);
|
||||
}
|
||||
} else {
|
||||
if (bimRoadmApi.m_model.size == 0) {
|
||||
let modelId = checkNode.modelId;
|
||||
this.addModel(modelId, () => {
|
||||
this.showItem(node, event, checked);
|
||||
});
|
||||
} else {
|
||||
this.showItem(node, event, checked);
|
||||
}
|
||||
}
|
||||
},
|
||||
async showItem(checkNode, event, checked) {
|
||||
let api = bimRoadmApi;
|
||||
api.Model.setVisible(checkNode.modelId, true);
|
||||
let externalId = checkNode.externalId;
|
||||
if (externalId != 0) {
|
||||
if (checked) {
|
||||
this.visibleList.push(externalId);
|
||||
api.Feature.setVisible(this.visibleList.join("#"), true, checkNode.modelId, false);
|
||||
} else {
|
||||
this.visibleList = this.visibleList.filter((item) => item !== externalId);
|
||||
api.Feature.setVisible(externalId, false, checkNode.modelId);
|
||||
}
|
||||
} else {
|
||||
const res = await this.$api.bim.getTreeAllLeafChild(checkNode.modelId, checkNode.glid);
|
||||
let nodes = res.data || [];
|
||||
if (nodes.length > 0) {
|
||||
if (checked) {
|
||||
this.visibleList = this.MergeArray(nodes, this.visibleList);
|
||||
api.Model.setVisible(checkNode.modelId, true);
|
||||
api.Feature.setVisible(this.visibleList.join("#"), true, checkNode.modelId, false);
|
||||
} else {
|
||||
this.visibleList = this.DelArray(this.visibleList, nodes);
|
||||
api.Feature.setVisible(nodes.join("#"), false, checkNode.modelId);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MergeArray(arr1, arr2) {
|
||||
var _arr = new Array();
|
||||
for (var i = 0; i < arr1.length; i++) {
|
||||
_arr.push(arr1[i]);
|
||||
}
|
||||
for (var i = 0; i < arr2.length; i++) {
|
||||
var flag = true;
|
||||
for (var j = 0; j < arr1.length; j++) {
|
||||
if (arr2[i] == arr1[j]) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
_arr.push(arr2[i]);
|
||||
}
|
||||
}
|
||||
return _arr;
|
||||
},
|
||||
DelArray(array1, array2) {
|
||||
var result = [];
|
||||
for (var i = 0; i < array1.length; i++) {
|
||||
var k = 0;
|
||||
for (var j = 0; j < array2.length; j++) {
|
||||
if (array1[i] != array2[j]) {
|
||||
k++;
|
||||
if (k == array2.length) {
|
||||
result.push(array1[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
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.bimRoadmApi = 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轴线
|
||||
};
|
||||
bimRoadmApi.Plugin.initNavCube(mapOptions);
|
||||
}
|
||||
);
|
||||
},
|
||||
initLoadModel() {
|
||||
this.$api.bim
|
||||
.listBimModel({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
comId: this.selProject.comId,
|
||||
projectId: this.selProject.id,
|
||||
})
|
||||
.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();
|
||||
});
|
||||
}
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
init() {
|
||||
this.loadViewPoint();
|
||||
this.loadRoaming();
|
||||
},
|
||||
loadViewPoint() {
|
||||
this.$api.bim
|
||||
.viewpointGet({
|
||||
projectId: this.selProject.id,
|
||||
viewType: 1,
|
||||
pageSize: 100,
|
||||
pageNum: 1,
|
||||
})
|
||||
.then((d) => {
|
||||
this.viewpointList = d.data.rows || [];
|
||||
this.viewPointLoading = false;
|
||||
});
|
||||
},
|
||||
loadRoaming() {
|
||||
this.$api.bim
|
||||
.roamingGet({
|
||||
roamingType: 1,
|
||||
projectId: this.selProject.id,
|
||||
pageSize: 100,
|
||||
pageNum: 1,
|
||||
})
|
||||
.then((d) => {
|
||||
let list = d.data.rows || [];
|
||||
list.forEach((item) => {
|
||||
item.play = 0;
|
||||
});
|
||||
this.roamingList = list;
|
||||
this.roamingLoading = false;
|
||||
});
|
||||
},
|
||||
ZoomViewpoint(item) {
|
||||
if (!this.modelLoaded) {
|
||||
this.$message.error("模型未加载完成，请稍后重试");
|
||||
return;
|
||||
}
|
||||
this.playCancle();
|
||||
this.selectedViewpoint = item;
|
||||
if (item.viewPosition != null) {
|
||||
bimRoadmApi.Camera.setViewPort(JSON.parse(item.viewPosition));
|
||||
}
|
||||
},
|
||||
loadModelTree() {
|
||||
this.modelTrees = [
|
||||
{
|
||||
title: "项目模型",
|
||||
level: 0,
|
||||
type: "root",
|
||||
key: "root",
|
||||
children: [],
|
||||
hadLoad: true,
|
||||
},
|
||||
];
|
||||
this.treeExpendedKeys.push("root");
|
||||
this.models
|
||||
.map((d) => {
|
||||
d.gis = JSON.parse(d.gisJson);
|
||||
return d;
|
||||
})
|
||||
.forEach((d) => {
|
||||
let node = {
|
||||
title: d.modelName,
|
||||
level: 1,
|
||||
type: "model",
|
||||
hasLoad: false,
|
||||
modelId: d.lightweightName,
|
||||
key: d.lightweightName,
|
||||
externalId: "0",
|
||||
glid: "",
|
||||
children: [],
|
||||
data: d,
|
||||
};
|
||||
this.treeExpendedKeys.push(node.key);
|
||||
this.modelTrees[0].children.push(node);
|
||||
this.getTreeData(node);
|
||||
});
|
||||
this.showTree = true;
|
||||
},
|
||||
getTreeData(node) {
|
||||
this.$api.bim.modelTreeAllChild(node.modelId, "").then((d) => {
|
||||
let objs = d.data || [];
|
||||
let makeTree = (tmps) => {
|
||||
tmps.forEach((item) => {
|
||||
item.children = objs.filter((it) => it.pglid == item.glid);
|
||||
if (item.children.length > 0) {
|
||||
makeTree(item.children);
|
||||
}
|
||||
item.hasLoad = true;
|
||||
item.title = item.name;
|
||||
item.key = item.glid;
|
||||
item.modelId = node.modelId;
|
||||
});
|
||||
return tmps;
|
||||
};
|
||||
node.children = makeTree(objs.filter((item) => item.level == 0));
|
||||
node.children.forEach((item) => {
|
||||
//this.treeExpendedKeys.push(item.key)
|
||||
});
|
||||
this.treeKey++;
|
||||
});
|
||||
},
|
||||
addModel(modelId, cb) {
|
||||
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
||||
console.log(modelId, url);
|
||||
bimRoadmApi.Model.add(
|
||||
url,
|
||||
modelId,
|
||||
() => {},
|
||||
() => {
|
||||
cb && cb();
|
||||
console.log("加载模型成功");
|
||||
setTimeout(() => {
|
||||
bimRoadmApi.Camera.getViewPort((p) => {
|
||||
this.viewPoint = p;
|
||||
this.modelLoaded = true;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
);
|
||||
},
|
||||
resetScene() {
|
||||
this.selectedViewpoint = null;
|
||||
this.selectedRoam = null;
|
||||
bimRoadmApi.Camera.stopImmersiveRoam();
|
||||
bimRoadmApi.Model.location(bimRoadmApi.m_model.keys().toArray()[0]);
|
||||
bimRoadmApi.Plugin.deleteMiniMap();
|
||||
if (this.viewPoint) {
|
||||
bimRoadmApi.Camera.setViewPort(this.viewPoint);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bim-roaming{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.model-tree {
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: auto;
|
||||
.el-tree {
|
||||
background: transparent;
|
||||
color: #eee;
|
||||
.el-checkbox {
|
||||
color: #75fbfd;
|
||||
}
|
||||
.el-tree-node {
|
||||
&:focus {
|
||||
& > .el-tree-node__content {
|
||||
background: #3489d966;
|
||||
&:hover {
|
||||
background: #3489d966;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tree-node__content:hover {
|
||||
background: #3489d966;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-point-list {
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: auto;
|
||||
|
||||
.viewpoint-item {
|
||||
margin: 10px 10px 0px;
|
||||
&.is-selected {
|
||||
.viewpoint-content {
|
||||
background: #3489d966;
|
||||
border: solid 1px #75fbfd;
|
||||
}
|
||||
}
|
||||
.viewpoint-content {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
background: #ffffff2e;
|
||||
.el-image {
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
.viewpoint-title {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
background: #00000080;
|
||||
width: calc(100% - 10px);
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.roaming-list {
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: auto;
|
||||
.roaming-item {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin: 10px;
|
||||
background: #04436b40;
|
||||
line-height: 36px;
|
||||
border-radius: 10px;
|
||||
padding: 0px 10px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
&.is-selected {
|
||||
background: #00aaff;
|
||||
}
|
||||
.roam-text {
|
||||
color: #fff;
|
||||
flex-grow: 1;
|
||||
max-width: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.roam-tool {
|
||||
margin-left: 10px;
|
||||
.svg-icon {
|
||||
margin-right: 5px;
|
||||
fill: #75fbfd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: #00000030;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -53,14 +53,14 @@ export function checkLightweightName(data) {
|
|||
|
||||
export function getModelTree(name, pid) {
|
||||
return request({
|
||||
url: "/manage//bim/modelInfo/modelTree/" + name + "?pid=" + pid,
|
||||
url: "/manage/bim/modelInfo/modelTree/" + name + "?pid=" + pid,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
export function getTreeAllLeafChild(name, pid) {
|
||||
return request({
|
||||
url: "/manage//bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
|
||||
url: "/manage/bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue