电视墙

src/components/TVWalls.vue

@@ -23,6 +23,14 @@
       <!--</div>-->
 
       <div id="dom1" class="dom1"></div>
+        <div class="leader-info-container" v-if="this.detail!=null">
+          <!--          <img src="../../public/img-sample.png">-->
+          <table class="leader-info-list-con" style="height: 100%; margin-bottom: 0" border="1px solid #ccc" cellpadding="0" cellspacing="0" v-for="(value, key) in this.detail" :key="key">
+            <div>
+            <tr><td class="td1 td-height-7">{{value.name}}</td><td class="td2 td-height-7">{{value.value}}</td></tr>
+            </div>
+          </table>
+        </div>
     </el-dialog>
   </div>
 
@@ -42,6 +50,7 @@ export default {
   components: {},
   data() {
     return {
+      detail:null,
       title:['365','369','371','373','372','370'].includes(Cookies.get("deptId"))?"电视墙":"电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录，请谨慎操作。部分摄像头处于敏感区域，已屏蔽操控权限，无法操控。",
       tvListJson: [
         {
@@ -119,6 +128,7 @@ export default {
       channelId: ['ZgVzqsjwA1DTF561VHG69F'],
       /** ----------------------------------摄像头预览开始------------------------------------- */
       showModal: true,
+      detailList:['所属部门','创建时间','创建人','修改时间','修改人'],
       activePanel: 'key1',
       isLogin: false,
       loginType: '1',
@@ -338,6 +348,88 @@ export default {
       })
 
     },
+    objToStrMap(obj){
+      let strMap = new Map();
+      let str=[];
+
+      for (let k of Object.keys(obj)) {
+        console.log(k)
+        strMap.set(k,obj[k]);
+        if(!this.detailList.includes(k))
+        {
+          let sroce={}
+          if (k=='经度')
+          {
+            sroce={
+              name:'经纬度',
+              value:obj['经度']+','+obj['纬度']
+            }
+          }else { sroce={
+            name:k,
+            value:(obj[k]==null?'无':obj[k])
+          }}
+
+          str.push(sroce)
+        }
+      }
+      return str;
+    },
+    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'
+            }
+          ).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)
+          }
+          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 () {
       this.$modal.msg('登录中....')

src/views/datacenter.vue

@@ -541,12 +541,13 @@ export default {
               labelChannels: labelChannels,
             },
           ]
-console.log(dianshiqiang)
-console.log(  params.longitude,   params.latitude)
-            this.$refs.TVWall.showTVWall1(
-              params.longitude,
-              params.latitude,
-              dianshiqiang
+            this.$refs.TVWalls.showTVWall1(
+              dianshiqiang,
+              {
+                longitude: params.longitude,
+                latitude: params.latitude
+              },
+              data1.detail
             );
 
         }