553 lines
15 KiB
Vue
553 lines
15 KiB
Vue
|
<template>
|
||
|
|
<div class="bim-manage main-page">
|
||
|
|
<div id="bimManage" :key="elId">
|
||
|
|
<div id="bimManageContainer" class="bimManageContainer"></div>
|
||
|
|
</div>
|
||
|
|
<div class="div-left data-content">
|
||
|
|
<div class="div-row">
|
||
|
|
<div class="row-title">
|
||
|
|
<svg-icon icon-class="signal"></svg-icon>
|
||
|
|
项目概况
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-row">
|
||
|
|
<div class="row-title">
|
||
|
|
<svg-icon icon-class="signal"></svg-icon>
|
||
|
|
成本产值
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-row">
|
||
|
|
<div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-right data-content">
|
||
|
|
<div class="div-row">
|
||
|
|
<div class="row-title">
|
||
|
|
<svg-icon icon-class="signal"></svg-icon>
|
||
|
|
工程进度
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-row">
|
||
|
|
<div class="row-title">
|
||
|
|
<svg-icon icon-class="signal"></svg-icon>
|
||
|
|
安全检查
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-row">
|
||
|
|
<div class="row-title">
|
||
|
|
<svg-icon icon-class="signal"></svg-icon>
|
||
|
|
项目全景
|
||
|
|
</div>
|
||
|
|
</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 class="tool-item" @click="changeDevicType(1)" :class="{ 'is-active': devicTypes.includes(1) }">
|
||
|
|
<div class="icon">
|
||
|
|
<svg-icon icon-class="videoMonitor" />
|
||
|
|
</div>
|
||
|
|
<span class="sp-text">视频监控</span>
|
||
|
|
</div>
|
||
|
|
<div class="tool-item" @click="changeDevicType(2)" :class="{ 'is-active': devicTypes.includes(2) }">
|
||
|
|
<div class="icon">
|
||
|
|
<svg-icon icon-class="pitMonitor" />
|
||
|
|
</div>
|
||
|
|
<span class="sp-text">基坑监控</span>
|
||
|
|
</div>
|
||
|
|
<div class="tool-item" @click="changeDevicType(3)" :class="{ 'is-active': devicTypes.includes(3) }">
|
||
|
|
<div class="icon">
|
||
|
|
<svg-icon icon-class="towerMonitor" />
|
||
|
|
</div>
|
||
|
|
<span class="sp-text">塔机监控</span>
|
||
|
|
</div>
|
||
|
|
<div class="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }">
|
||
|
|
<div class="icon">
|
||
|
|
<svg-icon icon-class="power" />
|
||
|
|
</div>
|
||
|
|
<span class="sp-text">电箱监控</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="test-box">
|
||
|
|
<div class="tag-box">
|
||
|
|
<img :src="'bimImages/3.png'" alt="" />
|
||
|
|
<img class="tag-img" :src="'bimImages/videoMonitor.png'" style="" />
|
||
|
|
<span class="tag-txt" style="color: #ffffff; font-size: 14px"> aaa</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const css = `<style>
|
||
|
|
.tag-box {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.tag-img{
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
position: absolute;
|
||
|
|
left:50%;
|
||
|
|
bottom:18px;
|
||
|
|
margin-left:-10px;
|
||
|
|
}
|
||
|
|
.tag-txt {
|
||
|
|
position: absolute;
|
||
|
|
top: 30%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
text-align: center;
|
||
|
|
color: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.box-type-1 .tag-bg-img{
|
||
|
|
position: absolute;
|
||
|
|
bottom:0;
|
||
|
|
left:50%;
|
||
|
|
margin-left:-11px;
|
||
|
|
}
|
||
|
|
.box-type-1{
|
||
|
|
height:60px;
|
||
|
|
width:60px;
|
||
|
|
}
|
||
|
|
.box-type-1 .tag-txt{display:none;}
|
||
|
|
</style>`;
|
||
|
|
import debounce from "lodash.debounce";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dpi: "",
|
||
|
|
elId: 1,
|
||
|
|
devicTypes: [1],
|
||
|
|
viewPoint: null,
|
||
|
|
project: null,
|
||
|
|
addLabels: [],
|
||
|
|
devices: [],
|
||
|
|
showDevices: [],
|
||
|
|
videoData: [],
|
||
|
|
towerData: [],
|
||
|
|
iotData: [],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
document.body.classList.remove("is-sapi");
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$store.dispatch("ChangeNav", 7);
|
||
|
|
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.selProject = this.$store.getters.selProject;
|
||
|
|
console.log("----mount--->");
|
||
|
|
document.body.classList.add("is-sapi");
|
||
|
|
this.initEngine();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loadDevicePosition() {
|
||
|
|
this.$api.bim
|
||
|
|
.devicePositionGet({
|
||
|
|
projectId: this.selProject.id,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
let cnt = 0;
|
||
|
|
this.devices = (res.data || [])
|
||
|
|
.map((item) => {
|
||
|
|
item.show = item.enabled != 0;
|
||
|
|
item.position = this.$tryToJson(item.position, []);
|
||
|
|
item.elId = (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
|
||
|
|
return item;
|
||
|
|
})
|
||
|
|
.filter((item) => item.position.length == 3);
|
||
|
|
this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
|
||
|
|
this.clearLabels();
|
||
|
|
this.addDeviceLabel();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.loadDeviceData();
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changeDevicType(n) {
|
||
|
|
let devs = this.devices.filter((d) => d.devicType == n);
|
||
|
|
if (this.devicTypes.includes(n)) {
|
||
|
|
let idx = this.devicTypes.indexOf(n);
|
||
|
|
this.devicTypes.splice(idx, 1);
|
||
|
|
devs.forEach(item=>{
|
||
|
|
bimMgrApi.Label.removeBalloon({id:item.elId});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.devicTypes.push(n);
|
||
|
|
devs.forEach(item=>{
|
||
|
|
this.AddLable(item)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
|
||
|
|
// this.clearLabels();
|
||
|
|
// this.addDeviceLabel();
|
||
|
|
// setTimeout(() => {
|
||
|
|
// this.loadDeviceData();
|
||
|
|
// }, 100);
|
||
|
|
},
|
||
|
|
AddLable: function (item) {
|
||
|
|
let bg = "2.png";
|
||
|
|
let img = "videoMonitor";
|
||
|
|
if (item.deviceType == 1) {
|
||
|
|
img = "videoMonitor";
|
||
|
|
bg = "3.png";
|
||
|
|
} else if (item.deviceType == 2) {
|
||
|
|
img = "pitMonitor";
|
||
|
|
} else if (item.deviceType == 3) {
|
||
|
|
img = "towerMonitor";
|
||
|
|
} else if (item.deviceType == 4) {
|
||
|
|
img = "power";
|
||
|
|
}
|
||
|
|
|
||
|
|
let html =
|
||
|
|
css +
|
||
|
|
`
|
||
|
|
<div class='tag-box box-type-${item.deviceType}' title='${item.name}'>
|
||
|
|
<img src='bimImages/${bg}' alt='' class="tag-bg-img">
|
||
|
|
<img src='bimImages/${img}.png' class="tag-img">
|
||
|
|
<span class='tag-txt' style='color:#ffffff;font-size:14px'>
|
||
|
|
${item.name} - 数据加载中。。。
|
||
|
|
</span>
|
||
|
|
</div>`;
|
||
|
|
|
||
|
|
window.bimMgrApi.Label.addBalloon({
|
||
|
|
Html: html,
|
||
|
|
ID: item.elId,
|
||
|
|
Pivot: "2",
|
||
|
|
Position: item.position,
|
||
|
|
Title: item.name,
|
||
|
|
MaxDistance: 1e6,
|
||
|
|
onClick: (opt) => this.deviceClick(item, opt),
|
||
|
|
});
|
||
|
|
this.addLabels.push(item.elId);
|
||
|
|
},
|
||
|
|
deviceClick(item, opt) {
|
||
|
|
console.log(item, opt);
|
||
|
|
},
|
||
|
|
addDeviceLabel() {
|
||
|
|
this.showDevices.forEach((d) => {
|
||
|
|
if (d.position && d.position.length > 0) {
|
||
|
|
this.AddLable(d);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
removeLabel(lbl) {
|
||
|
|
if (this.addLabels.includes(lbl)) {
|
||
|
|
window.bimMgrApi.Label.removeBalloon(lbl);
|
||
|
|
let idx = this.addLabels.indexOf(lbl);
|
||
|
|
this.addLabels.splice(idx, 1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clearLabels() {
|
||
|
|
this.addLabels.forEach((id) => {
|
||
|
|
window.bimMgrApi.Label.removeBalloon(id);
|
||
|
|
});
|
||
|
|
this.addLabels = [];
|
||
|
|
},
|
||
|
|
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: "bimManageContainer", //[必须]容器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);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
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("加载模型成功");
|
||
|
|
this.loadDevicePosition();
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
loadDeviceData() {
|
||
|
|
if (this.loadDevDatatimeOut) {
|
||
|
|
clearTimeout(this.loadDevDatatimeOut);
|
||
|
|
this.loadDevDatatimeOut = null;
|
||
|
|
}
|
||
|
|
let prjId = this.selProject.id;
|
||
|
|
if (this.devicTypes.includes(1)) {
|
||
|
|
this.$api.bim.videoMonitorBimData({ projectId: prjId }).then((res) => {
|
||
|
|
this.videoData = res.data || [];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (this.devicTypes.includes(3)) {
|
||
|
|
this.$api.bim.devTowerBimData({ projectId: prjId }).then((res) => {
|
||
|
|
this.towerData = res.data || [];
|
||
|
|
console.log("towerData", this.towerData);
|
||
|
|
this.towerData.forEach((item) => {
|
||
|
|
let id = item.cfgId + "-3";
|
||
|
|
let html = this.getTowerHtml(item);
|
||
|
|
bimMgrApi.Label.updateBalloon({
|
||
|
|
ID: id,
|
||
|
|
Html: html,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (this.devicTypes.includes(4)) {
|
||
|
|
this.$api.bim.devIotBimData({ projectId: prjId }).then((res) => {
|
||
|
|
this.iotData = res.data || [];
|
||
|
|
this.iotData.forEach((item) => {
|
||
|
|
let id = item.cfgId + "-4";
|
||
|
|
let html = this.getIotHtml(item);
|
||
|
|
bimMgrApi.Label.updateBalloon({
|
||
|
|
ID: id,
|
||
|
|
Html: html,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.loadDevDatatimeOut = setTimeout(this.loadDeviceData, 60 * 1000);
|
||
|
|
},
|
||
|
|
getTowerHtml(item) {
|
||
|
|
let bg = "2.png";
|
||
|
|
let img = "towerMonitor";
|
||
|
|
|
||
|
|
return (
|
||
|
|
css +
|
||
|
|
`
|
||
|
|
<div class='tag-box box-type-3'>
|
||
|
|
<img src='bimImages/${bg}' alt='' class="tag-bg-img">
|
||
|
|
<img src='bimImages/${img}.png' class="tag-img">
|
||
|
|
<span class='tag-txt' style='color:#ffffff;font-size:14px'>
|
||
|
|
|
||
|
|
</span>
|
||
|
|
</div>`
|
||
|
|
);
|
||
|
|
},
|
||
|
|
getIotHtml(item) {
|
||
|
|
let bg = "2.png";
|
||
|
|
let img = "power";
|
||
|
|
|
||
|
|
return (
|
||
|
|
css +
|
||
|
|
`
|
||
|
|
<div class='tag-box box-type-3'>
|
||
|
|
<img src='bimImages/${bg}' alt='' class="tag-bg-img">
|
||
|
|
<img src='bimImages/${img}.png' class="tag-img">
|
||
|
|
<span class='tag-txt' style='color:#ffffff;font-size:14px'>
|
||
|
|
|
||
|
|
</span>
|
||
|
|
</div>`
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.bim-manage {
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
#bimManage {
|
||
|
|
height: 100%;
|
||
|
|
#bimManageContainer {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.data-content {
|
||
|
|
position: absolute;
|
||
|
|
height: 70vh;
|
||
|
|
width: 20%;
|
||
|
|
border: solid 1px #75fbfdaa;
|
||
|
|
background-color: #06445b81;
|
||
|
|
&.div-left {
|
||
|
|
top: 10vh;
|
||
|
|
left: 5%;
|
||
|
|
}
|
||
|
|
&.div-right {
|
||
|
|
top: 10vh;
|
||
|
|
right: 5%;
|
||
|
|
}
|
||
|
|
.div-row {
|
||
|
|
height: 33%;
|
||
|
|
.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: 20vh;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -200px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.test-box {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
left: 10px;
|
||
|
|
.tag-box {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.tag-img {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
bottom: 18px;
|
||
|
|
margin-left: -10px;
|
||
|
|
}
|
||
|
|
.tag-txt {
|
||
|
|
position: absolute;
|
||
|
|
top: 30%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
text-align: center;
|
||
|
|
color: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|