From 50f52beb0ed100105166f62027cd0b15e6b596dc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 12 十一月 2022 15:02:01 +0800
Subject: [PATCH] 重新
---
src/components/mapsdk.vue | 416 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 298 insertions(+), 118 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index d971275..3dfee35 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -1,5 +1,13 @@
<template>
- <div id="mapdiv" class="mapdiv">
+ <div id="mapdiv">
+ <div class="menu_Top" v-if="$store.state.mapMenuBoolean">
+ <map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" />
+ <map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" />
+ </div>
+ <div class="menu_Popup" v-if="$store.state.mapPopBoolean">
+ <map-menu-pop v-if="$store.state.mapPopBoxFlag == '1'" />
+ <map-space-pop v-if="$store.state.mapPopBoxFlag == '2'" />
+ </div>
<div class="bufferBox" v-if="showBufferBoxDialog">
<el-card class="box-card">
<div slot="header" class="clearfix">
@@ -155,12 +163,23 @@
<script>
import $ from 'jquery';
+import mapMenuTop from './MapView/mapMenuTop.vue';
+import mapMenuPop from './MapView/mapMenuPop.vue';
+import mapSpaceTop from './MapView/mapSpaceTop.vue';
+import mapSpacePop from './MapView/mapSpacePop.vue';
+
import {
select_Comprehensive_ByPageAndCount,
select_Comprehensive_SelectWktById,
} from '../api/api';
export default {
name: '',
+ components: {
+ mapMenuTop,
+ mapMenuPop,
+ mapSpaceTop,
+ mapSpacePop,
+ },
data() {
return {
centerFlag: false,
@@ -188,6 +207,7 @@
pageSize: 10,
},
count: 0,
+ selFrom: {},
tableData: [],
imagePoint: null,
handler: null,
@@ -197,6 +217,63 @@
isActive: false,
isMenuLayer: true,
+ selFrom: {},
+ selectTree: null,
+
+ menuList: [
+ {
+ id: 1,
+ label: '涓�绾� 1',
+ children: [
+ {
+ id: 4,
+ label: '浜岀骇 1-1',
+ children: [
+ {
+ id: 9,
+ label: '涓夌骇 1-1-1',
+ },
+ {
+ id: 10,
+ label: '涓夌骇 1-1-2',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 2,
+ label: '涓�绾� 2',
+ children: [
+ {
+ id: 5,
+ label: '浜岀骇 2-1',
+ },
+ {
+ id: 6,
+ label: '浜岀骇 2-2',
+ },
+ ],
+ },
+ {
+ id: 3,
+ label: '涓�绾� 3',
+ children: [
+ {
+ id: 7,
+ label: '浜岀骇 3-1',
+ },
+ {
+ id: 8,
+ label: '浜岀骇 3-2',
+ },
+ ],
+ },
+ ],
+ defaultProps: {
+ children: 'children',
+ label: 'label',
+ }, //鏍戠粦瀹氬璞�
};
},
mounted() {
@@ -319,24 +396,38 @@
},
//鏄剧ず寮圭獥
showChangeBox(res) {
- if (res.name == 'Query') {
- if (res.id == '6') {
- } else if (res.id == '7') {
- } else {
- this.showBufferBoxDialog = true;
- }
- } else if (res.name == 'Coord') {
- if (res.id == '1') {
- this.showCoordLocalBoxDialog = true;
- } else if (res.id == '2') {
- this.showToponymicLocalBoxDialog = true;
- this.getToponymicData();
- }
- } else if (res.name == 'Analysis') {
- if (res.id == '3') {
- this.showPathAnalysisBoxDialog = true;
- }
+ switch (res.name) {
+ case 'Query':
+ if (res.id == '6') {
+ } else if (res.id == '7') {
+ } else {
+ this.showBufferBoxDialog = true;
+ }
+ break;
+ case 'Coord':
+ if (res.id == '1') {
+ this.showCoordLocalBoxDialog = true;
+ } else if (res.id == '2') {
+ this.showToponymicLocalBoxDialog = true;
+ this.getToponymicData();
+ }
+ break;
+ case 'Analysis':
+ if (res.id == '3') {
+ this.showPathAnalysisBoxDialog = true;
+ }
+ break;
+ case 'exportLayer':
+ if (res.id == 1) {
+ } else if (res.id == 2) {
+ this.changeMenulayer();
+ }
+ break;
}
+ // if (res.name == 'Query') {
+ // } else if (res.name == 'Coord') {
+ // } else if (res.name == 'Analysis') {
+ // }
},
handleSizeChange(val) {
this.listData.pageSize = val;
@@ -646,101 +737,184 @@
};
</script>
-<style scoped>
-.mapdiv {
+<style scoped lang="less">
+// .mapBox {
+// width: 100%;
+// height: 100%;
+// overflow: hidden;
+// margin: 0;
+// padding: 0;
+
+#mapdiv {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
position: relative;
-}
-.bufferBox {
- width: 412px;
- height: 230px;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.pathAnalysisBox {
- width: 412px;
+ .toponymicLocalBox {
+ width: 750px;
+ height: 450x;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .bufferBox {
+ width: 412px;
+ height: 230px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .coordLocalBox {
+ width: 350px;
+ height: 370px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .pathAnalysisBox {
+ width: 412px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+ }
+ .exportBoxLayer {
+ z-index: 40;
+ position: absolute;
+ top: 3%;
+ left: 20%;
+ }
+ .exportMenuLayer {
+ z-index: 40;
+ position: absolute;
+ top: 15%;
+ left: 2%;
+ width: 15%;
+ }
+ .box-body {
+ padding: 18px;
+ /deep/ .el-form-item__label {
+ color: white !important;
+ }
+ /deep/ .el-input__inner {
+ background: rgba(255, 255, 255, 0.2) !important;
+ color: white !important;
+ }
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.coordLocalBox {
- width: 350px;
- height: 370px;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.toponymicLocalBox {
- width: 750px;
- height: 450x;
- z-index: 40;
- position: absolute;
- right: 1%;
- bottom: 1%;
-}
-.box-card {
- background-color: rgba(0, 0, 0, 0.6);
- border: 1px solid rgba(32, 160, 255, 0.6);
- color: white;
-}
-.box-body {
- padding: 18px;
-}
-/deep/ .el-form-item__label {
- color: white !important;
-}
-/deep/ .el-input__inner {
- background: rgba(255, 255, 255, 0.2) !important;
- color: white !important;
-}
+ /deep/.el-table,
+ .el-table__expanded-cell {
+ background-color: transparent;
+ color: white;
+ }
-::v-deep .el-table,
-.el-table__expanded-cell {
- background-color: transparent;
- color: white;
-}
+ /deep/ .el-table tr {
+ background-color: transparent !important;
+ }
+ /deep/ .el-table tbody tr:hover > td {
+ background-color: rgba(255, 255, 255, 0.2) !important;
+ }
+ /deep/.el-table鈥揺nable-row-transition .el-table__body td,
+ .el-table .cell {
+ background-color: transparent !important;
+ }
+ /deep/ .el-table th.el-table__cell {
+ background-color: transparent !important;
+ color: white;
+ }
+ /deep/.el-pager li {
+ background-color: transparent !important;
+ color: white;
+ }
+ /deep/ .btn-prev {
+ background-color: transparent !important;
+ }
+ /deep/ .btn-next {
+ background-color: transparent !important;
+ color: white !important;
+ }
+ /deep/ .el-pagination__total {
+ color: white;
+ }
+ /deep/ .el-pagination__jump {
+ color: white;
+ }
+ }
-::v-deep .el-table tr {
- background-color: transparent !important;
+ .box-card {
+ background-color: rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(32, 160, 255, 0.6);
+ color: white;
+ }
+ .menu_Top {
+ background: rgba(0, 0, 0, 0.5);
+ width: 100%;
+ height: 6%;
+ padding: 1%;
+ position: absolute;
+ z-index: 40;
+ }
+ .menu_Popup {
+ background: rgba(0, 0, 0, 0.6);
+ width: 60%;
+ height: 45%;
+
+ left: 20%;
+ bottom: 5%;
+ position: absolute;
+ z-index: 40;
+ }
}
-::v-deep .el-table tbody tr:hover > td {
- background-color: rgba(255, 255, 255, 0.2) !important;
-}
-::v-deep .el-table鈥揺nable-row-transition .el-table__body td,
-.el-table .cell {
- background-color: transparent !important;
-}
-::v-deep .el-table th.el-table__cell {
- background-color: transparent !important;
- color: white;
-}
-::v-deep .el-pager li {
- background-color: transparent !important;
- color: white;
-}
-::v-deep .btn-prev {
- background-color: transparent !important;
-}
-::v-deep .btn-next {
- background-color: transparent !important;
- color: white !important;
-}
-::v-deep .el-pagination__total {
- color: white;
-}
-::v-deep .el-pagination__jump {
- color: white;
-}
+// }
+
+// /deep/
+// /deep/ .el-input__inner {
+// background: rgba(255, 255, 255, 0.2) !important;
+// color: white !important;
+// }
+
+// ::v-deep .el-table,
+// .el-table__expanded-cell {
+// background-color: transparent;
+// color: white;
+// }
+
+// ::v-deep .el-table tr {
+// background-color: transparent !important;
+// }
+// ::v-deep .el-table tbody tr:hover > td {
+// background-color: rgba(255, 255, 255, 0.2) !important;
+// }
+// ::v-deep .el-table鈥揺nable-row-transition .el-table__body td,
+// .el-table .cell {
+// background-color: transparent !important;
+// }
+// ::v-deep .el-table th.el-table__cell {
+// background-color: transparent !important;
+// color: white;
+// }
+// ::v-deep .el-pager li {
+// background-color: transparent !important;
+// color: white;
+// }
+// ::v-deep .btn-prev {
+// background-color: transparent !important;
+// }
+// ::v-deep .btn-next {
+// background-color: transparent !important;
+// color: white !important;
+// }
+// ::v-deep .el-pagination__total {
+// color: white;
+// }
+// ::v-deep .el-pagination__jump {
+// color: white;
+// }
.center {
left: 1%;
}
@@ -758,23 +932,23 @@
border-radius: 5px;
cursor: pointer;
}
-.center1 {
- right: 1%;
-}
-.right {
- position: absolute;
- top: 50px;
- right: 0;
- width: 20%;
- height: calc(100% - 50px);
+// .center1 {
+// right: 1%;
+// }
+// .right {
+// position: absolute;
+// top: 50px;
+// right: 0;
+// width: 20%;
+// height: calc(100% - 50px);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-.CenDiv:hover {
- border: 1px solid #409eff;
-}
+// display: flex;
+// flex-direction: column;
+// justify-content: space-between;
+// }
+// .CenDiv:hover {
+// border: 1px solid #409eff;
+// }
.active {
width: 100%;
height: 100%;
@@ -791,4 +965,10 @@
background-size: 100% 100%;
border-radius: 5px;
}
+
+// .menuSelect .el-input__inner {
+// background: rgba(255, 255, 255, 0.2) !important;
+// color: white !important;
+// border: 1px solid rgba(255, 255, 255, 0.2) !important;
+// }
</style>
--
Gitblit v1.9.3