rt-sim-training-client/src/views/jsxt/refereeList/display.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>