From 5c11db14675b3a0f409e8c79e07304f37514b52a Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 26 十一月 2022 21:14:39 +0800
Subject: [PATCH] 添加综合展示，在线制图，资料馆跳转页面功能，修改数据管理，运维管理页面数据获取
---
src/components/navMenu.vue | 147 ++++++++++++++++++++++++++++++++----------------
1 files changed, 98 insertions(+), 49 deletions(-)
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 9825020..a4db331 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -8,20 +8,27 @@
<div class="rightWrapper">
<div class="rightMenu">
<ul class="infinite-list menu_ul">
- <li
- @click="setMenuMove(index, item)"
- v-for="(item, index) in listMenu"
- class="infinite-list-item"
- >
- <div
- class="menuImage"
- :class="changeSelectStyle == index ? item.checkClass : item.class"
- ></div>
- <div
- class="menulabel"
- :class="{ changeStyle: changeSelectStyle == index }"
- >
- {{ item.label }}
+ <li v-for="(item, index) in listMenu" class="infinite-list-item">
+ <div @click="setMenuMove(index, item)">
+ <div
+ class="menuImage"
+ :class="changeSelectStyle == index ? item.checkClass : item.css"
+ ></div>
+ <div
+ class="menulabel"
+ :class="{ changeStyle: changeSelectStyle == index }"
+ >
+ {{ item.cnName }}
+ </div>
+ </div>
+ <div class="secondMenuDiv" v-show="item.show">
+ <div
+ v-for="res in item.children"
+ @click="setLiClick(res)"
+ :class="{ changeLiStyle: changeliSelect == res.cnName }"
+ >
+ {{ res.cnName }}
+ </div>
</div>
</li>
</ul>
@@ -40,7 +47,7 @@
</div>
<color-change></color-change>
</div>
-
+ <!-- -->
<!-- <div class="menu"></div>
<div class="userInfo">
<img src="../assets/img/user.png" alt="" />
@@ -54,11 +61,13 @@
</template>
<script>
-import { logout } from '@/api/api';
+import { logout, selectMenuRecursive } from '@/api/api';
import { removeToken, getToken } from '@/utils/auth';
import customElMenu from '../components/customElMenu.vue';
import { queryMenuTree } from '../api/api';
import colorChange from '../views/maintenance/colorChange.vue';
+import { containsCoordinate } from 'ol/extent';
+import Vue from 'vue';
export default {
name: 'navMenu',
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
@@ -86,44 +95,29 @@
formLabelWidth: '70px',
count: 5,
changeSelectStyle: 5,
+ changeliSelect: null,
+ changeSelectdiv: false,
listMenu: [
{
- label: '鏁版嵁璐ㄦ',
- class: 'm1',
+ cnName: '鏁版嵁璐ㄦ',
+ css: 'm1',
checkClass: 'm11',
url: '',
},
{
- label: '鏁版嵁浜ゆ崲',
- class: 'm2',
+ cnName: '鏁版嵁浜ゆ崲',
+ css: 'm2',
checkClass: 'm21',
url: '',
},
{
- label: '鏁版嵁绠＄悊',
- class: 'm3',
- checkClass: 'm31',
- url: '',
- },
- {
- label: '鏈嶅姟绠＄悊',
- class: 'm4',
+ cnName: '鏈嶅姟绠＄悊',
+ css: 'm4',
checkClass: 'm41',
url: '',
},
- {
- label: '缁煎悎灞曠ず',
- class: 'm5',
- checkClass: 'm51',
- url: '',
- },
- {
- label: '杩愮淮绠＄悊',
- class: 'm6',
- checkClass: 'm61',
- url: '',
- },
],
+ showFlag: null,
};
},
created() {},
@@ -158,8 +152,36 @@
},
//榧犳爣绉诲叆鑿滃崟浜嬩欢
setMenuMove(index, item) {
- this.$router.push(item.url);
+ var that = this;
+
+ if (item.perms != null) {
+ this.$router.push(item.url);
+ this.setShowFalseDiv(false);
+ this.changeliSelect = '鍛靛懙';
+ this.showFlag = null;
+ } else {
+ if (this.showFlag != index) {
+ this.showFlag = index;
+ this.setShowFalseDiv(true);
+ } else {
+ let newItem = this.listMenu[index];
+ newItem.show = !this.listMenu[index].show;
+ Vue.set(this.listMenu, index, newItem);
+ }
+ }
+
this.changeSelectStyle = index;
+ },
+ setShowFalseDiv(bolean) {
+ var index = this.showFlag;
+ let newItem = this.listMenu[index];
+ newItem.show = bolean;
+ Vue.set(this.listMenu, index, newItem);
+ },
+ setLiClick(res) {
+ this.setShowFalseDiv(false);
+ this.changeliSelect = res.cnName;
+ this.$router.push(res.url);
},
async getMenuTree() {
//鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
@@ -183,16 +205,18 @@
}
}
},
- setMenuTree(res) {
- console.log(res);
- for (var i = 0; i < res.length; i++) {
- for (var j = 0; j < this.listMenu.length; j++) {
- if (this.listMenu[j].label == res[i].cnName) {
- this.listMenu[j].url = res[i].perms;
- }
+ async setMenuTree(res) {
+ for (var i in res) {
+ res[i].checkClass = res[i].css + '1';
+ res[i].show = false; //鎺у埗鏄鹃殣
+ if (res[i].perms == null) {
+ const result = await selectMenuRecursive({ name: res[i].cnName });
+ res[i].children = result.result.filter((value) => {
+ return value.pid == res[i].id;
+ });
}
+ this.listMenu.push(res[i]);
}
- console.log(this.listMenu);
},
treeData(source) {
let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
@@ -507,5 +531,30 @@
color: #2e95fb !important;
background: linear-gradient(#112f57, #122344) !important;
}
+ .secondMenuDiv {
+ position: absolute;
+ z-index: 30;
+ margin-top: 10px;
+ border: 1px solid white;
+ border-radius: 5px;
+ div {
+ line-height: 30px;
+
+ background: #303030;
+ padding: 10px;
+
+ font-size: 18px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #ffffff;
+ line-height: 49px;
+ width: 100px;
+ }
+
+ .changeLiStyle {
+ color: #fec801;
+ background: linear-gradient(180deg, #002992, #080472);
+ }
+ }
}
</style>
--
Gitblit v1.9.3