cb
/
front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图搜索功能，信息窗体样式修改，缩略图，卫星控件

main
coco1986509808 2024-01-10 20:34:13 +08:00
parent f4101e26af
commit 4cf5a6c10a
2 changed files with 346 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

307
src/views/modules/monitoring/map.vue
View File

@ -1,126 +1,285 @@
<template>
<baidu-map
class="map"
:center="center"
:zoom="zoom"
scroll-wheel-zoom
@ready="changeCenterAndZoom"
:mapStyle="mapStyle"
>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<div v-for="(item, index) in markers" :key="index">
<bm-marker
:position="item.position"
:icon="item.icon"
@click="infoWindowOpen(item)"
>
<bm-info-window
:show="item.show"
@close="infoWindowClose(item)"
@open="infoWindowOpen(item)"
>
<div class="info-window">
<div v-for="device in item.deviceInfo">
<div style="cursor: pointer; color: #fff;" @click="goDevice(device.gateway.mac)">{{$t('lang.device')}} {{device.gateway.mac}}</div>
<div style="margin-top:5px">
<span style="color: red" v-if="device.status==0">{{$t('lang.offline')}}</span>
<span style="color: #67c23a" v-if="device.status==1">{{$t('lang.online')}}</span>
<span v-if="device.status==2">{{$t('lang.alarm')}}</span>
<span v-if="device.status==3">{{$t('lang.fault')}}</span>
</div>
<el-divider></el-divider>
</div>
<div class="address">{{$t('lang.detail-site')}}:{{item.address}}</div>
<div class="contain">
<baidu-map
class="map"
:scroll-wheel-zoom="true"
:double-click-zoom="false"
@zoomend="mouseEvent"
:center="center"
:zoom="zoom">
<!-- 跳转菜单-->
<bm-context-menu width="250">
<bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
<bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
</bm-context-menu>
<!-- 右上角地图类型切换-->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
<!--右下角缩略图-->
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
<!-- 右下角定位-->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<!-- 搜索框 -->
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<el-input class="complete" v-model="keyword"></el-input>
</bm-auto-complete>
<el-button type="primary" @click="search">搜索</el-button>
</bm-control>
<!--缩放控件-->
<!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
<bm-marker v-for="(item,key ) of this.mapList" :key="key"
:title="item.content"
:icon="iconUrl"
:position="item.position"
:dragging="true"
@click="infoWindowOpen(item)"
:animation="item.animal">
<!-- 信息窗体-->
<bm-info-window :auto-pan="true" :show="item.show" @close="infoWindowClose(item)">
<div style="color:#fff;font-size:16px;">
<div style="width:220px;font-size: 20px">摄像头数据信息</div>
<div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
<div style="margin-top:10px;width:300px"> 所属组织：{{ item.origin }}</div>
<div style="margin-top:5px;width:300px"> 详细地址：{{ item.address }}</div>
<div style="margin-top:5px;width:300px"> 经度：{{ item.position.lng }}</div>
<div style="margin-top:5px;width:300px"> 纬度：{{ item.position.lng }}</div>
<div style="margin-top:5px;width:300px"> IP地址：{{ item.ip }}</div>
<div style="margin-top:5px;width:220px"> 摄像机类型：{{ item.type }}</div>
<div style="margin-top:5px;width:220px"> 备注：{{ item.name }}</div>
<!-- <img :src="iconUrl.url" style="width:100%" />-->
</div>
</bm-info-window>
</bm-marker>
</div>
</baidu-map>
</baidu-map>
</div>
</template>
<script>
</script>
<style>
.baidu-map {
.BMap_bottom {
display: none;
export default {
data(){
return{
mapList:[
{
position: { lng: 103.931057, lat: 30.755467 },
show:false,
origin:"公共安全中心实验室",
address:"广东省深圳市观澜街道银星智界二期3号楼",
ip:"192.168.1.108",
type:"华为",
content:"这是一个摄像头",
name:"摄像头1",
animal:"BMAP_ANIMATION_DROP"
},
{
position: { lng: 103.831057, lat: 30.755467 },
show:false,
content:"这是一个摄像头",
name:"2",
animal:"BMAP_ANIMATION_DROP"
},
{
position: { lng: 103.931057, lat: 30.765467 },
show:false,
content:"这是一个摄像头",
name:"3",
animal:"BMAP_ANIMATION_DROP"
}
],
keyword: '',
// item:{
// position: { lng: 103.931057, lat: 30.755467 },
// show:false,
// content:"这是一个摄像头"
// },
iconUrl: {
url: require("../../../assets/img/video.png"),
size: { width: 30, height: 30 }
},
zoom:14,
center: {
lng: 103.931057, lat: 30.755467
},
point:{
lng: 103.931057, lat: 30.755467,
showFlag:true,
regionName:"11",
location:"22",
severity:"",
reporterName:"",
reporterPhone:"",
orderPeopleStr:"",
repairStartTime:"",
information:"",
},
}
},
methods:{
//逆地址解析
search() {
console.log("kaishishou")
console.log(this.mapList)
console.log(this.keyword)
for (let i = 0; i <this.mapList.length ; i++) {
if (this.mapList[i].name == this.keyword ){
//到摄像头列表中搜索，将信息窗体显示出来
console.log(this.mapList[i])
this.mapList[i].show = true;
this.mapList[i].animal ="BMAP_ANIMATION_BOUNCE";
}
}
},
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
infoWindowClose(param) {
param.show = false
console.log(param.show)
},
// 覆盖物 点 信息窗体 打开,同时获取地图视野的中心点
infoWindowOpen(param) {
// bm-info-window 暂时不用
console.log(param)
param.show = true
param.animal = "BMAP_ANIMATION_BOUNCE"
this.center.lat = param.position.lat;
this.center.lng = param.position.lng;
},
//上下文菜单跳转
gotochengdu (e) {
this.center = {
// 103.943382, lat: 30.750594
lng: 103.943382,
lat:30.750594
}
},
gotoshenzhen (e) {
this.center = {
// 114.036331, lat: 22.730421
lng: 114.036331,
lat: 22.730421
}
},
//鼠标缩放触发函数
mouseEvent(type, target) {
//14 大于 14 显示 小于14 隐藏
if (type.currentTarget.Oa > 14) {
this.lableOpen = true;
} else {
this.lableOpen = false;
}
},
}
}
.BMap_pop {
</script>
> div,
> img:nth-child(10) {
<style scoped>
/*调试信息窗格的样式*/
/*地图标题 infoWindow*/
/deep/ .BMap_bubble_title{
color:#fff;
font-size:18px;
/*font-weight: bold;*/
text-align:left;
background:transparent !important;
}
/deep/ .BMap_bottom {
display: none;
}
/*去除四个角的方块*/
/deep/ .BMap_pop div:nth-child(1){
border-radius:7px 0 0 0;
background:transparent !important;
border:0 !important;
}
/deep/ .BMap_pop > div, > img:nth-child(10) {
display: none;
overflow: unset;
}
> div:nth-child(9) {
/deep/ .BMap_pop > div:nth-child(9) {
display: block;
overflow: unset;
width: 340px !important;
}
> div:nth-child(8) {
/deep/ .BMap_pop > div:nth-child(8) {
/*display: block;*/
}
.BMap_top {
/deep/ .BMap_pop .BMap_top{
display: none;
}
.BMap_center {
/deep/ .BMap_pop .BMap_center{
background: transparent;
border: none;
position: sticky !important;
height: 100%;
}
}
.BMap_bubble_content {
/deep/ .BMap_bubble_content {
background: rgba(0, 0, 0, .5);
border-radius: 5px;
padding: 20px;
.info-window {
}
/deep/ .BMap_bubble_content .info-window{
padding-right: 8px;
width: 100%;
max-height: 280px;
overflow: auto;
.el-divider {
}
/deep/ .BMap_bubble_content .info-window .el-divider{
background: #ccccccbf;
}
.address {
/deep/ .BMap_bubble_content .info-window .address{
color: #fff;
}
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
/deep/ .BMap_pop div:nth-child(8) {
background-color: rgb(255, 255, 255, 0) !important;
/*color: white !important;*/
/*!/设置透明度*!*!*/
/*opacity: 0.6;*/
}
/*//自定义滚动条样式*/
.info-window::-webkit-scrollbar {
/*自定义滚动条*/
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
width: 6px;
height: 1px;
}
.info-window::-webkit-scrollbar-thumb {
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
border-radius: 6px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.info-window::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 6px;
background: #EDEDED;
}
/*修改地图信息窗口对象样式*/
.contain{
width: 100%;
height: 100%;
}
.complete {
width: 210px;
margin-right:15px
}
.map {
/*height: 750px;*/
/*height: 850px;*/
width: 100%;
height: 800px;
}
/*
去除百度地图版权
去除右上角[地图、卫星、三维]控件
去除百度地图右上角平移缩放控件的市县区文字
*/
.map >>> .anchorBL,
/*.map >>> .anchorTR,*/
.map >>> .BMap_zlHolder {
display: none;
visibility: hidden;
}
.conditions-div >>> .el-form-item {
margin: 10px;
}
</style>
</style>

176
src/views/modules/monitoring/test.vue
View File

@ -1,73 +1,32 @@
<template>
<!-- <iframe style="width: 800px; height: 600px;" src="../../../../020/index.html"/>-->
<!-- <iframe :src="this.txtUrl" width="100%" :style="{height:calHeight}" sandbox></iframe>-->
<!-- <iframe src="../../../../public/index.html" width="100%" :style="{height:calHeight}" ></iframe>-->
<!-- <iframe src="http://www.baidu.com/" width="100%" :style="{height:calHeight}" ></iframe>-->
<!-- 摄像头分布图 -->
<!-- 观澜：lng: 114.036331, lat: 22.730421 -->
<!-- 成都lng: 103.943382, lat: 30.750594-->
<div class="contain">
<baidu-map
class="map"
:scroll-wheel-zoom="true"
:double-click-zoom="false"
@zoomend="mouseEvent"
:center="center"
:zoom="zoom">
<!-- 跳转菜单-->
<bm-context-menu width="250">
<bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
<bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
</bm-context-menu>
<!-- 地图类型切换-->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
<!--右下角缩略图-->
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
<bm-map-type :map-types="['BMAP_NORMAL_MAP','BMAP_PERSPECTIVE_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
<div >
<bm-marker :position="{lng: item.position.lng,lat: item.position.lat}" >
<bm-info-window :show="true" class="bminfowindow" >
<div style="color:#fff;font-size:16px;">
<div style="width:220px;font-size: 20px">摄像头数据</div>
<div style="margin-top:5px;height: 3px; width:100%;background-color: #1981E1 !important;"></div>
<!--缩放控件-->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-marker :title="item.content"
:icon="iconUrl"
:position="item.position"
:dragging="true"
@click="infoWindowOpen(item)">
<!-- 搜索框 -->
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<el-input class="complete" v-model="keyword"></el-input>
</bm-auto-complete>
<el-button type="primary" @click="search">搜索</el-button>
</bm-control>
<!-- 信息窗体-->
<bm-info-window :show="item.show" @close="infoWindowClose(item)">
<!-- <p v-text="item.content"></p>-->
<p>经度：{{item.position.lat}}</p>
<p>纬度：{{item.position.lng}}</p>
<img :src="iconUrl.url" style="width:100%" />
</bm-info-window>
</bm-marker>
<bm-marker :title="item.content" :icon="iconUrl" :position="{lng: 103.943382, lat: 30.750594}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
<!--聚合动态添加的点坐标-->
<bm-marker
:icon="iconUrl"
v-for="(item,key ) of this.mapList"
:key="key"
:position="{'lng':item.cameraLongitude,'lat':item.cameraLatitude}"
@rightclick="rightmons(item.idFaceCamera)"
:dragging="false"
>
<bm-label
:massClear="false"
@dblclick="deletePoint(item)"
v-if="lableOpen"
:content="'<div style=display:'+item.displayCss+ '><div >名称:' + item.cameraName+'</div>'+ '<div>位置:' + item.cameraRegionFirstlevelBackUp+'</div>'+'<div>坐标:' + item.cameraLongitude+','+ item.cameraLatitude+'</div></div >'"
:labelStyle="{backgroundColor :'0.05',border :'0',color: 'blue', fontSize : '14px' ,padding:'10px'}"
:offset="{width: -100, height: -90}"
/>
</bm-marker>
<div style="margin-top:10px;width:220px"> 异常区域：</div>
<div style="margin-top:5px;width:220px"> 详细地址：</div>
<div style="margin-top:5px;width:220px"> 严重程度：</div>
<div style="margin-top:5px;width:220px"> 上报人：</div>
<div style="margin-top:5px;width:220px"> 联系方式：</div>
<div style="margin-top:5px;width:220px"> 指派人：</div>
<div style="margin-top:5px;width:220px"> 故障开始时间：</div>
<div style="margin-top:5px;width:220px"> 详细信息：</div>
</div>
</bm-info-window>
</bm-marker>
</div>
</baidu-map>
</div>
@ -84,6 +43,13 @@ export default {
},
data() {
return {
//信息窗口数据导入
Informationwindowdata: {
type: Array,
default() {
return []
}
},
keyword: '',
item:{
position: { lng: 103.931057, lat: 30.755467 },
@ -92,7 +58,7 @@ export default {
},
content:"shexiangtou",
lableOpen: false,
zoom:14,
zoom:18,
center: {
lng: 103.931057, lat: 30.755467
},
@ -141,6 +107,11 @@ export default {
//逆地址解析
search() {
this.item.show = true
for (let i = 0; i <this.mapList.length ; i++) {
if (this.mapList[i].name == this.keyword ){
//到摄像头列表中搜索，将信息窗体显示出来
}
}
},
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
infoWindowClose(param) {
@ -245,6 +216,84 @@ export default {
};
</script>
<style scoped>
/*地图标题 infoWindow*/
/deep/ .BMap_bubble_title{
color:#fff;
font-size:18px;
/*font-weight: bold;*/
text-align:left;
background:transparent !important;
}
/deep/ .BMap_bottom {
display: none;
}
/*去除四个角的方块*/
/deep/ .BMap_pop div:nth-child(1){
border-radius:7px 0 0 0;
background:transparent !important;
border:0 !important;
}
/deep/ .BMap_pop > div, > img:nth-child(10) {
display: none;
overflow: unset;
}
/deep/ .BMap_pop > div:nth-child(9) {
display: block;
overflow: unset;
width: 300px !important;
}
/deep/ .BMap_pop > div:nth-child(8) {
/*display: block;*/
}
/deep/ .BMap_pop .BMap_top{
display: none;
}
/deep/ .BMap_pop .BMap_center{
background: transparent;
border: none;
position: sticky !important;
height: 100%;
}
/deep/ .BMap_bubble_content {
background: rgba(0, 0, 0, .5);
border-radius: 5px;
padding: 20px;
}
/deep/ .BMap_bubble_content .info-window{
padding-right: 8px;
width: 100%;
max-height: 280px;
overflow: auto;
}
/deep/ .BMap_bubble_content .info-window .el-divider{
background: #ccccccbf;
}
/deep/ .BMap_bubble_content .info-window .address{
color: #fff;
}
/*//此处修改百度地图信息窗口的小箭头样式,里面的图标也可以在这里自定义,直接添加 img{}自定义就好了*/
/*/deep/ .BMap_pop div:nth-child(8) {*/
/* background-color: rgb(255, 255, 255, 0) !important;*/
/* !*color: rgb(0, 220, 255) !important;*!*/
/* !/设置透明度*!*!*/
/* !*opacity: 0.6;*!*/
/*}*/
/*自定义滚动条*/
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar{
width: 6px;
height: 1px;
}
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
border-radius: 6px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 6px;
background: #EDEDED;
}
/*修改地图信息窗口对象样式*/
.contain{
width: 100%;
height: 100%;
@ -265,7 +314,7 @@ export default {
去除百度地图右上角平移缩放控件的市县区文字
*/
.map >>> .anchorBL,
.map >>> .anchorTR,
/*.map >>> .anchorTR,*/
.map >>> .BMap_zlHolder {
display: none;
visibility: hidden;
@ -273,4 +322,5 @@ export default {
.conditions-div >>> .el-form-item {
margin: 10px;
}
</style>
</style>