新增电视墙列表详情&&样式修改

src/components/TVWall.vue

@@ -1,32 +1,27 @@
 <template>
-  <div>
+  <div class="TVcontainer" style="position: relative;">
     <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
-               @close="cancelEventLocationShow()">
-      <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
-      <!--&lt;!&ndash; <div class="this-title">-->
-      <!--<span>林场</span>-->
-      <!--<span>45</span>-->
-      <!--</div> &ndash;&gt;-->
-      <!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
-      <!--<span v-for="(item,index) in cameraList" :key="index">-->
-      <!--<div class="d-l-con" @click="playhk(item.channelCode)">-->
-      <!--<div class="d-l-l-text">-->
-      <!--<i class="i-small"></i>-->
-      <!--<h4>{{ item.cameraName }}</h4>-->
-      <!--</div>-->
-      <!--</div>-->
-      <!--</span>-->
-      <!--</div>-->
-      <!--</div>-->
-      <!--<div style="width:70%;height:400px;position:absolute;">-->
-      <!--&lt;!&ndash;视频窗口展示-&#45;&#45;大华&ndash;&gt;-->
-      <!--<div id="dom1" class="dom1"></div>-->
-      <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
-      <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
-      <!--</div>-->
-
-      <div id="dom1" class="dom1"></div>
+               @close="cancelEventLocationShow()" :width="this.detailInfo != null ? '1500px !important' : '1200px !important'">
+      <div style="display: flex;">
+        <div id="dom1" class="dom1"></div>
+        <div class="leader-info-container" v-if="this.detailInfo!=null">
+          <div class="leader-info-list-con">
+            <div v-for="(item,index) in detailInfo" :key="index">
+              <el-descriptions class="margin-top" title="" :column="1" :size="size" direction="horizontal" border >
+                <el-descriptions-item >
+                  <template slot="label">
+                    {{ index }}
+                  </template>
+                  {{ item != null ? item : '无' }}
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </el-dialog>
+
   </div>
 
 </template>
@@ -39,63 +34,65 @@ import DHWs from '@/dahua/lib/DHWs'
 import { rotation } from '@/api/monitor'
 import Cookies from "js-cookie"
 import {selectConfigKey} from "@/api/system/config";
+
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
   dicts: ['event_source'],
   components: {},
+  props:['detailInfo'],
   data() {
     return {
-      title:"电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录,请谨慎操作。部分摄像头处于敏感区域,已屏蔽操控权限,无法操控。",
+      title:this.detailInfo != null ? "电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录,请谨慎操作。部分摄像头处于敏感区域,已屏蔽操控权限,无法操控" : "电视墙\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000您的所有操作痕迹已被后台记录,请谨慎操作。部分摄像头处于敏感区域,已屏蔽操控权限,无法操控",
       tvListJson: [
         {
-          'switchTab': '1',
-          'treeLabels': [
-            {
-              'labelCode': '123456',
-              'labelName': '视频场景',
-              'parentLabelCode': null
-            },
-            {
-              'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
-              'labelName': '标签2',
-              'parentLabelCode': 123456
-            },
+        'switchTab': '1',
+        'treeLabels': [
+          {
+            'labelCode': '123456',
+            'labelName': '视频场景',
+            'parentLabelCode': null
+          },
+          {
+            'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
+            'labelName': '标签2',
+            'parentLabelCode': 123456
+          },
+          {
+            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
+            'labelName': '标签1',
+            'parentLabelCode': 123456
+          }
+        ],
+        'labelChannels': [{
+          'channelDates': [{
+            'channelCode': '6044981090191552',
+            'channelName': '复兴大桥中段-交通事故',
+            'channelSn': null,
+            'cameraType': 0,
+            'online': 1
+          },
             {
-              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
-              'labelName': '标签1',
-              'parentLabelCode': 123456
-            }
-          ],
-          'labelChannels': [{
-            'channelDates': [{
-              'channelCode': '6044981090191552',
-              'channelName': '复兴大桥中段-交通事故',
+              'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
+              'channelName': '北京7青羊东二路77号2通道1',
               'channelSn': null,
-              'cameraType': 0,
+              'cameraType': 1,
               'online': 1
-            },
-              {
-                'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
-                'channelName': '北京7青羊东二路77号2通道1',
-                'channelSn': null,
-                'cameraType': 1,
-                'online': 1
-              }
-            ],
-            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
-          },
-            {
-              'channelDates': [{
-                'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
-                'channelName': '北京7青羊东二路77号2通道2',
-                'channelSn': null,
-                'cameraType': 2,
-                'online': 0
-              }],
-              'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
             }
-          ]
+          ],
+          'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
         },
+          {
+            'channelDates': [{
+              'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
+              'channelName': '北京7青羊东二路77号2通道2',
+              'channelSn': null,
+              'cameraType': 2,
+              'online': 0
+            }],
+            'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
+          }
+        ]
+      },
         {
           'switchTab': '2',
           'labelChannels': [{
@@ -118,6 +115,7 @@ export default {
         }
       ],
       TVWallVisible: false,
+      size: '',
       activeName: 'tv',
       channelId: ['ZgVzqsjwA1DTF561VHG69F'],
       /** ----------------------------------摄像头预览开始------------------------------------- */
@@ -263,7 +261,7 @@ export default {
       cameraList:[],
       initCount: 0,
       pubKey: '',
-      oWebControl: null
+      oWebControl: null,
     }
   },
   created() {
@@ -286,7 +284,7 @@ export default {
     },
     //火点联动电视墙调用
     showTVWall1(longitude,latitude,tvListJson) {
-
+      this.TVWallVisible = true
       selectConfigKey("DssVersion").then(res => {
         if(this.ws.getLocalDssVersion()!=res.data){
           this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
@@ -330,7 +328,7 @@ export default {
                   token: '',
                   https: 1
                 })
-                this.ws.on('loginState', (res) => {
+                this.ws.on('loginState',  (res) => {
                   this.isLogin = res
                   console.log('---res-----', res)
                   if (res) {
@@ -354,6 +352,7 @@ export default {
                       })
                     }
                     this.create1(longitude,latitude,tvListJson,array,array1)
+                    // await nextTick();
                     // var obj=JSON.parse(tvListJson)
                   } else {
                     this.alertLoginFailed()
@@ -376,10 +375,18 @@ export default {
           // }, 5000)
           // /** ----------------------------------海康摄像头预览结束------------------------------------- */
           this.TVWallVisible = true
-
         }
       })
 
+
+    },
+    realTimeVideoDialog(cameraParams) {
+      // 调用弹窗实时播放接口
+      if (!this.isLogin) {
+        this.$Message.info("正在登陆客户端，请稍等......");
+        return false;
+      }
+      this.ws.openVideo(cameraParams);
     },
     create1(longitude,latitude,tvListJson,array,array1) { // 调用创建控件接口
       let _this = this
@@ -405,8 +412,12 @@ export default {
       }
       this.setPos()
       this.customizeTree(tvListJson);
-      _this.ws.createCtrl(params);
-      _this.playRealMonitorVideo(array)
+      // if(array1.length == 1){
+      //   _this.realTimeVideoDialog(array1);
+      // }else{
+        _this.ws.createCtrl(params);
+        _this.playRealMonitorVideo(array)
+      // }
       setTimeout(() => {
         _this.rotation(longitude,latitude,array1)
       }, 5000)
@@ -426,6 +437,8 @@ export default {
 
     },
     rotation(lng,lat,list){
+      console.log('--------------detailInfo',this.detailInfo)
+      console.log('--------------detailInfo',Object.entries(this.detailInfo))
       console.log(list)
       rotation(lng,lat,list).then(res => {
       })
@@ -560,8 +573,12 @@ export default {
       for (let i = 1; i < length; i++) {
         bfArray.push({"channelId": tvListJson[0].treeLabels[i].labelCode})
       }
-      _this.ws.createCtrl(params);
-      _this.playRealMonitorVideo(bfArray)
+      // if(bfArray.length == 1){
+      //   _this.realTimeVideoDialog([tvListJson[0].treeLabels[1].labelCode]);
+      // }else{
+        _this.ws.createCtrl(params);
+        _this.playRealMonitorVideo(bfArray)
+      // }
     },
     setPos() {
       let target = document.getElementById(this.domId)
@@ -733,6 +750,18 @@ export default {
       })
     }
     /** ----------------------------------海康摄像头预览结束------------------------------------- */
+  },
+  watch:{
+    detailInfo:{
+      handler(val,oldval){
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.detailInfo = val;
+            console.log('--------------watcher',this.detailInfo)
+          },800)
+        })
+      }
+    }
   }
 }
 
@@ -745,6 +774,13 @@ function cbIntegrationCallBack(oData) {
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
 
+.TVcontainer{
+  width: 100%;
+  height: 100%;
+}
+.detailLabel{
+  background-color: #bfc;
+}
 .event-info-con {
   width: 100%;
   display: flex;

src/components/TVWalls.vue

@@ -226,7 +226,6 @@ export default {
       }
     },
     showTVWall(data, val, item) {
-debugger
       selectConfigKey("DssVersion").then(res => {
         if(this.ws.getLocalDssVersion()!=res.data){
           this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {