Merge remote-tracking branch 'origin/dev' into dev

packages/jianping/AppVisitToVerify/components/List.vue

@@ -44,13 +44,6 @@
         :size.sync="search.size"
         @selection-change="(v) => (ids = v.map((e) => e.id))"
         @getList="getList">
-        <el-table-column slot="tags" label="标签">
-          <template slot-scope="{ row }">
-            <div class="table-tags">
-              <el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag>
-            </div>
-          </template>
-        </el-table-column>
         <el-table-column slot="options" width="90px" fixed="right" label="操作" align="center">
           <div class="table-options" slot-scope="{ row }">
             <el-button type="text" @click="toDetail(row.id)">详情</el-button>

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

@@ -4,15 +4,23 @@
                    :render-item="renderTreeItem" ref="DeviceSlider"/>
     <div class="monitorPane">
       <div class="headerBar">
-        <el-select default-first-option size="small" v-model="splitScreen">
+        <el-select default-first-option size="small" v-model="splitScreen" @change="onChange">
           <i slot="prefix" class="iconfont iconjdq_led_Led1"/>
           <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>
       <div class="videoList">
-        <div class="videoBox" v-for="(m,i) in monitors" :key="i" :style="currentSplitStyle">
-          <AiMonitor :src="m.url" type="slw"></AiMonitor>
+        <div
+          class="videoBox"
+          v-for="(m,i) in monitors"
+          :key="m.id"
+          @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>
@@ -81,7 +89,7 @@
 
     created () {
       this.selected.areaId = this.user.info.areaId
-      this.disabledLevel = this.user.info.areaList.length
+      this.disabledLevel = this.user.info.areaList.length - 1
     },
 
     methods: {
@@ -90,21 +98,29 @@
         this.$fullscreen(this.fullscreen)
       },
       handleSelectMonitor(monitor) {
+        if (monitor.type !== '1') return
+
         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)
         }
       },
+
+      onChange (e) {
+        if (e === 1 && this.monitors.length) {
+          this.monitors = [this.monitors[0]]
+        }
+      },
+
+      removeMonitor (i) {
+        this.monitors.splice(i, 1)
+      },
+
       showMonitor(monitor, refresh = false) {
         let {id: deviceId} = monitor
         deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
@@ -113,14 +129,17 @@
           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 {
-              this.monitors.push({...monitor, ...data})
+              if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
+                this.monitors.push({...monitor, ...data})
+              }
             }
           }
         })
@@ -251,9 +270,39 @@
     }
 
     .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;
+        right: 20px;
+        top: 40px;
+        z-index: 11;
+        font-size: 60px;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.6;
+        }
+      }
+
       iframe {
         width: 100%;
         height: 100%;