|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 42 KiB |
@ -0,0 +1,252 @@ |
|||||||
|
<template> |
||||||
|
<div id="bimModelBox1" class="bimModelBox1"> |
||||||
|
<div class="bimModelBox"> |
||||||
|
<!-- 模型承载 --> |
||||||
|
<div id="domId"></div> |
||||||
|
<!-- 顶部导航 --> |
||||||
|
<div class="animated topNav flex-center" |
||||||
|
:style="{ 'height': topNavHeight + 'rem', 'background-image': topNav == 1 ? 'url(' + topbg1 + ')' : 'url(' + topbg1 + ')' }"> |
||||||
|
<div class="topNav1" v-if="isActive" :class="[isActive ? 'fadeInDown' : 'fadeOutUp']"> |
||||||
|
<div class="flex-center"> |
||||||
|
<div @click="topNavFun(1)" :class="[topNav == 1 ? 'active' : '']" |
||||||
|
class="item flex-center-center" style="margin-right: 0.32rem;" |
||||||
|
:style="{ 'border-color': topNav == 1 ? '#00bbff' : '#00bbff', 'box-shadow': topNav == 1 ? '#0790eb 0px 0px 0.15rem inset' : '' }"> |
||||||
|
<img v-if="topNav == 1" src="../../../public/img/top_nav1-1.png"> |
||||||
|
<img v-else src="../../../public/img/top_nav1.png"> |
||||||
|
<span>概况模式</span> |
||||||
|
</div> |
||||||
|
<div @click="topNavFun(3)" :class="[topNav == 3 ? 'active' : '']" |
||||||
|
class="item flex-center-center" |
||||||
|
:style="{ 'border-color': topNav == 1 ? '#00bbff' : '#00bbff', 'box-shadow': topNav == 3 ? '#0790eb 0px 0px 0.15rem inset' : '' }"> |
||||||
|
<img v-if="topNav == 3" src="../../../public/img/top_nav3-1.png"> |
||||||
|
<img v-else src="../../../public/img/top_nav3.png"> |
||||||
|
<span>监控模式</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 顶部隐藏显示导航按钮 --> |
||||||
|
<img @click="cutTopNav" class="navStateImg1" src="../../../public/img/top_navIcon.png"> |
||||||
|
</div> |
||||||
|
<!-- 顶部隐藏显示导航按钮 --> |
||||||
|
<img @click="cutTopNav" class="navStateImg" src="../../../public/img/top_navIcon.png" v-else> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 概况 --> |
||||||
|
<generalizePatternNew ref="generalizePattern" :bimModel="bimModel" v-if="topNav == 1"> |
||||||
|
</generalizePatternNew> |
||||||
|
<!-- 模型切换 --> |
||||||
|
<!-- <div v-if="topNav != 2" class="cut flex-center" |
||||||
|
:style="{ 'top': topNav == 1 ? '0.2rem' : '1.938rem', 'left': topNav == 1 ? '0.2rem' : 'auto', 'right': topNav == 1 ? 'auto' : '7.625rem' }"> |
||||||
|
<div @click="selectBim(1)" :class="[bimModel == 1 ? 'active' : '']" class="cut_select left" |
||||||
|
:style="{ 'borderColor': topNav == 1 ? '#00bbff' : '#00BAFE', 'boxShadow': bimModel == 1 && topNav == 1 ? '#0790eb 0px 0px 0.15rem inset' : bimModel == 1 && topNav == 3 ? 'rgb(7, 144, 235) 0px 0px 0.15rem inset' : 'none' }"> |
||||||
|
业务区</div> |
||||||
|
<div @click="selectBim(2)" :class="[bimModel == 2 ? 'active' : '']" class="cut_select right" |
||||||
|
:style="{ 'borderColor': topNav == 1 ? '#00bbff' : '#00BAFE', 'boxShadow': bimModel == 2 && topNav == 1 ? '#0790eb 0px 0px 0.15rem inset' : bimModel == 2 && topNav == 3 ? 'rgb(7, 144, 235) 0px 0px 0.15rem inset' : 'none' }"> |
||||||
|
塔台</div> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import generalizePatternNew from './generalizePatternNew' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
generalizePatternNew, //概况 |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
topNav: 1, |
||||||
|
isActive: true, |
||||||
|
bimModel: 1, |
||||||
|
topNavHeight: 0.57, |
||||||
|
topbg1: require('../../../public/img/top_navBg.png'), |
||||||
|
topbg2: require('../../../public/img/top_navBg1.png'), |
||||||
|
clickNum: 1 |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
topNav(newValue, oldValue) { |
||||||
|
if (newValue == oldValue) { |
||||||
|
|
||||||
|
} else { |
||||||
|
if (newValue == 1) { |
||||||
|
} else { |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
var dev_width = document.documentElement.clientWidth || document.body.clientWidth |
||||||
|
document.documentElement.style.fontSize = (dev_width / 1920) * 100 + 'px' |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
window.onresize = function () { |
||||||
|
var dev_width = document.documentElement.clientWidth || document.body.clientWidth |
||||||
|
document.documentElement.style.fontSize = (dev_width / 1920) * 100 + 'px' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 顶部导航按钮 |
||||||
|
topNavFun(i) { |
||||||
|
|
||||||
|
window.sessionStorage.removeItem('build'); |
||||||
|
window.sessionStorage.removeItem('floor'); |
||||||
|
window.sessionStorage.removeItem('ttbuild'); |
||||||
|
this.topNav = i; |
||||||
|
if (i == 3) { |
||||||
|
// if (this.clickNum == 1) { |
||||||
|
// this.$nextTick(() => { |
||||||
|
// setTimeout(() => { |
||||||
|
// this.$refs.monitoringPattern.clickMenu(1, '电', true); |
||||||
|
// }, 300) |
||||||
|
// }) |
||||||
|
// } |
||||||
|
// this.clickNum++; |
||||||
|
this.$router.push({ path: '/garden/index' }); |
||||||
|
|
||||||
|
} else { |
||||||
|
this.clickNum = 1; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 顶部隐藏显示按钮 |
||||||
|
cutTopNav() { |
||||||
|
this.isActive = !this.isActive; |
||||||
|
if (this.isActive) { |
||||||
|
this.topNavHeight = 0.57 |
||||||
|
} else { |
||||||
|
this.topNavHeight = 0.2 |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.bimModelBox1 { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-image: url(../../../public/img/bimBg.png); |
||||||
|
background-size: 100% 100%; |
||||||
|
overflow: auto; |
||||||
|
|
||||||
|
.bimModelBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
min-height: 1016px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
// 模型承载 |
||||||
|
#domId { |
||||||
|
padding: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// 模型切换 |
||||||
|
.cut { |
||||||
|
z-index: 10; |
||||||
|
position: absolute; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.cut_select { |
||||||
|
letter-spacing: 0.015rem; |
||||||
|
font-size: 0.14rem; |
||||||
|
color: #B9D6DF; |
||||||
|
line-height: 0.36rem; |
||||||
|
width: 0.91rem; |
||||||
|
height: 0.36rem; |
||||||
|
background-color: rgba(31, 49, 99, 0.5); |
||||||
|
border: 0.01rem solid; |
||||||
|
} |
||||||
|
|
||||||
|
.cut_select:hover { |
||||||
|
cursor: pointer |
||||||
|
} |
||||||
|
|
||||||
|
.left { |
||||||
|
border-right: none; |
||||||
|
border-top-left-radius: 0.08rem; |
||||||
|
border-bottom-left-radius: 0.08rem; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
border-top-right-radius: 0.08rem; |
||||||
|
border-bottom-right-radius: 0.08rem; |
||||||
|
} |
||||||
|
|
||||||
|
.active { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 顶部导航 |
||||||
|
.topNav { |
||||||
|
z-index: 998; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 50%; |
||||||
|
margin-left: -3.1rem; |
||||||
|
width: 6.2rem; |
||||||
|
background-size: 100% 100%; |
||||||
|
padding: 0 0.32rem; |
||||||
|
|
||||||
|
.topNav1 { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
width: 6.2rem; |
||||||
|
height: 0.57rem; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
// margin-top: 0.625rem; |
||||||
|
width: 1.02rem; |
||||||
|
height: 0.29rem; |
||||||
|
border: 0.01rem solid; |
||||||
|
font-size: 0.14rem; |
||||||
|
color: #c3e1ea; |
||||||
|
|
||||||
|
img { |
||||||
|
margin-right: 0.08rem; |
||||||
|
width: 0.21rem; |
||||||
|
height: 0.22rem; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 顶部隐藏显示导航按钮 |
||||||
|
.navStateImg, |
||||||
|
.navStateImg1 { |
||||||
|
transition: transform .3s; |
||||||
|
width: 0.17rem; |
||||||
|
height: 0.16rem; |
||||||
|
transform: rotateZ(0deg); |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
|
||||||
|
.navStateImg { |
||||||
|
position: absolute; |
||||||
|
top: 0.02rem; |
||||||
|
left: 50%; |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
|
||||||
|
.navStateImg:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.navStateImg1:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||