报警记录，门禁记录定时请求，摄像头修改

src/views/components/SecurityDoor.vue

@@ -38,17 +38,19 @@ export default {
   },
   data() {
     return {
-      tableData: [] // 正在展示的数据
+      tableData: [], // 正在展示的数据
+      time: null
     }
   },
   created() {
-    securitydoor().then((data) => {
-      if (data && data.length > 0) {
-        this.tableData.push(...data)
-      }
-    })
+    this.getSecuritydoor()
+    this.time = setInterval(() => {
+      this.getSecuritydoor()
+    }, 1000 * 30)
   },
   destroyed() {
+    clearInterval(this.time)
+    this.time = null
   },
   methods: {
     // 表格隔行变色
@@ -58,6 +60,13 @@ export default {
       } else {
         return ''
       }
+    },
+    getSecuritydoor() {
+      securitydoor().then((data) => {
+        if (data && data.length > 0) {
+          this.tableData.splice(0, data.length, ...data)
+        }
+      })
     }
   }
 }

src/views/components/WarehouseWarning.vue

@@ -9,8 +9,8 @@
     </h3>
     <!--表格渲染-->
     <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
-      <el-table-column prop="alarm_time" label="时间" align="center" min-width="70" />
-      <el-table-column prop="area_name" label="库房" align="center" min-width="35" />
+      <el-table-column prop="alarm_time" label="时间" align="center" min-width="60" />
+      <el-table-column prop="area_name" label="库房" align="center" :show-overflow-tooltip="true" min-width="30" />
       <el-table-column prop="event_name" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
     </el-table>
   </div>
@@ -35,7 +35,10 @@ export default {
   },
   data() {
     return {
-      tableData: [] // 正在展示的警情数据
+      tableData: [], // 正在展示的警情数据
+      scrollTimer: null,
+      showComplete: false, // 是否滚动显示完所有数据
+      getDataTimer: null
     }
   },
   watch: {
@@ -45,14 +48,19 @@ export default {
     }
   },
   created() {
-    alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
-      if (data && data.length > 0) {
-        this.tableData.push(...data)
+    this.getAlarmInfo()
+    this.getDataTimer = setInterval(() => {
+      if (this.showComplete) {
+        this.getAlarmInfo()
+        this.showComplete = false
       }
-    })
+    }, 1000 * 30)
   },
   destroyed() {
-    clearInterval(this.timer)
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+    clearInterval(this.getDataTimer)
+    this.getDataTimer = null
   },
   methods: {
     // 表格隔行变色
@@ -65,17 +73,18 @@ export default {
     },
     // table滚动
     tableRefScroll() {
-      clearInterval(this.timer) // 清除定时器
+      clearInterval(this.scrollTimer) // 清除定时器
       const table = this.$refs.table // 获取DOM元素
-      const wrapperHeight = table.$el.offsetHeight - 30
-      // 组件一页能展示的数据条数
-      this.displayNum = Math.floor(wrapperHeight / 40)
+      this.wrapperHeight = table.$el.offsetHeight - 30
+      console.log(this.wrapperHeight)
+      // 组件一页能完整展示的数据条数
+      this.displayNum = Math.floor(this.wrapperHeight / 40)
       if (this.tableData.length > this.displayNum) {
         const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
         this.addTableRefScroll(bodyWrapper)
         // 鼠标移入
         bodyWrapper.onmouseover = () => {
-          clearInterval(this.timer)
+          clearInterval(this.scrollTimer)
         }
         // 鼠标移出
         bodyWrapper.onmouseout = () => {
@@ -86,10 +95,12 @@ export default {
     addTableRefScroll(bodyWrapper) {
       // let scrollTop = bodyWrapper.scrollTop
       if (this.displayNum && this.displayNum > 0) {
-        this.timer = setInterval(() => {
+        this.scrollTimer = setInterval(() => {
           // scrollTop = bodyWrapper.scrollTop
-          if (Math.round(bodyWrapper.scrollTop / 40) >= this.tableData.length - this.displayNum) {
+          console.log(bodyWrapper.scrollTop, bodyWrapper.scrollTop >= (this.tableData.length - this.displayNum) * 40)
+          if (bodyWrapper.scrollTop + this.wrapperHeight >= this.tableData.length * 40) {
             bodyWrapper.scrollTop = 0
+            this.showComplete = true
           } else {
             bodyWrapper.scrollTop += this.displayNum * 40
           }
@@ -106,6 +117,13 @@ export default {
           // }
         }, 1000 * 3 * this.displayNum)
       }
+    },
+    getAlarmInfo() {
+      alarmApi.info({ storeroomId: this.storeroomId }).then((data) => {
+        if (data && data.length > 0) {
+          this.tableData.splice(0, data.length, ...data)
+        }
+      })
     }
   }
 }

src/views/storeManage/warehouse3D/index.vue

@@ -22,7 +22,7 @@
       <component :is="comName" />
     </div>
     <!-- 摄像头视频 -->
-    <Video ref="camera" />
+    <Video ref="camera" :dialog-open.sync="open" />
   </div>
 </template>
 
@@ -40,7 +40,8 @@ export default {
   data() {
     return {
       activeIndex: 0,
-      camConfigData: []
+      camConfigData: [],
+      open: false
     }
   },
   computed: {
@@ -95,11 +96,13 @@ export default {
           if (camConfig && camConfig.isDisplay && camConfig.bindState) {
           //   console.log(2, camConfig)
           //   // ToDo....
-            this.$refs.camera.openVideoVisible = true
+            this.open = true
+            this.$nextTick(() => {
               // 后期看接口调试变化
               this.$refs.camera.camConfig = camConfig
               this.$refs.camera.videoTitle = data
               this.$refs.camera.play()
+            })
           }
         }
       }

src/views/storeManage/warehouse3D/module/video.vue

@@ -1,10 +1,14 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :visible="openVideoVisible" :before-close="handleClose" :title="videoTitle" @opened="opened">
+  <el-dialog :close-on-click-modal="false" :visible.sync="openVideoVisible" :before-close="handleClose" :title="videoTitle" width="1068px" @opened="opened">
     <span class="dialog-right-top" />
     <span class="dialog-left-bottom" />
     <div class="setting-dialog">
       <!-- :src="videoSrc" controls-->
-      <div ref="canvas-wrap" />
+      <div ref="canvas-wrap" style="height:768px">
+        <template v-if="noSignal">
+          <div> 无信号 </div>
+        </template>
+      </div>
     </div>
   </el-dialog>
 </template>
@@ -14,19 +18,38 @@ import JSMpeg from '@/components/jsmpeg'
 import axios from 'axios'
 import qs from 'qs'
 export default {
+  props: {
+    dialogOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      openVideoVisible: false,
       videoTitle: '',
       camConfig: null,
-      player: null
+      player: null,
+      noSignal: true
     }
   },
   computed: {
     rtspUrl: function() {
       return 'rtsp://' + this.camConfig.deviceInfo.deviceAccount + ':' + this.camConfig.deviceInfo.devicePassword + '@' + this.camConfig.deviceInfo.deviceIp + ':' + this.camConfig.deviceInfo.devicePort + '/' + this.camConfig.deviceInfo.videoRoute + '/1'
+    },
+    openVideoVisible: {
+      get() {
+        return this.dialogOpen
+      },
+      set(value) {
+        this.$emit('update:dialogOpen', value)
+      }
     }
   },
+  beforeDestroy() {
+    this.player?.stop()
+    this.player?.destroy()
+    this.player = null
+  },
   methods: {
     handleClose(done) {
       this.openVideoVisible = false
@@ -44,7 +67,6 @@ export default {
         this.player?.stop()
         this.player?.destroy()
         this.player = null
-        // })
         done()
       })
     },
@@ -65,7 +87,15 @@ export default {
         // var canvas = document.getElementById('canvas')
         const opt = {
           contianer: this.$refs['canvas-wrap'],
-          poster: '0.jpg'
+          poster: '0.jpg',
+          onSourceEstablished: (source) => {
+            console.log('onSourceEstablished')
+            // this.flags.noSignal = false
+            this.noSignal = false
+            // clearTimeout(this.timers.noSignal)
+            // this.timers.noSignal = null
+            this.$emit('source-established', source)
+          }
         }
         this.player = new JSMpeg.Player(url, opt)
       })
@@ -76,6 +106,6 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-dialog {
-  width: auto;
+  height: 835xp;
 }
 </style>