diff --git a/src/apps/AppIntelligentSecurity/components/Timeline.vue b/src/apps/AppIntelligentSecurity/components/Timeline.vue index a603fc7a..a045df03 100644 --- a/src/apps/AppIntelligentSecurity/components/Timeline.vue +++ b/src/apps/AppIntelligentSecurity/components/Timeline.vue @@ -2,7 +2,8 @@
- + +
@@ -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;