额

src/views/resources.vue

@@ -49,443 +49,443 @@
 </template>
 
 <script>
-import {
-  getResourcesCount,
-  selectResources,
-  selectResourcesByLabel
-} from '@/api/resources'
-import supermap from '@/components/supermap' //超图
-import vheader from '@/components/v-header.vue' //一体化共用头部
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
-import TVWall from '@/components/TVWall.vue' //电视墙弹窗
-import resourcesdialog from '@/views/resourcesdialog.vue' //事件详情弹窗
-/** ----------------------------------摄像头预览开始------------------------------------- */
-import {
-  getHaiKangVideoServer
-} from '@/api/haikang/haikang'
-/** ----------------------------------摄像头预览结束------------------------------------- */
-export default {
-  components: {
-    resourcesdialog,
-    supermap,
-    vheader,
-    vBottomMenu,
-    eventLocation,
-    TVWall
-  },
-  created() {
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    window.showDialog = this.showDialog
-    window.choseLayerSwitching = this.choseLayerSwitching
-    window.choseLayerSwitchingList = this.choseLayerSwitchingList
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-  },
-  mounted() {
-    this.getResourcesCount();
-    this.selectResources();
-  },
-  data() {
-    return {
-      /** ----------------------------------摄像头预览开始------------------------------------- */
-      //海康
-      cameraTitle: '',
-      cameraVisible: false,
-      initCount: 0,
-      pubKey: '',
-      oWebControl: null,
-      /** ----------------------------------摄像头预览结束------------------------------------- */
-      /** ----------------------------------资源展示用字段------------------------------------- */
-      labelList: ['warning_sign','bridge','culvert'], //资源类型数组，用于资源判断 和资源初始化传参
-      markersList: [], //点位列表
-      resourcesCountList: [],
-      resourcesList: []
-    }
-  },
-  methods: {
-    //查询各类资源的数量
-    getResourcesCount(){
-      getResourcesCount().then(res => {
-        this.resourcesCountList = res.data;
-      })
+  import {
+    getResourcesCount,
+    selectResources,
+    selectResourcesByLabel
+  } from '@/api/resources'
+  import supermap from '@/components/supermap' //超图
+  import vheader from '@/components/v-header.vue' //一体化共用头部
+  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+  import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
+  import TVWall from '@/components/TVWall.vue' //电视墙弹窗
+  import resourcesdialog from '@/views/resourcesdialog.vue' //事件详情弹窗
+  /** ----------------------------------摄像头预览开始------------------------------------- */
+  import {
+    getHaiKangVideoServer
+  } from '@/api/haikang/haikang'
+  /** ----------------------------------摄像头预览结束------------------------------------- */
+  export default {
+    components: {
+      resourcesdialog,
+      supermap,
+      vheader,
+      vBottomMenu,
+      eventLocation,
+      TVWall
     },
-    //初始化所有资源并落点
-    selectResources(){
-      selectResources(this.labelList).then(res => {
-        this.resourcesList = res.data;
-        this.initMarkers(this.resourcesList);
-      })
+    created() {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      window.showDialog = this.showDialog
+      window.choseLayerSwitching = this.choseLayerSwitching
+      window.choseLayerSwitchingList = this.choseLayerSwitchingList
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     },
-    //点击左侧某资源，将该资源进行落点
-    selectResourcesByLabel(label){
-      console.log(label)
-      let that = this;
-      //每次点击，先将原有点位清空后重新落点
-      this.markersList = [];
-      this.resourcesList = [];
-      that.$refs.supermap.clearM(false);
-      that.$refs.supermap.clearM(true);
-      selectResourcesByLabel(label).then(res => {
-        this.resourcesList = res.data;
-        this.initMarkers(this.resourcesList);
-      })
+    mounted() {
+      this.getResourcesCount();
+      this.selectResources();
     },
-    showResourcesDialog(param) {
-      //资源信息弹出
-      this.$refs.resourcesdialog.showResourcesDialog(param);
+    data() {
+      return {
+        /** ----------------------------------摄像头预览开始------------------------------------- */
+        //海康
+        cameraTitle: '',
+        cameraVisible: false,
+        initCount: 0,
+        pubKey: '',
+        oWebControl: null,
+        /** ----------------------------------摄像头预览结束------------------------------------- */
+        /** ----------------------------------资源展示用字段------------------------------------- */
+        labelList: ['warning_sign','bridge','culvert'], //资源类型数组，用于资源判断 和资源初始化传参
+        markersList: [], //点位列表
+        resourcesCountList: [],
+        resourcesList: []
+      }
     },
-    initMarkers(list){
-      if (list != null && list.length > 0) {
-        for (let i = 0; i < list.length; i++) {
-          let markersMap = {
-            lng: 124.59,
-            lat: 43.02,
-            icon: 'marker',
-            bindPopupHtml: '',
-            click: '',
-            parameter: '',
-            keepBindPopup: false,
-            isAggregation: false
-          }
-          if (list.length > 200) {
-            markersMap.isAggregation = true;
-          }
-          //根据标签确定资源的图标
-          markersMap.icon = 'traffic-resources-' + this.resourcesList[i].label;
-          markersMap.parameter = this.resourcesList[i].id + "," + this.resourcesList[i].label;
-          markersMap.click = 'showResourcesDialog';
-          markersMap.lng = list[i].longitude;
-          markersMap.lat = list[i].latitude;
-          //POP的通用部分
-          markersMap.bindPopupHtml = '<div class="map-tip">' +
-            '<span>' +
-            ' <div class="d-l-con">' +
-            '   <div class="d-l-l-text">' +
-            '     <h4>名称：' + list[i].name + '</h4>' +
-            '   </div>' +
-            ' </div>' +
-            '</span>';
-          if(list[i].label == this.labelList[0]){//警示牌的POP
-            markersMap.bindPopupHtml += ''+
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>设置日期：' + list[i].setTime + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>' +
+    methods: {
+      //查询各类资源的数量
+      getResourcesCount(){
+        getResourcesCount().then(res => {
+          this.resourcesCountList = res.data;
+        })
+      },
+      //初始化所有资源并落点
+      selectResources(){
+        selectResources(this.labelList).then(res => {
+          this.resourcesList = res.data;
+          this.initMarkers(this.resourcesList);
+        })
+      },
+      //点击左侧某资源，将该资源进行落点
+      selectResourcesByLabel(label){
+        console.log(label)
+        let that = this;
+        //每次点击，先将原有点位清空后重新落点
+        this.markersList = [];
+        this.resourcesList = [];
+        that.$refs.supermap.clearM(false);
+        that.$refs.supermap.clearM(true);
+        selectResourcesByLabel(label).then(res => {
+          this.resourcesList = res.data;
+          this.initMarkers(this.resourcesList);
+        })
+      },
+      showResourcesDialog(param) {
+        //资源信息弹出
+        this.$refs.resourcesdialog.showResourcesDialog(param);
+      },
+      initMarkers(list){
+        if (list != null && list.length > 0) {
+          for (let i = 0; i < list.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: 'marker',
+              bindPopupHtml: '',
+              click: '',
+              parameter: '',
+              keepBindPopup: false,
+              isAggregation: false
+            }
+            if (list.length > 200) {
+              markersMap.isAggregation = true;
+            }
+            //根据标签确定资源的图标
+            markersMap.icon = 'traffic-resources-' + this.resourcesList[i].label;
+            markersMap.parameter = this.resourcesList[i].id + "," + this.resourcesList[i].label;
+            markersMap.click = 'showResourcesDialog';
+            markersMap.lng = list[i].longitude;
+            markersMap.lat = list[i].latitude;
+            //POP的通用部分
+            markersMap.bindPopupHtml = '<div class="map-tip">' +
               '<span>' +
               ' <div class="d-l-con">' +
               '   <div class="d-l-l-text">' +
-              '     <h4>用途：' + list[i].effect + '</h4>' +
+              '     <h4>名称：' + list[i].name + '</h4>' +
               '   </div>' +
               ' </div>' +
               '</span>';
+            if(list[i].label == this.labelList[0]){//警示牌的POP
+              markersMap.bindPopupHtml += ''+
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>设置日期：' + list[i].setTime + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>' +
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>用途：' + list[i].effect + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>';
+            }
+            if(list[i].label == this.labelList[1] || list[i].label == this.labelList[2]){//桥梁涵洞的POP
+              markersMap.bindPopupHtml += ''+
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>竣工日期：' + list[i].completionDate + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>' +
+                '<span>' +
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>管理单位：' + list[i].managementUnit + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>' +
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>联系电话：' + list[i].manaTel + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>' +
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>养护单位：' + list[i].maintenanceUnit + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>' +
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>联系电话：' + list[i].mainTel + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>';
+            }
+            if(list[i].remark !="" && list[i].remark !=null){//POP的备注部分
+              markersMap.bindPopupHtml += ''+
+                '<span>' +
+                ' <div class="d-l-con">' +
+                '   <div class="d-l-l-text">' +
+                '     <h4>备注：' + list[i].remark + '</h4>' +
+                '   </div>' +
+                ' </div>' +
+                '</span>' ;
+            }
+            markersMap.bindPopupHtml += '</div>'
+            this.markersList.push(markersMap)
           }
-          if(list[i].label == this.labelList[1] || list[i].label == this.labelList[2]){//桥梁涵洞的POP
-            markersMap.bindPopupHtml += ''+
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>竣工日期：' + list[i].completionDate + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>' +
-              '<span>' +
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>管理单位：' + list[i].managementUnit + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>' +
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>联系电话：' + list[i].manaTel + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>' +
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>养护单位：' + list[i].maintenanceUnit + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>' +
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>联系电话：' + list[i].mainTel + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>';
+          setTimeout(() => {
+            this.$refs.supermap.setMarkers(this.markersList)
+          }, 2000)
+        }
+      },
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      showDialog(click) {
+        if (click == 'eventLocation') {
+          this.$refs.eventLocation.showEventLocation()
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'editableLayers') {
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true
+          } else {
+            this.$refs.supermap.isEditableLayers = false
           }
-          if(list[i].remark !="" && list[i].remark !=null){//POP的备注部分
-            markersMap.bindPopupHtml += ''+
-              '<span>' +
-              ' <div class="d-l-con">' +
-              '   <div class="d-l-l-text">' +
-              '     <h4>备注：' + list[i].remark + '</h4>' +
-              '   </div>' +
-              ' </div>' +
-              '</span>' ;
+        } else if (click == 'layerSwitching') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showChild) {
+            this.$refs.bottomMenu.showChild = true
+          } else {
+            this.$refs.bottomMenu.showChild = false
           }
-          markersMap.bindPopupHtml += '</div>'
-          this.markersList.push(markersMap)
-        }
-        setTimeout(() => {
-          this.$refs.supermap.setMarkers(this.markersList)
-        }, 2000)
-      }
-    },
-    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
-    showDialog(click) {
-      if (click == 'eventLocation') {
-        this.$refs.eventLocation.showEventLocation()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'editableLayers') {
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.supermap.isEditableLayers) {
-          this.$refs.supermap.isEditableLayers = true
-        } else {
+        } else if (click == 'TVWall') {
+          this.$refs.TVWall.showTVWall()
           this.$refs.supermap.isEditableLayers = false
-        }
-      } else if (click == 'layerSwitching') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showChild) {
-          this.$refs.bottomMenu.showChild = true
-        } else {
           this.$refs.bottomMenu.showChild = false
-        }
-      } else if (click == 'TVWall') {
-        this.$refs.TVWall.showTVWall()
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChangChild = false
-      } else if (click == 'forestban') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showChild = false
-        this.$refs.bottomMenu.showChangChild = false
-        if (!this.$refs.bottomMenu.showBanChild) {
-          this.$refs.bottomMenu.showBanChild = true
-        } else {
           this.$refs.bottomMenu.showBanChild = false
-        }
-      } else if (click == 'forestchang') {
-        this.$refs.supermap.isEditableLayers = false
-        this.$refs.bottomMenu.showBanChild = false
-        this.$refs.bottomMenu.showChild = false
-        if (!this.$refs.bottomMenu.showChangChild) {
-          this.$refs.bottomMenu.showChangChild = true
-        } else {
           this.$refs.bottomMenu.showChangChild = false
+        } else if (click == 'forestban') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showChild = false
+          this.$refs.bottomMenu.showChangChild = false
+          if (!this.$refs.bottomMenu.showBanChild) {
+            this.$refs.bottomMenu.showBanChild = true
+          } else {
+            this.$refs.bottomMenu.showBanChild = false
+          }
+        } else if (click == 'forestchang') {
+          this.$refs.supermap.isEditableLayers = false
+          this.$refs.bottomMenu.showBanChild = false
+          this.$refs.bottomMenu.showChild = false
+          if (!this.$refs.bottomMenu.showChangChild) {
+            this.$refs.bottomMenu.showChangChild = true
+          } else {
+            this.$refs.bottomMenu.showChangChild = false
+          }
         }
-      }
 
-    },
-    //选择图层
-    choseLayerSwitching(url, isClear) {
-      this.$refs.supermap.layerSwitching(url, isClear)
-    },
-    //选择图层(传递数组)
-    choseLayerSwitchingList(urlList) {
-      this.$refs.supermap.layerSwitchingList(urlList)
-    },
-    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    /** ----------------------------------摄像头预览开始------------------------------------- */
-    alertLogin: function() {
-      this.$modal.msg('登录中....')
-    },
-    alertLoginSuccess: function() {
-      this.$modal.msgSuccess('登录成功！')
-    },
-    alertLoginFailed: function() {
-      this.$modal.msgError('登陆失败！')
-    },
-    alertReinstall: function() {
-      this.$modal.msgWarning('请重新安装客户端')
-    },
-    cancelEventLocationShow() {
-      if (this.oWebControl != null) {
-        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
-        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
-          },
-          function() {  // 断开与插件服务连接失败
-          })
-      }
-    },
-    /** 预览按钮操作 */
-    preview(cameraCode) {
-      let that = this
-      that.cameraVisible = true
-      getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
-        that.cameraTitle = '摄像头-'+newResponse.data.cameraName
-        that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
-        setTimeout(function() {
-          that.playhk(newResponse.data.channelCode)
-        }, 5000)
-      })
-
-    },
-    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
-      if (!this.isLogin) {
-        this.$Message.info('正在登陆客户端，请稍等......')
-        return false
-      }
-      this.ws.openVideo(cameraParams)
-    },
-    /** ----------------------------------摄像头预览结束------------------------------------- */
-    /** ----------------------------------海康摄像头预览开始------------------------------------- */
-    // 创建播放实例
-    initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
-      let that=this
-      that.oWebControl = new WebControl({
-        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({   // 设置消息回调
-              cbIntegrationCallBack: cbIntegrationCallBack
+      },
+      //选择图层
+      choseLayerSwitching(url, isClear) {
+        this.$refs.supermap.layerSwitching(url, isClear)
+      },
+      //选择图层(传递数组)
+      choseLayerSwitchingList(urlList) {
+        this.$refs.supermap.layerSwitchingList(urlList)
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      alertLogin: function() {
+        this.$modal.msg('登录中....')
+      },
+      alertLoginSuccess: function() {
+        this.$modal.msgSuccess('登录成功！')
+      },
+      alertLoginFailed: function() {
+        this.$modal.msgError('登陆失败！')
+      },
+      alertReinstall: function() {
+        this.$modal.msgWarning('请重新安装客户端')
+      },
+      cancelEventLocationShow() {
+        if (this.oWebControl != null) {
+          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+          this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
+            },
+            function() {  // 断开与插件服务连接失败
             })
+        }
+      },
+      /** 预览按钮操作 */
+      preview(cameraCode) {
+        let that = this
+        that.cameraVisible = true
+        getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
+          that.cameraTitle = '摄像头-'+newResponse.data.cameraName
+          that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
+          setTimeout(function() {
+            that.playhk(newResponse.data.channelCode)
+          }, 5000)
+        })
+
+      },
+      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
+        if (!this.isLogin) {
+          this.$Message.info('正在登陆客户端，请稍等......')
+          return false
+        }
+        this.ws.openVideo(cameraParams)
+      },
+      /** ----------------------------------摄像头预览结束------------------------------------- */
+      /** ----------------------------------海康摄像头预览开始------------------------------------- */
+      // 创建播放实例
+      initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
+        let that=this
+        that.oWebControl = new WebControl({
+          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({   // 设置消息回调
+                cbIntegrationCallBack: cbIntegrationCallBack
+              })
 
-            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
-              that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
+              that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
+              })
+            }, function() { // 启动插件服务失败
             })
-          }, function() { // 启动插件服务失败
-          })
-        },
-        cbConnectError: function() { // 创建WebControl实例失败
-          that.oWebControl = null
-          $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
-          WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
-          initCount++
-          if (initCount < 3) {
-            setTimeout(function() {
-              that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
-            }, 3000)
-          } else {
-            $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+          },
+          cbConnectError: function() { // 创建WebControl实例失败
+            that.oWebControl = null
+            $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
+            WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
+            initCount++
+            if (initCount < 3) {
+              setTimeout(function() {
+                that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
+              }, 3000)
+            } else {
+              $('#playWnd').html('插件启动失败，请检查插件是否安装！')
+            }
+          },
+          cbConnectClose: function(bNormalClose) {
+            // 异常断开：bNormalClose = false
+            // JS_Disconnect正常断开：bNormalClose = true
+            console.log('cbConnectClose')
+            that.oWebControl = null
           }
-        },
-        cbConnectClose: function(bNormalClose) {
-          // 异常断开：bNormalClose = false
-          // JS_Disconnect正常断开：bNormalClose = true
-          console.log('cbConnectClose')
-          that.oWebControl = null
-        }
-      })
-    },
-    //播放海康摄像头
-    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以上布局下可指定播放窗口）
+        })
+      },
+      //播放海康摄像头
+      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以上布局下可指定播放窗口）
 
-      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
-      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
+        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
+        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
 
-      this.oWebControl.JS_RequestInterface({
-        funcName: 'startPreview',
-        argument: JSON.stringify({
-          cameraIndexCode: cameraIndexCode,                //监控点编号
-          streamMode: streamMode,                         //主子码流标识
-          transMode: transMode,                           //传输协议
-          gpuMode: gpuMode,                               //是否开启GPU硬解
-          wndId: wndId                                     //可指定播放窗口
+        this.oWebControl.JS_RequestInterface({
+          funcName: 'startPreview',
+          argument: JSON.stringify({
+            cameraIndexCode: cameraIndexCode,                //监控点编号
+            streamMode: streamMode,                         //主子码流标识
+            transMode: transMode,                           //传输协议
+            gpuMode: gpuMode,                               //是否开启GPU硬解
+            wndId: wndId                                     //可指定播放窗口
+          })
         })
-      })
-    },
-    //初始化
-    init(newappkey,newloginIp,newsecret,newloginPort) {
-      let that = this
-      that.getPubKey(function() {
-        ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
-        var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
-        var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
-        var ip = newloginIp                           //综合安防管理平台IP地址，必填
-        var playMode = 0                                  //初始播放模式：0-预览，1-回放
-        var port = Number(newloginPort)                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
-        var snapDir = 'D:\\SnapDir'                       //抓图存储路径
-        var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
-        var layout = '1x1'                                //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'  //自定义工具条按钮
-        ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
+      },
+      //初始化
+      init(newappkey,newloginIp,newsecret,newloginPort) {
+        let that = this
+        that.getPubKey(function() {
+          ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
+          var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
+          var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
+          var ip = newloginIp                           //综合安防管理平台IP地址，必填
+          var playMode = 0                                  //初始播放模式：0-预览，1-回放
+          var port = Number(newloginPort)                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
+          var snapDir = 'D:\\SnapDir'                       //抓图存储路径
+          var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
+          var layout = '1x1'                                //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                       //自定义工具条按钮
+            })
+          }).then(function(oData) {
+            that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+          })
+        })
+      },
+      //获取公钥
+      getPubKey(callback) {
+        let that = this
         that.oWebControl.JS_RequestInterface({
-          funcName: 'init',
+          funcName: 'getRSAPubKey',
           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                       //自定义工具条按钮
+            keyLength: 1024
           })
         }).then(function(oData) {
-          that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-        })
-      })
-    },
-    //获取公钥
-    getPubKey(callback) {
-      let that = this
-      that.oWebControl.JS_RequestInterface({
-        funcName: 'getRSAPubKey',
-        argument: JSON.stringify({
-          keyLength: 1024
+          console.log(oData)
+          if (oData.responseMsg.data) {
+            that.pubKey = oData.responseMsg.data
+            callback()
+          }
         })
-      }).then(function(oData) {
-        console.log(oData)
-        if (oData.responseMsg.data) {
-          that.pubKey = oData.responseMsg.data
-          callback()
-        }
-      })
-    },
+      },
 //RSA加密
-    setEncrypt(value) {
-      var encrypt = new JSEncrypt()
-      encrypt.setPublicKey(this.pubKey)
-      return encrypt.encrypt(value)
-    },
-    /** ----------------------------------海康摄像头预览结束------------------------------------- */
+      setEncrypt(value) {
+        var encrypt = new JSEncrypt()
+        encrypt.setPublicKey(this.pubKey)
+        return encrypt.encrypt(value)
+      },
+      /** ----------------------------------海康摄像头预览结束------------------------------------- */
 
+    }
   }
-}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
+  @import '@/assets/styles/base.scss';
 
-.playWnd {
-  margin: 4px 0 0 8px;
-  width: 1020px; /*播放容器的宽和高设定*/
-  height: 600px;
-  border: 1px solid red;
-}
+  .playWnd {
+    margin: 4px 0 0 8px;
+    width: 1020px; /*播放容器的宽和高设定*/
+    height: 600px;
+    border: 1px solid red;
+  }
 </style>