474 lines
15 KiB
Vue
474 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<div id="PlanMenuBar">
|
|||
|
|
<div class="nav">
|
|||
|
|
<template v-for="(item,i) in menu">
|
|||
|
|
<template v-if="noShowingChildren(item.children)">
|
|||
|
|
<li class="nav-li" @click="hookClick(item)">
|
|||
|
|
<span class="nav-li-text">{{ item.title }}</span>
|
|||
|
|
</li>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<li class="nav-li" @click.stop="popupMenuA(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 v-if="child.type === 'separator'" class="menu-separator">
|
|||
|
|
<span class="status"> </span>
|
|||
|
|
<span class="separator"> </span>
|
|||
|
|
</li>
|
|||
|
|
<li v-else-if="child.type === 'file'" class="menu-li">
|
|||
|
|
<div class="menu-li-block">
|
|||
|
|
<span class="menu-li-text">
|
|||
|
|
<span class="status"> </span>
|
|||
|
|
<el-button type="text" class="button" :disabled="child.disabled">
|
|||
|
|
<input
|
|||
|
|
:ref="child.label"
|
|||
|
|
type="file"
|
|||
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
|||
|
|
@change="openLoadFile(child)"
|
|||
|
|
>
|
|||
|
|
{{ child.title }}
|
|||
|
|
</el-button>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li v-else class="menu-li" @click.stop="popupMenuB(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.type === 'separator'" class="menu-separator">
|
|||
|
|
<span class="status"> </span>
|
|||
|
|
<span class="separator"> </span>
|
|||
|
|
</li>
|
|||
|
|
<li v-else-if="grandchild.type === 'file'" class="menu-li">
|
|||
|
|
<div class="menu-li-block">
|
|||
|
|
<span class="menu-li-text">
|
|||
|
|
<span class="status"> </span>
|
|||
|
|
<el-button
|
|||
|
|
type="text"
|
|||
|
|
class="button"
|
|||
|
|
:disabled="grandchild.disabled"
|
|||
|
|
>
|
|||
|
|
<input
|
|||
|
|
:ref="grandchild.label"
|
|||
|
|
type="file"
|
|||
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
|||
|
|
@change="openLoadFile(grandchild)"
|
|||
|
|
>
|
|||
|
|
{{ grandchild.title }}
|
|||
|
|
</el-button>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li v-else 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.type === 'separator'" class="menu-separator">
|
|||
|
|
<span class="status"> </span>
|
|||
|
|
<span class="separator"> </span>
|
|||
|
|
</li>
|
|||
|
|
<li v-else-if="child.type === 'file'" class="menu-li">
|
|||
|
|
<div class="menu-li-block">
|
|||
|
|
<span class="menu-li-text">
|
|||
|
|
<span class="status"> </span>
|
|||
|
|
<el-button type="text" class="button" :disabled="child.disabled">
|
|||
|
|
<input
|
|||
|
|
:ref="child.title"
|
|||
|
|
type="file"
|
|||
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
|||
|
|
@change="openLoadFile(child)"
|
|||
|
|
>
|
|||
|
|
{{ child.title }}
|
|||
|
|
</el-button>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li v-else 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>
|
|||
|
|
import { mapGetters } from 'vuex';
|
|||
|
|
import { EventBus } from '@/scripts/event-bus';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'PlanMenuBar',
|
|||
|
|
props: {
|
|||
|
|
lineCode: {
|
|||
|
|
type: String,
|
|||
|
|
required: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
classA: -1,
|
|||
|
|
classB: -1,
|
|||
|
|
tempClassA: -1,
|
|||
|
|
tempClassB: -1,
|
|||
|
|
menu: [
|
|||
|
|
{
|
|||
|
|
title: '管理运行计划',
|
|||
|
|
click: this.handleViewPlanSchedule
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '仿真运行计划',
|
|||
|
|
click: this.handleReloadTodayPlan
|
|||
|
|
}
|
|||
|
|
// {
|
|||
|
|
// title: '工具（T）',
|
|||
|
|
// children: [
|
|||
|
|
// {
|
|||
|
|
// title: '查看计划列表',
|
|||
|
|
// click: this.handleViewPlanSchedule
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// title: '创建一周计划',
|
|||
|
|
// click: this.handleCreateWeekPlan
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// title: '加载当天计划',
|
|||
|
|
// click: this.handleReloadTodayPlan
|
|||
|
|
// }
|
|||
|
|
// // {
|
|||
|
|
// // title: '有效性检查',
|
|||
|
|
// // click: this.handleValidityCheck
|
|||
|
|
// // }
|
|||
|
|
// ]
|
|||
|
|
// }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters('training', [
|
|||
|
|
'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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initMenu();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initMenu() {
|
|||
|
|
this.clickEvent();
|
|||
|
|
this.closeMenu();
|
|||
|
|
},
|
|||
|
|
clickEvent() {
|
|||
|
|
const self = this;
|
|||
|
|
window.onclick = function (e) {
|
|||
|
|
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() {
|
|||
|
|
this.classA = this.tempClassA = -1;
|
|||
|
|
this.classB = this.tempClassB = -1;
|
|||
|
|
},
|
|||
|
|
hookClick(item, event) {
|
|||
|
|
this.closeMenu();
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (item && typeof item.click == 'function') {
|
|||
|
|
item.click();
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
},
|
|||
|
|
popupMenuA(item, index) {
|
|||
|
|
this.clickEvent();
|
|||
|
|
this.tempClassA = index;
|
|||
|
|
this.tempClassB = -1;
|
|||
|
|
},
|
|||
|
|
popupMenuB(item, index) {
|
|||
|
|
this.tempClassB = index;
|
|||
|
|
},
|
|||
|
|
openLoadFile(item) {
|
|||
|
|
const obj = this.$refs[item.title][0];
|
|||
|
|
if (obj.files) {
|
|||
|
|
const file = obj.files[0];
|
|||
|
|
item.click(file);
|
|||
|
|
obj.value = '';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
doClose() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
EventBus.$emit('closeMenu');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 刷新
|
|||
|
|
refresh() {
|
|||
|
|
this.closeMenu(true);
|
|||
|
|
EventBus.$emit('refresh');
|
|||
|
|
},
|
|||
|
|
undeveloped() {
|
|||
|
|
this.doClose();
|
|||
|
|
this.$alert('实现中......', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
callback: action => {
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 修改计划
|
|||
|
|
handleEditPlanningTrain() {
|
|||
|
|
this.$emit('dispatchDialog', { name: 'modifyingPlan' });
|
|||
|
|
},
|
|||
|
|
// 添加任务
|
|||
|
|
handleAddTask() {
|
|||
|
|
const params = this.$store.state.runPlan.selected;
|
|||
|
|
this.$emit('dispatchDialog', { name: 'addTask', params });
|
|||
|
|
},
|
|||
|
|
// 删除任务
|
|||
|
|
handleDeleteTask() {
|
|||
|
|
const params = this.$store.state.runPlan.selected;
|
|||
|
|
this.$emit('dispatchDialog', { name: 'deleteTask', params });
|
|||
|
|
},
|
|||
|
|
// 修改任务
|
|||
|
|
handleModifyingTask() {
|
|||
|
|
const params = this.$store.state.runPlan.selected;
|
|||
|
|
this.$emit('dispatchDialog', { name: 'modifyingTask', params });
|
|||
|
|
},
|
|||
|
|
// 改表号
|
|||
|
|
handleModifyingPlanId() {
|
|||
|
|
this.$emit('dispatchDialog', { name: 'modifyingPlanId' });
|
|||
|
|
},
|
|||
|
|
// 平移多辆车
|
|||
|
|
handleTranslationalMulTrain() {
|
|||
|
|
this.$emit('dispatchDialog', { name: 'translationalMulTrain' });
|
|||
|
|
},
|
|||
|
|
// 查看计划列表
|
|||
|
|
handleViewPlanSchedule() {
|
|||
|
|
this.$emit('dispatchDialog', { name: 'managePlanList' });
|
|||
|
|
},
|
|||
|
|
// 创建一周计划
|
|||
|
|
handleCreateWeekPlan() {
|
|||
|
|
this.$emit('dispatchDialog', { name: 'createWeekPlan' });
|
|||
|
|
},
|
|||
|
|
// 创建当天计划
|
|||
|
|
handleReloadTodayPlan() {
|
|||
|
|
this.$emit('dispatchDialog', { name: 'createTodayPlan' });
|
|||
|
|
},
|
|||
|
|
// 有效性检查
|
|||
|
|
handleValidityCheck() {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped rel="stylesheet/scss" lang="scss">
|
|||
|
|
@import "src/styles/mixin.scss";
|
|||
|
|
$top: 25px;
|
|||
|
|
$width: 30px;
|
|||
|
|
$height: 20px;
|
|||
|
|
$menuPadding: 10px;
|
|||
|
|
$menuItemHeight: 30px;
|
|||
|
|
$menuItemWidth: 160px;
|
|||
|
|
$menuItemPadding: 5px;
|
|||
|
|
|
|||
|
|
#PlanMenuBar {
|
|||
|
|
z-index: 10;
|
|||
|
|
position: absolute;
|
|||
|
|
top: $top;
|
|||
|
|
width: 100%;
|
|||
|
|
height: $height;
|
|||
|
|
line-height: $height;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav {
|
|||
|
|
display: block;
|
|||
|
|
cursor: pointer;
|
|||
|
|
color: #0000;
|
|||
|
|
background: #EBEADB;
|
|||
|
|
list-style: none;
|
|||
|
|
border: 1px solid #B6BCCC !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
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;
|
|||
|
|
border-left: 1px solid #000;
|
|||
|
|
border-right: 1px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-separator {
|
|||
|
|
text-align: left;
|
|||
|
|
background: #F0F0F0;
|
|||
|
|
height: 2px;
|
|||
|
|
line-height: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-separator .status {
|
|||
|
|
display: inline-block;
|
|||
|
|
border-right: 1px inset #CACACA;
|
|||
|
|
width: $width;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #EFECDE;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-separator .separator {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: #CACACA;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
height: 2px;
|
|||
|
|
width: $menuItemWidth - $width - 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-li {
|
|||
|
|
text-align: left;
|
|||
|
|
background: #F0F0F0;
|
|||
|
|
height: $menuItemHeight;
|
|||
|
|
line-height: $menuItemHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-li-block {
|
|||
|
|
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;
|
|||
|
|
background: #EFECDE;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-li-text .label {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-li-text .button {
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
line-height: 0px;
|
|||
|
|
width: $menuItemWidth - $width;
|
|||
|
|
top: -$menuItemHeight;
|
|||
|
|
color: #000;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
opacity: 0;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0px;
|
|||
|
|
width: $menuItemWidth - $width - 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-li-block:hover {
|
|||
|
|
background: #C9DEF7;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
-moz-box-sizing: border-box;
|
|||
|
|
-webkit-box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
</style>
|