|
|
|
|
@ -180,16 +180,36 @@
|
|
|
|
|
>
|
|
|
|
|
<div class="monitoring-popup">
|
|
|
|
|
<div class="monitoring-title">
|
|
|
|
|
<div class="title">{{ monitoringInfo.info.name }} {{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
|
|
|
|
|
<div class="title">{{ monitoringInfo.info.name }}</div>
|
|
|
|
|
<div class="mask" @click="markersClosePopup"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="monitoring">
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<img src="@/assets/images/play-circle-fill@2x.png" alt="" @click="playVideo(monitoringInfo.info.status)">
|
|
|
|
|
<div class="monitoring-list">
|
|
|
|
|
<div class="person-info">
|
|
|
|
|
<div class="info-left">
|
|
|
|
|
<div class="dot"></div>
|
|
|
|
|
<div class="name">监控点名称：</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="position">{{ monitoringInfo.info.name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="person-info">
|
|
|
|
|
<div class="info-left">
|
|
|
|
|
<div class="dot"></div>
|
|
|
|
|
<div class="name">在线状态：</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="person-info">
|
|
|
|
|
<div class="info-left">
|
|
|
|
|
<div class="dot"></div>
|
|
|
|
|
<div class="name">安装位置：</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="position">{{ monitoringInfo.info.installPlace }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btns">
|
|
|
|
|
<div class="btn" @click="monitorVideos">上墙</div>
|
|
|
|
|
<div class="btn">转发</div>
|
|
|
|
|
<div class="btn" @click="monitorVideos(monitoringInfo.info.status)">上墙</div>
|
|
|
|
|
<div class="btn" @click="copyUrl()">转发</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -374,7 +394,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<personage-track ref="personageTrack"></personage-track>
|
|
|
|
|
<crew-assign ref="crewAssign"></crew-assign>
|
|
|
|
|
<video-wall ref="videoWall"></video-wall>
|
|
|
|
|
<!-- <video-wall ref="videoWall"></video-wall> -->
|
|
|
|
|
<alone-video ref="aloneVideo"></alone-video>
|
|
|
|
|
<shop ref="shop" width="50%" title="商铺详情查看" />
|
|
|
|
|
<new-event ref="newEvent"></new-event>
|
|
|
|
|
@ -463,8 +483,7 @@ import {
|
|
|
|
|
getVideoPageEq,
|
|
|
|
|
getPreviewURLs,
|
|
|
|
|
getCarManageList,
|
|
|
|
|
getQueryViewListPage,
|
|
|
|
|
eventSaveData
|
|
|
|
|
getStreetShopList,
|
|
|
|
|
} from "@/api/bigScreenApi";
|
|
|
|
|
import flvjs from "flv.js";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
@ -604,7 +623,8 @@ export default {
|
|
|
|
|
this.layers.text = new AMap.OverlayGroup(); // 一级网格文本
|
|
|
|
|
this.layers.text1 = new AMap.OverlayGroup(); // 二级网格文本
|
|
|
|
|
this.layers.markers = new AMap.OverlayGroup(); // 监控视频markers
|
|
|
|
|
|
|
|
|
|
// this.layers.layer2.setzIndex(10);
|
|
|
|
|
// this.layers.layer3.setzIndex(9);
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
var geojson1 = new AMap.Polygon({
|
|
|
|
|
path:OneGJ02.features[0].geometry.coordinates[0][0],
|
|
|
|
|
@ -773,10 +793,14 @@ export default {
|
|
|
|
|
this.getQuyuGeoJson();
|
|
|
|
|
// 获取重点路段数据
|
|
|
|
|
this.getLuduanGeoJson();
|
|
|
|
|
|
|
|
|
|
// 修改图层组的层级在点击到围栏，区域，路段时监听网格时就能触发点击事件
|
|
|
|
|
// this.layers.layer2.setOptions({ zIndex: 100 });
|
|
|
|
|
// this.layers.layer3.setOptions({ zIndex: 99 });
|
|
|
|
|
this.layers.layer2.on('click', (e)=>{
|
|
|
|
|
// console.log(e,'this.layers.layer2的点击事件');
|
|
|
|
|
if(this.isPositioning) {
|
|
|
|
|
console.log(e,'eeeeeeee');
|
|
|
|
|
console.log(e.lnglat,'lnglat');
|
|
|
|
|
// console.log(e,'eeeeeeee');
|
|
|
|
|
var marker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
|
|
|
|
|
anchor: 'bottom-center',
|
|
|
|
|
@ -784,8 +808,12 @@ export default {
|
|
|
|
|
this.layers.layer4.addOverlay(marker);
|
|
|
|
|
map.add(this.layers.layer4)
|
|
|
|
|
let addressName
|
|
|
|
|
var lng = e.lnglat.lng + ''
|
|
|
|
|
var lat = e.lnglat.lat + ''
|
|
|
|
|
var lng = e.lnglat.lng + '';
|
|
|
|
|
var lat = e.lnglat.lat + '';
|
|
|
|
|
// let clickPoint = this.layers.layer2.getOverlays();
|
|
|
|
|
// for (var i = 0; i < clickPoint.length; i++) {
|
|
|
|
|
// console.log(clickPoint[i],'点击的地址');
|
|
|
|
|
// }
|
|
|
|
|
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
|
|
|
|
|
params:{
|
|
|
|
|
key: "5f4a2c045cffa20551a0300c31c1ee78",
|
|
|
|
|
@ -795,41 +823,11 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}).then(response=>{
|
|
|
|
|
// console.log(response,'response');
|
|
|
|
|
addressName = response.data.regeocode.aois[0].name;
|
|
|
|
|
console.log(addressName,'this.addressName');
|
|
|
|
|
addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
|
|
|
|
|
// console.log(addressName,'this.addressName');
|
|
|
|
|
if(this.layers.layer4) {
|
|
|
|
|
this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName});
|
|
|
|
|
this.isPositioning = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.layers.layer3.on('click', (e)=>{
|
|
|
|
|
if(this.isPositioning) {
|
|
|
|
|
console.log(e,'eeeeeeee');
|
|
|
|
|
console.log(e.lnglat,'lnglat');
|
|
|
|
|
var marker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
|
|
|
|
|
anchor: 'bottom-center',
|
|
|
|
|
})
|
|
|
|
|
this.layers.layer4.addOverlay(marker);
|
|
|
|
|
map.add(this.layers.layer4)
|
|
|
|
|
let addressName
|
|
|
|
|
var lng = e.lnglat.lng + ''
|
|
|
|
|
var lat = e.lnglat.lat + ''
|
|
|
|
|
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
|
|
|
|
|
params:{
|
|
|
|
|
key: "5f4a2c045cffa20551a0300c31c1ee78",
|
|
|
|
|
location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
|
|
|
|
|
extensions: 'all',
|
|
|
|
|
// batch: true,
|
|
|
|
|
}
|
|
|
|
|
}).then(response=>{
|
|
|
|
|
// console.log(response,'response');
|
|
|
|
|
addressName = response.data.regeocode.aois[0].name;
|
|
|
|
|
console.log(addressName,'this.addressName');
|
|
|
|
|
if(this.layers.layer4) {
|
|
|
|
|
this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName});
|
|
|
|
|
// e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
|
|
|
|
|
this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName,meshOccurs:e.target.getExtData().name});
|
|
|
|
|
this.isPositioning = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
@ -880,8 +878,6 @@ export default {
|
|
|
|
|
this.layers.text.show();
|
|
|
|
|
}
|
|
|
|
|
} else if(zoom > 13.2){
|
|
|
|
|
// 获取二级网格数据
|
|
|
|
|
// this.getWanggeGeoJson();
|
|
|
|
|
if(this.layers.layer2) {
|
|
|
|
|
this.layers.layer2.show();
|
|
|
|
|
this.layers.text1.hide();
|
|
|
|
|
@ -1299,41 +1295,59 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 4){
|
|
|
|
|
point.features.forEach((element)=>{
|
|
|
|
|
if (element.properties.name == "监控视频") {
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
|
|
obj.imgSrc = element.properties.status == "0" ? offIcon4 : ico5;
|
|
|
|
|
// obj.imgSrc = ico5;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// getVideoPageEq({pageNo:1,pageSize:50}).then(res=>{
|
|
|
|
|
// this.mapLoading = false;
|
|
|
|
|
// // console.log(res,"res");
|
|
|
|
|
// res.data.forEach((element)=>{
|
|
|
|
|
// let obj = {position:[]};
|
|
|
|
|
// obj.position[0] = element.longitude;
|
|
|
|
|
// obj.position[1] = element.latitude;
|
|
|
|
|
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
|
|
|
|
|
// obj.imgSrc = ico5;
|
|
|
|
|
// obj.info = element
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
// })
|
|
|
|
|
// }).catch(err=>{
|
|
|
|
|
// this.mapLoading = false;
|
|
|
|
|
// })
|
|
|
|
|
} else if(id == 5){
|
|
|
|
|
// point.features.forEach((element)=>{
|
|
|
|
|
// if (element.properties.name == "监控视频") {
|
|
|
|
|
// if (element.properties.name == "沿街商铺分布") {
|
|
|
|
|
// let obj = {position:[]};
|
|
|
|
|
// obj.position[0] = element.geometry.coordinates[0];
|
|
|
|
|
// obj.position[1] = element.geometry.coordinates[1];
|
|
|
|
|
// obj.imgSrc = ico5;
|
|
|
|
|
// obj.imgSrc = ico6;
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
// this.mapLoading = false;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
getVideoPageEq({pageNo:1,pageSize:50}).then(res=>{
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
// console.log(res,"res");
|
|
|
|
|
res.data.forEach((element)=>{
|
|
|
|
|
getStreetShopList({pageSize:20,pageNum:1}).then(res=>{
|
|
|
|
|
res.rows.forEach(element => {
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
obj.position[0] = element.longitude;
|
|
|
|
|
obj.position[1] = element.latitude;
|
|
|
|
|
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
|
|
|
|
|
obj.imgSrc = ico5;
|
|
|
|
|
obj.info = element
|
|
|
|
|
obj.imgSrc = ico6;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
})
|
|
|
|
|
}).catch(err=>{
|
|
|
|
|
this.$modal.msgError(err);
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 5){
|
|
|
|
|
point.features.forEach((element)=>{
|
|
|
|
|
if (element.properties.name == "沿街商铺分布") {
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
obj.position[0] = element.geometry.coordinates[0];
|
|
|
|
|
obj.position[1] = element.geometry.coordinates[1];
|
|
|
|
|
obj.imgSrc = ico6;
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// TODO:缩放地图获取新的监控点位
|
|
|
|
|
@ -1506,12 +1520,37 @@ export default {
|
|
|
|
|
} else {
|
|
|
|
|
this.$modal.msgError("该设备已离线");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 监控视频上墙
|
|
|
|
|
monitorVideos(){
|
|
|
|
|
this.$refs.videoWall.open();
|
|
|
|
|
monitorVideos(status){
|
|
|
|
|
// this.$refs.videoWall.open();
|
|
|
|
|
if(status == 1) {
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
// console.log(res,'视频地址获取');
|
|
|
|
|
this.$refs.aloneVideo.open(res.msg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.$modal.msgError("该设备已离线");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 转发，复制视频地址
|
|
|
|
|
copyUrl(){
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
// this.$refs.aloneVideo.open(res.msg);
|
|
|
|
|
var aux = document.createElement("input");
|
|
|
|
|
aux.setAttribute("value", res.msg);
|
|
|
|
|
document.body.appendChild(aux);
|
|
|
|
|
aux.select();
|
|
|
|
|
document.execCommand("copy");
|
|
|
|
|
document.body.removeChild(aux);
|
|
|
|
|
this.$modal.msgSuccess("视频地址已复制");
|
|
|
|
|
}
|
|
|
|
|
}).catch(error=>{
|
|
|
|
|
this.$modal.msgError(error);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 商铺详情查看
|
|
|
|
|
getShopInfo(){
|
|
|
|
|
@ -1531,6 +1570,9 @@ export default {
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
extData:{
|
|
|
|
|
name: element.properties.NAME
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
var text = new AMap.Text({
|
|
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
@ -1570,6 +1612,7 @@ export default {
|
|
|
|
|
var circle = new AMap.Circle({
|
|
|
|
|
center: shapeStr.features[0].geometry.coordinates,
|
|
|
|
|
radius: shapeStr.features[0].properties.radius,
|
|
|
|
|
bubble: true,
|
|
|
|
|
extData:{
|
|
|
|
|
id: '围栏polygon'
|
|
|
|
|
},
|
|
|
|
|
@ -1603,11 +1646,13 @@ export default {
|
|
|
|
|
this.map.add(this.layers.layer3);
|
|
|
|
|
element.myPolygon = circle;
|
|
|
|
|
element.text = text;
|
|
|
|
|
this.openClick(circle)
|
|
|
|
|
// this.map.add(text);
|
|
|
|
|
// 多边形围栏
|
|
|
|
|
} else if (shapeStr.features[0].geometry.type == "Polygon") {
|
|
|
|
|
var weilan = new AMap.Polygon({
|
|
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
|
|
bubble: true,
|
|
|
|
|
extData:{
|
|
|
|
|
id: '围栏polygon'
|
|
|
|
|
},
|
|
|
|
|
@ -1643,6 +1688,7 @@ export default {
|
|
|
|
|
this.map.add(this.layers.layer3);
|
|
|
|
|
element.myPolygon = weilan;
|
|
|
|
|
element.text = text;
|
|
|
|
|
this.openClick(weilan)
|
|
|
|
|
// this.map.add([wangge,text]);
|
|
|
|
|
// this.map.add(text);
|
|
|
|
|
}
|
|
|
|
|
@ -1657,6 +1703,7 @@ export default {
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
|
|
var quyu = new AMap.Polygon({
|
|
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
|
|
bubble: true,
|
|
|
|
|
strokeOpacity: 0,
|
|
|
|
|
strokeColor: '#FF0000',
|
|
|
|
|
fillColor: '#FF0000',
|
|
|
|
|
@ -1664,7 +1711,8 @@ export default {
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
extData:{
|
|
|
|
|
id: '区域polygon'
|
|
|
|
|
id: '区域polygon',
|
|
|
|
|
name: element.name
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
var text = new AMap.Text({
|
|
|
|
|
@ -1688,6 +1736,7 @@ export default {
|
|
|
|
|
this.layers.layer3.addOverlay(text)
|
|
|
|
|
this.layers.layer3.hide();
|
|
|
|
|
this.map.add(this.layers.layer3);
|
|
|
|
|
this.openClick(quyu)
|
|
|
|
|
// this.map.add([quyu,text]);
|
|
|
|
|
// this.map.add(text);
|
|
|
|
|
})
|
|
|
|
|
@ -1703,6 +1752,7 @@ export default {
|
|
|
|
|
// console.log(shapeStr,'shapeStrshapeStrshapeStr');
|
|
|
|
|
var luduan = new AMap.Polyline({
|
|
|
|
|
path:shapeStr.features[0].geometry.coordinates,
|
|
|
|
|
bubble: true,
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
strokeColor: '#46FF77',
|
|
|
|
|
editable:false,
|
|
|
|
|
@ -1726,11 +1776,59 @@ export default {
|
|
|
|
|
this.map.add(this.layers.layer3);
|
|
|
|
|
element.myPolyline = luduan;
|
|
|
|
|
element.text = text;
|
|
|
|
|
this.openClick(luduan)
|
|
|
|
|
// this.map.add([luduan,text]);
|
|
|
|
|
// this.map.add(text);
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 开启围栏，路段，区域的点击事件
|
|
|
|
|
openClick(layer){
|
|
|
|
|
layer.on('click',(e)=>{
|
|
|
|
|
// console.log(e,'区域的点击事件');
|
|
|
|
|
// console.log(this.map.getAllOverlays('circle','polyline','polygon'),'this.layers.layer2');
|
|
|
|
|
if(this.isPositioning) {
|
|
|
|
|
let latlng = e.lnglat
|
|
|
|
|
let name;
|
|
|
|
|
this.layers.layer2.eachOverlay((item)=>{
|
|
|
|
|
// console.log(item,'item');
|
|
|
|
|
if(item.getBounds().contains(latlng)){
|
|
|
|
|
name = item.getExtData().name
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
var marker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
|
|
|
|
|
anchor: 'bottom-center',
|
|
|
|
|
})
|
|
|
|
|
this.layers.layer4.addOverlay(marker);
|
|
|
|
|
this.map.add(this.layers.layer4)
|
|
|
|
|
let addressName
|
|
|
|
|
var lng = e.lnglat.lng + '';
|
|
|
|
|
var lat = e.lnglat.lat + '';
|
|
|
|
|
// let clickPoint = this.layers.layer2.getOverlays();
|
|
|
|
|
// for (var i = 0; i < clickPoint.length; i++) {
|
|
|
|
|
// console.log(clickPoint[i],'点击的地址');
|
|
|
|
|
// }
|
|
|
|
|
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
|
|
|
|
|
params:{
|
|
|
|
|
key: "5f4a2c045cffa20551a0300c31c1ee78",
|
|
|
|
|
location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
|
|
|
|
|
extensions: 'all',
|
|
|
|
|
// batch: true,
|
|
|
|
|
}
|
|
|
|
|
}).then(response=>{
|
|
|
|
|
// console.log(response,'response');
|
|
|
|
|
addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
|
|
|
|
|
// console.log(addressName,'this.addressName');
|
|
|
|
|
if(this.layers.layer4) {
|
|
|
|
|
// e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
|
|
|
|
|
this.$refs.newEvent.open({lnglat:latlng,address:addressName,meshOccurs:name});
|
|
|
|
|
this.isPositioning = false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 子组件的实时定位事件
|
|
|
|
|
realTimeLocationClick(item){
|
|
|
|
|
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
|
|
|
|
|
|
