|
|
@@ -26,6 +26,20 @@
|
|
|
<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>
|
|
|
@@ -59,7 +73,7 @@
|
|
|
<!-- 右侧 -->
|
|
|
<div class="rightbar" :class="indentright" ref="right">
|
|
|
<div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;"><!--height: 750px;-->
|
|
|
+ <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>
|
|
|
@@ -85,7 +99,7 @@
|
|
|
<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" @click="">
|
|
|
+ <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>
|
|
|
@@ -96,10 +110,10 @@
|
|
|
</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>
|
|
|
+<!-- <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>
|
|
|
@@ -118,7 +132,8 @@
|
|
|
import {
|
|
|
selectDeviceType,
|
|
|
selectCameraByDeptId,
|
|
|
- selectKeyAreaList
|
|
|
+ selectKeyAreaList,
|
|
|
+ getRegionalFlag
|
|
|
} from '@/api/monitor'
|
|
|
|
|
|
import supermap from '@/components/supermap' //超图
|
|
|
@@ -134,7 +149,7 @@ import {
|
|
|
import {
|
|
|
getHaiKangVideoServer
|
|
|
} from '@/api/haikang/haikang'
|
|
|
-// import DHWs from '@/dahua/lib/DHWs'
|
|
|
+import DHWs from '@/dahua/lib/DHWs'
|
|
|
|
|
|
/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
// import echarts from 'echarts'
|
|
|
@@ -150,8 +165,8 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
- // const DHWsInstance = DHWs.getInstance()
|
|
|
- // this.ws = DHWsInstance
|
|
|
+ const DHWsInstance = DHWs.getInstance()
|
|
|
+ this.ws = DHWsInstance
|
|
|
/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
|
|
|
/** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
@@ -161,7 +176,7 @@ export default {
|
|
|
/** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.selectDeviceType()
|
|
|
+ this.selectDeviceType(-1)
|
|
|
this.selectKeyAreaList()
|
|
|
},
|
|
|
data() {
|
|
|
@@ -169,6 +184,8 @@ export default {
|
|
|
iconCurrentIndex1: '-1',
|
|
|
listCurrentIndex1: '-1',
|
|
|
listCurrentIndex2: '-1',
|
|
|
+ listCurrentIndex3: '-1',
|
|
|
+ graphicsList:[],//重点区域
|
|
|
/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
//大华
|
|
|
activePanel: 'key1',
|
|
|
@@ -198,10 +215,43 @@ export default {
|
|
|
indentleft: '',
|
|
|
indentright: '',
|
|
|
indentText: '收起左右栏',
|
|
|
- indentdisabled: false
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
/** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
showDialog(click) {
|
|
|
if (click == 'eventLocation') {
|
|
|
@@ -296,7 +346,8 @@ export default {
|
|
|
}],
|
|
|
xAxis: {
|
|
|
show: false,
|
|
|
- type: 'value'
|
|
|
+ type: 'value',
|
|
|
+ left:10
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
@@ -369,19 +420,12 @@ export default {
|
|
|
}]
|
|
|
})
|
|
|
},
|
|
|
- selectKeyAreaList() {
|
|
|
- //获取重点区域
|
|
|
- let that = this;
|
|
|
- selectKeyAreaList().then(res => {
|
|
|
- that.keyAreaList = res
|
|
|
- })
|
|
|
- },
|
|
|
selectDeviceType(index) {
|
|
|
this.iconCurrentIndex1 = index
|
|
|
//获取左侧动态感知设备
|
|
|
let that = this
|
|
|
selectDeviceType().then(res => {
|
|
|
-
|
|
|
+ that.cameraMarkersList=[]
|
|
|
that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
|
|
|
|
|
|
that.region = res.data.visuForestCloudTodaySjfbBOList
|
|
|
@@ -411,17 +455,16 @@ export default {
|
|
|
keepBindPopup: false,
|
|
|
isAggregation: false
|
|
|
}
|
|
|
- if (res.data.visuForestCloudCameraBOList.length > 50) {
|
|
|
- markersMap.isAggregation = true
|
|
|
- }
|
|
|
if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
|
|
|
- markersMap.parameter = res.data.visuForestCloudCameraBOList[i].cameraCode
|
|
|
+ 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">' +
|
|
|
@@ -439,6 +482,22 @@ export default {
|
|
|
' </div>' +
|
|
|
' </div>' +
|
|
|
' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>摄像头类型：' + res.data.visuForestCloudCameraBOList[i]
|
|
|
+ .cameraFactory + '</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"
|
|
|
@@ -461,7 +520,7 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
that.$refs.supermap.clearM(true)
|
|
|
that.$refs.supermap.clearM(false)
|
|
|
- that.$refs.supermap.setMarkers(this.cameraMarkersList)
|
|
|
+ that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
|
|
|
}, 1000)
|
|
|
}
|
|
|
})
|
|
|
@@ -474,12 +533,10 @@ export default {
|
|
|
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 = {
|
|
|
@@ -492,17 +549,16 @@ export default {
|
|
|
keepBindPopup: false,
|
|
|
isAggregation: false
|
|
|
}
|
|
|
- if (res.data.length > 50) {
|
|
|
- markersMap.isAggregation = true
|
|
|
- }
|
|
|
if (res.data[i].channelCode != null) {
|
|
|
- markersMap.parameter = res.data[i].cameraCode
|
|
|
+ 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">' +
|
|
|
@@ -519,6 +575,22 @@ export default {
|
|
|
' </div>' +
|
|
|
' </div>' +
|
|
|
' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>摄像头类型：' + res.data[i]
|
|
|
+ .cameraFactory + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>摄像头半径：' + res.data[i]
|
|
|
+ .cameraRadius + '米</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
'</div>'
|
|
|
this.cameraMarkersList.push(markersMap)
|
|
|
// cameraAccount: "1"
|
|
|
@@ -541,7 +613,7 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
that.$refs.supermap.clearM(true)
|
|
|
that.$refs.supermap.clearM(false)
|
|
|
- that.$refs.supermap.setMarkers(this.cameraMarkersList)
|
|
|
+ that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
|
|
|
}, 1000)
|
|
|
}
|
|
|
})
|
|
|
@@ -585,45 +657,48 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
/** 预览按钮操作 */
|
|
|
- preview(cameraCode) {
|
|
|
- let that = this
|
|
|
- // getDahuaVideoServer().then(newResponse => {
|
|
|
- // console.log(newResponse)
|
|
|
- // this.ws.detectConnectQt().then(res => {
|
|
|
- // if (res) { // 连接客户端成功
|
|
|
- // this.alertLogin()
|
|
|
- // this.ws.login({
|
|
|
- // loginIp: newResponse.loginIp,
|
|
|
- // loginPort: newResponse.loginPort,
|
|
|
- // userName: newResponse.userName,
|
|
|
- // userPwd: newResponse.userPwd,
|
|
|
- // token: '',
|
|
|
- // https: 1
|
|
|
- // })
|
|
|
- // this.ws.on('loginState', (res) => {
|
|
|
- // this.isLogin = res
|
|
|
- // console.log('---res-----', res)
|
|
|
- // if (res) {
|
|
|
- // this.alertLoginSuccess()
|
|
|
- // this.activePanel = 'key2'
|
|
|
- // this.realTimeVideoDialog(channelCode)
|
|
|
- // } else {
|
|
|
- // this.alertLoginFailed()
|
|
|
- // }
|
|
|
- // })
|
|
|
- // } else { // 连接客户端失败
|
|
|
- // this.alertReinstall()
|
|
|
- // }
|
|
|
- // })
|
|
|
- // })
|
|
|
- that.cameraVisible = true
|
|
|
- getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
|
|
|
- that.cameraTitle = '摄像头-'+newResponse.data.cameraName
|
|
|
- that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
|
|
|
- setTimeout(function() {
|
|
|
- that.playhk(newResponse.data.channelCode)
|
|
|
- }, 5000)
|
|
|
- })
|
|
|
+ preview(cameraParam) {
|
|
|
+ if(cameraParam.type=='大华'){
|
|
|
+ getDahuaVideoServer().then(newResponse => {
|
|
|
+ console.log(newResponse)
|
|
|
+ this.ws.detectConnectQt().then(res => {
|
|
|
+ if (res) { // 连接客户端成功
|
|
|
+ this.alertLogin()
|
|
|
+ this.ws.login({
|
|
|
+ loginIp: newResponse.loginIp,
|
|
|
+ loginPort: newResponse.loginPort,
|
|
|
+ userName: newResponse.userName,
|
|
|
+ userPwd: newResponse.userPwd,
|
|
|
+ token: '',
|
|
|
+ https: 0
|
|
|
+ })
|
|
|
+ this.ws.on('loginState', (res) => {
|
|
|
+ this.isLogin = res
|
|
|
+ console.log('---res-----', res)
|
|
|
+ if (res) {
|
|
|
+ this.alertLoginSuccess()
|
|
|
+ this.activePanel = 'key2'
|
|
|
+ this.realTimeVideoDialog(cameraParam.code)
|
|
|
+ } else {
|
|
|
+ this.alertLoginFailed()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 连接客户端失败
|
|
|
+ this.alertReinstall()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }else if(cameraParam.type=='海康'){
|
|
|
+ let that = this
|
|
|
+ that.cameraVisible = true
|
|
|
+ getHaiKangVideoServer({cameraCode:cameraParam.code}).then(newResponse => {
|
|
|
+ that.cameraTitle = '摄像头-'+newResponse.data.cameraName
|
|
|
+ that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
|
|
|
+ setTimeout(function() {
|
|
|
+ that.playhk(newResponse.data.channelCode)
|
|
|
+ }, 5000)
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
|
|
|
@@ -631,7 +706,8 @@ export default {
|
|
|
this.$Message.info('正在登陆客户端，请稍等......')
|
|
|
return false
|
|
|
}
|
|
|
- this.ws.openVideo(cameraParams)
|
|
|
+ const params = [cameraParams];
|
|
|
+ this.ws.openVideo(params)
|
|
|
},
|
|
|
/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
|
|
|
@@ -661,7 +737,7 @@ export default {
|
|
|
},
|
|
|
cbConnectError: function() { // 创建WebControl实例失败
|
|
|
that.oWebControl = null
|
|
|
- $('#playWnd').html('插件未启动，正在尝试启动，请稍候...')
|
|
|
+ $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
|
|
|
WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
|
|
|
initCount++
|
|
|
if (initCount < 3) {
|
|
|
@@ -669,7 +745,7 @@ export default {
|
|
|
that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
|
|
|
}, 3000)
|
|
|
} else {
|
|
|
- $('#playWnd').html('插件启动失败，请检查插件是否安装！')
|
|
|
+ $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
|
|
|
}
|
|
|
},
|
|
|
cbConnectClose: function(bNormalClose) {
|
|
|
@@ -778,14 +854,13 @@ function cbIntegrationCallBack(oData) {
|
|
|
</script>
|
|
|
|
|
|
|
|
|
-
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
|
|
|
- .playWnd {
|
|
|
- margin: 4px 0 0 8px;
|
|
|
- width: 1020px; /*播放容器的宽和高设定*/
|
|
|
- height: 600px;
|
|
|
- border: 1px solid red;
|
|
|
- }
|
|
|
+.playWnd {
|
|
|
+ margin: 4px 0 0 8px;
|
|
|
+ width: 1020px; /*播放容器的宽和高设定*/
|
|
|
+ height: 600px;
|
|
|
+ border: 1px solid red;
|
|
|
+}
|
|
|
</style>
|
