826 lines
22 KiB
Vue
826 lines
22 KiB
Vue
<template>
|
|
<div id="menuBar">
|
|
<div class="nav">
|
|
<template v-for="(item,i) in menu">
|
|
<template v-if="noShowingChildren(item.children)">
|
|
<li :id="item.operate.domId" :key="i" class="nav-li" @click="hookClick(item)">
|
|
<span class="nav-li-text">{{ item.title }}</span>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li :id="item.operate.domId" :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&&hasShowingChildren(child.children)"
|
|
>
|
|
<li
|
|
:id="child.operate.domId"
|
|
: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>
|
|
<ul class="menu-ul" :class="{'active' :j==classB}">
|
|
<template v-for="(grandchild,k) in child.children">
|
|
<li
|
|
v-if="grandchild.show"
|
|
:id="grandchild.operate.domId"
|
|
:key="k"
|
|
class="menu-li"
|
|
@click.stop="hookClick(grandchild)"
|
|
>
|
|
<div class="menu-li-block">
|
|
<span class="menu-li-text">
|
|
<span class="status"> </span>
|
|
<span class="label">{{ grandchild.title }}</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li
|
|
v-if="child.show"
|
|
:id="child.operate.domId"
|
|
: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>
|
|
<station-control-convert ref="stationControlConvert" />
|
|
<password-box ref="passwordBox" @setLoginResult="getLoginResult" />
|
|
<view-train-id ref="viewTrainId" />
|
|
<view-name ref="viewName" />
|
|
<view-device ref="viewDevice" />
|
|
<notice-info ref="noticeInfo" />
|
|
<train-add ref="trainAdd" />
|
|
<train-transtalet ref="trainTranstalet" />
|
|
<train-delete ref="trainDelete" />
|
|
<manage-user ref="manageUser" />
|
|
<help-about ref="helpAbout" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { TrainingMode, OperationEvent } from '@/scripts/ConstDic';
|
|
// import { OperateMode } from '@/scripts/ConstDic';
|
|
import { menuBarConvert, SystemType } from './utils/menuItemStatus';
|
|
import StationControlConvert from './menuDialog/stationControlConvert';
|
|
import TrainAdd from './menuDialog/trainAdd';
|
|
import TrainTranstalet from './menuDialog/trainTranstalet';
|
|
import TrainDelete from './menuDialog/trainDelete';
|
|
import PasswordBox from './menuDialog/passwordBox';
|
|
import ViewTrainId from './menuDialog/viewTrainId';
|
|
import ViewName from './menuDialog/viewName';
|
|
import ViewDevice from './menuDialog/viewDevice';
|
|
import ManageUser from './menuDialog/manageUser';
|
|
import HelpAbout from './menuDialog/helpAbout';
|
|
import NoticeInfo from './dialog/childDialog/childDialog/noticeInfo';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
|
|
export default {
|
|
name: 'MenuBar',
|
|
components: {
|
|
NoticeInfo,
|
|
StationControlConvert,
|
|
PasswordBox,
|
|
ViewTrainId,
|
|
ViewName,
|
|
ViewDevice,
|
|
TrainAdd,
|
|
TrainTranstalet,
|
|
TrainDelete,
|
|
ManageUser,
|
|
HelpAbout
|
|
},
|
|
props: {
|
|
selected: {
|
|
type: Object,
|
|
default() {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
classA: -1,
|
|
classB: -1,
|
|
tempClassA: -1,
|
|
tempClassB: -1,
|
|
valid: true,
|
|
menu: [],
|
|
menuNormal: {
|
|
local: [
|
|
{
|
|
title: this.$t('menu.menuBar.system'),
|
|
operate: OperationEvent.Command.mBar.system,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.view'),
|
|
operate: OperationEvent.Command.mBar.check,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.refresh'),
|
|
operate: OperationEvent.Command.mBar.fresh,
|
|
click: this.refresh,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.display'),
|
|
operate: OperationEvent.Command.mBar.view,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.setTrainIdDisplay'),
|
|
click: this.setTrainIdDisplay,
|
|
operate: OperationEvent.Command.view.setTrainIdDisplay
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.setNameDisplay'),
|
|
click: this.setNameDisplay,
|
|
operate: OperationEvent.Command.view.setNameDisplay
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.setDeviceDisplay'),
|
|
click: this.setDeviceDisplay,
|
|
operate: OperationEvent.Command.view.setDeviceDisplay
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.stationMapSwitch'),
|
|
operate: '',
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.controlModeSwitch'),
|
|
operate: OperationEvent.Command.mBar.remoteControl,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.toStationControl'),
|
|
click: this.turnToStationControl,
|
|
operate: OperationEvent.StationControl.requestStationControl.mbar
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.forcedStationControl'),
|
|
click: this.mandatoryStationControl,
|
|
operate: OperationEvent.StationControl.forcedStationControl.password
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.toCentralControl'),
|
|
click: this.conterStationControl,
|
|
operate: OperationEvent.StationControl.requestCentralControl.mbar,
|
|
froce: true
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.requestOperationArea'),
|
|
operate: OperationEvent.Command.mBar.requestZone,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.historyQuery'),
|
|
operate: OperationEvent.Command.mBar.historyQuery,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.userManage'),
|
|
operate: OperationEvent.Command.mBar.userManage,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.userManage'),
|
|
click: this.userManage,
|
|
operate: OperationEvent.Command.manage.userManage
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.help'),
|
|
operate: OperationEvent.Command.mBar.help,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.about'),
|
|
click: this.about,
|
|
operate: OperationEvent.Command.help.about
|
|
}
|
|
]
|
|
}
|
|
],
|
|
central: [
|
|
{
|
|
title: this.$t('menu.menuBar.system'),
|
|
operate: OperationEvent.Command.mBar.system,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.view'),
|
|
operate: OperationEvent.Command.mBar.check,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.refresh'),
|
|
operate: OperationEvent.Command.mBar.fresh,
|
|
click: this.refresh,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.display'),
|
|
operate: OperationEvent.Command.mBar.view,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.setTrainIdDisplay'),
|
|
click: this.setTrainIdDisplay,
|
|
operate: OperationEvent.Command.view.setTrainIdDisplay
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.setNameDisplay'),
|
|
click: this.setNameDisplay,
|
|
operate: OperationEvent.Command.view.setNameDisplay
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.setDeviceDisplay'),
|
|
click: this.setDeviceDisplay,
|
|
operate: OperationEvent.Command.view.setDeviceDisplay
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.stationMapSwitch'),
|
|
operate: '',
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.planCarOperation'),
|
|
operate: OperationEvent.Command.mBar.planTrain,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.addPlanCar'),
|
|
click: this.addPlanTrain,
|
|
operate: OperationEvent.Command.planTrain.addPlanTrain
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.panPlanCar'),
|
|
click: this.translatPlanTrain,
|
|
operate: OperationEvent.Command.planTrain.translatPlanTrain
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.deletePlanCar'),
|
|
click: this.delPlanTrain,
|
|
operate: OperationEvent.Command.planTrain.delPlanTrain
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.trainNumberMaintenance'),
|
|
operate: '',
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.controlModeSwitch'),
|
|
operate: OperationEvent.Command.mBar.remoteControl,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.toStationControl'),
|
|
click: this.turnToStationControl,
|
|
operate: OperationEvent.StationControl.requestStationControl.mbar,
|
|
froce: true
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.forcedStationControl'),
|
|
click: this.mandatoryStationControl,
|
|
operate: OperationEvent.StationControl.forcedStationControl.password,
|
|
froce: true
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.toCentralControl'),
|
|
click: this.conterStationControl,
|
|
operate: OperationEvent.StationControl.requestCentralControl.mbar
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.requestOperationArea'),
|
|
operate: OperationEvent.Command.mBar.requestZone,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.schedulingLog'),
|
|
operate: '',
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.systemAnalysis'),
|
|
operate: '',
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.userManage'),
|
|
operate: OperationEvent.Command.mBar.userManage,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.userManage'),
|
|
click: this.userManage,
|
|
operate: OperationEvent.Command.manage.userManage
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.historyQuery'),
|
|
operate: OperationEvent.Command.mBar.historyQuery,
|
|
click: this.undeveloped,
|
|
children: [
|
|
]
|
|
},
|
|
{
|
|
title: this.$t('menu.menuBar.help'),
|
|
operate: OperationEvent.Command.mBar.help,
|
|
children: [
|
|
{
|
|
title: this.$t('menu.menuBar.about'),
|
|
click: this.about,
|
|
operate: OperationEvent.Command.help.about
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters('training', [
|
|
'mode',
|
|
'started',
|
|
'steps',
|
|
'order',
|
|
'mode'
|
|
]),
|
|
...mapGetters('map', [
|
|
'stationList'
|
|
])
|
|
},
|
|
watch: {
|
|
tempClassA() {
|
|
this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
|
|
},
|
|
tempClassB() {
|
|
this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
|
|
},
|
|
'$store.state.menuOperation.break': function (val) {
|
|
if (val) {
|
|
this.classA = this.classB = -1;
|
|
} else {
|
|
this.classA = this.tempClassA;
|
|
this.classB = this.tempClassB;
|
|
}
|
|
},
|
|
'$store.state.training.operatemode': function (mode) {
|
|
this.initMenu();
|
|
},
|
|
'$store.state.training.started': function (val) {
|
|
this.closeMenu(true);
|
|
},
|
|
'$store.state.training.prdType': function () {
|
|
this.initMenu();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initMenu();
|
|
},
|
|
methods: {
|
|
initMenu(menu) {
|
|
this.menu = menuBarConvert(this.menuNormal[SystemType[this.$store.state.training.prdType]], this.$store.state.training.operatemode);
|
|
this.clickEvent();
|
|
this.closeMenu(true);
|
|
},
|
|
clickEvent() {
|
|
const self = this;
|
|
window.onclick = function (e) {
|
|
if (document.getElementById('menuBar')) {
|
|
self.closeMenu(false);
|
|
}
|
|
};
|
|
},
|
|
noShowingChildren(children) {
|
|
if (!children || children.length <= 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
hasShowingChildren(children) {
|
|
if (children && children.length > 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
closeMenu(flag) {
|
|
if (flag || (this.mode !== TrainingMode.EDIT && this.mode !== TrainingMode.TEACH)) {
|
|
this.classA = this.tempClassA = -1;
|
|
this.classB = this.tempClassB = -1;
|
|
}
|
|
},
|
|
hookClick(item, event) {
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
|
if (item && typeof item.click == 'function') {
|
|
item.click(item.operate);
|
|
}
|
|
},
|
|
selectedClassA(item, index) {
|
|
const order = this.order || 0;
|
|
if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
|
|
this.popupMenuA(item, index);
|
|
} else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
|
|
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/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
}
|
|
});
|
|
},
|
|
selectedClassB(item, index) {
|
|
const order = this.order || 0;
|
|
if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
|
|
this.popupMenuB(item, index);
|
|
} else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
|
|
this.popupMenuB(item, index);
|
|
}
|
|
},
|
|
popupMenuB(item, index) {
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: item.operate.operation
|
|
};
|
|
this.tempClassB = index;
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
}
|
|
});
|
|
},
|
|
// 转为站控
|
|
turnToStationControl(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.stationControlConvert.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 强制转为站控
|
|
mandatoryStationControl(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.passwordBox.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 请求中控
|
|
conterStationControl(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.stationControlConvert.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 设置列车识别号显示
|
|
setTrainIdDisplay(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.viewTrainId.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 设置设备显示
|
|
setNameDisplay(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.viewName.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 设置名称显示
|
|
setDeviceDisplay(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.viewDevice.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 添加计划车
|
|
addPlanTrain(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.trainAdd.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 平移计划车
|
|
translatPlanTrain(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.trainTranstalet.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 删除计划车
|
|
delPlanTrain(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.trainDelete.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 用户管理
|
|
userManage(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.manageUser.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 关于
|
|
about(order) {
|
|
const operate = {
|
|
type: 'bar',
|
|
operation: order.operation
|
|
};
|
|
this.$store.dispatch('training/next', operate).then(({ valid }) => {
|
|
if (valid) {
|
|
this.closeMenu(true);
|
|
this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
|
|
this.$refs.helpAbout.doShow(operate);
|
|
}
|
|
});
|
|
},
|
|
// 刷新
|
|
refresh() {
|
|
this.closeMenu(true);
|
|
EventBus.$emit('refresh');
|
|
},
|
|
getLoginResult(operate) {
|
|
/** 密码校验*/
|
|
if (operate.operation == OperationEvent.StationControl.forcedStationControl.passwordConfirm.operation) {
|
|
if (operate.success) {
|
|
/** 校验成功*/
|
|
this.$refs.stationControlConvert.doShow({ operation: OperationEvent.StationControl.forcedStationControl.mbar.operation });
|
|
}
|
|
}
|
|
},
|
|
undeveloped() {
|
|
this.doClose();
|
|
|
|
this.$alert(this.$t('menu.menuBar.implemented'), this.$t('global.tips'), {
|
|
confirmButtonText: this.$t('global.confirm'),
|
|
callback: action => {
|
|
}
|
|
});
|
|
},
|
|
doClose() {
|
|
this.$nextTick(() => {
|
|
EventBus.$emit('closeMenu');
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped rel="stylesheet/scss" lang="scss">
|
|
@import "src/styles/mixin.scss";
|
|
$width: 30px;
|
|
$height: 30px;
|
|
$menuPadding: 10px;
|
|
$menuItemHeight: 30px;
|
|
$menuItemWidth: 180px;
|
|
$menuItemPadding: 5px;
|
|
|
|
#menuBar {
|
|
z-index: 10;
|
|
position: absolute;
|
|
width: inherit;
|
|
height: $height;
|
|
line-height: $height;
|
|
}
|
|
|
|
.nav {
|
|
display: block;
|
|
cursor: pointer;
|
|
color: #0000;
|
|
background: -webkit-linear-gradient(#FDFDFE, #DEE3F3);
|
|
background: -o-linear-gradient(#FDFDFE, #DEE3F3);
|
|
background: -moz-linear-gradient(#FDFDFE, #DEE3F3);
|
|
background: linear-gradient(#FDFDFE, #DEE3F3);
|
|
border: 1px solid #B6BCCC !important;
|
|
border-bottom: 2px solid #B6BCCC !important;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-li {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-left: $menuPadding;
|
|
padding-right: $menuPadding;
|
|
}
|
|
|
|
.nav-li:active {
|
|
background: #C9D0E1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.nav-li-text {
|
|
font-size: 13px;
|
|
color: #000;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-ul {
|
|
display: none;
|
|
position: absolute;
|
|
list-style: none;
|
|
border: 1px solid gray !important;
|
|
line-height: $menuItemHeight;
|
|
width: $menuItemWidth;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.menu-ul {
|
|
display: none;
|
|
list-style: none;
|
|
background: #F0F0F0;
|
|
line-height: $menuItemHeight;
|
|
width: $menuItemWidth;
|
|
bottom: $menuItemHeight;
|
|
}
|
|
|
|
.active {
|
|
position: absolute;
|
|
display: block !important;
|
|
}
|
|
|
|
.menu-ul-text {
|
|
font-size: 14px;
|
|
color: #000;
|
|
letter-spacing: 0;
|
|
height: $menuItemHeight;
|
|
line-height: $menuItemHeight;
|
|
}
|
|
|
|
.menu-li {
|
|
text-align: left;
|
|
background: #F0F0F0;
|
|
height: $menuItemHeight;
|
|
line-height: $menuItemHeight;
|
|
}
|
|
|
|
.menu-li-block {
|
|
display: flex;
|
|
letter-spacing: 0;
|
|
height: $menuItemHeight;
|
|
line-height: $menuItemHeight;
|
|
}
|
|
|
|
.menu-li-text {
|
|
font-size: 14px;
|
|
color: #000;
|
|
}
|
|
|
|
.menu-li-text .status {
|
|
display: inline-block;
|
|
border-right: 1px inset #CACACA;
|
|
width: $width;
|
|
}
|
|
|
|
.menu-li-text .label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.menu-li-block:hover {
|
|
background: #C9DEF7;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
</style>
|