From c215c89ecda16e4d32593f3e942fe871898071e9 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期一, 05 二月 2024 17:51:53 +0800
Subject: [PATCH] 代码提交
---
src/components/navMenu.vue | 634 ++++++++++++++++++++++++---------------------------------
1 files changed, 271 insertions(+), 363 deletions(-)
diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue
index a4db331..57b86e2 100644
--- a/src/components/navMenu.vue
+++ b/src/components/navMenu.vue
@@ -1,73 +1,84 @@
<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 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="NavBox"
+ @click.stop
+ >
+ <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"
+ >
+ <div style="display: flex;align-items: center">
+ <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">
+ <div
+ class="secondMenuDiv subpage_Div"
+ 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="userLanguage">
+ <div
+ class="userImage theme"
+ @click="themeChange"
+ ></div>
+ <div
+ class="userImage user2"
+ @click="switchLang"
+ ></div>
+
+ </div>
+ <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">
- <div class="userImage user2"></div>
- <div class="userText">Language</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>
<script>
-import { logout, selectMenuRecursive } from '@/api/api';
+import { logout, selectMenuRecursive, sign_insertOpLog } from '@/api/api';
import { removeToken, getToken } from '@/utils/auth';
import customElMenu from '../components/customElMenu.vue';
-import { queryMenuTree } from '../api/api';
+import { queryMenuTree, getPerms } from '../api/api';
import colorChange from '../views/maintenance/colorChange.vue';
import { containsCoordinate } from 'ol/extent';
import Vue from 'vue';
+import $ from 'jquery'
export default {
name: 'navMenu',
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
@@ -77,6 +88,7 @@
},
data() {
return {
+
themeColor: true,
oriData: [], //鍘熷鏍戞暟鎹�
dirData: [], //el鏍戞暟鎹�
@@ -94,128 +106,261 @@
itemdetail: {},
formLabelWidth: '70px',
count: 5,
- changeSelectStyle: 5,
+ changeSelectStyle: null,
changeliSelect: null,
changeSelectdiv: false,
- listMenu: [
- {
- cnName: '鏁版嵁璐ㄦ',
- css: 'm1',
- checkClass: 'm11',
- url: '',
- },
- {
- cnName: '鏁版嵁浜ゆ崲',
- css: 'm2',
- checkClass: 'm21',
- url: '',
- },
- {
- cnName: '鏈嶅姟绠＄悊',
- css: 'm4',
- checkClass: 'm41',
- url: '',
- },
- ],
+ listMenu: [],
showFlag: null,
+ language: true,
+ nowPage: [
+ {
+ name: '/Archive',
+ index: 3
+ },
+ {
+ name: '/dataApplication',
+ index: 3
+ },
+ {
+ name: '/ExportMap',
+ index: 3
+ },
+ {
+ name: '/Synthesis',
+ index: 3
+ },
+ {
+ name: '/dataController',
+ index: 4
+ },
+ {
+ name: '/mochaitmo',
+ index: 5
+ }
+ ]
};
},
- created() {},
+ created() { },
mounted() {
+ this.$store.state.themeflag = false;
+ $("#app").removeClass("Black_theme");
this.getMenuTree();
+ if (sessionStorage.getItem('changeliSelect')) {
+ this.$set(this, 'changeliSelect', sessionStorage.getItem('changeliSelect'))
+ // this.changeliSelect = sessionStorage.getItem('changeliSelect')
+ }
+ document.body.addEventListener('click', () => {
+ this.showFlag = null;
+ }, false);
+ // this.$bus.$on('closeMenuSecond', res => {
+ // this.showFlag = null;
+ // })
+ window.addEventListener('message', (e) => {
+
+ this.showFlag = null;
+ })
},
- computed: {
- // 鎴戜滑浣跨敤璁＄畻灞炴�ф潵鑾峰彇鍒板綋鍓嶇偣鍑荤殑鑿滃崟鐨勮矾鐢辫矾寰勶紝鐒跺悗璁剧疆default-active涓殑鍊�
- // 浣垮緱鑿滃崟鍦ㄨ浇鍏ユ椂灏辫兘瀵瑰簲楂樹寒
- // activeIndex() {
- // const route = this.$route;
- // const { meta, path } = route;
- // // if set path, the sidebar will highlight the path you set
- // // 鍙互鍦ㄨ矾鐢遍厤缃枃浠朵腑璁剧疆鑷畾涔夌殑璺敱璺緞鍒癿eta.activeMenu灞炴�т腑锛屾潵鎺у埗鑿滃崟鑷畾涔夐珮浜樉绀�
- // if (meta.activeMenu) {
- // return meta.activeMenu;
- // }
- // return path;
- // },
- },
+ computed: {},
methods: {
+ closeSecondMenu() {
+ this.showFlag = null
+ },
+ themeChange() {
+ this.$store.state.themeflag = !this.$store.state.themeflag;
+ if (this.$store.state.themeflag == true) {
+ $("#app").addClass("Black_theme");
+
+ } else {
+ $("#app").removeClass("Black_theme");
+ }
+
+ },
+ async getCookies() {
+ var boolean = this.getTimeCookies();
+ if (boolean != true) {
+ this.$router.push('/login');
+ return;
+ }
+ if (this.$store.state.permsEntity.length == 0) {
+ const data = await getPerms();
+ this.$store.state.permsEntity = data.result;
+ }
+
+ this.$store.state.uname = JSON.parse(
+ localStorage.getItem('LFToken')
+ ).uname;
+ this.$store.state.unid = JSON.parse(
+ localStorage.getItem('LFToken')
+ ).userid;
+ this.$router.push('/');
+ },
+ getTimeCookies() {
+ if (!localStorage.getItem('LFToken')) {
+ return false
+ }
+ var time1 = new Date(JSON.parse(localStorage.getItem('LFToken')).time);
+ var time2 = new Date();
+ if (time2 > time1) {
+ return false;
+ } else {
+ return true;
+ }
+ },
+
//涓婚鍒囨崲
- setThemeColors() {
- // var value;
- // if (this.themeColor) {
- // value = '#303030';
- // } else {
- // value = '#409EFF';
- // }
- // localStorage.setItem('theme', value);
- // this.$store.commit('setSkin', value);
+ setThemeColors() { },
+ async signInsertOpLog(m1, m2) {
+ var obj = {
+ m1: m1,
+ m2: m2,
+ }
+ const data = await sign_insertOpLog(obj);
},
//榧犳爣绉诲叆鑿滃崟浜嬩欢
setMenuMove(index, item) {
- var that = this;
- if (item.perms != null) {
+ if (item.perms != null && item.perms != "") {
this.$router.push(item.url);
- this.setShowFalseDiv(false);
- this.changeliSelect = '鍛靛懙';
- this.showFlag = null;
+ if (this.showFlag != null) {
+
+ this.changeliSelect = '%%';
+ this.showFlag = null;
+ }
+ if (item.url == "Thematic") {
+ this.signInsertOpLog("缁煎悎灞曠ず", item.cnName)
+ }
+
+ this.changeSelectStyle = index;
+ sessionStorage.setItem('changeSelectStyle', index)
} 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.showFlag = null;
}
}
+ //
+ if (index === 4 || index === 5 || index === 6) {
+ sessionStorage.removeItem('changeliSelect')
+ this.$set(this, 'changeliSelect', 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);
+ if (index != null) {
+ 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);
+ setLiClick(res, index) {
+ this.changeSelectStyle = index;
+ sessionStorage.setItem('changeSelectStyle', index)
+ sessionStorage.removeItem('hanleselectmochaitmo')
+ sessionStorage.removeItem('hanleselectindex')
+
+ // this.signInsertOpLog(this.listMenu[index].cnName, res.cnName)
+ setTimeout(() => {
+ this.changeliSelect = res.cnName;
+ sessionStorage.setItem('changeliSelect', res.cnName)
+ if (res.url.indexOf('{fmeHost}') != -1) {
+ this.$store.reporturl = res.url;
+ sessionStorage.setItem('iframehttpurl', this.$store.reporturl)
+ this.$router.push('/QualityInspection');
+ // if (location.href.indexOf('/WareInspection') == -1) {
+ // this.$store.reporturl = res.url;
+ // this.$router.push('/WareInspection');
+ // } else {
+ // this.$bus.$emit('changeNaveUrl', res.url);
+ // }
+ } else {
+ this.$store.reporturl = null;
+ sessionStorage.setItem('iframehttpurl', null)
+ // sessionStorage.setItem('changeliSelect', null)
+ this.$router.push(res.url);
+ this.$store.commit('currentPerms', res.perms);
+ }
+ this.setShowFalseDiv(false)
+ }, 100)
+
},
async getMenuTree() {
- //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
- // queryMaxId().then((res) => {
- // this.id = res.data;
- // });
- //
-
+ 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('鏆傛棤鑿滃崟鏍忔暟鎹�');
+ this.$message({
+ message: '鏆傛棤鑿滃崟鏍忔暟鎹�',
+ type: 'warning'
+ });
}
}
},
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;
- });
+
+ if (res[i].perms == null || res[i].perms == "") {
+ const result = await selectMenuRecursive({ id: res[i].id });
+
+ if (result.code == 200) {
+
+ res[i].children = result.result.filter((value) => {
+ return value.isShow == 1;
+ })
+ .filter((value) => {
+ return value.pid == res[i].id;
+ });
+
+ }
+ this.listMenu.push(res[i]);
+ // this.changeSelectStyle = this.listMenu.length - 1;
+ // this.changeSelectStyle = 0
+ // const nowPage = this.nowPage
+ // if (sessionStorage.getItem('routerName')) {
+ // for (let index = 0; index < nowPage.length; index++) {
+ // if (this.$route.path === nowPage[index].name) {
+ // this.$set(this, 'changeSelectStyle', nowPage[index].index)
+ // }
+ // }
+ // } else {
+ // this.changeSelectStyle = this.listMenu.length - 1;
+ // }
+
+ this.changeSelectStyle = sessionStorage.getItem('changeSelectStyle')
+ // var strartMneu = res[i].children[0];
+ // this.$store.commit('currentPerms', strartMneu.perms);
+ // this.changeliSelect = strartMneu.cnName;
+ // this.$bus.$emit('currentPerms', strartMneu.perms);
+ } else {
+ this.listMenu.push(res[i]);
}
- this.listMenu.push(res[i]);
}
},
treeData(source) {
@@ -231,7 +376,10 @@
return father.pid == 1; // 杩斿洖涓�绾ц彍鍗�
});
} else {
- alert('鏆傛棤鑿滃崟鏍忔暟鎹�');
+ this.$message({
+ message: '鏆傛棤鑿滃崟鏍忔暟鎹�',
+ type: 'warning'
+ });
}
},
logOut() {
@@ -265,6 +413,8 @@
if (this.lang == 'en') {
//璇█鎹㈡垚zh
this.lang = 'zh';
+ this.language = true;
+ this.$store.state.language = true;
//鑿滃崟鎹负zh
this.$store.commit('changeLang', 'zh');
//i18鎹㈡垚zh
@@ -273,6 +423,8 @@
//褰撳墠zh
else {
this.lang = 'en';
+ this.language = false;
+ this.$store.state.language = false;
this.$i18n.locale = this.lang;
this.$store.commit('changeLang', 'en'); //浼犻�掔偣鍑荤殑鑺傜偣
}
@@ -287,8 +439,8 @@
};
Window.ws = null;
}
-
- if (index.indexOf('http') != -1) {
+debugger
+ if (index.indexOf('{fmeHost}') != -1) {
this.$router.push('/databaseMonitoring');
this.$store.commit('getIframe', index);
} else if (isNaN(Number(index))) {
@@ -305,6 +457,7 @@
},
},
created() {
+ this.$store.reporturl = null;
let str = this.$route.path;
if (str[0] == '/') {
this.activeIndex = str.slice(1);
@@ -312,249 +465,4 @@
},
};
</script>
-<style lang="less" scoped>
-//@import url(); 寮曞叆鍏叡css绫�
-.topMenu {
- width: 100%;
- height: 100%;
- background-image: linear-gradient(rgb(34, 33, 33), rgb(27, 31, 78));
- display: flex;
- justify-content: space-between;
- .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;
- }
- .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;
- }
- .menuImage {
- width: 70px;
- height: 70px;
- }
- .m1 {
- background: url('../assets/img/menu/menu11.png') no-repeat;
- background-size: 100% 100%;
- }
- .m2 {
- background: url('../assets/img/menu/menu21.png') no-repeat;
- background-size: 100% 100%;
- }
- .m3 {
- background: url('../assets/img/menu/menu31.png') no-repeat;
- background-size: 100% 100%;
- }
- .m4 {
- background: url('../assets/img/menu/menu41.png') no-repeat;
- background-size: 100% 100%;
- }
- .m5 {
- background: url('../assets/img/menu/menu51.png') no-repeat;
- background-size: 100% 100%;
- }
- .m6 {
- background: url('../assets/img/menu/menu61.png') no-repeat;
- background-size: 100% 100%;
- }
- .m11 {
- background: url('../assets/img/menu/menu12.png') no-repeat;
- background-size: 100% 100%;
- }
- .m21 {
- background: url('../assets/img/menu/menu22.png') no-repeat;
- background-size: 100% 100%;
- }
- .m31 {
- background: url('../assets/img/menu/menu32.png') no-repeat;
- background-size: 100% 100%;
- }
- .m41 {
- background: url('../assets/img/menu/menu42.png') no-repeat;
- background-size: 100% 100%;
- }
- .m51 {
- background: url('../assets/img/menu/menu52.png') no-repeat;
- background-size: 100% 100%;
- }
- .m61 {
- background: url('../assets/img/menu/menu62.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- .rightUser {
- height: 100%;
- float: left;
- min-width: 130px;
- display: flex;
- flex-direction: column;
- .topdiv {
- width: 100%;
- height: 30px;
-
- margin-top: 10px;
- 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);
- }
- }
- .topUser {
- flex-shrink: 0;
- }
- .botLingo {
- flex-shrink: 1;
- }
- }
- }
- // .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;
- position: absolute;
- .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;
- }
- }
- .elLink {
- margin-left: 5px;
- font-size: 15px;
- margin-bottom: 4px;
- }
- /deep/.el-link.el-link--default:hover {
- color: #409eff !important;
- }
- /deep/ .el-link.el-link--default {
- color: white !important;
- }
- /deep/ ul.el-menu-vertical-demo.el-menu {
- // 娣诲姞鑳屾櫙棰滆壊
- background-image: rgba(255, 255, 255, 0.1) !important;
- }
-
- /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: 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