视频监控

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -39,6 +39,7 @@
         :instance="instance"
         @replay="onReplay"
         @backLiveing="playbackUrls = []"
+        @checkChange="onCheckChange"
         v-if="!isShowBar && monitors.length"
         style="width: 100%; height: 68px;">
       </Synergy>
@@ -152,6 +153,14 @@
         }
       },
 
+      onCheckChange (e) {
+        this.monitors.forEach((item, index) => {
+          if (e.indexOf(item.index) === -1) {
+            this.monitors.splice(index, 1)
+          }
+        })
+      },
+
       onChange(e) {
         if (e === 1 && this.monitors.length) {
           this.monitors = [this.monitors[0]]

packages/IntelligentSecurity/components/AiSlwVideo.vue

@@ -168,7 +168,10 @@
       },
 
       backLiveing () {
+        this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
+        this.date = this.$moment(new Date()).format('YYYY-MM-DD')
         this.getLiveingUrl()
+        this.getSlwPlaybackTime()
       },
 
       getLiveingUrl () {

packages/IntelligentSecurity/components/Synergy.vue

@@ -57,11 +57,14 @@
         <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 times" :key="index">
-          <el-checkbox></el-checkbox>
-          <span>通道{{ index }}</span>
-          <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" :times="item"></PlaybackTime>
-        </div>
+        <el-checkbox-group v-model="checked" @change="onCheckChange">
+          <div class="playback-item" v-for="(item, index) in times" :key="index">
+            <el-checkbox :label="item.id">
+              <span>通道{{ index + 1 }}</span>
+              <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" :times="item.times"></PlaybackTime>
+            </el-checkbox>
+          </div>
+        </el-checkbox-group>
       </div>
     </div>
     <ai-dialog
@@ -99,6 +102,7 @@
       return {
         canvasWidth: 0,
         currIndex: 0,
+        checked: [],
         isShowDate: false,
         isShow: true,
         isShowVolume: false,
@@ -124,17 +128,14 @@
     },
 
     watch: {
-      src: {
+      ids: {
         handler (val) {
           if (val) {
-            this.isShow = false
-
-            this.$nextTick(() => {
-              this.isShow = true
-            })
+            this.checked = this.ids.split(',')
+            this.getSlwPlaybackTime()
           }
         },
-        immediate: true,
+        immediate: false,
         deep: true
       }
     },
@@ -142,7 +143,9 @@
     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.checked = this.ids.split(',')
       this.$nextTick(() => {
         this.init()
       })
@@ -167,6 +170,10 @@
         this.isChoose = true
       },
 
+      onCheckChange (e) {
+        this.$emit('checkChange', e)
+      },
+
       backLiveing () {
         this.$emit('backLiveing')
         this.isLiveing = true
@@ -322,17 +329,20 @@
           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 {
+                  id: v.id,
+                  times: 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
-                })
+                    return {
+                      startTime: Number(startTime.toFixed(0)),
+                      endTime: Number(endTime.toFixed(0))
+                    }
+                  }).sort((a, b) => {
+                    return a.startTime - b.startTime
+                  })
+                }
               })
             }
 
@@ -406,8 +416,6 @@
         color: #FFFFFF;
 
         .playback-item {
-          display: flex;
-          align-items: center;
           width: 100%;
           margin-bottom: 4px;
 
@@ -415,14 +423,28 @@
             margin-bottom: 0;
           }
 
-          .playback-item__timeline {
-            flex: 1;
-            height: 12px;
-            border-radius: 6px;
-          }
+          .el-checkbox {
+            display: flex;
+            align-items: center;
+            width: 100%;
 
-          span {
-            padding: 0 8px 0 0;
+            .el-checkbox__label {
+              display: flex;
+              align-items: center;
+              flex: 1;
+
+              .playback-item__timeline {
+                flex: 1;
+                height: 12px;
+                line-height: 1;
+                border-radius: 6px;
+              }
+
+              span {
+                padding: 0 8px 0 0;
+                color: #fff;
+              }
+            }
           }
         }
       }

packages/IntelligentSecurity/components/Timeline.vue

@@ -133,6 +133,12 @@
       },
 
       init () {
+        if (this.timer) {
+          clearInterval(this.timer)
+          this.timer = null
+        }
+          
+        this.ratioW = this.x / this.canvasWidth
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
@@ -146,7 +152,7 @@
               this.ctx.height  = document.querySelector('.canvas').offsetHeight
 
               if (this.x > 0) {
-                this.x = this.canvasWidth * this.ratioW
+                this.x = this.ratioW * this.canvasWidth
               } else {
                 this.initNowTime()
               }