Project_yhfu/src/components/eventLocation.vue

<template>
  <div>
    <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%"
               @close="cancelEventLocationShow()">
      <div class="event-info">
        <div class="event-info-con">
          <div class="e-location-left">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="周边点位" name="monitor">
                <div class="forthis">
                  <div class="i-list-con overflow-y" style="height: 50vh;">
										<span v-for="(item,index) in cameraList"
                          v-on:click="dropLocation(item.latitude,item.longitude)">
											<div class="d-l-con" @click="">
												<div class="d-l-l-text">
													<i class="iconfont sj-icon-jkzx icon-sxt"></i>
													<h4>{{ item.cameraName }}</h4>
												</div>
											</div>
										</span>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="周边事件" name="event">
                <div class="forthis">
                  <div class="i-list-con overflow-y" style="height: 50vh;">
                    <div class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
                         @click="dropLocation(item.latitude,item.longitude)">
                      <div class="bgt-img">
                        <img v-if="item.picturePath!=null&&item.picturePath!=''" :src="item.picturePath"
                             style="width: 93px;height: 64px"/>
                        <img v-else src="../assets/images/integrated/event-img-sub.png"
                             style="width: 93px;height: 64px"/>
                      </div>
                      <div class="bgt-info">
                        <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount==0"
                             class="event-state-sb">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-sb">
                            新上报
                          </div>
                        </div>
                        <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount>0"
                             class="event-state-cb">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-cb">
                            催办
                          </div>
                        </div>
                        <div v-if="item.eventStatusValue=='forest_event_status_2'" class="event-state-qs">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-qs">
                            签收
                          </div>
                        </div>
                        <div v-if="item.eventStatusValue=='forest_event_status_3'" class="event-state-wb">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-wb">
                            误报
                          </div>
                        </div>
                        <div v-if="item.eventStatusValue=='forest_event_status_4'" class="event-state-cf">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-cf">
                            重复
                          </div>
                        </div>
                        <div v-if="item.eventStatusValue=='forest_event_status_5'" class="event-state-bj">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-bj">
                            办结
                          </div>
                        </div>
                        <div v-if="item.eventStatusValue=='forest_event_status_6'" class="event-state-gd">
                          <i class="el-icon-caret-left"></i>
                          <div class="event-list-state-gd">
                            归档
                          </div>
                        </div>
                        <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
                        <div class="bgt-info-place">
                          <ul>
                            <li>{{ item.createTime }}</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="e-location-right" style="height: 57.8vh;">
            <div class="event-info-top">
              <el-form>
                <div class="event-info-top-grp">
                  <el-input placeholder="输入经度" type="number" v-model="longitude" class="m-l-none">
                  </el-input>
                  <el-input placeholder="输入纬度" type="number" v-model="latitude">
                  </el-input>
                  <el-button type="success" size="mini" @click="getNearEvent()">定位</el-button>
                </div>
              </el-form>
            </div>
            <!-- 地图 -->
            <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 51vh;"
                                   :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}"
                                   :codes="['9fa5']"
                                   :isSideBySide="false" @preview="preview"
                                   @showEventDialog="showEventDialog"></eventLocationSupermap>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--事件弹层-->
    <div class="event-info">
      <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="this.getCurrentDataStr"></eventdetailsdialog>
    </div>
    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
               @close="cancelEventLocationShow()">
      <div style="width:1020px;height:625px;position:relative;">
        <!--视频窗口展示---海康-->
        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import {
    getNearEvent,
    getNearCamera
  } from '@/api/event'
  import {
    getHaiKangVideoServer
  } from '@/api/haikang/haikang'
  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  import eventLocationSupermap from '@/components/supermap' //超图
  import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {
    getDahuaVideoServer
  } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  export default {
    dicts: ['event_source'],
    components: {
      eventLocationSupermap,
      eventdetailsdialog,
      vBottomMenu

    },
    data() {
      return {
        /** ----------------------------------摄像头预览开始------------------------------------- */
        activePanel: 'key1',
        isLogin: false,
        cameraParams: [],
        ws: null,
        /** ----------------------------------摄像头预览结束------------------------------------- */
        //海康
        cameraTitle: '',
        cameraVisible: false,
        initCount: 0,
        pubKey: '',
        oWebControl: null,
        /** ----------------------------------事件弹窗开始------------------------------------- */
        eventInfoVisibleActiveName: 'info',
        eventInfoVisible_notProcessed: false,
        eventInfoVisible_Processed: false,
        listEventPic: [], //事件图片
        url: '',
        id: '',
        eventType: '',
        deptName: '',
        eventStatus: '',
        cameraId: '',
        createTime: '',
        reportAddress: '',
        eventCode: null,
        eventSource: '',
        //事件详情弹出显隐
        eventTypeShow: false,
        listEventDept: [], //涉事单位List,
        listLog: [], //处理过程List,
        listoperateDept: [],
        optionsNotProcessed: [{
          value: 'wyc',
          label: '无异常'
        }, {
          value: 'qr',
          label: '确认'
        }],
        listeventType: [],
        updateEventStatusForm: {
          id: '',
          eventStatus: '',
          eventCode: '',
          deptId: '',
          deptName: '',
          eventType: '',
          zt: ''
        },
        /** ----------------------------------事件弹窗结束-未处理------------------------------------- */
        aniu: true,
        showZt: true,
        zt: null,
        fireReport: false,
        optionsProcessed: [{
          value: 'bj',
          label: '办结'
        }, {
          value: 'zy',
          label: '支援'
        },
          {
            value: 'gd',
            label: '归档'
          }
        ],
        // 弹出层 基本信息
        information: [{
          name: '标题',
          id: '',
          content: '前段发现警情信息'

        },
          {
            name: '时间',
            id: '',
            content: '2022-02-14 14:30'
          },
          {
            name: '来源',
            id: '',
            content: '摄像头'
          },
          {
            name: '坐标',
            id: '',
            content: '125.78945646'
          },
          {
            name: '纬度',
            id: '',
            content: '43.987424'
          },
          {
            name: '上报人',
            id: '',
            content: '党校监控点位'
          },
          {
            name: '详细信息',
            id: '',
            content: '这里发现病虫害，需要立刻支援'
          }
        ],
        eventLocationVisible: false,
        longitude: '',
        latitude: '',
        activeName: 'event',
        eventList: [],
        markersList: [],
        cameraList: [],
        cameraMarkersList: []
      }
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance()
      this.ws = DHWsInstance
      /** ----------------------------------摄像头预览结束------------------------------------- */
    },
    methods: {
      getCurrentDataStr() {
        let date = new Date()
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y + '-' + m + '-' + d
      },
      cancelEventLocationShow() {
        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
            },
            function() {  // 断开与插件服务连接失败
            })
        }
      },
      showEventDialog(eventCode) {
        //事件信息弹出
        this.$refs.eventdetailsdialog.showEventDialog(eventCode)
      },
      getNearEvent() {
        if (this.longitude == null || this.longitude == '' || this.latitude == null || this.latitude == '') {
          this.$modal.msgError('请输入经纬度！')
          return
        }
        this.activeName = 'event'
        let marker = [{
          lng: this.longitude,
          lat: this.latitude,
          icon: 'marker',
          bindPopupHtml: '搜索点位',
          click: '',
          parameter: '',
          keepBindPopup: false,
          isAggregation: false
        }]
        let that = this
        getNearEvent(that.longitude, that.latitude).then(res => {
          that.markersList = []
          that.eventList = res.data
          if (that.eventList != null && that.eventList.length > 0) {
            for (let i = 0; i < that.eventList.length; i++) {
              let markersMap = {
                lng: 124.59,
                lat: 43.02,
                icon: 'marker',
                bindPopupHtml: '',
                click: '',
                parameter: '',
                keepBindPopup: false,
                isAggregation: false
              }
              if (that.eventList.length > 200) {
                markersMap.isAggregation = true
              }
              if (that.eventList[i].eventStatusValue == 'forest_event_status_1') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-xinshangbao'
              }
              if (that.eventList[i].eventStatusValue == 'forest_event_status_1' && that.eventList[i].urgeCount > 0) {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-cuiban'
              } else if (that.eventList[i].eventStatusValue == 'forest_event_status_2') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-qianshou'
                markersMap.isAggregation = false
              } else if (that.eventList[i].eventStatusValue == 'forest_event_status_5') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-banjie'
                markersMap.isAggregation = false
              } else if (that.eventList[i].eventStatusValue == 'forest_event_status_6') {
                markersMap.click = 'showEventDialog'
                markersMap.icon = 'sj-icon-map-guidang'
              }
              markersMap.parameter = that.eventList[i].eventCode
              markersMap.lng = that.eventList[i].longitude
              markersMap.lat = that.eventList[i].latitude
              markersMap.bindPopupHtml = '<div class="map-tip">' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>经纬度：' + that.eventList[i].longitude + ',' + that.eventList[i].latitude + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件名称：' + that.eventList[i].eventName + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>事件时间：' + that.eventList[i].createTime + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>'
              if(that.eventList[i].pictureType=='image'&&that.eventList[i].picturePath != null && that.eventList[i].picturePath != ''){
                markersMap.bindPopupHtml += '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '<img src="' + that.eventList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>'
              }
              markersMap.bindPopupHtml += '</div>'
              that.markersList.push(markersMap)
            }
            setTimeout(() => {
              that.$refs.eventLocationSupermap.clearM(false)
              that.$refs.eventLocationSupermap.clearM(true)
              that.$refs.eventLocationSupermap.setMarkers(that.markersList)
              that.$refs.eventLocationSupermap.setMarkers(marker)
            }, 1000)
          } else {
            setTimeout(() => {
              that.$refs.eventLocationSupermap.clearM(false)
              that.$refs.eventLocationSupermap.clearM(true)
              that.$refs.eventLocationSupermap.setMarkers(marker)
            }, 1000)
          }
        })
      },
      handleClick(tab, event) {
        let that = this
        that.$refs.eventLocationSupermap.controlLevel(8)
        let marker = [{
          lng: that.longitude,
          lat: that.latitude,
          icon: 'marker',
          bindPopupHtml: '定位',
          click: '',
          parameter: '',
          keepBindPopup: false,
          isAggregation: false
        }]
        if (tab.name == 'monitor') {
          if (that.longitude == null || that.longitude == '' || that.latitude == null || that.latitude == '') {
            that.$modal.msgError('请输入经纬度！')
            return
          }
          that.cameraMarkersList = []
          that.cameraList = []
          getNearCamera(that.longitude, that.latitude).then(res => {
            //根据设备类型查看列表
            that.cameraList = res.data

            if (res.data != null && res.data.length > 0) {
              for (let i = 0; i < res.data.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: 'camera',
                  bindPopupHtml: '',
                  click: 'preview',
                  parameter: res.data[i].cameraCode,
                  keepBindPopup: false,
                  isAggregation: false
                }
                if (res.data.length > 50) {
                  markersMap.isAggregation = true
                }

                markersMap.lng = res.data[i].longitude
                markersMap.lat = res.data[i].latitude
                markersMap.radius = res.data[i].cameraRadius
                markersMap.bindPopupHtml = '<div class="map-tip">' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>经纬度：' + res.data[i].longitude +
                  ',' + res.data[i].latitude + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>摄像头名称：' + res.data[i]
                    .cameraName + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>摄像头类型：' + res.data[i]
                    .cameraFactory + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>摄像头半径：' + res.data[i]
                    .cameraRadius + '米</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '</div>'
                that.cameraMarkersList.push(markersMap)
              }
              setTimeout(() => {
                that.$refs.eventLocationSupermap.clearM(true)
                that.$refs.eventLocationSupermap.clearM(false)
                that.$refs.eventLocationSupermap.setMarkersRadius(that.cameraMarkersList)
                that.$refs.eventLocationSupermap.setMarkers(marker)
              }, 1000)
            }else{
              setTimeout(() => {
                that.$refs.eventLocationSupermap.clearM(true)
                that.$refs.eventLocationSupermap.clearM(false)
                that.$refs.eventLocationSupermap.setMarkers(marker)
              }, 1000)
            }
          })
        } else {
          that.getNearEvent()
        }
      },
      dropLocation(lat, lng) {
        this.$refs.eventLocationSupermap.dropLocation(lat, lng)
      },
      showEventLocation() {
        this.eventLocationVisible = true
      },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function() {
        this.$modal.msg('登录中....')
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function() {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function() {
        this.$modal.msgWarning('请重新安装客户端')
      },
      /** 预览按钮操作 */
      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)
            setTimeout(function() {
              console.log(that.oWebControl)
              that.playhk(newResponse.data.channelCode)
            }, 5000)
          })
        })

      },
      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......')
          return false
        }
        this.ws.openVideo(cameraParams)
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */

      /** ----------------------------------事件弹窗开始------------------------------------- */
      editableLayers(processedState) {
        if (processedState == 'notProcessedSupermap') {
          let aa = this.$refs.notProcessedSupermap.isEditableLayers
          if (!this.$refs.notProcessedSupermap.isEditableLayers) {
            this.$refs.notProcessedSupermap.isEditableLayers = true
          } else {
            this.$refs.notProcessedSupermap.isEditableLayers = false
          }
        } else {
          let bb = this.$refs.processedSupermap.isEditableLayers
          if (!this.$refs.processedSupermap.isEditableLayers) {
            this.$refs.processedSupermap.isEditableLayers = true
          } else {
            this.$refs.processedSupermap.isEditableLayers = false
          }
        }
      },
      switchImage(url) {
        this.url = url
      },
      formLeaveTable() {
        let p = new Promise((resolve, reject) =>
          reject()
        )
        return p
      },
      async beforeLeave(newactiveName, oldActiveName) {
        let that = this
        if (newactiveName == 'frame') {
          return await that.formLeaveTable()
        }
      },
      setXsYc() {
        let that = this
        if (this.eventStatus == 'qr') {
          this.eventTypeShow = true
        } else {
          this.eventTypeShow = false
        }
      },
      setValue(event) {
        this.deptId = event.value
        this.deptName = event.label
      },
      cancelEventShow() {
        this.eventInfoVisibleActiveName = 'info'
        this.listEventPic = [] //事件图片
        this.listEventDept = [] //涉事单位List,
        this.listLog = [] //处理过程List,
        this.listoperateDept = []
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.eventTypeShow = false
        this.eventType = ''
        this.deptName = ''
        this.eventStatus = ''
      },
      /** ----------------------------------事件弹窗结束------------------------------------- */
      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // 创建播放实例
      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来启动程序
            that.initCount++
            if (that.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
            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)
      }
      /** ----------------------------------海康摄像头预览结束------------------------------------- */
    }
  }
  // 推送消息
  function cbIntegrationCallBack(oData) {
    console.log(JSON.stringify(oData.responseMsg))
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .event-info-con {
    width: 100%;
    display: flex;

    .e-left {
      width: 32%;
    }

    .e-center {
      width: 30%;
      margin-left: 1%;

      .img-company {
        width: 100%;
        height: 18.3vh;

        img {
        }
      }
    }

    .e-right {
      margin-left: 1%;
      width: 45%;
    }

    .e-location-left {
      width: 28%;
    }

    .e-location-right {
      width: 71%;
      margin-left: 1rem;
    }
  }

  .el-dialog:not(.is-fullscreen) {
    margin-top: 5.5vh !important;
  }

  .bottom-menu-normal {
    max-width: 90%;
    padding: 0 3rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 100000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
    background-size: cover;
    overflow: hidden;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .5rem;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      white-space: nowrap;

      i {
        font-size: 1rem;
        color: $inBlue;
        text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
        margin-right: 0.2rem;
      }
    }

    .btm-m-con:hover {
      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      filter: brightness(2.3);
      -webkit-transform: translateX(0.2rem);
      transform: translateX(0.2rem);
      transition: all 0.2s ease-in-out;

      i {
        color: $inBlueHover;
        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      }
    }

    .m-l-none {
      .el-input__inner {
        margin-left: 0 !important;
      }
    }

  }
</style>