rt-sim-training-client/src/views/newMap/displayBaSiDi/tro.vue

<template>
  <el-dialog
    :modal="false"
    :title="title"
    :visible.sync="show"
    :fullscreen="true"
    :before-close="doClose"
    :z-index="2003"
  >
    <div>
      <map-system-draft ref="mapCanvas" :no-menu="true" @back="back" />
    </div>
  </el-dialog>
</template>

<script>
import MapSystemDraft from '@/views/newMap/mapsystemNew/common/index';
import { mapGetters } from 'vuex';
import ButtonDbupIcon from '@/assets/baSiDi/dbup.png';
import ButtonRightIcon from '@/assets/baSiDi/right.png';
import ButtonLeftIcon from '@/assets/baSiDi/left.png';
import Vue from 'vue';

export default {
    name: 'TRO',
    components: {
        MapSystemDraft
    },
    props: {
        stationList: {
            type: Array,
            required: true
        },
        trainList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            dialogShow: false,
            mapData: null,
            deviceCode: '',
            selfJmap: null,
            buttonDbup: ButtonDbupIcon,
            buttonRight: ButtonRightIcon,
            buttonLeft: ButtonLeftIcon
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return '轨道总览';
        },
        width() {
            return this.$store.state.app.width - 5;
        },
        height() {
            return this.$store.state.app.height - 50;
        },
        ...mapGetters('map', [
            'bigScreenConfig'
        ])
    },
    watch: {
        '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
            if (this.dialogShow) {
                this.showTroMode();
                this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
            }
        },
        '$store.state.app.windowSizeCount': function() { // 窗口缩放
            this.$store.dispatch('config/resize', { width:this.width, height: this.height });
        }
    },
    beforeDestroy() {
        if (this.selfJmap && this.selfJmap._disposeFlag) {
            this.destroy();
        }
    },
    methods: {
        doShow() {
            this.dialogShow = true;
            this.$jlmap && this.$jlmap.clearTrainView();
            if (this.selfJmap) { Vue.prototype.$jlmap = this.selfJmap; }
            this.$store.dispatch('config/resize', { width:this.width, height: this.height });
            this.$nextTick(function() {
                this.$refs.mapCanvas.setMap(this.$store.state.map.map);
                const mapDevice = this.$store.state.map.mapDevice;
                const list = [];
                for (const key in mapDevice) {
                    list.push(mapDevice[key]);
                }
                this.$jlmap.updateShowMode(list, '05');
                this.$store.dispatch('training/updateMapState', list);
            });
        },
        destroy() {
            this.selfJmap.dispose();
        },
        showTroMode() {
            const mapDevice = this.$store.state.map.mapDevice;
            const list = [];
            for (const key in mapDevice) {
                list.push(mapDevice[key]);
            }
            this.handleUpdateScreen();
            this.$jlmap.updateShowMode(list, '05'); // 二次过滤
        },
        handleUpdateScreen() {
            this.maskOpen = false;
            if (this.bigScreenConfig.bigScreenSplitConfig && 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 - 2) * width,
                    height: this.$store.state.app.height * height,
                    list: this.bigScreenConfig.bigScreenSplitConfig.map(ele => ele.position),
                    offsetList: offsetList
                };
                this.$jlmap.setUpdateScreen(size);
            } else {
                this.maskOpen = true;
                // this.$messageBox('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
            }
        },
        back() {},
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.selfJmap = Vue.prototype.$jlmap;
        }
    }
};
</script>
<style scoped>
	/deep/ .el-dialog {
		background: rgba(100, 100, 100, 1);
		position: relative;
		border: 2px solid rgba(144, 144, 144, 0.8);
		border-radius: 6px;
		font-size: 14px;
	}
	/deep/ .el-dialog .el-dialog__body{
		background: rgba(100, 100, 100, 1);
		border: 0;
		padding: 0;
	}
	/deep/ .el-dialog .el-dialog__header {
		padding: 5px;
		height: 30px;
	}
	/deep/ .el-dialog .el-dialog__title {
		color: #fff;
	}
	/deep/ .el-dialog .el-dialog__headerbtn {
		background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
		border: 1px solid #fff;
		border-radius: 4px;
		top: 4px;
		right: 5px;
		line-height: 16px;
	}
	/deep/ .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}
	.arrow-button{
		width: 45px;
		height: 30px;
		cursor: pointer;
		background-size: 45px 30px;
		background-repeat: no-repeat;
	}
</style>