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

<template>
  <el-dialog
    class="haerbin-01__systerm"
    :modal="false"
    :title="title"
    :visible.sync="show"
    :fullscreen="true"
    :before-close="doClose"
    :z-index="2000"
  >
    <div class="trainOverView">
      <div v-if="trainViewList.length>0" class="trainViewList">
        <div v-for="(eachTrainView,index) in trainViewList" :key="index" class="eachTrainView">
          <div class="eachTrainViewIn">
            <div class="eachTrainViewInRhom" />
            <div class="eachTrainTrunkS">{{ 'W'+eachTrainView+'0' }}</div>
            <div class="eachTrainTrunkD" @click="toTrainTrunkDetail(index)">
              <img :src="trainTrunkDown" class="trainTrunkDown">
            </div>
            <div class="eachTrainTrunkE">{{ 'W'+eachTrainView+'6' }}</div>
          </div>
        </div>
      </div>
    </div>
    <!--<train-trunk-detail ref="trainTrunkDetail" :train-view-list="trainViewList" />-->
  </el-dialog>
</template>
<script>
import trainTrunkDown from '@/assets/baSiDi/up.png';
// import TrainTrunkDetail from '../../../jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue';
export default {
    name:'Tra',
    components:{
        // TrainTrunkDetail
    },
    data() {
        return {
            dialogShow: false,
            trainViewList:[],
            trainTrunkDown:trainTrunkDown
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return '列车总览';
        }
    },
    watch:{
        '$store.state.map.activeTrainListChange': function (val) {
            if (val) {
                this.activeTrainList = this.$store.state.map.activeTrainList;
            }
        }
    },
    methods:{
        doShow() {
            this.dialogShow = true;
            this.$nextTick(function () {
                this.trainViewList = this.$store.state.map.activeTrainList;
            });
        },
        doClose() {
            this.dialogShow = false;
            this.$store.dispatch('training/emitTipFresh');
        },
        toTrainTrunkDetail(index) {
            // this.$refs.trainTrunkDetail.doShow(index);
            this.$emit('openTrainTrunkDetail', index);
            this.doClose();
        }
    }
};
</script>
<style scoped>
	/deep/ .el-dialog {
		background: rgba(100, 100, 100, 1) !important;
		position: relative;
		border: 2px solid rgba(144, 144, 144, 0.8);
		border-radius: 6px;
		font-size: 14px;
        display: flex;
        flex-direction: column;
	}
	/deep/ .el-dialog .el-dialog__body{
		background: rgba(100, 100, 100, 1) !important;
		border: 0 !important;
        height: 100%;
        flex: 1;
	}
    .trainOverView{
        width: 100%;
        height: 100%;
        background: #000;
        display: inline-block;
    }
    .trainViewList{
        width: 1226px;
        border-left: 1px #f0f0f0 solid;
        border-top: 1px #f0f0f0 solid;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .eachTrainView{
        width: 245px;
        display: inline-block;
        padding: 10px 10px;
        border-bottom: 1px #f0f0f0 solid;
        border-right: 1px #f0f0f0 solid;
    }
    .eachTrainViewIn{
        height: 60px;
        border-bottom: 1px #484848 solid;
        overflow: hidden;
        position: relative;
    }
    .eachTrainViewInRhom{
        width: 224px;
        height: 60px;
        border-left: 1px #828282 solid;
        transform: skew(-30deg, 0deg);
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        border-bottom: 1px #828282 solid;
        overflow: hidden;
    }
    .eachTrainViewInRhom:before{
        content: '';
        transform: skew(50deg, 0deg);
        transform-origin: bottom center;
        position:absolute;
        width:100%;
        height: 100%;
        border-top: 1px #828282 solid;
        border-right: 1px #828282 solid;
    }
    .eachTrainTrunkS{
        position: absolute;
        font-size: 18px;
        color: #5E5E5E;
        left: 30px;
        top: 20px;
    }
    .eachTrainTrunkD{
        position: absolute;
        left: 99px;
        top: 16px;
        cursor: pointer;
    }
    .trainTrunkDown{
        width: 25px;
        transform-origin: center center;
        transform: rotate(180deg);
    }
    .eachTrainTrunkE{
        position: absolute;
        font-size: 18px;
        color: #5E5E5E;
        right: 30px;
        top: 20px;
    }
</style>