大华视频插件版本检测

src/components/TVWall.vue

@@ -46,6 +46,12 @@
   } from '@/api/monitor'
   import Cookies from "js-cookie"
 
+  import {
+    isRelogin
+  } from '../../utils/request'
+  import {
+    selectConfigKey
+  } from "@/api/system/config";
 
   /** ----------------------------------摄像头预览结束------------------------------------- */
   export default {
@@ -291,76 +297,91 @@
       //火点联动电视墙调用
       showTVWall1(longitude, latitude, tvListJson) {
 
-        // let that=this;
-        /** ----------------------------------大华摄像头预览开始------------------------------------- */
-        this.ws.addEventListener('connectStateChange', data => {
-          if (data) {
-            console.log('连接成功')
+        selectConfigKey("DssVersion").then(res => {
+          if (this.ws.getLocalDssVersion() != res.data) {
+            this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              window.open("https://pan.baidu.com/s/1MlWyhFw6pEYiaLvzsje-BA?pwd=3jps");
+            }).catch(() => {
+              return
+            });
+            return
           } else {
-            console.log('连接失败，下载客户端')
-            this.alertReinstall()
-          }
-        })
-        getDahuaVideoServer().then(newResponse => {
-          this.ws.detectConnectQt().then(res => {
-            if (res) { // 连接客户端成功
-              this.alertLogin()
-              this.ws.login({
-                loginIp: newResponse.loginIp,
-                loginPort: newResponse.loginPort,
-                userName: newResponse.userName,
-                userPwd: newResponse.userPwd,
-                // loginIp: '192.168.100.100',
-                // loginPort: 8314,
-                // userName: 'system',
-                // userPwd: 'Admin@123',
-                token: '',
-                https: 1
-              })
-              this.ws.on('loginState', (res) => {
-                this.isLogin = res
-                console.log('---res-----', res)
-                if (res) {
-                  this.alertLoginSuccess()
-                  this.activePanel = 'key2'
-                  console.log(tvListJson)
-                  const array = []
-                  const array1 = []
-                  if (tvListJson != null) {
-                    tvListJson[0].treeLabels.forEach((item, index) => {
-                      if (index != 0) {
-                        const param = Object.assign({})
-                        param.channelId = item.labelCode
-                        array.push(param)
-                        array1.push(item.labelCode)
+            // let that=this;
+            /** ----------------------------------大华摄像头预览开始------------------------------------- */
+            this.ws.addEventListener('connectStateChange', data => {
+              if (data) {
+                console.log('连接成功')
+              } else {
+                console.log('连接失败，下载客户端')
+                this.alertReinstall()
+              }
+            })
+            getDahuaVideoServer().then(newResponse => {
+              this.ws.detectConnectQt().then(res => {
+                if (res) { // 连接客户端成功
+                  this.alertLogin()
+                  this.ws.login({
+                    loginIp: newResponse.loginIp,
+                    loginPort: newResponse.loginPort,
+                    userName: newResponse.userName,
+                    userPwd: newResponse.userPwd,
+                    // loginIp: '192.168.100.100',
+                    // loginPort: 8314,
+                    // userName: 'system',
+                    // userPwd: 'Admin@123',
+                    token: '',
+                    https: 1
+                  })
+                  this.ws.on('loginState', (res) => {
+                    this.isLogin = res
+                    console.log('---res-----', res)
+                    if (res) {
+                      this.alertLoginSuccess()
+                      this.activePanel = 'key2'
+                      console.log(tvListJson)
+                      const array = []
+                      const array1 = []
+                      if (tvListJson != null) {
+                        tvListJson[0].treeLabels.forEach((item, index) => {
+                          if (index != 0) {
+                            const param = Object.assign({})
+                            param.channelId = item.labelCode
+                            array.push(param)
+                            array1.push(item.labelCode)
+                          }
+
+                        })
                       }
-
-                    })
-                  }
-                  this.create1(longitude, latitude, tvListJson, array, array1)
-                  // var obj=JSON.parse(tvListJson)
-                } else {
-                  this.alertLoginFailed()
+                      this.create1(longitude, latitude, tvListJson, array, array1)
+                      // var obj=JSON.parse(tvListJson)
+                    } else {
+                      this.alertLoginFailed()
+                    }
+                  })
+                } else { // 连接客户端失败
+                  this.alertReinstall()
                 }
               })
-            } else { // 连接客户端失败
-              this.alertReinstall()
-            }
-          })
 
-        })
-        /** ----------------------------------大华摄像头预览结束------------------------------------- */
-        /** ----------------------------------海康摄像头预览开始------------------------------------- */
-        // tvCameraList().then(response => {
-        //   this.cameraList=response.data
-        // })
-        // that.initPlugin()
-        // setTimeout(function() {
-        //   that.playhk();
-        // }, 5000)
-        // /** ----------------------------------海康摄像头预览结束------------------------------------- */
-        this.TVWallVisible = true
+            })
+            /** ----------------------------------大华摄像头预览结束------------------------------------- */
+            /** ----------------------------------海康摄像头预览开始------------------------------------- */
+            // tvCameraList().then(response => {
+            //   this.cameraList=response.data
+            // })
+            // that.initPlugin()
+            // setTimeout(function() {
+            //   that.playhk();
+            // }, 5000)
+            // /** ----------------------------------海康摄像头预览结束------------------------------------- */
+            this.TVWallVisible = true
 
+          }
+        })
       },
       realTimeVideoDialog(cameraParams) {
         // 调用弹窗实时播放接口
@@ -419,33 +440,48 @@
         rotation(lng, lat, list).then(res => {})
       },
       showTVWall(tvListJson, bfArray) {
-        if (tvListJson) {
-          this.preview(tvListJson, bfArray);
-          this.TVWallVisible = true;
-          return;
-        }
-        // let that=this;
-        /** ----------------------------------大华摄像头预览开始------------------------------------- */
-        this.ws.addEventListener('connectStateChange', data => {
-          if (data) {
-            console.log('连接成功')
+        selectConfigKey("DssVersion").then(res => {
+          if (this.ws.getLocalDssVersion() != res.data) {
+            this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              window.open("https://pan.baidu.com/s/1MlWyhFw6pEYiaLvzsje-BA?pwd=3jps");
+            }).catch(() => {
+              return
+            });
+            return
           } else {
-            console.log('连接失败，下载客户端')
-            this.alertReinstall()
+            if (tvListJson) {
+              this.preview(tvListJson, bfArray);
+              this.TVWallVisible = true;
+              return;
+            }
+            // 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
           }
         })
-        this.preview()
-        /** ----------------------------------大华摄像头预览结束------------------------------------- */
-        /** ----------------------------------海康摄像头预览开始------------------------------------- */
-        // tvCameraList().then(response => {
-        //   this.cameraList=response.data
-        // })
-        // that.initPlugin()
-        // setTimeout(function() {
-        //   that.playhk();
-        // }, 5000)
-        // /** ----------------------------------海康摄像头预览结束------------------------------------- */
-        this.TVWallVisible = true
       },
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
       alertLogin: function() {
@@ -595,9 +631,9 @@
               })
 
               that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(
-            function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
-                that.init() // 创建播放实例成功后初始化
-              })
+                function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                  that.init() // 创建播放实例成功后初始化
+                })
             }, function() { // 启动插件服务失败
             })
           },
@@ -876,4 +912,4 @@
     margin-top: 100px;
     margin-left: 80px;
   }
-</style>
+</style>

src/components/TVWalls.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
-               @close="cancelEventLocationShow()">
+      @close="cancelEventLocationShow()">
 
       <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
       <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
@@ -39,11 +39,19 @@
 
 <script>
   /** ----------------------------------摄像头预览开始------------------------------------- */
-  import {getDahuaVideoServer, getTVWallList} from '@/api/dahua/dahua'
-  import {tvCameraList} from '@/api/haikang/haikang'
-  import {findCameraByEventCoordinate, rotation} from '@/api/monitor'
+  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 {
@@ -51,12 +59,11 @@ import Cookies from "js-cookie"
     components: {},
     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: [
-          {
+        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': [
-              {
+            'treeLabels': [{
                 'labelCode': '123456',
                 'labelName': '视频场景',
                 'parentLabelCode': null
@@ -73,23 +80,23 @@ import Cookies from "js-cookie"
               }
             ],
             'labelChannels': [{
-              'channelDates': [{
-                'channelCode': '6044981090191552',
-                'channelName': '复兴大桥中段-交通事故',
-                'channelSn': null,
-                'cameraType': 0,
-                'online': 1
+                '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'
               },
-                {
-                  'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
-                  'channelName': '北京7青羊东二路77号2通道1',
-                  'channelSn': null,
-                  'cameraType': 1,
-                  'online': 1
-                }
-              ],
-              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
-            },
               {
                 'channelDates': [{
                   'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
@@ -106,12 +113,12 @@ import Cookies from "js-cookie"
             'switchTab': '2',
             'labelChannels': [{
               'channelDates': [{
-                'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
-                'channelName': '北京7青羊东二路77号2通道1',
-                'channelSn': null,
-                'cameraType': 1,
-                'online': 1
-              },
+                  'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
+                  'channelName': '北京7青羊东二路77号2通道1',
+                  'channelSn': null,
+                  'cameraType': 1,
+                  'online': 1
+                },
                 {
                   'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
                   'channelName': '北京7青羊东二路77号2通道2',
@@ -134,8 +141,7 @@ import Cookies from "js-cookie"
         token: '',
         ctrlType: 'playerWin',
         https: 1,
-        httpsList: [
-          {
+        httpsList: [{
             value: 0,
             label: 0
           },
@@ -157,8 +163,7 @@ import Cookies from "js-cookie"
           value: 'TVWallUI',
           label: '视频上墙'
         }],
-        ctrlList: [
-          {
+        ctrlList: [{
             value: 'ctrl1',
             label: '控件1'
           },
@@ -171,8 +176,7 @@ import Cookies from "js-cookie"
             label: '控件3'
           }
         ],
-        splitList: [
-          {
+        splitList: [{
             value: 1,
             label: '1 * 1'
           },
@@ -185,8 +189,7 @@ import Cookies from "js-cookie"
             label: '3 * 3'
           }
         ],
-        displayModeList: [
-          {
+        displayModeList: [{
             value: 1,
             label: '播放器预览模式'
           },
@@ -195,8 +198,7 @@ import Cookies from "js-cookie"
             label: '播放器回放模式'
           }
         ],
-        mixedVideoDisplayModeList: [
-          {
+        mixedVideoDisplayModeList: [{
             value: 1,
             label: '播放实时视频'
           },
@@ -216,31 +218,31 @@ import Cookies from "js-cookie"
         downTimeRange: [],
         downloadFormat: 0,
         downloadFormatList: [{
-          value: 0,
-          label: 'dav'
-        },
+            value: 0,
+            label: 'dav'
+          },
           {
             value: 1,
             label: 'avi'
           }, {
             value: 2,
             label: 'mp4'
-          }],
+          }
+        ],
         downloadSource: 3,
-        downloadSourceList: [
-          {
-            value: 3,
-            label: '中心录像'
-          }, {
-            value: 2,
-            label: '设备录像'
-          }],
+        downloadSourceList: [{
+          value: 3,
+          label: '中心录像'
+        }, {
+          value: 2,
+          label: '设备录像'
+        }],
         showDownloadStreamType: false,
         downloadStreamType: 1,
         downloadStreamTypeList: [{
-          value: 1,
-          label: '主码流'
-        },
+            value: 1,
+            label: '主码流'
+          },
           {
             value: 2,
             label: '辅码流'
@@ -248,16 +250,18 @@ import Cookies from "js-cookie"
           {
             value: 3,
             label: '三码流'
-          }],
+          }
+        ],
         downloadIsShow: true,
         downloadIsShowList: [{
-          value: true,
-          label: '是'
-        },
+            value: true,
+            label: '是'
+          },
           {
             value: false,
             label: '否'
-          }],
+          }
+        ],
         crtPosX: 0,
         crtPosY: 0,
         crtWidth: 1148,
@@ -273,8 +277,8 @@ import Cookies from "js-cookie"
         initCount: 0,
         pubKey: '',
         oWebControl: null,
-        userData:[],
-        userDataShow:false,
+        userData: [],
+        userDataShow: false,
       }
     },
     created() {
@@ -289,63 +293,80 @@ import Cookies from "js-cookie"
         this.destroy()
 
         if (this.oWebControl != null) {
-          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-          this.oWebControl.JS_Disconnect().then(function () {  // 断开与插件服务连接成功
+          this.oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+          this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
             },
-            function () {  // 断开与插件服务连接失败
+            function() { // 断开与插件服务连接失败
             })
         }
       },
       showTVWall(data, val, item) {
-        if(item != null){
-          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('连接成功')
+        selectConfigKey("DssVersion").then(res => {
+          if (this.ws.getLocalDssVersion() != res.data) {
+            this.$modal.confirm('系统检测到新客户端版本，请更新后使用', '系统提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              window.open("https://pan.baidu.com/s/1MlWyhFw6pEYiaLvzsje-BA?pwd=3jps");
+            }).catch(() => {
+              return
+            });
+            return
           } else {
-            console.log('连接失败，下载客户端')
-            this.alertReinstall()
+            if (item != null) {
+              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()
+              }
+            })
+            this.preview()
+            /** ----------------------------------大华摄像头预览结束------------------------------------- */
+            /** ----------------------------------海康摄像头预览开始------------------------------------- */
+            // tvCameraList().then(response => {
+            //   this.cameraList=response.data
+            // })
+            // that.initPlugin()
+            // setTimeout(function() {
+            //   that.playhk();
+            // }, 5000)
+            // /** ----------------------------------海康摄像头预览结束------------------------------------- */
+            this.TVWallVisible = true
           }
         })
-        this.preview()
-        /** ----------------------------------大华摄像头预览结束------------------------------------- */
-        /** ----------------------------------海康摄像头预览开始------------------------------------- */
-        // tvCameraList().then(response => {
-        //   this.cameraList=response.data
-        // })
-        // that.initPlugin()
-        // setTimeout(function() {
-        //   that.playhk();
-        // }, 5000)
-        // /** ----------------------------------海康摄像头预览结束------------------------------------- */
-        this.TVWallVisible = true
       },
       /** ----------------------------------大华摄像头预览开始------------------------------------- */
-      alertLogin: function () {
+      alertLogin: function() {
         this.$modal.msg('登录中....')
       },
-      alertLoginSuccess: function () {
+      alertLoginSuccess: function() {
         this.$modal.msgSuccess('登录成功！')
       },
-      alertLoginFailed: function () {
+      alertLoginFailed: function() {
         this.$modal.msgError('登陆失败！')
       },
-      alertReinstall: function () {
+      alertReinstall: function() {
         this.$modal.msgWarning('请重新安装客户端')
       },
       /** 预览按钮操作 */
@@ -385,7 +406,10 @@ import Cookies from "js-cookie"
       },
       playRealMonitorVideo() { // 自定义设备树自动播放指定通道编码视频
         const config = this.ws.config
-        const {loginIp, userCode} = config
+        const {
+          loginIp,
+          userCode
+        } = config
         this.ws.postMessage('playRealMonitorVideo', {
           loginIp,
           userCode,
@@ -405,37 +429,33 @@ import Cookies from "js-cookie"
       },
       create(tvListJson) { // 调用创建控件接口
         let _this = this
-        const params = [
-          {
-            'ctrlType': 'realMonitorUI',
-            'ctrlCode': 'ctrl1',
-            'ctrlProperty': {
-              'displayMode': 1,
-              'splitNum': (this.autoList.length == 1 ? 1 : 4),
-              'channelList': [
-                {
-                  'channelId': ''
-                }
-              ]
-            },
-            'visible': true,
-            'domId': 'dom1'
-          }
-        ]
+        const params = [{
+          'ctrlType': 'realMonitorUI',
+          'ctrlCode': 'ctrl1',
+          'ctrlProperty': {
+            'displayMode': 1,
+            'splitNum': (this.autoList.length == 1 ? 1 : 4),
+            'channelList': [{
+              'channelId': ''
+            }]
+          },
+          'visible': true,
+          'domId': 'dom1'
+        }]
         this.setPos()
         this.customizeTree(tvListJson);
         // if(_this.stringList.length == 1){
         //   _this.realTimeVideoDialog([_this.stringList[0]]);
         // }else{
-          _this.ws.createCtrl(params);
-          _this.playRealMonitorVideo();
+        _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)
+          setTimeout(_this.rotation(_this.data.longitude, _this.data.latitude, _this.stringList), 5000)
         }
       },
-      rotation(lng,lat,list){
-        rotation(lng,lat,list);
+      rotation(lng, lat, list) {
+        rotation(lng, lat, list);
       },
       setPos() {
         let target = document.getElementById(this.domId)
@@ -466,7 +486,10 @@ import Cookies from "js-cookie"
       },
       customizeTree(tvListJson) { // 调用控件接口树
         const config = this.ws.config
-        const {loginIp, userCode} = config
+        const {
+          loginIp,
+          userCode
+        } = config
         this.ws.postMessage('customizeTree', {
           loginIp,
           userCode,
@@ -481,38 +504,39 @@ import Cookies from "js-cookie"
       initPlugin() {
         let that = this
         that.oWebControl = new WebControl({
-          szPluginContainer: 'playWnd',                       // 指定容器id
-          iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
+          szPluginContainer: 'playWnd', // 指定容器id
+          iServicePortStart: 15900, // 指定起止端口号，建议使用该值
           iServicePortEnd: 15909,
-          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
-          cbConnectSuccess: function () {                     // 创建WebControl实例成功
-            that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
-              dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
-            }).then(function () {                           // 启动插件服务成功
-              that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
+          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
+          cbConnectSuccess: function() { // 创建WebControl实例成功
+            that.oWebControl.JS_StartService('window', { // WebControl实例创建成功后需要启动服务
+              dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
+            }).then(function() { // 启动插件服务成功
+              that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
                 cbIntegrationCallBack: cbIntegrationCallBack
               })
 
-              that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
-                that.init()  // 创建播放实例成功后初始化
+              that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(
+            function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                that.init() // 创建播放实例成功后初始化
               })
-            }, function () { // 启动插件服务失败
+            }, function() { // 启动插件服务失败
             })
           },
-          cbConnectError: function () { // 创建WebControl实例失败
+          cbConnectError: function() { // 创建WebControl实例失败
             that.oWebControl = null
             $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
             WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
             initCount++
             if (initCount < 3) {
-              setTimeout(function () {
+              setTimeout(function() {
                 that.initPlugin()
               }, 3000)
             } else {
               $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
             }
           },
-          cbConnectClose: function (bNormalClose) {
+          cbConnectClose: function(bNormalClose) {
             // 异常断开：bNormalClose = false
             // JS_Disconnect正常断开：bNormalClose = true
             console.log('cbConnectClose')
@@ -523,42 +547,42 @@ import Cookies from "js-cookie"
       //初始化
       init() {
         let that = this
-        this.getPubKey(function () {
+        this.getPubKey(function() {
           ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
-          var appkey = '24699060'                           //综合安防管理平台提供的appkey，必填
-          var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw')   //综合安防管理平台提供的secret，必填
-          var ip = '36.49.108.22'                           //综合安防管理平台IP地址，必填
-          var playMode = 0                                  //初始播放模式：0-预览，1-回放
-          var port = 1443                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
-          var snapDir = 'D:\\SnapDir'                       //抓图存储路径
-          var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
-          var layout = '3x3'                                //playMode指定模式的布局
-          var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
-          var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
-          var showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
-          var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
-          var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
+          var appkey = '24699060' //综合安防管理平台提供的appkey，必填
+          var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw') //综合安防管理平台提供的secret，必填
+          var ip = '36.49.108.22' //综合安防管理平台IP地址，必填
+          var playMode = 0 //初始播放模式：0-预览，1-回放
+          var port = 1443 //综合安防管理平台端口，若启用HTTPS协议，默认443
+          var snapDir = 'D:\\SnapDir' //抓图存储路径
+          var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
+          var layout = '3x3' //playMode指定模式的布局
+          var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+          var encryptedFields = 'secret' //加密字段，默认加密领域为secret
+          var showToolbar = 1 //是否显示工具栏，0-不显示，非0-显示
+          var showSmart = 1 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+          var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
           ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
 
           that.oWebControl.JS_RequestInterface({
             funcName: 'init',
             argument: JSON.stringify({
-              appkey: appkey,                            //API网关提供的appkey
-              secret: secret,                            //API网关提供的secret
-              ip: ip,                                    //API网关IP地址
-              playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
-              port: port,                                //端口
-              snapDir: snapDir,                          //抓图存储路径
-              videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
-              layout: layout,                            //布局
-              enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
-              encryptedFields: encryptedFields,          //加密字段
-              showToolbar: showToolbar,                  //是否显示工具栏
-              showSmart: showSmart,                      //是否显示智能信息
-              buttonIDs: buttonIDs                       //自定义工具条按钮
+              appkey: appkey, //API网关提供的appkey
+              secret: secret, //API网关提供的secret
+              ip: ip, //API网关IP地址
+              playMode: playMode, //播放模式（决定显示预览还是回放界面）
+              port: port, //端口
+              snapDir: snapDir, //抓图存储路径
+              videoDir: videoDir, //紧急录像或录像剪辑存储路径
+              layout: layout, //布局
+              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
+              encryptedFields: encryptedFields, //加密字段
+              showToolbar: showToolbar, //是否显示工具栏
+              showSmart: showSmart, //是否显示智能信息
+              buttonIDs: buttonIDs //自定义工具条按钮
             })
-          }).then(function (oData) {
-            that.oWebControl.JS_Resize(850, 615)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+          }).then(function(oData) {
+            that.oWebControl.JS_Resize(850, 615) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
           })
         })
       },
@@ -570,7 +594,7 @@ import Cookies from "js-cookie"
           argument: JSON.stringify({
             keyLength: 1024
           })
-        }).then(function (oData) {
+        }).then(function(oData) {
           console.log(oData)
           if (oData.responseMsg.data) {
             that.pubKey = oData.responseMsg.data
@@ -579,7 +603,7 @@ import Cookies from "js-cookie"
           125
         })
       },
-//RSA加密
+      //RSA加密
       setEncrypt(value) {
         var encrypt = new JSEncrypt()
         encrypt.setPublicKey(this.pubKey)
@@ -587,11 +611,11 @@ import Cookies from "js-cookie"
       },
       //播放海康摄像头
       playhk(channelCode) {
-        var cameraIndexCode = channelCode     //获取输入的监控点编号值，必填
-        var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
-        var transMode = 1                                      //传输协议：0-UDP，1-TCP
-        var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
-        var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
+        var cameraIndexCode = channelCode //获取输入的监控点编号值，必填
+        var streamMode = 0 //主子码流标识：0-主码流，1-子码流
+        var transMode = 1 //传输协议：0-UDP，1-TCP
+        var gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用
+        var wndId = -1 //播放窗口序号（在2x2以上布局下可指定播放窗口）
 
         cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
         cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
@@ -599,11 +623,11 @@ import Cookies from "js-cookie"
         this.oWebControl.JS_RequestInterface({
           funcName: 'startPreview',
           argument: JSON.stringify({
-            cameraIndexCode: cameraIndexCode,                //监控点编号
-            streamMode: streamMode,                         //主子码流标识
-            transMode: transMode,                           //传输协议
-            gpuMode: gpuMode,                               //是否开启GPU硬解
-            wndId: wndId                                     //可指定播放窗口
+            cameraIndexCode: cameraIndexCode, //监控点编号
+            streamMode: streamMode, //主子码流标识
+            transMode: transMode, //传输协议
+            gpuMode: gpuMode, //是否开启GPU硬解
+            wndId: wndId //可指定播放窗口
           })
         })
       }
@@ -636,8 +660,7 @@ import Cookies from "js-cookie"
         width: 100%;
         height: 18.3vh;
 
-        img {
-        }
+        img {}
       }
     }
 
@@ -722,14 +745,16 @@ import Cookies from "js-cookie"
   }
 
   /*海康*/
-  html, body {
+  html,
+  body {
     padding: 0;
     margin: 0;
   }
 
   .playWnd {
     margin: -13px 0 0 255px;
-    width: 850px; /*播放容器的宽和高设定*/
+    width: 850px;
+    /*播放容器的宽和高设定*/
     height: 615px;
     border: 1px solid red;
   }
@@ -773,6 +798,7 @@ import Cookies from "js-cookie"
     margin-top: 100px;
     margin-left: 80px;
   }
+
   //电视墙视频摄像头预览弹层样式chuanSet
   .TVWallCustomWidth {
     width: 1500px !important;
@@ -780,6 +806,7 @@ import Cookies from "js-cookie"
     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;
@@ -792,7 +819,8 @@ import Cookies from "js-cookie"
         color: #3cd7ef !important;
       }
     }
-    .leader-info-container{
+
+    .leader-info-container {
       // padding: .5rem;
       display: flex;
       height: 650px;
@@ -800,26 +828,29 @@ import Cookies from "js-cookie"
       overflow-y: scroll;
       flex-direction: column;
       padding: 0 1rem;
-      .leader-info-list-con{
+
+      .leader-info-list-con {
         width: 100%;
         padding: 1rem;
         margin-bottom: .5rem;
-        background-image: -moz-linear-gradient($GradualGreen)!important;
+        background-image: -moz-linear-gradient($GradualGreen) !important;
         background-image: -webkit-linear-gradient($GradualGreen) !important;
-        background-image: linear-gradient($GradualGreen)!important;
+        background-image: linear-gradient($GradualGreen) !important;
         border: solid 1px #7dc2eb;
         box-shadow: $shadowListHover !important;
         border-radius: 5px;
-        h4{
+
+        h4 {
           margin: .4rem 0;
           color: $white;
         }
       }
-      .leader-info-list-con:hover{
-        background-image: -moz-linear-gradient($popupBG)!important;
+
+      .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;
+        background-image: linear-gradient($popupBG) !important;
       }
     }
   }
-</style>
+</style>