监控视频回放

packages/IntelligentSecurity/components/Synergy.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="synergr" :id="videoId" @mousemove.stop="onMousemove" @mouseup="onMouseUp" @mouseleave="isHide = true" v-if="isInit">
+  <div class="synergr" :id="videoId" v-if="isInit">
     <canvas
-      id="canvas"
+      id="synergr-canvas"
       :style="{height: '28px'}"
       v-if="canvasWidth"
+      @click="onClick"
+      @mousemove.stop="onMousemove"
+      @mouseup="onMouseUp"
+      @mouseleave="isHide = true"
       :width="canvasWidth"
       height="28">
     </canvas>
@@ -36,9 +40,9 @@
             <div class="live" v-if="isLiveing">
               <span class="label"></span>
               <i>直播中</i>
-              <em>{{ form.date }}</em>
+              <em>{{ date }}</em>
             </div>
-            <div v-else class="back-btn" @click="isLiveing = true">回到直播</div>
+            <div v-else class="back-btn" @click="backLiveing">回到直播</div>
           </div>
         </div>
         <div class="right">
@@ -53,10 +57,10 @@
         <img title="展开" src="https://cdn.cunwuyun.cn/slw2.0/images/arrow.png" />
       </div>
       <div class="playback-list" v-if="isShowTimeline">
-        <div class="playback-item" v-for="(item, index) in 4" :key="index">
+        <div class="playback-item" v-for="(item, index) in times" :key="index">
           <el-checkbox></el-checkbox>
           <span>通道{{ index }}</span>
-          <div class="playback-item__timeline"></div>
+          <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" :times="item"></PlaybackTime>
         </div>
       </div>
     </div>
@@ -80,15 +84,15 @@
 </template>
 
 <script>
-  import Timeline from './Timeline'
+  import PlaybackTime from './PlaybackTime'
 
   export default {
-    props: ['src', 'name', 'isShowBar'],
+    props: ['ids', 'instance'],
 
-    name: 'slwVideo',
+    name: 'Synergy',
 
     components: {
-      Timeline
+      PlaybackTime
     },
 
     data () {
@@ -102,6 +106,7 @@
         form: {
           date: ''
         },
+        times: [],
         isShowTimeline: false,
         checkList: [],
         isInit: false,
@@ -136,6 +141,8 @@
 
     mounted () {
       this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.date = this.$moment(new Date()).format('YYYY-MM-DD')
+      this.getSlwPlaybackTime()
       this.$nextTick(() => {
         this.init()
       })
@@ -143,33 +150,42 @@
 
     methods: {
       onMousemove (e) {
-        const canvasInfo = document.querySelector(`#canvas`).getBoundingClientRect()
+        const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
         const seconds = 24 * 60 * 60
+        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 - 4
-          this.ratioW = this.x / this.canvasWidth
-        } else {
-          this.isHide = true
-        }
+        if (!this.isChoose) return
+        this.x = e.clientX - canvasInfo.left - 4
+        this.ratioW = this.x / this.canvasWidth
       },
 
       onDragDown () {
-        this.$emit('pause')
-        clearInterval(this.timer)
-        this.timer = null
         this.isChoose = true
       },
 
+      backLiveing () {
+        this.$emit('backLiveing')
+        this.isLiveing = true
+        this.initNowTime()
+      },
+
       onMouseUp () {
+        if (!this.isChoose) return
+
+        clearInterval(this.timer)
+        this.timer = null
         this.isChoose = false
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        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`
+        })
+
+        this.isLiveing = false
       },
 
       init () {
@@ -180,7 +196,7 @@
             this.canvasHeight = document.querySelector(`#${this.videoId}`).offsetHeight
 
             this.$nextTick(() => {
-              const el = document.querySelector(`#canvas`)
+              const el = document.querySelector(`#synergr-canvas`)
               this.ctx = el.getContext('2d')
               this.ctx.width  = document.querySelector(`#${this.videoId}`).offsetWidth
               this.ctx.height  = document.querySelector(`#${this.videoId}`).offsetHeight
@@ -214,6 +230,19 @@
         ctx.stroke()
       },
 
+      onClick (e) {
+        const canvasInfo = document.querySelector(`#synergr-canvas`).getBoundingClientRect()
+        this.x = e.clientX - canvasInfo.left - 4
+        clearInterval(this.timer)
+        this.timer = null
+        const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
+        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`
+        })
+        this.isLiveing = false
+      },
+
       renderTimeLine () {
         const ctx = this.ctx
         ctx.fillStyle = 'rgba(40, 43, 58, 1)'
@@ -253,35 +282,67 @@
       },
 
       secTotime (s) {
-        var t = ''
-        if(s > -1){
-          var hour = Math.floor(s / 3600)
-          var min = Math.floor(s / 60) % 60
-          var sec = s % 60
-          if(hour < 10) {
-            t = '0'+ hour + ":"
-          } else { 
-            t = hour + ":"
-          } 
-          if(min < 10){
-            t += "0"
-          } 
-          t += min + ":"
-          if(sec < 10){
-            t += "0"
-          } 
-          t += sec.toFixed(0)
-        } 
-        return t
+        let second = parseInt(s)
+        let minute = 0
+        let hour = 0
+        if (second > 60) {
+          minute = parseInt(second / 60)
+          second = parseInt(second % 60)
+          if (minute > 60) {
+            hour = parseInt(minute / 60)
+            minute = parseInt(minute % 60)
+          }
+        }
+
+        hour = `${parseInt(hour) > 9 ? parseInt(hour) : '0' + parseInt(hour)}`
+        minute = `${parseInt(minute) > 9 ? parseInt(minute) : '0' + parseInt(minute)}`
+        second = `${parseInt(second) > 9 ? parseInt(second) : '0' + parseInt(second)}`
+        return `${hour}:${minute}:${second}`
       },
 
       onConfirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
+            this.isShowDate = false
+            this.date = this.form.date
+            this.getSlwPlaybackTime()
           }
         })
       },
 
+      getSlwPlaybackTime () {
+        this.isLoading = true
+        this.instance.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
+          params: {
+            ids: this.ids,
+            startTime: this.date + ' 00:00:00',
+            endTime: this.date + ' 23:59:59',
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (res.data && res.data.length) {
+              this.times = res.data.map(v => {
+                return v.times.map(item => {
+                  const startTime = (item.startTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+                  const endTime = (item.endTime - new Date(this.date + ' 00:00:00').getTime()) / 1000
+
+                  return {
+                    startTime: Number(startTime.toFixed(0)),
+                    endTime: Number(endTime.toFixed(0))
+                  }
+                }).sort((a, b) => {
+                  return a.startTime - b.startTime
+                })
+              })
+            }
+
+            this.isLoading = false
+          }
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
       onVolume (e) {
         const v = (e / 100).toFixed(1)
         const subPage = document.querySelector(`#${this.id}`).contentWindow
@@ -356,9 +417,8 @@
 
           .playback-item__timeline {
             flex: 1;
-            height: 8px;
+            height: 12px;
             border-radius: 6px;
-            background: linear-gradient(180deg, #00CBFF 0%, #009CFF 100%);
           }
 
           span {