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

<template>
  <div class="main" :style="{width: canvasWidth+'px'}" @mousemove="mousemove">
    <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
    <ibp-plate v-show="ibpShow" ref="ibpPlate" @hideIbp="hideIbp"/>
    <div v-show="panelShow" :panelShow="panelShow">
      <transition name="el-zoom-in-bottom">
        <map-system-draft ref="mapCanvas" @back="back" />
      </transition>
      <menu-demon-joint ref="demonMenu" :group="group" :user-role="userRole"  :deviceCode="deviceCode" @getUserRole="getUserRole" @hidepanel="hidepanel" @showIbp="showIbp" />
      <menu-demon-schema
        ref="menuSchema"
        :group="group"
        :offset="offset"
        :user-role="userRole"
        @runPlanLoadShow="runPlanLoadShow"
        @runPlanViewShow="runPlanViewShow"
        @faultChooseShow="faultChooseShow"
      />
        IBP
      <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" :right="right" />
    </div>
  </div>

</template>

<script>
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 menuSystemTime from '@/views/display/menuSystemTime';
import IbpPlate from '@/views/ibp/index';
import { mapGetters } from 'vuex';
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
import { loadMapData } from '@/utils/loaddata';
import { getUserRoles, deljointTrainRoom } from '@/api/chat';
import { runDiagramOver, getSimulationInfo } from '@/api/simulation';
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
import { EventBus } from '@/scripts/event-bus';
import ibpData from '@/ibp/constant/ibpData';

export default {
	name: 'JointTrainingDraft',
	components: {
		MapSystemDraft,
		MenuDemonJoint,
		MenuDemonSchema,
		JoinFaultChoose,
		JoinRunPlanLoad,
		JoinRunPlanView,
		menuSystemTime,
		Jl3dDrive,
		IbpPlate
	},
	data() {
		return {
			trainingObj: {},
			checkLine: null,
			timeDemonNum: 0,
			offset: 10,
			mouseNum: 1,
			ierval: null,
			mouseNumTime: 0,
			mapBox: null,
			mapBoxP: null,
			userRole: '',
            deviceCode: '',
			group: '',
			mapId: '',
			skinCode: '',
			simulationShow: false,
			drivingShow: false,
			ibpShow: false,
			panelShow: true
		};
	},
	computed: {
		...mapGetters([
			'canvasWidth',
			'canvasHeight'
		]),
		...mapGetters('map', [
			'map',
			'mapDeviceStatus'
		]),
		...mapGetters('training', [
			'offsetStationCode'
		]),
		...mapGetters('config', [
			'canvasId'
		]),
		width() {
			return this.$store.state.app.width;
		},
		height() {
			return this.$store.state.app.height;
		},
		right() {
			return this.$store.state.config.width / 2 - 55;
		}
	},
	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');
			}
		},
		'$store.state.app.windowSizeCount': function() {
			this.setWindowSize();
		},
		$route() {
			this.$nextTick(() => {
				this.initLoadData();
			});
		}
	},
	async created() {
		this.group = this.$route.query.group;
		this.mapId = this.$route.query.mapId;
		this.skinCode = this.$route.query.skinCode;
	},
	async mounted() {
		await this.setWindowSize();
		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'); // 清空房间信息
		},
		// 清除检查在线定时器
		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.loadSimulationInfo();
				this.initLoadDemonData();
				this.checkLoginLineTimer();
				this.checkMouseStatusTimer();
			} catch (error) {
				this.$messageBox(`初始化失败: ${error.message}`);
				this.endViewLoading();
			}
		},
		async loadSimulationInfo() {
			const resp = await getSimulationInfo(this.group);
			if (resp && resp.code == 200) {
				this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause);
				this.questId = Number(resp.data.questId) || 0;
			}
		},
		async getUserRole() {
			const res = await getUserRoles(this.group);
			this.userRole = res.data.userRole;
			this.deviceCode = res.data.deviceCode;
			return res;
		},
		// 仿真系统
		async initLoadDemonData() {
			this.$store.dispatch('training/end', TrainingMode.NORMAL);
			this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式

			if (this.skinCode) {
				// 01 现地 02 行调 '' 观众
				const resp = await this.getUserRole();
				if (resp && resp.code == 200) {
					// Admin 管理员 Instructor 教员 Dispatcher 行调 Attendant 车站 Audience 观众 Driver 司机 Repair 通号 IBP:IBP盘
					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;
					case 'IBP': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'IBP'); break;
					case 'BigScreen': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'BigScreen'); break;
					}
				}
				await this.getTrainDetail(this.skinCode);
			} else {
				this.endViewLoading();
			}
		},
		async getTrainDetail(skinCode) {
			try {
				await loadMapData(skinCode);
				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;
			this.ibpShow =false;
		},
		showIbp(deviceCode) {
		    if (!deviceCode || !ibpData[deviceCode]){
		      this.$messageBox(`未绑定车站或该车站IBP盘暂未绘制！`);
		      return;
            }
			this.drivingShow = false;
			this.panelShow = false;
			this.ibpShow = true;
			this.$refs.ibpPlate.show(deviceCode);
		},
		hidepanel() {
			this.panelShow = false;
			this.drivingShow = true;
			this.ibpShow = false;
			this.$refs.Jl3dDrive.show(this.skinCode);
		},
		hideIbp() {
			this.drivingShow = false;
			this.panelShow = true;
			this.ibpShow = false;
		},
		messageInfo(message, type) {
			this.$message({
				showClose: true,
				message: message,
				type: type
			});
		},
		setWindowSize() {
			this.$nextTick(() => {
				this.$store.dispatch('config/resize', { width: this.width, height: this.height });
				this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
			});
		}
	}
};
</script>
<style>
    .main {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>