视频回放

packages/IntelligentSecurity/components/Timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="canvas" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
+  <div :class="wrapper" class="canvas" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
     <canvas
       :id="id"
       :style="{height: '52px'}"
@@ -32,9 +32,11 @@
         time: '',
         left: 0,
         x: 0,
+        ratioW: '',
         isHide: true,
         isInit: false,
         isChoose: false,
+        wrapper: `canvas-${new Date().getTime()}`,
         id: `timeline-${new Date().getTime()}`,
         timer: null
       }
@@ -112,8 +114,8 @@
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
-            this.canvasWidth = document.querySelector('.canvas').offsetWidth
-            this.canvasHeight = document.querySelector('.canvas').offsetHeight
+            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
 
             this.$nextTick(() => {
               const el = document.querySelector(`#${this.id}`)