大屏bim漫游功能开发

dev_xd
lj7788@126.com 2025-06-16 15:37:20 +08:00
parent c43705775b
commit e4752ef2a6
7 changed files with 1231 additions and 68 deletions

View File

@ -1,62 +1,116 @@
import request from "@/utils/request";
//获取项目的模型列表
const listBimModel=query=>{
return request({
url: "/manage/bim/bimModel/list",
method: "get",
params: query,
})
}
const listBimModel = (query) => {
return request({
url: "/manage/bim/bimModel/list",
method: "get",
params: query,
});
};
//获取BIM设备位置
const devicePositionGet=data=>{
return request({
url: "/manage/api/bim/devicePosition/get",
method: "get",
params: data,
});
}
const devicePositionGet = (data) => {
return request({
url: "/manage/api/bim/devicePosition/get",
method: "get",
params: data,
});
};
//BIM沙盘查询监控数据
const videoMonitorBimData=query=>{
return request({
url: "/manage/api/videoMonitor/bimGetData",
method: "get",
params: query,
})
}
const videoMonitorBimData = (query) => {
return request({
url: "/manage/api/videoMonitor/bimGetData",
method: "get",
params: query,
});
};
//BIM沙盘查询塔机数据
const devTowerBimData=query=>{
return request({
url: "/manage/api/devTower/bimGetData",
method: "get",
params: query,
})
}
const devTowerBimData = (query) => {
return request({
url: "/manage/api/devTower/bimGetData",
method: "get",
params: query,
});
};
//BIM沙盘查询配电箱数据
const devIotBimData=query=>{
return request({
url: "/manage/api/devIot/bimGetData",
method: "get",
params: query,
})
}
const devIotBimData = (query) => {
return request({
url: "/manage/api/devIot/bimGetData",
method: "get",
params: query,
});
};
//根据项目ID获取计划完成率
const getRootScheduleNode=query=>{
return request({
url: "/manage/api/plan/getRootScheduleNode",
method: "get",
params: query,
})
}
export default{
listBimModel,
devicePositionGet,
devTowerBimData,
videoMonitorBimData,
devIotBimData,
getRootScheduleNode
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 {
listBimModel,
devicePositionGet,
devTowerBimData,
videoMonitorBimData,
devIotBimData,
getRootScheduleNode,
getModelTree,
modelTreeAllLeafChild,
modelTreeAllChild,
getTreeAllLeafChild,
viewpointGet,
roamingGet
};

View File

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

View File

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

View File

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

View File

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

View File

@ -1,21 +1,132 @@
<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,
}
dpi: "",
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(){
this.$store.dispatch("ChangeNav", 702);
mounted() {
this.$store.dispatch("ChangeNav", 702);
this.dpi = this.$dpi();
window.addEventListener("resize", () => {
window.addEventListener("resize", () => {
if (this.dpi != this.$dpi()) {
this.dpi = this.$dpi();
}
@ -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>

View File

@ -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",
});
}