29272

src/apps/AppIntelligentSecurity/components/Timeline.vue

@@ -2,7 +2,8 @@
   <div :class="wrapper" class="canvas" v-if="isInit" style="height: 52px">
     <canvas class="canvas" :id="id" :canvas-id="id" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" v-if="canvasWidth" :width="canvasWidth" @click.stop="onClick" :height="canvasHeight">
     </canvas>
-    <img class="drag-img" :style="{left: x + 'px'}" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
+    <em :style="{height: '24px', left: x + 'px'}"></em>
+    <img class="drag-img" :style="{ left: x + 'px'}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
   </div>
 </template>
 
@@ -55,23 +56,36 @@
     },
 
     methods: {
-      onMousemove (e) {
-        const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
-        const seconds = 24 * 60 * 60
+      touchmove (e) {
+        console.log(e)
+        this.x = e.touches[0].clientY
+        // const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
+        // const seconds = 24 * 60 * 60
 
-        if (e.clientY - canvasInfo.top < 29) {
-          const x = e.clientX - canvasInfo.left
-          const unit = seconds / this.canvasWidth * x
-          this.left = x
-          this.time = this.secTotime(unit)
-          this.isHide = false
+        // if (e.clientY - canvasInfo.top < 29) {
+        //   const x = e.clientX - canvasInfo.left
+        //   const unit = seconds / this.canvasWidth * x
+        //   this.left = x
+        //   this.time = this.secTotime(unit)
+        //   this.isHide = false
 
-          if (!this.isChoose) return
-          this.x = e.clientX - canvasInfo.left
-          this.ratioW = this.x / this.canvasWidth
-        } else {
-          this.isHide = true
-        }
+        //   if (!this.isChoose) return
+        //   this.x = e.clientX - canvasInfo.left
+        //   this.ratioW = this.x / this.canvasWidth
+        // } else {
+        //   this.isHide = true
+        // }
+      },
+
+      touchstart (e) {
+
+      },
+
+      touchend (e) {
+        clearInterval(this.timer)
+        this.timer = null
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        this.$emit('replay', time)
       },
 
       onClick (e) {
@@ -232,6 +246,16 @@
     position: relative;
     width: 100%;
 
+    & > em {
+      position: absolute;
+      bottom: 0;
+      z-index: 11;
+      width: 4px;
+      height: 24px;
+      background: #fff;
+      transform: translateX(-50%);
+    }
+
     .drag-img {
       position: absolute;
       left: 0;