From df007d0b7f677240d9ab9b01e6bebdbad0762a0f Mon Sep 17 00:00:00 2001
From: lxl <lixuliang_hd@126.com>
Date: 星期一, 07 十一月 2022 16:22:12 +0800
Subject: [PATCH] 菜单
---
src/components/mapsdk.vue | 715 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 438 insertions(+), 277 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index d971275..682e776 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -1,166 +1,192 @@
<template>
- <div id="mapdiv" class="mapdiv">
- <div class="bufferBox" v-if="showBufferBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>缂撳啿鍖哄垎鏋�</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(1)"></i>
+ <div class="mapBox">
+ <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">
+ <span>缂撳啿鍖哄垎鏋�</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(1)"></i>
+ </div>
</div>
- </div>
- <div class="box-body">
- <el-form ref="form" :model="bufFrom" label-width="100px">
- <el-form-item label="缂撳啿鍗婂緞(绫�):">
- <el-input v-model="bufFrom.val"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button @click="addBuffer(1)" type="info">鐐�</el-button>
- <el-button @click="addBuffer(2)" type="info">绾�</el-button>
- <el-button @click="addBuffer(3)" type="info">闈�</el-button>
- <el-button @click="clearBuffer" type="info">娓呴櫎</el-button>
- </el-form-item>
- </el-form>
- </div>
- </el-card>
- </div>
- <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>鍧愭爣瀹氫綅</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(2)"></i>
+ <div class="box-body">
+ <el-form ref="form" :model="bufFrom" label-width="100px">
+ <el-form-item label="缂撳啿鍗婂緞(绫�):">
+ <el-input v-model="bufFrom.val"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="addBuffer(1)" type="info">鐐�</el-button>
+ <el-button @click="addBuffer(2)" type="info">绾�</el-button>
+ <el-button @click="addBuffer(3)" type="info">闈�</el-button>
+ <el-button @click="clearBuffer" type="info">娓呴櫎</el-button>
+ </el-form-item>
+ </el-form>
</div>
- </div>
- <div class="box-body">
- <el-form ref="form" :model="coordFrom" label-width="50px">
- <el-form-item label="缁忓害:">
- <el-input v-model="coordFrom.lon"></el-input>
- </el-form-item>
- <el-form-item label="绾害:">
- <el-input v-model="coordFrom.lat"></el-input>
- </el-form-item>
- <el-form-item label="楂樺害:">
- <el-input v-model="coordFrom.height"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button @click="setCoordLocal" type="info">瀹氫綅</el-button>
- </el-form-item>
- </el-form>
- </div>
- </el-card>
- </div>
- <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>鍦板悕瀹氫綅</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(3)"></i>
+ </el-card>
+ </div>
+ <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>鍧愭爣瀹氫綅</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(2)"></i>
+ </div>
</div>
- </div>
- <div class="box-body">
- <el-form :model="comprehensive" :inline="true" label-width="50px">
- <el-form-item label="鍦板悕:">
- <el-input
- style="width: 200px"
- v-model="comprehensive.name"
- ></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="info">鏌ヨ</el-button>
- </el-form-item>
- </el-form>
- <el-table :data="tableData" height="200px" style="width: 100%">
- <el-table-column
- align="center"
- type="index"
- label="搴忓彿"
- width="70px"
- />
- <el-table-column prop="name" align="center" label="瀹氫綅">
- <template slot-scope="scope">
- <el-button
- @click="handleLocation(scope.$index, scope.row)"
- size="small"
- icon="el-icon-place"
- ></el-button>
- </template>
- </el-table-column>
- <el-table-column prop="name" align="center" label="鍦板悕">
- </el-table-column>
- </el-table>
- <div style="margin-top: 10px" class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listData.pageIndex"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="listData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="count"
- >
- </el-pagination>
+ <div class="box-body">
+ <el-form ref="form" :model="coordFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input v-model="coordFrom.lon"></el-input>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input v-model="coordFrom.lat"></el-input>
+ </el-form-item>
+ <el-form-item label="楂樺害:">
+ <el-input v-model="coordFrom.height"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="setCoordLocal" type="info">瀹氫綅</el-button>
+ </el-form-item>
+ </el-form>
</div>
- </div>
- </el-card>
- </div>
- <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
- <el-card class="box-card">
- <div slot="header" class="clearfix">
- <span>璺緞鍒嗘瀽</span>
- <div style="float: right; cursor: pointer">
- <i class="el-icon-close" @click="closeBufferBox(4)"></i>
+ </el-card>
+ </div>
+ <div class="toponymicLocalBox" v-if="showToponymicLocalBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>鍦板悕瀹氫綅</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(3)"></i>
+ </div>
</div>
- </div>
- <div class="box-body">
- <el-form ref="form" :model="pathFrom" label-width="50px">
- <el-form-item label="缁忓害:">
- <el-input style="width: 300px" v-model="pathFrom.lon"></el-input>
- <el-link
- :underline="false"
- @click="showMouseLeftClick(1)"
- style="margin-left: 10px"
- ><i style="color: white" class="el-icon-plus"></i
- ></el-link>
- </el-form-item>
- <el-form-item label="绾害:">
- <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
- <el-link
- :underline="false"
- @click="showMouseLeftClick(2)"
- style="margin-left: 10px"
- ><i style="color: white" class="el-icon-plus"></i
- ></el-link>
- </el-form-item>
- <el-form-item>
- <el-button @click="showMouseLeftClick(3)" type="info"
- >鏌ヨ</el-button
+ <div class="box-body">
+ <el-form :model="comprehensive" :inline="true" label-width="50px">
+ <el-form-item label="鍦板悕:">
+ <el-input
+ style="width: 200px"
+ v-model="comprehensive.name"
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="info">鏌ヨ</el-button>
+ </el-form-item>
+ </el-form>
+ <el-table :data="tableData" height="200px" style="width: 100%">
+ <el-table-column
+ align="center"
+ type="index"
+ label="搴忓彿"
+ width="70px"
+ />
+ <el-table-column prop="name" align="center" label="瀹氫綅">
+ <template slot-scope="scope">
+ <el-button
+ @click="handleLocation(scope.$index, scope.row)"
+ size="small"
+ icon="el-icon-place"
+ ></el-button>
+ </template>
+ </el-table-column>
+ <el-table-column prop="name" align="center" label="鍦板悕">
+ </el-table-column>
+ </el-table>
+ <div style="margin-top: 10px" class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="listData.pageIndex"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="listData.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="count"
>
- </el-form-item>
- </el-form>
- </div>
- </el-card>
- </div>
- <div
- @click="changeMenulayer"
- class="center CenDiv"
- :class="{ center1: centerFlag }"
- >
+ </el-pagination>
+ </div>
+ </div>
+ </el-card>
+ </div>
+ <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>璺緞鍒嗘瀽</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(4)"></i>
+ </div>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="pathFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input
+ style="width: 300px"
+ v-model="pathFrom.lon"
+ ></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(1)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input
+ style="width: 300px"
+ v-model="pathFrom.lat"
+ ></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(2)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="showMouseLeftClick(3)" type="info"
+ >鏌ヨ</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
<div
- id="cenBg"
- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
- ></div>
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
</div>
</div>
</template>
<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 +214,7 @@
pageSize: 10,
},
count: 0,
+ selFrom: {},
tableData: [],
imagePoint: null,
handler: null,
@@ -197,6 +224,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() {
@@ -646,149 +730,226 @@
};
</script>
-<style scoped>
-.mapdiv {
+<style scoped lang="less">
+.mapBox {
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%;
+
+ #mapdiv {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+
+ .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%;
+ }
+ .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;
+ }
+
+ /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;
+ }
+ }
+
+ .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;
+ }
+ }
}
-.pathAnalysisBox {
- width: 412px;
+// /deep/
+// /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;
-}
+// ::v-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;
-}
+// ::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%;
+// }
+// .CenDiv {
+// position: absolute;
+// bottom: 1%;
+// height: 40px;
+// width: 60px;
+// z-index: 101;
+// display: flex;
+// flex-direction: column;
+// justify-content: space-between;
+// box-shadow: 3px 3px 6px #666;
+// border: 1px solid rgba(204, 204, 204, 0.76);
+// border-radius: 5px;
+// cursor: pointer;
+// }
+// .center1 {
+// right: 1%;
+// }
+// .right {
+// position: absolute;
+// top: 50px;
+// right: 0;
+// width: 20%;
+// height: calc(100% - 50px);
-::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%;
-}
-.CenDiv {
- position: absolute;
- bottom: 1%;
- height: 40px;
- width: 60px;
- z-index: 101;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- box-shadow: 3px 3px 6px #666;
- border: 1px solid rgba(204, 204, 204, 0.76);
- border-radius: 5px;
- cursor: pointer;
-}
-.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;
+// }
+// .active {
+// width: 100%;
+// height: 100%;
+// background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+// position: absolute;
+// background-size: 100% 100%;
+// border-radius: 5px;
+// }
+// .menuLayer {
+// width: 100%;
+// height: 100%;
+// background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+// position: absolute;
+// background-size: 100% 100%;
+// border-radius: 5px;
+// }
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
-.CenDiv:hover {
- border: 1px solid #409eff;
-}
-.active {
- width: 100%;
- height: 100%;
- background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
- position: absolute;
- background-size: 100% 100%;
- border-radius: 5px;
-}
-.menuLayer {
- width: 100%;
- height: 100%;
- background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
- position: absolute;
- 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