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> <template>
<baidu-map <div class="contain">
class="map" <baidu-map
:center="center" class="map"
:zoom="zoom" :scroll-wheel-zoom="true"
scroll-wheel-zoom :double-click-zoom="false"
@ready="changeCenterAndZoom" @zoomend="mouseEvent"
:mapStyle="mapStyle" :center="center"
> :zoom="zoom">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <!-- 跳转菜单-->
<bm-context-menu width="250">
<div v-for="(item, index) in markers" :key="index"> <bm-context-menu-item :callback="gotoshenzhen" text="去深圳采集点"></bm-context-menu-item>
<bm-marker <bm-context-menu-item :callback="gotochengdu" text="去成都采集点"></bm-context-menu-item>
:position="item.position" </bm-context-menu>
:icon="item.icon" <!-- 右上角地图类型切换-->
@click="infoWindowOpen(item)" <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
> <!--右下角缩略图-->
<bm-info-window <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
:show="item.show" <!-- 右下角定位-->
@close="infoWindowClose(item)" <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
@open="infoWindowOpen(item)" <!-- 搜索框 -->
> <bm-control :offset="{width: '10px', height: '10px'}">
<div class="info-window"> <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<div v-for="device in item.deviceInfo"> <el-input class="complete" v-model="keyword"></el-input>
<div style="cursor: pointer; color: #fff;" @click="goDevice(device.gateway.mac)">{{$t('lang.device')}} {{device.gateway.mac}}</div> </bm-auto-complete>
<div style="margin-top:5px"> <el-button type="primary" @click="search">搜索</el-button>
<span style="color: red" v-if="device.status==0">{{$t('lang.offline')}}</span> </bm-control>
<span style="color: #67c23a" v-if="device.status==1">{{$t('lang.online')}}</span> <!--缩放控件-->
<span v-if="device.status==2">{{$t('lang.alarm')}}</span> <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
<span v-if="device.status==3">{{$t('lang.fault')}}</span> <bm-marker v-for="(item,key ) of this.mapList" :key="key"
</div> :title="item.content"
<el-divider></el-divider> :icon="iconUrl"
</div> :position="item.position"
<div class="address">{{$t('lang.detail-site')}}:{{item.address}}</div> :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> </div>
</bm-info-window> </bm-info-window>
</bm-marker> </bm-marker>
</div> </baidu-map>
</div>
</baidu-map>
</template> </template>
<script> <script>
export default {
data(){
</script> return{
<style> mapList:[
.baidu-map { {
position: { lng: 103.931057, lat: 30.755467 },
.BMap_bottom { show:false,
display: none; 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, <style scoped>
> img:nth-child(10) { /*调试信息窗格的样式*/
/*地图标题 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; display: none;
overflow: unset; overflow: unset;
} }
/deep/ .BMap_pop > div:nth-child(9) {
> div:nth-child(9) {
display: block; display: block;
overflow: unset; overflow: unset;
width: 340px !important; width: 340px !important;
} }
/deep/ .BMap_pop > div:nth-child(8) {
> div:nth-child(8) {
/*display: block;*/ /*display: block;*/
} }
/deep/ .BMap_pop .BMap_top{
.BMap_top {
display: none; display: none;
} }
/deep/ .BMap_pop .BMap_center{
.BMap_center {
background: transparent; background: transparent;
border: none; border: none;
position: sticky !important; position: sticky !important;
height: 100%; height: 100%;
} }
/deep/ .BMap_bubble_content {
}
.BMap_bubble_content {
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5);
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
}
.info-window { /deep/ .BMap_bubble_content .info-window{
padding-right: 8px; padding-right: 8px;
width: 100%; width: 100%;
max-height: 280px; max-height: 280px;
overflow: auto; overflow: auto;
}
.el-divider { /deep/ .BMap_bubble_content .info-window .el-divider{
background: #ccccccbf; background: #ccccccbf;
} }
/deep/ .BMap_bubble_content .info-window .address{
.address {
color: #fff; 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; width: 6px;
height: 1px; height: 1px;
} }
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-thumb{
.info-window::-webkit-scrollbar-thumb {
border-radius: 6px; 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; background: #535353;
} }
/deep/ .BMap_bubble_content .info-window::-webkit-scrollbar-track{
.info-window::-webkit-scrollbar-track { -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);
border-radius: 6px; border-radius: 6px;
background: #EDEDED; 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> <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"> <div class="contain">
<baidu-map <baidu-map
class="map" class="map"
:scroll-wheel-zoom="true" :scroll-wheel-zoom="true"
:double-click-zoom="false" :double-click-zoom="false"
@zoomend="mouseEvent"
:center="center" :center="center"
:zoom="zoom"> :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-map-type :map-types="['BMAP_NORMAL_MAP','BMAP_PERSPECTIVE_MAP','BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
<!--右下角缩略图--> <div >
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> <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>
<!--缩放控件--> <div style="margin-top:10px;width:220px"> 异常区域：</div>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> <div style="margin-top:5px;width:220px"> 详细地址：</div>
<bm-marker :title="item.content" <div style="margin-top:5px;width:220px"> 严重程度：</div>
:icon="iconUrl" <div style="margin-top:5px;width:220px"> 上报人：</div>
:position="item.position" <div style="margin-top:5px;width:220px"> 联系方式：</div>
:dragging="true" <div style="margin-top:5px;width:220px"> 指派人：</div>
@click="infoWindowOpen(item)"> <div style="margin-top:5px;width:220px"> 故障开始时间：</div>
<!-- 搜索框 --> <div style="margin-top:5px;width:220px"> 详细信息：</div>
<bm-control :offset="{width: '10px', height: '10px'}"> </div>
<bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}"> </bm-info-window>
<el-input class="complete" v-model="keyword"></el-input> </bm-marker>
</bm-auto-complete> </div>
<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>
</baidu-map> </baidu-map>
</div> </div>
@ -84,6 +43,13 @@ export default {
}, },
data() { data() {
return { return {
//信息窗口数据导入
Informationwindowdata: {
type: Array,
default() {
return []
}
},
keyword: '', keyword: '',
item:{ item:{
position: { lng: 103.931057, lat: 30.755467 }, position: { lng: 103.931057, lat: 30.755467 },
@ -92,7 +58,7 @@ export default {
}, },
content:"shexiangtou", content:"shexiangtou",
lableOpen: false, lableOpen: false,
zoom:14, zoom:18,
center: { center: {
lng: 103.931057, lat: 30.755467 lng: 103.931057, lat: 30.755467
}, },
@ -141,6 +107,11 @@ export default {
//逆地址解析 //逆地址解析
search() { search() {
this.item.show = true this.item.show = true
for (let i = 0; i <this.mapList.length ; i++) {
if (this.mapList[i].name == this.keyword ){
//到摄像头列表中搜索，将信息窗体显示出来
}
}
}, },
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用 // 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
infoWindowClose(param) { infoWindowClose(param) {
@ -245,6 +216,84 @@ export default {
}; };
</script> </script>
<style scoped> <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{ .contain{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -265,7 +314,7 @@ export default {
去除百度地图右上角平移缩放控件的市县区文字 去除百度地图右上角平移缩放控件的市县区文字
*/ */
.map >>> .anchorBL, .map >>> .anchorBL,
.map >>> .anchorTR, /*.map >>> .anchorTR,*/
.map >>> .BMap_zlHolder { .map >>> .BMap_zlHolder {
display: none; display: none;
visibility: hidden; visibility: hidden;
@ -273,4 +322,5 @@ export default {
.conditions-div >>> .el-form-item { .conditions-div >>> .el-form-item {
margin: 10px; margin: 10px;
} }
</style>
</style>