327 lines
8.8 KiB
Vue
327 lines
8.8 KiB
Vue
<template>
|
|
<div class="bim-sand-table-setting app-container2">
|
|
<div id="bimSandTableSetting" :key="elId">
|
|
<div
|
|
id="bimSandTableSettingContainer"
|
|
class="bimSandTableSettingContainer"
|
|
></div>
|
|
</div>
|
|
<div class="footer-box" v-if="models.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="videoMonitor" />
|
|
</div>
|
|
</a-tooltip>
|
|
<a-tooltip placement="top" title="基坑监控">
|
|
<div
|
|
class="footer-btn"
|
|
@click="doMenu(2)"
|
|
:class="activeMenu == 2 ? 'is-active' : ''"
|
|
>
|
|
<svg-icon icon-class="pitMonitor" />
|
|
</div>
|
|
</a-tooltip>
|
|
<a-tooltip placement="top" title="塔机监控">
|
|
<div
|
|
class="footer-btn"
|
|
@click="doMenu(3)"
|
|
:class="activeMenu == 3 ? 'is-active' : ''"
|
|
>
|
|
<svg-icon icon-class="towerMonitor" />
|
|
</div>
|
|
</a-tooltip>
|
|
<a-tooltip placement="top" title="电箱监控">
|
|
<div
|
|
class="footer-btn"
|
|
@click="doMenu(4)"
|
|
:class="activeMenu == 4 ? 'is-active' : ''"
|
|
>
|
|
<svg-icon icon-class="power" />
|
|
</div>
|
|
</a-tooltip>
|
|
</div>
|
|
<div class="bim-setting-tools" v-show="activeMenu > 0">
|
|
<div class="tools-title">
|
|
<svg-icon icon-class="videoMonitor" v-if="activeMenu == 1" />
|
|
<svg-icon icon-class="pitMonitor" v-if="activeMenu == 2" />
|
|
<svg-icon icon-class="towerMonitor" v-if="activeMenu == 3" />
|
|
<svg-icon icon-class="power" v-if="activeMenu == 4" />
|
|
{{ title }}
|
|
</div>
|
|
<el-icon
|
|
@click="doToolsClose"
|
|
style="color: #000; font-size: 20px; cursor: pointer"
|
|
class="tools-close"
|
|
>
|
|
<Close />
|
|
</el-icon>
|
|
<div class="device-list scroll">
|
|
<div class="device-item" v-for="(item, index) in devices" :key="index">
|
|
<div class="device-name">
|
|
<svg-icon icon-class="videoMonitor" v-if="activeMenu == 1" />
|
|
<svg-icon icon-class="pitMonitor" v-if="activeMenu == 2" />
|
|
<svg-icon icon-class="towerMonitor" v-if="activeMenu == 3" />
|
|
<svg-icon icon-class="power" v-if="activeMenu == 4" />
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import useUserStore from "@/store/modules/user";
|
|
import { listBimModel } from "@/api/bim/bimModel";
|
|
import { emitter } from "@/router/index.js";
|
|
import { devicePositionGet } from "@/api/bim/bim.js";
|
|
export default {
|
|
name: "SandTableSetting",
|
|
components: {
|
|
// attItem
|
|
},
|
|
data() {
|
|
return {
|
|
currentPrjId: null,
|
|
currentComId: null,
|
|
models: [],
|
|
elId: 1,
|
|
activeMenu: 0,
|
|
title: "",
|
|
devices: [],
|
|
};
|
|
},
|
|
created() {
|
|
emitter.on("routeChanged", ({ to, from }) => {
|
|
if (to.name === "SandTableSetting") {
|
|
this.initEngine();
|
|
}
|
|
// 在这里可以添加你需要执行的逻辑
|
|
});
|
|
},
|
|
beforeUnmount() {
|
|
emitter.off("routeChanged");
|
|
document.body.classList.remove("is-sapi");
|
|
},
|
|
mounted() {
|
|
this.userStore = useUserStore();
|
|
this.currentPrjId = this.userStore.currentPrjId;
|
|
this.currentComId = this.userStore.currentComId;
|
|
document.body.classList.add("is-sapi");
|
|
this.initEngine();
|
|
},
|
|
methods: {
|
|
doToolsClose() {
|
|
this.activeMenu = 0;
|
|
this.resetScene();
|
|
},
|
|
resetScene() {
|
|
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 == 1) {
|
|
this.title = "视频监控";
|
|
} else if (n == 2) {
|
|
this.title = "基坑监控";
|
|
} else if (n == 3) {
|
|
this.title = "塔机监控";
|
|
} else if (n == 4) {
|
|
this.title = "电箱监控";
|
|
}
|
|
this.loadPoisionData();
|
|
},
|
|
loadPoisionData() {
|
|
devicePositionGet({ projectId: this.currentPrjId }).then((d) => {
|
|
this.devices = (d.data || []).filter(
|
|
(item) => item.deviceType == this.activeMenu
|
|
);
|
|
});
|
|
},
|
|
initEngine() {
|
|
this.elId++;
|
|
this.activeMenu = 0;
|
|
setTimeout(() => {
|
|
this.loadEngine();
|
|
}, 10);
|
|
},
|
|
loadEngine() {
|
|
window.sandSettingApi = new SAPI(
|
|
{
|
|
serverIP: window.config.serverIP, //服务ip地址
|
|
port: window.config.port, //HTTP端口
|
|
useHttps: window.config.useHttps, //使用Https
|
|
container: "bimSandTableSettingContainer", //[必须]容器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: "./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: 32, // 导航立方尺寸
|
|
hotPointSize: 7, // 导航立方棱角热点区域尺寸
|
|
cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
|
|
cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
|
|
cubeFillColor: "#374769cc", // cube 各个面填充颜色
|
|
},
|
|
zoomRatios: 1, // 缩放倍率
|
|
show: true, // 是否显示
|
|
showAxes: true, // 是否显示XYZ轴线
|
|
};
|
|
sandSettingApi.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.$modal.msgError("暂无模型，请先关联模型");
|
|
} else {
|
|
this.models.forEach((item) => {
|
|
this.addModel(item.lightweightName);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
addModel(modelId, cb) {
|
|
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
|
console.log(modelId, url);
|
|
sandSettingApi.Model.add(
|
|
url,
|
|
modelId,
|
|
() => {},
|
|
() => {
|
|
cb && cb();
|
|
console.log("加载模型成功");
|
|
}
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bim-sand-table-setting {
|
|
position: absolute;
|
|
height: calc(100% - 0px);
|
|
width: 100%;
|
|
|
|
#bimSandTableSetting {
|
|
height: 100%;
|
|
|
|
#bimSandTableSettingContainer {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.footer-box {
|
|
position: absolute;
|
|
bottom: 6vh;
|
|
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>
|