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

地图功能添加

Browse Source
This commit is contained in:
coco1986509808 2024-01-09 17:11:32 +08:00
parent 1248690858
commit 3451db7b8a
4 changed files with 218 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/modules/monitoring/camera.vue
View File

@ -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);

126
src/views/modules/monitoring/map.vue Normal file
View File

@ -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>

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

@ -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,
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;
}
/*
去除百度地图版权

7
src/views/modules/monitoring/warning-map.vue
View File

@ -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