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" :device-code="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"
      />
      <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 { getToken } from '@/utils/auth';
import { creatSubscribe, clearSubscribe, roomTopic} from '@/utils/stomp';
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/ibpsystem/index';
import { mapGetters } from 'vuex';
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
import { loadMapDataById } 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';
import { Message } from 'element-ui';

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: '',
            lineCode: '',
            simulationShow: false,
            drivingShow: false,
            ibpShow: false,
            panelShow: true,
            ibpPart: ''
        };
    },
    computed: {
        ...mapGetters([
            'canvasWidth',
            'canvasHeight'
        ]),
        ...mapGetters('map', [
            'map'
        ]),
        ...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;
        },
        userId() {
            return this.$store.state.user ? this.$store.state.user.id : '';
        }
    },
    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(this.$t('tip.userRightsHaveBeenReclaimed'), this.$t('tip.hint'), {
                confirmButtonText: this.$t('global.confirm'),
                showClose: false,
                callback: async (action) => {
                    await this.$store.dispatch('training/over');
                    await runDiagramOver(this.group);
                    await deljointTrainRoom(this.group);
                    this.$router.go(-1);
                }
            });
        },
        '$store.state.socket.jointRoomInfo': function (val) { //  综合演练房间信息
            if (val.creatorId) {
                this.handleRoomInfo(val);
            }
        },
        '$store.state.socket.roleList': function (val) { // 综合演练被踢出房间
            val.forEach(elem => {
                if (elem.id == this.userId && !elem.userRole) {
                    this.$router.go(-1);
                    this.messageInfo(this.$t('tip.beKickedOut'), '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.lineCode = this.$route.query.lineCode;
        Message.closeAll();
    },
    async mounted() {
        await this.setWindowSize();
        await this.initLoadData();
        await this.subscribe();
    },
    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', '');
        Message.closeAll();
    },
    methods: {
        mousemove(e) {
            this.mouseNum = 1;
        },
        handleRoomInfo(data) {
            if (data.state == '03') { // 退出房间
                this.$router.go(-1);
            } else if (data.state == '01') { // 进入准备中
                const query = { group: this.group };
                this.$router.replace({ path: `/trainroom`, query: query });
            }
            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( this.$t('error.initializationFailed') + 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);
            const data = res.data || {};
            this.userRole = data.userRole;
            this.deviceCode = data.deviceCode;
            this.ibpPart = data.ibpPart;
            if (this.userRole === 'IBP') {
                this.showIbp(this.deviceCode);
            } else {
                this.hideIbp();
            }
            return res;
        },
        // 仿真系统
        async initLoadDemonData() {
            this.$store.dispatch('training/end', TrainingMode.NORMAL);
            this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式

            if (this.lineCode) {
                // 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'); this.hideIbp(); break;
                    case 'Instructor': this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Instructor'); this.hideIbp(); break;
                    case 'Dispatcher': this.$store.dispatch('training/setPrdType', '02'); this.$store.dispatch('training/setRoles', 'Dispatcher'); this.hideIbp(); break;
                    case 'Attendant': this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'Attendant'); this.hideIbp(); break;
                    case 'CI': this.$store.dispatch('training/setPrdType', '01'); this.$store.dispatch('training/setRoles', 'CI'); this.hideIbp(); break;
                    case 'Audience': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Audience'); this.hideIbp(); break;
                    case 'Driver': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Driver'); this.hideIbp(); break;
                    case 'Repair': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'Repair'); this.hideIbp(); break;
                    case 'IBP': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'IBP'); this.showIbp(resp.data.deviceCode); break;
                    case 'BigScreen': this.$store.dispatch('training/setPrdType', ''); this.$store.dispatch('training/setRoles', 'BigScreen'); this.hideIbp(); break;
                    }
                }
                await this.getTrainDetail();
            } else {
                this.endViewLoading();
            }
        },
        async getTrainDetail() {
            try {
                await loadMapDataById(this.mapId);
                await this.$store.dispatch('training/setMapDefaultState');
            } catch (error) {
                this.$messageBox(this.$t('error.getMapDataFailed'));
                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 (!this.ibpShow) {
                this.drivingShow = false;
                this.panelShow = false;
                this.ibpShow = true;
                if (!deviceCode || !ibpData[deviceCode]) {
                    Message.warning({message: this.$t('error.ibpNoDraw'), duration: 0, showClose: true, type: 'error'});
                    return;
                } else {
                    Message.closeAll();
                }
                this.$refs.ibpPlate.show(deviceCode, this.ibpPart);
            }
        },
        hidepanel() {
            this.panelShow = false;
            this.drivingShow = true;
            this.ibpShow = false;
            this.$refs.Jl3dDrive.show(this.mapId, this.group);
        },
        hideIbp() {
            Message.closeAll();
            this.drivingShow = false;
            this.panelShow = true;
            this.ibpShow = false;
            if (this.$refs && this.$refs.ibpPlate) {
                this.$refs.ibpPlate.ibpDestroy();
            }
        },
        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 });
            });
        },
        async subscribe() {
            if (!this.$store.state.socket.roomIsSubscribe) {
                this.clearSubscribe();
                const header = { group: this.group || '', 'X-Token': getToken() };
                creatSubscribe(`${roomTopic}\/${this.group}`, header);
                await this.$store.dispatch('socket/setRoomSubscribe', true);
            }
        },
        async clearSubscribe() {
            clearSubscribe(`${roomTopic}\/${this.group}`);
            await this.$store.dispatch('socket/setRoomSubscribe', false);
        }
    }
};
</script>
<style>
    .main {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>