视频回放

packages/IntelligentSecurity/components/Timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapper" class="canvas" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
+  <div :class="wrapper" class="canvas" @click="onClick"  @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
     <canvas
       :id="id"
       :style="{height: '52px'}"
@@ -21,7 +21,7 @@
 
 <script>
   export default {
-    props: ['isLiveing'],
+    props: ['isLiveing', 'times'],
 
     data () {
       return {
@@ -43,9 +43,16 @@
     },
 
     watch: {
-      isLiveing (v) {
-        if (v) {
-          this.countdown()
+      isLiveing () {
+        this.countdown()
+      },
+
+      times: {
+        deep: true,
+        handler (v) {
+          if (v.length && this.ctx) {
+            this.init()
+          }
         }
       }
     },
@@ -56,8 +63,11 @@
       })
     },
 
-    methods: {
+    destroyed () {
+      clearInterval(this.timer)
+    },
 
+    methods: {
       onMousemove (e) {
         const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
         const seconds = 24 * 60 * 60
@@ -77,38 +87,49 @@
         }
       },
 
+      onClick (e) {
+        const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
+
+        if (e.clientY - canvasInfo.top < 29) {
+          this.x = e.clientX - canvasInfo.left - 4
+          clearInterval(this.timer)
+          this.timer = null
+          const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+          this.$emit('replay', time)
+        }
+      },
+
       onDragDown () {
-        this.$emit('pause')
-        clearInterval(this.timer)
-        this.timer = null
         this.isChoose = true
       },
 
       onMouseUp () {
+        if (!this.isChoose) return
+
+        clearInterval(this.timer)
+        this.timer = null
         this.isChoose = false
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        this.$emit('replay', time)
       },
 
       secTotime (s) {
-        var t = ''
-        if(s > -1){
-          var hour = Math.ceil(s / 3600)
-          var min = Math.ceil(s / 60) % 60
-          var sec = s % 60
-          if(hour < 10) {
-            t = '0'+ hour + ":"
-          } else { 
-            t = hour + ":"
-          } 
-          if(min < 10){
-            t += "0"
-          } 
-          t += min + ":"
-          if(sec < 10){
-            t += "0"
-          } 
-          t += sec.toFixed(0)
-        } 
-        return t
+        let second = parseInt(s)
+        let minute = 0
+        let hour = 0
+        if (second > 60) {
+          minute = parseInt(second / 60)
+          second = parseInt(second % 60)
+          if (minute > 60) {
+            hour = parseInt(minute / 60)
+            minute = parseInt(minute % 60)
+          }
+        }
+
+        hour = `${parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)}`
+        minute = `${parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)}`
+        second = `${parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)}`
+        return `${hour}:${minute}:${second}`
       },
 
       init () {
@@ -141,7 +162,11 @@
 
       countdown () {
         this.timer = setInterval(() => {
-          this.initNowTime()
+          if (this.isLiveing) {
+            this.initNowTime()
+          } else {
+            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
+          }
         }, 1000)
       },
 
@@ -149,7 +174,7 @@
         const date = new Date()
         const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()
 
-        this.x = seconds / (24 * 60 * 60) * this.canvasWidth
+        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
       },
 
       drawLine(ctx, options) {
@@ -164,18 +189,17 @@
 
       renderPlayback () {
         const ctx = this.ctx
-        for (let i = 0; i < 24 * 60 * 60; i ++) {
-          if ((i + 1) % 3 !== 0) {
-            this.drawLine(ctx, {
-              beginX: i,
-              beginY: 28,
-              endX: i,
-              endY: 0,
-              lineColor: 'rgba(0, 156, 255, 1)',
-              lineWidth: 1
-            })
-          }
-        }
+        const unit = this.canvasWidth / (24 * 60 * 60)
+        this.times.forEach(item => {
+          this.drawLine(ctx, {
+            beginX: item.startTime * unit,
+            beginY: 28,
+            endX: item.startTime * unit,
+            endY: 0,
+            lineColor: 'rgba(0, 156, 255, 1)',
+            lineWidth: item.endTime * unit - item.startTime * unit
+          })
+        })
       },
 
       renderTimeLine () {