3D库房 整理室/阅览室

src/views/storeManage/warehouse3D/collateRoom/index.vue

@@ -1,15 +1,88 @@
 <template>
-  <div>
-    <h1 style="color:#fff">整理室</h1>
+  <div class=" warehouse">
+    <!-- <h1>全景图</h1> -->
+    <div class="warehouse-left">
+      <div class="left-3d">
+        <iframe
+          class="iframe_box"
+          src="/web/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="700px"
+        :data="tableData"
+      >
+        <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: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.tableData = data1.rows
+      console.log()
+    },
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    }
+  }
 }
 </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;
+    }
+  }
+
+.title-arrow{
+  position: relative;
+  &::before{
+    background: url('../../../../assets/images/warehouse_arrow_left.png') no-repeat;
+  }
+  &::after{
+    background: url('../../../../assets/images/warehouse_arrow_right.png') no-repeat;
+  }
+}
 </style>

src/views/storeManage/warehouse3D/readRoom/index.vue

@@ -1,15 +1,88 @@
 <template>
-  <div>
-    <h1 style="color:#fff">阅览室</h1>
+  <div class=" warehouse">
+    <!-- <h1>全景图</h1> -->
+    <div class="warehouse-left">
+      <div class="left-3d">
+        <iframe
+          class="iframe_box"
+          src="/web/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="700px"
+        :data="tableData"
+      >
+        <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: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.tableData = data1.rows
+      console.log()
+    },
+    // 表格隔行变色
+    rowBgColor({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'light-blue'
+      } else {
+        return ''
+      }
+    }
+  }
 }
 </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;
+    }
+  }
+
+.title-arrow{
+  position: relative;
+  &::before{
+    background: url('../../../../assets/images/warehouse_arrow_left.png') no-repeat;
+  }
+  &::after{
+    background: url('../../../../assets/images/warehouse_arrow_right.png') no-repeat;
+  }
+}
 </style>