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

点位变动修改

Browse Source
dhy
吕天方 2 years ago
parent dffe6f7c48
commit b94cd38d2d
4 changed files with 87 additions and 59 deletions
Show Stats Download Patch File Download Diff File

2
src/assets/styles/leaflet.scss
Unescape View File

@ -171,7 +171,7 @@
} }
// 执法车辆 // 执法车辆
.car-popup { .car-popup {
width: 242px; width: 262px;
height: 138px; height: 138px;
background-image: url("../images/popup/bg3.png"); background-image: url("../images/popup/bg3.png");
background-size: 100% 100%; background-size: 100% 100%;

18
src/views/bigScreen/components/mapRightContent.vue
Unescape View File

@ -4,7 +4,7 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-08-15 11:09:57 * @Date: 2023-08-15 11:09:57
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2023-08-18 11:02:13 * @LastEditTime: 2023-08-18 18:42:16
--> -->
<template> <template>
<div class="right-box"> <div class="right-box">
@ -99,13 +99,15 @@ export default {
methods:{ methods:{
getDomHeight(){ getDomHeight(){
this.$nextTick(()=>{ this.$nextTick(()=>{
let dom = document.getElementsByClassName('right-box'); if(document.getElementsByClassName('right-box')) {
let height = dom[0].getBoundingClientRect(); let dom = document.getElementsByClassName('right-box');
let windowWidth = window.innerWidth; let height = dom[0].getBoundingClientRect();
let windowHeight = window.innerHeight; let windowWidth = window.innerWidth;
let relativeHeight = (windowHeight - height.top) / 4 - 18; let windowHeight = window.innerHeight;
this.relativeHeight.height = relativeHeight + 'px' let relativeHeight = (windowHeight - height.top) / 4 - 18;
this.getHeight = Number(relativeHeight); this.relativeHeight.height = relativeHeight + 'px'
this.getHeight = Number(relativeHeight);
}
}) })
} }
}, },

4
src/views/bigScreen/index.vue
Unescape View File

@ -4,7 +4,7 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-08-14 14:40:02 * @Date: 2023-08-14 14:40:02
* @LastEditors: JC9527 * @LastEditors: JC9527
* @LastEditTime: 2023-08-18 16:25:54 * @LastEditTime: 2023-08-18 18:43:00
--> -->
<template> <template>
<div class="pc-container"> <div class="pc-container">
@ -71,9 +71,7 @@ export default {
}, },
leftAnimationAction(){ leftAnimationAction(){
console.log('点击了按钮')
this.leftAnimation = !this.leftAnimation this.leftAnimation = !this.leftAnimation
console.log(this.leftAnimation)
}, },
rightAnimationAction(){ rightAnimationAction(){
this.rightAnimation = !this.rightAnimation this.rightAnimation = !this.rightAnimation

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

@ -280,7 +280,7 @@ export default {
iconUrl: require('../../../assets/images/icon/icon5.png'), iconUrl: require('../../../assets/images/icon/icon5.png'),
iconSize: [52, 81], iconSize: [52, 81],
}) })
point.features.map((item)=>{ point.features.map((item,index)=>{
if(this.actionMap == 1) { if(this.actionMap == 1) {
if(item.properties.name == "执法人员"){ if(item.properties.name == "执法人员"){
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1}).bindPopup( let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1}).bindPopup(
@ -288,7 +288,7 @@ export default {
<div class="person-popup"> <div class="person-popup">
<div class="person-title"> <div class="person-title">
<div class="title">人员信息</div> <div class="title">人员信息</div>
<div class="mask" @click="close()"></div> <div class="mask" id='monitoring${index}'></div>
</div> </div>
<div class="person-main"> <div class="person-main">
<div class="person-info"> <div class="person-info">
@ -297,7 +297,7 @@ export default {
<div class="position">执法1队队员</div> <div class="position">执法1队队员</div>
</div> </div>
<div class="btns"> <div class="btns">
<div @click="getRoute()">行程轨迹</div> <div id='personClick${index}'>行程轨迹</div>
<div>附近队员</div> <div>附近队员</div>
<div>位置分享</div> <div>位置分享</div>
<div>任务派发</div> <div>任务派发</div>
@ -310,7 +310,7 @@ export default {
} }
).openPopup(); ).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
// this.markerClick(marker) this.markerClick(marker,index)
} }
} else if(this.actionMap == 2) { } else if(this.actionMap == 2) {
let marker let marker
@ -321,7 +321,7 @@ export default {
<div class="event-popup"> <div class="event-popup">
<div class="event-title"> <div class="event-title">
<div class="title">事件信息</div> <div class="title">事件信息</div>
<div class="mask" @click="close()"></div> <div class="mask" id='monitoring${index}'></div>
</div> </div>
<div class="event-main"> <div class="event-main">
<div class="event-info"> <div class="event-info">
@ -344,7 +344,7 @@ export default {
<div class="name">描述：</div> <div class="name">描述：</div>
<div class="position">XXXXXXXXXXXXXX</div> <div class="position">XXXXXXXXXXXXXX</div>
</div> </div>
<div class="btn" @click="zhipai()"> <div class="btn" id="zhipai${index}">
指派 指派
</div> </div>
</div> </div>
@ -355,14 +355,14 @@ export default {
} }
).openPopup(); ).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
// this.markerClick(marker) this.markerClick(marker,index)
} else if(item.properties.name == "重点事件"){ } else if(item.properties.name == "重点事件"){
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup( marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup(
` `
<div class="event-popup"> <div class="event-popup">
<div class="event-title"> <div class="event-title">
<div class="title">事件信息</div> <div class="title">事件信息</div>
<div class="mask" @click="close()"></div> <div class="mask" id='monitoring${index}'></div>
</div> </div>
<div class="event-main"> <div class="event-main">
<div class="event-info"> <div class="event-info">
@ -385,7 +385,7 @@ export default {
<div class="name">描述：</div> <div class="name">描述：</div>
<div class="position">XXXXXXXXXXXXXX</div> <div class="position">XXXXXXXXXXXXXX</div>
</div> </div>
<div class="btn" @click="zhipai()"> <div class="btn" id="zhipai${index}">
指派 指派
</div> </div>
</div> </div>
@ -396,7 +396,7 @@ export default {
} }
).openPopup(); ).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
// this.markerClick(marker) this.markerClick(marker,index)
} }
} else if(this.actionMap == 3) { } else if(this.actionMap == 3) {
if(item.properties.name == "执法车辆"){ if(item.properties.name == "执法车辆"){
@ -405,7 +405,7 @@ export default {
<div class="car-popup"> <div class="car-popup">
<div class="car-title"> <div class="car-title">
<div class="title">车辆信息</div> <div class="title">车辆信息</div>
<div class="mask" @click="close()"></div> <div class="mask" id='monitoring${index}'></div>
</div> </div>
<div class="car-main"> <div class="car-main">
<div class="car-info"> <div class="car-info">
@ -413,7 +413,7 @@ export default {
<div class="name">执法一队1号车</div> <div class="name">执法一队1号车</div>
<div class="position">苏A568974</div> <div class="position">苏A568974</div>
</div> </div>
<div class="btn" @click="carinfo">行程轨迹</div> <div class="btn" id="carinfo${index}">行程轨迹</div>
</div> </div>
</div> </div>
`, `,
@ -422,7 +422,7 @@ export default {
} }
).openPopup(); ).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
// this.markerClick(marker) this.markerClick(marker,index)
} }
} else if(this.actionMap == 4) { } else if(this.actionMap == 4) {
if(item.properties.name == "监控视频"){ if(item.properties.name == "监控视频"){
@ -431,14 +431,14 @@ export default {
<div class="monitoring-popup"> <div class="monitoring-popup">
<div class="monitoring-title"> <div class="monitoring-title">
<div class="title">监控视频</div> <div class="title">监控视频</div>
<div class="mask" id='monitoring' onclick="close()"></div> <div class="mask" id='monitoring${index}'></div>
</div> </div>
<div class="monitoring"> <div class="monitoring">
<div class="bg"> <div class="bg">
<img src="@/assets/images/popup/screenshot20230817.png" alt=""> <img src="@/assets/images/popup/screenshot20230817.png" alt="">
</div> </div>
<div class="btns"> <div class="btns">
<div class="btn" @click="monitoringInfo()">上墙</div> <div class="btn" id="monitoringInfo${index}">上墙</div>
<div class="btn">转发</div> <div class="btn">转发</div>
</div> </div>
</div> </div>
@ -449,31 +449,59 @@ export default {
} }
).openPopup(); ).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker) this.markerClick(marker,index)
} }
} }
}) })
}, },
markerClick(marker){ markerClick(marker,index){
console.log(document.getElementById('monitoring'))
document.getElementById('monitoring').onclick=function(){ // document.getElementsByName('monitoring').addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
console.log('123123') // console.log("点击");
} // })
// marker.on('click', e => { console.log(marker)
// console.log(e); marker.on('click', e => {
// this.mypoint = e.containerPoint; console.log(e);
// if(this.actionMap == 1) { this.$nextTick(()=>{
// // this.personPopup = true; document.querySelector('#monitoring' + index).addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
marker.closePopup();
})
if(this.actionMap == 1) {
document.querySelector('#personClick' + index).addEventListener("click",()=>{
this.$refs.personageTrack.open('person');
})
} else if(this.actionMap == 2) {
document.querySelector('#zhipai' + index).addEventListener("click",()=>{
this.$refs.crewAssign.open();
})
// document.querySelector('#zhipai2' + index).addEventListener("click",()=>{
// this.$refs.crewAssign.open();
// })
} else if(this.actionMap == 3) {
document.querySelector('#carinfo' + index).addEventListener("click",()=>{
this.$refs.personageTrack.open('car');
})
} else if(this.actionMap == 4){
document.querySelector('#monitoringInfo' + index).addEventListener("click",()=>{
this.$refs.videoWall.open();
})
}
})
// this.mypoint = e.containerPoint;
// if(this.actionMap == 1) {
// // this.personPopup = true;
// } else if(this.actionMap == 2) { // } else if(this.actionMap == 2) {
// // this.eventPopup = true; // // this.eventPopup = true;
// } else if(this.actionMap == 3) { // } else if(this.actionMap == 3) {
// // this.carPopup = true // // this.carPopup = true
// } else if(this.actionMap == 4){ // } else if(this.actionMap == 4){
// // this.monitoringPopup = true; // // this.monitoringPopup = true;
// } // }
// }) })
}, },
personClose(){ personClose(){
this.personPopup = false; this.personPopup = false;
@ -487,18 +515,18 @@ export default {
monitoringClose(){ monitoringClose(){
this.monitoringPopup = false; this.monitoringPopup = false;
}, },
personzhipai(){ // personzhipai(){
this.$refs.crewAssign.open(); // this.$refs.crewAssign.open();
}, // },
presoninfo(){ // presoninfo(){
this.$refs.personageTrack.open('person'); // this.$refs.personageTrack.open('person');
}, // },
carinfo(){ // carinfo(){
this.$refs.personageTrack.open('car'); // this.$refs.personageTrack.open('car');
}, // },
monitoringInfo(){ // monitoringInfo(){
this.$refs.videoWall.open(); // this.$refs.videoWall.open();
}, // },
addLayer2(){ addLayer2(){
this.mapLayers.mapLayer2.clearLayers() this.mapLayers.mapLayer2.clearLayers()
let geojson = L.geoJSON(detachment1,{ let geojson = L.geoJSON(detachment1,{
@ -631,7 +659,7 @@ export default {
leftAnimation(){ leftAnimation(){
setTimeout(()=>{ setTimeout(()=>{
this.leftAnimationData = !this.leftAnimationData; this.leftAnimationData = !this.leftAnimationData;
},1000) },800)
this.$emit('leftAnimationAction') this.$emit('leftAnimationAction')
}, },
rightAnimation(){ rightAnimation(){

Write Preview
Loading…
Cancel
Save