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

<template>
  <div class="PlanStatusBar">
    <ul class="ul-box">
      <div class="li_plan" @click="showTrain">{{$t('planMonitor.serviceAndTripNumber')}}</div>
    </ul>
    <ul class="ul-box">
      <div class="li_plan" @click="handleAddPlanningTrain">{{$t('planMonitor.addPlan')}}</div>
      <div class="li_plan" @click="handleDeletePlanningTrain">{{$t('planMonitor.deletePlan')}}</div>
      <div class="li_plan" @click="handleDuplicateTrain">{{$t('planMonitor.duplicatePlan')}}</div>
      <div class="li_plan" @click="handleAddTask">{{$t('planMonitor.addTask')}}</div>
      <div class="li_plan" @click="handleDeleteTask">{{$t('planMonitor.deleteTask')}}</div>
      <div class="li_plan" @click="handleModifyingTask">{{$t('planMonitor.modifyTask')}}</div>
    </ul>
    <ul class="ul-box tool">
      <div class="li_plan" @click="handlePlanEffectiveCheck">{{$t('planMonitor.validityCheck')}}</div>
      <div class="li_plan" @click="handleTestRunPlan">{{$t('planMonitor.testRunning')}}</div>
    </ul>
  </div>
</template>

<script>
import { planEffectiveCheck, runPlanNotify } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/router/index';

export default {
	name: 'PlanStatusBar',
	data() {
		return {
		};
	},
	watch: {

	},
	methods: {
		showTrain() {
			this.$emit('showTrain');
		},
		// 添加计划
		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'));
			}
		},
		// 复制计划
		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'));
			}
		},

		// 校验运行图
		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);
			});
		}
	}
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";

    .PlanStatusBar {
        z-index: 5;
        position: absolute;
        width: 50px;
		height: calc(100% - 45px);
		top: 45px;
		right: 0px;
		background: #293c55;
		padding-top: 10px;

    }
	.ul-box{
		width: 100%;
		padding: 0;
		.li_plan{
			width: 100%;
			height: 50px;
			font-size: 14px;
			color: rgba(255, 255, 255, 0.45);
			text-align: center;
			padding: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 4px;
			cursor: pointer;

			&:hover{
				background: #0e151f;
				color: #fff;
			}
		}
	}

	.tool{
		position: absolute;
		bottom: 50px;
	}
</style>