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

<template>
  <div class="PlanStatusBar">
    <ul class="ul-box">
      <div class="li_plan" @click="showTrain">表号车次</div>
    </ul>
    <ul class="ul-box">
      <div class="li_plan" @click="handleAddPlanningTrain">增加计划</div>
      <div class="li_plan" @click="handleDeletePlanningTrain">删除计划</div>
      <div class="li_plan" @click="handleDuplicateTrain">复制计划</div>
      <div class="li_plan" @click="handleAddTask">增加任务</div>
      <div class="li_plan" @click="handleDeleteTask">删除任务</div>
      <div class="li_plan" @click="handleModifyingTask">修改任务</div>
    </ul>
    <ul class="ul-box tool">
      <div class="li_plan" @click="handlePlanEffectiveCheck">有效检查</div>
      <div class="li_plan" @click="handleTestRunPlan">测试运行</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('请选择一张运行图');
			}
		},
		// 删除计划
		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,
						refresh: true
					}
				});
			} 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('请选择一个车次');
			}
		},

		// 校验运行图
		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 = {
					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(`创建仿真失败: ${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>