<template>
|
<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 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>
|
</div>
|
</div>
|
</div>
|
<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 @click="logOut"
|
:underline="false"
|
class="elLink">{{ $t('common.logout') }}</el-link>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
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 colorChange from '../views/maintenance/colorChange.vue';
|
import { containsCoordinate } from 'ol/extent';
|
import Vue,{ nextTick } from 'vue';
|
import $ from 'jquery'
|
export default {
|
name: 'navMenu',
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
customElMenu,
|
colorChange,
|
},
|
data () {
|
return {
|
|
themeColor: true,
|
oriData: [], //原始树数据
|
dirData: [], //el树数据
|
newData: [], //拖动后数据
|
lang: 'zh',
|
activeIndex: '/',
|
menuList: [],
|
editTitle: '',
|
showPopover: false,
|
showEditInfoWrapper: false,
|
showEdit: false,
|
editMenu: false,
|
editCatalogue: false,
|
editUnit: false,
|
itemdetail: {},
|
formLabelWidth: '70px',
|
count: 5,
|
changeSelectStyle: null,
|
changeliSelect: null,
|
changeSelectdiv: false,
|
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 () {
|
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: {
|
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 () { },
|
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.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;
|
} else {
|
this.showFlag=null;
|
}
|
}
|
//
|
if(index===4||index===5||index===6) {
|
sessionStorage.removeItem('changeliSelect')
|
this.$set(this,'changeliSelect',null)
|
}
|
|
|
},
|
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;
|
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;
|
});
|
|
that.menuList=menuLists;
|
|
that.setMenuTree(menuLists);
|
} else {
|
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||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) {
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr=cloneData.filter((child) => father.id==child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length>0? (father.children=branchArr):''; // 给父级添加一个children属性，并赋值
|
// 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
|
// 由此循环多次后，就能形成相应的树形数据结构
|
return father.pid==1; // 返回一级菜单
|
});
|
} else {
|
this.$message({
|
message: '暂无菜单栏数据',
|
type: 'warning'
|
});
|
}
|
},
|
logOut () {
|
this.$confirm('确认是否退出登录?','提示',{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const data=await logout({ token: getToken() });
|
// console.log(data);
|
if(data.code!=200) {
|
return this.$message.error('退出登录失败');
|
}
|
removeToken();
|
this.$router.push('/login');
|
this.$message({
|
message: '退出登录成功',
|
type: 'success',
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消',
|
});
|
});
|
},
|
switchLang () {
|
//当前en
|
if(this.lang=='en') {
|
//语言换成zh
|
this.lang='zh';
|
this.language=true;
|
this.$store.state.language=true;
|
//菜单换为zh
|
this.$store.commit('changeLang','zh');
|
//i18换成zh
|
this.$i18n.locale=this.lang;
|
}
|
//当前zh
|
else {
|
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) {
|
// 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('服务器关闭');
|
};
|
Window.ws=null;
|
}
|
debugger
|
if(index.indexOf('{fmeHost}')!=-1) {
|
this.$router.push('/databaseMonitoring');
|
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);
|
}
|
},
|
},
|
created () {
|
this.$store.reporturl=null;
|
let str=this.$route.path;
|
if(str[0]=='/') {
|
this.activeIndex=str.slice(1);
|
}
|
},
|
};
|
</script>
|
