From 7453188ddfaef750c5f367abadb8afa1ad877909 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期四, 18 四月 2024 15:48:57 +0800
Subject: [PATCH] 菜单
---
src/components/wggl/left/czll.vue | 529 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 378 insertions(+), 151 deletions(-)
diff --git a/src/components/wggl/left/czll.vue b/src/components/wggl/left/czll.vue
index 4359d4d..cdee1b8 100644
--- a/src/components/wggl/left/czll.vue
+++ b/src/components/wggl/left/czll.vue
@@ -1,29 +1,149 @@
<template>
- <div class="container" id="moved">
- <div class="top">
- <div class="far">
- <span @click="benear"></span>
- <span @click="befar"></span>
- </div>
- <!-- <div class="size">
- <span
- @mousemove="changebac(index)"
- @mouseout="returnbac(index)"
- v-for="(item, index) in top2"
- :key="index"
- :style="{ background: `url(${item.img})` }"
- ></span>
- </div> -->
+ <div class="content">
+ <div class="container" id="moved">
+ <el-menu
+ default-active="2"
+ :unique-opened="true"
+ @select="handleSelect"
+ class="el-menu-vertical-demo"
+ >
+ <el-submenu index="1">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>棰戣氨鎬佸娍鍒嗘瀽</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="1-1">鍔ㄦ�佹挱鏀�</el-menu-item>
+ <el-menu-item index="1-2">鎬佸娍姣斿</el-menu-item>
+ <el-menu-item index="1-3">鎬佸娍鍒嗘瀽</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="2">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>棰戣氨浣跨敤璇勪及</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="2-1">鐢ㄩ鍚堣鍒嗘瀽</el-menu-item>
+ <el-menu-item index="2-2">绌洪棽棰戠巼璧勬簮鍒嗘瀽</el-menu-item>
+ <el-menu-item index="2-3">淇″彿瑕嗙洊鐜囧垎鏋�</el-menu-item>
+ <el-menu-item index="2-4">鐢ㄩ瀵嗗害鍒嗘瀽</el-menu-item>
+ <el-menu-item index="2-5">棰戞鍗犵敤搴﹀垎鏋�</el-menu-item>
+ <el-menu-item index="2-6">棰戣氨鍗犵敤搴﹀垎鏋�</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="3">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>瑕嗙洊鑳藉姏璇勪及</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="3-1">鐩戞祴缃戣鐩栬兘鍔涜瘎浼�</el-menu-item>
+ <el-menu-item index="3-2">鐩戞祴绔欒鐩栬兘鍔涜瘎浼�</el-menu-item>
+ <el-menu-item index="3-3">鍦哄己瑕嗙洊璇勪及(澶氶��)</el-menu-item>
+ <el-menu-item index="3-4">鍦哄己瑕嗙洊璇勪及</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="4">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>鏁版嵁绠＄悊</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="4-1">娴嬭瘯鍙扮珯绠＄悊</el-menu-item>
+ <el-menu-item index="4-2">鐩戞祴绔欑鐞�</el-menu-item>
+ <el-menu-item index="4-3">鍙扮珯绠＄悊</el-menu-item>
+ <el-menu-item index="4-4">绉诲姩鐩戞祴鏁版嵁鍥炴斁</el-menu-item>
+ <el-menu-item index="4-5">鍥哄畾鐩戞祴鏁版嵁鍥炴斁</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="5">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>鎶ュ憡搴�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="5-1">鏁版嵁鍒嗘瀽鎶ュ憡</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="6">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>鏁版嵁璧勬簮绠＄悊瀛愮郴缁�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="6-1">閫氱敤妯＄増绠＄悊</el-menu-item>
+ <el-menu-item index="6-2">閫氫俊璧勬簮绠＄悊</el-menu-item>
+ <el-menu-item index="6-3">閫氫俊缃戠郴绠＄悊</el-menu-item>
+ <el-menu-item index="6-4">閫氫俊鎯冲畾绠＄悊</el-menu-item>
+ <el-menu-item index="6-5">澶氬獟浣撶礌鏉愮鐞�</el-menu-item>
+ <el-menu-item index="6-6">浠跨湡妯″瀷绠＄悊</el-menu-item>
+ <el-menu-item index="6-7">鐢ㄦ埛绠＄悊鍜岀郴缁熻缃�</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="7">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>缁煎悎鎬佸娍鏄剧ず瀛愮郴缁�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="7-1">zcTS\绛瑰垝姝ラ</el-menu-item>
+ <el-submenu index="7-2">
+ <template slot="title">ZC鐜鏄剧ず</template>
+ <el-menu-item index="7-2-1">涓滃崡娌挎捣銆乀D</el-menu-item>
+ </el-submenu>
+ <el-submenu index="7-3">
+ <template slot="title">閫氫俊鎬佸娍鏄剧ず</template>
+ <el-menu-item index="7-3-1">鍩虹珯銆佺洃娴嬬珯</el-menu-item>
+ </el-submenu>
+ <el-menu-item index="7-4">淇℃伅閾捐矾鏄剧ず</el-menu-item>
+ <el-menu-item index="7-5">浣滄垬鎬佸娍鏄剧ず</el-menu-item>
+ <el-menu-item index="7-6">鎯冲畾璧勬枡鏄剧ず</el-menu-item>
+ <el-menu-item index="7-7">鎬佸娍鏄剧ず鎺у埗</el-menu-item>
+ <el-menu-item index="7-8">澶氬獟浣撶礌鏉愭祻瑙�</el-menu-item>
+ <el-menu-item index="7-9">鎬佸娍鏍囩粯</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="8">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>閫氫俊鏂规绛瑰垝瀛愮郴缁�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="8-1">閫氫俊鏂规绠＄悊</el-menu-item>
+ <el-menu-item index="8-2">閫氫俊鏂规鎷熷埗</el-menu-item>
+ <el-menu-item index="8-3">閫氫俊缃戠郴鏋勫缓</el-menu-item>
+ <el-menu-item index="8-4">閫氫俊鏂规璁茶瘎</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="9">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>閫氫俊鏁堣兘璇勪及瀛愮郴缁�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="9-1">閫氫俊姣佷激褰卞搷璇勪及</el-menu-item>
+ <el-menu-item index="9-2">閫氫俊骞叉壈褰卞搷璇勪及</el-menu-item>
+ <el-menu-item index="9-3">杈呭姪璁＄畻鍒嗘瀽</el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ <el-submenu index="10">
+ <template slot="title">
+ <i class="el-icon-location"></i>
+ <span>浣滄垬琛屽姩褰卞搷鍒嗘瀽瀛愮郴缁�</span>
+ </template>
+ <el-menu-item-group>
+ <el-menu-item index="10-1">鎯呮姤閾捐矾琛屽姩褰卞搷鍒嗘瀽</el-menu-item>
+ <el-menu-item index="10-2">鎸囨尌閾捐矾琛屽姩褰卞搷鍒嗘瀽</el-menu-item>
+ <el-menu-item index="10-3">鎵撳嚮閾捐矾琛屽姩褰卞搷鍒嗘瀽</el-menu-item>
+ <el-menu-item index="10-4"
+ >淇濋殰閾捐矾琛屽姩褰卞搷鍒嗘瀽鍜岃瘎浼板垎鏋愮粨鏋滃睍绀�
+ </el-menu-item>
+ </el-menu-item-group>
+ </el-submenu>
+ </el-menu>
</div>
<div class="bot">
- <span
- v-for="(item, index) in bot1"
- :key="index"
- @mousemove="changebac1(index)"
- @click="remove(index)"
- @mouseout="returnbac1(index)"
- :style="{ background: `url(${item.img})` }"
- ></span>
<div
:class="istrue ? 'botImg1' : 'botImg'"
@mousemove="makebig"
@@ -53,11 +173,7 @@
"z-index": "2",
transition: "transform,1s",
},
- // top2: [
- // { img: require("@/assets/image/test/缁� 160.png") },
- // { img: require("@/assets/image/test/缁� 161.png") },
- // { img: require("@/assets/image/test/缁� 162.png") },
- // ],
+ nowchoose: null,
bot1: [
{ img: require("@/assets/image/test/缁� 163.png") },
{ img: require("@/assets/image/test/缁� 164.png") },
@@ -68,14 +184,192 @@
};
},
methods: {
- remove(index) {
- if (index == 0) {
- bus.$emit("clearEve", true);
- window.FieldIntensity && window.FieldIntensity.deleteObject();
- window.imageidXT && window.Viewer.entities.removeById(window.imageidXT);
- }
- if (index == 1) {
- window.createTool = true;
+ handleSelect(key, keyPath) {
+ var val = keyPath[1];
+ switch (val) {
+ case "1-3":
+ this.nowchoose = 2;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "1-2": //null
+ this.nowchoose = 7;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "1-1":
+ this.nowchoose = 1;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "2-6": //null
+ this.nowchoose = 8;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "2-5":
+ this.nowchoose = 3;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "2-4": //null
+ this.nowchoose = 9;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "2-3": //null
+ this.nowchoose = 10;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "2-2":
+ this.nowchoose = "1-4";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+
+ case "3-4":
+ this.nowchoose = 5;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "3-3":
+ this.nowchoose = "1-2";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "3-2":
+ this.nowchoose = 4;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "3-1":
+ this.nowchoose = 6;
+ bus.$emit("showdio", this.nowchoose);
+ break;
+
+ case "4-1":
+ this.nowchoose = "4-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "4-2":
+ this.nowchoose = "4-2";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "4-3":
+ this.nowchoose = "4-3";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "4-4":
+ this.nowchoose = "4-4";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "4-5":
+ this.nowchoose = "4-5";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "5-1":
+ this.nowchoose = "5-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-1":
+ this.nowchoose = "6-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-2":
+ this.nowchoose = "6-2";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-3":
+ this.nowchoose = "6-3";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-4":
+ this.nowchoose = "6-4";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-5":
+ this.nowchoose = "6-5";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-6":
+ this.nowchoose = "6-6";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "6-7":
+ this.nowchoose = "6-7";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+
+ case "7-1":
+ this.nowchoose = "7-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-2-1":
+ this.nowchoose = "7-2-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-3-1":
+ this.nowchoose = "7-3-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-4":
+ this.nowchoose = "7-4";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-5":
+ this.nowchoose = "7-5";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-6":
+ this.nowchoose = "7-6";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-7":
+ this.nowchoose = "7-7";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-8":
+ this.nowchoose = "7-8";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "7-9":
+ this.nowchoose = "7-9";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "8-1":
+ this.nowchoose = "8-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "8-2":
+ this.nowchoose = "8-2";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "8-3":
+ this.nowchoose = "8-3";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "8-4":
+ this.nowchoose = "8-4";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "9-1":
+ this.nowchoose = "9-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "9-2":
+ this.nowchoose = "9-2";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "9-3":
+ this.nowchoose = "9-3";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "10-1":
+ this.nowchoose = "10-1";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "10-2":
+ this.nowchoose = "10-2";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "10-3":
+ this.nowchoose = "10-3";
+ bus.$emit("showdio", this.nowchoose);
+ break;
+ case "10-4":
+ this.nowchoose = "10-4";
+ bus.$emit("showdio", this.nowchoose);
+ break;
}
},
makebig() {
@@ -85,39 +379,6 @@
makeSmall() {
this.istrue = true;
this.move1.transform = "translateX(-230px)";
- },
- //绉诲叆绉诲嚭鍙樿壊
- changebac(index) {
- let movein = [
- { img: require("@/assets/image/change/缁�177.png") },
- { img: require("@/assets/image/change/缁�176.png") },
- { img: require("@/assets/image/change/缁�175.png") },
- ];
- this.$set(this.top2, index, movein[index]);
- },
- returnbac(index) {
- let data = [
- { img: require("@/assets/image/test/缁� 160.png") },
- { img: require("@/assets/image/test/缁� 161.png") },
- { img: require("@/assets/image/test/缁� 162.png") },
- ];
- this.$set(this.top2, index, data[index]);
- },
- changebac1(index) {
- let movein = [
- { img: require("@/assets/image/change/缁�172.png") },
- { img: require("@/assets/image/change/缁�173.png") },
- { img: require("@/assets/image/change/缁�174.png") },
- ];
- this.$set(this.bot1, index, movein[index]);
- },
- returnbac1(index) {
- let movein = [
- { img: require("@/assets/image/test/缁� 163.png") },
- { img: require("@/assets/image/test/缁� 164.png") },
- { img: require("@/assets/image/test/缁� 165.png") },
- ];
- this.$set(this.bot1, index, movein[index]);
},
changeMap1() {
Viewer.imageryLayers._layers[0].show = true;
@@ -153,80 +414,74 @@
this.isshowGD = true;
}
},
- benear() {
- $(".navigation-control")[0].click();
- },
- befar() {
- $(".navigation-control-last")[0].click();
- },
- //娣诲姞mpt鍦板舰褰卞儚
+ },
+ mounted() {
+ bus.$on("showindex", (e) => {
+ if (this.boxindex == e) {
+ this.boxindex = 0;
+ } else {
+ this.boxindex = e;
+ }
+ });
},
};
</script>
<style scoped>
+.content {
+ /* height: 2000px; */
+ position: relative;
+ /* background: skyblue; */
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+}
.container {
- width: 0px;
- height: 1900px;
+ width: 400px;
margin-left: 100px;
+ height: 1600px;
display: flex;
- flex-direction: column;
- justify-content: space-between;
+ padding: 20px;
+ margin-top: 100px;
+ background: url("../../../assets/image/listbg.png") no-repeat;
+ background-size: 100% 100%;
}
-.top {
- margin: 20px;
- margin-top: 50px;
- width: 100px;
- height: 500px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- transform: translateX(-16px);
-}
-.far {
- display: block;
+.el-menu-vertical-demo {
width: 100%;
- height: 36%;
- display: flex;
- flex-direction: column;
+ background: transparent !important;
+ border: transparent;
+ color: white;
}
-.far > span {
- display: block;
- width: 100%;
- height: 49%;
- cursor: pointer;
- background-size: 100% 100% !important;
- background-repeat: no-repeat !important;
- background-position: center !important;
+/deep/ .el-submenu__title:hover {
+ background: rgba(255, 255, 255, 0.2) !important;
}
-.far > span:nth-child(1) {
- background: url(../../../assets/image/test/+.png);
+/deep/ .el-submenu__title {
+ color: white !important;
+ font-size: 32px;
}
-.far > span:nth-child(1):hover {
- background: url(../../../assets/image/change/鍥惧眰2.png);
+/deep/.el-menu {
+ background: transparent !important;
}
-.far > span:nth-child(2) {
- background: url(../../../assets/image/test/-.png);
+/deep/.el-menu-item:focus,
+.el-menu-item:hover {
+ background: rgba(255, 255, 255, 0.2) !important;
+ color: #409eff !important;
}
-.far > span:nth-child(2):hover {
- background: url(../../../assets/image/change/鍥惧眰1.png);
+/deep/.el-menu-item {
+ color: white !important;
+ font-size: 28px;
+ padding: 0px 40px !important;
}
-.size {
- display: block;
- width: 100%;
- height: 54%;
-}
-.size > span {
- display: block;
- width: 100%;
- height: 33%;
- background-size: 100% 100% !important;
- background-repeat: no-repeat !important;
- background-position: center !important;
+/deep/.el-submenu__icon-arrow {
+ font-size: 20px !important;
}
.bot {
width: 100px;
height: 310px;
+ margin-top: 200px;
+ bottom: 10px;
+ left: 10%;
+ margin-left: 50px;
}
.bot > span {
display: block;
@@ -270,33 +525,5 @@
width: 340px;
height: 190px;
background: transparent;
-}
-.mapinner {
- display: block;
- width: 140px;
- height: 40px;
- font-weight: 700;
- text-align: center;
- font-size: 35px;
- position: absolute;
- right: 10px;
- bottom: 10px;
-}
-.mapinner:hover {
- background: #3385ff;
-}
-.mapinner1 {
- display: block;
- width: 140px;
- height: 40px;
- font-weight: 700;
- text-align: center;
- font-size: 35px;
- position: absolute;
- right: 10px;
- bottom: 15px;
-}
-.mapinner1:hover {
- background: #3385ff;
}
</style>
--
Gitblit v1.9.3