事件定位摄像头查看

src/components/eventLocation.vue

@@ -77,6 +77,12 @@
                             归档
                           </div>
                         </div>
+                        <div v-if="item.eventStatusValue=='forest_event_status_7'" class="event-state-qr">
+                          <i class="el-icon-caret-left"></i>
+                          <div class="event-list-state-qr">
+                            确认
+                          </div>
+                        </div>
                         <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
                         <div class="bgt-info-place">
                           <ul>
@@ -315,7 +321,7 @@ export default {
         isAggregation: false
       }]
       let that = this
-      getNearEvent(that.longitude, that.latitude).then(res => {
+      getNearEvent(that.longitude, that.latitude,'').then(res => {
         that.markersList = []
         that.eventList = res.data
         if (that.eventList != null && that.eventList.length > 0) {
@@ -351,6 +357,9 @@ export default {
             } else if (that.eventList[i].eventStatusValue == 'forest_event_status_6') {
               markersMap.click = 'showEventDialog'
               markersMap.icon = 'sj-icon-map-guidang'
+            } else if (that.eventList[i].eventStatusValue == 'forest_event_status_7') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-queren'
             }
             markersMap.parameter = that.eventList[i].eventCode
             markersMap.lng = that.eventList[i].longitude
@@ -393,7 +402,7 @@ export default {
             that.$refs.eventLocationSupermap.clearM(false)
             that.$refs.eventLocationSupermap.clearM(true)
             that.$refs.eventLocationSupermap.setMarkers(that.markersList)
-              that.$refs.eventLocationSupermap.setMarkers(marker)
+            that.$refs.eventLocationSupermap.setMarkers(marker)
           }, 1000)
         } else {
           setTimeout(() => {
@@ -436,10 +445,17 @@ export default {
                 icon: 'camera',
                 bindPopupHtml: '',
                 click: 'preview',
-                parameter: res.data[i].cameraCode,
                 keepBindPopup: false,
                 isAggregation: false
               }
+              if (res.data[i].cameraCode != null) {
+                markersMap.parameter = {
+                  code: res.data[i].cameraCode,
+                  type: res.data[i].cameraFactory
+                }
+              } else {
+                markersMap.parameter = []
+              }
               if (res.data.length > 50) {
                 markersMap.isAggregation = true
               }
@@ -489,7 +505,7 @@ export default {
               that.$refs.eventLocationSupermap.setMarkersRadius(that.cameraMarkersList)
               that.$refs.eventLocationSupermap.setMarkers(marker)
             }, 1000)
-          }else{
+          } else {
             setTimeout(() => {
               that.$refs.eventLocationSupermap.clearM(true)
               that.$refs.eventLocationSupermap.clearM(false)
@@ -520,50 +536,58 @@ export default {
     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
-      // getDahuaVideoServer().then(newResponse => {
-      //   console.log(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,
-      //         token: '',
-      //         https: 1
-      //       })
-      //       this.ws.on('loginState', (res) => {
-      //         this.isLogin = res
-      //         console.log('---res-----', res)
-      //         if (res) {
-      //           this.alertLoginSuccess()
-      //           this.activePanel = 'key2'
-      //           this.realTimeVideoDialog(channelCode)
-      //         } else {
-      //           this.alertLoginFailed()
-      //         }
-      //       })
-      //     } else { // 连接客户端失败
-      //       this.alertReinstall()
-      //     }
-      //   })
-      // })
-      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)
-        that.$nextTick(() => {
-          console.log(that.oWebControl)
+    preview(cameraParam) {
+      if (cameraParam.type == '大华') {
+        getDahuaVideoServer().then(newResponse => {
+          console.log(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,
+                token: '',
+                https: 0
+              })
+              this.ws.on('loginState', (res) => {
+                this.isLogin = res
+                console.log('---res-----', res)
+                if (res) {
+                  this.alertLoginSuccess()
+                  this.activePanel = 'key2'
+                  this.realTimeVideoDialog(cameraParam.code)
+                } else {
+                  this.alertLoginFailed()
+                }
+              })
+            } else { // 连接客户端失败
+              this.alertReinstall()
+            }
+          })
+        })
+      } else if (cameraParam.type == '海康') {
+        let that = this
+        that.cameraVisible = true
+        getHaiKangVideoServer({ cameraCode: cameraParam.code }).then(newResponse => {
+          that.cameraTitle = '摄像头-' + newResponse.data.cameraName
+          that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse.data.loginPort)
           setTimeout(function() {
-            console.log(that.oWebControl)
             that.playhk(newResponse.data.channelCode)
           }, 5000)
         })
-      })
+      }
 
     },
     realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
@@ -571,10 +595,144 @@ export default {
         this.$Message.info('正在登陆客户端，请稍等......')
         return false
       }
-      this.ws.openVideo(cameraParams)
+      const params = [cameraParams]
+      this.ws.openVideo(params)
     },
     /** ----------------------------------摄像头预览结束------------------------------------- */
 
+
+    /** ----------------------------------海康摄像头预览开始------------------------------------- */
+    // 创建播放实例
+    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)  // 创建播放实例成功后初始化
+            })
+          }, function() { // 启动插件服务失败
+          })
+        },
+        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() {
+              that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
+            }, 3000)
+          } else {
+            $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
+          }
+        },
+        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以上布局下可指定播放窗口）
+
+      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                                     //可指定播放窗口
+        })
+      })
+    },
+    //初始化
+    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: 'getRSAPubKey',
+        argument: JSON.stringify({
+          keyLength: 1024
+        })
+      }).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)
+    },
+    /** ----------------------------------海康摄像头预览结束------------------------------------- */
+
     /** ----------------------------------事件弹窗开始------------------------------------- */
     editableLayers(processedState) {
       if (processedState == 'notProcessedSupermap') {
@@ -767,6 +925,7 @@ export default {
     /** ----------------------------------海康摄像头预览结束------------------------------------- */
   }
 }
+
 // 推送消息
 function cbIntegrationCallBack(oData) {
   console.log(JSON.stringify(oData.responseMsg))

src/views/forest.vue

@@ -420,16 +420,8 @@ import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
 import TVWall from '@/components/TVWall.vue' //电视墙弹窗
 import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
 import firespread from '@/views/firespread.vue' //事件详情弹窗
-
-/** ----------------------------------摄像头预览开始------------------------------------- */
-import {
-  getDahuaVideoServer
-} from '@/api/dahua/dahua'
-// import DHWs from '@/dahua/lib/DHWs'
 import Firespread from "./firespread";
 
-/** ----------------------------------摄像头预览结束------------------------------------- */
-
 let echarts = require('echarts')
 export default {
   components: {
@@ -446,11 +438,6 @@ export default {
     firespread
   },
   created() {
-    /** ----------------------------------摄像头预览开始------------------------------------- */
-    // const DHWsInstance = DHWs.getInstance()
-    // this.ws = DHWsInstance
-    /** ----------------------------------摄像头预览结束------------------------------------- */
-
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     window.showDialog = this.showDialog
     window.choseLayerSwitching = this.choseLayerSwitching
@@ -1269,63 +1256,6 @@ export default {
       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('请重新安装客户端')
-    },
-    /** 预览按钮操作 */
-    preview(channelCode) {
-      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,
-              token: '',
-              https: 1
-            })
-            this.ws.on('loginState', (res) => {
-              this.isLogin = res
-              if (res) {
-                this.alertLoginSuccess()
-                this.activePanel = 'key2'
-                this.realTimeVideoDialog(channelCode)
-              } else {
-                this.alertLoginFailed()
-              }
-            })
-          } else { // 连接客户端失败
-            this.alertReinstall()
-          }
-        })
-      })
-    },
-    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
-      if (!this.isLogin) {
-        this.$Message.info('正在登陆客户端，请稍等......')
-        return false
-      }
-      this.ws.openVideo(cameraParams)
-    }
-    /** ----------------------------------摄像头预览结束------------------------------------- */
   }
 }
 </script>

vue.config.js

@@ -48,12 +48,11 @@ module.exports = {
      * 寻找附件-有缘人@阿弥陀佛
      * @param attach_ids
      */
-
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.3.11:3031`,
-        //  target: `http://127.0.0.1:3031`,
+        // target: `http://127.0.0.1:3031`,
+        target: `http://121.36.228.66:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -65,7 +64,7 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        sassOptions: { outputStyle: 'expanded' }
+        sassOptions: {outputStyle: 'expanded'}
       }
     }
   },