XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加移动位置显示功能

Browse Source
This commit is contained in:
Lawrence
2021-01-27 15:24:28 +08:00
parent b0088b8bd3
commit 9571eb3a15
9 changed files with 744 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
web_src/src/components/devicePosition.vue Normal file
View File

@@ -0,0 +1,374 @@
<template>
<div id="devicePosition" style="height: 100%">
<el-container style="height: 100%">
<el-header>
<uiHeader></uiHeader>
</el-header>
<el-main>
<div style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
<span style="font-size: 1rem; font-weight: 500">设备定位 ({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>
</div>
<div style="background-color: #ffffff; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left; font-size: 14px;">
<el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem" type="primary" @click="showDevice">返回</el-button>
<!-- <span class="demonstration">从</span> -->
<el-date-picker v-model="searchFrom" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
<el-date-picker v-model="searchTo" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
<el-button-group>
<el-button icon="el-icon-search" size="mini" type="primary" @click="showHistoryPath">历史轨迹</el-button>
<el-button icon="el-icon-search" size="mini" style="margin-right: 1rem" type="primary" @click="showLatestPosition">最新位置</el-button>
</el-button-group>
<el-tag style="width: 5rem; text-align: center" size="medium">过期时间</el-tag>
<el-input-number size="mini" v-model="expired" :min="300" :controls="false" style="width: 4rem;"></el-input-number>
<el-tag style="width: 5rem; text-align: center" size="medium">上报周期</el-tag>
<el-input-number size="mini" v-model="interval" :min="1" :controls="false" style="width: 4rem;"></el-input-number>
<el-button-group>
<el-button icon="el-icon-search" size="mini" type="primary" @click="subscribeMobilePosition">位置订阅</el-button>
<el-button icon="el-icon-search" size="mini" type="primary" @click="unSubscribeMobilePosition">取消订阅</el-button>
</el-button-group>
<el-checkbox size="mini" style="margin-right: 1rem; float: right" v-model="autoList" @change="autoListChange" >自动刷新</el-checkbox>
</div>
<div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);">
<div class="baidumap" id="allmap"></div>
</div>
</el-main>
</el-container>
</div>
</template>
<script>
import uiHeader from "./UiHeader.vue";
import moment from "moment";
import geoTools from "./GeoConvertTools.js";
export default {
name: "devicePosition",
components: {
uiHeader,
},
data() {
return {
pickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
deviceId: this.$route.params.deviceId,
showHistoryPosition: false, //显示历史轨迹
startTime: null,
endTime: null,
searchFrom: null,
searchTo: null,
expired: 600,
interval: 5,
mobilePositionList: [],
mapPointList: [],
parentChannelId: this.$route.params.parentChannelId,
updateLooper: 0, //数据刷新轮训标志
total: 0,
beforeUrl: "/videoList",
isLoging: false,
autoList: false,
};
},
mounted() {
this.initData();
this.initBaiduMap();
if (this.autoList) {
this.updateLooper = setInterval(this.initData, 5000);
}
},
destroyed() {
// this.$destroy("videojs");
clearTimeout(this.updateLooper);
},
methods: {
initData: function () {
// if (this.parentChannelId == "" || this.parentChannelId == 0) {
// this.getDeviceChannelList();
// } else {
// this.showSubchannels();
// }
},
initParam: function () {
// this.deviceId = this.$route.params.deviceId;
// this.parentChannelId = this.$route.params.parentChannelId;
// this.currentPage = parseInt(this.$route.params.page);
// this.count = parseInt(this.$route.params.count);
// if (this.parentChannelId == "" || this.parentChannelId == 0) {
// this.beforeUrl = "/videoList";
// }
},
initBaiduMap() {
this.map = new BMap.Map("allmap"); // 创建地图实例
let points = [];
let point = new BMap.Point(116.231398, 39.567445); // 创建点坐标
this.map.centerAndZoom(point, 5); // 初始化地图，设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
this.map.addControl(new BMap.NavigationControl());
this.map.addControl(new BMap.ScaleControl());
this.map.addControl(new BMap.OverviewMapControl());
this.map.addControl(new BMap.MapTypeControl());
//map.setMapStyle({ style: 'midnight' }) //地图风格
},
currentChange: function (val) {
// var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}`;
// console.log(url);
// this.$router.push(url).then(() => {
// this.initParam();
// this.initData();
// });
},
handleSizeChange: function (val) {
// var url = `/${this.$router.currentRoute.name}/${this.$router.params.deviceId}/${this.$router.params.parentChannelId}/${val}/1`;
// this.$router.push(url).then(() => {
// this.initParam();
// this.initData();
// });
},
showDevice: function () {
this.$router.push(this.beforeUrl).then(() => {
this.initParam();
this.initData();
});
},
autoListChange: function () {
if (this.autoList) {
this.updateLooper = setInterval(this.initData, 1500);
} else {
window.clearInterval(this.updateLooper);
}
},
showHistoryPath: function () {
this.map.clearOverlays();
this.mapPointList = [];
this.mobilePositionList = [];
if (!!this.searchFrom) {
this.startTime = this.toGBString(this.searchFrom);
console.log(this.startTime);
} else{
this.startTime = null;
}
if (!!this.searchTo) {
this.endTime = this.toGBString(this.searchTo);
console.log(this.endTime);
} else {
this.endTime = null;
}
let self = this;
this.$axios.get(`/api/positions/${this.deviceId}/history`, {
params: {
start: self.startTime,
end: self.endTime,
},
})
.then(function (res) {
self.total = res.data.length;
self.mobilePositionList = res.data;
console.log(self.mobilePositionList);
// 防止出现表格错位
self.$nextTick(() => {
self.showMarkPoints(self);
});
})
.catch(function (error) {
console.log(error);
});
},
showLatestPosition: function() {
this.map.clearOverlays();
this.mapPointList = [];
this.mobilePositionList = [];
let self = this;
this.$axios.get(`/api/positions/${this.deviceId}/latest`)
.then(function (res) {
console.log(res.data);
self.total = res.data.length;
self.mobilePositionList.push(res.data);
console.log(self.mobilePositionList);
// 防止出现表格错位
self.$nextTick(() => {
self.showMarkPoints(self);
});
})
.catch(function (error) {
console.log(error);
});
},
subscribeMobilePosition: function() {
let self = this;
this.$axios.get(`/api/positions/${this.deviceId}/subscribe`, {
params: {
expires: self.expired,
interval: self.interval,
},
})
.then(function (res) {
console.log(res.data);
})
.catch(function (error) {
console.log(error);
});
},
unSubscribeMobilePosition: function() {
let self = this;
this.$axios.get(`/api/positions/${this.deviceId}/subscribe`, {
params: {
expires: 0,
interval: self.interval,
},
})
.then(function (res) {
console.log(res.data);
})
.catch(function (error) {
console.log(error);
});
},
toGBString: function (dateTime) {
return (
dateTime.getFullYear() +
"-" + this.twoDigits(dateTime.getMonth() + 1) +
"-" + this.twoDigits(dateTime.getDate()) +
"T" + this.twoDigits(dateTime.getHours()) +
":" + this.twoDigits(dateTime.getMinutes()) +
":" + this.twoDigits(dateTime.getSeconds())
);
},
twoDigits: function (num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
},
showMarkPoints: function(self) {
let that = self;
let npointJ = null;
let npointW = null;
let point = null;
for (let i = 0; i < self.mobilePositionList.length; i++) {
if (self.mobilePositionList[i].geodeticSystem == "BD-09") {
npointJ = self.mobilePositionList[i].cnLng;
npointW = self.mobilePositionList[i].cnLat;
point = new BMap.Point(npointJ, npointW);
} else {
npointJ = self.mobilePositionList[i].longitude;
npointW = self.mobilePositionList[i].latitude;
let bd2 = geoTools.GPSToBaidu(npointJ, npointW);
point = new BMap.Point(bd2.lat, bd2.lng);
}
self.mapPointList.push(point);
let marker = new BMap.Marker(point); // 创建标注
self.map.addOverlay(marker); // 将标注添加到地图中
//提示信息 可以解析 HTML标签以及CSS
let infoWindow = new BMap.InfoWindow(`<p style='text-align:left;font-weight:800'>设备: ${self.mobilePositionList[i].deviceId}</p>
<p style='text-align:left;font-weight:0'>时间: ${self.mobilePositionList[i].time}</p>`);
// 鼠标移上标注点要发生的事
marker.addEventListener("mouseover", function () {
this.openInfoWindow(infoWindow);
});
// 鼠标移开标注点要发生的事
marker.addEventListener("mouseout", function () {
this.closeInfoWindow(infoWindow);
});
// 鼠标点击标注点要发生的事情
marker.addEventListener("click", function () {
alert("点击");
});
}
let view = that.map.getViewport(eval(self.mapPointList));
that.map.centerAndZoom(view.center, view.zoom);
},
},
};
</script>
<style>
.videoList {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.video-item {
position: relative;
width: 15rem;
height: 10rem;
margin-right: 1rem;
background-color: #000000;
}
.video-item-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.video-item-img:after {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 3rem;
height: 3rem;
background-image: url("../assets/loading.png");
background-size: cover;
background-color: #000000;
}
.video-item-title {
position: absolute;
bottom: 0;
color: #000000;
background-color: #ffffff;
line-height: 1.5rem;
padding: 0.3rem;
width: 14.4rem;
}
.baidumap {
width: 100%;
height: 100%;
border: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}
</style>