137 lines
4.2 KiB
Vue
137 lines
4.2 KiB
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>
|
|
<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
|
|
};
|
|
},
|
|
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>
|