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.reportTime }}</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>
	</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,
				/** ----------------------------------摄像头预览结束------------------------------------- */
				/** ----------------------------------事件弹窗开始------------------------------------- */
				eventInfoVisibleActiveName: 'info',
				eventInfoVisible_notProcessed: false,
				eventInfoVisible_Processed: false,
				listEventPic: [], //事件图片
				url: '',
				id: '',
				eventType: '',
				deptName: '',
				eventStatus: '',
				cameraId: '',
				reportTime: '',
				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() {
				this.longitude = ''
				this.latitude = ''
				this.activeName = 'event'
				this.eventList = []
				this.markersList = []
				this.cameraList = []
				this.cameraMarkersList = []

			},
      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(this.longitude, this.latitude).then(res => {
					that.markersList = []
          that.eventList=res.data
            if (this.eventList != null && this.eventList.length > 0) {
              for (let i = 0; i < this.eventList.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: 'marker',
                  bindPopupHtml: '',
                  click: '',
                  parameter: '',
                  keepBindPopup: false,
                  isAggregation: false
                }
                if (this.eventList.length > 50) {
                  markersMap.isAggregation = true
                }
                if (this.eventList[i].eventStatusValue == 'forest_event_status_1'&&this.eventList[i].urgeCount==0) {
                  markersMap.click = 'showEventDialog'
                  markersMap.icon = 'sj-icon-map-xinshangbao'
                  markersMap.isAggregation = false
                }if (this.eventList[i].eventStatusValue == 'forest_event_status_1'&&this.eventList[i].urgeCount>0) {
                  markersMap.click = 'showEventDialog'
                  markersMap.icon = 'sj-icon-map-cuiban'
                  markersMap.isAggregation = false
                } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
                  markersMap.click = 'showEventDialog'
                  markersMap.icon = 'sj-icon-map-qianshou'
                }else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
                  markersMap.click = 'showEventDialog'
                  markersMap.icon = 'sj-icon-map-banjie'
                } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
                  markersMap.click = 'showEventDialog'
                  markersMap.icon = 'sj-icon-map-guidang'
                }
                markersMap.parameter = this.eventList[i].eventCode
                markersMap.lng = this.eventList[i].longitude
                markersMap.lat = this.eventList[i].latitude
                markersMap.bindPopupHtml = '<div class="map-tip">' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>经纬度：' + this.eventList[i].longitude + ',' + this.eventList[i].latitude + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>事件名称：' + this.eventList[i].eventName + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>' +
                  '<span>' +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  '                  <h4>事件时间：' + this.eventList[i].reportTime + '</h4>' +
                  '                </div>' +
                  '                </div>' +
                  '                </span>'
                if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '') {
                  markersMap.bindPopupHtml += '<span>' +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    '<img src="' + this.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)
              }, 2000)
            } else {
              setTimeout(() => {
                that.$refs.eventLocationSupermap.clearM(false)
                that.$refs.eventLocationSupermap.clearM(true)
              }, 2000)
            }
				})
			},
			handleClick(tab, event) {
				let that = this
				that.$refs.eventLocationSupermap.controlLevel(8)
				let marker = [{
					lng: this.longitude,
					lat: this.latitude,
					icon: 'marker',
					bindPopupHtml: '定位',
					click: '',
					parameter: '',
					keepBindPopup: false,
					isAggregation: false
				}]
				if (tab.name == 'monitor') {
					if (this.longitude == null || this.longitude == "" || this.latitude == null || this.latitude == "") {
						this.$modal.msgError('请输入经纬度！');
						return
					}
					that.cameraMarkersList = []
					that.cameraList = []
					getNearCamera(this.longitude, this.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.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.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>' +
									'</div>'
								this.cameraMarkersList.push(markersMap)
							}
							setTimeout(() => {
								that.$refs.eventLocationSupermap.clearM(true)
								that.$refs.eventLocationSupermap.clearM(false)
								that.$refs.eventLocationSupermap.setMarkers(this.cameraMarkersList)
								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)
      }
      /** ----------------------------------海康摄像头预览结束------------------------------------- */
		}
	}
</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>