rt-sim-training-client/src/views/newMap/displayNew/index.vue

<template>
  <div class="main" :style="{width: canvasWidth+'px'}">
    <div v-show="panelShow" :panelShow="panelShow">
      <transition name="el-zoom-in-bottom">
        <map-system-draft ref="mapCanvas" @back="back" />
      </transition>

      <menu-exam v-if="isExam" ref="menuExam" :offset="offset" :group="group" />

      <menu-lesson v-if="isLesson" ref="lessonMenu" :offset="offset" :group="group" :training-obj="trainingObj" />

      <menu-demon
        v-if="isDemon"
        ref="menuDemon"
        :offset="offset"
        :group="group"
        :quest-id="questId"
        @tryTime="tryTime"
        @hidepanel="hidepanel"
        @devicemodel="devicemodel"
        @quitQuest="quitQuest"
        @showScheduling="showScheduling"
      />

      <menu-script v-if="isScript" ref="menuScript" :offset="offset" :group="group" />

      <menu-schema
        v-if="isDemon || isScript "
        ref="menuSchema"
        :offset="offset"
        :group="group"
        @switchMode="switchMode"
        @selectQuest="selectQuest"
      />

      <menu-system-time ref="menuSystemTime" :offset="offset" :right="right" :group="group" />
    </div>

    <!-- <Jl3d-Simulation v-show="simulationShow" ref="Jl3dSimulation" :panel-show="simulationShow" @showpanel="showpanel" /> -->
    <left-slider v-if="isLesson" @overallTranslation="overallTranslation" />
    <Jl3d-Device v-if="deviceShow" ref="Jl3dDevice" :panel-show="deviceShow" @showdevice="showdevice" />
    <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />

    <scheduling v-if="isShowScheduling" ref="scheduling" :group="group" />
  </div>
</template>

<script>
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
import MenuExam from '@/views/newMap/displayNew/menuExam';
import MenuLesson from '@/views/newMap/displayNew/menuLesson';
import MenuDemon from '@/views/newMap/displayNew/menuDemon';
import MenuSchema from '@/views/newMap/displayNew/menuSchema';
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
import MenuScript from '@/views/newMap/displayNew/menuScript';
import Scheduling from './demon/scheduling';
import { mapGetters } from 'vuex';
import { getTrainingDetail, getTrainingStepsDetail } from '@/api/jmap/training';
import { setGoodsTryUse } from '@/api/management/goods';
import { clearSimulation, loadScript, getSimulationInfoNew } from '@/api/simulation';
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
import { checkLoginLine } from '@/api/login';
import { loadNewMapDataByGroup } from '@/utils/loaddata';
import { EventBus } from '@/scripts/event-bus';
import Vue from 'vue';
import LeftSlider from '@/views/newMap/displayNew/LeftSlider';
import { getSessionStorage } from '@/utils/auth';

// 三维
// import Jl3dSimulation from '@/views/jlmap3d/simulation/jl3dsimulation';
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
import { getToken } from '@/utils/auth';
export default {
    name: 'DisplayDraft',
    components: {
        MenuExam,
        MenuLesson,
        MapSystemDraft,
        MenuDemon,
        MenuScript,
        MenuSchema,
        MenuSystemTime,
        // Jl3dSimulation,
        Jl3dDrive,
        Jl3dDevice,
        Scheduling,
        LeftSlider
    },
    props: {
        size: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    data() {
        return {
            mode: '',
            trainingObj: {},
            timeDemonNum: 0,
            checkLine: null,
            offset: 15,
            mouseNum: 1,
            ierval: null,
            mouseNumTime: 0,
            mapBox: null,
            mapBoxP: null,
            panelShow: true,
            simulationShow: false,
            drivingShow: false,
            deviceShow: false,
            questId: 0, 		// 加载任务的Id
            group: '',
            prdTypeMap: {
                '01': '01', 	// 现地 => 现地
                '02': '02', 	// 行调 => 行调
                '04': '02', 	// 司机 => 行调
                '05': ''		// 派班 => null
            }
        };
    },
    computed: {
        ...mapGetters([
            'canvasWidth'
        ]),
        ...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;
        },
        trainingId() {
            return this.$route.query.trainingId;
        },
        mapId() {
            return this.$route.query.mapId;
        },
        prdType() {
            return this.$route.query.prdType;
        },
        skinCode() {
            return this.$route.query.skinCode;
        },
        isLesson() {
            return this.mode === 'teach' || this.mode === 'manage';
        },
        isExam() {
            return this.mode === 'exam';
        },
        isDemon() {
            return this.mode === 'demon';
        },
        isScript() {
            return this.mode === 'script';
        },
        isDrive() {
            return this.prdType == '04';
        },
        isShowScheduling() {
            return this.$route.query.prdType == '05';
        }
    },
    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');

            if (this.trainingId) {
                getTrainingStepsDetail(this.trainingId, { group: this.group }).then(resp => {
                    this.trainingObj = resp.data;
                    this.$store.dispatch('training/setTrainingData', this.trainingObj);
                });
            }

        },
        '$store.state.map.mousemove': function (val) {
            this.mousemove();
        },
        '$store.state.socket.permissionOver': function () {
            this.$alert('用户权限已被收回', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    this.back();
                }
            });
        },
        'size.width': function(val) {
            this.setWindowSize();
        },
        '$store.state.app.windowSizeCount': function() {
            this.setWindowSize();
        },
        $route() {
            this.$nextTick(() => {
                this.initLoadData();
            });
        }
    },
    async created() {
        this.mode = this.$route.params.mode;
        this.group = this.$route.query.group || '';
    },
    async mounted() {
        EventBus.$on('clearCheckLogin', () => {
            this.clearCheckLogin();
        });

        await this.setWindowSize();
        await this.initLoadData();
    },
    async beforeDestroy() {
        await this.clearAllTimer();
        await this.quit();
        await this.$store.dispatch('training/reset');
        await this.$store.dispatch('map/mapClear');
        EventBus.$off('clearCheckLogin');
    },
    methods: {
        // 清除检查在线定时器
        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.mapBoxP) {
                    if (this.mouseNumTime >= 8) {
                        this.mapBoxP.style.cursor = 'none';
                        // for (let i = 0; i < this.mapBox.length; i++) {
                        //     console.log(this.mapBox);
                        //     this.mapBox[i].style.cursor = 'none';
                        // }
                    } else {
                        this.mapBoxP.style.cursor = '';
                        // for (let i = 0; i < this.mapBox.length; i++) {
                        //     this.mapBox[i].style.cursor = '';
                        // }
                    }
                }
            }, 1000);
        },
        mousemove() {
            this.mouseNum = 1;
        },
        setPosition() {
            this.$nextTick(() => {
                let offset = 15;
                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);
            });
        },
        // 加载仿真信息
        async loadSimulationInfo() {
            const resp = await getSimulationInfoNew(this.group);
            if (resp && resp.code == 200) {
                this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause);
                this.questId = Number(resp.data.questId) || 0;
            }
        },
        // 加载地图数据
        async initLoadData() {
            this.$store.dispatch('training/reset');
            try {
                await this.loadSimulationInfo();
                if (this.isDemon) {
                    await this.initLoadDemonData();
                } else if (this.isScript) {
                    await this.initLoadTaskData();
                } else {
                    await this.initLoadLessonOrExamData();
                }
                this.checkLoginLineTimer();
                this.checkMouseStatusTimer();
            } catch (error) {
                this.$messageBox(`初始化失败: ${error.message}`);
                this.endViewLoading();
            }
        },
        // 课程和考试系统
        async initLoadLessonOrExamData() {
            this.$store.dispatch('training/end', null);
            this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式

            if (parseInt(this.trainingId)) {
                // 设置地图数据
                // 设置实训数据
                const resp = await getTrainingDetail(this.trainingId);
                if (resp && resp.code == 200) {
                    const detail = resp.data;
                    await this.$store.dispatch('training/setPrdType', this.prdTypeMap[detail.prdType]);
                    await this.loadMapDataById(this.mapId);
                } else {
                    this.$messageBox(`获取实训步骤数据失败`);
                    this.endViewLoading();
                }
            } else {
                this.endViewLoading();
            }
        },
        // 仿真系统
        async initLoadDemonData() {
            this.$store.dispatch('training/end', TrainingMode.NORMAL);
            this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
            this.$store.dispatch('training/setPrdType', this.prdTypeMap[this.prdType]);

            if (parseInt(this.mapId)) {
                await this.loadNewMapDataByGroup(this.group);
            } else {
                this.endViewLoading();
            }
        },
        // 任务录制系统
        async initLoadTaskData() {
            this.$store.dispatch('training/end', TrainingMode.NORMAL);
            this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
            this.switchMode('01');

            if (parseInt(this.mapId)) {
                await this.loadNewMapDataByGroup(this.group);
            } else {
                this.endViewLoading();
            }
        },
        // 选择脚本
        async selectQuest(row, id, mapLocation, roleName) {
            try {

                const res = await loadScript(row.id, id, this.group);
                if (res && res.code == 200) {
                    this.questId = parseInt(row.id);
                    if (mapLocation) {
                        const newMapLocation = {'offsetX': mapLocation.x, 'offsetY': mapLocation.y, 'scaleRate': mapLocation.scale};
                        Vue.prototype.$jlmap.setOptions(newMapLocation);
                    }
                }
                if (this.$refs.menuDemon) {
                    await this.$refs.menuDemon.initLoadPage();
                }

                if (this.$refs.menuScript) {
                    await this.$refs.menuScript.initLoadPage();
                }

            } catch (error) {
                this.$messageBox(error.message);
            }
        },
        // 退出脚本
        async quitQuest() {
            this.questId = 0;
            this.$store.dispatch('scriptRecord/updateSimulationPause', false);
        },
        // 通过id加载地图数据
        async loadNewMapDataByGroup(group) {
            try {
                await loadNewMapDataByGroup(group);
                await this.$store.dispatch('training/setMapDefaultState');
            } catch (error) {
                this.$messageBox(`获取地图数据失败: ${error.message}`);
                this.endViewLoading();
            }
        },

        // 销毁仿真
        async quit() {
            await clearSimulation(this.group);
            await this.$store.dispatch('training/over');
        },
        // 仿真错误时，被动退出时调用
        async back() {
            if (this.isExam) {
                await this.$refs.menuExam.back();
            } else if (this.isLesson) {
                await this.$refs.lessonMenu.back();
            } else if (this.isDemon) {
                await this.$refs.menuDemon.back();
            } else if (this.isScript) {
                await this.$refs.menuScript.back();
            }
        },
        // 设置使用时间
        async tryTime(param) {
            const data = {
                goodsId: param.goodsId,
                time: param.time
            };
            if (data.goodsId) {
                await setGoodsTryUse(data);
            }
        },
        switchMode(prdType) {
            this.$store.dispatch('training/setPrdType', prdType);
        },
        hidepanel() {
            if (this.isDrive) {
                this.panelShow = false;
                this.drivingShow = true;
                this.$refs.Jl3dDrive.show(this.mapId, this.group);
            } else {
                const routeData = this.$router.resolve({
                    path:'/jlmap3d/sandbox',
                    query:{
                        mapid:this.mapId,
                        group:this.group,
                        token:getToken(),
                        project:getSessionStorage('project')
                    }
                });
                window.open(routeData.href, '_blank', 'noopener noreferrer');
            }
        },
        devicemodel() {
            if (this.deviceShow == false) {
                this.deviceShow = true;
            } else {
                this.deviceShow = false;
            }

        },
        showScheduling() {
            this.$refs.scheduling.doShow();
        },
        showpanel() {
            this.panelShow = true;
            this.simulationShow = false;
        },
        showdriving() {
            this.panelShow = true;
            this.drivingShow = false;
        },
        setWindowSize() {
            this.$nextTick(() => {
                const width = this.size ? this.size.width : this.width;
                const height = this.size ? this.size.height : this.height;

                this.$store.dispatch('config/resize', { width, height });

                this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
            });
        },
        overallTranslation(flag) {
            const panel = document.getElementById('panel');
            this.$refs.lessonMenu.handelGroupButtonTranslate(flag);
            if (flag) {
                panel.setAttribute('style', 'transform: translateX(400px)');
            } else {
                panel.setAttribute('style', '');
            }
        }
    }
};
</script>
<style>
    .main {
        z-index: 10;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;

        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
</style>