suzhou-jichuang-lanhai
/
JiangningUrbanManagePc
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加厂中厂园中园图层、监控视频图层增加分类筛选

Browse Source
prodLv
吕天方 4 months ago
parent 988f5784ec
commit fa8c0c9e54
6 changed files with 426 additions and 126 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape View File

@ -2,7 +2,7 @@
# @Author: 张涛
# @Date: 2023-11-09 18:29:41
# @LastEditors: JC9527
# @LastEditTime: 2024-09-22 05:39:52
# @LastEditTime: 2024-10-15 10:27:32
# @FilePath: \JiangningUrbanManagePc\.env.development
###
# 页面标题

42
src/api/bigScreenApi/index.js
Unescape View File

@ -22,15 +22,33 @@ export function getVideoPageEq(params) {
params
})
}
// 获取流URL
export function getPreviewURLs(params) {
// 厂中厂园中园监控
export function DeviceListNewRequest(params) {
return request({
url: "/jn/vcp/DeviceListNewRequest",
method:'get',
params
})
}
// 获取视频流
export function getDeviceMediaUrlHls(params){
return request({
url: "/jn/video/previewURLs",
url: "/jn/vcp/getDeviceMediaUrlHls",
method:'get',
params
})
}
// 获取流URL
// export function getPreviewURLs(params) {
// return request({
// url: "/jn/video/previewURLs",
// method:'get',
// params
// })
// }
// 终端设备坐标采集、在线状态接口
export function getDeviceList(params) {
return request({
@ -140,6 +158,24 @@ export function getUserinfo(params){
// }
})
}
// 视频监控获取
export function getVideoDevice(params) {
return request({
baseURL: process.env.VUE_APP_BASE_API2,
url: "/biz/VideoDevice/page",
method:'get',
params,
})
}
// 视频url获取
export function getPreviewURLs(params) {
return request({
baseURL: process.env.VUE_APP_BASE_API2,
url: "/videoSpnl/previewURLs",
method:'get',
params,
})
}
// 事件列表查询
export function getQueryViewListPage(params,data) {

BIN
src/assets/images/icon7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

26
src/assets/styles/amap.scss
Unescape View File

@ -20,6 +20,32 @@
background-image: url('../images/personInfo.png');
background-size: 100% 100%;
margin-bottom: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tag {
display: flex;
// grid-template-columns: 1fr,1fr;
// column-gap: 5px;
background-image: url('../images/personInfo.png');
background-size: 100% 100%;
span {
color: #ffb300;
// background-color: rgba(255,179,0,0.3);
font-size: 12px;
line-height: 20px;
// padding: 5px;
display: flex;
justify-content: center;
width: 40px;
&:nth-of-type(2) {
margin-left: 5px;
}
&:nth-of-type(2) {
margin-left: 5px;
}
}
}
img {
// width: 54px;

4
src/utils/request.js
Unescape View File

@ -132,11 +132,11 @@ service.interceptors.response.use(res => {
}
},
error => {
console.log('err' + error)
// console.log('err' + error)
let { message } = error;
const originalRequest = error.config;
// console.log(originalRequest,'originalRequest');
console.log(error.response.status,'error.response.status');
// console.log(error.response.status,'error.response.status');
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {

458
src/views/bigScreen/map/index.vue
Unescape View File

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2024-01-09 23:08:15
* @LastEditors: JC9527
* @LastEditTime: 2024-09-24 11:11:17
* @LastEditTime: 2024-10-15 11:16:00
-->
<template>
<div class="map-main">
@ -39,12 +39,15 @@
<!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
<!-- marker标记点 -->
<el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
<!-- <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
<div class="markerStyles">
<div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
<div class="tag">
<span></span>
</div>
<img :src="marker.imgSrc" alt="">
</div>
</el-amap-marker>
</el-amap-marker> -->
<!-- 人员信息弹框 -->
<el-amap-info-window
@ -216,15 +219,15 @@
<div class="dot"></div>
<div class="name">点位名称：</div>
</div>
<div class="position">{{ monitoringInfo.info.name }}</div>
<div class="position">{{ monitoringInfo.info.name || monitoringInfo.info.deviceName }}</div>
</div>
<div class="person-info">
<!-- <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> -->
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
@ -336,6 +339,15 @@
<img src="@/assets/images/createdTask.png" alt="" />
</div>
</div>
<div class="monitoring-switch" v-if="!MyInput && actionMap == 4">
<div class="switchItems" v-for="(item,index) in switches" :key="index">
<el-switch
v-model="item.active"
@change="handleSwitchChange(index,item.id)">
</el-switch>
<div class="monitoring-type">{{ item.title }}</div>
</div>
</div>
<div
class="middle-bottom-left"
:class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
@ -380,6 +392,14 @@
<span>监控视频</span>
</div>
</div>
<div class="list" @click="changeMap(6)">
<div class="leftbg" :class="actionMap == 6 ? 'action-map' : ''">
<img class="images" src="@/assets/images/icon7.png" alt="" />
</div>
<div class="rightbg rightbgTwo" v-show="actionMap == 6">
<span>厂中厂园中园监控</span>
</div>
</div>
<div class="list" @click="changeMap(5)">
<div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
<img src="@/assets/images/icon6.png" alt="" />
@ -521,7 +541,10 @@ import {
listZhzz,
getUserByImei,
dwgjList,
onlinePeople
onlinePeople,
DeviceListNewRequest,
getDeviceMediaUrlHls,
getVideoDevice
} from "@/api/bigScreenApi";
import {
previewURLs,
@ -558,6 +581,11 @@ export default {
componentMarker: {
visible: true,
},
switches: [
{ active: true, title: "视频监控", id: 1 },
{ active: false, title: "算法监控", id: 2 },
{ active: false, title: "自建监控", id: 3 },
],
// 所有点位信息
markers:[],
// 人员弹框信息
@ -875,7 +903,10 @@ export default {
},
// 视频非聚合自定义样式及点击事件
_renderMarker (context) {
var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
// ${<span v-for="(item,index) in context.data[0].info.videoTagsList">item.name</span>}
// ${context.data[0].info.videoTagsList?.map(item => `<span>${item.name}</span>`).join('')}
// var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
var content = `<div class="markerStyles"><div class="tag">${context.data[0].info.videoTagsList?.map(item => `<span>${item.name}</span>`).join('')}</div><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-13.5, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
@ -885,6 +916,27 @@ export default {
this.monitoringInfo.visible = true;
})
},
// 厂中厂园中园视频非聚合自定义样式及点击事件
_renderMarkerTwo (context) {
// ${context.data[0].info.deviceName.length * 17}
var content = `<div class="markerStyles"><div class="marker-Text" style="width:85px">${context.data[0].info.deviceName}</div><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
var offset = new AMap.Pixel(-32.5, -48.5);
context.marker.setContent(content)
context.marker.setOffset(offset)
context.marker.on('click',(ev)=>{
// this.monitoringInfo.position = context.data[0].position;
// this.monitoringInfo.info = context.data[0].info;
// this.monitoringInfo.visible = true;
getDeviceMediaUrlHls({deviceCode:this.monitoringInfo.info.deviceCode}).then(res=>{
if(res.url) {
this.$refs.aloneVideo.open(res.url);
}
// else {
// this.$modal.msgError(res.msg);
// }
})
})
},
// 店铺非聚合自定义样式及点击事件
_DrenderMarker(context) {
// <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div>
@ -935,7 +987,6 @@ export default {
textColor:"#FFFFFF",
textSize:14
}];
this.markers = [];
this.mapLoading = status ? false : true;
if(id == 1) {
this.personLine = [];
@ -957,7 +1008,6 @@ export default {
obj.imgSrc = element.status;
obj.userId = element.userId;
obj.info = element;
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
@ -978,16 +1028,6 @@ export default {
this.mapLoading = false;
})
} else if(id == 2) {
// 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 = element.properties.status == "0"? offIcon2 : ico2;
// this.markers.push(obj)
// this.mapLoading = false;
// }
// })
listpatrol({current:1,size:1000}).then(res=>{
this.mapLoading = false;
if(res.code == 200) {
@ -1013,7 +1053,6 @@ export default {
obj.imgSrc = ico2;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
})
this.count = this.videoPoint.length;
@ -1028,60 +1067,7 @@ export default {
})
}
})
// let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
// ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
// this.mapLoading = false;
// if(res.code == 200) {
// this.videoPoint = [];
// res.result.records.forEach((element)=>{
// let obj = {position:[]};
// let location = element.location?.split(',');
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// if(location) {
// obj.position[0] = location[0];
// obj.position[1] = location[1];
// // let lonLat = this.wgs84togcj02(location[0],location[1]);
// // obj.position[0] = lonLat ? lonLat[0] : 0;
// // obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.lnglat = new AMap.LngLat(location.length > 0 ? location[0] : 0 ,location.length > 0 ? location[1] : 0)
// // obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0)
// } else {
// obj.position[0] = 0;
// obj.position[1] = 0;
// }
// obj.imgSrc = ico2;
// obj.info = element
// // this.markers.push(obj)
// this.videoPoint.push(obj)
// })
// this.count = this.videoPoint.length;
// AMap.plugin(['AMap.MarkerCluster'],()=>{
// this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
// gridSize: 60, // 设置网格像素大小
// maxZoom: 17,
// styles: sts,
// // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
// renderMarker: this._eventMarker, // 自定义非聚合点样式
// })
// })
// }
// })
} else if(id == 3){
// 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 = element.properties.status == "0"? offIcon3 : ico4;
// obj.text = element.properties.name;
// this.markers.push(obj)
// this.mapLoading = false;
// }
// })
getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
// console.log('车辆',res);
this.carLine = res.rows
@ -1111,29 +1097,54 @@ export default {
renderMarker: this._carMarker, // 自定义非聚合点样式
})
})
// res.rows.forEach(element => {
// let obj = {position:[]};
// obj.position[0] = element.longitude;
// obj.position[1] = element.latitude;
// obj.imgSrc = ico6;
// obj.info = element;
// this.markers.push(obj)
// this.mapLoading = false;
// })
}).catch(err=>{
this.mapLoading = false;
})
} else if(id == 4){
getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
// getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
// this.mapLoading = false;
// // console.log(res,"res");
// this.videoPoint = [];
// res.data.forEach((element)=>{
// let obj = {position:[]};
// let lonLat;
// if(element.longitude && element.latitude) {
// lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// }
// // obj.position[0] = element.longitude;
// obj.position[0] = lonLat ? lonLat[0] : 0;
// // obj.position[1] = element.latitude;
// obj.position[1] = lonLat ? lonLat[1] : 0;
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
// obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
// obj.imgSrc = ico5;
// obj.info = element
// // this.markers.push(obj)
// this.videoPoint.push(obj)
// })
// this.count = this.videoPoint.length;
// AMap.plugin(['AMap.MarkerCluster'],()=>{
// this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
// gridSize: 60, // 设置网格像素大小
// maxZoom: 15,
// styles: sts,
// // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
// renderMarker: this._renderMarker, // 自定义非聚合点样式
// })
// })
// }).catch(err=>{
// this.$modal.msgError(err);
// this.mapLoading = false;
// })
getVideoDevice({current:1,size:-1}).then(res=>{
this.mapLoading = false;
// console.log(res,"res");
this.videoPoint = [];
res.data.forEach((element)=>{
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
}
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
@ -1145,6 +1156,7 @@ export default {
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
@ -1161,16 +1173,6 @@ export default {
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;
// }
// })
getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
this.videoPoint = [];
this.mapLoading = false;
@ -1200,6 +1202,40 @@ export default {
}).catch(err=>{
this.mapLoading = false;
})
} else if(id == 6) {
DeviceListNewRequest({pageSize:200}).then(res=>{
this.mapLoading = false;
// console.log(res,"res");
this.videoPoint = [];
res.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarkerTwo, // 自定义非聚合点样式
})
})
})
}
},
// 点位点击事件
@ -1394,20 +1430,38 @@ export default {
},
// 监控视频上墙
monitorVideos(status){
// this.$refs.aloneVideo.open(`http://liveplay.vaas.cn-yangzhou-1.ctyunxs.cn/vaas/live/3210000110004_32011502021322002389_live_1/hls.m3u8?auth_key=1728613840-588c71701551402588dcac5d76d4f910-30003-cef7053299ba90ef96453528cba0fc7f`);
// this.$refs.videoWall.open();
if(status == 1) { // expand:"transcode=1"
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,streamType:"1",transmode:"1"}).then(res=>{
if(res.code == 200) {
// console.log(res,'视频地址获取');
// this.$refs.aloneVideo.open(res.msg);
let videoUrl = res.msg;
var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
}
})
} else {
this.$modal.msgError("该设备已离线");
}
// if(status == 1) { // expand:"transcode=1"
// getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
// if(res.code == 200) {
// // console.log(res,'视频地址获取');
// // this.$refs.aloneVideo.open(res.msg);
// let videoUrl = res.msg;
// var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
// this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
// }
// })
if(this.actionMap == 4) {
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
// console.log(res,"res");
let url = JSON.parse(res.data)
// console.log(url,"url");
let videoUrl = url.data.url;
// var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
// console.log(code1,"code1");
// this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
this.$refs.aloneVideo.open(videoUrl);
})
}
// if(this.actionMap == 6) {
// getDeviceMediaUrlHls({deviceCode:this.monitoringInfo.info.deviceCode}).then(res=>{
// this.$refs.aloneVideo.open(res.url)
// })
// } else
// } else {
// this.$modal.msgError("该设备已离线");
// }
},
// 转发，复制视频地址
copyUrl(){
@ -2547,9 +2601,165 @@ export default {
this.markerOffset = new AMap.Pixel(-27, -94);
} else if (id == 5) {
this.markerOffset = new AMap.Pixel(-27, -94);
} else if (id == 6) {
this.MyInput = false;
this.markerOffset = new AMap.Pixel(-27, -94);
}
this.getMarkers(id);
},
// 视频切换
handleSwitchChange(index,id){
// 判断是否全部都未选，allInactive为true则判断active全部都为false
const allInactive = this.switches.every(switchItem => !switchItem.active);
if(allInactive) {
this.switches[index].active = true;
return;
}
this.switches.forEach((sw, i) => {
// 关闭其他开关
if (i !== index) {
sw.active = false;
}
});
// id 1:视频监控 2:算法监控 3:自建监控
// console.log(id);
this.getVideosType(id)
},
getVideosType(id){
this.mapLoading = true;
// 点聚合重置
if (this.cluster) {
this.cluster.setMap(null);
}
this.videoPoint = [];
let imgUrl = require("../../../assets/images/icon/green.png")
var sts = [{
url: imgUrl,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16),
textColor:"#FFFFFF",
textSize:14
}, {
url: imgUrl,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16),
textColor:"#FFFFFF",
textSize:14
}, {
url: imgUrl,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-18, -18),
textColor:"#FFFFFF",
textSize:14
}];
let ico5 = require("../../../assets/images/icon/icon5.png");
if(id == 1) {
getVideoDevice({current:1,size:-1}).then(res=>{
this.mapLoading = false;
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.$modal.msgError(err);
this.mapLoading = false;
})
} else if(id == 2) {
getVideoDevice({current:1,size:-1,videoTagId:"1836948995594969090"}).then(res=>{
this.mapLoading = false;
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.$modal.msgError(err);
this.mapLoading = false;
})
} else if(id == 3) {
getVideoDevice({current:1,size:-1,videoTagId:"1836949034303692802"}).then(res=>{
this.mapLoading = false;
res.data.records.forEach((element)=>{
let obj = {position:[]};
let lonLat;
if(element.longitude && element.latitude) {
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
// obj.position[0] = element.longitude;
obj.position[0] = lonLat ? lonLat[0] : 0;
// obj.position[1] = element.latitude;
obj.position[1] = lonLat ? lonLat[1] : 0;
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
// obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
obj.imgSrc = ico5;
obj.info = element
// this.markers.push(obj)
this.videoPoint.push(obj)
}
})
this.count = this.videoPoint.length;
AMap.plugin(['AMap.MarkerCluster'],()=>{
this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
gridSize: 60, // 设置网格像素大小
maxZoom: 15,
styles: sts,
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
renderMarker: this._renderMarker, // 自定义非聚合点样式
})
})
}).catch(err=>{
this.$modal.msgError(err);
this.mapLoading = false;
})
}
},
// 隐藏地图左侧
leftAnimation() {
setTimeout(() => {
@ -2880,6 +3090,27 @@ export default {
}
}
}
.monitoring-switch {
z-index: 600;
position: absolute;
left: 537px;
top: 10px;
// display: flex;
// flex-direction: column;
display: grid;
grid-template-columns: 1fr;
row-gap: 10px;
.switchItems {
display: flex;
flex-direction: column;
align-items: center;
// margin-bottom: 10px;
.monitoring-type {
color: #fff;
font-size: 12px;
}
}
}
.middle-top-left2 {
left: 67px;
}
@ -2909,6 +3140,9 @@ export default {
img {
width: 20px;
}
.images {
width: 30px;
}
}
.action-map {
background-image: url("../../../assets/images/iconbg1.png");
@ -2917,6 +3151,7 @@ export default {
padding-left: 6px;
margin-left: 2px;
background-image: url("../../../assets/images/right-icon.png");
background-repeat: no-repeat; /* 不平铺 */
width: 115px;
height: 36px;
display: flex;
@ -2930,6 +3165,9 @@ export default {
text-shadow: 0px 0px 5px #0077ff;
}
}
.rightbgTwo {
width: 145px;
}
}
}
.middle-bottom-left2 {

Write Preview
Loading…
Cancel
Save