From e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期四, 09 五月 2024 11:06:43 +0800 Subject: [PATCH] 代码更新 --- src/components/navMenu.vue | 723 +++++++++++++++++++++++------------------------------- 1 files changed, 308 insertions(+), 415 deletions(-) diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue index c9c21bc..508537a 100644 --- a/src/components/navMenu.vue +++ b/src/components/navMenu.vue @@ -1,73 +1,66 @@ <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="menulabel" - :class="{ changeStyle: changeSelectStyle == index }" - > - {{ item.cnName }} + <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 }"> + <span v-show="language"> {{ item.cnName }}</span> <span v-show="!language"> {{ item.enName }}</span> </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 class="secondMenuDiv subpage_Div" + v-show="index == showFlag ? true :false"> + <div v-for="res in item.children" + @click="setLiClick(res,index)" + :class="{ changeLiStyle: changeliSelect == 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 { removeToken, getToken } from '@/utils/auth'; +import { logout,selectMenuRecursive,sign_insertOpLog } from '@/api/api'; +import { removeToken,getToken } from '@/utils/auth'; import customElMenu from '../components/customElMenu.vue'; -import { queryMenuTree, getPerms } 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 Vue,{ nextTick } from 'vue'; +import $ from 'jquery' export default { name: 'navMenu', //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� @@ -75,8 +68,9 @@ customElMenu, colorChange, }, - data() { + data () { return { + themeColor: true, oriData: [], //鍘熷鏍戞暟鎹� dirData: [], //el鏍戞暟鎹� @@ -94,157 +88,296 @@ 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() {}, - mounted() { + 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: {}, methods: { - async getCookies() { - var boolean = this.getTimeCookies(); - if (boolean != true) { + 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; + if(this.$store.state.permsEntity.length==0) { + const data=await getPerms(); + this.$store.state.permsEntity=data.result; } - this.$store.state.uname = JSON.parse( + + this.$store.state.uname=JSON.parse( localStorage.getItem('LFToken') ).uname; + this.$store.state.unid=JSON.parse( + localStorage.getItem('LFToken') + ).userid; this.$router.push('/'); }, - getTimeCookies() { - var time1 = new Date(JSON.parse(localStorage.getItem('LFToken')).time); - var time2 = new Date(); - if (time2 > time1) { + 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() {}, - //榧犳爣绉诲叆鑿滃崟浜嬩欢 - setMenuMove(index, item) { - var that = this; - if (item.perms != null) { + //涓婚鍒囨崲 + setThemeColors () { }, + async signInsertOpLog (m1,m2) { + var obj={ + m1: m1, + m2: m2, + } + const data=await sign_insertOpLog(obj); + }, + //榧犳爣绉诲叆鑿滃崟浜嬩欢 + setMenuMove (index,item) { + + if(item.perms!=null&&item.perms!="") { this.$router.push(item.url); - if (this.showFlag != null) { - 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.$nextTick(function() { + location.reload(); + }) + + } + + this.changeSelectStyle=index; + sessionStorage.setItem('changeSelectStyle',index) } else { - if (this.showFlag != index) { - this.showFlag = index; - this.setShowFalseDiv(true); + if(this.showFlag!=index) { + this.showFlag=index; } 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; - }, - 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); - this.$store.commit('currentPerms', res.perms); + 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); + + } }, - async getMenuTree() { + setShowFalseDiv (bolean) { + var index=this.showFlag; + if(index!=null) { + let newItem=this.listMenu[index]; + + newItem.show=bolean; + Vue.set(this.listMenu,index,newItem); + } + }, + 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 () { 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; + 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.menuList=menuLists; + that.setMenuTree(menuLists); } else { - alert('鏆傛棤鑿滃崟鏍忔暟鎹�'); - } - } - }, - 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.$message({ + message: '鏆傛棤鑿滃崟鏍忔暟鎹�', + type: 'warning' }); } - this.listMenu.push(res[i]); } }, - treeData(source) { - let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 + async setMenuTree (res) { + + for(var i in res) { + res[i].checkClass=res[i].css+'1'; + res[i].show=false; //鎺у埗鏄鹃殣 + + 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]); + } + } + }, + treeData (source) { + let cloneData=JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 // console.log(cloneData); - if (cloneData.length != 0) { + if(cloneData.length!=0) { return cloneData.filter((father) => { // 寰幆鎵�鏈夐」 - let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 - branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� + let branchArr=cloneData.filter((child) => father.id==child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 + branchArr.length>0? (father.children=branchArr):''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛� // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋� - return father.pid == 1; // 杩斿洖涓�绾ц彍鍗� + return father.pid==1; // 杩斿洖涓�绾ц彍鍗� }); } else { - alert('鏆傛棤鑿滃崟鏍忔暟鎹�'); + this.$message({ + message: '鏆傛棤鑿滃崟鏍忔暟鎹�', + type: 'warning' + }); } }, - logOut() { - this.$confirm('纭鏄惁閫�鍑虹櫥褰�?', '鎻愮ず', { + logOut () { + this.$confirm('纭鏄惁閫�鍑虹櫥褰�?','鎻愮ず',{ confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', type: 'warning', }) .then(async () => { - const data = await logout({ token: getToken() }); + const data=await logout({ token: getToken() }); // console.log(data); - if (data.code != 200) { + if(data.code!=200) { return this.$message.error('閫�鍑虹櫥褰曞け璐�'); } removeToken(); @@ -261,301 +394,61 @@ }); }); }, - switchLang() { + switchLang () { //褰撳墠en - if (this.lang == 'en') { + if(this.lang=='en') { //璇█鎹㈡垚zh - this.lang = 'zh'; + this.lang='zh'; + this.language=true; + this.$store.state.language=true; //鑿滃崟鎹负zh - this.$store.commit('changeLang', 'zh'); + this.$store.commit('changeLang','zh'); //i18鎹㈡垚zh - this.$i18n.locale = this.lang; + this.$i18n.locale=this.lang; } //褰撳墠zh else { - this.lang = 'en'; - this.$i18n.locale = this.lang; - this.$store.commit('changeLang', 'en'); //浼犻�掔偣鍑荤殑鑺傜偣 + this.lang='en'; + this.language=false; + this.$store.state.language=false; + this.$i18n.locale=this.lang; + this.$store.commit('changeLang','en'); //浼犻�掔偣鍑荤殑鑺傜偣 } }, - handleselect(index, indexPath, e) { + handleselect (index,indexPath,e) { // console.log(e.$attrs.perms); - this.$store.commit('currentPerms', e.$attrs.perms.perms); - if (Window.ws != null) { + this.$store.commit('currentPerms',e.$attrs.perms.perms); + if(Window.ws!=null) { Window.ws.close(); - Window.ws.onclose = () => { + Window.ws.onclose=() => { console.log('鏈嶅姟鍣ㄥ叧闂�'); }; - Window.ws = null; + 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))) { + this.$store.commit('getIframe',index); + } else if(isNaN(Number(index))) { this.$router.push(index); } }, }, watch: { - $route() { - let str = this.$route.path; - if (str[0] == '/') { - this.activeIndex = str.slice(1); + $route () { + let str=this.$route.path; + if(str[0]=='/') { + this.activeIndex=str.slice(1); } }, }, - created() { - let str = this.$route.path; - if (str[0] == '/') { - this.activeIndex = str.slice(1); + created () { + this.$store.reporturl=null; + let str=this.$route.path; + if(str[0]=='/') { + this.activeIndex=str.slice(1); } }, }; </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: 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