286 lines
10 KiB
Vue
286 lines
10 KiB
Vue
<template>
|
|
<!-- :style="{width: canvasWidth+'px'}" -->
|
|
<div class="main" style="overflow:hidden;width:auto;height:100%;">
|
|
<div class="map-view" style="width:auto;overflow:hidden;height:100%;">
|
|
<jlmap-visual ref="jlmapVisual" @onMenu="onContextmenu" />
|
|
<pop-menu ref="popMenu" :menu="menu" />
|
|
</div>
|
|
<menu-replay ref="menuReplay" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import JlmapVisual from '@/views/newMap/jlmapNew/index';
|
|
import PopMenu from '@/components/PopMenu';
|
|
import { loadNewMapDataByMapId } from '@/utils/loaddata';
|
|
import { mapGetters } from 'vuex';
|
|
import { checkLoginLine } from '@/api/login';
|
|
import { EventBus } from '@/scripts/event-bus';
|
|
import MenuReplay from './menuReplay';
|
|
import { getToken } from '@/utils/auth';
|
|
import { DeviceMenu, getDeviceMenuByDeviceType } from '@/scripts/ConstDic';
|
|
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
|
|
export default {
|
|
name:'RefereeDisplay',
|
|
components: {
|
|
JlmapVisual,
|
|
PopMenu,
|
|
MenuReplay
|
|
},
|
|
data() {
|
|
return {
|
|
checkLine: null,
|
|
menu: [],
|
|
menuNormal: []
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'canvasWidth'
|
|
]),
|
|
mapId() {
|
|
return this.$route.query.mapId;
|
|
},
|
|
...mapGetters('map', [
|
|
'stationList'
|
|
]),
|
|
...mapGetters('training', [
|
|
'offsetStationCode'
|
|
]),
|
|
...mapGetters('config', [
|
|
'canvasId'
|
|
]),
|
|
width() {
|
|
return this.$store.state.app.width;
|
|
},
|
|
height() {
|
|
return this.$store.state.app.height;
|
|
},
|
|
group() {
|
|
return this.$route.query.group;
|
|
}
|
|
},
|
|
watch: {
|
|
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
|
this.subscribe();
|
|
this.mapBoxP = document.getElementById(this.canvasId).children[0];
|
|
this.mapBoxP.style.cursor = '';
|
|
},
|
|
'$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);
|
|
}
|
|
},
|
|
'$store.state.app.windowSizeCount': function() {
|
|
this.setWindowSize();
|
|
}
|
|
},
|
|
|
|
async mounted() {
|
|
window.onbeforeunload = this.clearSubscribe;
|
|
await this.setWindowSize();
|
|
await this.initLoadData();
|
|
},
|
|
async beforeDestroy() {
|
|
this.clearSubscribe();
|
|
await this.clearAllTimer();
|
|
await this.quit();
|
|
await this.$store.dispatch('training/reset');
|
|
await this.$store.dispatch('map/mapClear');
|
|
},
|
|
methods:{
|
|
// 仿真错误时，被动退出时调用
|
|
async back() {
|
|
// await this.$refs.menuScript.back();
|
|
},
|
|
clearSubscribe() {
|
|
clearSubscribe(`${displayTopic}\/${this.group}`);
|
|
},
|
|
async subscribe() {
|
|
this.clearSubscribe();
|
|
const header = { group: this.group || '', 'X-Token': getToken() };
|
|
creatSubscribe(`${displayTopic}\/${this.group}`, header);
|
|
|
|
await this.$store.dispatch('training/setHasSubscribed');
|
|
},
|
|
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 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 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(this.$t('tip.getMapStateDataException'), this.$t('tip.hint'), {
|
|
// confirmButtonText: this.$t('global.confirm'),
|
|
// showCancelButton: false,
|
|
// type: 'warning'
|
|
// }).then(() => {
|
|
// this.$emit('back');
|
|
// }).catch(() => {
|
|
// });
|
|
// },
|
|
// 加载数据
|
|
async initLoadData() {
|
|
this.$store.dispatch('training/reset');
|
|
try {
|
|
// await this.loadSimulationInfo();
|
|
await this.initLoadRecordData();
|
|
this.checkLoginLineTimer();
|
|
this.checkMouseStatusTimer();
|
|
} catch (error) {
|
|
this.$messageBox(`初始化失败: ${error.message}`);
|
|
this.endViewLoading();
|
|
}
|
|
},
|
|
onContextmenu(em) {
|
|
this.point = {
|
|
x: em.clientX,
|
|
y: em.clientY
|
|
};
|
|
if (!em.deviceType) {
|
|
var menu = getDeviceMenuByDeviceType('Cancel');
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
|
|
}
|
|
},
|
|
// 清除检查在线定时器
|
|
clearAllTimer() {
|
|
if (this.ierval) {
|
|
clearTimeout(this.ierval);
|
|
this.ierval = null;
|
|
}
|
|
|
|
if (this.checkLine) {
|
|
clearTimeout(this.checkLine);
|
|
this.checkLine = null;
|
|
}
|
|
},
|
|
// 销毁仿真
|
|
async quit() {
|
|
await this.$store.dispatch('training/over');
|
|
},
|
|
// 设置检查在线定时器
|
|
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;
|
|
if (this.mapBoxP) {
|
|
this.mapBoxP.style.cursor = this.mapBoxP.style.cursor != 'none' ? this.mapBoxP.style.cursor : '';
|
|
}
|
|
} else {
|
|
this.mouseNumTime += 1;
|
|
}
|
|
if (this.mapBoxP) {
|
|
if (this.mouseNumTime >= 12) {
|
|
this.mapBoxP.style.cursor = 'none';
|
|
}
|
|
}
|
|
}, 1000);
|
|
},
|
|
// 加载地图数据
|
|
async initLoadRecordData() {
|
|
this.switchMode('01');
|
|
if (parseInt(this.mapId)) {
|
|
await this.loadNewMapDataById(this.mapId);
|
|
} else {
|
|
this.endViewLoading();
|
|
}
|
|
},
|
|
// 结束加载状态
|
|
endViewLoading(isSuccess) {
|
|
if (!isSuccess) {
|
|
this.$store.dispatch('map/mapClear');
|
|
}
|
|
this.$nextTick(() => {
|
|
EventBus.$emit('viewLoading', false);
|
|
});
|
|
},
|
|
switchMode(prdType) {
|
|
this.$store.dispatch('training/setPrdType', prdType);
|
|
},
|
|
async loadNewMapDataById(mapId) {
|
|
try {
|
|
await loadNewMapDataByMapId(mapId);
|
|
await this.$store.dispatch('training/setMapDefaultState');
|
|
} catch (error) {
|
|
this.$messageBox(`获取地图数据失败: ${error.message}`);
|
|
this.endViewLoading();
|
|
}
|
|
},
|
|
// 加载仿真信息
|
|
// async loadSimulationInfo() {
|
|
// this.dataError = false;
|
|
// const resp = await getSimulationInfoNew(this.group);
|
|
// if (resp && resp.code == 200 && resp.data && !resp.data.dataError) {
|
|
// this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause);
|
|
// this.questId = Number(resp.data.questId) || 0;
|
|
// this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
|
|
// if (resp.data.planRunning) {
|
|
// this.planRunning = resp.data.planRunning;
|
|
// } else {
|
|
// this.$store.dispatch('training/over');
|
|
// }
|
|
// if (this.isDemon) {
|
|
// this.$refs.menuDemon.initPlannedDriving(resp.data.planRunning);
|
|
// } else if (this.isScript) {
|
|
// this.$refs.menuScript.initPlannedDriving(resp.data.planRunning);
|
|
// }
|
|
// } else if (resp && resp.code == 200 && resp.data && resp.data.dataError) {
|
|
// this.dataError = true;
|
|
// this.$messageBox('此地图数据正在维护中,无法运行！');
|
|
// }
|
|
// },
|
|
setWindowSize() {
|
|
this.$nextTick(() => {
|
|
const width = this.width;
|
|
const height = this.height;
|
|
this.$store.dispatch('config/resize', { width, height });
|
|
this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|