From d3fa1dd2262fc311661aa675e4a30b2423c7b130 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期四, 04 二月 2021 10:35:02 +0800
Subject: [PATCH] Merge pull request #47 from lawrencehj/master
---
web_src/src/components/devicePosition.vue | 388 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 388 insertions(+), 0 deletions(-)
diff --git a/web_src/src/components/devicePosition.vue b/web_src/src/components/devicePosition.vue
new file mode 100644
index 0000000..f6cf19e
--- /dev/null
+++ b/web_src/src/components/devicePosition.vue
@@ -0,0 +1,388 @@
+<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);
+ if (self.total == 0) {
+ self.$message({
+ showClose: true,
+ message: '鏈壘鍒扮鍚堟潯浠剁殑绉诲姩浣嶇疆淇℃伅',
+ type: 'error'
+ });
+ } else {
+ 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);
+ if (self.total == 0) {
+ self.$message({
+ showClose: true,
+ message: '鏈壘鍒扮鍚堟潯浠剁殑绉诲姩浣嶇疆淇℃伅',
+ type: 'error'
+ });
+ } else {
+ 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>
--
Gitblit v1.8.0