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

<template>
  <div id="PlanMenuBar">
    <div class="nav">
      <template v-for="(item,i) in menus">
        <template v-if="noShowingChildren(item.children)">
          <li :key="i" class="nav-li" @click="hookClick(item)">
            <span class="nav-li-text">{{ item.title }}</span>
          </li>
        </template>
        <template v-else>
          <li :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>
                    <ul class="menu-ul" :class="{'active' :j==classB}">
                      <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">{{ $t('global.back') }}</span>
      </div>
    </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: {
		// skinCode: {
		// 	type: String,
		// 	default: ''
		// },
		planConvert: {
			type: Object,
			default: function() {
				return { };
			}
		}
	},
	data() {
		return {
			classA: -1,
			classB: -1,
			tempClassA: -1,
			tempClassB: -1,
			menus: [],
			loading: null,
			menuBase: [
				{
					title: this.$t('planMonitor.file'),
					children: [
						// {
						// 	title: this.$t('planMonitor.openRunningDiagram'),
						// 	click: this.handleOpenRunPlan
						// },
						// {
						// 	type: 'file',
						// 	title: '导入运行图',
						// 	click: this.handleImportRunPlan
						// },
						// {
						// 	title: this.$t('planMonitor.createRunningDiagram'),
						// 	click: this.handleCreateEmptyPlan
						// },
						// {
						// 	title: '修改运行图名称',
						// 	click: this.handleEditPlan
						// },
						{
							title: this.$t('planMonitor.modifyStationIntervalTime'),
							click: this.handleModifyingStationIntervalTime
							// disabledCallback: () => { return !this.$route.query.planId },
						}
						// {
						// 	title: '删除运行图',
						// 	click: this.handledeleteRunPlan
						// }
					]
				},
				{
					title: this.$t('planMonitor.view'),
					children: [
					]
				},
				{
					title: this.$t('planMonitor.tool'),
					children: [
						// {
						//     title: '自动生成',
						//     click: this.handleAutoGenerate,
						// },
						{
							title: this.$t('planMonitor.validityCheck'),
							click: this.handlePlanEffectiveCheck
						},
						{
							title: this.$t('planMonitor.testRunningDiagram'),
							click: this.handleTestRunPlan
						}
					]
				},
				{
					title: this.$t('planMonitor.modify'),
					children: [
						// {
						//     title: '计划参数',
						//     click: this.handleParameter,
						// },
						// {
						//     title: '打印参数',
						//     click: this.undeveloped,
						// },
						// {
						//     type: 'separator'
						// },
						{
							title: this.$t('planMonitor.addPlan'),
							click: this.handleAddPlanningTrain
						},
						{
							title: this.$t('planMonitor.deletePlan'),
							click: this.handleDeletePlanningTrain
						},
						// {
						//     title: '修改计划',
						//     click: this.handleEditPlanningTrain,
						// },
						{
							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
						}
						// {
						//     type: 'separator'
						// },
						// {
						//     title: '修改交路',
						//     click: this.handleModifyingRouting,
						// },
						// {
						//     title: '修改开始时间',
						//     click: this.handleModifyingStartTime,
						// },
						// {
						//     title: '快速增加任务',
						//     click: this.undeveloped,
						// }
					]
				},
				{
					title: this.$t('planMonitor.option'),
					children: [
					]
				},
				{
					title: this.$t('planMonitor.help'),
					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: {
		back() {
			// this.$router.push({ path: `${UrlConfig.plan.detail}/${this.$route.query.mapId}` });
            this.$router.go(-1);
		},
		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( this.$t('planMonitor.implemented'), this.$t('tip.hint'), {
				confirmButtonText: this.$t('global.confirm'),
				callback: action => {
				}
			});
		},
		// 打开运行图列表
		// handleOpenRunPlan() {
		// 	this.$emit('dispatchDialog', { name: 'openRunPlan', params: {type: 'add'} });
		// },
		// handledeleteRunPlan() {
		// 	this.$emit('dispatchDialog', { name: 'openRunPlan', params: {type: 'delete'} });
		// },
		// 修改运行图名称
		// handleEditPlan() {
		// 	this.$emit('dispatchDialog', { name: 'openRunPlan', params: {type: 'edit'} });
		// },
		loadingScreen() {
			this.loading = this.$loading({
				lock: true,
				text: this.$t('tip.underImport'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
		},
		// 导入运行图
		handleImportRunPlan(file) {
			if (file) {
				this.loadingScreen();
				setTimeout(() => {
					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({ skinCode: that.$route.query.skinCode || '02', runPlanList: jsonData }).then(response => {
										that.loading.close();
										that.refresh();
										that.handleOpenRunPlan();
									}).catch(error => {
										that.loading.close();
										that.refresh();
										that.$message.warning(this.$t('tip.importRunGraphFailed') + error.message);
									});

								} catch (error) {
									that.loading.close();
									that.refresh();
									that.$message.warning(this.$t('tip.parseRunGraphFailed') + error.message);
								}
							}
						};
						if (that.rABS) {
							reader.readAsArrayBuffer(file);
						} else {
							reader.readAsBinaryString(file);
						}
					}
				}, 50);
			}
			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(this.$t('tip.runGraphVerificationFailed'));
				});
			} else {
				this.$messageBox(this.$t('tip.selectARunGraphFirst'));
			}
		},
		// 测试运行图
		async handleTestRunPlan() {
			const data = { planId: this.$route.query.planId };
			runPlanNotify(data).then(resp => {
				const query = {
					skinCode: this.$route.query.skinCode, 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(this.$t('tip.createSimulationFaild')+this.$t('global.colon')+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(this.$t('tip.selectARunGraphFirst'));
			}
		},
		// 删除计划
		handleDeletePlanningTrain() {
			const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
			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() {
			const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
			if (serviceNumber) {
				this.$emit('dispatchDialog', { name: 'editPlanningTrain', params: { serviceNumber } });
			} else {
				this.$messageBox(this.$t('tip.selectAPlan'));
			}
		},
		// 复制计划
		handleDuplicateTrain() {
			const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
			if (serviceNumber) {
				this.$emit('dispatchDialog', { name: 'duplicateTrain', params: { serviceNumber } });
			} else {
				this.$messageBox(this.$t('tip.selectAPlan'));
			}
		},
		// 添加任务
		handleAddTask() {
			const params = this.$store.state.runPlan.selected;
			if (params.serviceNumber && params.tripNumber) {
				this.$emit('dispatchDialog', { name: 'addTask', params });
			} else {
				this.$messageBox(this.$t('tip.selectATrain'));
			}
		},
		// 删除任务
		handleDeleteTask() {
			const params = this.$store.state.runPlan.selected;
			if (params.serviceNumber && params.tripNumber) {
				this.$emit('dispatchDialog', { name: 'deleteTask', params });
			} else {
				this.$messageBox(this.$t('tip.selectATrain'));
			}
		},
		// 修改任务
		handleModifyingTask() {
			const params = this.$store.state.runPlan.selected;
			if (params.serviceNumber && params.tripNumber) {
				this.$emit('dispatchDialog', { name: 'modifyingTask', params });
			} else {
				this.$messageBox(this.$t('tip.selectATrain'));
			}
		},
		// 修改交路
		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: 0px;
    $width: 30px;
    $height: 40px;
    $menuPadding: 15px;
    $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;
        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;
    }

    .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>