rt-sim-training-client/src/views/display/menuSchema.vue

<template>
  <div class="schema" :style="{top: offset+'px'}">
    <el-select v-if="isScript" v-model="swch" size="small" placeholder="请选择产品类型" @change="switchMode">
      <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>

    <el-button-group>
      <el-button v-if="isDemon" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">加载剧本</el-button>
      <el-button v-if="notScript && runing" size="small" :disabled="viewDisabled" @click="viewRunPlan">运行图预览</el-button>
      <el-button v-if="!runing && !isPlan && notScript" size="small" :disabled="viewDisabled" type="warning" @click="loadRunPlan">运行图加载</el-button>
      <el-button v-if="mode==OperateMode.FAULT" size="small" type="danger" @click="setFault">故障设置</el-button>
    </el-button-group>

    <el-radio-group v-if="!isPlan" v-model="mode" size="small" @change="changeOperateMode(mode)">
      <el-radio-button class="mode" :label="OperateMode.NORMAL">正常操作</el-radio-button>
      <el-radio-button class="mode" :label="OperateMode.FAULT">故障操作</el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { OperateMode } from '@/scripts/ConstDic';
import { getStationListBySkinCode, queryRunPlan } from '@/api/runplan';
import { getEveryDayRunPlanData } from '@/api/simulation';

export default {
	name: 'MenuSchema',
	props: {
		group: {
			type: String,
			required: true
		},
		offset: {
			type: Number,
			required: true
		}
	},
	data() {
		return {
			mode: OperateMode.NORMAL,
			OperateMode: OperateMode,
			viewDisabled: true,
			runing: false,
			swch: '02',
			swchList: [
				{ value: '01', name: '现地' },
				{ value: '02', name: '行调' }
			]
		};
	},
	computed: {
		...mapGetters('runPlan', [
			'stations'
		]),
		notScript() {
			return this.$route.params.mode !== 'script';
		},
		isPlan() {
			return this.$route.params.mode === 'plan';
		},
		isScript() {
			// return this.$route.params.mode === 'script';
			return false;
		},
		isDemon() {
			return this.$route.params.mode === 'demon';
		}
	},
	watch: {
		'$store.state.training.started': function (val) {
			this.setRuning(val);
		},
		'$store.state.training.switchcount': async function () {
			if (this.group) {
				const started = this.$store.state.training.started;
				if (started) {
					await this.loadRunData(this.$route.query);
				}
			}
		}
	},
	async mounted() {
		await this.loadRunData(this.$route.query);
	},
	methods: {
		loadRunData(opt) {
			this.$store.dispatch('runPlan/clear').then(() => {
				if (opt && opt.skinCode) {
					this.viewDisabled = true;
					getStationListBySkinCode(opt.skinCode).then(response => {
						this.$store.dispatch('runPlan/setStations', response.data).then(() => {
							if (this.$route.params.mode == 'plan') {
								// 测试运行图功能
								queryRunPlan(this.$route.query.planId).then(resp => {
									this.$store.dispatch('runPlan/setPlanData', resp.data);
									this.viewDisabled = false;
								}).catch(() => {
									this.$store.dispatch('runPlan/setPlanData', []);
									this.$messageBox(`获取运行图数据失败`);
								});
							} else {
								getEveryDayRunPlanData(this.group).then(resp => {
									this.$store.dispatch('runPlan/setPlanData', resp.data);
									this.viewDisabled = false;
								}).catch(error => {
									this.$store.dispatch('runPlan/setPlanData', []);
									if (error.code == 30001) {
										this.$messageBox(`今日运行图未加载`);
									} else {
										this.$messageBox(`获取运行图数据失败`);
									}
								});
							}
						});
					}).catch(() => {
						this.$messageBox(`获取车站列表失败`);
					});
				}
			});
		},
		changeOperateMode(handle) {
			this.$store.dispatch('training/changeOperateMode', { mode: handle });
		},
		setRuning(run) {
			this.runing = run;
		},
		setFault() {
			this.$emit('faultChooseShow');
		},
		loadRunPlan() {
			this.$emit('runPlanLoadShow');
		},
		viewRunPlan() {
			this.$emit('runPlanViewShow');
		},
		viewRunQuest() {
			this.$emit('runQuestLoadShow');
		},
		switchMode(swch) {
			this.$emit('switchMode', swch);
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .schema {
        z-index: 9;
        display: inline;
        position: absolute;
        right: 15px;
    }

    /deep/ .el-button+.el-button {
        margin-left: 0px;
    }
</style>