视频回放

src/apps/AppIntelligentSecurity/components/Timeline.vue

@@ -1,13 +1,14 @@
 <template>
-  <div :class="wrapper" class="canvas" v-if="isInit" @click="onClick">
+  <div :class="wrapper" class="canvas" v-if="isInit" style="height: 52px">
     <canvas
       class="canvas"
       :id="id"
       :canvas-id="id"
-      :style="{height: '52px'}"
+      :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
       v-if="canvasWidth"
       :width="canvasWidth"
-      height="52">
+      @click.stop="onClick"
+      :height="canvasHeight">
     </canvas>
     <img
       class="drag-img"
@@ -85,7 +86,7 @@
       },
 
       onClick (e) {
-        this.x = e.target.x
+        this.x = e.target.y
         clearInterval(this.timer)
         this.timer = null
         const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
@@ -135,14 +136,11 @@
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
-            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
-            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight
-
+            this.canvasWidth = uni.getSystemInfoSync().windowHeight
+            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight 
             this.$nextTick(() => {
               const el = document.querySelector(`#${this.id}`)
               this.ctx = uni.createCanvasContext(`${this.id}`)
-              // this.ctx.width  = document.querySelector('.canvas').offsetWidth
-              // this.ctx.height  = document.querySelector('.canvas').offsetHeight
 
               if (this.x > 0) {
                 this.x = this.ratioW * this.canvasWidth