电视墙细节更改

src/components/TVWalls.vue

@@ -22,9 +22,10 @@
       <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
       <!--</div>-->
       <div style="display: flex;">
-      <div id="dom1" class="dom1"></div>
+        <div id="dom1" class="dom1" v-if="cameraNum!=0"></div>
+        <img src="../assets/images/not-video.png" v-else style="height: 700px;width: 1126px;">
         <div class="leader-info-container" v-if="this.detail!=null">
-          <div class="leader-info-list-con">
+          <div class="leader-info-list-con" ref="listcon" :style="{ height: listconHeight + '%' }">
             <div v-for="(item,key) in this.detail" :key="key">
               <el-descriptions class="margin-top" title="" :column="1" size="mini" border>
                 <el-descriptions-item :label="`${item.name}`">
@@ -52,9 +53,31 @@ import {selectConfigKey} from "@/api/system/config";
 export default {
   dicts: ['event_source'],
   components: {},
+  directives: {  // 使用局部注册指令的方式
+    resize: { // 指令的名称
+      bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
+        let width = '', height = '';
+        function isReize () {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value();  // 关键
+          }
+          width = style.width;
+          height = style.height;
+        }
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind (el) {
+        clearInterval(el.__vueSetInterval__);
+      }
+    }
+  },
   data() {
     return {
       detail:null,
+      detailLength:0,
+      listconHeight:null,
+      cameraNum:0,
       title:"电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录，请谨慎操作。部分摄像头处于敏感区域，已屏蔽操控权限，无法操控。",
       tvListJson: [
         {
@@ -373,59 +396,68 @@ export default {
     },
     showTVWall1(data, val,detail) {
       this.detail=this.objToStrMap(detail)
-      console.log(this.detail)
-      selectConfigKey("DssVersion").then(res => {
-        if(this.ws.getLocalDssVersion()!=res.data){
-          this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
+      this.detailLength = Object.keys(this.detail).length
+      setTimeout(() => {
+        let h=this.$refs.listcon.offsetHeight;
+        if(h <= 700){
+          this.listconHeight=100;
+        }
+      }, 100);
+      this.TVWallVisible = true
+      this.cameraNum = data[0].labelChannels.length;
+      if(data[0].labelChannels.length != 0) {
+        selectConfigKey("DssVersion").then(res => {
+          if (this.ws.getLocalDssVersion() != res.data) {
+            this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }
+            ).then(() => {
+              selectConfigKey('video_plugin_url').then(response => {
+                window.open(response.data);
+              })
+            }).catch(() => {
+              return
+            });
+            return
+          } else {
+            this.tvListJson = data
+            this.data = val
+            this.autoList = []
+            this.stringList = []
+            let length = data[0].treeLabels.length > 4 ? 5 : data[0].treeLabels.length
+            for (let i = 1; i < length; i++) {
+              this.autoList.push({ "channelId": data[0].treeLabels[i].labelCode })
+              this.stringList.push(data[0].treeLabels[i].labelCode)
             }
-          ).then(() => {
-            selectConfigKey('video_plugin_url').then(response => {
-              window.open(response.data);
+            console.log("this.autoList", this.autoList);
+            console.log("this.stringList", this.stringList);
+            // let that=this;
+            /** ----------------------------------大华摄像头预览开始------------------------------------- */
+            this.ws.addEventListener('connectStateChange', data => {
+              if (data) {
+                console.log('连接成功')
+              } else {
+                console.log('连接失败，下载客户端')
+                this.alertReinstall()
+              }
             })
-          }).catch(() => {
-            return
-          });
-          return
-        }else{
-          this.tvListJson = data
-          this.data = val
-          this.autoList = []
-          this.stringList = []
-          let length = data[0].treeLabels.length > 4 ? 5 : data[0].treeLabels.length
-          for (let i = 1; i < length; i++) {
-            this.autoList.push({"channelId": data[0].treeLabels[i].labelCode})
-            this.stringList.push(data[0].treeLabels[i].labelCode)
+            this.preview()
+            /** ----------------------------------大华摄像头预览结束------------------------------------- */
+            /** ----------------------------------海康摄像头预览开始------------------------------------- */
+            // tvCameraList().then(response => {
+            //   this.cameraList=response.data
+            // })
+            // that.initPlugin()
+            // setTimeout(function() {
+            //   that.playhk();
+            // }, 5000)
+            // /** ----------------------------------海康摄像头预览结束------------------------------------- */
+            this.TVWallVisible = true
           }
-          console.log("this.autoList",this.autoList);
-          console.log("this.stringList",this.stringList);
-          // let that=this;
-          /** ----------------------------------大华摄像头预览开始------------------------------------- */
-          this.ws.addEventListener('connectStateChange', data => {
-            if (data) {
-              console.log('连接成功')
-            } else {
-              console.log('连接失败，下载客户端')
-              this.alertReinstall()
-            }
-          })
-          this.preview()
-          /** ----------------------------------大华摄像头预览结束------------------------------------- */
-          /** ----------------------------------海康摄像头预览开始------------------------------------- */
-          // tvCameraList().then(response => {
-          //   this.cameraList=response.data
-          // })
-          // that.initPlugin()
-          // setTimeout(function() {
-          //   that.playhk();
-          // }, 5000)
-          // /** ----------------------------------海康摄像头预览结束------------------------------------- */
-          this.TVWallVisible = true
-        }
-      })
-
+        })
+      }
     },
     /** ----------------------------------大华摄像头预览开始------------------------------------- */
     alertLogin: function () {