29258

packages/IntelligentSecurity/components/PlaybackTime.vue

@@ -12,7 +12,7 @@
 
 <script>
   export default {
-    props: ['times'],
+    props: ['times', 'deviceId'],
 
     data () {
       return {
@@ -21,7 +21,7 @@
         canvasHeight: '',
         isInit: false,
         wrapper: `canvas-${new Date().getTime()}`,
-        id: `timeline-${new Date().getTime()}`,
+        id: `timeline-${new Date().getTime()}-${this.deviceId}`,
         timer: null
       }
     },
@@ -49,6 +49,10 @@
 
     methods: {
       init () {
+        if (this.ctx) {
+          this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+        }
+        this.isInit = false
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
@@ -60,16 +64,7 @@
               this.ctx = el.getContext('2d')
               this.ctx.width  = document.querySelector('.canvas').offsetWidth
               this.ctx.height  = document.querySelector('.canvas').offsetHeight
-
-              if (this.x > 0) {
-                // this.x = this.canvasWidth * this.ratioW
-              } else {
-                // this.initNowTime()
-              }
-
               this.renderPlayback()
-
-              // this.countdown()
             })
           })
         })

packages/IntelligentSecurity/components/Synergy.vue

@@ -58,7 +58,7 @@
           <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>
+              <PlaybackTime class="playback-item__timeline" :key="'PlaybackTime' + index" v-if="item.times.length" :deviceId="item.id" :times="item.times"></PlaybackTime>
             </el-checkbox>
           </div>
         </el-checkbox-group>