monitor.vue 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864
  1. <!--监控中心-->
  2. <template>
  3. <div class="visual-con">
  4. <!--头部-->
  5. <vheader></vheader>
  6. <!--主体-->
  7. <div class="visual-body">
  8. <!-- 左侧 -->
  9. <div class="leftbar" :class="indentleft" ref="left">
  10. <div class="forthis">
  11. <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
  12. <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
  13. <div class="this-title">
  14. <span>事态感知</span>
  15. <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
  16. </div>
  17. <div class="i-list-con h-73">
  18. <div class="d-l-con-icon">
  19. <div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
  20. v-for="(item,index) in visuForestCloudMapDeviceBOList"
  21. v-on:click="selectDeviceType(index)">
  22. <!-- -->
  23. <div class="icon icon-dot"></div>
  24. <div class="icon-text">
  25. <h6>{{ item.deviceCount }}</h6>
  26. <h5>{{ item.deviceName }}</h5>
  27. </div>
  28. </div>
  29. <div class="icon-con w-33 m-btm-no">
  30. <div class="icon icon-dot"></div>
  31. <div class="icon-text">
  32. <h6>0</h6>
  33. <h5>传感器</h5>
  34. </div>
  35. </div>
  36. <div class="icon-con w-33 m-btm-no">
  37. <div class="icon icon-dot"></div>
  38. <div class="icon-text">
  39. <h6>0</h6>
  40. <h5>大喇叭</h5>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="overflow-y" style="height: 33vh;">
  45. <el-collapse accordion>
  46. <el-collapse-item v-for="(item,index) in region" :key="index">
  47. <!-- deptId -->
  48. <template slot="title">
  49. <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
  50. v-on:click="selectCameraByDeptId(item.deptId)">
  51. <div class="d-l-l-text">
  52. <h4 class="collapse-title">{{ item.deptName }}</h4>
  53. </div>
  54. <div class="d-l-l-count">{{ item.deptCount }}</div>
  55. </div>
  56. </template>
  57. </el-collapse-item>
  58. </el-collapse>
  59. </div>
  60. <!-- 横向柱状 echart -->
  61. <div class="overflow-y" style="height: 33vh;">
  62. <div id="camera-chart" style="width: 100%;height:33vh;"></div>
  63. </div>
  64. </div>
  65. </dv-border-box-13>
  66. </div>
  67. </div>
  68. <!-- 地图 -->
  69. <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
  70. :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
  71. </supermap>
  72. <!-- 右侧 -->
  73. <div class="rightbar" :class="indentright" ref="right">
  74. <div class="forthis">
  75. <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
  76. <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
  77. <div class="this-title">
  78. <span>列表</span>
  79. <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
  80. </div>
  81. <div class="i-list-con h-43">
  82. <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
  83. :class="{on:listCurrentIndex2 == index}"
  84. v-on:click="dropLocation(item.latitude,item.longitude,index)">
  85. <div class="d-l-l-text">
  86. <i class="iconfont sj-icon-jkzx icon-sxt"></i>
  87. <h4>{{ item.cameraName }}</h4>
  88. </div>
  89. </div>
  90. </div>
  91. </dv-border-box-13>
  92. </div>
  93. <div class="forthis">
  94. <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
  95. <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
  96. <div class="this-title">
  97. <span>重点区域</span>
  98. <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
  99. </div>
  100. <div class="i-list-con h-25">
  101. <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}" @click="getRegionalFlag(item.id)">
  102. <div class="d-l-l-text">
  103. <i class="i-small"></i>
  104. <h4>{{ item.areaName }}</h4>
  105. </div>
  106. </div>
  107. </div>
  108. </dv-border-box-13>
  109. </div>
  110. </div>
  111. <vBottomMenu ref="bottomMenu"></vBottomMenu>
  112. <!-- <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
  113. <!-- <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
  114. <!-- src="@/assets/images/mascot.png"/></div>-->
  115. <!-- </el-tooltip>-->
  116. </div>
  117. <eventLocation ref="eventLocation"></eventLocation>
  118. <TVWall ref="TVWall"></TVWall>
  119. <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
  120. @close="cancelEventLocationShow()">
  121. <div style="width:1020px;height:625px;position:relative;">
  122. <!--视频窗口展示---海康-->
  123. <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
  124. </div>
  125. </el-dialog>
  126. </div>
  127. </template>
  128. <script>
  129. import {
  130. selectDeviceType,
  131. selectCameraByDeptId,
  132. selectKeyAreaList,
  133. getRegionalFlag
  134. } from '@/api/monitor'
  135. import supermap from '@/components/supermap' //超图
  136. import vheader from '@/components/v-header.vue' //一体化共用头部
  137. import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
  138. import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
  139. import TVWall from '@/components/TVWall.vue' //电视墙弹窗
  140. /** ----------------------------------摄像头预览开始------------------------------------- */
  141. import {
  142. getDahuaVideoServer
  143. } from '@/api/dahua/dahua'
  144. import {
  145. getHaiKangVideoServer
  146. } from '@/api/haikang/haikang'
  147. import DHWs from '@/dahua/lib/DHWs'
  148. /** ----------------------------------摄像头预览结束------------------------------------- */
  149. // import echarts from 'echarts'
  150. let echarts = require('echarts')
  151. export default {
  152. components: {
  153. supermap,
  154. vheader,
  155. vBottomMenu,
  156. eventLocation,
  157. TVWall
  158. },
  159. created() {
  160. /** ----------------------------------摄像头预览开始------------------------------------- */
  161. const DHWsInstance = DHWs.getInstance()
  162. this.ws = DHWsInstance
  163. /** ----------------------------------摄像头预览结束------------------------------------- */
  164. /** ----------------------------------底部按钮公用组件开始------------------------------------- */
  165. window.showDialog = this.showDialog
  166. window.choseLayerSwitching = this.choseLayerSwitching
  167. window.choseLayerSwitchingList = this.choseLayerSwitchingList
  168. /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  169. },
  170. mounted() {
  171. this.selectDeviceType(-1)
  172. this.selectKeyAreaList()
  173. },
  174. data() {
  175. return {
  176. iconCurrentIndex1: '-1',
  177. listCurrentIndex1: '-1',
  178. listCurrentIndex2: '-1',
  179. listCurrentIndex3: '-1',
  180. graphicsList:[],//重点区域
  181. /** ----------------------------------摄像头预览开始------------------------------------- */
  182. //大华
  183. activePanel: 'key1',
  184. isLogin: false,
  185. cameraParams: [],
  186. ws: null,
  187. //海康
  188. cameraTitle: '',
  189. cameraVisible: false,
  190. initCount: 0,
  191. pubKey: '',
  192. oWebControl: null,
  193. /** ----------------------------------摄像头预览结束------------------------------------- */
  194. visuForestCloudMapDeviceBOList: [],
  195. visuForestCloudCameraBOList: [],
  196. cameraMarkersList: [],
  197. sourceData: [],
  198. keyAreaList: [],//重点区域
  199. iframeBoo: true,
  200. open: false,
  201. iframeVue: null,
  202. activeName: 'info',
  203. radio: '1',
  204. region: [],
  205. //左右缩进
  206. indentStyle: '',
  207. indentleft: '',
  208. indentright: '',
  209. indentText: '收起左右栏',
  210. indentdisabled: false,
  211. domId: 'dom1',
  212. }
  213. },
  214. methods: {
  215. selectKeyAreaList() {
  216. this.keyAreaList=[]
  217. //获取重点区域列表
  218. let that = this
  219. selectKeyAreaList().then(res => {
  220. that.keyAreaList = res.data
  221. })
  222. },
  223. getRegionalFlag(id){
  224. //获取重点区域
  225. this.listCurrentIndex3=id
  226. let that = this
  227. getRegionalFlag(id).then(res => {
  228. that.graphicsList=[]
  229. //地图标记
  230. if (res.data != null && res.data.length > 0) {
  231. for (let i = 0; i < res.data.length; i++) {
  232. let latlng = {
  233. lat: res.data[i].lat,
  234. lng: res.data[i].lng
  235. }
  236. that.graphicsList.push(latlng)
  237. }
  238. setTimeout(() => {
  239. that.$refs.supermap.clearG()
  240. that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
  241. }, 1000)
  242. } else {
  243. that.$refs.supermap.clearG()
  244. }
  245. })
  246. },
  247. /** ----------------------------------底部按钮公用组件开始------------------------------------- */
  248. showDialog(click) {
  249. if (click == 'eventLocation') {
  250. this.$refs.eventLocation.showEventLocation()
  251. this.$refs.supermap.isEditableLayers = false
  252. this.$refs.bottomMenu.showChild = false
  253. this.$refs.bottomMenu.showBanChild = false
  254. this.$refs.bottomMenu.showChangChild = false
  255. } else if (click == 'editableLayers') {
  256. this.$refs.bottomMenu.showChild = false
  257. this.$refs.bottomMenu.showBanChild = false
  258. this.$refs.bottomMenu.showChangChild = false
  259. if (!this.$refs.supermap.isEditableLayers) {
  260. this.$refs.supermap.isEditableLayers = true
  261. } else {
  262. this.$refs.supermap.isEditableLayers = false
  263. }
  264. } else if (click == 'layerSwitching') {
  265. this.$refs.supermap.isEditableLayers = false
  266. this.$refs.bottomMenu.showBanChild = false
  267. this.$refs.bottomMenu.showChangChild = false
  268. if (!this.$refs.bottomMenu.showChild) {
  269. this.$refs.bottomMenu.showChild = true
  270. } else {
  271. this.$refs.bottomMenu.showChild = false
  272. }
  273. } else if (click == 'TVWall') {
  274. this.$refs.TVWall.showTVWall()
  275. this.$refs.supermap.isEditableLayers = false
  276. this.$refs.bottomMenu.showChild = false
  277. this.$refs.bottomMenu.showBanChild = false
  278. this.$refs.bottomMenu.showChangChild = false
  279. } else if (click == 'forestban') {
  280. this.$refs.supermap.isEditableLayers = false
  281. this.$refs.bottomMenu.showChild = false
  282. this.$refs.bottomMenu.showChangChild = false
  283. if (!this.$refs.bottomMenu.showBanChild) {
  284. this.$refs.bottomMenu.showBanChild = true
  285. } else {
  286. this.$refs.bottomMenu.showBanChild = false
  287. }
  288. } else if (click == 'forestchang') {
  289. this.$refs.supermap.isEditableLayers = false
  290. this.$refs.bottomMenu.showBanChild = false
  291. this.$refs.bottomMenu.showChild = false
  292. if (!this.$refs.bottomMenu.showChangChild) {
  293. this.$refs.bottomMenu.showChangChild = true
  294. } else {
  295. this.$refs.bottomMenu.showChangChild = false
  296. }
  297. }
  298. },
  299. //选择图层
  300. choseLayerSwitching(url, isClear) {
  301. this.$refs.supermap.layerSwitching(url, isClear)
  302. },
  303. //选择图层(传递数组)
  304. choseLayerSwitchingList(urlList) {
  305. this.$refs.supermap.layerSwitchingList(urlList)
  306. },
  307. /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  308. cameraChat() {
  309. // 基于准备好的dom,初始化echarts实例
  310. let myChart = echarts.init(document.getElementById('camera-chart'))
  311. // 绘制图表
  312. const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
  313. myChart.setOption({
  314. dataset: {
  315. source: this.sourceData
  316. },
  317. tooltip: {
  318. trigger: 'item'
  319. },
  320. grid: {
  321. top: '5%',
  322. left: '5%',
  323. // right: "4%",
  324. bottom: '0%',
  325. width: '75%',
  326. containLabel: true
  327. },
  328. dataZoom: [{
  329. show:true,
  330. type: 'slider',
  331. yAxisIndex:0,
  332. left:10,
  333. start: 0,
  334. end: this.sourceData.length > 10 ? 40 : 100,
  335. width:15
  336. }],
  337. xAxis: {
  338. show: false,
  339. type: 'value',
  340. left:10
  341. },
  342. yAxis: {
  343. type: 'category', // 不设置类目轴,抽离的dataset数据展示不出来
  344. inverse: true,
  345. axisLabel: {
  346. show: true,
  347. textStyle: {
  348. color: '#5deaff',
  349. fontSize: '12'
  350. }
  351. },
  352. splitLine: {
  353. show: false
  354. },
  355. axisTick: {
  356. show: false
  357. },
  358. axisLine: {
  359. show: false
  360. }
  361. },
  362. series: [{
  363. type: 'bar',
  364. animationCurve: 'easeOutBack',
  365. barWidth: 5,
  366. label: {
  367. show: true,
  368. position: 'right',
  369. offset: [0, 0],
  370. color: '#88dfd5',
  371. // fontSize: "12",
  372. style: {
  373. fill: '#fff'
  374. }
  375. },
  376. backgroundBar: {
  377. show: true,
  378. style: {
  379. fill: 'rgba(97,152,255,0.20)'
  380. }
  381. },
  382. barStyle: {
  383. stroke: 'rgba(41,244,236,1)'
  384. },
  385. gradient: {
  386. color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
  387. },
  388. itemStyle: {
  389. label: {
  390. show: true
  391. },
  392. labelLine: {
  393. show: false
  394. },
  395. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  396. offset: 0,
  397. color: 'rgba(41,244,236,0)'
  398. },
  399. {
  400. offset: 1,
  401. color: 'rgba(41,244,236,.5)'
  402. }
  403. ]),
  404. borderColor: '#a2f9f7',
  405. shadowBlur: 16,
  406. shadowColor: '#a2f9f7'
  407. }
  408. }]
  409. })
  410. },
  411. selectDeviceType(index) {
  412. this.iconCurrentIndex1 = index
  413. //获取左侧动态感知设备
  414. let that = this
  415. selectDeviceType().then(res => {
  416. that.cameraMarkersList=[]
  417. that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
  418. that.region = res.data.visuForestCloudTodaySjfbBOList
  419. if (res.data.visuForestCloudTodaySjfbBOList != null && res.data.visuForestCloudTodaySjfbBOList
  420. .length > 0) {
  421. for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
  422. let aa = []
  423. aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
  424. aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
  425. this.sourceData.push(aa)
  426. }
  427. }
  428. that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
  429. this.cameraChat()
  430. if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
  431. .length > 0) {
  432. for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
  433. let markersMap = {
  434. lng: 124.59,
  435. lat: 43.02,
  436. icon: 'camera',
  437. bindPopupHtml: '',
  438. click: 'preview',
  439. parameter: '',
  440. keepBindPopup: false,
  441. isAggregation: false
  442. }
  443. if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
  444. markersMap.parameter = {code:res.data.visuForestCloudCameraBOList[i].cameraCode,
  445. type:res.data.visuForestCloudCameraBOList[i].cameraFactory}
  446. } else {
  447. markersMap.parameter = []
  448. }
  449. markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
  450. markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
  451. markersMap.radius = res.data.visuForestCloudCameraBOList[i].cameraRadius
  452. markersMap.bindPopupHtml = '<div class="map-tip">' +
  453. '<span>' +
  454. ' <div class="d-l-con">' +
  455. ' <div class="d-l-l-text">' +
  456. ' <h4>经纬度:' + res.data.visuForestCloudCameraBOList[i].longitude +
  457. ',' + res.data.visuForestCloudCameraBOList[i].latitude + '</h4>' +
  458. ' </div>' +
  459. ' </div>' +
  460. ' </span>' +
  461. '<span>' +
  462. ' <div class="d-l-con">' +
  463. ' <div class="d-l-l-text">' +
  464. ' <h4>摄像头名称:' + res.data.visuForestCloudCameraBOList[i]
  465. .cameraName + '</h4>' +
  466. ' </div>' +
  467. ' </div>' +
  468. ' </span>' +
  469. '<span>' +
  470. ' <div class="d-l-con">' +
  471. ' <div class="d-l-l-text">' +
  472. ' <h4>摄像头类型:' + (res.data.visuForestCloudCameraBOList[i].cameraFactory=="1"?"大华":"海康") + '</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.visuForestCloudCameraBOList[i]
  480. .cameraRadius + '米</h4>' +
  481. ' </div>' +
  482. ' </div>' +
  483. ' </span>' +
  484. '</div>'
  485. this.cameraMarkersList.push(markersMap)
  486. // cameraAccount: "1"
  487. // cameraCode: "1000010"
  488. // cameraFactory: "2"
  489. // cameraIp: "1"
  490. // cameraName: "2"
  491. // cameraPasword: "2"
  492. // cameraPort: 2
  493. // cameraRadius: 20
  494. // cameraRegion: "3"
  495. // dataDeptId: null
  496. // dataStatus: null
  497. // eventType: null
  498. // height: "11"
  499. // id: "0d165fc362514f79b12a899ea66295fd"
  500. // latitude: "49.325625"
  501. // longitude: "125.3333"
  502. }
  503. setTimeout(() => {
  504. that.$refs.supermap.clearM(true)
  505. that.$refs.supermap.clearM(false)
  506. that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
  507. }, 1000)
  508. }
  509. })
  510. },
  511. dropLocation(lat, lng, index) {
  512. this.listCurrentIndex2 = index
  513. this.$refs.supermap.dropLocation(lat, lng)
  514. },
  515. selectCameraByDeptId(depId) {
  516. this.listCurrentIndex1 = depId
  517. let that = this
  518. that.cameraMarkersList = []
  519. that.visuForestCloudCameraBOList = []
  520. selectCameraByDeptId(depId).then(res => {
  521. //根据设备类型查看列表
  522. that.visuForestCloudCameraBOList = res.data
  523. if (res.data != null && res.data.length > 0) {
  524. for (let i = 0; i < res.data.length; i++) {
  525. let markersMap = {
  526. lng: 124.59,
  527. lat: 43.02,
  528. icon: 'camera',
  529. bindPopupHtml: '',
  530. click: 'preview',
  531. parameter: '',
  532. keepBindPopup: false,
  533. isAggregation: false
  534. }
  535. if (res.data[i].channelCode != null) {
  536. markersMap.parameter = {code:res.data.data[i].cameraCode,
  537. type:res.data.data[i].cameraFactory}
  538. } else {
  539. markersMap.parameter = []
  540. }
  541. markersMap.lng = res.data[i].longitude
  542. markersMap.lat = res.data[i].latitude
  543. markersMap.radius = res.data[i].cameraRadius
  544. markersMap.bindPopupHtml = '<div class="map-tip">' +
  545. '<span>' +
  546. ' <div class="d-l-con">' +
  547. ' <div class="d-l-l-text">' +
  548. ' <h4>经纬度:' + res.data[i].longitude + ',' + res.data[i].latitude +
  549. '</h4>' +
  550. ' </div>' +
  551. ' </div>' +
  552. ' </span>' +
  553. '<span>' +
  554. ' <div class="d-l-con">' +
  555. ' <div class="d-l-l-text">' +
  556. ' <h4>摄像头名称:' + res.data[i].cameraName + '</h4>' +
  557. ' </div>' +
  558. ' </div>' +
  559. ' </span>' +
  560. '<span>' +
  561. ' <div class="d-l-con">' +
  562. ' <div class="d-l-l-text">' +
  563. ' <h4>摄像头类型:' + (res.data[i].cameraFactory=="1"?"大华":"海康") + '</h4>' +
  564. ' </div>' +
  565. ' </div>' +
  566. ' </span>' +
  567. '<span>' +
  568. ' <div class="d-l-con">' +
  569. ' <div class="d-l-l-text">' +
  570. ' <h4>摄像头半径:' + res.data[i]
  571. .cameraRadius + '米</h4>' +
  572. ' </div>' +
  573. ' </div>' +
  574. ' </span>' +
  575. '</div>'
  576. this.cameraMarkersList.push(markersMap)
  577. // cameraAccount: "1"
  578. // cameraCode: "1000010"
  579. // cameraFactory: "2"
  580. // cameraIp: "1"
  581. // cameraName: "2"
  582. // cameraPasword: "2"
  583. // cameraPort: 2
  584. // cameraRadius: 20
  585. // cameraRegion: "3"
  586. // dataDeptId: null
  587. // dataStatus: null
  588. // eventType: null
  589. // height: "11"
  590. // id: "0d165fc362514f79b12a899ea66295fd"
  591. // latitude: "49.325625"
  592. // longitude: "125.3333"
  593. }
  594. setTimeout(() => {
  595. that.$refs.supermap.clearM(true)
  596. that.$refs.supermap.clearM(false)
  597. that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
  598. }, 1000)
  599. }
  600. })
  601. },
  602. //吉祥物收起左右框
  603. indent() {
  604. let list = document.getElementsByClassName('el-tooltip__popper')
  605. list[list.length - 1].style.display = 'none'
  606. if (this.indentStyle == '') {
  607. this.indentStyle = 'indent-style'
  608. this.indentleft = 'indent-left'
  609. this.indentright = 'indent-right'
  610. this.indentText = '展开左右栏'
  611. } else if (this.indentText == '展开左右栏') {
  612. this.indentStyle = ''
  613. this.indentleft = ''
  614. this.indentright = ''
  615. this.indentText = '收起左右栏'
  616. }
  617. },
  618. /** ----------------------------------摄像头预览开始------------------------------------- */
  619. alertLogin: function() {
  620. this.$modal.msg('登录中....')
  621. },
  622. alertLoginSuccess: function() {
  623. this.$modal.msgSuccess('登录成功!')
  624. },
  625. alertLoginFailed: function() {
  626. this.$modal.msgError('登陆失败!')
  627. },
  628. alertReinstall: function() {
  629. this.$modal.msgWarning('请重新安装客户端')
  630. },
  631. cancelEventLocationShow() {
  632. if (this.oWebControl != null) {
  633. this.oWebControl.JS_HideWnd() // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
  634. this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
  635. },
  636. function() { // 断开与插件服务连接失败
  637. })
  638. }
  639. },
  640. /** 预览按钮操作 */
  641. preview(cameraParam) {
  642. if(cameraParam.type=='1'){
  643. getDahuaVideoServer().then(newResponse => {
  644. console.log(newResponse)
  645. this.ws.detectConnectQt().then(res => {
  646. if (res) { // 连接客户端成功
  647. this.alertLogin()
  648. this.ws.login({
  649. loginIp: newResponse.loginIp,
  650. loginPort: newResponse.loginPort,
  651. userName: newResponse.userName,
  652. userPwd: newResponse.userPwd,
  653. token: '',
  654. https: 1
  655. })
  656. this.ws.on('loginState', (res) => {
  657. this.isLogin = res
  658. console.log('---res-----', res)
  659. if (res) {
  660. this.alertLoginSuccess()
  661. this.activePanel = 'key2'
  662. this.realTimeVideoDialog(cameraParam.code)
  663. } else {
  664. this.alertLoginFailed()
  665. }
  666. })
  667. } else { // 连接客户端失败
  668. this.alertReinstall()
  669. }
  670. })
  671. })
  672. }else if(cameraParam.type=='0'){
  673. let that = this
  674. that.cameraVisible = true
  675. getHaiKangVideoServer({cameraCode:cameraParam.code}).then(newResponse => {
  676. that.cameraTitle = '摄像头-'+newResponse.data.cameraName
  677. that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
  678. setTimeout(function() {
  679. that.playhk(newResponse.data.channelCode)
  680. }, 5000)
  681. })
  682. }
  683. },
  684. realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
  685. if (!this.isLogin) {
  686. this.$Message.info('正在登陆客户端,请稍等......')
  687. return false
  688. }
  689. const params = [cameraParams];
  690. this.ws.openVideo(params)
  691. },
  692. /** ----------------------------------摄像头预览结束------------------------------------- */
  693. /** ----------------------------------海康摄像头预览开始------------------------------------- */
  694. // 创建播放实例
  695. initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
  696. let that=this
  697. that.oWebControl = new WebControl({
  698. szPluginContainer: 'playWnd', // 指定容器id
  699. iServicePortStart: 15900, // 指定起止端口号,建议使用该值
  700. iServicePortEnd: 15909,
  701. szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
  702. cbConnectSuccess: function() { // 创建WebControl实例成功
  703. that.oWebControl.JS_StartService('window', { // WebControl实例创建成功后需要启动服务
  704. dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
  705. }).then(function() { // 启动插件服务成功
  706. that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
  707. cbIntegrationCallBack: cbIntegrationCallBack
  708. })
  709. that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口,宽高可设定
  710. that.init(newappkey,newloginIp,newsecret,newloginPort) // 创建播放实例成功后初始化
  711. })
  712. }, function() { // 启动插件服务失败
  713. })
  714. },
  715. cbConnectError: function() { // 创建WebControl实例失败
  716. that.oWebControl = null
  717. $('#playWnd').html('插件未启动,正在尝试启动,请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
  718. WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数,采用wakeup来启动程序
  719. initCount++
  720. if (initCount < 3) {
  721. setTimeout(function() {
  722. that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
  723. }, 3000)
  724. } else {
  725. $('#playWnd').html('插件启动失败,请检查插件是否安装!<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
  726. }
  727. },
  728. cbConnectClose: function(bNormalClose) {
  729. // 异常断开:bNormalClose = false
  730. // JS_Disconnect正常断开:bNormalClose = true
  731. console.log('cbConnectClose')
  732. that.oWebControl = null
  733. }
  734. })
  735. },
  736. //播放海康摄像头
  737. playhk(channelCode) {
  738. var cameraIndexCode = channelCode //获取输入的监控点编号值,必填
  739. var streamMode = 0 //主子码流标识:0-主码流,1-子码流
  740. var transMode = 1 //传输协议:0-UDP,1-TCP
  741. var gpuMode = 0 //是否启用GPU硬解,0-不启用,1-启用
  742. var wndId = -1 //播放窗口序号(在2x2以上布局下可指定播放窗口)
  743. cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
  744. cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
  745. this.oWebControl.JS_RequestInterface({
  746. funcName: 'startPreview',
  747. argument: JSON.stringify({
  748. cameraIndexCode: cameraIndexCode, //监控点编号
  749. streamMode: streamMode, //主子码流标识
  750. transMode: transMode, //传输协议
  751. gpuMode: gpuMode, //是否开启GPU硬解
  752. wndId: wndId //可指定播放窗口
  753. })
  754. })
  755. },
  756. //初始化
  757. init(newappkey,newloginIp,newsecret,newloginPort) {
  758. let that = this
  759. that.getPubKey(function() {
  760. ////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
  761. var appkey = newappkey //综合安防管理平台提供的appkey,必填
  762. var secret = that.setEncrypt(newsecret) //综合安防管理平台提供的secret,必填
  763. var ip = newloginIp //综合安防管理平台IP地址,必填
  764. var playMode = 0 //初始播放模式:0-预览,1-回放
  765. var port = Number(newloginPort) //综合安防管理平台端口,若启用HTTPS协议,默认443
  766. var snapDir = 'D:\\SnapDir' //抓图存储路径
  767. var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
  768. var layout = '1x1' //playMode指定模式的布局
  769. var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
  770. var encryptedFields = 'secret' //加密字段,默认加密领域为secret
  771. var showToolbar = 1 //是否显示工具栏,0-不显示,非0-显示
  772. var showSmart = 1 //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
  773. var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
  774. ////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
  775. that.oWebControl.JS_RequestInterface({
  776. funcName: 'init',
  777. argument: JSON.stringify({
  778. appkey: appkey, //API网关提供的appkey
  779. secret: secret, //API网关提供的secret
  780. ip: ip, //API网关IP地址
  781. playMode: playMode, //播放模式(决定显示预览还是回放界面)
  782. port: port, //端口
  783. snapDir: snapDir, //抓图存储路径
  784. videoDir: videoDir, //紧急录像或录像剪辑存储路径
  785. layout: layout, //布局
  786. enableHTTPS: enableHTTPS, //是否启用HTTPS协议
  787. encryptedFields: encryptedFields, //加密字段
  788. showToolbar: showToolbar, //是否显示工具栏
  789. showSmart: showSmart, //是否显示智能信息
  790. buttonIDs: buttonIDs //自定义工具条按钮
  791. })
  792. }).then(function(oData) {
  793. that.oWebControl.JS_Resize(1020, 600) // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
  794. })
  795. })
  796. },
  797. //获取公钥
  798. getPubKey(callback) {
  799. let that = this
  800. that.oWebControl.JS_RequestInterface({
  801. funcName: 'getRSAPubKey',
  802. argument: JSON.stringify({
  803. keyLength: 1024
  804. })
  805. }).then(function(oData) {
  806. console.log(oData)
  807. if (oData.responseMsg.data) {
  808. that.pubKey = oData.responseMsg.data
  809. callback()
  810. }
  811. })
  812. },
  813. //RSA加密
  814. setEncrypt(value) {
  815. var encrypt = new JSEncrypt()
  816. encrypt.setPublicKey(this.pubKey)
  817. return encrypt.encrypt(value)
  818. },
  819. /** ----------------------------------海康摄像头预览结束------------------------------------- */
  820. }
  821. }
  822. // 推送消息
  823. function cbIntegrationCallBack(oData) {
  824. console.log(JSON.stringify(oData.responseMsg))
  825. }
  826. </script>
  827. <style rel="stylesheet/scss" lang="scss" scoped>
  828. @import '@/assets/styles/base.scss';
  829. .playWnd {
  830. margin: 4px 0 0 8px;
  831. width: 1020px; /*播放容器的宽和高设定*/
  832. height: 600px;
  833. border: 1px solid red;
  834. }
  835. </style>