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

<template>
  <div class="main" :style="{width: canvasWidth+'px'}" @mousemove="mousemove">
    <Jl3d-Simulation v-show="drivingShow" ref="Jl3dSimulation" :panel-show="drivingShow" @showdriving="showdriving" />
    <transition name="el-zoom-in-bottom">
      <map-system-draft ref="mapCanvas" @back="back" />
    </transition>
    <menu-demon-joint ref="demonMenu" :group="group" :user-role="userRole" @getUserRole="getUserRole" @hidepanel="hidepanel" />
    <menu-demon-schema
      ref="menuSchema"
      :group="group"
      :offset="offset"
      :user-role="userRole"
      @runPlanLoadShow="runPlanLoadShow"
      @runPlanViewShow="runPlanViewShow"
      @faultChooseShow="faultChooseShow"
    />

    <join-fault-choose ref="faultChoose" :group="group" />
    <join-run-plan-Load ref="runPlanLoad" :group="group" />
    <join-run-plan-view ref="runPlanView" :group="group" />
    <menu-system-time ref="menuSystemTime" :offset="offset" :group="group" />
  </div>

</template>

<script>
// import Hamburger from '@/components/Hamburger';
import MapSystemDraft from '@/views/mapsystem/index';
import MenuDemonJoint from './menuDemon';
import MenuDemonSchema from './menuSchema';
import JoinFaultChoose from '@/views/display/demon/faultChoose';
import JoinRunPlanLoad from '@/views/display/demon/runPlanLoad';
import JoinRunPlanView from '@/views/display/demon/runPlanView';
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
import menuSystemTime from '@/views/display/menuSystemTime';
import { mapGetters } from 'vuex';
// import { getProductDetail } from '@/api/jmap/training';
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
// import { isFullscreen } from '@/utils/screen';
import { loadMapData } from '@/utils/loaddata';
import { getUserRoles, deljointTrainRoom } from '@/api/chat';
import { runDiagramOver } from '@/api/simulation';
import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
import EventBus from '@/scripts/event-bus';

export default {
	name: 'JointTrainingDraft',
	components: {
		MapSystemDraft,
		MenuDemonJoint,
		MenuDemonSchema,
		JoinFaultChoose,
		JoinRunPlanLoad,
		JoinRunPlanView,
		menuSystemTime,
		Jl3dSimulation
	},
	mixins: [WindowResizeHandler],
	data() {
		return {
			trainingObj: {},
			checkLine: null,
			timeDemonNum: 0,
			offset: 10,
			mouseNum: 1,
			ierval: null,
			mouseNumTime: 0,
			mapBox: null,
			mapBoxP: null,
			userRole: '',
			group: '',
			mapId: '',
			simulationShow: false,
			drivingShow: false
		};
	},
	computed: {
		...mapGetters([
			'canvasWidth',
			'canvasHeight'
		]),
		...mapGetters('map', [
			'map',
			'mapDeviceStatus'
		]),
		...mapGetters('training', [
			'offsetStationCode'
		]),
		...mapGetters('config', [
			'canvasId'
		])
	},
	watch: {
		'$store.state.config.menuBarLoadedCount': function (val) {
			this.setPosition();
		},
		'$store.state.map.mapViewLoadedCount': function (val) {
			this.mapBoxP = document.getElementById(this.canvasId).children[0];
			this.mapBox = document.getElementsByTagName('canvas');
		},
		'$store.state.socket.permissionOver': function () {
			this.$alert('用户权限已被收回', '提示', {
				confirmButtonText: '确定',
				showClose: false,
				callback: async (action) => {
					await this.$store.dispatch('training/over');
					await runDiagramOver(this.group);
					await deljointTrainRoom(this.group);
					await this.$router.push({ path: `/demonstration/detail/${this.mapId}` });
				}
			});
		},
		'$store.state.socket.jointRoomInfo': function (val) { //  综合演练房间信息
			if (val.creatorId) {
				this.handleRoomInfo(val);
			}
		},
		'$store.state.socket.chatContentList': function (val) { // 综合演练被踢出房间
			if (val.type === 'userRoomKickOut'&&val.oneself) {
				this.$router.push({ path: `/` });
				this.messageInfo('您被管理员踢出房间。', 'warning');
			}
		},
		$route() {
			this.initLoadData();
		}
	},
	async created() {
		this.group = this.$route.query.group;
		this.mapId = this.$route.query.mapId;
	},
	async mounted() {
		await this.initLoadData();
	},
	async beforeDestroy() {
		await this.clearAllTimer();
		await this.$store.dispatch('training/end', null);
		await this.$store.dispatch('training/reset');
		await this.$store.dispatch('map/mapClear');
		await this.$store.dispatch('training/setGroup', '');
	},
	methods: {
		mousemove(e) {
			this.mouseNum = 1;
		},
		handleRoomInfo(data) {
			if (data.state == '03') { // 退出房间
				this.$router.push({ path: `/` });
				this.clearSubscribe();
			} else if (data.state == '01') { // 进入准备中
				const query = { group: this.group };
				this.$router.push({ path: `/trainroom`, query: query });
				this.clearSubscribe();
			}
			this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
		},
		resizeHandler() {
			const width = this._clientWidth;
			const height = this._clientHeight;

			this.$store.dispatch('config/resize', { width, height });

			this.$nextTick(() => {
				this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
			});
		},
		// 清除检查在线定时器
		clearAllTimer() {
			if (this.ierval) {
				clearTimeout(this.ierval);
				this.ierval = null;
			}

			if (this.checkLine) {
				clearTimeout(this.checkLine);
				this.checkLine = null;
			}
		},
		// 设置检查在线定时器
		checkLoginLineTimer() {
			if (this.checkLine) {
				clearTimeout(this.checkLine);
			}

			this.checkLine = setInterval(() => {
				checkLoginLine();
			}, 5000 * 60);
		},
		// 设置手标显示状态
		checkMouseStatusTimer() {
			if (this.ierval) {
				clearTimeout(this.ierval);
			}

			this.ierval = setInterval(() => {
				if (this.mouseNum) {
					this.mouseNum = 0;
					this.mouseNumTime = 0;
				} else {
					this.mouseNumTime += 1;
				}
				if (this.mapBox) {
					if (this.mouseNumTime >= 15) {
						for (let i = 0; i < this.mapBox.length; i++) {
							this.mapBox[i].style.cursor = 'none';
						}
					} else {
						for (let i = 0; i < this.mapBox.length; i++) {
							this.mapBox[i].style.cursor = '';
						}
					}
				}
			}, 1000);
		},
		// 设置菜单和工具栏位置
		setPosition() {
			this.$nextTick(() => {
				let offset = 10;
				const menuBar = document.getElementById('menuBar');
				const menuTool = document.getElementById('menuTool');

				if (menuBar) {
					offset += (menuBar.offsetHeight || 0);
				}

				if (menuTool) {
					offset += (menuTool.offsetHeight || 0);
				}

				if (this.offset != offset) {
					this.offset = offset;
				}
			});
		},
		// 结束加载状态
		endViewLoading(isSuccess) {
			if (!isSuccess) {
				this.$store.dispatch('map/mapClear');
			}

			this.$nextTick(() => {
				EventBus.$emit('viewLoading', false);
			});
		},
		// 加载地图数据
		initLoadData() {
			const width = document.documentElement.clientWidth;
			const height = document.documentElement.clientHeight + 200;
			this.$store.dispatch('config/resize', { width, height });

			try {
				this.initLoadDemonData();
				this.checkLoginLineTimer();
				this.checkMouseStatusTimer();
			} catch (error) {
				this.$messageBox(`初始化失败: ${error.message}`);
				this.endViewLoading();
			}
		},
		async getUserRole() {
			const res = await getUserRoles(this.group);
			this.userRole = res.data.userRole;
			return res;
		},
		// 仿真系统
		async initLoadDemonData() {
			this.$store.dispatch('training/end', TrainingMode.NORMAL);
			this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式

			const skinStyle = this.$route.query.skinStyle;
			if (skinStyle) {
				// 01 现地 02 行调 '' 观众
				const resp = await this.getUserRole();
				if (resp && resp.code == 200) {
					// Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号
					this.userRole = resp.data.userRole;
					switch (this.userRole) {
					case 'Admin': this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Admin'); break;
					case 'Instructor': this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Instructor'); break;
					case 'Dispatcher': this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Dispatcher'); break;
					case 'Attendant': this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'Attendant'); break;
					case 'Audience': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Audience'); break;
					case 'Driver': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Driver'); break;
					case 'Repair': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Repair'); break;
					}
				}
				await this.getTrainDetail(skinStyle);
			} else {
				this.endViewLoading();
			}
		},
		async getTrainDetail(skinStyle) {
			try {
				await loadMapData(skinStyle);
				await this.$store.dispatch('training/setMapDefaultState');
			} catch (error) {
				this.$messageBox(`获取地图数据失败`);
				this.endViewLoading();
			}
		},
		back() {
			this.$refs.demonMenu.back();
		},
		runPlanViewShow() {
			this.$refs.runPlanView.doShow();
		},
		runPlanLoadShow() {
			this.$refs.runPlanLoad.doShow();
		},
		faultChooseShow() {
			this.$refs.faultChoose.doShow();
		},
		showdriving() {
			this.panelShow = true;
			this.drivingShow = false;
		},
		hidepanel() {
			this.panelShow = false;
			this.drivingShow = true;
			this.$refs.Jl3dSimulation.show(this.$route.query.skinStyle);

		},
		messageInfo(message, type) {
			this.$message({
				showClose: true,
				message: message,
				type: type
			});
		}
	}
};
</script>
<style>
    .main {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>