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/navMenu.vue | 206 ++++++++++++++++++++++++++++-----------------------
1 files changed, 112 insertions(+), 94 deletions(-)
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index 800d365..ab90e09 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,16 +1,23 @@
<template>
- <div class="topMenu">
- <div class="logo">
- <img src="../assets/img/www.terra-it.cn.png" alt="" />
- </div>
- <div class="rightWrapper">
- <div class="menu">
- <ul>
- <li v-for="item in menuList" :key="item.id">
- {{ item.cnName }}
- </li>
- </ul>
+ <div class="leftMenu">
+ <div class="leftTopWrapper">
+ <div class="logo">
+ <img src="../assets/img/www.terra-it.cn.png" alt="" />
</div>
+ <div class="menu">
+ <el-menu
+ active-text-color="#ffd04b"
+ class="el-menu-vertical-demo"
+ :default-active="activeIndex"
+ background-color="#586884"
+ text-color="#fff"
+ @select="handleselect"
+ >
+ <customElMenu :menuData="menuList"></customElMenu>
+ </el-menu>
+ </div>
+ </div>
+ <div class="leftBotWrapper">
<div class="userInfo">
<img src="../assets/img/user.png" alt="" />
<span>admin</span>
@@ -18,18 +25,22 @@
<span @click="switchLang"> 鍒囨崲璇█</span>
</div>
+ <div class="btnBox">
+ <div><img src="../assets/img/leftBtn.png" alt="" /></div>
+ <div><img src="../assets/img/rightBtn.png" alt="" /></div>
+ </div>
</div>
</div>
</template>
<script>
-import { logout } from "@/api/api";
-import { removeToken, getToken } from "@/utils/auth";
-import customElMenu from "../components/customElMenu.vue";
-import { queryMenuTree, getPerms } from "../api/api";
+import { logout } from '@/api/api';
+import { removeToken, getToken } from '@/utils/auth';
+import customElMenu from '../components/customElMenu.vue';
+import { queryMenuTree, getPerms } from '../api/api';
export default {
- name: "navMenu",
+ name: 'navMenu',
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
customElMenu,
@@ -39,10 +50,10 @@
oriData: [], //鍘熷鏍戞暟鎹�
dirData: [], //el鏍戞暟鎹�
newData: [], //鎷栧姩鍚庢暟鎹�
- lang: "zh",
- activeIndex: "/",
+ lang: 'zh',
+ activeIndex: '/',
menuList: [],
- editTitle: "",
+ editTitle: '',
showPopover: false,
showEditInfoWrapper: false,
showEdit: false,
@@ -50,7 +61,7 @@
editCatalogue: false,
editUnit: false,
itemdetail: {},
- formLabelWidth: "70px",
+ formLabelWidth: '70px',
};
},
mounted() {
@@ -82,15 +93,14 @@
if (res.code == 200) {
if (res.result.length != 0) {
let menuLists = res.result.filter((value) => {
- return value.pid == 1;
+ return value.type == 1;
});
- // console.log(menuLists);
- this.menuList = menuLists;
+ this.menuList = this.treeData(menuLists);
} else {
- alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
+ alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
}
} else {
- console.log("鎺ュ彛鎶ラ敊");
+ console.log('鎺ュ彛鎶ラ敊');
}
});
},
@@ -101,93 +111,93 @@
return cloneData.filter((father) => {
// 寰幆鎵�鏈夐」
let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
// 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
// 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
return father.pid == 1; // 杩斿洖涓�绾ц彍鍗�
});
} else {
- alert("鏆傛棤鑿滃崟鏍忔暟鎹�");
+ alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
}
},
logOut() {
- this.$confirm("纭鏄惁閫�鍑虹櫥褰�?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
+ this.$confirm('纭鏄惁閫�鍑虹櫥褰�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
})
.then(async () => {
const data = await logout({ token: getToken() });
- // console.log(data);
+ console.log(data);
if (data.code != 200) {
- return this.$message.error("閫�鍑虹櫥褰曞け璐�");
+ return this.$message.error('閫�鍑虹櫥褰曞け璐�');
}
removeToken();
- this.$router.push("/login");
+ this.$router.push('/login');
this.$message({
- message: "閫�鍑虹櫥褰曟垚鍔�",
- type: "success",
+ message: '閫�鍑虹櫥褰曟垚鍔�',
+ type: 'success',
});
})
.catch(() => {
this.$message({
- type: "info",
- message: "宸插彇娑�",
+ type: 'info',
+ message: '宸插彇娑�',
});
});
},
switchLang() {
//褰撳墠en
- if (this.lang == "en") {
+ if (this.lang == 'en') {
//璇█鎹㈡垚zh
- this.lang = "zh";
+ this.lang = 'zh';
//鑿滃崟鎹负zh
- this.$store.commit("changeLang", "zh");
+ this.$store.commit('changeLang', 'zh');
//i18鎹㈡垚zh
this.$i18n.locale = this.lang;
}
//褰撳墠zh
else {
- this.lang = "en";
+ this.lang = 'en';
this.$i18n.locale = this.lang;
- this.$store.commit("changeLang", "en"); //浼犻�掔偣鍑荤殑鑺傜偣
+ this.$store.commit('changeLang', 'en'); //浼犻�掔偣鍑荤殑鑺傜偣
}
},
handleselect(index, indexPath, e) {
- // console.log(e.$attrs.perms);
- this.$store.commit("currentPerms", e.$attrs.perms.perms);
+ console.log(e.$attrs.perms);
+ this.$store.commit('currentPerms', e.$attrs.perms.perms);
if (Window.ws != null) {
Window.ws.close();
Window.ws.onclose = () => {
- console.log("鏈嶅姟鍣ㄥ叧闂�");
+ console.log('鏈嶅姟鍣ㄥ叧闂�');
};
Window.ws = null;
}
- if (index.indexOf("http") != -1) {
- this.$router.push("/databaseMonitoring");
- this.$store.commit("getIframe", index);
+ if (index.indexOf('http') != -1) {
+ this.$router.push('/databaseMonitoring');
+ this.$store.commit('getIframe', index);
} else if (isNaN(Number(index))) {
this.$router.push(index);
}
},
getUserPerms() {
getPerms().then((res) => {
- if (res.code == 200) this.$store.commit("getPermsEntity", res.result);
+ if (res.code == 200) this.$store.commit('getPermsEntity', res.result);
});
},
},
watch: {
$route() {
let str = this.$route.path;
- if (str[0] == "/") {
+ if (str[0] == '/') {
this.activeIndex = str.slice(1);
}
},
},
created() {
let str = this.$route.path;
- if (str[0] == "/") {
+ if (str[0] == '/') {
this.activeIndex = str.slice(1);
}
},
@@ -195,58 +205,66 @@
</script>
<style lang="less" scoped>
//@import url(); 寮曞叆鍏叡css绫�
-.topMenu {
+.leftMenu {
+ // width: 300px;
+ height: 99%;
+ // background-color: #bfa;
+}
+.leftTopWrapper {
width: 100%;
height: 100%;
- background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78));
- display: flex;
- justify-content: space-between;
-
.logo {
- width: 500px;
- height: 100%;
- position: relative;
+ // background-color: rgb(139, 0, 0);
+ width: 249px;
+ height: 52px;
img {
- width: 70%;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
+ width: 100%;
}
}
- .rightWrapper {
- width: 70%;
- height: 100%;
- display: flex;
- .menu {
+ .menu {
+ height: 90%;
+ margin-top: 22px;
+ overflow: auto;
+ // background-color: rgb(120, 121, 120);
+ .el-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;
+ width: 280px;
+ border-right: none;
+ /deep/ .el-submenu {
+ margin-bottom: 10px;
+ .el-submenu__title {
+ background-color: transparent !important;
}
}
+ .faSub {
+ background-color: #586884;
+ }
}
- .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;
- }
+ }
+}
+.leftBotWrapper {
+ width: 258px;
+ position: absolute;
+ left: 19px;
+ bottom: 17px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .userInfo {
+ // 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;
+ }
+ .btnBox {
+ width: 65px;
+ display: flex;
+ justify-content: space-between;
}
}
</style>
--
Gitblit v1.9.3