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

<template>
  <el-dialog
    class="haerbin-01__systerm"
    :width="'1000px'"
    :modal="false"
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="show"
    :before-close="doClose"
  >
    <!-- :fullscreen="true" -->
    <div class="trainTrunkView">
      <div class="trainTrunkViewT">
        <img :src="trainTrunkUp" class="trainTrunkUp" @click="backTra">
        <div class="trainTrunkTtext">
          <div class="trainTrunkTtextIn">OBCU</div>
          <div class="trainTrunkTtextIn">Overview</div>
        </div>
      </div>
      <div class="trainTrunkViewM">
        <div class="trainTrunkViewMT">
          <div class="eachTrunkViewInRhom" />
          <div class="trainTrunkViewMTL">
            <div class="trainTrunkViewMTL1">
              <div class="trainTrunkViewMTLEach">ATP</div>
              <div class="trainTrunkViewMTLEach">ATO</div>
            </div>
            <div class="trainTrunkViewMTL2">
              <div class="trainTrunkViewMTL2L" />
              <div class="trainTrunkViewMTL2R">
                <div class="trainTrunkViewLine">
                  <div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
                  <div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
                </div>
              </div>
            </div>
            <div class="trainTrunkViewMTL3">
              <div class="trainTrunkViewMTLEach">ITF</div>
              <div class="trainTrunkViewMTLEach">HMI</div>
              <div class="trainTrunkViewMTLEach">TMS</div>
            </div>
          </div>
          <div class="trainTrunkViewMTR">
            <div class="trainTrunkViewMTR1">
              <div class="trainTrunkViewMTLEach">ATO</div>
              <div class="trainTrunkViewMTLEach">ATP</div>
            </div>
            <div class="trainTrunkViewMTR2">
              <div class="trainTrunkViewMTR2L">
                <div class="trainTrunkViewLine">
                  <div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
                  <div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
                </div>
              </div>
              <div class="trainTrunkViewMTR2R" />
            </div>
            <div class="trainTrunkViewMTR3">
              <div class="trainTrunkViewMTLEach">TMS</div>
              <div class="trainTrunkViewMTLEach">HMI</div>
              <div class="trainTrunkViewMTLEach">ITF</div>
            </div>
          </div>
        </div>
        <div class="trainTrunkViewMB">
          <div class="trainTrunkViewMBL">{{ 'W'+trainCode+'0' }}</div>
          <div class="trainTrunkViewMBR">{{ 'W'+trainCode+'6' }}</div>
        </div>
      </div>
      <div class="trainTrunkViewB">
        <div v-if="prev" class="trainTrunkViewBL">
          <img :src="trainTrunkUp" class="trainTrunkLeft" @click="doPrev">
          <div class="trainTrunkViewBLIn">
            <div class="trainTrunkViewBLInRhom" />
            <div class="trainTrunkViewBLInL">{{ 'W'+prev+'0' }}</div>
            <div class="trainTrunkViewBLInR">{{ 'W'+prev+'6' }}</div>
          </div>
        </div>
        <div v-if="next" class="trainTrunkViewBB">
          <div class="trainTrunkViewBRIn">
            <div class="trainTrunkViewBLInRhom" />
            <div class="trainTrunkViewBLInL">{{ 'W'+next+'0' }}</div>
            <div class="trainTrunkViewBLInR">{{ 'W'+next+'6' }}</div>
          </div>
          <img :src="trainTrunkUp" class="trainTrunkRight" @click="doNext">
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import trainTrunkUp from '@/assets/baSiDi/up.png';
export default {
    name:'TrainTrunkDetail',
    props:{
        // trainViewList:{
        //     type:Array,
        //     required:true
        // }
    },
    data() {
        return {
            dialogShow: false,
            trainCode:'',
            prev:'',
            next:'',
            index:0,
            trainTrunkUp:trainTrunkUp
        };
    },
    computed: {
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return '列车详览';
        },
        trainViewList() {
            return this.$store.state.map.activeTrainList;
        }
    },
    methods:{
        doShow(index) {
            this.index = index;
            this.dialogShow = true;
            this.init();
        },
        init() {
            this.trainCode = this.trainViewList[this.index];
            this.prev = '';
            if (this.index > 0) {
                this.prev = this.trainViewList[this.index - 1];
            }
            this.next = '';
            if ((this.index + 1) < this.trainViewList.length) {
                this.next = this.trainViewList[this.index + 1];
            }
        },
        doClose() {
            this.dialogShow = false;
            this.$store.dispatch('training/emitTipFresh');
        },
        backTra() {
            this.$emit('openTra');
            this.doClose();
        },
        doPrev() {
            this.index--;
            this.init();
        },
        doNext() {
            this.index++;
            this.init();
        }
    }
};
</script>
<style lang="scss" scoped>
.trainTrunkView{
    width: 100%;
    background: #000;
    display: inline-block;
    padding: 20px 30px;
}
.trainTrunkUp{
    width: 60px;
    margin-left: 433px;
    display: inline-block;
    cursor: pointer;
}
.trainTrunkTtext{
    display: inline-block;
    vertical-align: top;
    margin-left: 0px;
    color: #fff;
    font-size: 26px;
}
.trainTrunkTtextIn{margin-bottom:5px;letter-spacing: 2px;}
.trainTrunkViewMT{
    width: 800px;
    height: 210px;
    margin-left: 58px;
    margin-top: 25px;
    position: relative;
}
.eachTrunkViewInRhom{
    width: 800px;
    height: 210px;
    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;
}
.eachTrunkViewInRhom: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;
}
.trainTrunkViewMTL{
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 100%;
    border-right: 1px #fff dashed;
    font-size:0;
}
.trainTrunkViewMTR{
    position: absolute;
    right: 0;
    top: 0;
    width: 400px;
    height: 100%;
    font-size: 0;
}
.trainTrunkViewMTL1{margin-left: 177px;margin-top: 28px;font-size: 0;}
.trainTrunkViewMTR1{margin-left: 34px;margin-top: 28px;font-size: 0;}
.trainTrunkViewMTL2{height: 59px;margin-left:100px;display: inline-block;}
.trainTrunkViewMTL2L{
    width: 117px;
    border-left: 1px #fff solid;
    height: 34px;
    margin-top: 25px;
    border-top: 1px #fff solid;
    display: inline-block;
}
.trainTrunkViewMTR2R{width: 106px;border-top: 1px #fff solid;display: inline-block;margin-top: 25px;border-right: 1px #fff solid;height: 34px;}
.trainTrunkViewMTR2{height: 59px;margin-left:75px;display: inline-block;}
.trainTrunkViewMTR2L{
    width: 108px;
    height: 59px;
    border-left: 1px #fff solid;
    display: inline-block;
    vertical-align: top;
    border-right: 1px #fff solid;
}
.trainTrunkViewMTL2R{
    width: 108px;
    height: 59px;
    border-left: 1px #fff solid;
    display: inline-block;
    vertical-align: top;
    border-right: 1px #fff solid;
}
.trainTrunkViewMTL3{margin-left: 65px;font-size: 0;}
.trainTrunkViewMTR3{margin-left: 34px;font-size: 0;}
.trainTrunkViewMTLEach{
    padding: 10px 0px;
    width:80px;
    text-align:center;
    font-size: 24px;
    color: #5F5F5F;
    border: 1px #5F5F5F solid;
    display: inline-block;
    letter-spacing: 4px;
    margin-right: 30px;
    cursor: pointer;
}
.trainTrunkViewDot{
    position:absolute;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background: #fff;
}
.trainTrunkViewLine{
    width: 107px;
    height: 33px;
    border-top: 1px #fff solid;
    margin-top: 25px;
    position: relative;
}
.trainTrunkViewMB{padding: 20px 123px;}
.trainTrunkViewMBL{font-size: 40px;color: #fff;display:inline-block;margin-left: 75px;letter-spacing: 5px;}
.trainTrunkViewMBR{font-size: 40px;color: #fff;display:inline-block;float:right;margin-right:75px;letter-spacing: 5px;}
.trainTrunkViewBL{display: inline-block;}
.trainTrunkLeft{
    width: 60px;
    transform-origin: center center;
    transform: rotate(-90deg);
    cursor: pointer;
}
.trainTrunkViewB{margin-top: 20px;}
.trainTrunkViewBB{display: inline-block;float: right;}
.trainTrunkRight{
    width: 60px;
    transform-origin: center center;
    transform: rotate(90deg);
    cursor: pointer;
}
.trainTrunkViewBLIn,.trainTrunkViewBRIn{
    width: 220px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.trainTrunkViewBLIn{margin-left: 20px;}
.trainTrunkViewBRIn{margin-right: 20px;}
.trainTrunkViewBLInRhom{
    width: 100%;
    height: 100%;
    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;
}
.trainTrunkViewBLInRhom: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;
}
.trainTrunkViewBLInL{
    position: absolute;
    width: 110px;
    height: 100%;
    left: 0;
    top: 0;
    border-right: 1px #fff dashed;
    font-size: 20px;
    color: #fff;
    padding-top: 16px;
    letter-spacing: 2px;
    padding-left:27px;
}
.trainTrunkViewBLInR{
    position: absolute;
    width: 110px;
    height: 100%;
    right: 0;
    top: 0;
    font-size: 20px;
    color: #fff;
    padding-top: 16px;
    letter-spacing: 2px;
    padding-left: 10px;
}
</style>