337 lines
14 KiB
Vue
337 lines
14 KiB
Vue
|
<template>
|
||
|
|
<div class="main" :style="{width: canvasWidth+'px'}" @mousemove="mousemove">
|
||
|
|
<Jl3d-Simulation ref="Jl3dSimulation" v-show="drivingShow" :panelShow="drivingShow" @showdriving="showdriving">
|
||
|
|
</Jl3d-Simulation>
|
||
|
|
<transition name="el-zoom-in-bottom">
|
||
|
|
<map-system-draft ref="mapCanvas" @back="back"></map-system-draft>
|
||
|
|
</transition>
|
||
|
|
<menu-demon-joint ref="demonMenu" :group="group" :userRole="userRole" @getUserRole="getUserRole" @hidepanel="hidepanel">
|
||
|
|
</menu-demon-joint>
|
||
|
|
<menu-demon-schema ref="menuSchema" :group="group" :offset="offset" :userRole="userRole"
|
||
|
|
@runPlanLoadShow="runPlanLoadShow" @runPlanViewShow="runPlanViewShow" @faultChooseShow="faultChooseShow">
|
||
|
|
</menu-demon-schema>
|
||
|
|
|
||
|
|
<join-fault-choose ref="faultChoose" :group="group"></join-fault-choose>
|
||
|
|
<join-run-plan-Load ref="runPlanLoad" :group="group"></join-run-plan-Load>
|
||
|
|
<join-run-plan-view ref="runPlanView" :group="group"></join-run-plan-view>
|
||
|
|
<menu-system-time ref="menuSystemTime" :offset="offset" :group="group"></menu-system-time>
|
||
|
|
</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 { runDiagramIsStart, simulationExerciseNotify, runDiagramOver } from '@/api/simulation';
|
||
|
|
import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
|
||
|
|
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('map/setGroup', '');
|
||
|
|
eventBus.$emit('trainingSubscribeStop');
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
mousemove(e) {
|
||
|
|
this.mouseNum = 1;
|
||
|
|
},
|
||
|
|
handleRoomInfo(data) {
|
||
|
|
if (data.state == '03') { // 退出房间
|
||
|
|
this.$router.push({ path: `/` });
|
||
|
|
this.clearSubscribe();
|
||
|
|
} else if (data.state == '01') { // 进入准备中
|
||
|
|
let query = { group: this.group };
|
||
|
|
this.$router.push({ path: `/trainroom`, query: query });
|
||
|
|
this.clearSubscribe();
|
||
|
|
};
|
||
|
|
this.$store.dispatch('socket/setJointRoomInfo'); // 清空房间信息
|
||
|
|
},
|
||
|
|
resizeHandler() {
|
||
|
|
let width = this._clientWidth;
|
||
|
|
let 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;
|
||
|
|
let menuBar = document.getElementById('menuBar');
|
||
|
|
let 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() {
|
||
|
|
let width = document.documentElement.clientWidth;
|
||
|
|
let 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() {
|
||
|
|
let 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 }); //默认为正常模式
|
||
|
|
|
||
|
|
let skinStyle = this.$route.query.skinStyle;
|
||
|
|
if (skinStyle) {
|
||
|
|
// 01 现地 02 行调 '' 观众
|
||
|
|
let 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('map/setPrdType', '02'); this.$store.dispatch('map/setRoles', 'Admin'); break;
|
||
|
|
case 'Instructor': this.$store.dispatch('map/setPrdType', '02'); this.$store.dispatch('map/setRoles', 'Instructor'); break;
|
||
|
|
case 'Dispatcher': this.$store.dispatch('map/setPrdType', '02'); this.$store.dispatch('map/setRoles', 'Dispatcher'); break;
|
||
|
|
case 'Attendant': this.$store.dispatch('map/setPrdType', '01'); this.$store.dispatch('map/setRoles', 'Attendant'); break;
|
||
|
|
case 'Audience': this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/setRoles', 'Audience'); break;
|
||
|
|
case 'Driver': this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/setRoles', 'Driver'); break;
|
||
|
|
case 'Repair': this.$store.dispatch('map/setPrdType', ''); this.$store.dispatch('map/setRoles', 'Repair'); break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
await this.getTrainDetail(skinStyle);
|
||
|
|
} else {
|
||
|
|
this.endViewLoading();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getTrainDetail(skinStyle) {
|
||
|
|
try {
|
||
|
|
await loadMapData(skinStyle);
|
||
|
|
await this.$store.dispatch('training/setMapDefaultStatus');
|
||
|
|
} 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>
|