gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 功能组件添加

Browse Source 
新增vuex插件实现跨组件通信,调整国际化实现方式,调整路由参数,登录页面调整
This commit is contained in:
wanghaoyu
2019-12-05 16:48:23 +08:00
parent cadb6c11aa
commit 90855e258e
14 changed files with 441 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
nezha-fronted/src/components/common/header.vue
View File

@@ -7,27 +7,33 @@
background-color="#ffffff"
unique-opened
>
<el-menu-item index="1" @click="jumpTo('dashboard')"><div>
{{$t('overall.dashboard')}}</div></el-menu-item>
<el-menu-item index="1" @click="jumpTo('dashboard')">
<div>
{{$t('overall.dashboard')}}
</div>
</el-menu-item>
<el-submenu index="2">
<template slot="title"><div @click="jumpTo('project')">{{$t('overall.project')}}</div></template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<template slot="title">
<div @click="jumpTo('project')">{{$t('overall.project')}}</div>
</template>
</el-submenu>
<el-submenu index="3">
<template slot="title"><div @click="jumpTo('asset')">{{$t('overall.asset')}}</div></template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<template slot="title">
<div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
</template>
<template v-for="(item, index) in assetData">
<el-menu-item :index="index.toString()">
<div @click="jumpTo('asset',item.id)">{{item.name}}</div>
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="4">
<template slot="title"><div @click="jumpTo('alarm')">{{$t('overall.asset')}}</div></template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<template slot="title">
<div @click="jumpTo('alarm')">{{$t('overall.alarm')}}</div>
</template>
</el-submenu>
</el-menu>
</div>
<div class="header-right">
<div class="header-user-con">
@@ -43,10 +49,10 @@
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
<p>English</p>
</div>
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')" >
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
<p>简体</p>
</div>
<div style="cursor:no-drop;color:#a6a6a6" >
<div style="cursor:no-drop;color:#a6a6a6">
<p>русский</p>
</div>
</div>
@@ -66,17 +72,19 @@
<script>
export default {
name: "Header",
data(){
return{
language:localStorage.getItem("language"),
data() {
return {
language: localStorage.getItem("language"),
assetData: []
}
},
methods:{
jumpTo(data){
methods: {
jumpTo(data,id) {
this.$store.state.assetSelect = id
this.$router.push({
path: "/"+data,
path: "/" + data,
query: {
t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
t: +new Date()
}
});
},
@@ -84,22 +92,39 @@ export default {
localStorage.setItem("language", lang);
window.location.reload();
},
getAssetData() {
this.$get('idc', this.pageObj).then(response => {
if (response.code == 200) {
this.assetData = response.data.list
}
})
},
},
mounted() {
this.getAssetData()
}
}
</script>
<style>
.el-submenu__title .el-submenu__icon-arrow{
.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-menu--horizontal>.el-menu-item.is-active{
border-bottom:0px
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
border-bottom:0px
}
</style>
<style scoped>
.submenu{
.submenu {
padding-left: 50%;
width: 400px;
float: left;
}
.header {
position: relative;
box-sizing: border-box;
@@ -110,29 +135,35 @@ export default {
z-index: 500;
box-shadow: 0px 20px 13px -19px #5E5E5E;
}
.header-right {
float: right;
padding-right: 5px;
}
.header-user-con {
display: flex;
height: 50px;
align-items: center;
}
.user-avator {
padding: 0 5px 3px 0 ;
padding: 0 5px 3px 0;
margin-left: 20px;
line-height: 30px;
cursor: pointer;
}
.user-avator:hover{
.user-avator:hover {
border-radius: 2px;
background: rgba(255,255,255,.3);
background: rgba(255, 255, 255, .3);
}
.user-avator span {
font-size: 16px;
margin: 0 5px;
}
.user-avator i.iconfont {
color: #fff;
font-size: 25px;
@@ -140,18 +171,21 @@ export default {
display: inline-block;
line-height: 30px;
}
.userout{
.userout {
display: flex;
align-items: center;
justify-content: space-between;
}
.userout>div{
.userout > div {
width: 33.3%;
color: rgba(51, 137, 185, 1);
cursor: pointer;
text-align: center;
}
.SignOut{
.SignOut {
width: 100%;
height: 30px;
color: #fff;
@@ -161,10 +195,12 @@ export default {
margin-top: 20px;
cursor: pointer;
}
.SignOut:hover{
.SignOut:hover {
opacity: .8;
}
.header-name-jiantou{
.header-name-jiantou {
position: static !important;
}
</style>