<template>
<div class="bim-setting-page app-container2">
<div id="bimSettingContainer"></div>
<model-floor-tree ref="modelFloorTree" @change="doChange" :projectMessage="models" v-if="showTree"></model-floor-tree>
<div class="footer-box" v-if="showModels.length>0">
<a-tooltip placement="top" title="主视图">
<div class="footer-btn" @click="doMenu(0)" :class="activeMenu == 0 ? 'is-active' : ''">
<svg-icon icon-class="home" />
</div>
</a-tooltip>
<a-tooltip placement="top" title="第一人称漫游">
<div class="footer-btn" @click="doMenu(1)" :class="activeMenu == 1 ? 'is-active' : ''">
<svg-icon icon-class="roam" />
</div>
</a-tooltip>
<a-tooltip placement="top" title="自定义视点漫游">
<div class="footer-btn" @click="doMenu(2)" :class="activeMenu == 2 ? 'is-active' : ''">
<svg-icon icon-class="view" />
</div>
</a-tooltip>
<a-tooltip placement="top" title="视点管理">
<div class="footer-btn" @click="doMenu(3)" :class="activeMenu == 3 ? 'is-active' : ''">
<svg-icon icon-class="camera" />
</div>
</a-tooltip>
<a-tooltip placement="top" title="构件隐藏">
<div class="footer-btn" @click="doMenu(4)" :class="activeMenu == 4 ? 'is-active' : ''">
<svg-icon icon-class="hide" />
</div>
</a-tooltip>
</div>
<div class="bim-setting-tools" v-show="activeMenu>0">
<div class="tools-title">{{param.title }}</div>
<el-icon @click="doToolsClose" style="color:#fff" class="tools-close">
<Close />
</el-icon>
<person-roaming v-if="activeMenu===1" ref="personRoaming" :me="this"></person-roaming>
</div>
</div>
</template>
<script>
import useUserStore from '@/store/modules/user'
import { listBimModel } from '@/api/bim/bimModel'
import ModelFloorTree from './ModelFloorTree.vue'
import PersonRoaming from './PersonRoaming.vue'
export default {
components: {
ModelFloorTree,
PersonRoaming,
},
data() {
return {
userStore: {},
isAdmin: false,
projects: [],
currentPrjId: null,
currentComId: null,
subDepts: [],
models: [],
isMobile: false,
showTree: false,
initSuccess: false,
activeMenu: 0,
showModels: [],
param: {},
}
},
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()
this.initEngine()
},
methods: {
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()
},
doMenu(n) {
if (n == this.activeMenu) {
if (n == 0) {
this.resetScene()
}
return
}
this.activeMenu = n
if (n == 0) {
this.resetScene()
}
if (n == 1) {
this.param.title = '第一人称漫游'
}
},
NotificationPopup(parameter) {
this.param = parameter
// const that = this
// that.$notification.open({
// key: 'EngineKey',
// message: parameter.title,
// description: parameter.description,
// class: 'engine-notification ' + (parameter.tips ? parameter.tips : ''),
// duration: null,
// placement: parameter.placement ? parameter.placement : that.isMobile ? 'bottomLeft' : 'topRight',
// style: {
// top: parameter.top ? parameter.top : '50px',
// width: parameter.width ? parameter.width : '360px',
// marginRight: `20px`,
// borderRadius: '0px',
// },
// onClose: this.notifClose,
// })
},
doToolsClose() {
this.activeMenu = -1
},
notifClose() {
this.activeMenu = -1
},
initEngine() {
window.api = new SAPI(
{
serverIP: window.config.serverIP, //服务ip地址
port: window.config.port, //HTTP端口
useHttps: window.config.useHttps, //使用Https
container: 'bimSettingContainer', //[必须]容器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('初始化成功')
let mapOptions = {
imgs: {
// 六面图片
top: './img/top.png',
bottom: './img/under.png',
east: './img/east.png',
south: './img/south.png',
west: './img/west.png',
north: './img/north.png',
},
offset: {
// 屏幕坐标偏移
corner: GLENavigationCube.RightTop,
x: 25,
y: 20,
},
cube: {
hoverColor: '#7193dc', // 立方导航快鼠标移过显示颜色
size: 75, // 导航立方尺寸
hotPointSize: 7, // 导航立方棱角热点区域尺寸
cubeTextColor: '#4c4c4ccc', // cube 各个面文字颜色
cubeStrokeColor: '#374769cc', // cube 各个面边框颜色
cubeFillColor: '#374769cc', // cube 各个面填充颜色
},
zoomRatios: 1, // 缩放倍率
show: true, // 是否显示
showAxes: true, // 是否显示XYZ轴线
}
api.Plugin.initNavCube(mapOptions)
}
)
},
initLoadModel() {
listBimModel({
pageNum: 1,
pageSize: 10,
comId: this.currentComId,
projectId: this.currentPrjId,
}).then((d) => {
this.models = d.rows || []
if (this.models.length == 0) {
this.$model.msgError('暂无模型，请先关联模型')
} else {
this.showTree = true
}
})
},
},
}
</script>
<style lang="scss">
.bim-setting-page {
position: relative;
height: 100%;
#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: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
.tools-title {
padding: 10px;
color: #114c5f;
size: 24px;
}
.tools-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
}
}
body.is-sapi {
.app-main {
height: calc(100vh - 84px);
}
}
</style>