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: -10px;" /></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 class="menuTrainList">
        <el-table :data="trainList" height="100%" :highlight-current-row="true" @row-click="selectTrain">
          <el-table-column property="groupNumber" label="车组号" width="130" />
          <el-table-column property="serviceNumber" label="表号" width="130" />
          <el-table-column property="tripNumber" 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
        };
    },
    computed: {
        lineCode() {
            return this.$route.query.lineCode;
        }
    },
    watch:{
        '$store.state.map.trainListUpdate': function (val) {
            this.trainList = this.$store.state.map.map.trainList.filter((train)=>{
                return train.serviceNumber != '' && train.serviceNumber != undefined;
            });
        },
        '$store.state.map.runPlanStatus': function (val) {
            if (!val) {
                this.trainList = [];
            }
        }
    },
    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);
        }
    }
};
</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: 30px;
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 6px 0px 0px 6px;
    position: absolute;
    top: 45%;
    left: -4%;
    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;
}
</style>