743 lines
20 KiB
Vue
743 lines
20 KiB
Vue
<template>
|
||
<div id="PlanMenuBar">
|
||
<div class="nav">
|
||
<template v-for="(item,i) in menus">
|
||
<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" :disabled="child.disabled">
|
||
<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)"
|
||
>
|
||
<span> {{ child.title }}</span>
|
||
</el-button>
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li v-else class="menu-li" @click.stop="popupMenuB(child, j)">
|
||
<div class="menu-li-block" :disabled="child.disabled">
|
||
<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" :disabled="grandchild.disabled">
|
||
<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)"
|
||
>
|
||
<span> {{ grandchild.title }}</span>
|
||
</el-button>
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li v-else class="menu-li" @click.stop="hookClick(grandchild)">
|
||
<div class="menu-li-block" :disabled="grandchild.disabled">
|
||
<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" :disabled="child.disabled">
|
||
<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)"
|
||
>
|
||
<span> {{ child.title }}</span>
|
||
</el-button>
|
||
</span>
|
||
</div>
|
||
</li>
|
||
<li v-else class="menu-li" @click.stop="hookClick(child)">
|
||
<div class="menu-li-block" :disabled="child.disabled">
|
||
<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 XLSX from 'xlsx';
|
||
import { mapGetters } from 'vuex';
|
||
import { importRunPlan, planEffectiveCheck, runPlanNotify } from '@/api/runplan';
|
||
import { launchFullscreen } from '@/utils/screen';
|
||
import { UrlConfig } from '@/router/index';
|
||
import EventBus from '@/scripts/event-bus';
|
||
|
||
export default {
|
||
name: 'PlanMenuBar',
|
||
props: {
|
||
skinStyle: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
planConvert: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
classA: -1,
|
||
classB: -1,
|
||
tempClassA: -1,
|
||
tempClassB: -1,
|
||
menus: [],
|
||
menuBase: [
|
||
{
|
||
title: '文件（F）',
|
||
children: [
|
||
{
|
||
title: '打开运行图',
|
||
click: this.handleOpenRunPlan
|
||
},
|
||
{
|
||
type: 'file',
|
||
title: '导入运行图',
|
||
click: this.handleImportRunPlan
|
||
},
|
||
{
|
||
title: '新建运行图',
|
||
click: this.handleCreateEmptyPlan
|
||
},
|
||
{
|
||
title: '修改站间运行时间',
|
||
click: this.handleModifyingStationIntervalTime
|
||
// disabledCallback: () => { return !this.$route.query.planId },
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '查看（V）',
|
||
children: [
|
||
]
|
||
},
|
||
{
|
||
title: '工具',
|
||
children: [
|
||
// {
|
||
// title: '自动生成',
|
||
// click: this.handleAutoGenerate,
|
||
// },
|
||
{
|
||
title: '有效性检查',
|
||
click: this.handlePlanEffectiveCheck
|
||
},
|
||
{
|
||
title: '测试运行图',
|
||
click: this.handleTestRunPlan
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '修改',
|
||
children: [
|
||
// {
|
||
// title: '计划参数',
|
||
// click: this.handleParameter,
|
||
// },
|
||
// {
|
||
// title: '打印参数',
|
||
// click: this.undeveloped,
|
||
// },
|
||
// {
|
||
// type: 'separator'
|
||
// },
|
||
{
|
||
title: '增加计划（A）',
|
||
click: this.handleAddPlanningTrain
|
||
},
|
||
{
|
||
title: '删除计划',
|
||
click: this.handleDeletePlanningTrain
|
||
},
|
||
// {
|
||
// title: '修改计划',
|
||
// click: this.handleEditPlanningTrain,
|
||
// },
|
||
{
|
||
title: '复制计划',
|
||
click: this.handleDuplicateTrain
|
||
},
|
||
{
|
||
type: 'separator'
|
||
},
|
||
{
|
||
title: '增加任务',
|
||
click: this.handleAddTask
|
||
},
|
||
{
|
||
title: '删除任务',
|
||
click: this.handleDeleteTask
|
||
},
|
||
{
|
||
title: '修改任务',
|
||
click: this.handleModifyingTask
|
||
}
|
||
// {
|
||
// type: 'separator'
|
||
// },
|
||
// {
|
||
// title: '修改交路',
|
||
// click: this.handleModifyingRouting,
|
||
// },
|
||
// {
|
||
// title: '修改开始时间',
|
||
// click: this.handleModifyingStartTime,
|
||
// },
|
||
// {
|
||
// title: '快速增加任务',
|
||
// click: this.undeveloped,
|
||
// }
|
||
]
|
||
},
|
||
{
|
||
title: '选项',
|
||
children: [
|
||
]
|
||
},
|
||
{
|
||
title: '帮助',
|
||
children: [
|
||
]
|
||
}
|
||
]
|
||
};
|
||
},
|
||
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;
|
||
}
|
||
},
|
||
'$route.query.planId': function () {
|
||
this.menus = this.menuConvert(this.menuBase);
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initMenu();
|
||
},
|
||
methods: {
|
||
menuConvert(menuBase) {
|
||
const menus = [];
|
||
menuBase.forEach(elem => {
|
||
const item = {};
|
||
Object.keys(elem).forEach(key => {
|
||
if (key == 'disabledCallback') {
|
||
item['disabled'] = elem.disabledCallback();
|
||
} else if (key != 'children') {
|
||
item[key] = elem[key];
|
||
} else {
|
||
item.children = this.menuConvert(elem.children || []);
|
||
}
|
||
});
|
||
menus.push(item);
|
||
});
|
||
|
||
return menus;
|
||
},
|
||
initMenu() {
|
||
this.menus = this.menuConvert(this.menuBase);
|
||
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();
|
||
// launchFullscreen();
|
||
if (!item.disabled) {
|
||
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 => {
|
||
}
|
||
});
|
||
},
|
||
// 打开运行图列表
|
||
handleOpenRunPlan() {
|
||
this.$emit('dispatchDialog', { name: 'openRunPlan', params: {} });
|
||
},
|
||
// 导入运行图
|
||
handleImportRunPlan(file) {
|
||
if (file) {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '正在导入中...',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
|
||
const that = this;
|
||
const reader = new FileReader();
|
||
if (reader) {
|
||
reader.onload = function (e) {
|
||
let wb;
|
||
const data = e.target.result;
|
||
if (that.rABS) {
|
||
wb = XLSX.read(btoa(that.fixdata(data)), { // 手动转化
|
||
type: 'base64'
|
||
});
|
||
} else {
|
||
wb = XLSX.read(data, {
|
||
type: 'binary'
|
||
});
|
||
}
|
||
|
||
if (wb) {
|
||
try {
|
||
let jsonData = [];
|
||
for (const index in wb.Sheets) {
|
||
jsonData = that.PlanConvert.importData(wb.Sheets[index], jsonData);
|
||
}
|
||
|
||
importRunPlan({ skinStyle: that.skinStyle, runPlanList: jsonData }).then(response => {
|
||
loading.close();
|
||
that.refresh();
|
||
that.$message.success('导入运行图成功!');
|
||
}).catch(() => {
|
||
loading.close();
|
||
that.refresh();
|
||
that.$message.warning('导入运行图失败!');
|
||
});
|
||
|
||
} catch (error) {
|
||
loading.close();
|
||
that.refresh();
|
||
that.$message.warning('解析运行图失败!');
|
||
}
|
||
}
|
||
};
|
||
|
||
if (that.rABS) {
|
||
reader.readAsArrayBuffer(file);
|
||
} else {
|
||
reader.readAsBinaryString(file);
|
||
}
|
||
}
|
||
}
|
||
this.closeMenu();
|
||
},
|
||
// 新建运行图
|
||
handleCreateEmptyPlan() {
|
||
this.$emit('dispatchDialog', { name: 'createEmptyPlan', params: {} });
|
||
},
|
||
// 修改站间运行时间
|
||
handleModifyingStationIntervalTime() {
|
||
this.$emit('dispatchDialog', { name: 'modifyingStationIntervalTime', params: {} });
|
||
},
|
||
// 自动生成
|
||
handleAutoGenerate() {
|
||
this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
|
||
},
|
||
// 校验运行图
|
||
handlePlanEffectiveCheck() {
|
||
const planId = this.$route.query.planId;
|
||
if (planId) {
|
||
planEffectiveCheck(planId).then(resp => {
|
||
this.$emit('dispatchDialog', {
|
||
name: 'systermOut',
|
||
params: {
|
||
width: 600,
|
||
contextList: resp.data
|
||
}
|
||
});
|
||
}).catch(() => {
|
||
this.$messageBox('运行图校验失败');
|
||
});
|
||
} else {
|
||
this.$messageBox('请先选择一张运行图');
|
||
}
|
||
},
|
||
// 测试运行图
|
||
async handleTestRunPlan() {
|
||
const data = { planId: this.$route.query.planId };
|
||
runPlanNotify(data).then(resp => {
|
||
const query = {
|
||
skinStyle: this.$route.query.skinStyle, prdType: '01', group: resp.data, mapId: this.$route.query.mapId, planId: this.$route.query.planId
|
||
};
|
||
this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
|
||
launchFullscreen();
|
||
}).catch(error => {
|
||
this.$messageBox(`创建仿真失败: ${error.message}`);
|
||
});
|
||
},
|
||
// 计划参数
|
||
handleParameter() {
|
||
this.$emit('dispatchDialog', { name: 'parameter', params: {} });
|
||
},
|
||
// 添加计划
|
||
handleAddPlanningTrain() {
|
||
const planId = this.$route.query.planId;
|
||
if (planId) {
|
||
this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
|
||
} else {
|
||
this.$messageBox('请选择一张运行图');
|
||
}
|
||
},
|
||
// 删除计划
|
||
handleDeletePlanningTrain() {
|
||
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
|
||
if (serviceNumber) {
|
||
this.$emit('dispatchDialog', {
|
||
name: 'offLine', params: {
|
||
type: 'warning',
|
||
width: 260,
|
||
message: `真的要删除列车 ${serviceNumber} 吗？`,
|
||
operate: 'DeletePlanningTrain',
|
||
serviceNumber: serviceNumber
|
||
}
|
||
});
|
||
} else {
|
||
this.$messageBox('请选择一条计划');
|
||
}
|
||
},
|
||
// 修改计划
|
||
handleEditPlanningTrain() {
|
||
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
|
||
if (serviceNumber) {
|
||
this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
|
||
} else {
|
||
this.$messageBox('请选择一条计划');
|
||
}
|
||
},
|
||
// 复制计划
|
||
handleDuplicateTrain() {
|
||
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
|
||
if (serviceNumber) {
|
||
this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
|
||
} else {
|
||
this.$messageBox('请选择一条计划');
|
||
}
|
||
},
|
||
// 添加任务
|
||
handleAddTask() {
|
||
const params = this.$store.state.runPlan.selected;
|
||
if (params.serviceNumber && params.tripNumber) {
|
||
this.$emit('dispatchDialog', { name: 'addTask', params });
|
||
} else {
|
||
this.$messageBox('请选择一个车次');
|
||
}
|
||
},
|
||
// 删除任务
|
||
handleDeleteTask() {
|
||
const params = this.$store.state.runPlan.selected;
|
||
if (params.serviceNumber && params.tripNumber) {
|
||
this.$emit('dispatchDialog', { name: 'deleteTask', params });
|
||
} else {
|
||
this.$messageBox('请选择一个车次');
|
||
}
|
||
},
|
||
// 修改任务
|
||
handleModifyingTask() {
|
||
const params = this.$store.state.runPlan.selected;
|
||
if (params.serviceNumber && params.tripNumber) {
|
||
this.$emit('dispatchDialog', { name: 'modifyingTask', params });
|
||
} else {
|
||
this.$messageBox('请选择一个车次');
|
||
}
|
||
},
|
||
// 修改交路
|
||
handleModifyingRouting() {
|
||
const params = this.$store.state.runPlan.selected;
|
||
this.$emit('dispatchDialog', { name: 'modifyingRouting', params });
|
||
},
|
||
// 修改开始时间
|
||
handleModifyingStartTime() {
|
||
const params = this.$store.state.runPlan.selected;
|
||
this.$emit('dispatchDialog', { name: 'modifyingBeginTime', params });
|
||
}
|
||
}
|
||
};
|
||
</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;
|
||
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;
|
||
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;
|
||
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;
|
||
}
|
||
|
||
.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>
|