监控视频

project/shandong10086/apps/shandong/monitor/AppMonitorManage/AppMonitorManage.vue

@@ -11,8 +11,16 @@
         <!--        <el-button icon="el-icon-full-screen" @click="handleFullscreen">全屏</el-button>-->
       </div>
       <div class="videoList">
-        <div class="videoBox" v-for="(m,i) in monitors" :key="i" :style="currentSplitStyle">
+        <div
+          class="videoBox"
+          v-for="(m,i) in monitors"
+          :key="i"
+          @mouseenter.stop="m.isShowPlayBtn = true"
+          @mouseleave.stop="m.isShowPlayBtn = false"
+          :style="currentSplitStyle">
           <AiMonitor :src="m.url" type="slw"></AiMonitor>
+          <span>{{ m.name }}</span>
+          <i class="el-icon-circle-close" v-if="m.isShowPlayBtn" title="关闭" @click="removeMonitor(i)"></i>
         </div>
       </div>
     </div>
@@ -93,18 +101,18 @@
         let {id} = monitor,
             index = this.monitors.findIndex(e => e.id == id)
         if (index > -1) {
-          this.monitors.splice(index, 1)
-          this.monitors.map((e, i) => {
-            if (i > index) {
-              this.showMonitor(e, true)
-            }
-          })
+          this.$message.error('该监控视频已存在')
         } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
-          this.$message.warning("可分屏监控已满,请先取消其他的监控")
+          this.$message.error("可分屏监控已满,请先取消其他的监控")
         } else {
           this.showMonitor(monitor)
         }
       },
+
+      removeMonitor (i) {
+        this.monitors.splice(i, 1)
+      },
+
       showMonitor(monitor, refresh = false) {
         let {id: deviceId} = monitor
         deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
@@ -113,16 +121,19 @@
           if (res?.data) {
             this.videoUrl = res.data
             let data = {
-              url: res.data
+              url: res.data,
+              isShowPlayBtn: false
             }
             if (refresh) {
               monitor.url = data.url
             } else if (this.splitScreen == 1) {
               this.monitors = [{...monitor, ...data}]
             } else {
+              if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
                 this.monitors.push({...monitor, ...data})
               }
             }
+          }
         })
       },
       renderTreeItem: function (h, {node, data}) {
@@ -251,9 +262,40 @@
     }
 
     .videoBox {
+      position: relative;
       background: #000;
       flex-shrink: 0;
 
+      span {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 11;
+        width: 60%;
+        height: 38px;
+        line-height: 38px;
+        padding: 0 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #fff;
+        font-size: 16px;
+      }
+
+      i {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 11;
+        font-size: 60px;
+        cursor: pointer;
+        transform: translate(-50%, -50%);
+
+        &:hover {
+          opacity: 0.6;
+        }
+      }
+
       iframe {
         width: 100%;
         height: 100%;

vue.config.js

@@ -64,7 +64,7 @@ module.exports = {
     proxy: {
       //设置代理,可解决跨5
       '/lan': {
-        target: 'http://192.168.1.87:9000/',
+        target: 'https://sdtestweb.sdvillage.cn',
         changeOrigin: true,
         pathRewrite: {
           //地址重写