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

<template>
  <div class="app-container warehouse">
    <div class="warehouse-left">
      <div class="left-3d">
        <h2 class="title-arrow">
          3D库房
        </h2>
        <iframe
          ref="iframe"
          class="iframe_box"
          src="/webTotal/index.html"
          frameborder="0"
          scrolling="no"
        />
      </div>
    </div>
    <div class="warehouse-right container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <h3 class=" table-title">
        <p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
      </h3>
      <!--表格渲染-->
      <el-table
        ref="table"
        style="min-width: 100%;"
        height="100%"
        :data="tableData"
        class="warehose-el-table"
        :row-class-name="rowBgColor"
      >
        <el-table-column prop="time" label="时间" align="center" min-width="60" />
        <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
        <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
      </el-table>
    </div>
  </div>
</template>

<script>
import data1 from '../data1.json'
export default {
  name: 'FullView',
  data() {
    return {
      tableData: [],
      cameraNameId: null

    }
  },
  created() {
    this.getData()
  },
  mounted() {
    // 监听'全景图' iframe 获取摄像头name得id
    // window.addEventListener('message', this.handleMessageCamera)
  },
  methods: {
    // handleMessageCamera(event) {
    //   const _this = this
    //   if (event.data && event.data.data) {
    //     const data = event.data.data
    //     _this.cameraNameId = data
    //   }
    // },
    getData() {
      this.tableData = data1.rows
    },
    // 表格隔行变色
    rowBgColor({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light-blue'
      } else {
        return ''
      }
    },
    destroyed() {
      window.removeEventListener('message', this.handleMessageCamera)
    }
  }
}
</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;
      text-align: center;
      margin: 0 auto;
    }
  }
</style>