eventLocation.vue 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036
  1. <template>
  2. <div>
  3. <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%"
  4. @close="cancelEventLocationShow()">
  5. <div class="event-info">
  6. <div class="event-info-con">
  7. <div class="e-location-left">
  8. <el-tabs v-model="activeName" @tab-click="handleClick">
  9. <el-tab-pane label="周边点位" name="monitor">
  10. <div class="forthis">
  11. <div class="i-list-con overflow-y" style="height: 50vh;">
  12. <span v-for="(item,index) in cameraList"
  13. v-on:click="dropLocation(item.latitude,item.longitude)">
  14. <div class="d-l-con" @click="">
  15. <div class="d-l-l-text">
  16. <i class="iconfont sj-icon-jkzx icon-sxt"></i>
  17. <h4>{{ item.cameraName }}</h4>
  18. </div>
  19. </div>
  20. </span>
  21. </div>
  22. </div>
  23. </el-tab-pane>
  24. <el-tab-pane label="周边事件" name="event">
  25. <div class="forthis">
  26. <div class="i-list-con overflow-y" style="height: 50vh;">
  27. <div class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
  28. @click="dropLocation(item.latitude,item.longitude)">
  29. <div class="bgt-img">
  30. <img v-if="item.picturePath!=null&&item.picturePath!=''" :src="item.picturePath"
  31. style="width: 93px;height: 64px"/>
  32. <img v-else src="../assets/images/integrated/event-img-sub.png"
  33. style="width: 93px;height: 64px"/>
  34. </div>
  35. <div class="bgt-info">
  36. <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount==0"
  37. class="event-state-sb">
  38. <i class="el-icon-caret-left"></i>
  39. <div class="event-list-state-sb">
  40. 新上报
  41. </div>
  42. </div>
  43. <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount>0"
  44. class="event-state-cb">
  45. <i class="el-icon-caret-left"></i>
  46. <div class="event-list-state-cb">
  47. 催办
  48. </div>
  49. </div>
  50. <div v-if="item.eventStatusValue=='forest_event_status_2'" class="event-state-qs">
  51. <i class="el-icon-caret-left"></i>
  52. <div class="event-list-state-qs">
  53. 签收
  54. </div>
  55. </div>
  56. <div v-if="item.eventStatusValue=='forest_event_status_3'" class="event-state-wb">
  57. <i class="el-icon-caret-left"></i>
  58. <div class="event-list-state-wb">
  59. 误报
  60. </div>
  61. </div>
  62. <div v-if="item.eventStatusValue=='forest_event_status_4'" class="event-state-cf">
  63. <i class="el-icon-caret-left"></i>
  64. <div class="event-list-state-cf">
  65. 重复
  66. </div>
  67. </div>
  68. <div v-if="item.eventStatusValue=='forest_event_status_5'" class="event-state-bj">
  69. <i class="el-icon-caret-left"></i>
  70. <div class="event-list-state-bj">
  71. 办结
  72. </div>
  73. </div>
  74. <div v-if="item.eventStatusValue=='forest_event_status_6'" class="event-state-gd">
  75. <i class="el-icon-caret-left"></i>
  76. <div class="event-list-state-gd">
  77. 归档
  78. </div>
  79. </div>
  80. <div v-if="item.eventStatusValue=='forest_event_status_7'" class="event-state-qr">
  81. <i class="el-icon-caret-left"></i>
  82. <div class="event-list-state-qr">
  83. 确认
  84. </div>
  85. </div>
  86. <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
  87. <div class="bgt-info-place">
  88. <ul>
  89. <li>{{ item.createTime }}</li>
  90. </ul>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </el-tab-pane>
  97. </el-tabs>
  98. </div>
  99. <div class="e-location-right" style="height: 57.8vh;">
  100. <div class="event-info-top">
  101. <el-form>
  102. <div class="event-info-top-grp">
  103. <el-input placeholder="输入经度" type="number" v-model="longitude" class="m-l-none">
  104. </el-input>
  105. <el-input placeholder="输入纬度" type="number" v-model="latitude">
  106. </el-input>
  107. <el-button type="success" size="mini" @click="getNearEvent()">定位</el-button>
  108. </div>
  109. </el-form>
  110. </div>
  111. <!-- 地图 -->
  112. <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 51vh;"
  113. :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}"
  114. :codes="['9fa5']"
  115. :isSideBySide="false" @preview="preview"
  116. @showEventDialog="showEventDialog"></eventLocationSupermap>
  117. </div>
  118. </div>
  119. </div>
  120. </el-dialog>
  121. <!--事件弹层-->
  122. <div class="event-info">
  123. <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="this.getCurrentDataStr"></eventdetailsdialog>
  124. </div>
  125. <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
  126. @close="cancelEventLocationShow()">
  127. <div style="width:1020px;height:625px;position:relative;">
  128. <!--视频窗口展示---海康-->
  129. <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
  130. </div>
  131. </el-dialog>
  132. </div>
  133. </template>
  134. <script>
  135. import {
  136. getNearEvent,
  137. getNearCamera
  138. } from '@/api/event'
  139. import {
  140. getHaiKangVideoServer
  141. } from '@/api/haikang/haikang'
  142. import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  143. import eventLocationSupermap from '@/components/supermap' //超图
  144. import eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
  145. /** ----------------------------------摄像头预览开始------------------------------------- */
  146. import {
  147. getDahuaVideoServer
  148. } from '@/api/dahua/dahua'
  149. import DHWs from '@/dahua/lib/DHWs'
  150. /** ----------------------------------摄像头预览结束------------------------------------- */
  151. export default {
  152. dicts: ['event_source'],
  153. components: {
  154. eventLocationSupermap,
  155. eventdetailsdialog,
  156. vBottomMenu
  157. },
  158. data() {
  159. return {
  160. /** ----------------------------------摄像头预览开始------------------------------------- */
  161. activePanel: 'key1',
  162. isLogin: false,
  163. cameraParams: [],
  164. ws: null,
  165. /** ----------------------------------摄像头预览结束------------------------------------- */
  166. //海康
  167. cameraTitle: '',
  168. cameraVisible: false,
  169. initCount: 0,
  170. pubKey: '',
  171. oWebControl: null,
  172. /** ----------------------------------事件弹窗开始------------------------------------- */
  173. eventInfoVisibleActiveName: 'info',
  174. eventInfoVisible_notProcessed: false,
  175. eventInfoVisible_Processed: false,
  176. listEventPic: [], //事件图片
  177. url: '',
  178. id: '',
  179. eventType: '',
  180. deptName: '',
  181. eventStatus: '',
  182. cameraId: '',
  183. createTime: '',
  184. reportAddress: '',
  185. eventCode: null,
  186. eventSource: '',
  187. //事件详情弹出显隐
  188. eventTypeShow: false,
  189. listEventDept: [], //涉事单位List,
  190. listLog: [], //处理过程List,
  191. listoperateDept: [],
  192. optionsNotProcessed: [{
  193. value: 'wyc',
  194. label: '无异常'
  195. }, {
  196. value: 'qr',
  197. label: '确认'
  198. }],
  199. listeventType: [],
  200. updateEventStatusForm: {
  201. id: '',
  202. eventStatus: '',
  203. eventCode: '',
  204. deptId: '',
  205. deptName: '',
  206. eventType: '',
  207. zt: ''
  208. },
  209. /** ----------------------------------事件弹窗结束-未处理------------------------------------- */
  210. aniu: true,
  211. showZt: true,
  212. zt: null,
  213. fireReport: false,
  214. optionsProcessed: [{
  215. value: 'bj',
  216. label: '办结'
  217. }, {
  218. value: 'zy',
  219. label: '支援'
  220. },
  221. {
  222. value: 'gd',
  223. label: '归档'
  224. }
  225. ],
  226. // 弹出层 基本信息
  227. information: [{
  228. name: '标题',
  229. id: '',
  230. content: '前段发现警情信息'
  231. },
  232. {
  233. name: '时间',
  234. id: '',
  235. content: '2022-02-14 14:30'
  236. },
  237. {
  238. name: '来源',
  239. id: '',
  240. content: '摄像头'
  241. },
  242. {
  243. name: '坐标',
  244. id: '',
  245. content: '125.78945646'
  246. },
  247. {
  248. name: '纬度',
  249. id: '',
  250. content: '43.987424'
  251. },
  252. {
  253. name: '上报人',
  254. id: '',
  255. content: '党校监控点位'
  256. },
  257. {
  258. name: '详细信息',
  259. id: '',
  260. content: '这里发现病虫害,需要立刻支援'
  261. }
  262. ],
  263. eventLocationVisible: false,
  264. longitude: '',
  265. latitude: '',
  266. activeName: 'event',
  267. eventList: [],
  268. markersList: [],
  269. cameraList: [],
  270. cameraMarkersList: []
  271. }
  272. },
  273. created() {
  274. /** ----------------------------------摄像头预览开始------------------------------------- */
  275. const DHWsInstance = DHWs.getInstance()
  276. this.ws = DHWsInstance
  277. /** ----------------------------------摄像头预览结束------------------------------------- */
  278. },
  279. methods: {
  280. getCurrentDataStr() {
  281. let date = new Date()
  282. let y = date.getFullYear()
  283. let m = date.getMonth() + 1
  284. m = m < 10 ? '0' + m : m
  285. let d = date.getDate()
  286. d = d < 10 ? '0' + d : d
  287. return y + '-' + m + '-' + d
  288. },
  289. cancelEventLocationShow() {
  290. if (this.oWebControl != null) {
  291. this.oWebControl.JS_HideWnd() // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
  292. this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
  293. },
  294. function() { // 断开与插件服务连接失败
  295. })
  296. }
  297. },
  298. showEventDialog(eventCode) {
  299. //事件信息弹出
  300. this.$refs.eventdetailsdialog.showEventDialog(eventCode)
  301. },
  302. getNearEvent() {
  303. if (this.longitude == null || this.longitude == '' || this.latitude == null || this.latitude == '') {
  304. this.$modal.msgError('请输入经纬度!')
  305. return
  306. }
  307. this.activeName = 'event'
  308. let marker = [{
  309. lng: this.longitude,
  310. lat: this.latitude,
  311. icon: 'marker',
  312. bindPopupHtml: '搜索点位',
  313. click: '',
  314. parameter: '',
  315. keepBindPopup: false,
  316. isAggregation: false
  317. }]
  318. let that = this
  319. getNearEvent(that.longitude, that.latitude,'').then(res => {
  320. that.markersList = []
  321. that.eventList = res.data
  322. if (that.eventList != null && that.eventList.length > 0) {
  323. for (let i = 0; i < that.eventList.length; i++) {
  324. let markersMap = {
  325. lng: 124.59,
  326. lat: 43.02,
  327. icon: 'marker',
  328. bindPopupHtml: '',
  329. click: '',
  330. parameter: '',
  331. keepBindPopup: false,
  332. isAggregation: false
  333. }
  334. if (that.eventList.length > 200) {
  335. markersMap.isAggregation = true
  336. }
  337. if (that.eventList[i].eventStatusValue == 'forest_event_status_1') {
  338. markersMap.click = 'showEventDialog'
  339. markersMap.icon = 'sj-icon-map-xinshangbao'
  340. }
  341. if (that.eventList[i].eventStatusValue == 'forest_event_status_1' && that.eventList[i].urgeCount > 0) {
  342. markersMap.click = 'showEventDialog'
  343. markersMap.icon = 'sj-icon-map-cuiban'
  344. } else if (that.eventList[i].eventStatusValue == 'forest_event_status_2') {
  345. markersMap.click = 'showEventDialog'
  346. markersMap.icon = 'sj-icon-map-qianshou'
  347. markersMap.isAggregation = false
  348. } else if (that.eventList[i].eventStatusValue == 'forest_event_status_5') {
  349. markersMap.click = 'showEventDialog'
  350. markersMap.icon = 'sj-icon-map-banjie'
  351. markersMap.isAggregation = false
  352. } else if (that.eventList[i].eventStatusValue == 'forest_event_status_6') {
  353. markersMap.click = 'showEventDialog'
  354. markersMap.icon = 'sj-icon-map-guidang'
  355. } else if (that.eventList[i].eventStatusValue == 'forest_event_status_7') {
  356. markersMap.click = 'showEventDialog'
  357. markersMap.icon = 'sj-icon-map-queren'
  358. }
  359. markersMap.parameter = that.eventList[i].eventCode
  360. markersMap.lng = that.eventList[i].longitude
  361. markersMap.lat = that.eventList[i].latitude
  362. markersMap.bindPopupHtml = '<div class="map-tip">' +
  363. '<span>' +
  364. ' <div class="d-l-con">' +
  365. ' <div class="d-l-l-text">' +
  366. ' <h4>经纬度:' + that.eventList[i].longitude + ',' + that.eventList[i].latitude + '</h4>' +
  367. ' </div>' +
  368. ' </div>' +
  369. ' </span>' +
  370. '<span>' +
  371. ' <div class="d-l-con">' +
  372. ' <div class="d-l-l-text">' +
  373. ' <h4>事件名称:' + that.eventList[i].eventName + '</h4>' +
  374. ' </div>' +
  375. ' </div>' +
  376. ' </span>' +
  377. '<span>' +
  378. ' <div class="d-l-con">' +
  379. ' <div class="d-l-l-text">' +
  380. ' <h4>事件时间:' + that.eventList[i].createTime + '</h4>' +
  381. ' </div>' +
  382. ' </div>' +
  383. ' </span>'
  384. if(that.eventList[i].pictureType=='image'&&that.eventList[i].picturePath != null && that.eventList[i].picturePath != ''){
  385. markersMap.bindPopupHtml += '<span>' +
  386. ' <div class="d-l-con">' +
  387. ' <div class="d-l-l-text">' +
  388. '<img src="' + that.eventList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
  389. ' </div>' +
  390. ' </div>' +
  391. ' </span>'
  392. }
  393. markersMap.bindPopupHtml += '</div>'
  394. that.markersList.push(markersMap)
  395. }
  396. setTimeout(() => {
  397. that.$refs.eventLocationSupermap.clearM(false)
  398. that.$refs.eventLocationSupermap.clearM(true)
  399. that.$refs.eventLocationSupermap.setMarkers(that.markersList)
  400. that.$refs.eventLocationSupermap.setMarkers(marker)
  401. }, 1000)
  402. } else {
  403. setTimeout(() => {
  404. that.$refs.eventLocationSupermap.clearM(false)
  405. that.$refs.eventLocationSupermap.clearM(true)
  406. that.$refs.eventLocationSupermap.setMarkers(marker)
  407. }, 1000)
  408. }
  409. })
  410. },
  411. handleClick(tab, event) {
  412. let that = this
  413. that.$refs.eventLocationSupermap.controlLevel(8)
  414. let marker = [{
  415. lng: that.longitude,
  416. lat: that.latitude,
  417. icon: 'marker',
  418. bindPopupHtml: '定位',
  419. click: '',
  420. parameter: '',
  421. keepBindPopup: false,
  422. isAggregation: false
  423. }]
  424. if (tab.name == 'monitor') {
  425. if (that.longitude == null || that.longitude == '' || that.latitude == null || that.latitude == '') {
  426. that.$modal.msgError('请输入经纬度!')
  427. return
  428. }
  429. that.cameraMarkersList = []
  430. that.cameraList = []
  431. getNearCamera(that.longitude, that.latitude).then(res => {
  432. //根据设备类型查看列表
  433. that.cameraList = res.data
  434. if (res.data != null && res.data.length > 0) {
  435. for (let i = 0; i < res.data.length; i++) {
  436. let markersMap = {
  437. lng: 124.59,
  438. lat: 43.02,
  439. icon: 'camera',
  440. bindPopupHtml: '',
  441. click: 'preview',
  442. keepBindPopup: false,
  443. isAggregation: false
  444. }
  445. if (res.data[i].cameraCode != null) {
  446. markersMap.parameter = {
  447. code: res.data[i].cameraCode,
  448. type: res.data[i].cameraFactory
  449. }
  450. } else {
  451. markersMap.parameter = []
  452. }
  453. if (res.data.length > 50) {
  454. markersMap.isAggregation = true
  455. }
  456. markersMap.lng = res.data[i].longitude
  457. markersMap.lat = res.data[i].latitude
  458. markersMap.radius = res.data[i].cameraRadius
  459. markersMap.bindPopupHtml = '<div class="map-tip">' +
  460. '<span>' +
  461. ' <div class="d-l-con">' +
  462. ' <div class="d-l-l-text">' +
  463. ' <h4>经纬度:' + res.data[i].longitude +
  464. ',' + res.data[i].latitude + '</h4>' +
  465. ' </div>' +
  466. ' </div>' +
  467. ' </span>' +
  468. '<span>' +
  469. ' <div class="d-l-con">' +
  470. ' <div class="d-l-l-text">' +
  471. ' <h4>摄像头名称:' + res.data[i]
  472. .cameraName + '</h4>' +
  473. ' </div>' +
  474. ' </div>' +
  475. ' </span>' +
  476. '<span>' +
  477. ' <div class="d-l-con">' +
  478. ' <div class="d-l-l-text">' +
  479. ' <h4>摄像头类型:' + res.data[i]
  480. .cameraFactory + '</h4>' +
  481. ' </div>' +
  482. ' </div>' +
  483. ' </span>' +
  484. '<span>' +
  485. ' <div class="d-l-con">' +
  486. ' <div class="d-l-l-text">' +
  487. ' <h4>摄像头半径:' + res.data[i]
  488. .cameraRadius + '米</h4>' +
  489. ' </div>' +
  490. ' </div>' +
  491. ' </span>' +
  492. '</div>'
  493. that.cameraMarkersList.push(markersMap)
  494. }
  495. setTimeout(() => {
  496. that.$refs.eventLocationSupermap.clearM(true)
  497. that.$refs.eventLocationSupermap.clearM(false)
  498. that.$refs.eventLocationSupermap.setMarkersRadius(that.cameraMarkersList)
  499. that.$refs.eventLocationSupermap.setMarkers(marker)
  500. }, 1000)
  501. } else {
  502. setTimeout(() => {
  503. that.$refs.eventLocationSupermap.clearM(true)
  504. that.$refs.eventLocationSupermap.clearM(false)
  505. that.$refs.eventLocationSupermap.setMarkers(marker)
  506. }, 1000)
  507. }
  508. })
  509. } else {
  510. that.getNearEvent()
  511. }
  512. },
  513. dropLocation(lat, lng) {
  514. this.$refs.eventLocationSupermap.dropLocation(lat, lng)
  515. },
  516. showEventLocation() {
  517. this.eventLocationVisible = true
  518. },
  519. /** ----------------------------------摄像头预览开始------------------------------------- */
  520. alertLogin: function() {
  521. this.$modal.msg('登录中....')
  522. },
  523. alertLoginSuccess: function() {
  524. this.$modal.msgSuccess('登录成功!')
  525. },
  526. alertLoginFailed: function() {
  527. this.$modal.msgError('登陆失败!')
  528. },
  529. alertReinstall: function() {
  530. this.$modal.msgWarning('请重新安装客户端')
  531. },
  532. cancelEventLocationShow() {
  533. if (this.oWebControl != null) {
  534. this.oWebControl.JS_HideWnd() // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
  535. this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
  536. },
  537. function() { // 断开与插件服务连接失败
  538. })
  539. }
  540. },
  541. /** 预览按钮操作 */
  542. preview(cameraParam) {
  543. if (cameraParam.type == '大华') {
  544. getDahuaVideoServer().then(newResponse => {
  545. console.log(newResponse)
  546. this.ws.detectConnectQt().then(res => {
  547. if (res) { // 连接客户端成功
  548. this.alertLogin()
  549. this.ws.login({
  550. loginIp: newResponse.loginIp,
  551. loginPort: newResponse.loginPort,
  552. userName: newResponse.userName,
  553. userPwd: newResponse.userPwd,
  554. token: '',
  555. https: 0
  556. })
  557. this.ws.on('loginState', (res) => {
  558. this.isLogin = res
  559. console.log('---res-----', res)
  560. if (res) {
  561. this.alertLoginSuccess()
  562. this.activePanel = 'key2'
  563. this.realTimeVideoDialog(cameraParam.code)
  564. } else {
  565. this.alertLoginFailed()
  566. }
  567. })
  568. } else { // 连接客户端失败
  569. this.alertReinstall()
  570. }
  571. })
  572. })
  573. } else if (cameraParam.type == '海康') {
  574. let that = this
  575. that.cameraVisible = true
  576. getHaiKangVideoServer({ cameraCode: cameraParam.code }).then(newResponse => {
  577. that.cameraTitle = '摄像头-' + newResponse.data.cameraName
  578. that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse.data.loginPort)
  579. setTimeout(function() {
  580. that.playhk(newResponse.data.channelCode)
  581. }, 5000)
  582. })
  583. }
  584. },
  585. realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
  586. if (!this.isLogin) {
  587. this.$Message.info('正在登陆客户端,请稍等......')
  588. return false
  589. }
  590. const params = [cameraParams]
  591. this.ws.openVideo(params)
  592. },
  593. /** ----------------------------------摄像头预览结束------------------------------------- */
  594. /** ----------------------------------海康摄像头预览开始------------------------------------- */
  595. // 创建播放实例
  596. initPlugin(newappkey, newloginIp, newsecret, newloginPort) {
  597. let that = this
  598. that.oWebControl = new WebControl({
  599. szPluginContainer: 'playWnd', // 指定容器id
  600. iServicePortStart: 15900, // 指定起止端口号,建议使用该值
  601. iServicePortEnd: 15909,
  602. szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
  603. cbConnectSuccess: function() { // 创建WebControl实例成功
  604. that.oWebControl.JS_StartService('window', { // WebControl实例创建成功后需要启动服务
  605. dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
  606. }).then(function() { // 启动插件服务成功
  607. that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
  608. cbIntegrationCallBack: cbIntegrationCallBack
  609. })
  610. that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口,宽高可设定
  611. that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
  612. })
  613. }, function() { // 启动插件服务失败
  614. })
  615. },
  616. cbConnectError: function() { // 创建WebControl实例失败
  617. that.oWebControl = null
  618. $('#playWnd').html('插件未启动,正在尝试启动,请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
  619. WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数,采用wakeup来启动程序
  620. initCount++
  621. if (initCount < 3) {
  622. setTimeout(function() {
  623. that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
  624. }, 3000)
  625. } else {
  626. $('#playWnd').html('插件启动失败,请检查插件是否安装!<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
  627. }
  628. },
  629. cbConnectClose: function(bNormalClose) {
  630. // 异常断开:bNormalClose = false
  631. // JS_Disconnect正常断开:bNormalClose = true
  632. console.log('cbConnectClose')
  633. that.oWebControl = null
  634. }
  635. })
  636. },
  637. //播放海康摄像头
  638. playhk(channelCode) {
  639. var cameraIndexCode = channelCode //获取输入的监控点编号值,必填
  640. var streamMode = 0 //主子码流标识:0-主码流,1-子码流
  641. var transMode = 1 //传输协议:0-UDP,1-TCP
  642. var gpuMode = 0 //是否启用GPU硬解,0-不启用,1-启用
  643. var wndId = -1 //播放窗口序号(在2x2以上布局下可指定播放窗口)
  644. cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
  645. cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
  646. this.oWebControl.JS_RequestInterface({
  647. funcName: 'startPreview',
  648. argument: JSON.stringify({
  649. cameraIndexCode: cameraIndexCode, //监控点编号
  650. streamMode: streamMode, //主子码流标识
  651. transMode: transMode, //传输协议
  652. gpuMode: gpuMode, //是否开启GPU硬解
  653. wndId: wndId //可指定播放窗口
  654. })
  655. })
  656. },
  657. //初始化
  658. init(newappkey, newloginIp, newsecret, newloginPort) {
  659. let that = this
  660. that.getPubKey(function() {
  661. ////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
  662. var appkey = newappkey //综合安防管理平台提供的appkey,必填
  663. var secret = that.setEncrypt(newsecret) //综合安防管理平台提供的secret,必填
  664. var ip = newloginIp //综合安防管理平台IP地址,必填
  665. var playMode = 0 //初始播放模式:0-预览,1-回放
  666. var port = Number(newloginPort) //综合安防管理平台端口,若启用HTTPS协议,默认443
  667. var snapDir = 'D:\\SnapDir' //抓图存储路径
  668. var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
  669. var layout = '1x1' //playMode指定模式的布局
  670. var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
  671. var encryptedFields = 'secret' //加密字段,默认加密领域为secret
  672. var showToolbar = 1 //是否显示工具栏,0-不显示,非0-显示
  673. var showSmart = 1 //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
  674. var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
  675. ////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
  676. that.oWebControl.JS_RequestInterface({
  677. funcName: 'init',
  678. argument: JSON.stringify({
  679. appkey: appkey, //API网关提供的appkey
  680. secret: secret, //API网关提供的secret
  681. ip: ip, //API网关IP地址
  682. playMode: playMode, //播放模式(决定显示预览还是回放界面)
  683. port: port, //端口
  684. snapDir: snapDir, //抓图存储路径
  685. videoDir: videoDir, //紧急录像或录像剪辑存储路径
  686. layout: layout, //布局
  687. enableHTTPS: enableHTTPS, //是否启用HTTPS协议
  688. encryptedFields: encryptedFields, //加密字段
  689. showToolbar: showToolbar, //是否显示工具栏
  690. showSmart: showSmart, //是否显示智能信息
  691. buttonIDs: buttonIDs //自定义工具条按钮
  692. })
  693. }).then(function(oData) {
  694. that.oWebControl.JS_Resize(1020, 600) // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
  695. })
  696. })
  697. },
  698. //获取公钥
  699. getPubKey(callback) {
  700. let that = this
  701. that.oWebControl.JS_RequestInterface({
  702. funcName: 'getRSAPubKey',
  703. argument: JSON.stringify({
  704. keyLength: 1024
  705. })
  706. }).then(function(oData) {
  707. console.log(oData)
  708. if (oData.responseMsg.data) {
  709. that.pubKey = oData.responseMsg.data
  710. callback()
  711. }
  712. })
  713. },
  714. //RSA加密
  715. setEncrypt(value) {
  716. var encrypt = new JSEncrypt()
  717. encrypt.setPublicKey(this.pubKey)
  718. return encrypt.encrypt(value)
  719. },
  720. /** ----------------------------------海康摄像头预览结束------------------------------------- */
  721. /** ----------------------------------事件弹窗开始------------------------------------- */
  722. editableLayers(processedState) {
  723. if (processedState == 'notProcessedSupermap') {
  724. let aa = this.$refs.notProcessedSupermap.isEditableLayers
  725. if (!this.$refs.notProcessedSupermap.isEditableLayers) {
  726. this.$refs.notProcessedSupermap.isEditableLayers = true
  727. } else {
  728. this.$refs.notProcessedSupermap.isEditableLayers = false
  729. }
  730. } else {
  731. let bb = this.$refs.processedSupermap.isEditableLayers
  732. if (!this.$refs.processedSupermap.isEditableLayers) {
  733. this.$refs.processedSupermap.isEditableLayers = true
  734. } else {
  735. this.$refs.processedSupermap.isEditableLayers = false
  736. }
  737. }
  738. },
  739. switchImage(url) {
  740. this.url = url
  741. },
  742. formLeaveTable() {
  743. let p = new Promise((resolve, reject) =>
  744. reject()
  745. )
  746. return p
  747. },
  748. async beforeLeave(newactiveName, oldActiveName) {
  749. let that = this
  750. if (newactiveName == 'frame') {
  751. return await that.formLeaveTable()
  752. }
  753. },
  754. setXsYc() {
  755. let that = this
  756. if (this.eventStatus == 'qr') {
  757. this.eventTypeShow = true
  758. } else {
  759. this.eventTypeShow = false
  760. }
  761. },
  762. setValue(event) {
  763. this.deptId = event.value
  764. this.deptName = event.label
  765. },
  766. cancelEventShow() {
  767. this.eventInfoVisibleActiveName = 'info'
  768. this.listEventPic = [] //事件图片
  769. this.listEventDept = [] //涉事单位List,
  770. this.listLog = [] //处理过程List,
  771. this.listoperateDept = []
  772. },
  773. /** 重置按钮操作 */
  774. resetQuery() {
  775. this.eventTypeShow = false
  776. this.eventType = ''
  777. this.deptName = ''
  778. this.eventStatus = ''
  779. },
  780. /** ----------------------------------事件弹窗结束------------------------------------- */
  781. /** ----------------------------------海康摄像头预览开始------------------------------------- */
  782. // 创建播放实例
  783. initPlugin(newappkey, newloginIp, newsecret, newloginPort) {
  784. let that = this
  785. that.oWebControl = new WebControl({
  786. szPluginContainer: 'playWnd', // 指定容器id
  787. iServicePortStart: 15900, // 指定起止端口号,建议使用该值
  788. iServicePortEnd: 15909,
  789. szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
  790. cbConnectSuccess: function() { // 创建WebControl实例成功
  791. that.oWebControl.JS_StartService('window', { // WebControl实例创建成功后需要启动服务
  792. dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
  793. }).then(function() { // 启动插件服务成功
  794. that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
  795. cbIntegrationCallBack: cbIntegrationCallBack
  796. })
  797. that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口,宽高可设定
  798. that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
  799. })
  800. }, function() { // 启动插件服务失败
  801. })
  802. },
  803. cbConnectError: function() { // 创建WebControl实例失败
  804. that.oWebControl = null
  805. $('#playWnd').html('插件未启动,正在尝试启动,请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
  806. WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数,采用wakeup来启动程序
  807. that.initCount++
  808. if (that.initCount < 3) {
  809. setTimeout(function() {
  810. that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
  811. }, 3000)
  812. } else {
  813. $('#playWnd').html('插件启动失败,请检查插件是否安装!<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
  814. }
  815. },
  816. cbConnectClose: function(bNormalClose) {
  817. // 异常断开:bNormalClose = false
  818. // JS_Disconnect正常断开:bNormalClose = true
  819. that.oWebControl = null
  820. }
  821. })
  822. },
  823. //播放海康摄像头
  824. playhk(channelCode) {
  825. var cameraIndexCode = channelCode //获取输入的监控点编号值,必填
  826. var streamMode = 0 //主子码流标识:0-主码流,1-子码流
  827. var transMode = 1 //传输协议:0-UDP,1-TCP
  828. var gpuMode = 0 //是否启用GPU硬解,0-不启用,1-启用
  829. var wndId = -1 //播放窗口序号(在2x2以上布局下可指定播放窗口)
  830. cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
  831. cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
  832. this.oWebControl.JS_RequestInterface({
  833. funcName: 'startPreview',
  834. argument: JSON.stringify({
  835. cameraIndexCode: cameraIndexCode, //监控点编号
  836. streamMode: streamMode, //主子码流标识
  837. transMode: transMode, //传输协议
  838. gpuMode: gpuMode, //是否开启GPU硬解
  839. wndId: wndId //可指定播放窗口
  840. })
  841. })
  842. },
  843. //初始化
  844. init(newappkey, newloginIp, newsecret, newloginPort) {
  845. let that = this
  846. that.getPubKey(function() {
  847. ////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
  848. var appkey = newappkey //综合安防管理平台提供的appkey,必填
  849. var secret = that.setEncrypt(newsecret) //综合安防管理平台提供的secret,必填
  850. var ip = newloginIp //综合安防管理平台IP地址,必填
  851. var playMode = 0 //初始播放模式:0-预览,1-回放
  852. var port = Number(newloginPort) //综合安防管理平台端口,若启用HTTPS协议,默认443
  853. var snapDir = 'D:\\SnapDir' //抓图存储路径
  854. var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
  855. var layout = '1x1' //playMode指定模式的布局
  856. var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
  857. var encryptedFields = 'secret' //加密字段,默认加密领域为secret
  858. var showToolbar = 1 //是否显示工具栏,0-不显示,非0-显示
  859. var showSmart = 1 //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
  860. var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
  861. ////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
  862. that.oWebControl.JS_RequestInterface({
  863. funcName: 'init',
  864. argument: JSON.stringify({
  865. appkey: appkey, //API网关提供的appkey
  866. secret: secret, //API网关提供的secret
  867. ip: ip, //API网关IP地址
  868. playMode: playMode, //播放模式(决定显示预览还是回放界面)
  869. port: port, //端口
  870. snapDir: snapDir, //抓图存储路径
  871. videoDir: videoDir, //紧急录像或录像剪辑存储路径
  872. layout: layout, //布局
  873. enableHTTPS: enableHTTPS, //是否启用HTTPS协议
  874. encryptedFields: encryptedFields, //加密字段
  875. showToolbar: showToolbar, //是否显示工具栏
  876. showSmart: showSmart, //是否显示智能信息
  877. buttonIDs: buttonIDs //自定义工具条按钮
  878. })
  879. }).then(function(oData) {
  880. that.oWebControl.JS_Resize(1020, 600) // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
  881. })
  882. })
  883. },
  884. //获取公钥
  885. getPubKey(callback) {
  886. let that = this
  887. that.oWebControl.JS_RequestInterface({
  888. funcName: 'getRSAPubKey',
  889. argument: JSON.stringify({
  890. keyLength: 1024
  891. })
  892. }).then(function(oData) {
  893. console.log(oData)
  894. if (oData.responseMsg.data) {
  895. that.pubKey = oData.responseMsg.data
  896. callback()
  897. }
  898. })
  899. },
  900. //RSA加密
  901. setEncrypt(value) {
  902. var encrypt = new JSEncrypt()
  903. encrypt.setPublicKey(this.pubKey)
  904. return encrypt.encrypt(value)
  905. }
  906. /** ----------------------------------海康摄像头预览结束------------------------------------- */
  907. }
  908. }
  909. // 推送消息
  910. function cbIntegrationCallBack(oData) {
  911. console.log(JSON.stringify(oData.responseMsg))
  912. }
  913. </script>
  914. <style rel="stylesheet/scss" lang="scss" scoped>
  915. @import '@/assets/styles/base.scss';
  916. .event-info-con {
  917. width: 100%;
  918. display: flex;
  919. .e-left {
  920. width: 32%;
  921. }
  922. .e-center {
  923. width: 30%;
  924. margin-left: 1%;
  925. .img-company {
  926. width: 100%;
  927. height: 18.3vh;
  928. img {
  929. }
  930. }
  931. }
  932. .e-right {
  933. margin-left: 1%;
  934. width: 45%;
  935. }
  936. .e-location-left {
  937. width: 28%;
  938. }
  939. .e-location-right {
  940. width: 71%;
  941. margin-left: 1rem;
  942. }
  943. }
  944. .el-dialog:not(.is-fullscreen) {
  945. margin-top: 5.5vh !important;
  946. }
  947. .bottom-menu-normal {
  948. max-width: 90%;
  949. padding: 0 3rem;
  950. position: absolute;
  951. left: 50%;
  952. transform: translateX(-50%);
  953. bottom: 0;
  954. z-index: 100000;
  955. border-radius: 5px;
  956. display: flex;
  957. justify-content: center;
  958. align-items: center;
  959. background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
  960. background-size: cover;
  961. overflow: hidden;
  962. .btm-m-con {
  963. position: relative;
  964. color: $inBlue;
  965. font-size: .5rem;
  966. padding: 1rem 1.5rem;
  967. display: flex;
  968. align-items: center;
  969. justify-content: center;
  970. -webkit-transform: translateY(0);
  971. transform: translateY(0);
  972. transition: all 0.2s ease-in-out;
  973. cursor: pointer;
  974. white-space: nowrap;
  975. i {
  976. font-size: 1rem;
  977. color: $inBlue;
  978. text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
  979. margin-right: 0.2rem;
  980. }
  981. }
  982. .btm-m-con:hover {
  983. text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
  984. filter: brightness(2.3);
  985. -webkit-transform: translateX(0.2rem);
  986. transform: translateX(0.2rem);
  987. transition: all 0.2s ease-in-out;
  988. i {
  989. color: $inBlueHover;
  990. text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
  991. }
  992. }
  993. .m-l-none {
  994. .el-input__inner {
  995. margin-left: 0 !important;
  996. }
  997. }
  998. }
  999. </style>