tvwall

src/components/TVWall.vue

@@ -24,7 +24,6 @@
         <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
         <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
       <!--</div>-->
-
       <div id="dom1" class="dom1"></div>
     </el-dialog>
   </div>
@@ -39,6 +38,7 @@ import DHWs from '@/dahua/lib/DHWs'
 import { rotation } from '@/api/monitor'
 import Cookies from "js-cookie"
 
+
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
   dicts: ['event_source'],
@@ -361,6 +361,14 @@ export default {
       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
       const params = [
@@ -382,8 +390,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)
@@ -514,8 +526,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)

src/components/TVWalls.vue

@@ -2,6 +2,7 @@
   <div>
     <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
                @close="cancelEventLocationShow()">
+
       <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
       <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
       <!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
@@ -21,8 +22,15 @@
       <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
       <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
       <!--</div>-->
-
-      <div id="dom1" class="dom1"></div>
+      <div style="display: flex;" >
+        <div id="dom1" class="dom1"></div>
+        <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>
     </el-dialog>
   </div>
 
@@ -34,7 +42,7 @@ import {getDahuaVideoServer, getTVWallList} from '@/api/dahua/dahua'
 import {tvCameraList} from '@/api/haikang/haikang'
 import {findCameraByEventCoordinate, rotation} from '@/api/monitor'
 import DHWs from '@/dahua/lib/DHWs'
-import Cookies from "js-cookie";
+import Cookies from "js-cookie"
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
 export default {
@@ -43,77 +51,7 @@ export default {
   data() {
     return {
       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: [
-        {
-          '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
-            },
-              {
-                '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'
-            }
-          ]
-        },
-        {
-          'switchTab': '2',
-          'labelChannels': [{
-            'channelDates': [{
-              'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
-              'channelName': '北京7青羊东二路77号2通道1',
-              'channelSn': null,
-              'cameraType': 1,
-              'online': 1
-            },
-              {
-                'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
-                'channelName': '北京7青羊东二路77号2通道2',
-                'channelSn': null,
-                'cameraType': 2,
-                'online': 0
-              }
-            ]
-          }]
-        }
-      ],
+      tvListJson: [],
       TVWallVisible: false,
       activeName: 'tv',
       channelId: ['ZgVzqsjwA1DTF561VHG69F'],
@@ -263,7 +201,9 @@ export default {
       cameraList: [],
       initCount: 0,
       pubKey: '',
-      oWebControl: null
+      oWebControl: null,
+      userData:[],
+      userDataShow:false,
     }
   },
   created() {
@@ -284,7 +224,11 @@ export default {
           })
       }
     },
-    showTVWall(data, val) {
+    showTVWall(data, val, item) {
+      if(item != null){
+        this.userData = item;
+        this.userDataShow = true;
+      }
       this.tvListJson = data
       this.data = val
       this.autoList = []
@@ -379,6 +323,14 @@ export default {
         }
       })
     },
+    realTimeVideoDialog(cameraParams) {
+      // 调用弹窗实时播放接口
+      if (!this.isLogin) {
+        this.$Message.info("正在登陆客户端，请稍等......");
+        return false;
+      }
+      this.ws.openVideo(cameraParams);
+    },
     create(tvListJson) { // 调用创建控件接口
       let _this = this
       const params = [
@@ -400,8 +352,12 @@ export default {
       ]
       this.setPos()
       this.customizeTree(tvListJson);
-      _this.ws.createCtrl(params);
-      _this.playRealMonitorVideo();
+      if(_this.stringList.length == 1){
+        _this.realTimeVideoDialog([_this.stringList[0]]);
+      }else{
+        _this.ws.createCtrl(params);
+        _this.playRealMonitorVideo();
+      }
       if (_this.data != undefined && _this.data != null) {
         setTimeout( _this.rotation(_this.data.longitude, _this.data.latitude, _this.stringList),5000)
       }
@@ -745,4 +701,53 @@ html, body {
   margin-top: 100px;
   margin-left: 80px;
 }
+//电视墙视频摄像头预览弹层样式
+.TVWallCustomWidth {
+  width: 1500px !important;
+  height: 750px !important;
+  background: #04080c !important;
+  box-shadow: $barShadow !important;
+  border: 1px $barBorder !important;
+  .el-dialog__header {
+    padding: 15px 20px !important;
+    background-image: -moz-linear-gradient($GradualGreen) !important;
+    background-image: -webkit-linear-gradient($GradualGreen) !important;
+    background-image: linear-gradient($GradualGreen) !important;
+    box-shadow: $shadowTitle !important;
+
+    .el-dialog__title {
+      font-weight: bolder !important;
+      color: #3cd7ef !important;
+    }
+  }
+  .leader-info-container{
+    // padding: .5rem;
+    display: flex;
+    height: 650px;
+    width: 20rem;
+    overflow-y: scroll;
+    flex-direction: column;
+    padding: 0 1rem;
+    .leader-info-list-con{
+      width: 100%;
+      padding: 1rem;
+      margin-bottom: .5rem;
+      background-image: -moz-linear-gradient($GradualGreen)!important;
+      background-image: -webkit-linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen)!important;
+      border: solid 1px #7dc2eb;
+      box-shadow: $shadowListHover !important;
+      border-radius: 5px;
+      h4{
+        margin: .4rem 0;
+        color: $white;
+      }
+    }
+    .leader-info-list-con:hover{
+      background-image: -moz-linear-gradient($popupBG)!important;
+      background-image: -webkit-linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG)!important;
+    }
+  }
+}
 </style>