From 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 16 一月 2023 10:35:15 +0800
Subject: [PATCH] 廊坊代码更新
---
src/components/navMenu.vue | 448 ++++++++++++++++++++++++++-----------------------------
1 files changed, 211 insertions(+), 237 deletions(-)
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 69a1267..f0a517a 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,74 +1,72 @@
<template>
- <div class="topMenu">
- <div class="logo"></div>
- <div class="headerTitle">
- <!-- <p class="textp1">绠￠亾鍩虹澶ф暟鎹钩鍙�</p>
- <p class="textp2">Pipeline basic big data platform</p> -->
- </div>
- <div class="rightWrapper">
- <div class="rightMenu">
- <ul class="infinite-list menu_ul">
- <li
+ <div class="NavBox">
+ <div class="topBox">
+ <div class="topTitle"></div>
+ <div class="topMenu">
+ <div class="menuContent">
+ <div
+ class="contentDiv"
+ @click="setMenuMove(index, item)"
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>
+ <div class="ImgMenu">
+ <div
+ class="menuImage"
+ :class="changeSelectStyle == index ? item.checkClass : item.css"
+ ></div>
+ </div>
<div
class="menulabel"
:class="{ changeStyle: changeSelectStyle == index }"
>
- {{ item.cnName }}
+ <span v-show="language"> {{ item.cnName }}</span> <span v-show="!language"> {{ item.enName }}</span>
</div>
</div>
<div
class="secondMenuDiv"
- v-show="item.show"
+ v-show="index == showFlag ? true :false"
>
<div
v-for="res in item.children"
- @click="setLiClick(res)"
+ @click="setLiClick(res,index)"
:class="{ changeLiStyle: changeliSelect == res.cnName }"
>
- {{ res.cnName }}
+ <span v-show="language"> {{ res.cnName }}</span> <span v-show="!language"> {{ res.enName }}</span>
</div>
</div>
- </li>
- </ul>
+ </div>
+ </div>
</div>
- <div class="rightUser">
- <div
- @click="logOut"
- class="topdiv topUser"
- >
+ <div class="topUser">
+ <div class="userName">
<div class="userImage user1"></div>
<div class="userText">
<span>{{ this.$store.state.uname }}</span>
- <el-link class="elLink">{{ $t('common.logout') }}</el-link>
+ <el-link
+ @click="logOut"
+ :underline="false"
+ class="elLink"
+ >{{ $t('common.logout') }}</el-link>
</div>
+
</div>
<div
@click="switchLang"
- class="topdiv botLingo"
+ class="userLanguage"
>
<div class="userImage user2"></div>
- <div class="userText">Language</div>
+ <div class="TextLanguage">
+ <el-link
+ :underline="false"
+ class="elLink"
+ >{{$t("common.language")}}</el-link>
+ </div>
</div>
- <color-change></color-change>
+
</div>
- <!-- -->
- <!-- <div class="menu"></div>
- <div class="userInfo">
- <img src="../assets/img/user.png" alt="" />
- <span>admin</span>
- <span >娉ㄩ攢</span>
-
- <span> 鍒囨崲璇█</span>
- </div> -->
</div>
+
</div>
</template>
@@ -111,6 +109,7 @@
changeSelectdiv: false,
listMenu: [],
showFlag: null,
+ language: true
};
},
created() { },
@@ -145,70 +144,81 @@
},
//涓婚鍒囨崲
setThemeColors() { },
- closeAllChildren() {
- for (var i in this.listMenu) {
- let newItem = this.listMenu[i];
- newItem.show = false;
- Vue.set(this.listMenu, i, newItem);
- }
- },
+
//榧犳爣绉诲叆鑿滃崟浜嬩欢
setMenuMove(index, item) {
- this.closeAllChildren();
+
if (item.perms != null) {
this.$router.push(item.url);
if (this.showFlag != null) {
- 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 = !newItem.show;
- Vue.set(this.listMenu, index, newItem);
+ this.showFlag = null;
}
}
this.changeSelectStyle = index;
},
+ closeAllChildren() {
+ var val = this.listMenu
+ for (var i = 0; i < val.length; i++) {
+ let newItem = val[i];
+ newItem.show = false;
+ Vue.set(val, i, newItem);
+
+ }
+ },
setShowFalseDiv(bolean) {
var index = this.showFlag;
- let newItem = this.listMenu[index];
- newItem.show = bolean;
- Vue.set(this.listMenu, index, newItem);
- },
- setLiClick(res) {
- this.changeliSelect = res.cnName;
- if (res.url.indexOf('http') != -1) {
- if (this.$store.reporturl == null) {
- this.$store.reporturl = res.url;
- this.$router.push('/WareInspection');
- } else {
- this.$bus.$emit('changeNaveUrl', res.url);
- }
- } else {
- this.$store.reporturl = null;
- this.$router.push(res.url);
- this.$store.commit('currentPerms', res.perms);
+ if (index != null) {
+ let newItem = this.listMenu[index];
+
+ newItem.show = bolean;
+ Vue.set(this.listMenu, index, newItem);
}
- this.closeAllChildren();
+ },
+ setLiClick(res, index) {
+
+ setTimeout(() => {
+ this.changeliSelect = res.cnName;
+ if (res.url.indexOf('http') != -1) {
+ if (this.$store.reporturl == null) {
+ this.$store.reporturl = res.url;
+ this.$router.push('/WareInspection');
+ } else {
+ this.$bus.$emit('changeNaveUrl', res.url);
+ }
+ } else {
+ this.$store.reporturl = null;
+ this.$router.push(res.url);
+ this.$store.commit('currentPerms', res.perms);
+ }
+ this.setShowFalseDiv(false)
+ }, 100)
+
},
async getMenuTree() {
this.getCookies();
const data = await queryMenuTree();
+
var that = this;
if (data.code == 200) {
+
if (data.result.length != 0) {
let menuLists = data.result.filter((value) => {
return value.pid == 1;
});
that.menuList = menuLists;
+
that.setMenuTree(menuLists);
} else {
alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
@@ -221,10 +231,14 @@
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;
- });
+ const result = await selectMenuRecursive({ id: res[i].id });
+
+ if (result.code == 200) {
+ res[i].children = result.result.filter((value) => {
+ return value.pid == res[i].id;
+ });
+
+ }
this.listMenu.push(res[i]);
this.changeSelectStyle = this.listMenu.length - 1;
// var strartMneu = res[i].children[0];
@@ -283,6 +297,7 @@
if (this.lang == 'en') {
//璇█鎹㈡垚zh
this.lang = 'zh';
+ this.language = true;
//鑿滃崟鎹负zh
this.$store.commit('changeLang', 'zh');
//i18鎹㈡垚zh
@@ -291,6 +306,7 @@
//褰撳墠zh
else {
this.lang = 'en';
+ this.language = false;
this.$i18n.locale = this.lang;
this.$store.commit('changeLang', 'en'); //浼犻�掔偣鍑荤殑鑺傜偣
}
@@ -323,7 +339,7 @@
},
},
created() {
- this.$store.reporturl=null;
+ this.$store.reporturl = null;
let str = this.$route.path;
if (str[0] == '/') {
this.activeIndex = str.slice(1);
@@ -333,68 +349,54 @@
</script>
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
-.topMenu {
+.NavBox {
width: 100%;
height: 100%;
background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78));
- display: flex;
- justify-content: space-between;
+ .topBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ .topTitle {
+ width: 435px;
+ height: 70px;
+ background: url("../assets/img/LOGO.png") no-repeat center;
+ }
+ .topMenu {
+ width: auto;
- .logo {
- width: 80px;
- height: 80px;
- // margin-left: 30px;
- // margin-top: 33px;
- // background: url('../assets/img/鍥惧眰 34.png') no-repeat 100% 100%;
- }
- // .rightWrapper {
- // width: 70%;
- // height: 100%;
- // display: flex;
- // .menu {
- // height: 100%;
- // width: 80%;
- // background-color: rgb(120, 121, 120);
- // ul {
- // display: flex;
- // justify-content: space-around;
- // li {
- // width: 120px;
- // height: 120px;
- // background: #bfa;
- // }
- // }
- // }
- .rightWrapper {
- float: right;
- margin-right: 48px;
- margin-top: 32px;
- height: 80px;
- float: left;
- .rightMenu {
- height: 100%;
- float: left;
- margin-right: 40px;
-
- .menu_ul {
- list-style: none;
+ flex: 1;
+ height: 100px;
+ .menuContent {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ .contentDiv {
+ margin-left: 1%;
+ }
}
- .menu_ul li {
- float: left;
- margin-right: 70px;
- }
- .menulabel {
- font-size: 19px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #ffffff;
- }
- .changeStyle {
- color: #fec801;
+ .ImgMenu {
+ width: 100%;
+ height: auto;
+ display: flex;
+ justify-content: center;
}
.menuImage {
width: 70px;
height: 70px;
+ }
+ .menulabel {
+ font-size: 14px;
+ font-family: Source Han Sans CN;
+ font-weight: 500;
+ color: #ffffff;
+ text-align: center;
+ width: 120px;
+ }
+ .changeStyle {
+ color: #fec801;
}
.m1 {
background: url("../assets/img/menu/menu11.png") no-repeat;
@@ -418,6 +420,10 @@
}
.m6 {
background: url("../assets/img/menu/menu61.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ .m7 {
+ background: url("../assets/img/menu/qwyzt.png") no-repeat;
background-size: 100% 100%;
}
.m11 {
@@ -444,96 +450,93 @@
background: url("../assets/img/menu/menu62.png") no-repeat;
background-size: 100% 100%;
}
+ .m71 {
+ background: url("../assets/img/menu/qwyzt-h.png") no-repeat;
+ background-size: 100% 100%;
+ }
}
- .rightUser {
- height: 100%;
- float: left;
- min-width: 130px;
- display: flex;
- flex-direction: column;
- .topdiv {
- width: 100%;
+
+ .topUser {
+ height: 70px;
+
+ .userName {
+ margin: 0px 10px;
+
+ display: flex;
+ justify-content: space-between;
height: 30px;
-
+ }
+ .userLanguage {
+ margin: 0px 10px;
margin-top: 10px;
+
+ display: flex;
+
+ height: 30px;
+ }
+ .userImage {
+ width: 30px;
+ height: 30px;
+ float: left;
+ margin-right: 10px;
+ }
+ .user1 {
+ background: url("../assets/img/user.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ .user2 {
+ background: url("../assets/img/EN.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ .userText {
+ font-size: 15px;
+
line-height: 30px;
- .userImage {
- width: 30px;
- height: 30px;
- float: left;
- margin-right: 10px;
- }
- .user1 {
- background: url("../assets/img/user.png") no-repeat;
- background-size: 100% 100%;
- }
- .user2 {
- background: url("../assets/img/EN.png") no-repeat;
- background-size: 100% 100%;
- }
- .userText {
- font-size: 15px;
- width: 150px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
- }
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #ffffff;
+ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}
- .topUser {
- flex-shrink: 0;
- }
- .botLingo {
- flex-shrink: 1;
+ .TextLanguage {
+ font-size: 15px;
+
+ line-height: 30px;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #ffffff;
+ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}
}
+ .elLink {
+ margin-left: 5px;
+ font-size: 15px;
+ margin-bottom: 4px;
+ }
}
- // .userInfo {
- // background-color: pink;
- // // width: 138px;
- // font-size: 16px;
- // font-family: Microsoft YaHei;
- // font-weight: 400;
- // color: #fcfcfc;
- // // display: flex;
- // // justify-content: space-between;
- // // align-items: center;
- // // cursor: pointer;
- // }
-
- .headerTitle {
- margin-top: 49px;
- margin-left: 120px;
+ .secondMenuDiv {
position: absolute;
- width: 323px;
- height: 70px;
- background: url("../assets/img/LOGO.png") no-repeat center;
- // .textp1 {
- // font-size: 36px;
- // font-family: Microsoft YaHei;
- // font-weight: bold;
- // color: #ffffff;
- // background: linear-gradient(0deg, #79a8ff 0%, #ffffff 100%);
- // -webkit-background-clip: text;
- // -webkit-text-fill-color: transparent;
- // }
- // .textp2 {
- // font-size: 9px;
- // font-family: Microsoft YaHei;
- // font-weight: 300;
- // color: #ffffff;
- // display: flex;
- // background: linear-gradient(0deg, #79a8ff 0%, #ffffff 100%);
- // -webkit-background-clip: text;
- // -webkit-text-fill-color: transparent;
- // }
+ z-index: 1024;
+ 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;
+ min-width: 120px;
+ }
+ .changeLiStyle {
+ color: #fec801;
+ background: linear-gradient(180deg, #002992, #080472);
+ }
}
- .elLink {
- margin-left: 5px;
- font-size: 15px;
- margin-bottom: 4px;
- }
+
/deep/.el-link.el-link--default:hover {
color: #409eff !important;
}
@@ -548,35 +551,6 @@
/deep/ li.el-menu-item.is-active {
// 娣诲姞鏍峰紡锛屽彧閽堝瀵艰埅鏍忛鑿滃崟
background-color: transparent;
- }
- .el-submenu /deep/.el-submenu__title:hover {
- color: #2e95fb !important;
- background: linear-gradient(#112f57, #122344) !important;
- }
- .secondMenuDiv {
- position: absolute;
- z-index: 1024;
- 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