yxk-storeroom-system/src/views/storeManage/warehouse3D/index.vue

<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>