166 lines
4.4 KiB
Vue
166 lines
4.4 KiB
Vue
<template>
|
|
<el-dialog
|
|
class="haerbin-01__systerm"
|
|
:modal="false"
|
|
:title="title"
|
|
:visible.sync="show"
|
|
:fullscreen="true"
|
|
:before-close="doClose"
|
|
:z-index="2000"
|
|
>
|
|
<div class="trainOverView">
|
|
<div v-if="trainViewList.length>0" class="trainViewList">
|
|
<div v-for="(eachTrainView,index) in trainViewList" :key="index" class="eachTrainView">
|
|
<div class="eachTrainViewIn">
|
|
<div class="eachTrainViewInRhom" />
|
|
<div class="eachTrainTrunkS">{{ 'W'+eachTrainView+'0' }}</div>
|
|
<div class="eachTrainTrunkD" @click="toTrainTrunkDetail(index)">
|
|
<img :src="trainTrunkDown" class="trainTrunkDown">
|
|
</div>
|
|
<div class="eachTrainTrunkE">{{ 'W'+eachTrainView+'6' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<train-trunk-detail ref="trainTrunkDetail" :train-view-list="trainViewList" />-->
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import trainTrunkDown from '@/assets/baSiDi/up.png';
|
|
// import TrainTrunkDetail from '../../../jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue';
|
|
export default {
|
|
name:'Tra',
|
|
components:{
|
|
// TrainTrunkDetail
|
|
},
|
|
data() {
|
|
return {
|
|
dialogShow: false,
|
|
trainViewList:[],
|
|
trainTrunkDown:trainTrunkDown
|
|
};
|
|
},
|
|
computed: {
|
|
show() {
|
|
return this.dialogShow && !this.$store.state.menuOperation.break;
|
|
},
|
|
title() {
|
|
return '列车总览';
|
|
}
|
|
},
|
|
watch:{
|
|
'$store.state.map.activeTrainListChange': function (val) {
|
|
if (val) {
|
|
this.activeTrainList = this.$store.state.map.activeTrainList;
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
doShow() {
|
|
this.dialogShow = true;
|
|
this.$nextTick(function () {
|
|
this.trainViewList = this.$store.state.map.activeTrainList;
|
|
});
|
|
},
|
|
doClose() {
|
|
this.dialogShow = false;
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
},
|
|
toTrainTrunkDetail(index) {
|
|
// this.$refs.trainTrunkDetail.doShow(index);
|
|
this.$emit('openTrainTrunkDetail', index);
|
|
this.doClose();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/deep/ .el-dialog {
|
|
background: rgba(100, 100, 100, 1) !important;
|
|
position: relative;
|
|
border: 2px solid rgba(144, 144, 144, 0.8);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
/deep/ .el-dialog .el-dialog__body{
|
|
background: rgba(100, 100, 100, 1) !important;
|
|
border: 0 !important;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
.trainOverView{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
display: inline-block;
|
|
}
|
|
.trainViewList{
|
|
width: 1226px;
|
|
border-left: 1px #f0f0f0 solid;
|
|
border-top: 1px #f0f0f0 solid;
|
|
margin-top: 30px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.eachTrainView{
|
|
width: 245px;
|
|
display: inline-block;
|
|
padding: 10px 10px;
|
|
border-bottom: 1px #f0f0f0 solid;
|
|
border-right: 1px #f0f0f0 solid;
|
|
}
|
|
.eachTrainViewIn{
|
|
height: 60px;
|
|
border-bottom: 1px #484848 solid;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.eachTrainViewInRhom{
|
|
width: 224px;
|
|
height: 60px;
|
|
border-left: 1px #828282 solid;
|
|
transform: skew(-30deg, 0deg);
|
|
-webkit-transform-origin: bottom center;
|
|
transform-origin: bottom center;
|
|
border-bottom: 1px #828282 solid;
|
|
overflow: hidden;
|
|
}
|
|
.eachTrainViewInRhom:before{
|
|
content: '';
|
|
transform: skew(50deg, 0deg);
|
|
transform-origin: bottom center;
|
|
position:absolute;
|
|
width:100%;
|
|
height: 100%;
|
|
border-top: 1px #828282 solid;
|
|
border-right: 1px #828282 solid;
|
|
}
|
|
.eachTrainTrunkS{
|
|
position: absolute;
|
|
font-size: 18px;
|
|
color: #5E5E5E;
|
|
left: 30px;
|
|
top: 20px;
|
|
}
|
|
.eachTrainTrunkD{
|
|
position: absolute;
|
|
left: 99px;
|
|
top: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.trainTrunkDown{
|
|
width: 25px;
|
|
transform-origin: center center;
|
|
transform: rotate(180deg);
|
|
}
|
|
.eachTrainTrunkE{
|
|
position: absolute;
|
|
font-size: 18px;
|
|
color: #5E5E5E;
|
|
right: 30px;
|
|
top: 20px;
|
|
}
|
|
</style>
|