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

隐藏侧边

Browse Source
dhy
吕天方 2 years ago
parent 3fc9db99bc
commit 5cb5dcb7aa
1 changed files with 280 additions and 109 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,39 +1,17 @@
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-14 15:46:26
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 21:32:14
-->
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-14 15:46:26
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 16:15:51
-->
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-14 15:46:26
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 15:40:05
-->
<template> <template>
<div class="map-main"> <div class="map-main">
<div id="showMap" class="showMap"></div> <div id="showMap" class="showMap"></div>
<div class="left-bg"> <div class="left-bg">
<div class="bgt"></div> <div class="bgt"></div>
</div> </div>
<div class="map-left"> <transition name="left-animationMap">
<map-left></map-left> <div class="map-left" v-if="leftAnimationData">
</div> <map-left></map-left>
<img src="@/assets/images/action-left.png" alt="" class="left-image"> </div>
<img src="@/assets/images/action-right.png" alt="" class="right-image"> </transition>
<div class="middle-top-left">
<img :src="leftAnimationData ? require('@/assets/images/action-left.png'):require('@/assets/images/action-right.png')" alt="" :class="!leftAnimationData ? 'left-image2':'left-image'" @click="leftAnimation()">
<div class="middle-top-left" :class="!leftAnimationData ? 'middle-top-left2':'middle-top-left'">
<div class="input-keyword"> <div class="input-keyword">
<el-input <el-input
placeholder="请输入关键字" placeholder="请输入关键字"
@ -50,7 +28,7 @@
<img src="@/assets/images/createdTask.png" alt=""> <img src="@/assets/images/createdTask.png" alt="">
</div> </div>
</div> </div>
<div class="middle-bottom-left"> <div class="middle-bottom-left" :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'">
<div class="list" @click="changeMap(1)"> <div class="list" @click="changeMap(1)">
<div class="leftbg" :class="actionMap == 1 ? 'action-map':''"> <div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
<img src="@/assets/images/icon1.png" alt=""> <img src="@/assets/images/icon1.png" alt="">
@ -92,15 +70,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="middle-bottom-right"> <transition name="right-animationMap">
<div class="map-right" v-if="rightAnimationData">
<map-right></map-right>
</div>
</transition>
<img :src="rightAnimationData ? require('@/assets/images/action-right.png') : require('@/assets/images/action-left.png')" alt="" :class="!rightAnimationData ? 'right-image2' : 'right-image'" @click="rightAnimation()">
<div class="middle-bottom-right" :class="!rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'">
<div class="btn-action"> <div class="btn-action">
<span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span> <span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
<span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span> <span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
</div> </div>
</div> </div>
<div class="map-right">
<map-right></map-right>
</div>
<div class="right-bg"> <div class="right-bg">
<div class="bgt"></div> <div class="bgt"></div>
</div> </div>
@ -119,12 +102,12 @@
<script> <script>
import L from 'leaflet' import L from 'leaflet'
//引入坐标系转换插件 //引入坐标系转换插件
import 'proj4' // import 'proj4'
import 'proj4leaflet' // import 'proj4leaflet'
//引入中国底图插件 //引入中国底图插件
import '@/utils/lib/leaflet.ChineseTmsProviders.js' // import '@/utils/lib/leaflet.ChineseTmsProviders.js'
//引入坐标系偏移插件 //引入坐标系偏移插件
import '@/utils/lib/leaflet.mapCorrection.min.js' // import '@/utils/lib/leaflet.mapCorrection.min.js'
// import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json" // import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
// import shijianfenbu from "@/utils/mapJson/shijianfenbu.json" // import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
// import zhifacheliang from "@/utils/mapJson/zhifacheliang.json" // import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
@ -182,6 +165,8 @@ export default {
carPopup:false, carPopup:false,
monitoringPopup:false, monitoringPopup:false,
mypoint:{}, mypoint:{},
leftAnimationData:true,
rightAnimationData:true,
} }
}, },
methods:{ methods:{
@ -197,10 +182,14 @@ export default {
}) })
// 电子底图/百度 // 电子底图/百度
this.basemap = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', { this.basemap = L.tileLayer(
maxZoom: 18, 'https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw',
minZoom: 5, {
}) maxZoom: 18,
minZoom: 9,
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
}
)
this.globalMap.addLayer(this.basemap); this.globalMap.addLayer(this.basemap);
this.globalMap.createPane('mapLayer1') this.globalMap.createPane('mapLayer1')
@ -294,73 +283,197 @@ export default {
point.features.map((item)=>{ point.features.map((item)=>{
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}) let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1}).bindPopup(
`
<div class="person-popup">
<div class="person-title">
<div class="title">人员信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="person-main">
<div class="person-info">
<div class="dot"></div>
<div class="name">李飞</div>
<div class="position">执法1队队员</div>
</div>
<div class="btns">
<div @click="getRoute()">行程轨迹</div>
<div>附近队员</div>
<div>位置分享</div>
<div>任务派发</div>
</div>
</div>
</div>
`,
{
className: 'popup-pc-person'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker) // this.markerClick(marker)
} }
} else if(this.actionMap == 2) { } else if(this.actionMap == 2) {
let marker let marker
if(item.properties.name == "普通事件") { if(item.properties.name == "普通事件") {
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico2}) marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico2})
.bindPopup(
`
<div class="event-popup">
<div class="event-title">
<div class="title">事件信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="event-main">
<div class="event-info">
<div class="dot"></div>
<div class="name">事件名称：</div>
<div class="position">XXX小区乱堆杂物</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件类别：</div>
<div class="position">暴露垃圾</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件地址：</div>
<div class="position">XX街道XX小区</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">描述：</div>
<div class="position">XXXXXXXXXXXXXX</div>
</div>
<div class="btn" @click="zhipai()">
指派
</div>
</div>
</div>
`,
{
className: 'popup-pc-common'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker) // this.markerClick(marker)
} 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}) marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup(
`
<div class="event-popup">
<div class="event-title">
<div class="title">事件信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="event-main">
<div class="event-info">
<div class="dot"></div>
<div class="name">事件名称：</div>
<div class="position">XXX小区乱堆杂物</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件类别：</div>
<div class="position">暴露垃圾</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">事件地址：</div>
<div class="position">XX街道XX小区</div>
</div>
<div class="event-info">
<div class="dot"></div>
<div class="name">描述：</div>
<div class="position">XXXXXXXXXXXXXX</div>
</div>
<div class="btn" @click="zhipai()">
指派
</div>
</div>
</div>
`,
{
className: 'popup-pc-emphasis'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker) // this.markerClick(marker)
} }
} else if(this.actionMap == 3) { } else if(this.actionMap == 3) {
if(item.properties.name == "执法车辆"){ if(item.properties.name == "执法车辆"){
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4}) let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4}).bindPopup(
`
<div class="car-popup">
<div class="car-title">
<div class="title">车辆信息</div>
<div class="mask" @click="close()"></div>
</div>
<div class="car-main">
<div class="car-info">
<div class="dot"></div>
<div class="name">执法一队1号车</div>
<div class="position">苏A568974</div>
</div>
<div class="btn" @click="carinfo">行程轨迹</div>
</div>
</div>
`,
{
className: 'popup-pc-car'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker) // this.markerClick(marker)
} }
} else if(this.actionMap == 4) { } else if(this.actionMap == 4) {
if(item.properties.name == "监控视频"){ if(item.properties.name == "监控视频"){
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5}) let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5}).bindPopup(
`
<div class="monitoring-popup">
<div class="monitoring-title">
<div class="title">监控视频</div>
<div class="mask" id='monitoring' onclick="close()"></div>
</div>
<div class="monitoring">
<div class="bg">
<img src="@/assets/images/popup/screenshot20230817.png" alt="">
</div>
<div class="btns">
<div class="btn" @click="monitoringInfo()">上墙</div>
<div class="btn">转发</div>
</div>
</div>
</div>
`,
{
className: 'popup-pc-monitoring'
}
).openPopup();
marker.addTo(this.mapEvent.mapEvent1) marker.addTo(this.mapEvent.mapEvent1)
this.markerClick(marker) this.markerClick(marker)
} }
} }
}) })
// let geojson = L.geoJSON(cheshi,{
// onEachFeature: (feature, layer) => {
// console.log(feature)
// console.log(layer)
// let bounds = layer._latlng
// console.log(bounds)
// let marker
// // let center = bounds.getCenter()
// if(feature.properties.name == "监控视频"){
// marker = L.marker(bounds,{icon:ico5})
// } else if(feature.properties.name == "执法人员") {
// marker = L.marker({lng:118.74576613991007,lat:31.8391346298732},{icon:ico1})
// } else if(feature.properties.name == "普通事件") {
// marker = L.marker(bounds,{icon:ico2})
// } else if(feature.properties.name == "重点事件") {
// marker = L.marker(bounds,{icon:ico3})
// } else if(feature.properties.name == "执法车辆") {
// marker = L.marker(bounds,{icon:ico4})
// }
// marker.addTo(this.mapEvent.mapEvent1)
// }
// }).addTo(this.mapEvent.mapEvent1)
}, },
markerClick(marker){ markerClick(marker){
marker.on('click', e => { console.log(document.getElementById('monitoring'))
console.log(e); document.getElementById('monitoring').onclick=function(){
this.mypoint = e.containerPoint; console.log('123123')
if(this.actionMap == 1) { }
this.personPopup = true; // marker.on('click', e => {
} else if(this.actionMap == 2) { // console.log(e);
this.eventPopup = true; // this.mypoint = e.containerPoint;
} else if(this.actionMap == 3) { // if(this.actionMap == 1) {
this.carPopup = true // // this.personPopup = true;
} else if(this.actionMap == 4){
this.monitoringPopup = true; // } else if(this.actionMap == 2) {
} // // this.eventPopup = true;
}) // } else if(this.actionMap == 3) {
// // this.carPopup = true
// } else if(this.actionMap == 4){
// // this.monitoringPopup = true;
// }
// })
}, },
personClose(){ personClose(){
this.personPopup = false; this.personPopup = false;
@ -515,6 +628,18 @@ export default {
return; return;
} }
}, },
leftAnimation(){
setTimeout(()=>{
this.leftAnimationData = !this.leftAnimationData;
},1000)
this.$emit('leftAnimationAction')
},
rightAnimation(){
setTimeout(()=>{
this.rightAnimationData = !this.rightAnimationData;
},1000)
this.$emit('rightAnimationAction')
},
}, },
mounted(){ mounted(){
this.$nextTick(()=>{ this.$nextTick(()=>{
@ -529,6 +654,24 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
.left-animationMap-enter-active, .left-animationMap-leave-active {
transition: all 1s;
}
.left-animationMap-enter, .left-animationMap-leave-to {
/* 进入的初始状态和离开的最终状态 */
opacity: 0;
transform: translateX(-510px);
}
.right-animationMap-enter-active, .right-animationMap-leave-active {
transition: all 1s;
}
.right-animationMap-enter, .right-animationMap-leave-to {
/* 进入的初始状态和离开的最终状态 */
opacity: 0;
transform: translateX(510px);
}
.left-bg { .left-bg {
position: absolute; position: absolute;
left: 20px; left: 20px;
@ -555,7 +698,7 @@ export default {
.bgt { .bgt {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('../../../assets/images/broadside-bg.png'); background-image: url('../../../assets/images/broadside2-bg.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
@ -582,7 +725,7 @@ export default {
height: 95%; height: 95%;
z-index: 600; z-index: 600;
box-sizing: border-box; box-sizing: border-box;
background: rgba(216,216,216,0.05); // background: rgba(216,216,216,0.05);
} }
.left-image { .left-image {
z-index: 600; z-index: 600;
@ -592,6 +735,14 @@ export default {
width: 40px; width: 40px;
cursor: pointer; cursor: pointer;
} }
.left-image2 {
z-index: 600;
position: absolute;
left: 67px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.right-image { .right-image {
z-index: 600; z-index: 600;
position: absolute; position: absolute;
@ -600,11 +751,20 @@ export default {
width: 40px; width: 40px;
cursor: pointer; cursor: pointer;
} }
.right-image2 {
z-index: 600;
position: absolute;
right: 67px;
bottom: 50%;
width: 40px;
cursor: pointer;
}
.map-right { .map-right {
position: absolute; position: absolute;
right: 47px; right: 47px;
top: 10px; top: 10px;
width: 460px; width: 460px;
height: 95%;
z-index: 600; z-index: 600;
// margin: 10px 17px 0 10px; // margin: 10px 17px 0 10px;
// padding: 20px 0; // padding: 20px 0;
@ -618,10 +778,8 @@ export default {
display: flex; display: flex;
.input-keyword { .input-keyword {
::v-deep .el-input { ::v-deep .el-input {
background: rgba(0,60,116,0.2); background-image: url('../../../assets/images/bgtongyong.png');
box-shadow: inset 0px 0px 6px 0px #00C2FF; background-size: 100% 100%;
border-radius: 2px;
border: 1px solid rgba(181,207,255,0.5);
.el-input__inner { .el-input__inner {
background-color: transparent; background-color: transparent;
width: 222px; width: 222px;
@ -632,7 +790,7 @@ export default {
.el-input__inner::placeholder { .el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */ /* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-family: Source Han Sans CN-Regular;
font-weight: 400; font-weight: 400;
color: #D3EEF2; color: #D3EEF2;
line-height: 20px; line-height: 20px;
@ -651,11 +809,10 @@ export default {
} }
.laser-positioning,.creation-task { .laser-positioning,.creation-task {
// height: 38px; // height: 38px;
width: 130px;
margin-left: 8px; margin-left: 8px;
background: rgba(0,60,116,0.6); background-image: url('../../../assets/images/bgtongyong.png');
box-shadow: inset 0px 0px 6px 0px #00C2FF; background-size: 100% 100%;
border-radius: 2px;
border: 1px solid rgba(181,207,255,0.5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -663,7 +820,7 @@ export default {
cursor: pointer; cursor: pointer;
span { span {
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-family: Source Han Sans CN-Regular;
font-weight: 400; font-weight: 400;
color: #D3EEF2; color: #D3EEF2;
line-height: 20px; line-height: 20px;
@ -674,7 +831,11 @@ export default {
} }
} }
} }
.middle-top-left2 {
left: 67px;
}
.middle-bottom-left { .middle-bottom-left {
// 490
position: absolute; position: absolute;
left: 537px; left: 537px;
bottom: 40px; bottom: 40px;
@ -713,7 +874,7 @@ export default {
align-items: center; align-items: center;
span { span {
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN; font-family: Source Han Sans CN-Bold;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
line-height: 26px; line-height: 26px;
@ -722,6 +883,9 @@ export default {
} }
} }
} }
.middle-bottom-left2 {
left: 67px;
}
.middle-bottom-right { .middle-bottom-right {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
@ -730,38 +894,45 @@ export default {
.btn-action { .btn-action {
display: flex; display: flex;
span { span {
width: 142px;
height: 40px;
flex: 1; flex: 1;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
background-image: url('../../../assets/images/changeBtn2.png');
background-size: 100% 100%;
padding: 10px 33px; padding: 10px 33px;
font-size: 16px; font-size: 16px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN; font-family: Source Han Sans CN-Regular;
font-weight: 400; font-weight: 400;
line-height: 20px;
color: #D3EEF2; color: #D3EEF2;
cursor: pointer; cursor: pointer;
background: transparent; // background: transparent;
box-shadow: inset 0px 0px 6px 0px #00C2FF; // box-shadow: inset 0px 0px 6px 0px #00C2FF;
border-radius: 2px 2px 2px 2px; // border-radius: 2px 2px 2px 2px;
opacity: 1; // opacity: 1;
border: 1px solid rgba(181,207,255,0.5); // border: 1px solid rgba(181,207,255,0.5);
&:nth-child(1) { &:nth-child(1) {
margin-right: 10px; margin-right: 10px;
} }
} }
.action { .action {
color: #fff; color: #fff;
background-color: rgba(255,125,64,0.8); background-image: url('../../../assets/images/changeBtn1.png.png');
box-shadow: inset 0px 0px 13px 0px #F6B463; background-size: 100% 100%;
border-radius: 2px 2px 2px 2px;
border: 1px solid rgba(181,207,255,0.5);
} }
} }
} }
.middle-bottom-right2 {
right: 67px;
}
.showMap { .showMap {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #00192e;
} }
} }

Write Preview
Loading…
Cancel
Save