29257

packages/IntelligentSecurity/components/Synergy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="synergr" :id="videoId" v-if="isInit" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true">
+  <div class="synergr" :id="videoId" v-if="isInit" @mouseleave="isHide = true" @mousemove.stop="onMousemove" @mouseup="onMouseUp">
     <canvas
       id="synergr-canvas"
       :style="{height: '28px'}"
@@ -8,11 +8,11 @@
       :width="canvasWidth"
       height="28">
     </canvas>
-    <div class="time" v-show="!isHide" :style="{left: left + 'px'}">{{ time }}</div>
+    <div class="time" v-show="!isHide && left > 100" :style="{left: (left) + 'px'}">{{ time }}</div>
     <img
       @mousedown="onDragDown"
       class="drag-img"
-      :style="{left: x + 'px'}"
+      :style="{left: (x) + 'px'}"
       src="https://cdn.cunwuyun.cn/slw2.0/images/drag.png" />
     <div class="slw-bottom">
       <div class="action-bar">
@@ -113,7 +113,7 @@
         isInit: false,
         left: 0,
         date: '',
-        scale: 4,
+        scale: 3,
         width: '',
         isHide: false,
         x: 0,
@@ -152,14 +152,16 @@
       onMousemove (e) {
         const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
         const seconds = 24 * 60 * 60
-        const x = e.clientX - canvasInfo.left
-        const unit = seconds / this.canvasWidth * x
+        const x = e.clientX - canvasInfo.left + 100
+        if (x < 100) return
+
+        const unit = seconds / this.canvasWidth * (x - 100)
         this.left = x
         this.time = this.secTotime(unit)
         this.isHide = false
 
         if (!this.isChoose) return
-        this.x = e.clientX - canvasInfo.left - 4
+        this.x = e.clientX - canvasInfo.left + 100
         this.ratioW = this.x / this.canvasWidth
       },
 
@@ -175,6 +177,9 @@
         this.$emit('backLiveing')
         this.isLiveing = true
         this.initNowTime()
+        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.getSlwPlaybackTime()
       },
 
       onMouseUp () {
@@ -183,7 +188,7 @@
         clearInterval(this.timer)
         this.timer = null
         this.isChoose = false
-        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * (this.x - 100))
         this.$emit('replay', {
           startTime: `${this.form.date} ${time}`,
           endTime: this.form.date + ` ${Number(time.substr(0, 2)) + 6 > 9 ? Number(time.substr(0, 2)) + 6 : '0' + (Number(time.substr(0, 2)) + 6)}:59:59`
@@ -196,13 +201,13 @@
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
-            this.canvasWidth = document.querySelector(`#${this.videoId}`).offsetWidth
+            this.canvasWidth = document.querySelector(`#${this.videoId}`).offsetWidth - 116
             this.canvasHeight = document.querySelector(`#${this.videoId}`).offsetHeight
 
             this.$nextTick(() => {
               const el = document.querySelector(`#synergr-canvas`)
               this.ctx = el.getContext('2d')
-              this.ctx.width  = document.querySelector(`#${this.videoId}`).offsetWidth
+              this.ctx.width  = document.querySelector(`#${this.videoId}`).offsetWidth - 116
               this.ctx.height  = document.querySelector(`#${this.videoId}`).offsetHeight
 
               if (this.x > 0) {
@@ -236,10 +241,10 @@
 
       onClick (e) {
         const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
-        this.x = e.clientX - canvasInfo.left - 4
+        this.x = e.clientX - canvasInfo.left + 100
         clearInterval(this.timer)
         this.timer = null
-        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * (this.x - 100))
         this.$emit('replay', {
           startTime: `${this.form.date} ${time}`,
           endTime: this.form.date + ` ${Number(time.substr(0, 2)) + 6 > 9 ? Number(time.substr(0, 2)) + 6 : '0' + (Number(time.substr(0, 2)) + 6)}:00:00`
@@ -256,21 +261,23 @@
         ctx.font = '12px Arial'
         const w = this.canvasWidth / 24 
 
-        for (let i = 1; i < 25; i ++) {
+        for (let i = 0; i < 25; i ++) {
           this.drawLine(ctx, {
             beginX: i * w,
             beginY: 28,
             endX: i * w,
-            endY: i % this.scale === 0 ? 22 : 24,
-            lineColor: i % this.scale === 0 ? '#000' : '#000',
-            lineWidth: i % this.scale === 0 ? 1 : 1
+            endY: (i % this.scale === 0 || i === 0) ? 22 : 24,
+            lineColor: (i % this.scale === 0 || i === 0) ? '#000' : '#000',
+            lineWidth: (i % this.scale === 0 || i === 0) ? 1 : 1
           })
 
-          if (i % this.scale === 0) {
+          if ((i % this.scale === 0 || i === 0)) {
             const text = (i < 10 ? '0' + i : i) + ': 00'
-            const textWidth = ctx.measureText(text).width
+              const textWidth = ctx.measureText(text).width
             if (i === 24) {
               ctx.fillText(text, i * w - textWidth, 21)
+            } else if (i === 0) {
+              ctx.fillText(text, 0, 21)
             } else {
               ctx.fillText(text, i * w - textWidth / 2, 21)
             }
@@ -376,6 +383,10 @@
     font-size: 0;
     background: rgba(40, 43, 58, 1);
 
+    #synergr-canvas {
+      margin: 0 0 0 100px;
+    }
+
     .playback {
       position: absolute;
       top: 0;
@@ -438,8 +449,9 @@
               }
 
               span {
-                padding: 0 8px 0 0;
+                width: 60px;
                 color: #fff;
+                text-align: left;
               }
             }
           }
@@ -474,6 +486,7 @@
       user-select: none;
       cursor: e-resize;
       -webkit-user-drag: none;
+      transform: translateX(-50%);
     }
 
     .time {