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