|
|
@@ -1,133 +1,363 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%">
|
|
|
- <div class="event-info">
|
|
|
- <div class="event-info-top">
|
|
|
- <el-form>
|
|
|
- <div class="event-info-top-grp">
|
|
|
- <el-input placeholder="输入经度" v-model="input1" clearable>
|
|
|
- </el-input>
|
|
|
- <el-input placeholder="输入纬度" v-model="input2" clearable>
|
|
|
- </el-input>
|
|
|
- <el-button type="success" @click="" size="mini">定位</el-button>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="event-info-con">
|
|
|
- <div class="e-location-left">
|
|
|
- <el-tabs v-model="activeName" @tab-click="" stretch="true">
|
|
|
- <el-tab-pane label="事件" name="event">
|
|
|
- <div class="forthis">
|
|
|
- <div class="i-list-con overflow-y" style="height: 50vh;">
|
|
|
- <div class="d-l-con d-evnet-list-con" v-for="(item,index) in 10">
|
|
|
- <!-- <img :src="" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img"> -->
|
|
|
- <img src="@/assets/images/visual/img-sample.png" class="event-list-img">
|
|
|
- <div class="event-list-text">
|
|
|
- <h3>山东良凤江爱仕达六块腹肌</h3>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="探头" name="monitor">
|
|
|
- <div class="forthis">
|
|
|
- <div class="i-list-con overflow-y" style="height: 50vh;">
|
|
|
- <span v-for="(item,index) in 10">
|
|
|
+ <div>
|
|
|
+ <el-dialog title="事件定位" :visible.sync="eventLocationVisible" v-if="eventLocationVisible" width="80%">
|
|
|
+ <div class="event-info">
|
|
|
+ <div class="event-info-top">
|
|
|
+ <el-form>
|
|
|
+ <div class="event-info-top-grp">
|
|
|
+ <el-input placeholder="输入经度" v-model="longitude">
|
|
|
+ </el-input>
|
|
|
+ <el-input placeholder="输入纬度" v-model="latitude">
|
|
|
+ </el-input>
|
|
|
+ <el-button type="success" size="mini" @click="getNearEvent()">定位</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="event-info-con">
|
|
|
+ <div class="e-location-left">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="事件" name="event">
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="i-list-con overflow-y" style="height: 50vh;">
|
|
|
+ <div class="d-l-con d-evnet-list-con" v-for="(item,index) in eventList" v-on:click="dropLocation(item.latitude,item.longitude)">
|
|
|
+ <!-- <img :src="" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img"> -->
|
|
|
+ <img :src="item.picturePath" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img">
|
|
|
+ <img src="@/assets/images/visual/img-sample.png" v-else class="event-list-img">
|
|
|
+ <div class="event-list-text">
|
|
|
+ <h3>{{item.eventTitle}}</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="探头" name="monitor">
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="i-list-con overflow-y" style="height: 50vh;">
|
|
|
+ <span v-for="(item,index) in cameraList" v-on:click="dropLocation(item.latitude,item.longitude)">
|
|
|
<div class="d-l-con" @click="">
|
|
|
<div class="d-l-l-text">
|
|
|
<i class="iconfont sj-icon-jkzx icon-sxt"></i>
|
|
|
- <h4>爱仕达asdasd</h4>
|
|
|
+ <h4>{{item.cameraName}}</h4>
|
|
|
</div>
|
|
|
</div>
|
|
|
</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
- <div class="e-location-right" style="height: 57.8vh;background-color:black;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="e-location-right" style="height: 57.8vh;">
|
|
|
+ <!-- 地图 -->
|
|
|
+ <eventLocationSupermap ref="eventLocationSupermap" style="width: 100%;height: 57.8vh;" :mapDiv="'eventLocationMap'" :mapSite="{doubleClickZoom:false,zoom:8}" :codes="['9fa5']" :isSideBySide="false" @preview="preview"></eventLocationSupermap>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- eventLocationVisible: false,
|
|
|
- input1: '',
|
|
|
- input2: '',
|
|
|
- activeName:'event'
|
|
|
+ import {
|
|
|
+ getNearEvent, getNearCamera
|
|
|
+ } from '@/api/event'
|
|
|
+
|
|
|
+ import eventLocationSupermap from '@/components/supermap' //超图
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ import {getDahuaVideoServer} from "@/api/dahua/dahua";
|
|
|
+ import DHWs from '@/dahua/lib/DHWs'
|
|
|
+
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ eventLocationSupermap,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ eventLocationVisible: false,
|
|
|
+ longitude: '',
|
|
|
+ latitude: '',
|
|
|
+ activeName:'event',
|
|
|
+ eventList: [],
|
|
|
+ markersList: [],
|
|
|
+ cameraList:[],
|
|
|
+ cameraMarkersList:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ const DHWsInstance = DHWs.getInstance();
|
|
|
+ this.ws = DHWsInstance;
|
|
|
+ console.log(this.ws);
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getNearEvent(){
|
|
|
+ this.activeName = 'event';
|
|
|
+ let marker = [{
|
|
|
+ lng: this.longitude,
|
|
|
+ lat: this.latitude,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '定位',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: true,
|
|
|
+ isAggregation: true
|
|
|
+ }]
|
|
|
+ let that=this;
|
|
|
+ getNearEvent(this.longitude,this.latitude).then(res => {
|
|
|
+ that.markersList = [];
|
|
|
+ that.eventList = [];
|
|
|
+ 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: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if(res.data.length>50){
|
|
|
+ markersMap.isAggregation = true
|
|
|
+ }
|
|
|
+ if(res.data[i].eventStatus=="event_event_status_1"||res.data[i].eventStatus=="event_event_status_2"||res.data[i].eventStatus=="event_event_status_6"){
|
|
|
+ markersMap.click = "showEventInfo_Processed"
|
|
|
+ }else if(res.data[i].eventStatus=="event_event_status_4"){
|
|
|
+ markersMap.click = "showEventInfo_notProcessed"
|
|
|
+ }
|
|
|
+ markersMap.parameter = res.data[i].id
|
|
|
+ markersMap.lng = res.data[i].longitude
|
|
|
+ markersMap.lat =res.data[i].latitude
|
|
|
+ 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].eventTitle + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' +res.data[i].reportTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '</div>';
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ that.eventList=res.data;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.eventLocationSupermap.clearM(true)
|
|
|
+ that.$refs.eventLocationSupermap.clearM(false)
|
|
|
+ that.$refs.eventLocationSupermap.setMarkers(that.markersList)
|
|
|
+ that.$refs.eventLocationSupermap.setMarkers(marker)
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ let that=this
|
|
|
+ let marker = [{
|
|
|
+ lng: this.longitude,
|
|
|
+ lat: this.latitude,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '定位',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: true,
|
|
|
+ isAggregation: true
|
|
|
+ }]
|
|
|
+ if (tab.name == 'monitor') {
|
|
|
+ that.cameraMarkersList=[];
|
|
|
+ that.cameraList =[];
|
|
|
+ getNearCamera(this.longitude,this.latitude).then(res => {
|
|
|
+ debugger
|
|
|
+ //根据设备类型查看列表
|
|
|
+ that.cameraList = res.data
|
|
|
+
|
|
|
+ if (res.data != null && res.data.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'camera',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: 'preview',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (res.data.length > 50) {
|
|
|
+ markersMap.isAggregation = true
|
|
|
+ }
|
|
|
+ if(res.data[i].channelCode!=null){
|
|
|
+ markersMap.parameter = res.data[i].channelCode.split(',')
|
|
|
+ }else{
|
|
|
+ markersMap.parameter = []
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showEventLocation() {
|
|
|
- this.eventLocationVisible = true
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ markersMap.lng = res.data[i].longitude
|
|
|
+ markersMap.lat = res.data[i].latitude
|
|
|
+ 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>' +
|
|
|
+ '</div>'
|
|
|
+ this.cameraMarkersList.push(markersMap)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.eventLocationSupermap.clearM(true)
|
|
|
+ that.$refs.eventLocationSupermap.clearM(false)
|
|
|
+ that.$refs.eventLocationSupermap.setMarkers(this.cameraMarkersList)
|
|
|
+ that.$refs.eventLocationSupermap.setMarkers(marker)
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ that.getNearEvent()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dropLocation(lat,lng) {
|
|
|
+ this.$refs.eventLocationSupermap.dropLocation(lat,lng)
|
|
|
+ },
|
|
|
+ showEventLocation() {
|
|
|
+ this.eventLocationVisible = true
|
|
|
+ },
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ alertLogin: function () {
|
|
|
+ this.$modal.msg("登录中....");
|
|
|
+ },
|
|
|
+ alertLoginSuccess: function () {
|
|
|
+ this.$modal.msgSuccess("登录成功！");
|
|
|
+ },
|
|
|
+ alertLoginFailed: function () {
|
|
|
+ this.$modal.msgError("登陆失败！");
|
|
|
+ },
|
|
|
+ alertReinstall: function () {
|
|
|
+ this.$modal.msgWarning("请重新安装客户端");
|
|
|
+ },
|
|
|
+ /** 预览按钮操作 */
|
|
|
+ preview(channelCode) {
|
|
|
+ getDahuaVideoServer().then(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();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
|
|
|
+ if (!this.isLogin) {
|
|
|
+ this.$Message.info('正在登陆客户端，请稍等......');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.ws.openVideo(cameraParams);
|
|
|
+ },
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
- .el-dialog:not(.is-fullscreen){
|
|
|
- margin-top: 5.5vh !important;
|
|
|
- }
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+ .el-dialog:not(.is-fullscreen){
|
|
|
+ margin-top: 5.5vh !important;
|
|
|
+ }
|
|
|
|
|
|
- .bottom-menu-normal {
|
|
|
- max-width: 90%;
|
|
|
- padding: 0 3rem;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 0;
|
|
|
- z-index: 100000;
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- overflow: hidden;
|
|
|
+ .bottom-menu-normal {
|
|
|
+ max-width: 90%;
|
|
|
+ padding: 0 3rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100000;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .btm-m-con {
|
|
|
- position: relative;
|
|
|
- color: $inBlue;
|
|
|
- font-size: .5rem;
|
|
|
- padding: 1rem 1.5rem;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- -webkit-transform: translateY(0);
|
|
|
- transform: translateY(0);
|
|
|
- transition: all 0.2s ease-in-out;
|
|
|
- cursor: pointer;
|
|
|
- white-space: nowrap;
|
|
|
+ .btm-m-con {
|
|
|
+ position: relative;
|
|
|
+ color: $inBlue;
|
|
|
+ font-size: .5rem;
|
|
|
+ padding: 1rem 1.5rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ transform: translateY(0);
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
|
|
|
- i {
|
|
|
- font-size: 1rem;
|
|
|
- color: $inBlue;
|
|
|
- text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
|
|
|
- margin-right: 0.2rem;
|
|
|
- }
|
|
|
- }
|
|
|
+ i {
|
|
|
+ font-size: 1rem;
|
|
|
+ color: $inBlue;
|
|
|
+ text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
|
|
|
+ margin-right: 0.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .btm-m-con:hover {
|
|
|
- text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
- filter: brightness(2.3);
|
|
|
- -webkit-transform: translateX(0.2rem);
|
|
|
- transform: translateX(0.2rem);
|
|
|
- transition: all 0.2s ease-in-out;
|
|
|
+ .btm-m-con:hover {
|
|
|
+ text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
+ filter: brightness(2.3);
|
|
|
+ -webkit-transform: translateX(0.2rem);
|
|
|
+ transform: translateX(0.2rem);
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
|
|
|
- i {
|
|
|
- color: $inBlueHover;
|
|
|
- text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
- }
|
|
|
- }
|
|
|
+ i {
|
|
|
+ color: $inBlueHover;
|
|
|
+ text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
</style>
|
