1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036 |
- <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 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>
- <!--事件弹层-->
- <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'
- } 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.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',
- keepBindPopup: false,
- isAggregation: false
- }
- if (res.data[i].cameraCode != null) {
- markersMap.parameter = {
- code: res.data[i].cameraCode,
- type: res.data[i].cameraFactory
- }
- } else {
- markersMap.parameter = []
- }
- if (res.data.length > 50) {
- markersMap.isAggregation = true
- }
- 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('请重新安装客户端')
- },
- cancelEventLocationShow() {
- if (this.oWebControl != null) {
- this.oWebControl.JS_HideWnd() // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
- this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
- },
- function() { // 断开与插件服务连接失败
- })
- }
- },
- /** 预览按钮操作 */
- preview(cameraParam) {
- if (cameraParam.type == '大华') {
- getDahuaVideoServer().then(newResponse => {
- console.log(newResponse)
- this.ws.detectConnectQt().then(res => {
- if (res) { // 连接客户端成功
- this.alertLogin()
- this.ws.login({
- loginIp: newResponse.loginIp,
- loginPort: newResponse.loginPort,
- userName: newResponse.userName,
- userPwd: newResponse.userPwd,
- token: '',
- https: 0
- })
- this.ws.on('loginState', (res) => {
- this.isLogin = res
- console.log('---res-----', res)
- if (res) {
- this.alertLoginSuccess()
- this.activePanel = 'key2'
- this.realTimeVideoDialog(cameraParam.code)
- } else {
- this.alertLoginFailed()
- }
- })
- } else { // 连接客户端失败
- this.alertReinstall()
- }
- })
- })
- } else if (cameraParam.type == '海康') {
- let that = this
- that.cameraVisible = true
- getHaiKangVideoServer({ cameraCode: cameraParam.code }).then(newResponse => {
- that.cameraTitle = '摄像头-' + newResponse.data.cameraName
- that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse.data.loginPort)
- setTimeout(function() {
- that.playhk(newResponse.data.channelCode)
- }, 5000)
- })
- }
- },
- 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>
|