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

<template>
  <div class="menuTrainListOut">
    <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>
    <el-drawer
      v-show="drawer"
      direction="rtl"
      :show-close="false"
      size="50%"
    >
      <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>
    </el-drawer>
  </div>
</template>
<script>
export default {
    name: 'MenuTrainList',
    data() {
        return {
            drawer: false,
            trainList:[],
            oldDevice: null
        };
    },
    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);
            // const device = this.$store.getters['map/getDeviceByCode'](code);
            // this.deviceHighLight(this.oldDevice, false);
            // this.deviceHighLight(device, true);
            // this.oldDevice = device;
        }
        // 高亮设备
        // deviceHighLight(device, flag) {
        //     if (device && device.instance && typeof device.instance.drawSelected === 'function' ) {
        //         if (device._type === 'Section' && device.type === '04') {
        //             device.relevanceSectionList.forEach(item => {
        //                 const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
        //                 sectionModel && sectionModel.instance.drawSelected(flag);
        //             });
        //         } else if (device._type === 'Section' && device.type === '01' && device.logicSectionCodeList && device.logicSectionCodeList.length) {
        //             device.logicSectionCodeList.forEach(item => {
        //                 const sectionModel = this.$store.getters['map/getDeviceByCode'](item);
        //                 sectionModel && sectionModel.instance.drawSelected(flag);
        //             });
        //         } else {
        //             device.instance.drawSelected(flag);
        //         }
        //     }
        // }
    }
};
</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>