前端

src/api/V2/tradeServicesManagement/index.js

@@ -44,4 +44,9 @@ export const API_OPENLOCK = '/warehousePositionInfo/api/openLock'
 // 借款公司
 export const API_COMPANY = '/tradeWarehouseReceiptAppl/selectBorrowingCompany'
 // 在押
-export const API_GET_DETAINEDWEIGHT = '/tradeWarehouseReceiptAppl/detainedWeight'
+export const API_GET_DETAINEDWEIGHT = '/tradeWarehouseReceiptAppl/detainedWeight'
+
+export const API_GET_VIDEO_LIST = '/tradeWarehouseReceiptAppl/selectmonitorList'
+
+export const API_GET_VIDEO_LIST_MORE = '/warehouseMonitorDetail/getMonitor'
+

src/layout/index/top/index.vue

@@ -736,7 +736,7 @@
 
       },
       handleScreen() {
-        fullscreenToggel()
+        fullscreenToggel(this.$router.currentRoute.name)
       },
       setCollapse() {
         this.$store.commit('SET_COLLAPSE')

src/model/tradeServicesManagement/index.js

@@ -21,11 +21,18 @@ import {
     API_GET_SETDEFAULT,
     API_SET_SETDEFAULT,
     API_OPENLOCK,
+    API_GET_VIDEO_LIST,
+    API_GET_VIDEO_LIST_MORE,
     API_COMPANY,
     API_GET_DETAINEDWEIGHT
 } from '@/api/V2/tradeServicesManagement'
 // 列表
 export const getList = appRx.get(API_GET_TRADESERVICES_LIST, errorCatcher, errorHandle, filter)
+
+export const getVideoList = appRx.get(API_GET_VIDEO_LIST, errorCatcher, errorHandle, filter)
+
+export const getVideoListMore = appRx.get(API_GET_VIDEO_LIST_MORE, errorCatcher, errorHandle, filter)
+
 export const getMapInfo = appRx.get(API_GET_MAPINFO, errorCatcher, errorHandle, filter)
 // 添加
 export const addList = appRx.post(API_POST_RECEIPTAPPL_ADD, errorCatcher, errorHandle, filter)

src/utils/util.js

@@ -20,18 +20,18 @@ export const loadStyle = (url, callback) => {
   }
 };
 
-export const allRoles=()=>{
-  var currectRole={
-    roleName:'',
-    roles:[]
+export const allRoles = () => {
+  var currectRole = {
+    roleName: '',
+    roles: []
   }
-  var roles=JSON.parse(localStorage.getItem('winseaview-userInfo')).content.roles
-  currectRole.roles=roles
+  var roles = JSON.parse(localStorage.getItem('winseaview-userInfo')).content.roles
+  currectRole.roles = roles
   for (let i = 0; i < roles.length; i++) {
-    if(currectRole.roleName==''){
-      currectRole.roleName=roles[i].roleName
-    }else{
-      currectRole.roleName=currectRole.roleName+','+roles[i].roleName
+    if (currectRole.roleName == '') {
+      currectRole.roleName = roles[i].roleName
+    } else {
+      currectRole.roleName = currectRole.roleName + ',' + roles[i].roleName
     }
   }
   return currectRole
@@ -66,11 +66,11 @@ const isInclude = (name) => {
 }
 const addCallback = (obj, callback) => {
   if (obj.addEventListener) {
-    obj.addEventListener('load', function() {
+    obj.addEventListener('load', function () {
       callback && callback();
     }, false);
   } else if (obj.attachEvent) {
-    obj.attachEvent('onreadystatechange', function() {
+    obj.attachEvent('onreadystatechange', function () {
       var target = window.event.srcElement;
       if (target.readyState == 'loaded') {
         callback && callback();
@@ -178,11 +178,11 @@ export const encryption = (params) => {
 /**
  * 浏览器判断是否全屏
  */
-export const fullscreenToggel = () => {
+export const fullscreenToggel = (val) => {
   if (fullscreenEnable()) {
-    exitFullScreen();
+    exitFullScreen(val);
   } else {
-    reqFullScreen();
+    reqFullScreen(val);
   }
 };
 /**
@@ -192,16 +192,16 @@ export const listenfullscreen = (callback) => {
   function listen() {
     callback()
   }
-  document.addEventListener('fullscreenchange', function() {
+  document.addEventListener('fullscreenchange', function () {
     listen();
   });
-  document.addEventListener('mozfullscreenchange', function() {
+  document.addEventListener('mozfullscreenchange', function () {
     listen();
   });
-  document.addEventListener('webkitfullscreenchange', function() {
+  document.addEventListener('webkitfullscreenchange', function () {
     listen();
   });
-  document.addEventListener('msfullscreenchange', function() {
+  document.addEventListener('msfullscreenchange', function () {
     listen();
   });
 };
@@ -216,8 +216,18 @@ export const fullscreenEnable = () => {
 /**
  * 浏览器全屏
  */
-export const reqFullScreen = () => {
-  let _documentDom = document.getElementById('index')
+export const reqFullScreen = (val) => {
+  let _documentDom = ""
+  if (val == "warehouseReceiptVideoMonitoring") {
+    _documentDom = document.getElementById('warehouseReceiptVideoMonitoring')
+
+  } else if (val == 'warehouseReceiptVideoMonitoringMore') {
+
+    _documentDom = document.getElementById('warehouseReceiptVideoMonitoringMore')
+  }
+  else {
+    _documentDom = document.getElementById('index')
+  }
   if (_documentDom.requestFullScreen) {
     _documentDom.requestFullScreen();
   } else if (_documentDom.webkitRequestFullScreen) {
@@ -225,20 +235,13 @@ export const reqFullScreen = () => {
   } else if (_documentDom.mozRequestFullScreen) {
     _documentDom.mozRequestFullScreen();
   }
-  // if (document.documentElement.requestFullScreen) {
-  //   document.documentElement.requestFullScreen();
-  // } else if (document.documentElement.webkitRequestFullScreen) {
-  //   document.documentElement.webkitRequestFullScreen();
-  // } else if (document.documentElement.mozRequestFullScreen) {
-  //   document.documentElement.mozRequestFullScreen();
-  // }
 };
 /**
  * 浏览器退出全屏
  */
 export const exitFullScreen = () => {
   let _documentDom = document.getElementById('contentView')
-    if (_documentDom.requestFullScreen) {
+  if (_documentDom.requestFullScreen) {
     document.exitFullScreen();
   } else if (_documentDom.webkitRequestFullScreen) {
     document.webkitCancelFullScreen();
@@ -307,7 +310,7 @@ export const diff = (obj1, obj2) => {
 export const findByvalue = (dic, value) => {
   let result = '';
   if (validatenull(dic)) return value;
-  if (typeof(value) == 'string' || typeof(value) == 'number' || typeof(value) == 'boolean') {
+  if (typeof (value) == 'string' || typeof (value) == 'number' || typeof (value) == 'boolean') {
     let index = 0;
     index = findArray(dic, value);
     if (index != -1) {
@@ -436,7 +439,7 @@ export const getValue = (route) => {
 
 // null赋值空字符串
 export const nullToString = (obj) => {
-  Object.keys(obj).forEach(function(key) {
+  Object.keys(obj).forEach(function (key) {
     console.log(key, obj[key])
     if (obj[key] === null) {
       obj[key] = ''

src/views/tradeServicesManagement/component/routers/route.js

@@ -82,6 +82,22 @@ const tradeServicesManagementRouter = {
           },
           hidden: false
         },
+        {
+          path: 'warehouseReceiptVideoMonitoringMore',
+          component: () =>
+            import( /* webpackChunkName: "applDetail" */
+              '@/views/tradeServicesManagement/warehouseReceiptVideoMonitoringMore'),
+          name: 'warehouseReceiptVideoMonitoringMore',
+          meta: {
+            title: '仓单更多视频监控',
+            shortcutEntrance: 'warehouseReceiptRegulation',
+            module: 'tradeServicesManagement.tradeService.view',
+            permissicon: [],
+            keepAlive: true,
+            _title:'仓单更多视频监控'
+          },
+          hidden: true
+        },
     //创建仓单
     {
       path: 'warehouseReceiptAdd',

src/views/tradeServicesManagement/dataAnalysisPlatform.vue

@@ -1,224 +1,226 @@
 //贸易服务管理
 <template>
-  <div class="container">
-   <div class='tip'>火爆开发中...</div>
+  <div class="content">
+    <dv-full-screen-container class="screen-container">
+      <!-- <div class="host-body">
+        <div class="d-flex jc-center title_wrap">
+          <div class="zuojuxing"></div>
+          <div class="youjuxing"></div>
+          <div class="guang"></div>
+          <div class="d-flex jc-center">
+            <div class="title">
+              <span class="title-text">易粮易运大数据分析平台</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row-content">
+        <div class="left">1</div>
+        <div class="center">2</div>
+        <div class="right">3</div>
+      </div> -->
+    </dv-full-screen-container>
   </div>
 </template>
 <script>
-  import mapDrag from '@/components/mapdrag/warehouseReceiptMap'
-  import {
-    getList
-  } from '@/model/tradeServicesManagement/index'
-  import {
-    selectWarehouseSelf,
-  } from '@/model/houseSelfCollect/index'
-  export default {
-    components: {
-      mapDrag
-    },
-    data() {
-      return {
-        searchVal: '',
-        searchKeyWord: '',
-        isActive: false,
-        radio: '1',
-        tradeServicesList: [],
-        currentPage: 1,
-        pageSize: 10,
-        deptBudgetTotal: 0,
-        deptCircularPage: {},
-        searchType: '0',
-        warehouseList: [],
-        compId:'',
-      }
-    },
-    activated() {},
-    beforeCreate() {
-      document.querySelector('body').setAttribute('style', 'overflow:hidden;')
-    },
-    mounted() {
-      let height = document.body.offsetHeight - 57
-      document.querySelector('.container').setAttribute('style', 'height:' + height + 'px;')
-      let _showPage = localStorage.getItem('warehouseReceiptRegulation_selectShowType')
-      if (_showPage == "1") {
-        this.radio = '1'
-        this.isActive = false
-      } else if (_showPage == "2") {
-        this.radio = '2'
-        this.isActive = true
-      } else {
-        this.radio = '1'
-        this.isActive = false
-      }
-      this.compId = localStorage.getItem('ws-pf_compId')
-      this.getList()
-      // this.getWarehouseList()
-      this.tradeServicesList = [{
-        authenticationStatus: 'test'
-      }]
-    },
-    methods: {
-      findList() {
-        this.currentPage=1
-        this.pageSize=10
-        this.getList()
-      },
-      handlestatus(status) {
-        this.searchType = status
-        // this.currentPage:=1
-        // this.pageSize=10
-        // this.getList()
-      },
-      lookBtnClick(val1, val2) {
-        this.$router.push({
-          name: 'warehouseReceiptLook'
-        })
-      },
-      toExamineBtnClick(val1, val2) {
-        this.$router.push({
-          name: 'reviewWarehouseReceipt'
-        })
-      },
-      approveBtnClick(val1, val2) {
-        this.$router.push({
-          name: 'approveWarehouseReceipt'
-        })
-      },
-      repaymentBtnClick(val1, val2) {
-        this.$router.push({
-          name: 'repayment'
-        })
-      },
-      rowEditBtnClick(val1, val2) {
-        this.$router.push({
-          name: 'warehouseReceiptEdit'
-        })
-      },
-      rowDeleteBtnClick(val1, val2) {},
-      handleSizeChange(val) {
-        console.log(`每页 ${val} 条`)
-        this.pageSize = val
-        this.getWarehouseList()
-        this.getList()
-      },
-      handleCurrentChange(val) {
-        this.currentPage = val
-        console.log(`当前页: ${val}`)
-        this.getList()
-      },
-      startHacking() {
-        this.isActive = true
-      },
-      startHacking1() {
-        this.isActive = false
-      },
-      getWarehouseList() {
-        selectWarehouseSelf({
-            compId: this.compId
-          })
-          .toPromise()
-          .then(response => {
-            this.warehouseList = response
-          })
-      },
-      getList(e, type) {
-        if (type == 1) {
-          this.isActive = true
-        }
-        getList({
-            compId: this.compId,
-            currentPage: this.currentPage,
-            pageSize: this.pageSize,
-            searchType: this.searchType,
-            searchKeyWord: this.searchKeyWord,
-          })
-          .toPromise()
-          .then((response) => {
-            console.log('列表数据', response)
-            this.tradeServicesList = response.data.records
-          })
-      },
-      selectShowType(e) {
-        this.activated = !this.activated;
-        localStorage.setItem('warehouseReceiptRegulation_selectShowType', e)
-      },
-      add() {
-        this.$router.push({
-          name: 'warehouseReceiptAdd'
-        })
-      }
+import mapDrag from '@/components/mapdrag/warehouseReceiptMap'
+import {
+  getList
+} from '@/model/tradeServicesManagement/index'
+import {
+  selectWarehouseSelf,
+} from '@/model/houseSelfCollect/index'
+export default {
+  components: {
+    mapDrag
+  },
+  data() {
+    return {
+      searchVal: '',
+
     }
+  },
+  activated() { },
+  beforeCreate() {
+
+  },
+  mounted() {
+    // let height = document.body.offsetHeight - 57
+    // document.querySelector('.container').setAttribute('style', 'height:' + height + 'px;')
+    // let _showPage = localStorage.getItem('warehouseReceiptRegulation_selectShowType')
+    // if (_showPage == "1") {
+    //   this.radio = '1'
+    //   this.isActive = false
+    // } else if (_showPage == "2") {
+    //   this.radio = '2'
+    //   this.isActive = true
+    // } else {
+    //   this.radio = '1'
+    //   this.isActive = false
+    // }
+    // this.compId = localStorage.getItem('ws-pf_compId')
+    // this.getList()
+    // // this.getWarehouseList()
+    // this.tradeServicesList = [{
+    //   authenticationStatus: 'test'
+    // }]
+  },
+  methods: {
+    // getList(e, type) {
+    //   if (type == 1) {
+    //     this.isActive = true
+    //   }
+    //   getList({
+    //       compId: this.compId,
+    //       currentPage: this.currentPage,
+    //       pageSize: this.pageSize,
+    //       searchType: this.searchType,
+    //       searchKeyWord: this.searchKeyWord,
+    //     })
+    //     .toPromise()
+    //     .then((response) => {
+    //       console.log('列表数据', response)
+    //       this.tradeServicesList = response.data.records
+    //     })
+    // },
   }
+}
 </script>
 <style lang="scss" scoped>
-  .tip{
-    width: 300px;
-    height: 100px;
-    font-size: 48px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-  .container {
+.content {
+  width: 100%;
+  height: 100%;
+  padding: 16px 16px 10px 16px;
+  box-sizing: border-box;
+  background-image: url("../../assets/images/sj.png");
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+}
+
+.screen-container {
+  position: absolute !important;
+  left: 0;
+  top: 0;
+}
+
+.host-body {
+
+  .title_wrap {
+    height: 60px;
+    background-image: url("../../assets/images/top.png");
+    background-size: cover;
+    background-position: center center;
     position: relative;
-  }
-  .icon{
-    transform: rotate(90deg);
-    margin: 0 10px;
-  }
-  .active {
-    height: 0 !important;
-    overflow: hidden;
-  }
+    margin-bottom: 4px;
 
-  .bottom,
-  .top {
-    display: flex;
-    justify-items: flex-end;
-    height: 5%;
-    align-content: center;
+    .guang {
+      position: absolute;
+      bottom: 0px;
+      background: url("../../assets/images/guang.gif") no-repeat center;
+      background-position: cover;
+      height: 1px;
+      left: 0;
+      right: 0;
+      margin: auto;
+      width: 40%
+    }
+
+    .zuojuxing,
+    .youjuxing {
+      position: absolute;
+      top: -2px;
+      width: 140px;
+      height: 6px;
+      background: url("../../assets/images/headers/juxing1.png");
 
-    .bottom-content,
-    .top-content {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-      padding-right: 25px;
     }
 
-    .bottom-item,
-    .top-item {
-      display: flex;
-      align-items: center;
+    .titlebgc {
+      background: url("../../assets//top.gif") no-repeat center;
+      background-size: cover;
     }
-  }
 
+    .zuojuxing {
+
+      left: 11%;
+    }
 
-  .content2 {
-    // background: pink;
-    padding: 20px;
-    height: calc(100% - 44px);
+    .youjuxing {
+      right: 11%;
+      transform: rotate(180deg);
+    }
 
-    .header {
-      position: relative;
+    .timers {
+      position: absolute;
+      right: 0;
+      top: 30px;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      color: #fff;
 
-      .add {
-        position: absolute;
-        right: 0;
+      .blq-icon-shezhi02 {
+        cursor: pointer;
       }
     }
 
-    .search-input {
-      width: 300px;
-      margin-left: 10px;
+    .btn {
+      position: absolute;
+      left: 0;
+      top: 30px;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      color: #fff;
     }
   }
 
-  .paging {
-    margin-top: 10px;
+  .title {
+    position: relative;
+    // width: 500px;
     text-align: center;
+    background-size: cover;
+    color: transparent;
+    height: 60px;
+    line-height: 46px;
+
+    .title-text {
+      font-size: 38px;
+      font-weight: 900;
+      letter-spacing: 6px;
+      width: 100%;
+      background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+
+.row-content {
+  display: flex;
+
+  .left {
+    background: rgba(2, 0, 77, 0.7);
+
+    border: 2px solid rgba(13, 83, 183, 1);
+
+    box-shadow: inset 0px 0px 34px rgba(17, 40, 255, 0.66);
+    width: 22%;
+
+  }
+
+  .right {
+    background: rgba(2, 0, 77, 0.7);
+
+    border: 2px solid rgba(13, 83, 183, 1);
+
+    box-shadow: inset 0px 0px 34px rgba(17, 40, 255, 0.66);
+    width: 22%;
+  }
+
+  .center {
+    background: green;
+    width: 44%;
   }
-</style>
+}</style>

src/views/tradeServicesManagement/warehouseReceiptVideoMonitoring.vue

@@ -1,15 +1,17 @@
 //贸易服务管理
 <template>
   <div class="container">
-    <div class="content">
+    <div class="content" id="warehouseReceiptVideoMonitoring">
       <div v-for="(item,index) in dataList" class="item" @click="showInfo(item)">
-        <iframe :src='"https://live.eliangeyun.com/play.html?serial="+item.DeviceID+"&code="+item.ID+"&aspect=fullscreen"' allowfullscreen ="true"
+        <iframe :src='item.monitorUrl1' allowfullscreen ="true"
         webkitallowfullscreen="true"
         mozallowfullscreen="true"
         allow="autoplay; fullscreen; microphone;" class="ifram-item"></iframe>
         <div class="mask">
-          <div class="top">
-            黑龙江中天昊元贸易有限公司【鲅鱼圈金信库】
+          <div :class="item.taskNum>1?'green-top':'top'" @click.stop="toMore(item)">
+            <div class="left"> {{item.compName}}【{{item.warehouseName}}】</div>
+            <div class="right"><img src="../../../public/img/more.png" alt="" style="width: 20px;margin-left:10px"></div>
+          
           </div>
         </div>
         <div class="showInfo" v-if="item.check">
@@ -18,7 +20,7 @@
               借款方：
             </div>
             <div class="right">
-              黑龙江中天昊元贸易有限公司
+             {{item.compName}}
             </div>
           </div>
           <div class="row row2">
@@ -26,7 +28,7 @@
               仓单数量：
             </div>
             <div class="right">
-              15个<img src="../../../public/img/eyes.png" alt="" style="width: 20px;margin-left:10px" @click="toPage(item)">
+              {{item.num}}个<img src="../../../public/img/eyes.png" alt="" style="width: 20px;margin-left:10px" @click="toPage(item)">
             </div>
           </div>
           <div class="row row3">
@@ -34,7 +36,7 @@
               金额：
             </div>
             <div class="right">
-              放款100000元/还款10000元/待还90000元
+              放款{{item.paymentAmount}}元/还款{{item.amountRepaid}}元/待还{{item.amountToRepaid}}元
             </div>
           </div>
           <div class="row row4">
@@ -42,23 +44,23 @@
               抵押物：
             </div>
             <div class="right">
-              玉米
+              {{item.goodsName}}
             </div>
           </div>
-          <div class="row row5">
+          <div class="row row4">
             <div class="left">
-              仓库名称：
+              抵押物数量：
             </div>
             <div class="right">
-              鲅鱼圈金信库
+              {{item.dryOutWeight}}
             </div>
           </div>
-          <div class="row row6">
+          <div class="row row5">
             <div class="left">
-              借款方：
+              仓库名称：
             </div>
             <div class="right">
-              黑龙江中天昊元贸易有限公司
+              {{item.warehouseName}}
             </div>
           </div>
         </div>
@@ -67,58 +69,19 @@
   </div>
 </template>
 <script>
-  import mapDrag from '@/components/mapdrag/warehouseReceiptMap'
   import {
-    getList
+    getVideoList
   } from '@/model/tradeServicesManagement/index'
   import {
     selectWarehouseSelf,
   } from '@/model/houseSelfCollect/index'
   export default {
     components: {
-      mapDrag
+      // mapDrag
     },
     data() {
       return {
-          dataList:[
-            {
-            check:false,
-          },
-          {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          },  {
-            check:false,
-          }
-        
-        ],
+          dataList:[],
 
       }
     },
@@ -127,9 +90,22 @@
 
     },
     mounted() {
+      getVideoList({bankId:localStorage.getItem('ws-pf_compId')})
+          .toPromise()
+          .then((response) => {debugger
+            this.dataList =response
+            for(let i = 0;i<this.dataList.length;i++){
+              this.dataList[i].check = false
+            }
+          })
     },
     methods: {
-      showInfo(val){debugger
+      toMore(val){debugger
+        this.$router.push({name:'warehouseReceiptVideoMonitoringMore',query:{
+          warehouseId:val.warehouseId,
+        }})
+      },
+      showInfo(val){
        val.check = !val.check
       },
       toPage(item){
@@ -146,10 +122,9 @@
  .content{
   .item{
     position: relative;
-    width: calc(25% - 8px);
+    width: 25%;
     height: 25vh;
     display: inline-block;
-    margin: 4px;
     
   }
   .ifram-item{
@@ -167,6 +142,16 @@
       color: #fff;
       font-weight: bold;
       padding: 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .green-top{
+      background-color: #3EBC37;
+      color: #fff;
+      font-weight: bold;
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
     }
 
   }
@@ -194,4 +179,5 @@
     }
   }
  }
+
 </style>

src/views/tradeServicesManagement/warehouseReceiptVideoMonitoringMore.vue

@@ -0,0 +1,108 @@
+//贸易服务管理
+<template>
+  <div class="container">
+    <div class="content" id="warehouseReceiptVideoMonitoringMore">
+      <div class="title">黑龙江中天昊元贸易有限公司【鲅鱼圈金信库】所有监控视频</div>
+      <div v-for="(item, index) in dataList" class="item" @click="showInfo(item)">
+        <iframe :src='item.addressUrl' allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"
+          allow="autoplay; fullscreen; microphone;" class="ifram-item"></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getVideoListMore
+} from '@/model/tradeServicesManagement/index'
+import {
+  selectWarehouseSelf,
+} from '@/model/houseSelfCollect/index'
+export default {
+  components: {
+  },
+  data() {
+    return {
+      dataList: [
+        {
+        }
+
+      ],
+
+    }
+  },
+  activated() { },
+  beforeCreate() {
+
+  },
+  mounted() {
+    getVideoListMore({ warehouseId: this.$route.query.warehouseId })
+      .toPromise()
+      .then((response) => {
+        debugger
+        this.dataList = response
+      })
+  },
+  methods: {
+  }
+}
+</script>
+<style lang="scss" scoped>
+ .content{
+  .item{
+    position: relative;
+    width: 25%;
+    height: 25vh;
+    display: inline-block;
+    
+  }
+  .ifram-item{
+    width: 100%;
+    border: 0;
+    height: 100%;
+  }
+  .mask{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    .top{
+      background-color: rgba(15, 21, 58, 0.4);
+      color: #fff;
+      font-weight: bold;
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+  }
+  .showInfo{
+    width: 100%;
+    background: #0F153A;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    padding: 10px;
+    .row{
+      color:#fff;
+      display: flex;
+      align-items: center;
+      margin: 10px;
+      .right{
+        display: flex;
+        align-items: center;
+      }
+    }
+    .row1{
+      color: #F29C25;
+      font-size: 18px;
+      
+    }
+  }
+  .title{
+    display: flex;
+    justify-content: center;
+    font-size: 22px;
+    font-weight: bold;
+  }
+ }
+</style>