视频协同

2022-04-18 17:36:30 +08:00
parent 99a9433c92
commit a72cbd4811
4 changed files with 119 additions and 25 deletions
--- a/packages/IntelligentSecurity/AppISManage/AppISManage.vue
+++ b/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()
        })
      },
--- a/packages/IntelligentSecurity/components/AiSlwVideo.vue
+++ b/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) {
-        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
-        if (requestMethod) {
-          requestMethod.call(element);
-        } else if (typeof window.ActiveXObject !== 'undefined') {
-          var wscript = new ActiveXObject('WScript.Shell')
-          if (wscript !== null) {
-            wscript.SendKeys('{F11}')
-          }
+      requestFullScreen (elem) {
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen()
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen()
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen()
+        } 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;
--- a/packages/IntelligentSecurity/components/Synergy.vue
+++ b/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;
--- a/packages/IntelligentSecurity/components/Timeline.vue
+++ b/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 min = Math.floor(s / 60) % 60
+          var hour = Math.ceil(s / 3600)
+          var min = Math.ceil(s / 60) % 60
          var sec = s % 60
          if(hour < 10) {
            t = '0'+ hour + ":"