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-if="item.eventType == '510'" src="../assets/images/水压.png"
                             style="width: 93px;height: 64px" />
                        <img v-else-if="item.eventType == '510'" src="../assets/images/水尺.png"
                             style="width: 93px;height: 64px" />
                        <img v-else-if="item.eventType == '511'" src="../assets/images/水流速.png"
                             style="width: 93px;height: 64px" />
                        <img v-else-if="item.eventType == '403'" src="../assets/images/土壤墒情监测.png"
                             style="width: 93px;height: 64px" />
                        <img v-else-if="item.eventType == '601'" src="../assets/images/大气监测.png"
                             style="width: 93px;height: 64px" />
                        <img v-else-if="item.eventType == '602'" src="../assets/images/水质监测.png"
                             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 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>
                            <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>
    <TVWall ref="TVWall"></TVWall>
    <!--事件弹层-->
    <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 {
  getNearEvent1,
  getNearCamera
} from '@/api/event'
import {
  getHaiKangVideoServer
} from '@/api/haikang/haikang'
import eventLocationSupermap from '@/components/supermap' //超图
import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗

/** ----------------------------------摄像头预览开始------------------------------------- */
import {
  getDahuaVideoServer, getTVWallList
} from '@/api/dahua/dahua'
import DHWs from '@/dahua/lib/DHWs'
import TVWall from "@/components/TVWall.vue";
/** ----------------------------------摄像头预览结束------------------------------------- */
export default {
  dicts: ['event_source'],
  components: {
    eventLocationSupermap,
    eventdetailsdialog,
    TVWall
  },
  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: {
    showLatLng(lat, lng) {
      this.longitude=lng
      this.latitude=lat
    },
    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
    },
    showEventDialog(eventCode) {
      //事件信息弹出
      this.$refs.eventdetailsdialog.showEventDialog(eventCode)
    },
    getNearEvent() {
      if (this.longitude == null || this.longitude == '' || this.latitude == null || this.latitude == '') {
        this.$modal.msgError('请输入经纬度！')
        return
      } else if (this.longitude >180 || this.longitude < -180 || this.latitude > 90 || this.latitude < -90) {
        this.$modal.msgError('请输入正确经纬度！')
        return
      }
      this.activeName = 'event'
      this.$refs.eventLocationSupermap.dropLocation(this.latitude,this.longitude,10)
      let marker = [{
        lng: this.longitude,
        lat: this.latitude,
        icon: 'marker',
        bindPopupHtml: '搜索点位',
        click: '',
        parameter: '',
        keepBindPopup: false,
        isAggregation: false
      }]
      let that = this
      getNearEvent1(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'
            } 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
            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.clearP()

            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.clearP()

            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
        } else if (this.longitude >180 || this.longitude < -180 || this.latitude > 90 || this.latitude < -90) {
          this.$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: "",
                name: i,
                keepBindPopup: false,
                isAggregation: false,
              };
              if (res.data[i].channelCode != null) {
                markersMap.parameter = {
                  code: res.data[i].cameraCode,
                  name: res.data[i].cameraName,
                  type: res.data[i].cameraFactory,
                };
              } else {
                markersMap.parameter = [];
              }
              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].operatorType == "1" ? "联通" : (res.data[i].operatorType == "2" ? "移动":"电信")) + '</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
    },
    showTVWall(channelCode, channelName) {
      let tvListJson = [
        {
          switchTab: "2",
          treeLabels: [
            {
              id: null,
              labelCode: "999",
              labelName: "电视墙",
              cameraType: null,
              parentLabelCode: "",
            },
            {
              id: "spcamera00010",
              labelCode: channelCode,
              labelName: channelName,
              cameraType: "1",
              parentLabelCode: "999",
            },
          ],
          labelChannels: [
            {
              labelCode: channelCode,
              channelDates: [
                {
                  channelCode: channelCode,
                  channelName: channelName,
                  channelSn: null,
                  cameraType: "1",
                  online: "1",
                  cameraCode: "1",
                },
              ],
            },
          ],
        },
      ];
      this.$refs.TVWall.showTVWall(tvListJson, [
        {
          channelId: channelCode,
        },
      ]);
    },
    /** ----------------------------------摄像头预览开始------------------------------------- */
    alertLogin: function() {
      this.$modal.msg('登录中....')
    },
    alertLoginSuccess: function() {
      this.$modal.msgSuccess('登录成功！')
    },
    alertLoginFailed: function() {
      this.$modal.msgError('登陆失败！')
    },
    alertReinstall: function() {
      this.$modal.msgWarning('请重新安装客户端')
    },
    cancelEventLocationShow() {
      this.longitude=""
      this.latitude=""
      if (this.oWebControl != null) {
        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
          },
          function() {  // 断开与插件服务连接失败
          })
      }
    },
    /** 预览按钮操作 */
    preview(cameraParam) {
      this.showTVWall(cameraParam.code, cameraParam.name);
    },
    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
      if (!this.isLogin) {
        this.$Message.info('正在登陆客户端，请稍等......')
        return false
      }
      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') {
        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>