You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
770 lines
23 KiB
770 lines
23 KiB
<!--
|
|
* @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>
|
|
<div class="map-main">
|
|
<div id="showMap" class="showMap"></div>
|
|
<div class="left-bg">
|
|
<div class="bgt"></div>
|
|
</div>
|
|
<div class="map-left">
|
|
<map-left></map-left>
|
|
</div>
|
|
<img src="@/assets/images/action-left.png" alt="" class="left-image">
|
|
<img src="@/assets/images/action-right.png" alt="" class="right-image">
|
|
<div class="middle-top-left">
|
|
<div class="input-keyword">
|
|
<el-input
|
|
placeholder="请输入关键字"
|
|
v-model="input">
|
|
<i slot="suffix" class="el-icon-search" @click="search"></i>
|
|
</el-input>
|
|
</div>
|
|
<div class="laser-positioning">
|
|
<span>地图扎点</span>
|
|
<img src="@/assets/images/positioning.png" alt="">
|
|
</div>
|
|
<div class="creation-task">
|
|
<span>任务创建</span>
|
|
<img src="@/assets/images/createdTask.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="middle-bottom-left">
|
|
<div class="list" @click="changeMap(1)">
|
|
<div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
|
|
<img src="@/assets/images/icon1.png" alt="">
|
|
</div>
|
|
<div class="rightbg" v-show="actionMap == 1">
|
|
<span>执法人员</span>
|
|
</div>
|
|
</div>
|
|
<div class="list" @click="changeMap(2)">
|
|
<div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
|
|
<img src="@/assets/images/icon2.png" alt="">
|
|
</div>
|
|
<div class="rightbg" v-show="actionMap == 2">
|
|
<span>普通事件</span>
|
|
</div>
|
|
</div>
|
|
<div class="list" @click="changeMap(2)">
|
|
<div class="leftbg" :class="actionMap == 2 ? 'action-map':''">
|
|
<img src="@/assets/images/icon3.png" alt="">
|
|
</div>
|
|
<div class="rightbg" v-show="actionMap == 2">
|
|
<span>重点事件</span>
|
|
</div>
|
|
</div>
|
|
<div class="list" @click="changeMap(3)">
|
|
<div class="leftbg" :class="actionMap == 3 ? 'action-map':''">
|
|
<img src="@/assets/images/icon4.png" alt="">
|
|
</div>
|
|
<div class="rightbg" v-show="actionMap == 3">
|
|
<span>执法车辆</span>
|
|
</div>
|
|
</div>
|
|
<div class="list" @click="changeMap(4)">
|
|
<div class="leftbg" :class="actionMap == 4 ? 'action-map':''">
|
|
<img src="@/assets/images/icon5.png" alt="">
|
|
</div>
|
|
<div class="rightbg" v-show="actionMap == 4">
|
|
<span>监控视频</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="middle-bottom-right">
|
|
<div class="btn-action">
|
|
<span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
|
|
<span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
|
|
</div>
|
|
</div>
|
|
<div class="map-right">
|
|
<map-right></map-right>
|
|
</div>
|
|
<div class="right-bg">
|
|
<div class="bgt"></div>
|
|
</div>
|
|
<div class="bottom-bg">
|
|
<div class="bgt"></div>
|
|
</div>
|
|
<personage-track ref="personageTrack"></personage-track>
|
|
<crew-assign ref="crewAssign"></crew-assign>
|
|
<video-wall ref="videoWall"></video-wall>
|
|
<person-popup v-if="personPopup" v-on:personClose="personClose" v-on:getRoute="presoninfo" :point="mypoint"></person-popup>
|
|
<event-popup v-if="eventPopup" v-on:eventClose="eventClose" v-on:zhipai="personzhipai" :point="mypoint"></event-popup>
|
|
<car-popup v-if="carPopup" v-on:carClose="carClose" v-on:carinfo="carinfo" :point="mypoint"></car-popup>
|
|
<monitoring-popup v-if="monitoringPopup" v-on:monitoringClose="monitoringClose" v-on:monitoringInfo="monitoringInfo" :point="mypoint"></monitoring-popup>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import L from 'leaflet'
|
|
//引入坐标系转换插件
|
|
import 'proj4'
|
|
import 'proj4leaflet'
|
|
//引入中国底图插件
|
|
import '@/utils/lib/leaflet.ChineseTmsProviders.js'
|
|
//引入坐标系偏移插件
|
|
import '@/utils/lib/leaflet.mapCorrection.min.js'
|
|
// import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
|
|
// import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
|
|
// import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
|
|
// import jiankongshipin from "@/utils/mapJson/jiankongshipin.json"
|
|
import point from "@/utils/mapJson/point.json"
|
|
|
|
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json"
|
|
import detachment1 from "@/utils/mapJson/detachment1.json"
|
|
import detachment2 from "@/utils/mapJson/detachment2.json"
|
|
import detachment3 from "@/utils/mapJson/detachment3.json"
|
|
import detachment4 from "@/utils/mapJson/detachment4.json"
|
|
import mapLeft from "../components/mapLeftContent.vue"
|
|
import mapRight from "../components/mapRightContent.vue"
|
|
// import mapCentre from "../components/mapCentre.vue"
|
|
// 弹窗
|
|
import personageTrack from "../../components/personagetrack/index.vue"
|
|
import crewAssign from "../../components/crewAssign/index.vue"
|
|
import videoWall from "../../components/videoWall/index.vue"
|
|
import personPopup from "../../components/personPopup/index.vue"
|
|
import eventPopup from "../../components/eventPopup/index.vue"
|
|
import carPopup from "../../components/carPopup/index.vue"
|
|
import monitoringPopup from "../../components/monitoringPopup/index.vue"
|
|
export default {
|
|
name: 'myMap',
|
|
components:{mapLeft,mapRight,personageTrack,crewAssign,videoWall,personPopup,eventPopup,carPopup,monitoringPopup},
|
|
data() {
|
|
return {
|
|
globalMap:null,
|
|
basemap:null,
|
|
townCenter: [31.863971, 118.835418],
|
|
myZoom:12,
|
|
mapLayers:{
|
|
mapLayer1:null,
|
|
mapLayer2:null,
|
|
mapLayer3:null,
|
|
mapLayer4:null,
|
|
mapLayer5:null,
|
|
},
|
|
mapEvent:{
|
|
mapEvent1:null,
|
|
mapEvent2:null,
|
|
mapEvent3:null,
|
|
mapEvent4:null,
|
|
},
|
|
mapLayer1:null,
|
|
mapLayer2:null,
|
|
mapLayer3:null,
|
|
mapLayer4:null,
|
|
mapLayer5:null,
|
|
input:'', // 输入框的值
|
|
actionMap:1, // 默认选中执法人员地图
|
|
action:1, // 切换执法人员/车辆/事件分类/监控视频控制的值
|
|
personPopup:false,
|
|
eventPopup:false,
|
|
carPopup:false,
|
|
monitoringPopup:false,
|
|
mypoint:{},
|
|
}
|
|
},
|
|
methods:{
|
|
initMap(){
|
|
this.globalMap = L.map('showMap', {
|
|
center: this.townCenter, // 地图中心[纬度，经度]
|
|
zoom: this.myZoom, // 地图层级
|
|
zoomControl: false,
|
|
attributionControl: false, // 右下角leaflet图标
|
|
doubleClickZoom: false, // 双击放大
|
|
scrollWheelZoom: true, // 滚轮放大
|
|
dragging: true,
|
|
})
|
|
|
|
// 电子底图/百度
|
|
this.basemap = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
|
|
maxZoom: 18,
|
|
minZoom: 5,
|
|
})
|
|
this.globalMap.addLayer(this.basemap);
|
|
|
|
this.globalMap.createPane('mapLayer1')
|
|
this.globalMap.getPane('mapLayer1').style.zIndex = 501
|
|
this.globalMap.getPane('mapLayer1').style.pointerEvents = 'none'
|
|
|
|
this.globalMap.createPane('mapLayer2')
|
|
this.globalMap.getPane('mapLayer2').style.zIndex = 502
|
|
this.globalMap.getPane('mapLayer2').style.pointerEvents = 'none'
|
|
|
|
this.globalMap.createPane('mapLayer3')
|
|
this.globalMap.getPane('mapLayer3').style.zIndex = 502
|
|
this.globalMap.getPane('mapLayer3').style.pointerEvents = 'none'
|
|
|
|
this.globalMap.createPane('mapLayer4')
|
|
this.globalMap.getPane('mapLayer4').style.zIndex = 502
|
|
this.globalMap.getPane('mapLayer4').style.pointerEvents = 'none'
|
|
|
|
this.globalMap.createPane('mapLayer5')
|
|
this.globalMap.getPane('mapLayer5').style.zIndex = 502
|
|
this.globalMap.getPane('mapLayer5').style.pointerEvents = 'none'
|
|
|
|
this.globalMap.createPane('mapEvent1')
|
|
this.globalMap.getPane('mapEvent1').style.zIndex = 503
|
|
this.globalMap.getPane('mapEvent1').style.pointerEvents = 'none'
|
|
|
|
this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap)
|
|
|
|
|
|
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap)
|
|
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap)
|
|
this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap)
|
|
this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap)
|
|
this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap)
|
|
|
|
this.globalMap.on('zoomend', e => {
|
|
let zoom = this.globalMap.getZoom()
|
|
console.log('层级：', zoom)
|
|
})
|
|
// this.addLayer2();
|
|
this.addLayer1();
|
|
this.addMark("执法人员");
|
|
// this.addLayer2();
|
|
// this.addLayer3();
|
|
// this.addLayer4();
|
|
// this.addLayer5();
|
|
},
|
|
addLayer1(){
|
|
this.mapLayers.mapLayer1.clearLayers()
|
|
// this.mapLayers.mapLayer2.clearLayers()
|
|
let geojson = L.geoJSON(jiangninggeo,{
|
|
pane: 'mapLayer1',
|
|
style: function (feature) {
|
|
return {
|
|
color: '#00C5EC',
|
|
weight: 1,
|
|
fillColor: 'rgba(64,175,255,0.4)',
|
|
fillOpacity: 1,
|
|
}
|
|
},
|
|
},{ className: 'jack-s' }
|
|
).addTo(this.mapLayers.mapLayer1)
|
|
// this.addMark()
|
|
// 获取json文件的中心位置
|
|
this.mapLayer1 = geojson.getBounds()
|
|
// 居中加载json文件
|
|
this.globalMap.fitBounds(this.mapLayer1)
|
|
},
|
|
addMark(name){
|
|
this.mapEvent.mapEvent1.clearLayers()
|
|
let ico1 = L.icon({
|
|
iconUrl: require('../../../assets/images/icon/icon1.png'),
|
|
iconSize: [52, 81],
|
|
})
|
|
let ico2 = L.icon({
|
|
iconUrl: require('../../../assets/images/icon/icon2.png'),
|
|
iconSize: [44, 91],
|
|
})
|
|
let ico3 = L.icon({
|
|
iconUrl: require('../../../assets/images/icon/icon3.png'),
|
|
iconSize: [44, 91],
|
|
})
|
|
let ico4 = L.icon({
|
|
iconUrl: require('../../../assets/images/icon/icon4.png'),
|
|
iconSize: [45, 95],
|
|
})
|
|
let ico5 = L.icon({
|
|
iconUrl: require('../../../assets/images/icon/icon5.png'),
|
|
iconSize: [52, 81],
|
|
})
|
|
point.features.map((item)=>{
|
|
if(this.actionMap == 1) {
|
|
if(item.properties.name == "执法人员"){
|
|
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1})
|
|
marker.addTo(this.mapEvent.mapEvent1)
|
|
this.markerClick(marker)
|
|
}
|
|
} else if(this.actionMap == 2) {
|
|
let marker
|
|
if(item.properties.name == "普通事件") {
|
|
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico2})
|
|
marker.addTo(this.mapEvent.mapEvent1)
|
|
this.markerClick(marker)
|
|
} else if(item.properties.name == "重点事件"){
|
|
marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3})
|
|
marker.addTo(this.mapEvent.mapEvent1)
|
|
this.markerClick(marker)
|
|
}
|
|
} else if(this.actionMap == 3) {
|
|
if(item.properties.name == "执法车辆"){
|
|
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4})
|
|
marker.addTo(this.mapEvent.mapEvent1)
|
|
this.markerClick(marker)
|
|
}
|
|
} else if(this.actionMap == 4) {
|
|
if(item.properties.name == "监控视频"){
|
|
let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5})
|
|
marker.addTo(this.mapEvent.mapEvent1)
|
|
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){
|
|
marker.on('click', e => {
|
|
console.log(e);
|
|
this.mypoint = e.containerPoint;
|
|
if(this.actionMap == 1) {
|
|
this.personPopup = 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(){
|
|
this.personPopup = false;
|
|
},
|
|
eventClose(){
|
|
this.eventPopup = false;
|
|
},
|
|
carClose(){
|
|
this.carPopup = false;
|
|
},
|
|
monitoringClose(){
|
|
this.monitoringPopup = false;
|
|
},
|
|
personzhipai(){
|
|
this.$refs.crewAssign.open();
|
|
},
|
|
presoninfo(){
|
|
this.$refs.personageTrack.open('person');
|
|
},
|
|
carinfo(){
|
|
this.$refs.personageTrack.open('car');
|
|
},
|
|
monitoringInfo(){
|
|
this.$refs.videoWall.open();
|
|
},
|
|
addLayer2(){
|
|
this.mapLayers.mapLayer2.clearLayers()
|
|
let geojson = L.geoJSON(detachment1,{
|
|
pane: 'mapLayer2',
|
|
style: function (feature) {
|
|
return {
|
|
color: '#00C5EC',
|
|
weight: 1,
|
|
fillColor: 'rgba(255,0,0,0.38)',
|
|
fillOpacity: 1,
|
|
}
|
|
},
|
|
onEachFeature: (feature, layer) => {
|
|
console.log(feature.properties.name)
|
|
let polygon = L.polygon(layer._latlngs, {
|
|
text: feature.properties.name,
|
|
textStyle: {
|
|
strokeStyle: '#ffffff',//描边颜色
|
|
fillStyle: '#00000',//文字颜色
|
|
// eslint-disable-next-line quotes
|
|
font: "18px 'PuHuiTi-Medium'",
|
|
lineWidth: 1,//描边粗细
|
|
offsetX: -36,//-字号*4个字/2
|
|
offsetY: 9,//字号/2
|
|
}
|
|
})
|
|
polygon.addTo(this.mapLayers.mapLayer2)
|
|
}
|
|
},{ className: 'jack-s2' }
|
|
).addTo(this.mapLayers.mapLayer2)
|
|
this.mapLayer2 = geojson.getBounds()
|
|
},
|
|
addLayer3(){
|
|
this.mapLayers.mapLayer3.clearLayers()
|
|
let geojson = L.geoJSON(detachment2,{
|
|
pane: 'mapLayer3',
|
|
style: function (feature) {
|
|
return {
|
|
color: '#00C5EC',
|
|
weight: 1,
|
|
fillColor: 'rgba(255,0,0,0.38)',
|
|
fillOpacity: 1,
|
|
}
|
|
},
|
|
},{ className: 'jack-s3' }
|
|
).addTo(this.mapLayers.mapLayer3)
|
|
this.mapLayer3 = geojson.getBounds()
|
|
},
|
|
addLayer4(){
|
|
this.mapLayers.mapLayer4.clearLayers()
|
|
let geojson = L.geoJSON(detachment3,{
|
|
pane: 'mapLayer4',
|
|
style: function (feature) {
|
|
return {
|
|
color: '#00C5EC',
|
|
weight: 1,
|
|
fillColor: 'rgba(255,0,0,0.38)',
|
|
fillOpacity: 1,
|
|
}
|
|
},
|
|
},{ className: 'jack-s4' }
|
|
).addTo(this.mapLayers.mapLayer4)
|
|
// 获取json文件的中心位置
|
|
this.mapLayer4 = geojson.getBounds()
|
|
},
|
|
addLayer5(){
|
|
this.mapLayers.mapLayer5.clearLayers()
|
|
let geojson = L.geoJSON(detachment4,{
|
|
pane: 'mapLayer5',
|
|
style: function (feature) {
|
|
return {
|
|
color: '#00C5EC',
|
|
weight: 1,
|
|
fillColor: 'rgba(255,0,0,0.38)',
|
|
fillOpacity: 1,
|
|
}
|
|
},
|
|
},{ className: 'jack-s5' }
|
|
).addTo(this.mapLayers.mapLayer5)
|
|
// 获取json文件的中心位置
|
|
this.mapLayer5 = geojson.getBounds()
|
|
},
|
|
actionBtn(id){
|
|
this.action = id;
|
|
// console.log(id)
|
|
// this.$emit('actionBtn',id);
|
|
// if(id == 1){
|
|
// this.$refs.personageTrack.open();
|
|
// } else {
|
|
// this.$refs.crewAssign.open();
|
|
// }
|
|
},
|
|
// 输入框的搜索框点击事件
|
|
search(){
|
|
|
|
},
|
|
// 创建任务的点击事件
|
|
createdTask(){
|
|
|
|
},
|
|
// 地图扎点的点击事件
|
|
positioning(){
|
|
// this.$refs.videoWall.open();
|
|
},
|
|
// 切换地图事件
|
|
changeMap(id){
|
|
this.actionMap = id;
|
|
this.personPopup = false;
|
|
this.eventPopup = false;
|
|
this.carPopup = false;
|
|
this.monitoringPopup = false;
|
|
this.addMark()
|
|
switch(id){
|
|
case 1:
|
|
this.addMark("执法人员")
|
|
break;
|
|
case 2:
|
|
this.addMark("普通事件")
|
|
break;
|
|
case 3:
|
|
this.addMark("执法车辆")
|
|
break;
|
|
case 4:
|
|
this.addMark("监控视频")
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
},
|
|
},
|
|
mounted(){
|
|
this.$nextTick(()=>{
|
|
this.initMap()
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
.map-main {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.left-bg {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
width: 11px;
|
|
height: 95%;
|
|
padding: 20px 0 0 0;
|
|
z-index: 600;
|
|
.bgt {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../../../assets/images/broadside-bg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.right-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20px;
|
|
width: 11px;
|
|
height: 95%;
|
|
padding: 20px 0;
|
|
z-index: 600;
|
|
.bgt {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../../../assets/images/broadside-bg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.bottom-bg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 20px;
|
|
z-index: 600;
|
|
.bgt {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('../../../assets/images/bottom-bg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.map-left {
|
|
position: absolute;
|
|
left: 47px;
|
|
top: 10px;
|
|
width: 460px;
|
|
height: 95%;
|
|
z-index: 600;
|
|
box-sizing: border-box;
|
|
background: rgba(216,216,216,0.05);
|
|
}
|
|
.left-image {
|
|
z-index: 600;
|
|
position: absolute;
|
|
left: 527px;
|
|
bottom: 50%;
|
|
width: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.right-image {
|
|
z-index: 600;
|
|
position: absolute;
|
|
right: 527px;
|
|
bottom: 50%;
|
|
width: 40px;
|
|
cursor: pointer;
|
|
}
|
|
.map-right {
|
|
position: absolute;
|
|
right: 47px;
|
|
top: 10px;
|
|
width: 460px;
|
|
z-index: 600;
|
|
// margin: 10px 17px 0 10px;
|
|
// padding: 20px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.middle-top-left {
|
|
z-index: 600;
|
|
position: absolute;
|
|
left: 537px;
|
|
top: 10px;
|
|
display: flex;
|
|
.input-keyword {
|
|
::v-deep .el-input {
|
|
background: rgba(0,60,116,0.2);
|
|
box-shadow: inset 0px 0px 6px 0px #00C2FF;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(181,207,255,0.5);
|
|
.el-input__inner {
|
|
background-color: transparent;
|
|
width: 222px;
|
|
height: 38px;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
.el-input__inner::placeholder {
|
|
/* 在这里添加你想要修改的 placeholder 样式 */
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #D3EEF2;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
::v-deep .el-input__suffix {
|
|
line-height: 44px;
|
|
color: #D3EEF2;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
.el-icon-search:before {
|
|
font-size: 24px;
|
|
color: #D3EEF2;
|
|
}
|
|
}
|
|
}
|
|
.laser-positioning,.creation-task {
|
|
// height: 38px;
|
|
margin-left: 8px;
|
|
background: rgba(0,60,116,0.6);
|
|
box-shadow: inset 0px 0px 6px 0px #00C2FF;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(181,207,255,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 9px 13px;
|
|
cursor: pointer;
|
|
span {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #D3EEF2;
|
|
line-height: 20px;
|
|
margin-right: 12px;
|
|
}
|
|
img {
|
|
width: 20px;
|
|
}
|
|
}
|
|
}
|
|
.middle-bottom-left {
|
|
position: absolute;
|
|
left: 537px;
|
|
bottom: 40px;
|
|
// width: 200px;
|
|
z-index: 600;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.list{
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
.leftbg {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url('../../../assets/images/iconbg2.png');
|
|
background-size: 100% 100%;
|
|
width: 36px;
|
|
height: 36px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 20px;
|
|
}
|
|
}
|
|
.action-map {
|
|
background-image: url('../../../assets/images/iconbg1.png');
|
|
}
|
|
.rightbg {
|
|
padding-left: 6px;
|
|
margin-left: 2px;
|
|
background-image: url('../../../assets/images/right-icon.png');
|
|
width: 115px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
font-size: 16px;
|
|
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
|
font-weight: 700;
|
|
color: #FFFFFF;
|
|
line-height: 26px;
|
|
text-shadow: 0px 0px 5px #0077FF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.middle-bottom-right {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
right: 537px;
|
|
z-index: 600;
|
|
.btn-action {
|
|
display: flex;
|
|
span {
|
|
flex: 1;
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 10px 33px;
|
|
font-size: 16px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #D3EEF2;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
box-shadow: inset 0px 0px 6px 0px #00C2FF;
|
|
border-radius: 2px 2px 2px 2px;
|
|
opacity: 1;
|
|
border: 1px solid rgba(181,207,255,0.5);
|
|
&:nth-child(1) {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.action {
|
|
color: #fff;
|
|
background-color: rgba(255,125,64,0.8);
|
|
box-shadow: inset 0px 0px 13px 0px #F6B463;
|
|
border-radius: 2px 2px 2px 2px;
|
|
border: 1px solid rgba(181,207,255,0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.showMap {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|