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

<template>
  <div class="app-container warehouse">
    <!-- <h1>全景图</h1> -->
    <div class="warehouse-left">
      <div class="left-3d">
        <iframe
          id="myIframe"
          ref="myIframe"
          name="iframeMap"
          class="iframe_box"
          src="/webC/index.html"
          frameborder="0"
          scrolling="no"
        />
      </div>
    </div>
    <warehouse-warning :height="'calc(100vh - 235px)'" />
  </div>
</template>

<script>
import WarehouseWarning from '@/views/components/WarehouseWarning'
export default {
  name: 'ReadRoom',
  components: { WarehouseWarning },
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    const _this = this
    this.iframeWin = this.$refs.myIframe.contentWindow
    // inframe 加载完成之后
    document.getElementById('myIframe').onload = function() {
      _this.deviceState()
    }
    // window.addEventListener('message', this.handleMessageDevice)
  },
  methods: {
    // 传入设备状态data  / 给iframe传初始值
    deviceState(e) {
      this.iframeWin.postMessage({
        data: [
          {
            id: 'YLS_MO_OAO_001',
            wendu: 3,
            sidu: 6,
            alarmState: false
          }
        ]
      }, '*')
    }
    // 点击查看设备状况
    // handleMessageDevice(event) {
    //   const _this = this
    //   if (event.data && event.data.data) {
    //     const data = event.data.data
    //     _this.deviceId = data
    //   }
    // },
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
  .warehouse-left{
    position: relative;
    h2{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      color: #fff;
      font-size: 16px;
    }
  }
</style>