视频协同

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -24,7 +24,7 @@
           <AiMonitor :isShowBar="isShowBar" :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
         </div>
       </div>
-      <Synergy v-if="!isShowBar" style="width: 100%; height: 68px;"></Synergy>
+      <Synergy ref="Synergy" v-if="!isShowBar && monitors.length" style="width: 100%; height: 68px;"></Synergy>
     </div>
     <ai-dialog title="修改名称" :visible.sync="dialog" width="500px" @onConfirm="handleSubmit(selected)"
                @closed="selected={}">
@@ -61,7 +61,7 @@
       splitOps() {
         return [
           {label: "单分屏", value: 1, per: "100%"},
-          {label: "四分屏", value: 4, per: "49%"},
+          {label: "四分屏", value: 4, per: "49.2%"},
           {label: "九分屏", value: 9, per: "32%"}
         ]
       },
@@ -93,6 +93,16 @@
       }
     },
 
+    watch: {
+      slider () {
+        this.$refs.AiMonitor && this.$refs.AiMonitor.forEach(e => {
+          e.reset()
+        })
+
+        this.$refs.Synergy && this.$refs.Synergy.init()
+      }
+    },
+
     created() {
       this.selected.areaId = this.user.info.areaId
       this.disabledLevel = this.user.info.areaList.length - 1
@@ -122,7 +132,7 @@
           this.monitors = [this.monitors[0]]
         }
 
-        this.$refs.AiMonitor.forEach(e => {
+        this.$refs.AiMonitor && this.$refs.AiMonitor.forEach(e => {
           e.reset()
         })
       },

packages/IntelligentSecurity/components/AiSlwVideo.vue

@@ -71,7 +71,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="选择日期">
@@ -135,19 +135,30 @@
       this.form.date = this.$moment(new Date()).format('YYYY-MM-DD')
       this.$nextTick(() => {
         this.width = document.querySelector(`#${this.videoId}`).offsetWidth + 'px'
+
+        document.addEventListener('fullscreenchange', this.fullScreenChange)
       })
     },
 
     methods: {
+      destroyed () {
+        document.removeEventListener('fullscreenchange', this.fullScreenChange)
+      },
+      fullScreenChange () {
+        if (document.fullscreenElement) {
+        } else {
+          this.reset()
+        }
+      },
       exitFullscreen () {
         if (document.exitFullscreen) {
           document.exitFullscreen()
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen()
         } else if (document.mozCancelFullScreen) {
           document.mozCancelFullScreen()
         } else if (document.webkitExitFullscreen) {
           document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) {
+          window.top.document.msExitFullscreen()
         }
       },
 
@@ -208,15 +219,16 @@
         this.$emit('close')
       },
 
-      requestFullScreen (element) {
+      requestFullScreen (elem) {
-        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+        if (elem.requestFullscreen) {
-        if (requestMethod) {
+          elem.requestFullscreen()
-          requestMethod.call(element);
+        } else if (elem.mozRequestFullScreen) {
-        } else if (typeof window.ActiveXObject !== 'undefined') {
+          elem.mozRequestFullScreen()
-          var wscript = new ActiveXObject('WScript.Shell')
+        } else if (elem.webkitRequestFullscreen) {
-          if (wscript !== null) {
+          elem.webkitRequestFullscreen()
-            wscript.SendKeys('{F11}')
+        } else if (elem.msRequestFullscreen) {
-          }
+          elem = window.top.document.body
+          elem.msRequestFullscreen()
         }
       }
     }
@@ -388,7 +400,7 @@
           .volume-slider {
             display: none;
             position: absolute;
-            bottom: 20px;
+            bottom: 15px;
             left: 50%;
             z-index: -1;
             opacity: 0;

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.init()
-          this.$nextTick(() => {
-            this.$refs.timeline.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;

packages/IntelligentSecurity/components/Timeline.vue

@@ -57,6 +57,7 @@
     },
 
     methods: {
+
       onMousemove (e) {
         const canvasInfo = document.querySelector(`#${this.id}`).getBoundingClientRect()
         const seconds = 24 * 60 * 60
@@ -90,8 +91,8 @@
       secTotime (s) {
         var t = ''
         if(s > -1){
-          var hour = Math.floor(s / 3600)
+          var hour = Math.ceil(s / 3600)
-          var min = Math.floor(s / 60) % 60
+          var min = Math.ceil(s / 60) % 60
           var sec = s % 60
           if(hour < 10) {
             t = '0'+ hour + ":"