rt-sim-training-client/src/views/designPlatform/trainingPreview.vue

<template>
  <div class="train">
    <div v-show="maskOpen" class="trainMask" />
    <jlmap-visual ref="jlmapVisual" />
    <menu-demon ref="menuDemon" />
    <voice-chat-box v-if="$route.query.lineCode == '16'" ref="chatbox" :group="group" :user-role="userRole" />
    <chat-box v-else ref="chatbox" :group="group" :user-role="userRole" />
    <div class="trainBack">
      <el-button-group>
        <el-button v-if="!starting" type="success">开始</el-button>
        <el-button v-if="starting" type="danger">结束</el-button>
        <el-button type="primary" @click="back">返回</el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
import JlmapVisual from '@/views/newMap/jlmapNew/index';
import {loadMapDataById } from '@/utils/loaddata';
import { clearSimulation } from '@/api/simulation';
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
import { getToken } from '@/utils/auth';
import chatBox from '@/views/newMap/chatView/chatBox.vue';
import VoiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
import MenuDemon from './demonMenu.vue';
// import LeftSlider from './leftSlider';
// import TipTrainingDetail from './tipTrainingDetail';
export default {
    name: 'TrainingDesign',
    components: {
        JlmapVisual,
        MenuDemon,
        chatBox,
        VoiceChatBox
    },
    props: {
        widthLeft: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            maskOpen: false,
            offsetBottom: 0,
            trainingObj: null,
            starting: false

        };
    },
    computed: {
        mapId() {
            return this.$route.query.mapId;
        },
        width() {
            return this.$store.state.app.width;
        },
        height() {
            return this.$store.state.app.height;
        },
        group() {
            return this.$route.query.group;
        },
        userRole() {
            let role = 'AUDIENCE';
            switch (this.$store.state.training.prdType) {
            case '02': { role = 'DISPATCHER'; break; }
            case '01': { role = 'STATION_SUPERVISOR'; break; }
            case '04': { role = 'DRIVER'; break; }
            case '05': { role = 'DEPOT_DISPATCHER'; break; }
            default: { role = 'AUDIENCE'; break; }
            }
            return role;
        }
    },
    watch: {
        $route() {
            this.$nextTick(() => {
                this.initLoadData();
            });
        },
        '$store.state.app.windowSizeCount': function() { // 窗口缩放
            this.setWindowSize();
        },
        '$store.state.map.mapViewLoadedCount':function() {
            this.$store.dispatch('map/setTrainWindowShow', false);
            if (this.$route.query.group && !this.$route.path.includes('displayIscs')) {
                this.subscribe();
            }
        },
        '$store.state.socket.equipmentStatus': function (val) {
            if (val.length && this.$route.query.group) {
                this.statusMessage(val);
            }
        },
        '$store.state.socket.simulationOver':function(val) {
            this.backOut();
        }
    },
    async beforeDestroy() {
        await this.$store.dispatch('map/mapClear');
        this.$store.dispatch('training/setPrdType', '');
    },
    mounted() {
        this.$store.dispatch('training/setPrdType', '01');
        this.setWindowSize();
        this.initLoadData();
    },
    methods: {
        initLoadData() { // 加载地图数据
            if (this.$route.query.group) {
                loadMapDataById(this.mapId, 'simulation');
            } else {
                this.$store.dispatch('training/changeMode', { mode: null });
                loadMapDataById(this.mapId, 'preview');
            }
        },
        overallTranslation(flag) {
            const panel = document.getElementById('leftSlider');
            if (flag) {
                panel.style.transform = 'translateX(400px)';
            } else {
                panel.style.transform = '';
            }
        },
        async statusMessage(list) {
            await this.$store.dispatch('training/updateMapState', list);
            await this.$store.dispatch('socket/setEquipmentStatus');
        },
        setWindowSize() {
            const width = this.width;
            const height = this.height;
            this.$store.dispatch('config/resize', { width, height });
        },
        async back() {
            if (this.$route.query.group) {
                await clearSimulation(this.$route.query.group);
                this.clearSubscribe();
            }
            this.$store.dispatch('training/over').then(() => {
                history.go(-1);
            });
        },
        backOut() {
            if (this.$route.query.projectDevice) {
                this.$store.dispatch('LogOut').then(() => {
                    location.reload();
                });
            }
        },
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
            creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
            // await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
        }
    }
};
</script>
<style lang="scss" scoped>
    .train {
        width: 100%;
		overflow: hidden;
        position: relative;
    }
	.trainMask{
        opacity: 1;
        background: #000;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
	.trainBack {
        position: absolute;
        float: right;
        right: 15px;
        bottom: 15px;
		z-index: 19;
    }
</style>