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="type==='tro'" @back="back" />
      <div v-if="type === 'troDetail'" style="width: 150px;height: 35px;display: flex;position: absolute; bottom: 60px;left: calc(50% - 75px);z-index: 9999;justify-content: space-between;justify-items: center;">
        <div class="arrow-button" :style="{backgroundImage: 'url(' + buttonLeft + ')' }" @click="changeStation(-1)" />
        <div class="arrow-button" :style="{backgroundImage: 'url(' + buttonDbup + ')' }" @click="showTroMode" />
        <div class="arrow-button" :style="{backgroundImage: 'url(' + buttonRight + ')' }" @click="changeStation(1)" />
      </div>
    </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';

export default {
    name: 'TRO',
    components: {
        MapSystemDraft
    },
    props: {
        stationList: {
            type: Array,
            required: true
        },
        trainList: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            dialogShow: false,
            mapData: null,
            type: 'tro',
            deviceCode: '',
            buttonDbup: ButtonDbupIcon,
            buttonRight: ButtonRightIcon,
            buttonLeft: ButtonLeftIcon
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return this.type === 'tro' ? '轨道总览' : '轨道详览';
        },
        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.type === 'tro') {
                this.showTroMode();
                this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
            } else if (this.dialogShow && this.type === 'troDetail') {
                this.showTroDetail();
                this.$refs.mapCanvas && this.$refs.mapCanvas.mapViewLoaded(false);
            }
        },
        '$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.deviceCode = device.code;
                this.type = 'troDetail';
                this.showTroDetail();
            }
        }
    },
    methods: {
        doShow() {
            this.dialogShow = true;
            this.$store.dispatch('config/resize', { width:this.width, height: this.height });
            this.$nextTick(function() {
                this.$refs.mapCanvas.setMap(this.$store.state.map.map);
            });
        },
        showTroMode() {
            this.type = 'tro';
            const nameList = Object.keys(this.$store.state.map.map || {});
            let list = [];
            nameList.forEach(item => {
                if (item !== 'skinVO') {
                    const data = this.$store.state.map.map[item];
                    if (data && data.constructor === Array) {
                        list = [...list, ...data];
                    }
                }
            });
            this.handleUpdateScreen();
            this.$jlmap.updateShowMode(list, '05'); // 二次过滤
        },
        showTroDetail() {
            const nameList = Object.keys(this.$store.state.map.map || {});
            let list = [];
            nameList.forEach(item => {
                if (item !== 'skinVO') {
                    const data = this.$store.state.map.map[item];
                    if (data && data.constructor === Array) {
                        list = [...list, ...data];
                    }
                }
            });

            this.$refs.mapCanvas.setCenter(this.deviceCode);
            this.$jlmap.setRecover({ scaleRate: 1, offsetX: 0, offsetY: 0 });
            this.$jlmap.updateShowMode(list, '02'); // 二次过滤
            const trainList = [];
            this.trainList.forEach(item => {
                trainList.push({ code: item.groupNumber, deviceType:'TRAIN' });
            });
            this.$store.dispatch('training/updateMapState', trainList);
        },
        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('该线路没有大屏切割位置信息, 请前往地图绘制编辑');
            }
        },
        changeStation(value) {
            const device = this.$store.getters['map/getDeviceByCode'](this.deviceCode);
            const stationSn = device.sn + value;
            const station = this.stationList.find((item) => {
                return item.sn === stationSn;
            });
            if (station) {
                this.deviceCode = station.code;
                this.$refs.mapCanvas.setCenter(this.deviceCode);
            }
        },
        back() {},
        doClose() {
            this.loading = false;
            this.dialogShow = false;
        }
    }
};
</script>
<style scoped>
	/deep/ .el-dialog {
		background: rgba(100, 100, 100, 1);
		position: relative;
		border: 2px solid rgb(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>