bim 应用大屏
parent
802ecfc136
commit
96fc7169f2
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<MyDialog v-if="show" v-model="show" width="960px" height="650px" class="bim-video-dialog">
|
||||
<template slot="title">{{ title }}</template>
|
||||
<iframe frameborder="0" :src="iframeSrc" style="width: 100%; height: 100%" allowfullscreen></iframe>
|
||||
</MyDialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyDialog from "@/components/MyDialog";
|
||||
export default {
|
||||
components: {
|
||||
MyDialog,
|
||||
},
|
||||
name: "BimVideoDialog",
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
title: "",
|
||||
itemData: null,
|
||||
iframeSrc: "",
|
||||
videoInfo: null,
|
||||
accessToken: "",
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
showDialog(data, videoInfo) {
|
||||
this.itemData = data;
|
||||
this.title = data.name;
|
||||
this.videoInfo = videoInfo;
|
||||
|
||||
console.log(data);
|
||||
this.show = true;
|
||||
this.loadVideo(videoInfo);
|
||||
},
|
||||
loadVideo(it) {
|
||||
this.$api.videoMonitor.getYsToken(it.id).then((d) => {
|
||||
this.accessToken = d.msg;
|
||||
this.iframeSrc = "https://open.ys7.com/ezopen/h5/iframe?url=" + it.url + "&autoplay=1&accessToken=" + d.msg + "&t=" + +new Date();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.bim-video-dialog {
|
||||
.popup-project-introduction-con {
|
||||
height: 100%;
|
||||
.popup-project-introduction-details {
|
||||
height: calc(100% - 60px);
|
||||
padding: 0px;
|
||||
.quality-table.special-table {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,18 +19,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="div-row">
|
||||
<div class="row-title">
|
||||
<svg-icon icon-class="signal"></svg-icon> 人员
|
||||
</div>
|
||||
<div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<img
|
||||
:src="leftSrc"
|
||||
class="toSafety-fixed-left-img"
|
||||
@click="arrowRetract"
|
||||
id="arrowLeft"
|
||||
/>
|
||||
<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">
|
||||
|
|
@ -48,18 +41,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="div-row">
|
||||
<div class="row-title">
|
||||
<svg-icon icon-class="signal"></svg-icon> 项目全景
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
|
||||
</div>
|
||||
|
||||
<div class="div-tools">
|
||||
|
|
@ -70,41 +56,25 @@
|
|||
<span class="sp-text">默认视点</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="tool-item"
|
||||
@click="changeDevicType(1)"
|
||||
:class="{ 'is-active': devicTypes.includes(1) }"
|
||||
>
|
||||
<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="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="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="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }">
|
||||
<div class="icon">
|
||||
<svg-icon icon-class="power" />
|
||||
</div>
|
||||
|
|
@ -112,77 +82,130 @@
|
|||
</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 class="tag-box box-type-3">
|
||||
<div class="tag-txt">
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
<div class="data-item"><span class="data-label">高度：</span><span class="data-value">15m</span></div>
|
||||
</div>
|
||||
<img src="bimImages/4.png" alt="" class="tag-bg-img" />
|
||||
<img src="bimImages/towerMonitor.png" class="tag-img" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="test-box" style="left:400px">
|
||||
<div class='tag-box box-type-3'>
|
||||
|
||||
<div class='tag-txt' >
|
||||
<table class="tb-power">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td width="150">电压</td>
|
||||
<td width="150">电流</td>
|
||||
<td width="150">功率</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A向</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A向</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A向</td>
|
||||
<td>1</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<img src='bimImages/4.png' alt='' class="tag-bg-img">
|
||||
<img src='bimImages/towerMonitor.png' class="tag-img">
|
||||
</div>
|
||||
</div>
|
||||
<video-dialog ref="videoDlg"></video-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const css = `<style>
|
||||
.tag-box {
|
||||
.tag-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
.tag-img{
|
||||
.tag-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
bottom:33px;
|
||||
bottom:55px;
|
||||
margin-left:-10px;
|
||||
}
|
||||
.tag-txt {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
.tag-bg-img{
|
||||
margin-bottom:13px;
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
.box-type-1 .tag-bg-img{
|
||||
.tag-txt {
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
background: #2b4d63de;
|
||||
border: 1px solid #75fbfdaa;
|
||||
}
|
||||
.tag-txt .data-item.red{
|
||||
color:red;
|
||||
}
|
||||
.tag-bg-img-1{
|
||||
width:21px;
|
||||
height:18px;
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
bottom:40px;
|
||||
left:50%;
|
||||
margin-left:-11px;
|
||||
}
|
||||
|
||||
.box-type-1{
|
||||
height:60px;
|
||||
width:60px;
|
||||
.tag-img-1 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left:50%;
|
||||
bottom:55px;
|
||||
margin-left:-10px;
|
||||
}
|
||||
.box-type-1 .tag-txt{display:none;}
|
||||
.loading {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
background-color: #000;
|
||||
|
||||
animation: ball-scale infinite linear 0.75s;
|
||||
}
|
||||
|
||||
@keyframes ball-scale {
|
||||
0% {
|
||||
transform: scale(0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>`;
|
||||
.box-type-1{
|
||||
height:80px;
|
||||
width:60px;
|
||||
display:block;
|
||||
}
|
||||
.tb-power{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tb-power td{
|
||||
border:solid 1px #75fbfd33;
|
||||
padding:4px 8px;
|
||||
text-align:center;
|
||||
}
|
||||
</style>`;
|
||||
import debounce from "lodash.debounce";
|
||||
import videoDialog from './bim/videoDialog.vue'
|
||||
export default {
|
||||
components: {
|
||||
videoDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dpi: "",
|
||||
|
|
@ -199,6 +222,7 @@ export default {
|
|||
leftSrc: "./bimImages/arrow_left_retract.png",
|
||||
rightSrc: "./bimImages/arrow_right_retract.png",
|
||||
leftShow: true,
|
||||
towerWarning: [],
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
@ -224,6 +248,9 @@ export default {
|
|||
console.log("----mount--->");
|
||||
document.body.classList.add("is-sapi");
|
||||
this.initEngine();
|
||||
this.$api.dict("device_tower_warning").then((d) => {
|
||||
this.towerWarning = d;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
arrowRetract() {
|
||||
|
|
@ -253,14 +280,11 @@ export default {
|
|||
.map((item) => {
|
||||
item.show = item.enabled != 0;
|
||||
item.position = this.$tryToJson(item.position, []);
|
||||
item.elId =
|
||||
(item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
|
||||
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.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
|
||||
this.clearLabels();
|
||||
this.addDeviceLabel();
|
||||
setTimeout(() => {
|
||||
|
|
@ -275,9 +299,7 @@ export default {
|
|||
} else {
|
||||
this.devicTypes.push(n);
|
||||
}
|
||||
this.showDevices = this.devices.filter((item) =>
|
||||
this.devicTypes.includes(item.deviceType)
|
||||
);
|
||||
this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
|
||||
this.clearLabels();
|
||||
this.addDeviceLabel();
|
||||
setTimeout(() => {
|
||||
|
|
@ -285,31 +307,17 @@ export default {
|
|||
}, 100);
|
||||
},
|
||||
AddLable: function (item) {
|
||||
let bg = "2.png";
|
||||
let img = "videoMonitor";
|
||||
let html = "";
|
||||
if (item.deviceType == 1) {
|
||||
img = "videoMonitor";
|
||||
bg = "3.png";
|
||||
html = this.getVideoHtml(item);
|
||||
} else if (item.deviceType == 2) {
|
||||
img = "pitMonitor";
|
||||
html = this.getPitHtml(item);
|
||||
} else if (item.deviceType == 3) {
|
||||
img = "towerMonitor";
|
||||
html = this.getTowerHtml(item);
|
||||
} else if (item.deviceType == 4) {
|
||||
img = "power";
|
||||
html = this.getIotHtml(item);
|
||||
}
|
||||
|
||||
let html =
|
||||
css +
|
||||
`
|
||||
<div class='tag-box box-type-${item.deviceType}'>
|
||||
<img src='bimImages/${bg}' alt='' class="tag-bg-img">
|
||||
<img src='bimImages/${img}.png' class="tag-img">
|
||||
<div class='loading'></div>
|
||||
<span class='tag-txt' style='color:#ffffff;font-size:14px'>
|
||||
${item.name} - 数据加载中。。。
|
||||
</span>
|
||||
</div>`;
|
||||
|
||||
window.bimMgrApi.Label.addBalloon({
|
||||
Html: html,
|
||||
ID: item.elId,
|
||||
|
|
@ -322,6 +330,11 @@ export default {
|
|||
this.addLabels.push(item.elId);
|
||||
},
|
||||
deviceClick(item, opt) {
|
||||
if(item.deviceType==1){
|
||||
let obj=this.videoData.find(d=>d.id==item.deviceId)
|
||||
this.$refs.videoDlg.showDialog(item,obj)
|
||||
return;
|
||||
}
|
||||
console.log(item, opt);
|
||||
},
|
||||
addDeviceLabel() {
|
||||
|
|
@ -490,29 +503,110 @@ export default {
|
|||
this.loadDevDatatimeOut = setTimeout(this.loadDeviceData, 60 * 1000);
|
||||
},
|
||||
getTowerHtml(item) {
|
||||
let bg = "2.png";
|
||||
let img = "towerMonitor";
|
||||
let txtHtml = "";
|
||||
if (item.elId) {
|
||||
txtHtml = ``;
|
||||
} else {
|
||||
let warning = item.warnings;
|
||||
if (warning) {
|
||||
let tmps = this.towerWarning.filter((d) => d.value == item.warnings);
|
||||
warning = tmps.length > 0 ? tmps[0].label : "";
|
||||
}
|
||||
let warningHtml = warning ? `<div class='data-item red'><span class='data-label'>警报：</span><span class='data-value'>${warning}</span></div>` : "";
|
||||
|
||||
txtHtml = `${warningHtml}
|
||||
<div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>${item.height}</span></div>
|
||||
<div class='data-item'><span class='data-label'>吊重：</span><span class='data-value'>${item.load}</span></div>
|
||||
<div class='data-item'><span class='data-label'>回转：</span><span class='data-value'>${item.rotation}</span></div>
|
||||
<div class='data-item'><span class='data-label'>幅度：</span><span class='data-value'>${item.range}</span></div>
|
||||
<div class='data-item'><span class='data-label'>风速：</span><span class='data-value'>${item.windSpeed}</span></div>
|
||||
<div class='data-item'><span class='data-label'>水平倾角：</span><span class='data-value'>${item.leanAngleX}</span></div>
|
||||
<div class='data-item'><span class='data-label'>垂直倾角：</span><span class='data-value'>${item.leanAngleY}</span></div>
|
||||
`;
|
||||
}
|
||||
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 class='tag-txt'>
|
||||
${txtHtml}
|
||||
</div>
|
||||
<img src='bimImages/4.png' alt='' class="tag-bg-img">
|
||||
<img src='bimImages/towerMonitor.png' class="tag-img">
|
||||
</div>`
|
||||
);
|
||||
},
|
||||
fmtData(item){
|
||||
if(item){
|
||||
return (item*1).toFixed(2)
|
||||
}
|
||||
return ""
|
||||
},
|
||||
getIotHtml(item) {
|
||||
let bg = "2.png";
|
||||
let img = "power";
|
||||
let txtHtml = "";
|
||||
if (item.elId) {
|
||||
txtHtml = ``;
|
||||
} else {
|
||||
|
||||
txtHtml = `
|
||||
<table class="tb-power">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td width="60">电压</td>
|
||||
<td width="60">电流</td>
|
||||
<td width="60">功率</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>A向</td>
|
||||
<td>${this.fmtData(item?.voltageA)}</td>
|
||||
<td>${this.fmtData(item?.currentA)}</td>
|
||||
<td>${this.fmtData(item?.powerA)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B向</td>
|
||||
<td>${this.fmtData(item?.voltageB)}</td>
|
||||
<td>${this.fmtData(item?.currentB)}</td>
|
||||
<td>${this.fmtData(item?.powerB)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C向</td>
|
||||
<td>${this.fmtData(item?.voltageC)}</td>
|
||||
<td>${this.fmtData(item?.currentC)}</td>
|
||||
<td>${this.fmtData(item?.powerC)}</td>
|
||||
</tr>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
return (
|
||||
css +
|
||||
`
|
||||
<div class='tag-box box-type-4'>
|
||||
<div class='tag-txt'>
|
||||
${txtHtml}
|
||||
</div>
|
||||
<img src='bimImages/4.png' alt='' class="tag-bg-img">
|
||||
<img src='bimImages/power.png' class="tag-img">
|
||||
</div>`
|
||||
);
|
||||
},
|
||||
getVideoHtml(item) {
|
||||
return (
|
||||
css +
|
||||
`
|
||||
<div class='tag-box box-type-1'>
|
||||
<img src='bimImages/3.png' alt='' class="tag-bg-img-1">
|
||||
<img src='bimImages/videoMonitor.png' class="tag-img-1">
|
||||
</div>`
|
||||
);
|
||||
},
|
||||
getPitHtml(item) {
|
||||
let bg = "4.png";
|
||||
let img = "pitMonitor";
|
||||
|
||||
return (
|
||||
css +
|
||||
`
|
||||
<div class='tag-box box-type-3'>
|
||||
<div class='tag-box box-type-2'>
|
||||
<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'>
|
||||
|
|
@ -636,8 +730,12 @@ export default {
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: none;
|
||||
.tag-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
.tag-img {
|
||||
width: 20px;
|
||||
|
|
@ -647,14 +745,24 @@ export default {
|
|||
bottom: 18px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.tag-bg-img {
|
||||
width: 16px;
|
||||
height: 80px;
|
||||
}
|
||||
.tag-txt {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
box-shadow: #1a9047 0px 4px 16px, rgba(10, 31, 68, 0.06) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
|
||||
color: #75fbfd;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
background: #097fca63;
|
||||
border: solid 1px #75fbfdaa;
|
||||
}
|
||||
.tb-power{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.tb-power td{
|
||||
border:solid 1px #75fbfd33;
|
||||
padding:4px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue