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

<template>
  <div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11'}">
    <div v-if="drawer" class="menuTrainListBtn" @click="clickBtn">
      <i class="el-icon-more" style="font-size: 20px;margin-top: 9px;transform-origin: 50% 50%;transform: rotate(90deg);margin-left:0px;" /></div>
    <div v-else class="menuTrainListBtn1" @click="clickBtn">
      <div class="menuTrainListBtn1In">
        <i class="el-icon-more" style="font-size: 20px;margin-top: 9px;transform-origin: 50% 50%;transform: rotate(90deg);" />
      </div>
    </div>
    <div
      v-show="drawer"
      :show-close="false"
      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-column property="right" label="是否上行" width="90" /> -->
        </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-column property="right" label="是否上行" width="90" /> -->
        </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-column property="right" label="是否上行" width="90" /> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    name: 'MenuTrainList',
    data() {
        return {
            drawer: false,
            trainList:[],
            oldDevice: null,
            topTrainList:[],
            bottomTrainList:[]
        };
    },
    computed: {
        lineCode() {
            return this.$route.query.lineCode;
        }
    },
    watch:{
        '$store.state.map.activeTrainListUpdate': function (val) {
            const trainList = Object.values(this.$store.state.map.activeTrainList);
            if (this.lineCode == '10' || this.lineCode == '11') {
                this.topTrainList = trainList.filter((train)=>{
                    return train.serviceNumber != '' && train.serviceNumber != undefined && !train.right && train.sectionCode;
                });
                this.bottomTrainList = trainList.filter((train)=>{
                    return train.serviceNumber != '' && train.serviceNumber != undefined && train.right && train.sectionCode;
                });
            } else {
                this.trainList = trainList.filter((train)=>{
                    return train.serviceNumber != '' && train.serviceNumber != undefined && train.sectionCode;
                });
            }

        },
        '$store.state.map.runPlanStatus': function (val) {
            if (!val) {
                this.$store.dispatch('map/resetActiveTrainList');
            }
        }
    },
    mounted() {
    },
    methods:{
        clickBtn() {
            if (this.drawer) {
                this.drawer = false;
            } else {
                this.drawer = true;
            }
        },
        selectTrain(row, column, event) {
            this.setCenter(row.code);
        },
        // 设置显示中心
        setCenter(code) {
            this.$emit('setCenter', code);
        },
        covert(data) {
            let min = (Math.abs(data) - Math.abs(data) % 60) / 60;
            let seconds = Math.abs(data) % 60;
            min = min > 9 ? min : '0' + min;
            seconds = seconds > 9 ? seconds : '0' + seconds;
            return data == 0 ? '00:00' : (data > 0 ? min + ':' + seconds + 'E' : min + ':' + seconds + 'L');
        }
    }
};
</script>
<style lang="scss" scoped>
.menuTrainListBtn1In{
    width: 20px;
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 6px 0px 0px 6px;
    cursor:pointer;
    border: 1px #adadad solid;
}
.menuTrainListBtn1{
    position: absolute;
    top: 46%;
    right:2px;
}
.menuTrainListBtn{
    width: 20px;
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 6px 0px 0px 6px;
    position: absolute;
    top: 45%;
    left: -20px;
    z-index: 2;
    cursor:pointer;
}
.menuTrainListOut{
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
}
.menuTrainList{
    width: 400px;
    height:100%;
    border-radius: 10px 0px 0px 10px;
    // padding: 5px;
    background: #fff;
}
.topTrainListInfo,.bottomTrainListInfo{
    padding: 10px 10px;
    background: #cde2ef;
    font-size: 13px;
    border-radius: 5px 0px 0px 0px;
}
</style>