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

<template>
  <div class="schema" :style="{top: offset+'px'}">
    <el-select
      v-if="userRole == 'Instructor' || userRole == 'Admin'"
      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>
      <template>
        <el-button v-if="runing" size="small" :disabled="viewDisabled" @click="viewRunPlan">运行图预览</el-button>
      </template>
      <template v-if="userRole == 'Admin'">
        <el-button v-if="!runing" size="small" type="warning" :disabled="viewDisabled" @click="loadRunPlan">
          运行图加载</el-button>
      </template>
      <template v-if="userRole == 'Instructor' || userRole == 'Admin'">
        <el-button v-if="mode==OperateMode.FAULT" size="small" type="danger" @click="setFault">故障设置</el-button>
      </template>
    </el-button-group>

    <el-radio-group
      v-if="userRole == 'Instructor' || userRole == 'Admin'"
      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 { getStationListBySkinStyle } from '@/api/runplan';
import { getEveryDayRunPlanData } from '@/api/simulation';

export default {
	name: 'MenuDemonSchema',
	props: {
		group: {
			type: String,
			required: true
		},
		offset: {
			type: Number,
			required: true
		},
		userRole: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			mode: OperateMode.NORMAL,
			OperateMode: OperateMode,
			viewDisabled: true,
			realData: {},
			series: [],
			kmRangeCoordMap: {},
			runPlanData: {},
			swch: '02',
			swchList: [
				{ value: '01', name: '现地' },
				{ value: '02', name: '行调' }
			],
			runing: false,
			userId: ''
		};
	},
	computed: {
		...mapGetters('runPlan', [
			'stations'
		]),
		isShowMenuBar() {
			return this.$store.state.map.roles == 'Admin';
		}
	},
	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() {
		this.userId = this.$store.state.user.id;
		await this.loadRunData(this.$route.query);
	},
	methods: {
		loadRunData(opt) {
			this.$store.dispatch('runPlan/clear').then(resp => {
				if (opt && opt.skinStyle) {
					this.viewDisabled = true;
					getStationListBySkinStyle(opt.skinStyle).then(response => {
						const stations = response.data;
						this.$store.dispatch('runPlan/setStations', stations).then(() => {
							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(`获取车站列表失败`);
					});
				}
			});
		},
		switchMode(swch) {
			this.$store.dispatch('training/setPrdType', swch);
		},
		changeOperateMode(handle) {
			this.$store.dispatch('training/changeOperateMode', { mode: handle });
		},
		setFault() {
			this.$emit('faultChooseShow');
		},
		loadRunPlan() {
			this.$emit('runPlanLoadShow');
		},
		viewRunPlan() {
			this.$emit('runPlanViewShow');
		},
		setRuning(run) {
			this.runing = run;
		}
	}
};
</script>
<style>
    .schema {
        z-index: 9;
        display: inline;
        position: absolute;
        right: 20px;
    }

    .schema .el-radio-group .el-radio-button__inner {
        padding: 0px 15px 0px 15px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
    }

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