rt-sim-training-client/src/views/newMap/displayNew/menuTrainList.vue

<template>
  <div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}">
    <div class="menuTrainListBtn" @click="clickBtn">列车</div>
    <div :show-close="false" class="menuTrainList_box" style="height: 100%;">
      <div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList">
        <div class="bottomTrainListInfo">下行列车详细信息</div>
        <el-table :data="bottomTrainList" height="45%" :highlight-current-row="true" @row-click="selectTrain">
          <el-table-column property="groupNumber" label="车组号" width="70" />
          <el-table-column property="tripNumber" label="车次号" width="70" />
          <el-table-column property="destinationCode" label="目的地号" width="100" />
          <el-table-column property="serviceNumber" label="表号" width="70" />
          <el-table-column property="dt" label="早晚点" width="70">
            <template slot-scope="scope">
              <div>{{ covert(scope.row.dt) }}</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="topTrainListInfo">上行列车详细信息</div>
        <el-table :data="topTrainList" height="45%" :highlight-current-row="true" style="border-radius:0px 0px 0px 5px;" @row-click="selectTrain">
          <el-table-column property="groupNumber" label="车组号" width="70" />
          <el-table-column property="tripNumber" label="车次号" width="70" />
          <el-table-column property="destinationCode" label="目的地号" width="100" />
          <el-table-column property="serviceNumber" label="表号" width="70" />
          <el-table-column property="dt" label="早晚点" width="70">
            <template slot-scope="scope">
              <div>{{ covert(scope.row.dt) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="menuTrainList">
        <el-table :data="trainList" height="100%" :highlight-current-row="true" style="border-radius:5px 0px 0px 5px;" @row-click="selectTrain">
          <el-table-column property="groupNumber" label="车组号" width="130" />
          <el-table-column property="tripNumber" label="车次号" width="130" />
          <el-table-column property="serviceNumber" label="表号" width="130" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
    name: 'MenuTrainList',
    data() {
        return {
            drawer: false,
            trainList:[],
            oldDevice: null,
            topTrainList:[],
            bottomTrainList:[]
        };
    },
    computed: {
        ...mapGetters('map', [
            'map',
            'mapConfig'
        ]),
        lineCode() {
            return this.$route.query.lineCode;
        }
    },
    watch:{
        '$store.state.map.activeTrainListUpdate': function (val) {
            if (val) {
                const activeTrainList = this.$store.state.map.activeTrainList;
                if (this.lineCode == '10' || this.lineCode == '11') {
                    this.topTrainList = [];
                    this.bottomTrainList = [];
                    activeTrainList.forEach((trainCode)=>{
                        // train.serviceNumber != '' && train.serviceNumber != undefined &&
                        const train = this.$store.getters['map/getDeviceByCode'](trainCode);
                        let isUpDirection;
                        if (this.mapConfig.upRight) {
                            isUpDirection = train.right;
                        } else if (!this.mapConfig.upRight) {
                            isUpDirection = !train.right;
                        }
                        if (train && isUpDirection && train.sectionCode) {
                            this.topTrainList.push(train);
                        } else if (train && !isUpDirection && train.sectionCode) {
                            this.bottomTrainList.push(train);
                        }
                    });
                } else {
                    this.trainList = [];
                    activeTrainList.forEach((trainCode)=>{
                        const train = this.$store.getters['map/getDeviceByCode'](trainCode);
                        if (train && train.sectionCode) {
                            this.trainList.push(train);
                        }
                    });
                }
            } else {
                this.topTrainList = [];
                this.bottomTrainList = [];
                this.trainList = [];
            }
        }
    },
    mounted() {
    },
    methods:{
        clickBtn() {
            if (this.drawer) {
                this.drawer = false;
            } else {
                this.drawer = true;
            }
        },
        selectTrain(row, column, event) {
            // 设置显示中心
            this.$jlmap.setCenter(row.code);
        },
        covert(data) {
            const absData = Math.abs(data);
            const hours = Math.floor(absData / 3600);
            let min = Math.floor((absData % 3600) / 60);
            let seconds = (absData % 3600) % 60;
            min = min > 9 ? min : '0' + min;
            seconds = seconds > 9 ? seconds : '0' + seconds;
            const time = hours + ':' + min + ':' + seconds;
            return data == 0 ? '00:00:00' : (data > 0 ? time + 'E' : time + 'L');
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.menuTrainListOut{
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
	transform: translateX(400px);
	transition: all 0.4s;
	&.active{
		transform: translateX(0px);
	}
}
.menuTrainListBtn{
    background: #fff;
    text-align: center;
    border-radius: 6px 0px 0px 6px;
    position: absolute;
    top: 45%;
    z-index: 2;
	transform: translateX(-23px);
    cursor: pointer;
	display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
	padding: 7px 4px;
    width: 23px;
}
.menuTrainList_box{
	height: 100%;
	.menuTrainList{
		width: 400px;
		height: 100%;
		border-radius: 10px 0px 0px 10px;
		background: #fff;
	}
}

.topTrainListInfo,
.bottomTrainListInfo{
    padding: 10px 10px;
    background: #cde2ef;
    font-size: 13px;
    border-radius: 5px 0px 0px 0px;
}
</style>