29258

packages/IntelligentSecurity/components/PlaybackTime.vue

@@ -12,7 +12,7 @@
 
 <script>
   export default {
-    props: ['times'],
+    props: ['times', 'deviceId'],
 
     data () {
       return {
@@ -21,7 +21,7 @@
         canvasHeight: '',
         isInit: false,
         wrapper: `canvas-${new Date().getTime()}`,
-        id: `timeline-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}-${this.deviceId}`,
         timer: null
       }
     },
@@ -49,6 +49,10 @@
 
     methods: {
       init () {
+        if (this.ctx) {
+          this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        }
+        this.isInit = false
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
@@ -60,16 +64,7 @@
               this.ctx = el.getContext('2d')
               this.ctx.width  = document.querySelector('.canvas').offsetWidth
               this.ctx.height  = document.querySelector('.canvas').offsetHeight
-
-              if (this.x > 0) {
-                // this.x = this.canvasWidth * this.ratioW
-              } else {
-                // this.initNowTime()
-              }
-
               this.renderPlayback()
-
-              // this.countdown()
             })
           })
         })