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 |  417 ++++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 299 insertions(+), 118 deletions(-)

diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index b4ddd62..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,14 +163,26 @@
 
 <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,
       buffer: null,
       showBufferBoxDialog: false,
       showCoordLocalBoxDialog: false,
@@ -187,6 +207,7 @@
         pageSize: 10,
       },
       count: 0,
+      selFrom: {},
       tableData: [],
       imagePoint: null,
       handler: null,
@@ -196,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() {
@@ -318,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;
@@ -645,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%;
 }
@@ -757,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%;
@@ -790,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