地图功能添加
parent
1248690858
commit
3451db7b8a
|
|
@ -68,8 +68,7 @@
|
|||
:double-click-zoom="false"
|
||||
@zoomend="mouseEvent"
|
||||
:center="{lng: 103.943382, lat: 30.750594 }"
|
||||
:zoom="zoom"
|
||||
>
|
||||
:zoom="zoom">
|
||||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
||||
<bm-marker
|
||||
:icon="iconUrl"
|
||||
|
|
@ -192,36 +191,6 @@ export default {
|
|||
}
|
||||
this.commonSeach();
|
||||
},
|
||||
// 查询
|
||||
searchClick() {
|
||||
this.pageObj.note = {
|
||||
...this.pageObj.note,
|
||||
...this.formModel
|
||||
};
|
||||
if (this.pageObj.note.cameraName != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
} else if (this.pageObj.note.cameratLocationtypeId != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
this.commonSeach();
|
||||
},
|
||||
searchClicks() {
|
||||
this.$http
|
||||
.get(`/camera/getAllList?cameraName=${this.formModel.cameraName}`)
|
||||
.then(res => {
|
||||
this.mapList = res.data.data;
|
||||
});
|
||||
},
|
||||
// 新增/修改
|
||||
addOrUpdateClick(param, row = {}) {
|
||||
console.log(this.$refs.reference);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<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>
|
||||
</bm-info-window>
|
||||
</bm-marker>
|
||||
</div>
|
||||
|
||||
</baidu-map>
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.baidu-map {
|
||||
|
||||
.BMap_bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.BMap_pop {
|
||||
|
||||
> div,
|
||||
> img:nth-child(10) {
|
||||
display: none;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
> div:nth-child(9) {
|
||||
display: block;
|
||||
overflow: unset;
|
||||
width: 340px !important;
|
||||
}
|
||||
|
||||
> div:nth-child(8) {
|
||||
/*display: block;*/
|
||||
}
|
||||
|
||||
.BMap_top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.BMap_center {
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: sticky !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.BMap_bubble_content {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
|
||||
.info-window {
|
||||
padding-right: 8px;
|
||||
width: 100%;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
|
||||
.el-divider {
|
||||
background: #ccccccbf;
|
||||
}
|
||||
|
||||
.address {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
/*//自定义滚动条样式*/
|
||||
.info-window::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.info-window::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
-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);
|
||||
border-radius: 6px;
|
||||
background: #EDEDED;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -7,16 +7,50 @@
|
|||
<!-- <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 >
|
||||
<div class="contain">
|
||||
<baidu-map
|
||||
class="map"
|
||||
:scroll-wheel-zoom="true"
|
||||
:double-click-zoom="false"
|
||||
@zoomend="mouseEvent"
|
||||
:center="{lng: 114.036331, lat: 22.730421 }"
|
||||
: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-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"
|
||||
|
|
@ -50,15 +84,24 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
item:{
|
||||
position: { lng: 103.931057, lat: 30.755467 },
|
||||
show:false,
|
||||
content:"这是一个摄像头"
|
||||
},
|
||||
content:"shexiangtou",
|
||||
lableOpen: false,
|
||||
zoom:14,
|
||||
center: {
|
||||
lng: 103.931057, lat: 30.755467
|
||||
},
|
||||
iconUrl: {
|
||||
url: require("../../../assets/img/video.png"),
|
||||
size: { width: 30, height: 30 }
|
||||
},
|
||||
list: true,
|
||||
mapList: [],
|
||||
position: { lng: 103.931057, lat: 30.755467 },
|
||||
mapOpen: false,
|
||||
// camera 和 camreaView切换，camreaView暂时不用
|
||||
viewState: false,
|
||||
|
|
@ -95,6 +138,35 @@ export default {
|
|||
});
|
||||
this.mapList = arr;
|
||||
},
|
||||
//逆地址解析
|
||||
search() {
|
||||
this.item.show = true
|
||||
},
|
||||
// 覆盖物 点 信息窗体 关闭 --------- bm-info-window 暂时不用
|
||||
infoWindowClose(param) {
|
||||
this.item.show = false
|
||||
},
|
||||
// 覆盖物 点 信息窗体 打开
|
||||
infoWindowOpen(param) {
|
||||
// bm-info-window 暂时不用
|
||||
console.log(param)
|
||||
this.item.show = true
|
||||
},
|
||||
//上下文菜单跳转
|
||||
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 隐藏
|
||||
|
|
@ -165,118 +237,27 @@ export default {
|
|||
this.mapList = res.data.data;
|
||||
});
|
||||
},
|
||||
// 新增/修改
|
||||
addOrUpdateClick(param, row = {}) {
|
||||
console.log(this.$refs.reference);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addUpdateFaceRef.init(param, row.idFaceCamera);
|
||||
});
|
||||
},
|
||||
// 新增/修改回调
|
||||
refreshClick(param) {
|
||||
param === "add" ? (this.pageObj.pageNo = 1) : this.pageObj.pageNo;
|
||||
this.pageObj.note = {
|
||||
...this.pageObj.note,
|
||||
...this.formModel
|
||||
};
|
||||
if (this.pageObj.note.cameraName != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
} else if (this.pageObj.note.cameratLocationtypeId != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
this.commonSeach();
|
||||
},
|
||||
// 删除
|
||||
deleteClick(row) {
|
||||
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.$http.get(`/camera/delete/${row.idFaceCamera}`).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.pageObj.note = { ...this.pageObj.note, ...this.formModel };
|
||||
if (this.pageObj.note.cameraName != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
} else if (this.pageObj.note.cameratLocationtypeId != "") {
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.pageObj.note.cameraRegion.length === 0) {
|
||||
this.pageObj.note.cameraRegion = "";
|
||||
} else {
|
||||
this.pageObj.note.cameraRegion = String(
|
||||
this.pageObj.note.cameraRegion[
|
||||
this.pageObj.note.cameraRegion.length - 1
|
||||
]
|
||||
);
|
||||
this.pageObj.pageNo = 1;
|
||||
}
|
||||
if (this.cameraList.length === 1 && this.pageObj.pageNo > 1) {
|
||||
this.pageObj.pageNo = this.pageObj.pageNo - 1;
|
||||
}
|
||||
this.commonSeach();
|
||||
this.$message.success("删除成功");
|
||||
} else {
|
||||
this.$message.warning(res.data.message);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.info("已取消删除");
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
// 公共查询
|
||||
commonSeach(pageObj = this.pageObj) {
|
||||
this.$http.post("/camera/getList", pageObj).then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.cameraList = res.data.data.records;
|
||||
this.total = Number(res.data.data.total);
|
||||
} else if (res.data.code == 60001) {
|
||||
this.$message.warning(res.data.message);
|
||||
} else {
|
||||
console.log(res);
|
||||
}
|
||||
});
|
||||
this.$http.get("/camera/getAllList").then(res => {
|
||||
this.mapList = res.data.data;
|
||||
this.mapList.forEach(item => {
|
||||
item.displayCss = "block";
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 公共查询
|
||||
this.commonSeach();
|
||||
// 调用树形结构数据
|
||||
this.$http.get("/camera/getRegion").then(res => {
|
||||
if (res.data.code === 0) {
|
||||
this.areaOptions = res.data.data;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.map {
|
||||
height: 750px;
|
||||
.contain{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.conditions-div {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
.complete {
|
||||
width: 210px;
|
||||
margin-right:15px
|
||||
}
|
||||
.map {
|
||||
/*height: 750px;*/
|
||||
/*height: 850px;*/
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
/*
|
||||
去除百度地图版权
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visible:true,
|
||||
warningList: [],
|
||||
// 定义经维度和zoom
|
||||
center: {
|
||||
|
|
@ -184,10 +184,7 @@
|
|||
this.visible = false
|
||||
},
|
||||
// ready
|
||||
handler({
|
||||
Bmap,
|
||||
map
|
||||
}) {
|
||||
handler({Bmap, map}) {
|
||||
this.center.lng = 103.907065
|
||||
this.center.lat = 30.701563
|
||||
this.zoom = 18
|
||||
|
|
|
|||
Loading…
Reference in New Issue