main
liuyiliang
1 year ago
parent
0cee748c48
commit
f177c16761
18 changed files with 439 additions and 150 deletions
@ -0,0 +1,107 @@ |
||||
<template> |
||||
<div class="my-menu"> |
||||
<el-row> |
||||
<el-col :span="2" v-for="(item, index) in data" :key="index"> |
||||
<center> |
||||
<el-link |
||||
:underline="false" |
||||
@click="toggleUnderline(index, item.path)" |
||||
style="margin-top: 10px;font-weight: bold;" |
||||
:class="{ 'link-underline': item.isUnderlined }" |
||||
> |
||||
{{ item.name }} |
||||
</el-link> |
||||
</center> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapGetters } from "vuex"; |
||||
export default { |
||||
props: { |
||||
switchMenu: { |
||||
type: Function, |
||||
required: true, |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
data: [ |
||||
// {name: '首页', isUnderlined: true, path: "/wel/index"}, |
||||
// {name: '设备台账管理', isUnderlined: false, code: "leger"}, |
||||
// {name: '巡检管理', isUnderlined: false, code: "inspection"}, |
||||
// {name: '智能两票', isUnderlined: false, code: "smart"}, |
||||
// {name: '备件管理', isUnderlined: false, code: "spares"}, |
||||
// {name: '工单管理', isUnderlined: false, code: "workorder"}, |
||||
// {name: '生产信息发布', isUnderlined: false, code: "release"} |
||||
] |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(["menu"]), |
||||
}, |
||||
created() { |
||||
setTimeout(() => { |
||||
let menuList = window.sessionStorage.getItem('daf-menuAll'); |
||||
this.data.push({name: '首页', isUnderlined: true, path: "/wel/index"}); |
||||
if (menuList) { |
||||
for (var index = 0; index < JSON.parse(menuList).content.length; index++) { |
||||
this.data.push({ |
||||
name: JSON.parse(menuList).content[index].name, |
||||
code: JSON.parse(menuList).content[index].code, |
||||
isUnderlined: false |
||||
}) |
||||
} |
||||
} |
||||
}, 500); |
||||
}, |
||||
watch: { |
||||
}, |
||||
methods: { |
||||
toggleUnderline(index) { |
||||
this.data.forEach(item => { |
||||
item.isUnderlined = false; |
||||
}); |
||||
this.data[index].isUnderlined = true; |
||||
if (this.data[index].path) { |
||||
if (this.data[index].path) { |
||||
this.$router.push({path: this.data[index].path}); |
||||
} |
||||
} |
||||
this.goSwitchMenu(this.data[index].code); |
||||
}, |
||||
goSwitchMenu(code) { |
||||
this.switchMenu(code); |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.my-menu { |
||||
left: 20px; |
||||
position: relative; |
||||
width: 1100px; |
||||
height: 40px; |
||||
z-index: 1028; |
||||
} |
||||
.my-menu .el-link.el-link--default { |
||||
color: #FFFFFF; |
||||
} |
||||
.link-underline { |
||||
font-weight: bold; |
||||
color: #FFFFFF !important; |
||||
} |
||||
|
||||
.link-underline::after { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: -5px; |
||||
width: 100%; |
||||
height: 2px; |
||||
background-color: #FFFFFF; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,79 @@ |
||||
<template> |
||||
<div> |
||||
<div class="my-navigation"> |
||||
<el-row > |
||||
<el-col :span="2" v-for="(item, index) in data" :key="index"> |
||||
<el-link |
||||
:underline="false" |
||||
@click="toggleUnderline(index)" |
||||
:class="{ 'link-underline': item.isUnderlined }" |
||||
> |
||||
{{ item.name }} |
||||
</el-link> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapGetters } from "vuex"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
time: "", |
||||
data: [ |
||||
{name: '运行监视', isUnderlined: false}, |
||||
{name: '综合报警', isUnderlined: false}, |
||||
{name: '多能分析', isUnderlined: false}, |
||||
{name: '智能巡视', isUnderlined: false}, |
||||
{name: '数字李生', isUnderlined: false}, |
||||
{name: '双碳管理', isUnderlined: false}, |
||||
{name: '视频监控', isUnderlined: false}, |
||||
{name: '报表管理', isUnderlined: false}, |
||||
{name: '智慧交易', isUnderlined: false}, |
||||
{name: '智慧运维', isUnderlined: true}, |
||||
{name: '智能安防', isUnderlined: false} |
||||
] |
||||
}; |
||||
}, |
||||
computed: { |
||||
}, |
||||
created() { |
||||
}, |
||||
methods: { |
||||
toggleUnderline(index) { |
||||
this.data.forEach(item => { |
||||
item.isUnderlined = false; |
||||
}); |
||||
this.data[index].isUnderlined = !this.data[index].isUnderlined; |
||||
} |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.my-navigation { |
||||
margin-top: 27px; |
||||
left: 140px; |
||||
position: relative; |
||||
width: 850px; |
||||
} |
||||
.my-navigation .el-link.el-link--default { |
||||
color: #BEC1D9; |
||||
} |
||||
.link-underline { |
||||
font-weight: bold; |
||||
color: #FFFFFF !important; |
||||
} |
||||
|
||||
.link-underline::after { |
||||
content: ''; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: -5px; |
||||
width: 100%; |
||||
height: 2px; |
||||
background-color: #FFFFFF; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue