joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity
ff9e69585d
rt-sim-training-client/src/views/planMonitor/editTool/menuBar.vue

728 lines
29 KiB
Vue
Raw Normal View History

代码移植
2019-07-26 13:32:43 +08:00
<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 class="menu-separator" v-if="child.type === 'separator'">
<span class="status">&ensp;</span>
<span class="separator">&ensp;</span>
</li>
<li class="menu-li" v-else-if="child.type === 'file'">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<span class="status">&ensp;</span>
<el-button type="text" class="button" :disabled="child.disabled">
<input :ref="child.label" type="file" @change="openLoadFile(child)"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<span> {{child.title}}</span>
</el-button>
</span>
</div>
</li>
<li class="menu-li" v-else @click.stop="popupMenuB(child, j)">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<span class="status">&ensp;</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 class="menu-separator" v-if="grandchild.type === 'separator'">
<span class="status">&ensp;</span>
<span class="separator">&ensp;</span>
</li>
<li class="menu-li" v-else-if="grandchild.type === 'file'">
<div class="menu-li-block" :disabled="grandchild.disabled">
<span class="menu-li-text">
<span class="status">&ensp;</span>
<el-button type="text" class="button"
:disabled="grandchild.disabled">
<input :ref="grandchild.label" type="file"
@change="openLoadFile(grandchild)"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<span> {{grandchild.title}}</span>
</el-button>
</span>
</div>
</li>
<li class="menu-li" v-else @click.stop="hookClick(grandchild)">
<div class="menu-li-block" :disabled="grandchild.disabled">
<span class="menu-li-text">
<span class="status">&ensp;</span>
<span class="label">{{grandchild.title}}</span>
</span>
</div>
</li>
</template>
</ul>
</li>
</template>
<template v-else>
<li class="menu-separator" v-if="child.type === 'separator'">
<span class="status">&ensp;</span>
<span class="separator">&ensp;</span>
</li>
<li class="menu-li" v-else-if="child.type === 'file'">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<span class="status">&ensp;</span>
<el-button type="text" class="button" :disabled="child.disabled">
<input :ref="child.title" type="file" @change="openLoadFile(child)"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<span> {{child.title}}</span>
</el-button>
</span>
</div>
</li>
<li class="menu-li" v-else @click.stop="hookClick(child)">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<span class="status">&ensp;</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';
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) {
let menus = [];
menuBase.forEach(elem => {
let 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() {
let 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) {
let obj = this.$refs[item.title][0];
if (obj.files) {
let 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)'
});
let that = this;
let reader = new FileReader();
if (reader) {
reader.onload = function (e) {
let wb;
let 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 (let 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(error => {
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() {
let planId = this.$route.query.planId;
if (planId) {
planEffectiveCheck(planId).then(resp => {
this.$emit('dispatchDialog', {
name: 'systermOut',
params: {
width: 600,
contextList: resp.data
}
});
}).catch(error => {
this.$messageBox('运行图校验失败');
})
} else {
this.$messageBox('请先选择一张运行图');
}
},
// 测试运行图
async handleTestRunPlan() {
let data = { planId: this.$route.query.planId }
runPlanNotify(data).then(resp => {
let 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() {
let planId = this.$route.query.planId;
if (planId) {
this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} })
} else {
this.$messageBox('请选择一张运行图');
}
},
// 删除计划
handleDeletePlanningTrain() {
修改代码
2019-07-30 09:48:14 +08:00
let serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
代码移植
2019-07-26 13:32:43 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', {
name: 'offLine', params: {
type: 'warning',
width: 260,
message: `真的要删除列车 ${serviceNumber} 吗？`,
operate: 'DeletePlanningTrain',
serviceNumber: serviceNumber
}
})
} else {
this.$messageBox('请选择一条计划');
}
},
// 修改计划
handleEditPlanningTrain() {
修改代码
2019-07-30 09:48:14 +08:00
let serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
代码移植
2019-07-26 13:32:43 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } })
} else {
this.$messageBox('请选择一条计划');
}
},
// 复制计划
handleDuplicateTrain() {
修改代码
2019-07-30 09:48:14 +08:00
let serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
代码移植
2019-07-26 13:32:43 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } })
} else {
this.$messageBox('请选择一条计划');
}
},
// 添加任务
handleAddTask() {
修改代码
2019-07-30 09:48:14 +08:00
let params = this.$store.state.runPlan.selected;
代码移植
2019-07-26 13:32:43 +08:00
if (params.serviceNumber && params.tripNumber) {
this.$emit('dispatchDialog', { name: 'addTask', params });
} else {
this.$messageBox('请选择一个车次');
}
},
// 删除任务
handleDeleteTask() {
修改代码
2019-07-30 09:48:14 +08:00
let params = this.$store.state.runPlan.selected;
代码移植
2019-07-26 13:32:43 +08:00
if (params.serviceNumber && params.tripNumber) {
this.$emit('dispatchDialog', { name: 'deleteTask', params });
} else {
this.$messageBox('请选择一个车次');
}
},
// 修改任务
handleModifyingTask() {
修改代码
2019-07-30 09:48:14 +08:00
let params = this.$store.state.runPlan.selected;
代码移植
2019-07-26 13:32:43 +08:00
if (params.serviceNumber && params.tripNumber) {
this.$emit('dispatchDialog', { name: 'modifyingTask', params });
} else {
this.$messageBox('请选择一个车次');
}
},
// 修改交路
handleModifyingRouting() {
修改代码
2019-07-30 09:48:14 +08:00
let params = this.$store.state.runPlan.selected;
代码移植
2019-07-26 13:32:43 +08:00
this.$emit('dispatchDialog', { name: 'modifyingRouting', params });
},
// 修改开始时间
handleModifyingStartTime() {
修改代码
2019-07-30 09:48:14 +08:00
let params = this.$store.state.runPlan.selected;
代码移植
2019-07-26 13:32:43 +08:00
this.$emit('dispatchDialog', { name: 'modifyingBeginTime', params });
}
}
}
</script>
<style scoped rel="stylesheet/scss" lang="scss" scoped>
@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>
Reference in New Issue Copy Permalink