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)">
          <span />
          <p>全景图</p>
        </li>
        <li :class="{ 'active-nav': activeIndex == 1 }" @click="changeActiveTab(1)">
          <span />
          <p>档案库</p>
        </li>
        <li :class="{ 'active-nav': activeIndex == 2 }" @click="changeActiveTab(2)">
          <span />
          <p>整理室</p>
        </li>
        <li :class="{ 'active-nav': activeIndex == 3 }" @click="changeActiveTab(3)">
          <span />
          <p>阅览室</p>
        </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)
    if (localStorage.getItem('isDeseCabinetPage')) {
      this.activeIndex = 1
      localStorage.removeItem('isDeseCabinetPage')
    }
  },
  created() {
    console.log(1111)
    this.initWebSocket()
    if (this.$route.params.roomId) {
      this.activeIndex = this.$route.params.roomId
    }
  },
  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)
    },
    initWebSocket() {
      // 初始化weosocket
      const url = 'ws://192.168.99.65:7070/webSocket/testname'
      const wsuri = url // ws地址
      this.websocket = new WebSocket(wsuri)
      this.websocket.onopen = this.websocketonopen
      this.websocket.onerror = this.websocketonerror
      this.websocket.onmessage = this.websocketonmessage
      this.websocket.onclose = this.websocketclose
    },
    websocketonopen() {
      console.log('WebSocket连接成功')
      // co data = {
      //   type: 'user_init',
      //   userid: 'xxx'
      // }
      // this.websocket.send(
      //   // 发送数据
      //   JSON.stringify(data)
      // )
    },
    websocketonerror(e) {
      // 错误
      // this.initWebSocket()
      console.log('WebSocket连接发生错误')
    },
    websocketonmessage(e) {
      // 数据接收
      var data = JSON.parse(e.data)
      this.$store.commit('SET_ws', data)
      console.log('接收数据')
      // 操作处理...
    },
    websocketsend(agentData) {
      // 数据发送
      this.websocket.send(agentData)
    },
    websocketclose(e) {
      // 关闭
      console.log('WebSocket关闭')
      console.log(JSON.stringify(e))
    }
  }
}
</script>

<style lang="scss" scoped>
.warehouse-tab {
  color: #3298fa;
  .warehouse-nav {
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 11;
    // width: calc(100vw - 545px);
    width: calc(100vw - 800px);
    height: 90px;
    min-height: 90px;
    padding: 0;
    li {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      align-content: center;
      justify-content: center;
      width: 25%;
      height: 90px;
      line-height: 90px;
      text-align: right;
      // padding-right: 20px;
      margin-right: 20px;
      font-size: 18px;
      position: relative;
      cursor: default;
      background: url("~@/assets/images/warehouse_tab_bg.png") no-repeat;
      background-size: 100% 100%;
      span {
        width: 72px;
        height: 52px;
        // position: absolute;
        // left: 60px;
        // top: 20px;
      }
      p {
        // flex: 1;
        text-align: left;
      }
      &:first-child span {
        background: url("~@/assets/images/tab_fullview_logo.png") no-repeat;
      }
      &:nth-child(2) span {
        background: url("~@/assets/images/tab_archives_logo.png") no-repeat;
      }
      &:nth-child(3) span {
        background: url("~@/assets/images/tab_collate_logo.png") no-repeat;
      }
      &:nth-child(4) span {
        background: url("~@/assets/images/tab_read_logo.png") no-repeat;
      }
    }
    .active-nav {
      color: #fff;
      background: url("~@/assets/images/warehouse_tab_active.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>