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

<template>
  <div class="main" :style="{width: canvasWidth+'px'}">
    <Jl3d-Drive v-show="drivingShow" ref="Jl3dDrive" :panel-show="drivingShow" @showdriving="showdriving" />
    <Jl3d-MaintainerSelect v-if="jl3dmaintainershow" :is-admin="isAdmin" @back="back" @handlerMemberManage="handlerMemberManage" />
    <ibp-plate v-show="ibpShow" ref="ibpPlate" @hideIbp="hideIbp" />
    <template v-show="panelShow" :panelShow="panelShow">
      <transition name="el-zoom-in-bottom">
        <map-system-draft v-show="!specialDispatch" ref="mapCanvas" @back="back" />
      </transition>
      <div v-if="lineCode === '14'" v-show="prdType=='02'">
        <ba-si-di ref="baSiDi" @handleDialogShow="handleDialogShow" />
        <rps-dialog ref="rpsDialog" :is-run-plan="isRunPlan" :train-list="trainList" />
        <tro-dialog ref="troDialog" :is-run-plan="isRunPlan" :train-list="trainList" :station-list="stationList" />
        <car-pack ref="carPack" />
        <tro-detail ref="troDetail" :is-run-plan="isRunPlan" :train-list="trainList" :station-list="stationList" @goTroDialog="troClick" />
        <tra-dialog ref="traDialog" @openTrainTrunkDetail="openTrainTrunkDetail" />
        <ttl-dialog ref="ttlDialog" />
        <tmt-dialog ref="tmtDialog" />
        <atr-dialog ref="atrDialog" />
        <train-trunk-detail ref="trainTrunkDetail" @openTra="openTra" />
      </div>
      <div v-if="lineCode === '16'" v-show="prdType === '02'&& !showMap">
        <dispatcher-station ref="dispatcherStation" @changeShowMap="changeShowMap" />
      </div>
      <menu-demon-joint
        ref="demonMenu"
        :group="group"
        :offset="offset"
        :offset-bottom="offsetBottom"
        :data-error="dataError"
        :user-role="userRole"
        :is-admin="isAdmin"
        :device-code="deviceCode"

        @passflow="passflow"
        @faultdevice="faultdevice"
        @getUserRole="getUserRole"
        @hidepanel="hidepanel"
        @devicemodel="devicemodel"

        @hidejl3dcctv="hidejl3dcctv"
        @runPlanLoadShow="runPlanLoadShow"
        @handlerMemberManage="handlerMemberManage"
      />
      <menu-demon-schema
        ref="menuSchema"
        :group="group"
        :offset="offset"
        :user-role="userRole"
        :is-admin="isAdmin"
        :show-station="showStation"
        :station-list="centralizedstationList"
        :device-code="deviceCode"
        :show-select-station="showSelectStation"
        :data-error="dataError"
        @runPlanLoadShow="runPlanLoadShow"
        @faultChooseShow="faultChooseShow"
        @switchStationMode="switchStationMode"
        @changeShowMap="changeShowMap"
      />
      <join-fault-choose ref="faultChoose" :group="group" :offset="offset" />
      <join-run-plan-Load ref="runPlanLoad" :group="group" />
      <menu-system-time v-show="!specialDispatch" ref="menuSystemTime" :offset="offset" :group="group" />
      <menu-train-list v-if="prdType=='02'" @setCenter="setCenter" />
      <members-manage ref="membersManage" :is-admin="isAdmin" @addSimulationMember="addSimulationMember" /> <!-- 成员管理 -->
      <add-member ref="addMember" :station-list="stationList" />
      <ticket-info v-if="lineCode === '16'" ref="ticketInfo" />
      <Jl3d-Device
        v-if="deviceif"
        v-show="deviceShow"
        ref="Jl3dDevice"
        :panel-show="deviceShow"
        @closedevice3dview="devicemodel"
      />
    </template>
  </div>

</template>

<script>
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
import MenuDemonJoint from './menuDemon';
import MenuDemonSchema from './menuSchema';
import JoinFaultChoose from '@/views/newMap/displayNew/demon/faultChoose';
import JoinRunPlanLoad from '@/views/newMap/displayNew/demon/runPlanLoad';
import menuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
import IbpPlate from '@/views/ibp/ibpsystem/index';
import MenuTrainList from './menuTrainList';
import { mapGetters } from 'vuex';
import { OperateMode, TrainingMode } from '@/scripts/ConstDic';
import { loadMapDataById } from '@/utils/loaddata';
import { clearSimulation, getSimulationInfoNew, getSimulationUserInfo } from '@/api/simulation';
import { getSessionStorage } from '@/utils/auth';
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
import Jl3dMaintainerSelect from '@/views/jlmap3d/maintainer/jl3dmaintainerselect';
import { EventBus } from '@/scripts/event-bus';
import { timeFormat } from '@/utils/date';
import { Message } from 'element-ui';
import { getToken } from '@/utils/auth';
import MembersManage from './memberManage/membersManage';
import AddMember from './memberManage/addMember';
import BaSiDi from '@/views/newMap/displayBaSiDi/baSiDiNew';
import RpsDialog from '@/views/newMap/displayBaSiDi/rps';
import TroDialog from '@/views/newMap/displayBaSiDi/tro';
import CarPack from '@/views/newMap/displayBaSiDi/carPack';
import TroDetail from '@/views/newMap/displayBaSiDi/troDetail';
import TraDialog from '@/views/newMap/displayBaSiDi/tra';
import TtlDialog from '@/views/newMap/displayBaSiDi/ttl';
import TmtDialog from '@/views/newMap/displayBaSiDi/tmt';
import AtrDialog from '@/views/newMap/displayBaSiDi/atr';
import TrainTrunkDetail from '@/views/newMap/displayBaSiDi/trainTrunkDetail';
import DispatcherStation from './dispatcherStation';
import TicketInfo from '../trainTicket/ticketInfo';
import Vue from 'vue';

export default {
    name: 'JointTrainingDraft',
    components: {
        MapSystemDraft,
        MenuDemonJoint,
        MenuDemonSchema,
        JoinFaultChoose,
        JoinRunPlanLoad,
        MenuTrainList,
        menuSystemTime,
        Jl3dDrive,
        Jl3dMaintainerSelect,
        IbpPlate,
        MembersManage,
        AddMember,
        Jl3dDevice,
        BaSiDi,
        RpsDialog,
        TroDialog,
        CarPack,
        TroDetail,
        TraDialog,
        TtlDialog,
        TmtDialog,
        AtrDialog,
        TrainTrunkDetail,
        DispatcherStation,
        TicketInfo
    },
    data() {
        return {
            // trainingObj: {},
            // timeDemonNum: 0,
            offset: 10,
            offsetBottom: 15,
            userRole: '',
            deviceCode: '',
            group: '',
            mapId: '',
            lineCode: '',
            simulationShow: false,
            drivingShow: false,
            jl3dmaintainershow:false,
            ibpShow: false,
            panelShow: true,
            ibpPart: '',
            showStation: '',
            centralizedstationList: [],
            showSelectStation: false, // 宁波线集中站 显示
            mapViewLoadedOver: false,
            dataError: false,
            isAdmin: false,
            deviceif:false,
            deviceShow: true,
            centralizedStationMap: {},
            selfJmap: null,
            showMap: false
        };
    },
    computed: {
        ...mapGetters([
            'canvasWidth'
        ]),
        ...mapGetters('map', [
            'map',
            'bigScreenConfig',
            'stationList',
            'sectionList',
            'signalList',
            'trainList',
            'trainWindowList'
        ]),
        width() {
            return this.$store.state.app.width;
        },
        height() {
            return this.$store.state.app.height;
        },
        userId() {
            return this.$store.state.user ? this.$store.state.user.id : '';
        },
        prdType() {
            return this.$store.state.training.prdType;
        },
        project() {
            return getSessionStorage('project');
        },
        specialDispatch() {
            return (this.lineCode === '14' && this.$store.state.training.prdType === '02') || (this.lineCode === '16' && this.$store.state.training.prdType === '02' && !this.showMap);
        },
        isRunPlan() {
            return this.$store.state.training.started;
        }
    },
    watch: {
        '$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
            this.setPosition();
        },
        '$store.state.menuOperation.selectedCount':function(em) {
            const device = this.$store.state.menuOperation.selected;
            if (device && device._type === 'Station' && this.$store.state.menuOperation.subType === 'troButton') {
                this.$refs.troDialog.doClose();
                this.$refs.troDetail.doShow(device.code);
            }
        },
        '$store.state.training.prdType': function (prdType) {
            this.setPosition();
            if (prdType == '01') {
                this.showSelectStation = true;
                this.cancelBigScreenMode();
            } else if (prdType == '02') {
                this.showSelectStation = false;
                this.cancelBigScreenMode();
            } else if (prdType == '07') { // 大屏
                this.setBigScreenMode();
            } else {
                this.cancelBigScreenMode();
            }
        },
        '$store.state.map.mapDataLoadedCount':function(val) {
            const roleList = ['STATION_SUPERVISOR', 'STATION_ASSISTANT'];
            if (roleList.includes(this.$store.state.training.roles)) {
                this.stationRoleShow(this.showStation);
            }
        },
        '$store.state.map.mapViewLoadedCount': function () { // 地图视图加载完成标识
            this.mapViewLoadedOver = true;
            this.showSelectStation && this.setShowStation(this.showStation);
            // this.initMemberUserInfo();
            if (this.$route.query.type === 'VR_PSD') {
                this.deviceif = true;
                this.deviceShow = true;
            }
            if (this.$route.query.type === 'DRIVE') {
                this.$store.dispatch('training/setPrdType', '04');
                this.$store.dispatch('training/setRoles', 'DRIVER');
                this.hidepanel();
            }
        },
        // '$store.state.socket.memberChangeCount': function () { // 仿真成员变更
        //     this.initMemberUserInfo();
        // },
        '$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 clearSimulation(this.group);
                    this.$router.go(-1);
                }
            });
        },
        '$store.state.app.windowSizeCount': function() { // 窗口变化
            this.setWindowSize();
            this.setPosition();
        },
        $route() {
            this.initLoadData();
        },
        '$store.state.map.map': function (map) {
            if (map) {
                this.setCentralizedstationList(map); // 获取集中站列表
            }
        },
        '$store.state.socket.simulationRoleList':function(list) {
            if (list && list.length) { // 人员变化监控
                this.checkRoleChange(list);
            }
        },
        '$store.state.socket.ticketInfo': function(val) {
            if (val) {
                this.$refs.ticketInfo.doShow(val);
            }
        }
    },
    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();
        this.selfJmap = Vue.prototype.$jlmap;
    },
    async beforeDestroy() {
        await this.$store.dispatch('training/end', null);
        await this.$store.dispatch('training/reset');
        await this.$store.dispatch('map/mapClear');
        await this.$store.dispatch('menuOperation/resetRequestList');
        this.$store.dispatch('training/setUserRole', '');
        Message.closeAll();
    },
    methods: {
        // 设置菜单和工具栏位置
        setPosition() {
            this.$nextTick(() => {
                this.offset = 10;
                this.offsetBottom = 15;
                const menuBar = document.getElementById('menuBar');
                const menuTool = document.getElementById('menuTool');
                const menuBottom = document.getElementById('menuButton');
                if (menuBar) {
                    this.offset = (menuBar.offsetHeight || 0) + 15;
                }
                if (menuTool) {
                    this.offset = (menuTool.offsetHeight || 0) + 15;
                }
                const buttonWidth = this.width - 1200;
                if (menuBottom && buttonWidth < 780) {
                    this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
                }
                if (this.$route.query.lineCode === '16' && this.$store.state.training.prdType === '02') {
                    this.offset = 35;
                }
            });
        },
        // 结束加载状态
        endViewLoading(isSuccess) {
            if (!isSuccess) {
                this.$store.dispatch('map/mapClear');
            }
            this.$nextTick(() => {
                EventBus.$emit('viewLoading', false);
            });
        },
        setCenter(code) {
            this.$jlmap.setCenter(code);
        },
        // 加载地图数据
        initLoadData() {
            const width = document.documentElement.clientWidth;
            const height = document.documentElement.clientHeight + 200;
            this.$store.dispatch('config/resize', { width, height });

            try {
                this.loadSimulationInfo();
                this.initLoadDemonData();
            } catch (error) {
                this.$messageBox( this.$t('error.initializationFailed') + error.message);
                this.endViewLoading();
            }
        },
        // initMemberUserInfo() {
        //     // 获取仿真成员列表
        //     getSimulationMemberList(this.$route.query.group).then(resp => {
        //         this.$store.dispatch('training/setMemberList', { memberList: resp.data, userId: this.$store.state.user.id });
        //     }).catch(() => {
        //         this.$messageBox('获取仿真成员列表失败！');
        //     });
        //     getAllSimulationUser(this.$route.query.group).then(resp => {
        //         this.$store.dispatch('training/setSimulationUserList', resp.data);
        //     }).catch(() => {
        //         this.$messageBox('获取所有仿真用户失败！');
        //     });
        // },
        devicemodel() {
            if (this.deviceif == false) {
                this.deviceif = true;
            } else {
                if (this.deviceShow == false) {
                    this.deviceShow = true;
                } else {
                    this.deviceShow = false;
                }
            }

        },
        /* 地图根据仿真group获取仿真基础信息 */
        async loadSimulationInfo() {
            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.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));// 设置仿真时间
                // this.$store.dispatch('training/countTime');// 前端仿真时间开始跑秒
                this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
                if (resp.data.planRunning) {
                    this.$store.dispatch('training/start');// 仿真开始按计划行车
                } else {
                    this.$store.dispatch('training/over');// 仿真按计划行车结束
                }
                this.$store.dispatch('training/changeMode', {mode:TrainingMode.NORMAL}); // 设置教学模式以便操作顺利执行
                this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
            } else if (resp && resp.code == 200 && resp.data && resp.data.dataError) {
                this.dataError = true;
                this.$messageBox('此地图数据正在维护中,无法运行！');
            }
        },
        /* 获取个人仿真信息*/
        async getUserRole() {
            const res = await getSimulationUserInfo(this.group);
            const data = res.data || {};
            this.userRole = data.type || 'AUDIENCE';
            this.deviceCode = data.deviceCode;
            this.$store.dispatch('training/setRoleDeviceCode', data.deviceCode);
            this.isAdmin = data.admin;

            const deviceVO = JSON.parse(getSessionStorage('projectDevice'));
            if (deviceVO && deviceVO.type === 'VR_IBP') {
                const config = JSON.parse(deviceVO.config);
                this.ibpPart = config.part.toLowerCase();
                this.showIbp(this.deviceCode);
            } else {
                this.hideIbp();
            }
            return res;
        },
        // 仿真系统
        async initLoadDemonData() {
            if (this.lineCode) {
                let resp = {data: {}};
                resp = await this.getUserRole();
                if (resp && resp.code == 200) {
                    this.setSimulationPrdType(resp.data.deviceCode);
                }
                loadMapDataById(this.mapId, 'simulation');
            } else {
                this.endViewLoading();
            }
        },
        handleDialogShow(type) {
            this.$refs[type].doShow();
        },
        stationRoleShow(deviceCode) {
            if (this.lineCode === '14') {
                const list = [];
                const mapDevice = this.$store.state.map.mapDevice;
                this.$jlmap.setMap(this.$store.state.map.map, this.$store.state.map.mapDevice, {routeData:this.$store.state.map.routeData, autoReentryData: this.$store.state.map.autoReentryData});
                for (const key in mapDevice) {
                    list.push(mapDevice[key]);
                }
                this.$jlmap.updateShowMode(list, '02');
            }
            if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
                const picture = this.$store.state.map.map.pictureList.find(picture => picture.stationCode === deviceCode && picture.type === 'chainStation');
                if (picture) {
                    const mapDevice = this.$store.state.map.mapDevice;
                    const list = [];
                    const deviceList = [];
                    for (const key in mapDevice) {
                        list.push(mapDevice[key]);
                        deviceList.push(key);
                    }
                    this.$jlmap.updateShowStation(list, '');
                    this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
                    this.$jlmap.updatePicture(deviceList);
                    this.$jlmap.updateTransform(picture.scaling, picture.origin);
                    this.$store.dispatch('map/setShowCentralizedStationCode', this.centralizedStationMap[deviceCode]);
                } else {
                    this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
                    this.mapViewLoadedOver && this.switchStationMode(deviceCode);
                }
            } else {
                this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
                this.mapViewLoadedOver && this.switchStationMode(deviceCode);
            }
        },
        // 设置prdType和role
        setSimulationPrdType(deviceCode) {
            // Dispatcher 行调 STATION_SUPERVISOR 车站 Audience 观众 Driver 司机 MAINTAINER 通号
            this.showStation = '';
            let tempData;
            let dataZoom;
            switch (this.userRole) {
            case 'DISPATCHER':
                this.$store.dispatch('training/setPrdType', '02');
                this.$store.dispatch('training/setRoles', 'DISPATCHER');
                this.hideIbp();
                this.drivingShow = false;
                // this.changePrdType('02');
                this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
                this.mapViewLoadedOver && this.setShowStation('');
                this.jl3dmaintainershow = false;
                break;
            case 'STATION_SUPERVISOR':
                if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
                this.$store.dispatch('training/setPrdType', '01');
                this.$store.dispatch('training/setRoles', 'STATION_SUPERVISOR');
                this.$refs.menuSchema.chiShowStation = deviceCode;
                this.showStation = deviceCode;
                // this.changePrdType('01');
                this.stationRoleShow(deviceCode);
                this.jl3dmaintainershow = false;
                this.drivingShow = false;
                break;
            case 'STATION_ASSISTANT':
                if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
                this.$store.dispatch('training/setPrdType', '01');
                this.$store.dispatch('training/setRoles', 'STATION_ASSISTANT');
                this.$refs.menuSchema.chiShowStation = deviceCode;
                this.showStation = deviceCode;
                this.stationRoleShow(deviceCode);
                this.jl3dmaintainershow = false;
                this.drivingShow = false;
                break;
            case 'DEPOT_DISPATCHER':
                this.$store.dispatch('training/setPrdType', '09');
                this.$store.dispatch('training/setRoles', 'DEPOT_DISPATCHER');
                this.$refs.menuSchema.chiShowStation = deviceCode;
                this.showStation = deviceCode;
                this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
                if (this.mapViewLoadedOver) {
                    const showStation = this.centralizedStationMap[deviceCode];
                    const list = [];
                    const mapDevice = this.$store.state.map.mapDevice;
                    for (const key in mapDevice) {
                        list.push(mapDevice[key]);
                    }
                    this.$jlmap.updateShowStation(list, showStation);
                }
                tempData = this.$store.state.map.map.displayList.find(item => { return item.stationCodeList.includes(deviceCode); });
                dataZoom = { offsetX: tempData.offsetX, offsetY: tempData.offsetY, scaleRate: tempData.scaleRate };
                this.$store.commit('map/setDataZoom', dataZoom);
                this.$jlmap.setDepot(dataZoom);
                this.jl3dmaintainershow = false;
                this.drivingShow = false;
                break;
            case 'DRIVER':
                this.$store.dispatch('training/setPrdType', '04');
                this.$store.dispatch('training/setRoles', 'DRIVER');
                this.jl3dmaintainershow = false;
                this.hidepanel();
                this.mapViewLoadedOver && this.setShowStation('');
                break;
            case 'MAINTAINER':
                this.$store.dispatch('training/setPrdType', '');
                this.$store.dispatch('training/setRoles', 'MAINTAINER');
                this.hideIbp();
                this.jl3dmaintainershow = true;
                this.mapViewLoadedOver && this.setShowStation('');
                this.drivingShow = false;
                break;
            case 'RAIL_CTC':
                this.$store.dispatch('training/setPrdType', '10');
                this.$store.dispatch('training/setRoles', 'RAIL_CTC');
                this.$refs.menuSchema.chiShowStation = deviceCode;
                this.showStation = deviceCode;
                this.$jlmap.amendDevice([...this.sectionList, ...this.signalList, ...this.trainWindowList]);
                this.mapViewLoadedOver && this.switchStationMode(deviceCode);
                this.jl3dmaintainershow = false;
                this.drivingShow = false;
                break;
            default:
                this.$store.dispatch('training/setPrdType', '');
                this.$store.dispatch('training/setRoles', 'AUDIENCE');
                this.jl3dmaintainershow = false;
                this.drivingShow = false;
                this.hideIbp();
                this.mapViewLoadedOver && this.setShowStation('');
            }
            if (this.$route.query.type === 'ILW') {
                this.$store.dispatch('training/setPrdType', '');
                this.$store.dispatch('training/setRoles', 'AUDIENCE');
                this.jl3dmaintainershow = false;
                this.drivingShow = false;
                this.hideIbp();
            }
        },
        async getTrainDetail() {
            try {
                // await loadNewMapDataByGroup(this.group);
                await loadMapDataById(this.mapId, 'Group');
                await this.$store.dispatch('training/setMapDefaultState');
                // if (this.userRole == 'MAINTAINER') {
                //     this.jl3dmaintainershow = true;
                // }
            } catch (error) {
                this.$messageBox(this.$t('error.getMapDataFailed'));
                this.endViewLoading();
            }
        },
        back() {
            this.$refs.demonMenu.back();
        },
        runPlanLoadShow() { // 运行图加载
            this.$refs.runPlanLoad.doShow();
        },
        faultChooseShow() { // 故障列表加载
            this.$refs.faultChoose.doShow();
        },
        passflow() {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/passengerflow',
                query:{
                    mapid:this.mapId,
                    group:this.group,
                    project: this.project,
                    lineCode:this.lineCode,
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank');
        },
        faultdevice() {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/maintainer',
                query:{
                    mapid:this.mapId,
                    group:this.group,
                    project: this.project,
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank');
        },
        showdriving() {
            this.panelShow = true;
            this.drivingShow = false;
            this.ibpShow = false;
        },
        showIbp(deviceCode) {
            this.drivingShow = false;
            this.panelShow = false;
            this.ibpShow = true;
            this.$refs.ibpPlate.show(deviceCode, this.ibpPart);
        },
        hidejl3dcctv() {
            const routeData = this.$router.resolve({
                path:'/jlmap3d/passengerflow',
                query:{
                    mapid:this.mapId,
                    group:this.group,
                    project: this.project,
                    noPreLogout: true
                }
            });
            window.open(routeData.href, '_blank');
        },
        hidepanel() { // 司机视角
            if (this.$store.state.training.prdType == '04') {
                this.panelShow = false;
                this.drivingShow = true;
                this.$refs.Jl3dDrive.show(this.mapId, this.group, 34, 'isTraining', this.deviceCode);
            } else {
                const routeData = this.$router.resolve({
                    path:'/jlmap3d/sandbox',
                    query:{
                        mapid: this.mapId,
                        group: this.group,
                        token: getToken(),
                        project: this.project,
                        noPreLogout: true
                    }
                });
                window.open(routeData.href, '_blank');
            }
        },

        hideIbp() {
            Message.closeAll();
            this.jl3dmaintainershow = 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.$store.dispatch('config/resize', { width: this.width, height: this.height });
            if (this.prdType == '07') {
                this.setBigScreenMode();
            }
        },
        switchStationMode(stationCode) {
            this.showStation = this.centralizedStationMap[stationCode];
            this.setShowStation(this.showStation);
        },
        // changePrdType(val) {
        //     const nameList = Object.keys(this.$store.state.map.map || {});
        //     let list = []; let showMode = '';
        //     nameList.forEach(item => {
        //         if (item !== 'skinVO') {
        //             const data = this.$store.state.map.map[item];
        //             if (data && data.constructor === Array) {
        //                 list = [...list, ...data];
        //             }
        //         }
        //     });
        //
        //     if (val === '01') {
        //         showMode = '03';
        //     } else if (val === '02') {
        //         showMode = '02';
        //     }
        //
        // 	this.$jlmap.updatePrdType(list, showMode, val);
        // },
        setShowStation(stationCode) {
            const showStation = this.centralizedStationMap[stationCode];
            const list = [];
            const mapDevice = this.$store.state.map.mapDevice;
            for (const key in mapDevice) {
                list.push(mapDevice[key]);
            }
            this.$jlmap.updateShowStation(list, showStation);
            this.$jlmap.setCenter(showStation);
        },
        setCentralizedstationList(map) {
            this.centralizedstationList = [];
            (map.stationList || []).forEach(item => {
                if (item.centralized) {
                    this.centralizedstationList.push({value: item.code, name: item.name});
                    this.centralizedStationMap[item.code] = item.code;
                    item.chargeStationCodeList && item.chargeStationCodeList.length && item.chargeStationCodeList.forEach(ele => {
                        this.centralizedStationMap[ele] = item.code;
                    });
                }
            });
            if (this.centralizedstationList.length && !this.showStation) {
                this.showStation = this.centralizedstationList[0].value;
            }
        },
        setBigScreenMode() {
            if (this.bigScreenConfig.bigScreenSplitConfig.length) {
                const offsetList = this.bigScreenConfig.offsetList;
                const width = this.bigScreenConfig.width;
                const height = this.bigScreenConfig.height;
                const size = {
                    width: this.$store.state.app.width * width,
                    height: (this.$store.state.app.height - 60) * height,
                    offsetY: 60,
                    list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
                    offsetList: offsetList
                };
                this.$jlmap.off('zoom'); // 禁止缩放
                this.$jlmap.setUpdateScreen(size);
            }
        },
        cancelBigScreenMode() {
            this.$jlmap.on('zoom'); // 激活缩放
            this.$jlmap.setRevoverBigScreen(); // 设置默认缩放 位移
        },
        handlerMemberManage() {
            this.$refs.membersManage.doShow();
        },
        addSimulationMember() {
            this.$refs.addMember.doShow();
        },
        troClick() {
            this.$refs.troDialog.doShow();
        },
        openTrainTrunkDetail(index) {
            this.$refs.trainTrunkDetail.doShow(index);
        },
        changeShowMap(flag) {
            this.showMap = flag;
        },
        openTra() {
            this.$refs.traDialog.doShow();
        },
        checkRoleChange(data) {
            data.forEach(item => {
                if (item.messageType === 'KICK_OUT' && item.userId == this.userId) {
                    this.$messageBox('您已经被请离房间！');
                    this.$refs.demonMenu.back();
                } else if (item.messageType === 'PLAY_CHANGE' && item.userId == this.userId) {
                    this.userRole = item.type || 'AUDIENCE';
                    this.$store.dispatch('training/setRoleDeviceCode', item.deviceCode);
                    this.$store.dispatch('training/setUserRole', this.userRole);
                    this.deviceCode = item.deviceCode;
                    this.setSimulationPrdType(this.centralizedStationMap[item.deviceCode]);
                }
            });
        }
    }
};
</script>
<style scoped lang="scss" rel="stylesheep/scss">
	.main {
		display: block;
		width: 100% !important;
		height: 100%;
		overflow: hidden;
		position: relative;
		background: #000000;
	}
</style>