You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.7 KiB
135 lines
3.7 KiB
<template>
|
|
<div class="warehouse">
|
|
<div class="warehouse-tab">
|
|
<ul class="warehouse-nav">
|
|
<li :class="{ 'active-nav': activeIndex == 0 }" @click="changeActiveTab(0)">全景图</li>
|
|
<li :class="{ 'active-nav': activeIndex == 1 }" @click="changeActiveTab(1)">档案库</li>
|
|
<li :class="{ 'active-nav': activeIndex == 2 }" @click="changeActiveTab(2)">整理室</li>
|
|
<li :class="{ 'active-nav': activeIndex == 3 }" @click="changeActiveTab(3)">阅览室</li>
|
|
</ul>
|
|
<component :is="comName" />
|
|
</div>
|
|
<!-- 摄像头视频 -->
|
|
<Video ref="camera" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import fullView from './fullView/index.vue'
|
|
import archivesStorage from './archivesStorage/index.vue'
|
|
import collateRoom from './collateRoom/index.vue'
|
|
import readRoom from './readRoom/index.vue'
|
|
import Video from './module/video'
|
|
|
|
export default {
|
|
name: 'Warehouse3D',
|
|
components: { fullView, archivesStorage, readRoom, collateRoom, Video },
|
|
data() {
|
|
return {
|
|
activeIndex: 0
|
|
}
|
|
},
|
|
computed: {
|
|
comName: function() {
|
|
if (this.activeIndex === 0) {
|
|
return 'fullView'
|
|
} else if (this.activeIndex === 1) {
|
|
return 'archivesStorage'
|
|
} else if (this.activeIndex === 2) {
|
|
return 'collateRoom'
|
|
} else if (this.activeIndex === 3) {
|
|
return 'readRoom'
|
|
}
|
|
return 'fullView'
|
|
}
|
|
},
|
|
mounted() {
|
|
// 监听 iframe 传来的值
|
|
window.addEventListener('message', this.handleMessageEvent)
|
|
},
|
|
methods: {
|
|
handleMessageEvent(event) {
|
|
const _this = this
|
|
if (event.data && event.data.data) {
|
|
const data = event.data.data
|
|
if (data === 'A区') {
|
|
_this.activeIndex = 1
|
|
} else if (data === 'B区') {
|
|
_this.activeIndex = 2
|
|
} else if (data === 'C区') {
|
|
_this.activeIndex = 3
|
|
}
|
|
// 摄像头
|
|
if (data.includes('CAM')) {
|
|
_this.$nextTick(() => {
|
|
this.$refs.camera.openVideoVisible = true
|
|
// 后期看接口调试变化
|
|
this.$refs.camera.videoSrc = 'https://qiniu.aiyxlib.com/1606275873000.mp4'
|
|
this.$refs.camera.videoTitle = data
|
|
})
|
|
}
|
|
}
|
|
},
|
|
changeActiveTab(data) {
|
|
this.activeIndex = data
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('message', this.handleMessageEvent)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.warehouse-tab{
|
|
color: #3298FA;
|
|
.warehouse-nav{
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 17px;
|
|
left: 20px;
|
|
z-index: 11;
|
|
height: 90px;
|
|
min-height: 90px;
|
|
padding: 0;
|
|
li{
|
|
width: 260px;
|
|
height: 90px;
|
|
line-height: 90px;
|
|
text-align: right;
|
|
padding-right: 60px;
|
|
margin-right: 20px;
|
|
font-size: 18px;
|
|
position: relative;
|
|
cursor: default;
|
|
background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
|
|
&::before{
|
|
content: '';
|
|
width: 72px;
|
|
height: 52px;
|
|
position: absolute;
|
|
left: 60px;
|
|
top: 20px;
|
|
}
|
|
&:first-child::before{
|
|
background: url('~@/assets/images/tab_fullview_logo.png') no-repeat;
|
|
}
|
|
&:nth-child(2)::before{
|
|
background: url('~@/assets/images/tab_archives_logo.png') no-repeat;
|
|
}
|
|
&:nth-child(3)::before{
|
|
background: url('~@/assets/images/tab_collate_logo.png') no-repeat;
|
|
}
|
|
&:nth-child(4)::before{
|
|
background: url('~@/assets/images/tab_read_logo.png') no-repeat;
|
|
}
|
|
}
|
|
.active-nav{
|
|
color: #fff;
|
|
background: url('~@/assets/images/warehouse_tab_active.png') no-repeat;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|