3D库房全景图

3 years ago · d5e73b5495
17 changed files with 410 additions and 2 deletions
--- a/public/web/index.html
+++ b/public/web/index.html
@ -825,10 +825,10 @@
 <body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <!-- <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
    </el-dialog> -->
  </div>
 	<div class="divTransform">
--- a/src/assets/icons/svg/alerm.svg
+++ b/src/assets/icons/svg/alerm.svg
@ -0,0 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 1024 1022.1" style="enable-background:new 0 0 1024 1022.1;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#F65163;}
 </style>
 <path id="报警记录" class="st0" d="M247.2,520.4V727h546.6V505.5C786.9,354.5,658.9,237.8,508,244.7
 	c-141.2,6.5-254.3,119.5-260.7,260.7V520.4z M799.3,314l124.5-89.5c9.9-6.5,12.7-19.7,6.2-29.6c-6.5-9.9-19.7-12.7-29.6-6.2
 	c-0.3,0.2-0.5,0.3-0.7,0.5l-124.5,89.5c-9.6,6.9-11.8,20.2-5,29.9C776.9,317.9,789.7,320.3,799.3,314z M152.4,870v50.2h736.2v-48.3
 	c-0.1-43.2-35.1-78.1-78.3-78.3H232.1c-42.1-2-77.8,30.5-79.9,72.6c-0.1,1.2-0.1,2.4-0.1,3.7L152.4,870z M520.5,193.3
 	c11.3-0.1,20.3-9.2,20.4-20.4V20.3c0-11.3-9.1-20.5-20.4-20.5C509.2-0.2,500,9,500,20.2c0,0,0,0,0,0.1v152.4
 	c0.1,11.3,9.2,20.3,20.4,20.4L520.5,193.3z M241.5,321.4c9,7.4,22.3,6.1,29.7-2.9c7.1-8.6,6.3-21.2-1.8-28.8l-117.1-98.5
 	c-8.5-8-21.8-7.6-29.8,0.9c-8,8.5-7.6,21.8,0.9,29.8c0.3,0.3,0.7,0.6,1,0.9L241.5,321.4z M193.2,542.7c-0.1-11.3-9.2-20.3-20.4-20.4
 	H20.4C9.1,522.2,0,531.4,0,542.7c0,11.3,9.1,20.4,20.4,20.4h152.4c11.3-0.1,20.4-9.2,20.5-20.4H193.2z M103.8,921.9h836.9v100.4
 	H104.1L103.8,921.9z M1003.5,522.2H851.1c-11.3,0-20.4,9.2-20.4,20.5c0,11.3,9.1,20.4,20.4,20.4h152.4c11.3,0,20.5-9.1,20.5-20.4
 	C1024,531.4,1014.9,522.2,1003.5,522.2C1003.6,522.2,1003.5,522.2,1003.5,522.2z"/>
 </svg>
--- a/src/assets/images/tab_archives_logo.png
+++ b/src/assets/images/tab_archives_logo.png
--- a/src/assets/images/tab_collate_logo.png
+++ b/src/assets/images/tab_collate_logo.png
--- a/src/assets/images/tab_fullview_logo.png
+++ b/src/assets/images/tab_fullview_logo.png
--- a/src/assets/images/tab_read_logo.png
+++ b/src/assets/images/tab_read_logo.png
--- a/src/assets/images/table_head_bg.png
+++ b/src/assets/images/table_head_bg.png
--- a/src/assets/images/warehouse_arrow_left.png
+++ b/src/assets/images/warehouse_arrow_left.png
--- a/src/assets/images/warehouse_arrow_right.png
+++ b/src/assets/images/warehouse_arrow_right.png
--- a/src/assets/images/warehouse_tab_active.png
+++ b/src/assets/images/warehouse_tab_active.png
--- a/src/assets/images/warehouse_tab_bg.png
+++ b/src/assets/images/warehouse_tab_bg.png
--- a/src/views/storeManage/warehouse3D/archivesStorage/index.vue
+++ b/src/views/storeManage/warehouse3D/archivesStorage/index.vue
@ -0,0 +1,15 @@
 <template>
  <div>
    <h1 style="color:#fff">档案库</h1>
  </div>
 </template>
 <script>
 export default {
 }
 </script>
 <style lang="scss" scoped>
 </style>
--- a/src/views/storeManage/warehouse3D/collateRoom/index.vue
+++ b/src/views/storeManage/warehouse3D/collateRoom/index.vue
@ -0,0 +1,15 @@
 <template>
  <div>
    <h1 style="color:#fff">整理室</h1>
  </div>
 </template>
 <script>
 export default {
 }
 </script>
 <style lang="scss" scoped>
 </style>
--- a/src/views/storeManage/warehouse3D/data1.json
+++ b/src/views/storeManage/warehouse3D/data1.json
@ -0,0 +1,100 @@
 {
  "rows":[
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    },
    {
      "time":"2022-6-30 13:00",
      "warehouse":"文书档案库房",
      "warning":"温度温度温度温度温度温度"
    }
  ]
 }
--- a/src/views/storeManage/warehouse3D/fullView/index.vue
+++ b/src/views/storeManage/warehouse3D/fullView/index.vue
@ -0,0 +1,138 @@
 <template>
  <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"
        />
        <h2 class="title-arrow">
          3D库房
        </h2>
      </div>
    </div>
    <div class="warehouse-right container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <h3>
        <p class="title-arrow"><svg-icon icon-class="alerm" class-name="svg-style" />报警记录</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>
 .iframe_box{
  width: 100%;
  height: calc(100vh - 285px);
 }
 .warehouse{
  display: flex;
  .warehouse-left{
    flex: 1;
    position: relative;
    h2{
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      color: #fff;
      font-size: 16px;
    }
  }
  .warehouse-right{
    width: 460px;
    h3{
      color: #fff;
      font-size: 16px;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
    p{
      display: inline-block;
    }
  }
 }
 ::v-deep .el-table .el-table__header .el-table__cell{
  padding: 0;
  height: 30px;
  .cell{
    font-size: 14px;
  }
 }
 ::v-deep .light-blue{
  background-color: #011E4F !important;
 }
 .title-arrow{
  position: relative;
  &::before{
    content:'';
    width: 36px;
    height: 12px;
    background: url('../../../../assets/images/warehouse_arrow_left.png') no-repeat;
    position: absolute;
    left: -70px;
    top: 50%;
    transform: translateY(-50%);
  }
  &::after{
    content:'';
    width: 36px;
    height: 12px;
    background: url('../../../../assets/images/warehouse_arrow_right.png') no-repeat;
    position: absolute;
    right: -70px;
    top: 50%;
    transform: translateY(-50%);
  }
 }
 .svg-style{
  margin:0 10px 1px 0;
 }
 </style>
--- a/src/views/storeManage/warehouse3D/index.vue
+++ b/src/views/storeManage/warehouse3D/index.vue
@ -0,0 +1,107 @@
 <template>
  <div class="app-container 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>
  </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'
 export default {
  name: 'Warehouse3D',
  components: { fullView, archivesStorage, readRoom, collateRoom },
  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'
    }
  },
  methods: {
    changeActiveTab(data) {
      this.activeIndex = data
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .warehouse-tab{
  color: #3298FA;
  .warehouse-nav{
    display: flex;
    position: absolute;
    bottom: 17px;
    left: 20px;
    z-index: 11;
    // background-color: #021941 !important;
    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: #021941 ;
      // border: 1px solid #113d72;
      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>
--- a/src/views/storeManage/warehouse3D/readRoom/index.vue
+++ b/src/views/storeManage/warehouse3D/readRoom/index.vue
@ -0,0 +1,15 @@
 <template>
  <div>
    <h1 style="color:#fff">阅览室</h1>
  </div>
 </template>
 <script>
 export default {
 }
 </script>
 <style lang="scss" scoped>
 </style>