电视墙

src/api/components/supermap.js

@@ -73,5 +73,6 @@ export const iconList = {
   'sj-icon-map-not-centerdata-sand-quarry-camera': require('@/assets/icons/sj-icon-map/noStatus/sj-icon-map-not-centerdata-river_camera.png'),
   'sj-icon-map-not-centerdata-slmonitor': require('@/assets/icons/sj-icon-map/noStatus/sj-icon-map-not-centerdata-slmonitor.png'),
   'sj-icon-map-not-centerdata-slmonitor-traffic': require('@/assets/icons/sj-icon-map/noStatus/sj-icon-map-not-centerdata-slmonitor-traffic.png'),
+  'not-video': require('@/assets/icons/not-video.png'),
 
 }

src/components/TVWalls.vue

@@ -3,15 +3,16 @@
     <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth-right"
                @close="cancelEventLocationShow()">
       <div style="display: flex;">
-        <div id="dom1" class="dom1"></div>
+        <div id="dom1" class="dom1" v-if="cameraNum!=0"></div>
+        <img src="../assets/icons/not-video.png"  v-if="!(cameraNum!=0)" style="height: 700px;width: 1130px;">
         <div class="leader-info-container" v-if="userDataShow">
           <div class="leader-info-list-con" v-for="user in userData">
             <h4 style="">{{user.position}}：{{user.name}}</h4>
             <h4>电话：{{user.phone}}</h4>
           </div>
         </div>
-        <div class="leader-info-container" v-if="detailDataShow">
-          <div class="leader-info-list-con">
+        <div class="leader-info-container" v-if="detailDataShow" >
+          <div class="leader-info-list-con" ref="listcon" :style="{ height: listconHeight + '%' }">
             <div v-for="(value, key) in detailData" :key="key">
               <el-descriptions class="margin-top" title="" :column="1" size="mini" border>
                 <el-descriptions-item :label="`${key}`">
@@ -39,8 +40,30 @@ 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 {
+      detailLength:0,
+      listconHeight:null,
+      cameraNum:0,
       title:"电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录，请谨慎操作。部分摄像头处于敏感区域，已屏蔽操控权限，无法操控。",
       tvListJson: [],
       TVWallVisible: false,
@@ -221,68 +244,78 @@ export default {
       }
     },
     showTVWall(data, val, item,num) {
-
-      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(() => {
+      setTimeout(() => {
+        let h=this.$refs.listcon.offsetHeight;
+        if(h <= 700){
+          this.listconHeight=100;
+        }
+      }, 100);
+      if (item != null) {
+        if (num === 1) {
+          this.detailData = item;
+          this.detailDataShow = true;
+        } else {
+          this.userData = item;
+          this.userDataShow = true;
+        }
+      }
+      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
-          });
-          return
-        }else{
-          if(item != null){
-            if(num===1) {
-              this.detailData = item;
-              this.detailDataShow = true;
-            }else{
-              this.userData = item;
-              this.userDataShow = true;
-            }
-          }
-          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)
           }
-          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()
+          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 () {

src/views/datacenter.vue

@@ -556,7 +556,7 @@ export default {
           labelChannels: labelChannels,
         },
       ];
-      if (result.data.cameras.length > 0) {
+      if ('1'=='1') {
         this.$refs.TVWalls.showTVWall(
           dianshiqiang, {
             longitude: data.longitude,