视频回放

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -6,10 +6,14 @@
     <div class="monitorPane">
       <div class="headerBar">
         <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
-          <i slot="prefix" class="iconfont iconjdq_led_Led1"/>
+          <!-- <i slot="prefix" class="iconfont iconjdq_led_Led1"/> -->
+          <img slot="prefix" src="https://cdn.cunwuyun.cn/slw2.0/images/fp.png">
           <el-option v-for="(op,i) in splitOps" :key="i" v-bind="op"/>
         </el-select>
-        <!--        <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
+        <div class="headerBar-item" @click="isShowBar = !isShowBar" :class="[isShowBar ? '' : 'cancel-xt']">
+          <img src="https://cdn.cunwuyun.cn/slw2.0/images/xt.png">
+          <span>{{ isShowBar ? '视频协同' : '取消协同' }}</span>
+        </div>
       </div>
       <div class="videoList">
         <div
@@ -17,7 +21,7 @@
           v-for="(m, i) in monitors"
           :key="m.id"
           :style="currentSplitStyle">
-          <AiMonitor :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
+          <AiMonitor :isShowBar="isShowBar" :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)" ref="AiMonitor"></AiMonitor>
         </div>
       </div>
     </div>
@@ -37,12 +41,12 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
-import DeviceSlider from "../components/deviceSlider";
-import LocateDialog from "../components/locateDialog";
-import AiMonitor from "../components/AiSlwVideo";
+  import {mapState} from 'vuex'
+  import DeviceSlider from "../components/deviceSlider"
+  import LocateDialog from "../components/locateDialog"
+  import AiMonitor from "../components/AiSlwVideo"
 
-export default {
+  export default {
     name: "AppISManage",
     components: {LocateDialog, DeviceSlider, AiMonitor},
     label: "监控实况",
@@ -74,6 +78,7 @@ export default {
         monitors: [],
         dialog: false,
         locate: false,
+        isShowBar: true,
         selected: {
           areaId: ''
         },
@@ -115,8 +120,6 @@ export default {
           this.monitors = [this.monitors[0]]
         }
 
-      console.log(this.$refs.AiMonitor)
-
         this.$refs.AiMonitor.forEach(e => {
           e.reset()
         })
@@ -169,7 +172,6 @@ export default {
         )
       },
       handleSliderOption(e) {
-      console.log(e)
         this.selected = {
           command: e.type,
           ...e.node
@@ -211,7 +213,7 @@ export default {
     beforeDestroy() {
       this.monitors = []
     }
-}
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -221,7 +223,6 @@ export default {
   height: 100%;
 
   .monitorPane {
-    // color: #fff;
     flex: 1;
     min-width: 0;
     padding: 20px 20px 20px 4px;
@@ -235,6 +236,31 @@ export default {
       gap: 8px;
       margin-bottom: 24px;
 
+      .headerBar-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 40px;
+        background: #2C2F3E;
+        border-radius: 4px;
+        color: #fff;
+        font-size: 12px;
+        cursor: pointer;
+
+        &.cancel-xt {
+          background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
+        }
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        span {
+          margin-left: 6px;
+        }
+      }
+
       .iconfont {
         color: #fff;
         height: 100%;
@@ -247,11 +273,40 @@ export default {
         color: #fff;
       }
 
+      .el-input--prefix .el-input__inner {
+        padding-left: 16px;
+      }
+
+      .el-input--suffix .el-input__inner {
+        padding-right: 16px;
+      }
+
+      .el-input__prefix {
+        top: 50%;
+        left: 10px;
+        height: auto;
+        transform: translateY(-50%);
+      }
+
+      .el-input {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        width: 100px;
+        height: 40px;
+        padding: 0 12px;
+        box-sizing: border-box;
+        background: #2C2F3E;
+      }
+
+      input {
+        text-align: center;
+      }
+
       .el-input__inner, .el-button {
         color: #fff;
-        max-width: 100px;
-        background: #2C2F3E;
         border: none;
+        background: transparent;
 
         &:hover {
           color: #26f;

packages/IntelligentSecurity/components/AiSlwVideo.vue

@@ -14,7 +14,7 @@
       style="width: 100%; height: 100%;"
       :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
     </iframe>
-    <div class="slw-bottom">
+    <div class="slw-bottom" v-if="isShowBar">
       <Timeline class="Timeline" @pause="isLiveing = false" :isLiveing="isLiveing" :width="width" ref="timeline" :style="{width: width}"></Timeline>
       <div class="action-bar">
         <div class="left">
@@ -86,7 +86,7 @@
   import Timeline from './Timeline'
 
   export default {
-    props: ['src', 'name'],
+    props: ['src', 'name', 'isShowBar'],
 
     name: 'slwVideo',