rt-sim-training-client/src/views/planMonitor/newEditTool/menuBar.vue

831 lines
29 KiB
Vue
Raw Normal View History

2020-08-14 18:30:04 +08:00
<template>
<div id="PlanMenuBar">
<div class="nav" style="height:45px;">
<template v-for="(item,i) in menus">
<template v-if="noShowingChildren(item.children)">
<li v-if="isNotUser" :key="i" class="nav-li" @click="hookClick(item)">
<span class="nav-li-text">{{ item.title }}</span>
</li>
</template>
<template v-else>
<li v-if="isNotUser" :key="i" class="nav-li" :class="{'menu_active' :i==classA}" @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'" :key="j" class="menu-separator">
<span class="separator">&ensp;</span>
</li>
<li v-else-if="child.type === 'file'" :key="j" class="menu-li">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<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 :key="j" class="menu-li" @click.stop="popupMenuB(child, j)">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<span class="label">{{ child.title }}</span>
</span>
</div>
2021-03-05 16:44:32 +08:00
<ul class="menu-ul" :class="{'active' :j==classB}">
2020-08-14 18:30:04 +08:00
<template v-for="(grandchild,k) in child.children">
<li v-if="grandchild.type === 'separator'" :key="k" class="menu-separator">
<span class="separator">&ensp;</span>
</li>
<li v-else-if="grandchild.type === 'file'" :key="k" class="menu-li">
<div class="menu-li-block" :disabled="grandchild.disabled">
<span class="menu-li-text">
<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 :key="k" class="menu-li" @click.stop="hookClick(grandchild)">
<div class="menu-li-block" :disabled="grandchild.disabled">
<span class="menu-li-text">
<span class="label">{{ grandchild.title }}</span>
</span>
</div>
</li>
</template>
</ul>
</li>
</template>
<template v-else>
<li v-if="child.type === 'separator'" :key="j" class="menu-separator">
<span class="separator">&ensp;</span>
</li>
<li v-else-if="child.type === 'file'" :key="j" class="menu-li">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<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 :key="j" class="menu-li" @click.stop="hookClick(child)">
<div class="menu-li-block" :disabled="child.disabled">
<span class="menu-li-text">
<span class="label">{{ child.title }}</span>
</span>
</div>
</li>
</template>
</template>
</ul>
</li>
</template>
</template>
<div class="nav-li" style="position: absolute; right: 10px;" @click="back">
<span class="nav-li-text">{{ dispaly?'关闭':$t('global.back') }}</span>
</div>
</div>
2020-12-11 20:17:18 +08:00
<route-map ref="routeMap" />
2020-08-14 18:30:04 +08:00
</div>
</template>
<script>
import { mapGetters } from 'vuex';
2021-03-05 16:44:32 +08:00
import routeMap from './routingoperate/routeMap';
// import RunplanParams from './config/index';
import { planEffectiveCheck, runPlanNotify, clearPlaningData } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/scripts/ConstDic';
2020-08-14 18:30:04 +08:00
import { EventBus } from '@/scripts/event-bus';
2021-03-05 16:44:32 +08:00
import { publishRunPlan, deleteRunPlan } from '@/api/designPlatform';
2020-08-14 18:30:04 +08:00
export default {
name: 'PlanMenuBar',
2020-12-11 20:17:18 +08:00
components: { routeMap },
2020-08-14 18:30:04 +08:00
props: {
planConvert: {
type: Object,
default: function() {
return { };
}
},
loadRunPlanId: {
type: String,
default: function() {
return '';
}
}
},
data() {
return {
isNotUser: true,
classA: -1,
classB: -1,
tempClassA: -1,
tempClassB: -1,
menus: [],
loading: null,
menuBase: [
{
title: this.$t('planMonitor.file'),
children: [
2021-01-29 14:40:09 +08:00
{
title: '重命名',
click: this.modifyRunPlanName
2020-08-14 18:30:04 +08:00
}
2021-03-05 16:44:32 +08:00
// {
// title: '创建运行图',
// click: this.newRunPlan
// }
2020-08-14 18:30:04 +08:00
]
},
{
title: this.$t('planMonitor.tool'),
children: [
{
2021-01-29 14:40:09 +08:00
title: '生成带出入库计划',
click: this.handleGernaratePlanningTrain
},
{
title: '生成仅环路计划',
click: this.populatingGenericData
// disabledCallback: () => { return !this.$route.query.planId },
2020-08-14 18:30:04 +08:00
}
]
},
{
2021-01-29 14:40:09 +08:00
title: '编辑',
2020-08-14 18:30:04 +08:00
children: [
{
title: this.$t('planMonitor.addPlan'),
click: this.handleAddPlanningTrain
},
{
title: this.$t('planMonitor.deletePlan'),
click: this.handleDeletePlanningTrain
},
2020-12-22 17:27:04 +08:00
{
2021-01-29 14:40:09 +08:00
title: '平移计划',
2020-12-22 17:27:04 +08:00
click: this.handleMovePlanningTrain
},
2020-08-14 18:30:04 +08:00
{
title: this.$t('planMonitor.duplicatePlan'),
click: this.handleDuplicateTrain
},
{
type: 'separator'
},
{
title: this.$t('planMonitor.addTask'),
click: this.handleAddTask
},
{
title: this.$t('planMonitor.deleteTask'),
click: this.handleDeleteTask
},
{
title: this.$t('planMonitor.modifyTask'),
click: this.handleModifyingTask
},
2020-12-22 17:27:04 +08:00
{
title: '清除数据',
click: this.handleClearData
2020-08-14 18:30:04 +08:00
}
]
2020-12-11 20:17:18 +08:00
},
{
title: '配置',
children: [
{
title: '交路设置',
click: this.handleRoutingSettings
},
{
2021-01-29 14:40:09 +08:00
title: '运行等级设置',
click: this.handleRoutingLevel
2020-12-11 20:17:18 +08:00
},
{
2021-01-29 14:40:09 +08:00
title: '停站时间设置',
2020-12-11 20:17:18 +08:00
click: this.handleDwellTime
},
{
2021-01-29 14:40:09 +08:00
title: '其他参数配置',
click: this.handleRunplanParams
}
]
},
{
title: '测试',
children: [
{
title: this.$t('planMonitor.validityCheck'),
click: this.handlePlanEffectiveCheck
2021-03-05 16:44:32 +08:00
},
{
title: this.$t('planMonitor.testRunningDiagram'),
click: this.handleTestRunPlan
2020-12-11 20:17:18 +08:00
}
]
2020-08-14 18:30:04 +08:00
}
2021-03-05 16:44:32 +08:00
// {
// title: this.$t('planMonitor.modify'),
// children: [
// // {
// // title: '计划参数',
// // click: this.handleParameter,
// // },
// // {
// // title: '打印参数',
// // click: this.undeveloped,
// // },
// // {
// // type: 'separator'
// // },
// // {
// // type: 'separator'
// // },
// // {
// // title: '修改交路',
// // click: this.handleModifyingRouting,
// // },
// // {
// // title: '修改开始时间',
// // click: this.handleModifyingStartTime,
// // },
// // {
// // title: '快速增加任务',
// // click: this.undeveloped,
// // }
// ]
// }
2020-08-14 18:30:04 +08:00
]
};
},
computed: {
...mapGetters('training', [
'mode'
]),
...mapGetters('map', [
'stationList'
]),
dispaly() {
return this.$route.path.includes('display');
}
},
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;
}
},
2021-03-05 16:44:32 +08:00
'$route.query.planId': function () {
this.menus = this.menuConvert(this.menuBase);
2020-08-14 18:30:04 +08:00
}
},
created() {
if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
this.isNotUser = false;
} else {
this.isNotUser = true;
}
},
mounted() {
this.initMenu();
},
methods: {
back() {
// this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
2021-03-05 16:44:32 +08:00
if (this.dispaly) {
this.$emit('doClose');
} else {
this.$router.go(-1);
}
2020-08-14 18:30:04 +08:00
},
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() {
2020-08-17 18:12:51 +08:00
this.menus = this.menuConvert(this.menuBase);
2020-08-14 18:30:04 +08:00
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();
if (!item.disabled) {
setTimeout(() => {
if (item && typeof item.click == 'function') {
item.click(item);
}
}, 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( this.$t('planMonitor.implemented'), this.$t('tip.hint'), {
confirmButtonText: this.$t('global.confirm'),
callback: action => {
}
});
},
loadingScreen() {
this.loading = this.$loading({
lock: true,
text: this.$t('tip.underImport'),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
},
// 填充计划运行图
populatingGenericData() {
2021-03-05 16:44:32 +08:00
this.$emit('dispatchDialog', { name: 'populatingGenericData', params: {} });
2020-08-14 18:30:04 +08:00
},
2021-03-05 16:44:32 +08:00
// newRunPlan() {
// this.$emit('dispatchDialog', { name: 'createEmptyPlan', params: {}});
// },
2020-08-14 18:30:04 +08:00
// 自动生成
handleAutoGenerate() {
this.$emit('dispatchDialog', { name: 'editSmoothRunTime', params: {} });
},
2020-12-11 20:17:18 +08:00
// 交路设置
handleRoutingSettings() {
this.$refs.routeMap.doShow('routeMap');
},
// 运行图配置文件
handleRunplanParams() {
this.$refs.routeMap.doShow('runplanParams');
},
2021-03-05 16:44:32 +08:00
// 停站时间
handleDwellTime() {
this.$emit('dispatchDialog', { name: 'modifyingStationStopTime', params: {} });
},
// 运行等级
handleRoutingLevel() {
this.$emit('dispatchDialog', { name: 'modifyingStationIntervalTime', params: {} });
},
2020-12-11 20:17:18 +08:00
// 生成计划
handleGernaratePlanningTrain() {
2021-03-05 16:44:32 +08:00
this.$emit('dispatchDialog', { name: 'gernaratePlanTrain', params: {} });
2020-12-11 20:17:18 +08:00
},
2020-08-14 18:30:04 +08:00
// 校验运行图
handlePlanEffectiveCheck() {
2021-03-05 16:44:32 +08:00
const planId = this.$route.query.planId;
if (planId) {
planEffectiveCheck(planId).then(resp => {
2020-08-14 18:30:04 +08:00
this.$emit('dispatchDialog', {
name: 'systermOut',
params: {
width: 600,
contextList: resp.data.length > 0 ? resp.data : ['检查成功']
}
});
}).catch(() => {
this.$messageBox(this.$t('tip.runGraphVerificationFailed'));
});
} else {
this.$messageBox(this.$t('tip.selectARunGraphFirst'));
}
},
2021-03-05 16:44:32 +08:00
// 测试运行图
async handleTestRunPlan() {
const data = { planId: this.$route.query.planId || this.loadRunPlanId };
runPlanNotify(data).then(resp => {
if (resp.data) {
const query = {
prdType: '01', group: resp.data, mapId: this.$route.query.mapId, planId: this.$route.query.planId
};
// this.$router.push({ path: `${UrlConfig.display}/plan`, query: query });
this.$router.push({ path: UrlConfig.design.testRunPlan, query: query });
launchFullscreen();
} else {
this.$messageBox(this.$t('error.checkTheValidityFirst'));
}
}).catch(error => {
this.$messageBox(this.$t('tip.createSimulationFaild') + this.$t('global.colon') + error.message);
});
},
2020-08-14 18:30:04 +08:00
// 计划参数
handleParameter() {
this.$emit('dispatchDialog', { name: 'parameter', params: {} });
},
// 添加计划
handleAddPlanningTrain() {
2021-03-05 16:44:32 +08:00
const planId = this.$route.query.planId || this.loadRunPlanId;
if (planId) {
2020-08-14 18:30:04 +08:00
this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
} else {
this.$messageBox(this.$t('tip.selectARunGraphFirst'));
}
},
2021-03-05 16:44:32 +08:00
// 清除数据
handleClearData() {
this.$confirm('本操作将清除本运行图数据!', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
center: true
}).then(() => {
clearPlaningData(this.$route.query.planId).then(resp => {
console.log('清除数据成功!');
this.$emit('refresh');
}).catch(() => {
this.$message.error('清除数据失败!');
});
}).catch(() => {
console.error('清除数据失败!');
});
},
2020-08-14 18:30:04 +08:00
// 删除计划
handleDeletePlanningTrain() {
2021-03-05 16:44:32 +08:00
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
2020-08-14 18:30:04 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', {
name: 'offLine', params: {
type: 'warning',
width: 260,
message: this.$t('tip.deleteTrainHint') + serviceNumber + '?',
operate: 'DeletePlanningTrain',
serviceNumber: serviceNumber,
refresh: true
}
});
} else {
this.$messageBox(this.$t('tip.selectAPlan'));
}
},
// 修改计划
handleEditPlanningTrain() {
2021-03-05 16:44:32 +08:00
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
2020-08-14 18:30:04 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
} else {
this.$messageBox(this.$t('tip.selectAPlan'));
}
},
2020-12-22 17:27:04 +08:00
// 移动计划
handleMovePlanningTrain() {
2021-03-05 16:44:32 +08:00
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
2020-12-22 17:27:04 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', { name: 'movePlaningTrain', params: { serviceNumber } });
} else {
this.$messageBox(this.$t('tip.selectAPlan'));
}
},
2020-08-14 18:30:04 +08:00
// 复制计划
handleDuplicateTrain() {
2021-03-05 16:44:32 +08:00
const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
2020-08-14 18:30:04 +08:00
if (serviceNumber) {
this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
} else {
this.$messageBox(this.$t('tip.selectAPlan'));
}
},
// 添加任务
handleAddTask() {
2021-03-05 16:44:32 +08:00
const params = this.$store.state.runPlan.selected;
2020-08-14 18:30:04 +08:00
if (params.serviceNumber && params.tripNumber) {
this.$emit('dispatchDialog', { name: 'addTask', params });
} else {
this.$messageBox(this.$t('tip.selectATrain'));
}
},
// 删除任务
handleDeleteTask() {
2021-03-05 16:44:32 +08:00
const params = this.$store.state.runPlan.selected;
2020-08-14 18:30:04 +08:00
if (params.serviceNumber && params.tripNumber) {
this.$emit('dispatchDialog', { name: 'deleteTask', params });
} else {
this.$messageBox(this.$t('tip.selectATrain'));
}
},
// 修改任务
handleModifyingTask() {
2021-03-05 16:44:32 +08:00
const params = this.$store.state.runPlan.selected;
2020-08-14 18:30:04 +08:00
if (params.serviceNumber && params.tripNumber) {
this.$emit('dispatchDialog', { name: 'modifyingTask', params });
} else {
this.$messageBox(this.$t('tip.selectATrain'));
}
},
modifyRunPlanName() {
this.$emit('modifyRunPlanName');
},
// 修改交路
handleModifyingRouting() {
2021-03-05 16:44:32 +08:00
const params = this.$store.state.runPlan.selected;
2020-08-14 18:30:04 +08:00
this.$emit('dispatchDialog', { name: 'modifyingRouting', params });
},
// 修改开始时间
handleModifyingStartTime() {
2021-03-05 16:44:32 +08:00
const params = this.$store.state.runPlan.selected;
2020-08-14 18:30:04 +08:00
this.$emit('dispatchDialog', { name: 'modifyingBeginTime', params });
},
loadingRunPlan(param) {
this.$emit('loadingRunPlan', param);
},
2021-03-05 16:44:32 +08:00
deleteRunPlanOperate(param) {
2020-08-14 18:30:04 +08:00
// 删除运行图
2021-03-05 16:44:32 +08:00
this.$confirm(this.$t('planMonitor.openRunPlan.confirmDeleteRunPlan'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
deleteRunPlan(param.planId).then(Response => {
this.$message.success(this.$t('planMonitor.openRunPlan.deleteSuccess'));
this.$emit('checkIsLoadRunPlan', param.planId);
}).catch(() => {
this.$messageBox(this.$t('tip.deleteOperationGraphFailed'));
});
2020-08-17 18:12:51 +08:00
}).catch(() => {
2021-03-05 16:44:32 +08:00
this.$message.error('删除运行图失败!');
});
},
publishRunPlan(param) {
this.$confirm(this.$t('tip.publishRunPlanTips'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
publishRunPlan(param.planId, {runPlanName: param.planName}).then(resp => {
if (resp.data.length <= 0) {
this.$message.success(this.$t('tip.publishRunPlanSuccess'));
} else {
this.$messageBox(`${this.$t('tip.publishRunPlanFail')}: ${resp.data[0]}`);
}
}).catch(() => {
this.$messageBox(this.$t('tip.publishRunPlanFail'));
});
2020-08-14 18:30:04 +08:00
});
}
}
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
$top: 0px;
$width: 30px;
$height: 40px;
$menuPadding: 15px;
$menuItemHeight: 30px;
$menuItemWidth: 160px;
$menuItemPadding: 5px;
#PlanMenuBar {
width: 100%;
line-height: $height;
position: absolute;
z-index: 2;
}
.nav {
display: block;
cursor: pointer;
list-style: none;
// border: 1px solid #B6BCCC !important;
background-color: #293c55;
box-sizing: border-box;
padding-left: 20px;
}
.nav-li {
position: relative;
display: inline-block;
padding: 0 $menuPadding;
color: rgba(255,255,255,0.45);
border-top: 4px solid #293c55;
}
.nav-li.menu_active {
border-top: 4px solid #a9334c;
background-color: #0e151f;
transition: 0.5s all;
}
.nav-li:hover {
border-top: 4px solid #a9334c;
background-color: #0e151f;
transition: 0.5s all;
}
.nav-li:hover .nav-li-text{
color: #fff;
}
.nav-li.menu_active .nav-li-text {
color: #fff;
}
.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;
left: 0;
display: block !important;
}
2021-03-05 16:44:32 +08:00
2020-08-14 18:30:04 +08:00
.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: #293c55;
// margin-left: 5px;
height: 2px;
width: 100%;
}
.menu-li {
text-align: left;
background: #162436;
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 .label {
display: inline-block;
margin-left: 5px;
padding-left: 12px;
}
.menu-li-text .button {
position: relative;
overflow: hidden;
line-height: 0px;
width: 100%;
top: 0;
color:rgba(255,255,255,0.45);
cursor: pointer;
padding-left: 16px;
text-align: left;
input {
opacity: 0;
cursor: pointer;
position: absolute;
top: 0px;
width: $menuItemWidth - $width - 10px;
}
}
.menu-li-block:hover {
background: #C9DEF7;
color: #000;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.menu-li-text .button:hover{
color: #000;
}
</style>