|
|
@@ -0,0 +1,874 @@
|
|
|
+<!--监控中心-->
|
|
|
+<template>
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="leftbar" :class="indentleft" ref="left">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <div class="this-title">
|
|
|
+ <span>事态感知</span>
|
|
|
+ <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
|
|
|
+ </div>
|
|
|
+ <div class="i-list-con h-73">
|
|
|
+ <div class="d-l-con-icon">
|
|
|
+ <div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
|
|
|
+ v-for="(item,index) in visuForestCloudMapDeviceBOList"
|
|
|
+ v-on:click="selectDeviceType(index)">
|
|
|
+ <!-- -->
|
|
|
+ <div class="icon icon-dot"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>{{ item.deviceCount }}</h6>
|
|
|
+ <h5>{{ item.deviceName }}</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-con w-33 m-btm-no">
|
|
|
+ <div class="icon icon-dot"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>0</h6>
|
|
|
+ <h5>传感器</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="icon-con w-33 m-btm-no">
|
|
|
+ <div class="icon icon-dot"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>0</h6>
|
|
|
+ <h5>大喇叭</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="overflow-y" style="height: 33vh;">
|
|
|
+ <el-collapse accordion>
|
|
|
+ <el-collapse-item v-for="(item,index) in region" :key="index">
|
|
|
+ <!-- deptId -->
|
|
|
+ <template slot="title">
|
|
|
+ <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
|
|
|
+ v-on:click="selectCameraByDeptId(item.deptId)">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <h4 class="collapse-title">{{ item.deptName }}</h4>
|
|
|
+ </div>
|
|
|
+ <div class="d-l-l-count">{{ item.deptCount }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 横向柱状 echart -->
|
|
|
+ <div class="overflow-y" style="height: 33vh;">
|
|
|
+ <div id="camera-chart" style="width: 100%;height:33vh;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
|
|
|
+ :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
|
|
|
+ </supermap>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div class="rightbar" :class="indentright" ref="right">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <div class="this-title">
|
|
|
+ <span>列表</span>
|
|
|
+ <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
|
|
|
+ </div>
|
|
|
+ <div class="i-list-con h-43">
|
|
|
+ <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
|
|
|
+ :class="{on:listCurrentIndex2 == index}"
|
|
|
+ v-on:click="dropLocation(item.latitude,item.longitude,index)">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <i class="iconfont sj-icon-jkzx icon-sxt"></i>
|
|
|
+ <h4>{{ item.cameraName }}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <div class="this-title">
|
|
|
+ <span>重点区域</span>
|
|
|
+ <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
|
|
|
+ </div>
|
|
|
+ <div class="i-list-con h-25">
|
|
|
+ <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}" @click="getRegionalFlag(item.id)">
|
|
|
+ <div class="d-l-l-text">
|
|
|
+ <i class="i-small"></i>
|
|
|
+ <h4>{{ item.areaName }}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
+<!-- <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
|
|
|
+<!-- <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
|
|
|
+<!-- src="@/assets/images/mascot.png"/></div>-->
|
|
|
+<!-- </el-tooltip>-->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <eventLocation ref="eventLocation"></eventLocation>
|
|
|
+ <TVWall ref="TVWall"></TVWall>
|
|
|
+ <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 {
|
|
|
+ selectDeviceType,
|
|
|
+ selectCameraByDeptId,
|
|
|
+ selectKeyAreaList,
|
|
|
+ getRegionalFlag
|
|
|
+} from '@/api/monitor'
|
|
|
+
|
|
|
+import supermap from '@/components/supermap' //超图
|
|
|
+import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
+import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
|
|
|
+import TVWall from '@/components/TVWall.vue' //电视墙弹窗
|
|
|
+
|
|
|
+/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+import {
|
|
|
+ getDahuaVideoServer
|
|
|
+} from '@/api/dahua/dahua'
|
|
|
+import {
|
|
|
+ getHaiKangVideoServer
|
|
|
+} from '@/api/haikang/haikang'
|
|
|
+import DHWs from '@/dahua/lib/DHWs'
|
|
|
+
|
|
|
+/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ // import echarts from 'echarts'
|
|
|
+let echarts = require('echarts')
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation,
|
|
|
+ TVWall
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ const DHWsInstance = DHWs.getInstance()
|
|
|
+ this.ws = DHWsInstance
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
+ window.choseLayerSwitchingList_Data = this.choseLayerSwitchingList_Data
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.selectDeviceType(-1)
|
|
|
+ this.selectKeyAreaList()
|
|
|
+ this.bottomMenuList() //获取底部公共组件消息和任务
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iconCurrentIndex1: '-1',
|
|
|
+ listCurrentIndex1: '-1',
|
|
|
+ listCurrentIndex2: '-1',
|
|
|
+ listCurrentIndex3: '-1',
|
|
|
+ graphicsList:[],//重点区域
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ //大华
|
|
|
+ activePanel: 'key1',
|
|
|
+ isLogin: false,
|
|
|
+ cameraParams: [],
|
|
|
+ ws: null,
|
|
|
+ //海康
|
|
|
+ cameraTitle: '',
|
|
|
+ cameraVisible: false,
|
|
|
+ initCount: 0,
|
|
|
+ pubKey: '',
|
|
|
+ oWebControl: null,
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ visuForestCloudMapDeviceBOList: [],
|
|
|
+ visuForestCloudCameraBOList: [],
|
|
|
+ cameraMarkersList: [],
|
|
|
+ sourceData: [],
|
|
|
+ keyAreaList: [],//重点区域
|
|
|
+ iframeBoo: true,
|
|
|
+ open: false,
|
|
|
+ iframeVue: null,
|
|
|
+ activeName: 'info',
|
|
|
+ radio: '1',
|
|
|
+ region: [],
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false,
|
|
|
+ domId: 'dom1',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectKeyAreaList() {
|
|
|
+ this.keyAreaList=[]
|
|
|
+ //获取重点区域列表
|
|
|
+ let that = this
|
|
|
+ selectKeyAreaList().then(res => {
|
|
|
+ that.keyAreaList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRegionalFlag(id){
|
|
|
+ //获取重点区域
|
|
|
+ this.listCurrentIndex3=id
|
|
|
+ let that = this
|
|
|
+ getRegionalFlag(id).then(res => {
|
|
|
+ that.graphicsList=[]
|
|
|
+ //地图标记
|
|
|
+ if (res.data != null && res.data.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let latlng = {
|
|
|
+ lat: res.data[i].lat,
|
|
|
+ lng: res.data[i].lng
|
|
|
+ }
|
|
|
+ that.graphicsList.push(latlng)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearG()
|
|
|
+ that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
|
|
|
+ }, 1000)
|
|
|
+ } else {
|
|
|
+ that.$refs.supermap.clearG()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ bottomMenuList() {
|
|
|
+ this.$refs.bottomMenu.selectTaskList()//获取任务列表
|
|
|
+ this.$refs.bottomMenu.selectMessageList()//获取消息列表
|
|
|
+ },
|
|
|
+ showDialog(click) {
|
|
|
+ if (click == 'eventLocation') {
|
|
|
+ this.$refs.eventLocation.showEventLocation()
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ } else if (click == 'editableLayers') {
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ if (!this.$refs.supermap.isEditableLayers) {
|
|
|
+ this.$refs.supermap.isEditableLayers = true
|
|
|
+ } else {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ }
|
|
|
+ } else if (click == 'layerSwitching') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ if (!this.$refs.bottomMenu.showChild) {
|
|
|
+ this.$refs.bottomMenu.showChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ }
|
|
|
+ } else if (click == 'TVWall') {
|
|
|
+ this.$refs.TVWall.showTVWall()
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ } else if (click == 'forestban') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ if (!this.$refs.bottomMenu.showBanChild) {
|
|
|
+ this.$refs.bottomMenu.showBanChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ }
|
|
|
+ } else if (click == 'forestchang') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.bottomMenu.showBanChild = false
|
|
|
+ this.$refs.bottomMenu.showChild = false
|
|
|
+ if (!this.$refs.bottomMenu.showChangChild) {
|
|
|
+ this.$refs.bottomMenu.showChangChild = true
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showChangChild = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //选择图层
|
|
|
+ choseLayerSwitching(url, isClear) {
|
|
|
+ this.$refs.supermap.layerSwitching(url, isClear)
|
|
|
+ },
|
|
|
+ //选择图层(传递数组)
|
|
|
+ choseLayerSwitchingList(urlList) {
|
|
|
+ this.$refs.supermap.layerSwitchingList(urlList)
|
|
|
+ },
|
|
|
+ //选择图层(传递数组) 带数据
|
|
|
+ choseLayerSwitchingList_Data(urlList) {
|
|
|
+ this.$refs.supermap.layerSwitchingList_Data(urlList)
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ cameraChat() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = echarts.init(document.getElementById('camera-chart'))
|
|
|
+ // 绘制图表
|
|
|
+ const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
|
|
|
+ myChart.setOption({
|
|
|
+ dataset: {
|
|
|
+ source: this.sourceData
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ left: '5%',
|
|
|
+ // right: "4%",
|
|
|
+ bottom: '0%',
|
|
|
+ width: '75%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
+ show:true,
|
|
|
+ type: 'slider',
|
|
|
+ yAxisIndex:0,
|
|
|
+ left:10,
|
|
|
+ start: 0,
|
|
|
+ end: this.sourceData.length > 10 ? 40 : 100,
|
|
|
+ width:15
|
|
|
+ }],
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: 'value',
|
|
|
+ left:10
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#5deaff',
|
|
|
+ fontSize: '12'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+
|
|
|
+ type: 'bar',
|
|
|
+ animationCurve: 'easeOutBack',
|
|
|
+ barWidth: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ offset: [0, 0],
|
|
|
+ color: '#88dfd5',
|
|
|
+ // fontSize: "12",
|
|
|
+ style: {
|
|
|
+ fill: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundBar: {
|
|
|
+ show: true,
|
|
|
+ style: {
|
|
|
+ fill: 'rgba(97,152,255,0.20)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barStyle: {
|
|
|
+ stroke: 'rgba(41,244,236,1)'
|
|
|
+ },
|
|
|
+ gradient: {
|
|
|
+ color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(41,244,236,0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(41,244,236,.5)'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ borderColor: '#a2f9f7',
|
|
|
+ shadowBlur: 16,
|
|
|
+ shadowColor: '#a2f9f7'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectDeviceType(index) {
|
|
|
+ this.iconCurrentIndex1 = index
|
|
|
+ //获取左侧动态感知设备
|
|
|
+ let that = this
|
|
|
+ selectDeviceType().then(res => {
|
|
|
+ that.cameraMarkersList=[]
|
|
|
+ that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
|
|
|
+
|
|
|
+ that.region = res.data.visuForestCloudTodaySjfbBOList
|
|
|
+
|
|
|
+ if (res.data.visuForestCloudTodaySjfbBOList != null && res.data.visuForestCloudTodaySjfbBOList
|
|
|
+ .length > 0) {
|
|
|
+ for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
|
|
|
+ let aa = []
|
|
|
+ aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
|
|
|
+ aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
|
|
|
+ this.sourceData.push(aa)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
|
|
|
+ this.cameraChat()
|
|
|
+ if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
|
|
|
+ .length > 0) {
|
|
|
+ for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'camera',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: 'preview',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
|
|
|
+ markersMap.parameter = {code:res.data.visuForestCloudCameraBOList[i].cameraCode,
|
|
|
+ type:res.data.visuForestCloudCameraBOList[i].cameraFactory}
|
|
|
+ } else {
|
|
|
+ markersMap.parameter = []
|
|
|
+ }
|
|
|
+
|
|
|
+ markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
|
|
|
+ markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
|
|
|
+ markersMap.radius = res.data.visuForestCloudCameraBOList[i].cameraRadius
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' + res.data.visuForestCloudCameraBOList[i].longitude +
|
|
|
+ ',' + res.data.visuForestCloudCameraBOList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>摄像头名称：' + res.data.visuForestCloudCameraBOList[i]
|
|
|
+ .cameraName + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>摄像头类型：' + (res.data.visuForestCloudCameraBOList[i].cameraFactory=="1"?"大华":"海康") + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>摄像头半径：' + res.data.visuForestCloudCameraBOList[i]
|
|
|
+ .cameraRadius + '米</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '</div>'
|
|
|
+ this.cameraMarkersList.push(markersMap)
|
|
|
+ // cameraAccount: "1"
|
|
|
+ // cameraCode: "1000010"
|
|
|
+ // cameraFactory: "2"
|
|
|
+ // cameraIp: "1"
|
|
|
+ // cameraName: "2"
|
|
|
+ // cameraPasword: "2"
|
|
|
+ // cameraPort: 2
|
|
|
+ // cameraRadius: 20
|
|
|
+ // cameraRegion: "3"
|
|
|
+ // dataDeptId: null
|
|
|
+ // dataStatus: null
|
|
|
+ // eventType: null
|
|
|
+ // height: "11"
|
|
|
+ // id: "0d165fc362514f79b12a899ea66295fd"
|
|
|
+ // latitude: "49.325625"
|
|
|
+ // longitude: "125.3333"
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dropLocation(lat, lng, index) {
|
|
|
+ this.listCurrentIndex2 = index
|
|
|
+ this.$refs.supermap.dropLocation(lat, lng)
|
|
|
+ },
|
|
|
+ selectCameraByDeptId(depId) {
|
|
|
+ this.listCurrentIndex1 = depId
|
|
|
+ let that = this
|
|
|
+ that.cameraMarkersList = []
|
|
|
+ that.visuForestCloudCameraBOList = []
|
|
|
+ selectCameraByDeptId(depId).then(res => {
|
|
|
+ //根据设备类型查看列表
|
|
|
+ that.visuForestCloudCameraBOList = res.data
|
|
|
+ if (res.data != null && res.data.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'camera',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: 'preview',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (res.data[i].channelCode != null) {
|
|
|
+ markersMap.parameter = {code:res.data.data[i].cameraCode,
|
|
|
+ type:res.data.data[i].cameraFactory}
|
|
|
+ } else {
|
|
|
+ markersMap.parameter = []
|
|
|
+ }
|
|
|
+
|
|
|
+ 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=="1"?"大华":"海康") + '</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>'
|
|
|
+ this.cameraMarkersList.push(markersMap)
|
|
|
+ // cameraAccount: "1"
|
|
|
+ // cameraCode: "1000010"
|
|
|
+ // cameraFactory: "2"
|
|
|
+ // cameraIp: "1"
|
|
|
+ // cameraName: "2"
|
|
|
+ // cameraPasword: "2"
|
|
|
+ // cameraPort: 2
|
|
|
+ // cameraRadius: 20
|
|
|
+ // cameraRegion: "3"
|
|
|
+ // dataDeptId: null
|
|
|
+ // dataStatus: null
|
|
|
+ // eventType: null
|
|
|
+ // height: "11"
|
|
|
+ // id: "0d165fc362514f79b12a899ea66295fd"
|
|
|
+ // latitude: "49.325625"
|
|
|
+ // longitude: "125.3333"
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //吉祥物收起左右框
|
|
|
+ indent() {
|
|
|
+ let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
+ list[list.length - 1].style.display = 'none'
|
|
|
+ if (this.indentStyle == '') {
|
|
|
+ this.indentStyle = 'indent-style'
|
|
|
+ this.indentleft = 'indent-left'
|
|
|
+ this.indentright = 'indent-right'
|
|
|
+ this.indentText = '展开左右栏'
|
|
|
+ } else if (this.indentText == '展开左右栏') {
|
|
|
+ this.indentStyle = ''
|
|
|
+ this.indentleft = ''
|
|
|
+ this.indentright = ''
|
|
|
+ this.indentText = '收起左右栏'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ 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=='1'){
|
|
|
+ getDahuaVideoServer().then(newResponse => {
|
|
|
+ console.log(newResponse)
|
|
|
+ this.ws.detectConnectQt().then(res => {
|
|
|
+ if (res) { // 连接客户端成功
|
|
|
+ this.alertLogin()
|
|
|
+ this.ws.login({
|
|
|
+ loginIp: newResponse.loginIp,
|
|
|
+ loginPort: newResponse.loginPort,
|
|
|
+ userName: newResponse.userName,
|
|
|
+ userPwd: newResponse.userPwd,
|
|
|
+ token: '',
|
|
|
+ https: 1
|
|
|
+ })
|
|
|
+ this.ws.on('loginState', (res) => {
|
|
|
+ this.isLogin = res
|
|
|
+ console.log('---res-----', res)
|
|
|
+ if (res) {
|
|
|
+ this.alertLoginSuccess()
|
|
|
+ this.activePanel = 'key2'
|
|
|
+ this.realTimeVideoDialog(cameraParam.code)
|
|
|
+ } else {
|
|
|
+ this.alertLoginFailed()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 连接客户端失败
|
|
|
+ this.alertReinstall()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }else if(cameraParam.type=='0'){
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ /** ----------------------------------海康摄像头预览结束------------------------------------- */
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 推送消息
|
|
|
+function cbIntegrationCallBack(oData) {
|
|
|
+ console.log(JSON.stringify(oData.responseMsg))
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
+
|
|
|
+.playWnd {
|
|
|
+ margin: 4px 0 0 8px;
|
|
|
+ width: 1020px; /*播放容器的宽和高设定*/
|
|
|
+ height: 600px;
|
|
|
+ border: 1px solid red;
|
|
|
+}
|
|
|
+</style>
|
