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="$t('display.schema.selectProduct')" @change="switchMode">
      <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>

    <el-button-group>
		<!-- viewRunQuest -->
	  <el-button v-if="isDemon && isDesignPlatform" size="small" :disabled="viewDisabled" type="success" @click="viewScriptRoles">{{$t('display.schema.selectRoles')}}</el-button>
      <el-button v-if="isDemon && !isDesignPlatform" size="small" :disabled="viewDisabled" type="success" @click="viewRunQuest">{{$t('display.schema.loadScript')}}</el-button>
      <el-button v-if="notScript && runing" size="small" :disabled="viewDisabled" @click="viewRunPlan">{{$t('display.schema.previewRunDiagram')}}</el-button>
      <el-button v-if="!runing && !isPlan && notScript" size="small" :disabled="viewDisabled" type="warning" @click="loadRunPlan">{{$t('display.schema.loadRunDiagram')}}</el-button>
      <el-button v-if="mode==OperateMode.FAULT" size="small" type="danger" @click="setFault">{{$t('display.schema.faultSetting')}}</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">{{$t('display.schema.normalOperation')}}</el-radio-button>
      <el-radio-button class="mode" :label="OperateMode.FAULT">{{$t('display.schema.faultOperation')}}</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';
import {getRpDetailByUserMapId} from '@/api/designPlatform';

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';
		},
		isDesignPlatform(){
			return this.$route.fullPath.includes('design/display/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') {
								// debugger;
								if(this.$route.query.from=="user"){
									// 测试运行图功能
									getRpDetailByUserMapId(this.$route.query.planId).then(resp => {
										this.$store.dispatch('runPlan/setPlanData', resp.data);
										this.viewDisabled = false;
									}).catch(() => {
										this.$store.dispatch('runPlan/setPlanData', []);
										this.$messageBox(this.$t('display.schema.getRunDiagramFail'));
									});
								}else{
									// 测试运行图功能
									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(this.$t('display.schema.getRunDiagramFail'));
									});
								}
								

							} 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(this.$t('display.schema.todayRunDiagramNoLoad'));
									} else {
										this.$messageBox(this.$t('display.schema.getRunDiagramFail'));
									}
								});
							}
						});
					}).catch(() => {
						this.$messageBox(this.$t('display.schema.getStationListFail'));
					});
				}
			});
		},
		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');
		},
		viewScriptRoles(){
			this.$emit('runAddRolesLoadShow');
		},
		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>