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

<template>
  <div class="PlanStatusBar">
    <ul class="ul-box">
      <!-- v-if="isNotUser" -->
      <div class="li_plan" @click="showTrain">{{ $t('planMonitor.serviceAndTripNumber') }}</div>
      <div class="li_plan" @click="handleGernaratePlanningTrain">{{ $t('planMonitor.gerneratePlan') }}</div>
      <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="handleMovePlanningTrain">移动计划</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>
      <div class="li_plan" @click="handleClearData">清除数据</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, clearPlaningData } from '@/api/runplan';
import { launchFullscreen } from '@/utils/screen';
import { UrlConfig } from '@/scripts/ConstDic';

export default {
    name: 'PlanStatusBar',
    props: {
        loadRunPlanId: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            // isNotUser: true
        };
    },
    watch: {

    },
    created() {
        // if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
        //     this.isNotUser = false;
        // } else {
        //     this.isNotUser = true;
        // }
    },
    methods: {
        showTrain() {
            this.$emit('showTrain');
        },
        // 添加计划
        handleAddPlanningTrain() {
            const planId = this.$route.query.planId || this.loadRunPlanId;
            if (planId) {
                this.$emit('dispatchDialog', { name: 'addPlanningTrain', params: {} });
            } else {
                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
            }
        },
        handleGernaratePlanningTrain() {
            const planId = this.$route.query.planId || this.loadRunPlanId;
            if (planId) {
                this.$emit('dispatchDialog', { name: 'gernaratePlanTrain', 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'));
            }
        },
        handleMovePlanningTrain() {
            const serviceNumber = this.$store.state.runPlan.selected.serviceNumber;
            if (serviceNumber) {
                this.$emit('dispatchDialog', { name: 'movePlaningTrain', 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'));
            }
        },
        // 清除数据
        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('清除数据失败!');
            });
        },
        // 校验运行图
        handlePlanEffectiveCheck() {
            const planId = this.$route.query.planId;
            if (planId) {
                if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
                    this.$messageBox(' 功能待完善');
                } else {
                    planEffectiveCheck(planId).then(resp => {
                        this.$emit('dispatchDialog', {
                            name: 'systermOut',
                            params: {
                                width: 600,
                                contextList: resp.data.length > 0 ? resp.data : ['检查成功']
                            }
                        });
                    }).catch(error => {
                        this.$messageBox(error.message + ' ' + this.$t('tip.runGraphVerificationFailed'));
                    });
                }

            } else {
                this.$messageBox(this.$t('tip.selectARunGraphFirst'));
            }
        },
        // 测试运行图
        async handleTestRunPlan() {
            const data = { planId: this.$route.query.planId };
            if (/^\/plan\/usertool/.test(this.$route.fullPath)) {
                this.$messageBox(' 功能待完善');
            } else {
                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);
                });
            }

        }
    }
};
</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>