From 49dabf912c1f0f4b3915b2bbfb069068de3355df Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 21 Apr 2022 15:04:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppISManage/AppISManage.vue               |  9 ++
 .../components/AiSlwVideo.vue                 |  3 +
 .../components/Synergy.vue                    | 84 ++++++++++++-------
 .../components/Timeline.vue                   |  8 +-
 4 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/packages/IntelligentSecurity/AppISManage/AppISManage.vue b/packages/IntelligentSecurity/AppISManage/AppISManage.vue
index 4ad73237..4e6a103a 100644
--- a/packages/IntelligentSecurity/AppISManage/AppISManage.vue
+++ b/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]]
diff --git a/packages/IntelligentSecurity/components/AiSlwVideo.vue b/packages/IntelligentSecurity/components/AiSlwVideo.vue
index 1ff1d84b..748a7231 100644
--- a/packages/IntelligentSecurity/components/AiSlwVideo.vue
+++ b/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 () {
diff --git a/packages/IntelligentSecurity/components/Synergy.vue b/packages/IntelligentSecurity/components/Synergy.vue
index 2792ebe6..61ec7489 100644
--- a/packages/IntelligentSecurity/components/Synergy.vue
+++ b/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;
+              }
+            }
           }
         }
       }
diff --git a/packages/IntelligentSecurity/components/Timeline.vue b/packages/IntelligentSecurity/components/Timeline.vue
index aa2ba2de..da07ac51 100644
--- a/packages/IntelligentSecurity/components/Timeline.vue
+++ b/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()
               }