From fb843d41c1e186b2109bfeea73509cad2b135cdc Mon Sep 17 00:00:00 2001
From: xiaoxie <hotcoffie@163.com>
Date: 星期四, 21 四月 2022 12:33:10 +0800
Subject: [PATCH] 1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等
---
web_src/src/components/devicePosition.vue | 145 +++++++++++++++++++++++++----------------------
1 files changed, 77 insertions(+), 68 deletions(-)
diff --git a/web_src/src/components/devicePosition.vue b/web_src/src/components/devicePosition.vue
index 2910623..0ffd5fa 100644
--- a/web_src/src/components/devicePosition.vue
+++ b/web_src/src/components/devicePosition.vue
@@ -1,43 +1,35 @@
<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 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>
</div>
</template>
<script>
-import uiHeader from "./UiHeader.vue";
-import moment from "moment";
+import uiHeader from "../layout/UiHeader.vue";
import geoTools from "./GeoConvertTools.js";
export default {
name: "devicePosition",
@@ -81,7 +73,7 @@
parentChannelId: this.$route.params.parentChannelId,
updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織
total: 0,
- beforeUrl: "/videoList",
+ beforeUrl: "/deviceList",
isLoging: false,
autoList: false,
};
@@ -111,7 +103,7 @@
// this.currentPage = parseInt(this.$route.params.page);
// this.count = parseInt(this.$route.params.count);
// if (this.parentChannelId == "" || this.parentChannelId == 0) {
- // this.beforeUrl = "/videoList";
+ // this.beforeUrl = "/deviceList";
// }
},
initBaiduMap() {
@@ -171,22 +163,29 @@
this.endTime = null;
}
let self = this;
- this.$axios.get(`/api/positions/${this.deviceId}/history`, {
+ this.$axios({
+ method: 'get',
+ url:`/api/position/history/${this.deviceId}`,
params: {
start: self.startTime,
end: self.endTime,
},
- })
- .then(function (res) {
+ }).then(function (res) {
self.total = res.data.length;
self.mobilePositionList = res.data;
console.log(self.mobilePositionList);
- // 闃叉鍑虹幇琛ㄦ牸閿欎綅
- self.$nextTick(() => {
- self.showMarkPoints(self);
- });
- })
- .catch(function (error) {
+ if (self.total == 0) {
+ self.$message({
+ showClose: true,
+ message: '鏈壘鍒扮鍚堟潯浠剁殑绉诲姩浣嶇疆淇℃伅',
+ type: 'error'
+ });
+ } else {
+ self.$nextTick(() => {
+ self.showMarkPoints(self);
+ });
+ }
+ }).catch(function (error) {
console.log(error);
});
},
@@ -195,30 +194,39 @@
this.mapPointList = [];
this.mobilePositionList = [];
let self = this;
- this.$axios.get(`/api/positions/${this.deviceId}/latest`)
- .then(function (res) {
+ this.$axios({
+ method: 'get',
+ url:`/api/position/latest/${this.deviceId}`
+ }).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) {
+ 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) {
+ this.$axios({
+ method: 'get',
+ url:`/api/position/subscribe/${this.deviceId}`,
+ params: {
+ expires: self.expired,
+ interval: self.interval,
+ },
+ }).then(function (res) {
console.log(res.data);
})
.catch(function (error) {
@@ -227,22 +235,23 @@
},
unSubscribeMobilePosition: function() {
let self = this;
- this.$axios.get(`/api/positions/${this.deviceId}/subscribe`, {
- params: {
- expires: 0,
- interval: self.interval,
- },
+ this.$axios({
+ method: 'get',
+ url:`/api/position/subscribe/${this.deviceId}`,
+ params: {
+ expires: 0,
+ interval: self.interval,
+ },
})
.then(function (res) {
console.log(res.data);
- })
- .catch(function (error) {
+ }).catch(function (error) {
console.log(error);
});
},
toGBString: function (dateTime) {
return (
- dateTime.getFullYear() +
+ dateTime.getFullYear() +
"-" + this.twoDigits(dateTime.getMonth() + 1) +
"-" + this.twoDigits(dateTime.getDate()) +
"T" + this.twoDigits(dateTime.getHours()) +
--
Gitblit v1.8.0