rt-sim-training-client/src/views/jointTraining/index.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('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') {  // 进入准备中
                    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('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;
                        }
                    }
                    await this.getTrainDetail(skinStyle);
                } else {
                    this.endViewLoading();
                }
            },
            async getTrainDetail(skinStyle) {
                try {
                    await loadMapData(skinStyle);
                    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;
            },
            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>