413 lines
12 KiB
Vue
413 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div id="menuBar">
|
||
|
|
<div class="nav">
|
||
|
|
<template v-for="(item,i) in menu">
|
||
|
|
<template v-if="noShowingChildren(item.children)">
|
||
|
|
<li :id="getDomId(item)" :key="i" class="nav-li" @click="hookClick(item)">
|
||
|
|
<span class="nav-li-text">{{ item.title }}</span>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<li
|
||
|
|
v-if="handleShow(item)"
|
||
|
|
:id="getDomId(item)"
|
||
|
|
:key="i"
|
||
|
|
class="nav-li"
|
||
|
|
@click.stop="selectedClassA(item, i)"
|
||
|
|
>
|
||
|
|
<span class="nav-li-text">{{ item.title }}</span>
|
||
|
|
<ul class="nav-ul" :class="{'active' :i==classA}">
|
||
|
|
<template v-for="(child,j) in item.children">
|
||
|
|
<template v-if="child.children && child.children.length > 0">
|
||
|
|
<li
|
||
|
|
:id="getDomId(child)"
|
||
|
|
:key="j"
|
||
|
|
class="menu-li"
|
||
|
|
@click.stop="selectedClassB(child, j)"
|
||
|
|
>
|
||
|
|
<div class="menu-li-block">
|
||
|
|
<span class="menu-li-text">
|
||
|
|
<span class="status"> </span>
|
||
|
|
<span class="label">{{ child.title }}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<li
|
||
|
|
:id="getDomId(child)"
|
||
|
|
:key="j"
|
||
|
|
class="menu-li"
|
||
|
|
@click.stop="hookClick(child)"
|
||
|
|
>
|
||
|
|
<div class="menu-li-block">
|
||
|
|
<span class="menu-li-text">
|
||
|
|
<span class="status"> </span>
|
||
|
|
<span class="label">{{ child.title }}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'MenuBar',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
classA: -1,
|
||
|
|
classB: -1,
|
||
|
|
tempClassA: -1,
|
||
|
|
tempClassB: -1,
|
||
|
|
menu: [
|
||
|
|
{
|
||
|
|
title: '系统',
|
||
|
|
operate:{
|
||
|
|
id:'system'
|
||
|
|
},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '显示索引',
|
||
|
|
operate:{
|
||
|
|
id:'displayIndex'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '工具箱',
|
||
|
|
operate:{
|
||
|
|
id:'toolBox'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '历史',
|
||
|
|
operate:{
|
||
|
|
id:'history'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '注销',
|
||
|
|
operate:{
|
||
|
|
id:'cancellation'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '最小化',
|
||
|
|
operate:{
|
||
|
|
id:'minimum'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '摘要',
|
||
|
|
operate:{
|
||
|
|
id:'detail'
|
||
|
|
},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '报警停用',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '故障设备',
|
||
|
|
operate:{
|
||
|
|
id:'falutEquipment'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '人工置救',
|
||
|
|
operate:{
|
||
|
|
id:'humanSetting'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '检修挂牌',
|
||
|
|
operate:{
|
||
|
|
id:'maintenance'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '标记',
|
||
|
|
operate:{
|
||
|
|
id:'sign'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '帮助',
|
||
|
|
operate:{
|
||
|
|
id:'help'
|
||
|
|
},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '综合监控用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '电力用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '机电用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '闭路电视用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '火警报警用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '屏蔽门用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '售检票用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '门禁用户指南',
|
||
|
|
operate:{
|
||
|
|
id:'alamStop'
|
||
|
|
},
|
||
|
|
click: this.undeveloped
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
tempClassA() {
|
||
|
|
this.classA = this.tempClassA;
|
||
|
|
},
|
||
|
|
tempClassB() {
|
||
|
|
this.classB = this.tempClassB;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
noShowingChildren(children) {
|
||
|
|
if (!children || children.length <= 0) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
getDomId(item) {
|
||
|
|
if (item && item.operate) {
|
||
|
|
return item.operate.domId;
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
},
|
||
|
|
hookClick(item, event) {
|
||
|
|
// this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
||
|
|
if (item && typeof item.click == 'function') {
|
||
|
|
item.click(item.operate);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleShow(item) {
|
||
|
|
if (item.hide) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
undeveloped() {
|
||
|
|
this.doClose();
|
||
|
|
this.$alert('实现中......', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
callback: action => {
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
selectedClassA(item, index) {
|
||
|
|
// const order = this.order || 0;
|
||
|
|
this.popupMenuA(item, index);
|
||
|
|
},
|
||
|
|
// 弹出顶部菜单操作
|
||
|
|
popupMenuA(item, index) {
|
||
|
|
// this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
||
|
|
this.clickEvent();
|
||
|
|
// const operate = {
|
||
|
|
// type: 'bar',
|
||
|
|
// operation: item.operate.operation
|
||
|
|
// };
|
||
|
|
this.tempClassA = index;
|
||
|
|
this.tempClassB = -1;
|
||
|
|
// this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
|
||
|
|
// if (valid) {
|
||
|
|
// this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
clickEvent() {
|
||
|
|
const self = this;
|
||
|
|
window.onclick = function (e) {
|
||
|
|
if (document.getElementById('menuBar')) {
|
||
|
|
self.closeMenu(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
closeMenu(flag) {
|
||
|
|
this.classA = this.tempClassA = -1;
|
||
|
|
this.classB = this.tempClassB = -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
$width: 30px;
|
||
|
|
$height: 30px;
|
||
|
|
$menuPadding: 20px;
|
||
|
|
$menuItemHeight: 30px;
|
||
|
|
$menuItemWidth: 130px;
|
||
|
|
$menuItemPadding: 5px;
|
||
|
|
#menuBar {
|
||
|
|
z-index: 10;
|
||
|
|
position: absolute;
|
||
|
|
width: inherit;
|
||
|
|
height: $height;
|
||
|
|
line-height: $height;
|
||
|
|
background-color: #ACACAC;
|
||
|
|
width:100%;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav {
|
||
|
|
display: block;
|
||
|
|
cursor: pointer;
|
||
|
|
color: #4C4B6B;
|
||
|
|
background-color: #ACACAC;
|
||
|
|
border-bottom: 2px solid #5d5d5d !important;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-li {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
padding-left: $menuPadding;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 26px;
|
||
|
|
padding-right: 40px;
|
||
|
|
border-top: 2px solid #d4d4d4;
|
||
|
|
border-left: 2px solid #d4d4d4;
|
||
|
|
border-right: 2px solid #5d5d5d !important;
|
||
|
|
border-bottom: 2px solid #ACACAC !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-li::after{
|
||
|
|
content: '';
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 4px solid transparent;
|
||
|
|
border-right: 4px solid transparent;
|
||
|
|
border-top: 5px solid #4C4B6B;
|
||
|
|
position: absolute;
|
||
|
|
right:10px;
|
||
|
|
top: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-li:active {
|
||
|
|
background: #ACACAC;
|
||
|
|
border-left: 2px solid #565557;
|
||
|
|
border-top: 2px solid #565557;
|
||
|
|
border-right: 2px solid #d4d4d4 !important;
|
||
|
|
border-bottom: 2px solid #d4d4d4 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-li-text {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #4C4B6B;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.nav-ul {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
list-style: none;
|
||
|
|
line-height: $menuItemHeight;
|
||
|
|
background: #ACACAC;
|
||
|
|
padding: 0px 40px 0px 10px;
|
||
|
|
margin: 0px;
|
||
|
|
max-height: 550px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
font-size:13px;
|
||
|
|
left: -2px;
|
||
|
|
top: 30px;
|
||
|
|
border: 2px #f1f1f1 solid;
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
width: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 10px;
|
||
|
|
background: #ACACAC;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-scrollbar-track {
|
||
|
|
border-radius: 0;
|
||
|
|
background: #ACACAC;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
position: absolute;
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
.nav-li:active {
|
||
|
|
background: #C9D0E1;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.menu-li {
|
||
|
|
text-align: left;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.menu-li-block:hover{
|
||
|
|
color:#fff;
|
||
|
|
}
|
||
|
|
</style>
|