From ba8633e99a27b90c55b47e8f7d6225f1f0efc6bb Mon Sep 17 00:00:00 2001
From: 648540858 <456panlinlin>
Date: 星期五, 08 四月 2022 18:09:23 +0800
Subject: [PATCH] 优化地图-添加地图页面以及设备树
---
web_src/src/components/devicePosition.vue | 577 ++++++++++++++++++++++-----------------------------------
1 files changed, 223 insertions(+), 354 deletions(-)
diff --git a/web_src/src/components/devicePosition.vue b/web_src/src/components/devicePosition.vue
index 777b11e..2674b0f 100644
--- a/web_src/src/components/devicePosition.vue
+++ b/web_src/src/components/devicePosition.vue
@@ -4,388 +4,257 @@
<el-header>
<uiHeader></uiHeader>
</el-header>
+ <el-container>
+ <el-aside width="250px" height="100%" style="background-color: #FFFFFF; margin: 0 0 20px 20px;">
+ <div style=" padding-top: 10px">
+ <el-tree class="el-scrollbar"
+ ref="tree"
+ id="deviceTree"
+ empty-text="鏈煡鑺傜偣"
+ node-key="id"
+ :highlight-current="false"
+ :expand-on-click-node="false"
+ :props="props"
+ :load="loadNode"
+ @node-contextmenu="contextmenuEventHandler"
+ @node-click="nodeClickHandler"
+ lazy>
+ </el-tree>
+ </div>
+
+ </el-aside>
<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>
+ <MapComponent></MapComponent>
</el-main>
+ </el-container>
</el-container>
</div>
</template>
<script>
import uiHeader from "./UiHeader.vue";
-import moment from "moment";
-import geoTools from "./GeoConvertTools.js";
+import MapComponent from "./common/MapComponent.vue";
+import DeviceService from "./service/DeviceService";
export default {
name: "devicePosition",
components: {
- uiHeader,
+ MapComponent,
+ 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: "/deviceList",
- isLoging: false,
- autoList: false,
+ deviceService: new DeviceService(),
+ props: {
+ label: 'name',
+ children: 'children',
+ isLeaf: 'leaf'
+ },
};
},
- mounted() {
- this.initData();
- this.initBaiduMap();
- if (this.autoList) {
- this.updateLooper = setInterval(this.initData, 5000);
- }
+ created() {
+ this.init();
},
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 = "/deviceList";
- // }
- },
- 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);
+ init(){
+
+ },
+ loadNode: function(node, resolve){
+ if (node.level === 0) {
+ this.deviceService.getAllDeviceList((data)=>{
+ console.log("all deivce")
+ console.log(data)
+ if (data.length > 0) {
+ let nodeList = []
+ for (let i = 0; i < data.length; i++) {
+ let node = {
+ name: data[i].name || data[i].deviceId,
+ id: data[i].deviceId,
+ online: data[i].online,
+ deviceId: data[i].deviceId,
+ }
+ nodeList.push(node);
+ }
+ resolve(nodeList)
+ }else {
+ resolve([])
}
- },
- 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;
+ }, (error)=>{
+
+ })
+ }
+ if (node.level === 1){
+ console.log(node)
+ this.deviceService.getAllCatalog(node.data.deviceId, (data)=>{
+ console.log("all Catalog")
+ console.log(data)
+ if (data.length > 0) {
+ let nodeList = []
+ for (let i = 0; i < data.length; i++) {
+ let node = {
+ name: data[i].name || data[i].channelId,
+ id: data[i].channelId,
+ online: data[i].status === 1,
+ deviceId: data[i].deviceId,
+ channelId: data[i].channelId,
+ }
+ nodeList.push(node);
+ }
+ resolve(nodeList)
+ }else {
+ resolve([])
}
- if (!!this.searchTo) {
- this.endTime = this.toGBString(this.searchTo);
- console.log(this.endTime);
- } else {
- this.endTime = null;
+ }, (error)=>{
+
+ })
+ }
+
+ if (node.level > 1) {
+ console.log(node.data.channelId)
+ this.deviceService.getAllSubCatalog(node.data.deviceId, node.data.channelId, (data)=>{
+ console.log("all Catalog")
+ console.log(data)
+ if (data.length > 0) {
+ let nodeList = []
+ for (let i = 0; i < data.length; i++) {
+ let node = {
+ name: data[i].name || data[i].channelId,
+ id: data[i].channelId,
+ online: data[i].status === 1,
+ deviceId: data[i].deviceId,
+ channelId: data[i].channelId,
+ }
+ nodeList.push(node);
+ }
+ resolve(nodeList)
+ }else {
+ resolve([])
}
- let self = this;
- this.$axios({
- method: 'get',
- url:`/api/position/history/${this.deviceId}`,
- params: {
- start: self.startTime,
- end: self.endTime,
+ }, (error)=>{
+
+ })
+ }
+ },
+ contextmenuEventHandler: function (event,data,node,element){
+ if (node.data.type !== 0) {
+ data.parentId = node.parent.data.id;
+ this.$contextmenu({
+ items: [
+ {
+ label: "绉婚櫎閫氶亾",
+ icon: "el-icon-delete",
+ disabled: false,
+ onClick: () => {
+ this.$axios({
+ method:"delete",
+ url:"/api/platform/catalog/relation/del",
+ data: data
+ }).then((res)=>{
+ console.log("绉婚櫎鎴愬姛")
+ node.parent.loaded = false
+ node.parent.expand();
+ }).catch(function (error) {
+ console.log(error);
+ });
+ }
+ }
+ ],
+ event, // 榧犳爣浜嬩欢淇℃伅
+ customClass: "custom-class", // 鑷畾涔夎彍鍗� class
+ zIndex: 3000, // 鑿滃崟鏍峰紡 z-index
+ });
+ }else {
+ this.$contextmenu({
+ items: [
+ {
+ label: "鍒锋柊鑺傜偣",
+ icon: "el-icon-refresh",
+ disabled: false,
+ onClick: () => {
+ this.refreshCatalog(node);
+ }
+ },
+ {
+ label: "鏂板缓鑺傜偣",
+ icon: "el-icon-plus",
+ disabled: false,
+ onClick: () => {
+ this.addCatalog(data.id, node);
+ }
+ },
+ {
+ label: "淇敼鑺傜偣",
+ icon: "el-icon-edit",
+ disabled: node.level === 1,
+ onClick: () => {
+ this.editCatalog(data, node);
+ }
+ },
+ {
+ label: "鍒犻櫎鑺傜偣",
+ icon: "el-icon-delete",
+ disabled: node.level === 1,
+ divided: true,
+ onClick: () => {
+ this.$confirm('纭畾鍒犻櫎?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.removeCatalog(data.id, node)
+ }).catch(() => {
+
+ });
+ }
+ },
+ {
+ label: "璁句负榛樿",
+ icon: "el-icon-folder-checked",
+ disabled: node.data.id === this.defaultCatalogIdSign,
+ onClick: () => {
+ this.setDefaultCatalog(data.id)
},
- }).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({
- 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);
- 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({
- 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) {
- console.log(error);
- });
- },
- unSubscribeMobilePosition: function() {
- let self = this;
- 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) {
- 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);
- },
+ },
+ // {
+ // label: "瀵煎嚭",
+ // icon: "el-icon-download",
+ // disabled: false,
+ // children: [
+ // {
+ // label: "瀵煎嚭鍒版枃浠�",
+ // onClick: () => {
+ //
+ // },
+ // },
+ // {
+ // label: "瀵煎嚭鍒板叾浠栧钩鍙�",
+ // onClick: () => {
+ //
+ // },
+ // }
+ // ]
+ // },
+
+ ],
+ event, // 榧犳爣浜嬩欢淇℃伅
+ customClass: "custom-class", // 鑷畾涔夎彍鍗� class
+ zIndex: 3000, // 鑿滃崟鏍峰紡 z-index
+ });
+ }
+
+ return false;
+ },
+ nodeClickHandler: function (data, node, tree){
+ this.chooseId = data.id;
+ this.chooseName = data.name;
+ if (this.catalogIdChange)this.catalogIdChange(this.chooseId, this.chooseName);
+ }
},
};
</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