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

<template>
  <div class="bigScreen">
    <div v-show="maskOpen" class="bigScreenMask" />
    <jlmap-visual ref="jlmapVisual" />
    <wh-train-list v-if="prdType=== '10'" ref="whTrainList" />
    <div v-show="disPlay" class="bigScreenBack">
      <el-button-group>
        <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 { mapGetters } from 'vuex';
import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
import { getToken } from '@/utils/auth';
import { TrainingMode } from '@/scripts/ConstDic';
import WhTrainList from './whTrainList';

export default {
    name: 'BigScreen',
    components: {
        JlmapVisual,
        WhTrainList
    },
    props: {
        widthLeft: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            maskOpen: false,
            disPlay: false
        };
    },
    computed: {
        mapId() {
            return this.$route.params.mapId;
        },
        height() {
            return this.$store.state.app.height - 50 - 40;
        },
        ...mapGetters('map', [
            'bigScreenConfig'
        ]),
        ...mapGetters('config', [
            'canvasId'
        ]),
        prdType() {
            return this.$route.query.prdType;
        }
    },
    watch: {
        widthLeft(val) {
            this.setWindowSize();
        },
        $route() {
            this.$nextTick(() => {
                this.initLoadData();
            });
        },
        '$store.state.app.windowSizeCount': function() {
            this.setWindowSize();
        },
        '$store.state.map.mapViewLoadedCount':function() {
            this.$store.dispatch('map/setTrainWindowShow', false);
            // this.$jlmap.off('zoom');
            this.handleUpdateScreen();
            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();
        },
        '$store.state.socket.whTrainInfo': function(val) {

        }
    },
    async beforeDestroy() {
        await this.$store.dispatch('map/mapClear');
        this.$store.dispatch('training/setPrdType', '');
    },
    async mounted() {
        this.$store.dispatch('training/setPrdType', this.$route.query.prdType || '07');
        await this.setWindowSize();
        await this.initLoadData();
        this.disPlay = true;
        if (this.$route.path.includes('design/bigScreen') || this.$route.query.noPreLogout || this.$route.query.projectDevice) {
            this.disPlay = false;
        }
    },
    methods: {
        initLoadData() { // 加载地图数据
            if (this.$route.query.group) {
                loadMapDataById(this.$route.query.mapId, 'simulation');
            } else {
                this.$store.dispatch('training/changeMode', { mode: TrainingMode.NORMAL });
                loadMapDataById(this.$route.params.mapId, 'preview');
            }
        },
        async statusMessage(list) {
            await this.$store.dispatch('training/updateMapState', list);
            await this.$store.dispatch('socket/setEquipmentStatus');
        },
        setWindowSize() {
            this.$nextTick(() => {
                if (this.widthLeft) {
                    const width = this.$store.state.app.width - (this.widthLeft) - 2;
                    const height = this.height;
                    this.$store.dispatch('config/resize', { width, height });
                } else {
                    const width = this.$store.state.app.width - 2;
                    const height = this.$store.state.app.height;
                    this.$store.dispatch('config/resize', { width, height });
                }
                this.handleUpdateScreen();
            });
        },
        handleUpdateScreen() {
            this.maskOpen = false;
            let picture;
            if (this.$store.state.map.map && this.$store.state.map.map.pictureList) {
                picture = this.$store.state.map.map.pictureList.find(picture => picture.type === 'bigScreen');
            }
            if (picture) {
                this.$store.dispatch('map/setPictureDeviceMap', picture.deviceMap);
                const deviceList = [];
                const mapDevice = this.$store.state.map.mapDevice;
                for (const deviceCode in mapDevice) {
                    deviceList.push(deviceCode);
                }
                this.$jlmap.updatePicture(deviceList);
                this.$jlmap.updateTransform(picture.scaling, picture.origin);
            } else if (this.bigScreenConfig.bigScreenSplitConfig && this.bigScreenConfig.bigScreenSplitConfig.length) {
                const offsetList = this.bigScreenConfig.offsetList;
                const width = this.bigScreenConfig.width;
                const height = this.bigScreenConfig.height;
                if (this.widthLeft) {
                    const size = {
                        width: (this.$store.state.app.width - (this.widthLeft || 450) - 2) * width,
                        height: this.height * height,
                        list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
                        offsetList: offsetList
                    };
                    this.$jlmap.setUpdateScreen(size);
                } else {
                    const size = {
                        width: (this.$store.state.app.width - 2) * width,
                        height: this.$store.state.app.height * height,
                        list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
                        offsetList: offsetList
                    };
                    this.$jlmap.setUpdateScreen(size);
                }
                this.$refs.jlmapVisual.handleStateLoaded();
            } else {
                this.maskOpen = true;
                // this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
            }
        },
        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);
            if (this.prdType === '10') {
                creatSubscribe(`/topic/yjddzh/trainPosition`, header);
            }
            // await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
            if (this.prdType === '10') {
                clearSubscribe(`/topic/yjddzh/trainPosition`);
            }
        }
    }
};
</script>
<style lang="scss" scoped>
    .bigScreen {
        width: 100%;
		overflow: hidden;
        position: relative;
    }
	.bigScreenMask{
        opacity: 1;
        background: #000;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
	.bigScreenBack {
        position: absolute;
        float: right;
        right: 15px;
        bottom: 15px;
		z-index: 19;
    }
</style>