rt-sim-training-client/src/views/mapsystem/index.vue

<template>
  <div class="mainContext">
    <map-common ref="mapCommon" />
  </div>
</template>

<script>
import MapCommon from './common/index';
import { handleToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, displayTopic, screenTopic, planTopic } from '@/utils/stomp';
import { sendCommand } from '@/api/jmap/training';

export default {
	name: 'MapSystemDraft',
	components: {
		MapCommon
	},
	data() {
		return {
			topic: '/user/queue/training',
			stomp: null,
			currentMap: null,
			mode: ''
		};
	},
	computed: {
		group() { return this.$route.query.group; }
	},
	watch: {
		'$store.state.map.mapViewLoadedCount': function (val) {
			this.subscribe();
		},
		'$store.state.socket.equipmentStatus': function (val) {
			if (val.length) {
				this.statusMessage(val);
			}
		},
		'$store.state.socket.trainStationList': function (val) {
			if (val.length) {
				this.runFactMessage(val);
			}
		},
		'$store.state.socket.simulationError': function (val) {
			if (val) {
				this.simulationError(val);
			}
		},
		'$store.state.socket.simulationReset': function (val) {
			if (val) {
				this.simulationReset(val);
			}
		}
	},
	mounted() {
		window.onbeforeunload = this.clearSubscribe;
		this.mode = this.$route.params.mode || '';
		this.currentMap = this.$refs.mapCommon;
		this.$nextTick(() => {
			setTimeout(() => {
				this.$store.dispatch('config/resetCanvasOffset');
			}, 100);
		});
	},
	beforeDestroy() {
		this.clearSubscribe();
	},
	methods: {
		async mapViewLoaded(loading) {
			this.currentMap.mapViewLoaded(loading);
		},
		async statusMessage(list) {
			await this.$store.dispatch('training/updateMapState', list);
			await this.$store.dispatch('socket/setEquipmentStatus');
		},
		async runFactMessage(list) {
			await this.$store.dispatch('runPlan/updateRunPlanData', list);
			await this.$store.dispatch('socket/setTrainStationList');
		},
		async simulationError() {
			await this.$store.dispatch('map/clearJlmapTrainView');
			await this.$store.dispatch('map/setTrainWindowShow', false);
			await this.$store.dispatch('socket/setSimulationError');
			await this.$store.dispatch('training/setMapDefaultState');
			this.clearSubscribe();
			this.$confirm('获取地图状态数据异常，请刷新页面重新加载。若多次遇到此类问题，请急时联系开发团队处理！', '提示', {
				confirmButtonText: '确定',
				showCancelButton: false,
				type: 'warning'
			}).then(() => {
				this.$emit('back');
			}).catch(() => {
			});
		},
		async simulationReset() {
			await this.$store.dispatch('map/clearJlmapTrainView');
			await this.$store.dispatch('map/setTrainWindowShow', false);
			await this.$store.dispatch('training/over');
			await this.$store.dispatch('socket/setSimulationReset');
			await this.$store.dispatch('socket/setSimulationStart');
			await this.$store.dispatch('training/setMapDefaultState');
		},
		async subscribe() {
			const header = { group: this.group || '', 'X-Token': handleToken() };

			if (this.mode === 'dp') {
				creatSubscribe(screenTopic, header);
			} else if (this.mode === 'plan') {
				creatSubscribe(planTopic, header);
			} else {
				creatSubscribe(displayTopic, header);
			}

			await this.$store.dispatch('training/setHasSubscribed');
		},
		clearSubscribe() {
			if (this.mode === 'dp') {
				clearSubscribe(screenTopic);
			} else if (this.mode === 'plan') {
				clearSubscribe(planTopic);
			} else {
				clearSubscribe(displayTopic);
			}
		},
		sendDeviceChangeEvent(data, header) {
			// 发送设备操作事件到服务器
			sendCommand('', data).then(response => {
			}).catch(error => {
				console.error(error);
			});
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .mainContext {
        font-family: "Helvetica Neue ", Helvetica, "PingFang SC ", "Hiragino Sans GB ", "Microsoft YaHei ", "PingFang SC ", Arial, consolas;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>