视频协同

packages/IntelligentSecurity/components/Synergy.vue

@@ -48,6 +48,18 @@
         </div>
       </div>
     </div>
+    <div class="playback">
+      <div class="synergr-more" @click="isShowTimeline = !isShowTimeline" :class="[isShowTimeline ? 'active' : '']">
+        <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">
+          <el-checkbox></el-checkbox>
+          <span>通道{{ index }}</span>
+          <div class="playback-item__timeline"></div>
+        </div>
+      </div>
+    </div>
     <ai-dialog
       title="选择日期"
       :visible.sync="isShowDate"
@@ -56,7 +68,7 @@
       <el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
         <el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
           <el-date-picker
-            value-format="yyyy-MM-DD"
+            value-format="yyyy-MM-dd"
             v-model="form.date"
             type="date"
             placeholder="选择日期">
@@ -90,6 +102,8 @@
         form: {
           date: ''
         },
+        isShowTimeline: false,
+        checkList: [],
         isInit: false,
         left: 0,
         date: '',
@@ -99,7 +113,8 @@
         x: 0,
         time: '',
         videoId: `synergr-${new Date().getTime()}`,
-        isFullscreen: false
+        isFullscreen: false,
+        timer: null
       }
     },
 
@@ -278,10 +293,7 @@
 
       reset () {
         setTimeout(() => {
-          this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
-          this.$nextTick(() => {
-            this.$refs.timeline.init()
-          })
+          this.init()
         }, 60)
       }
     }
@@ -294,9 +306,68 @@
     width: 100%;
     height: 100%;
     font-size: 0;
-    overflow: hidden;
     background: rgba(40, 43, 58, 1);
 
+    .playback {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      z-index: 1;
+      width: 100%;
+      padding-top: 6px;
+      text-align: center;
+      transform: translate(-50%, -100%);
+      background: #202330;
+
+      .synergr-more {
+        width: 80px;
+        height: 16px;
+        margin: 0 auto;
+        cursor: pointer;
+        background: url(https://cdn.cunwuyun.cn/slw2.0/images/more.png);
+        color: #fff;
+
+        img {
+          position: relative;
+          transition: all ease 0.5s;
+          transform: rotate(180deg);
+        }
+
+        &.active img {
+          transform: rotate(0);
+        }
+      }
+
+      .playback-list {
+        padding: 8px 16px;
+        background: rgba(22, 24, 33, 1);
+        font-size: 12px;
+        color: #FFFFFF;
+
+        .playback-item {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          margin-bottom: 4px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .playback-item__timeline {
+            flex: 1;
+            height: 8px;
+            border-radius: 6px;
+            background: linear-gradient(180deg, #00CBFF 0%, #009CFF 100%);
+          }
+
+          span {
+            padding: 0 8px 0 0;
+          }
+        }
+      }
+    }
+
     .time-scale {
       display: flex;
       position: absolute;