352 lines
9.8 KiB
Vue
352 lines
9.8 KiB
Vue
<template>
|
|
<el-dialog
|
|
class="haerbin-01__systerm"
|
|
:width="'1000px'"
|
|
:modal="false"
|
|
:close-on-click-modal="false"
|
|
:title="title"
|
|
:visible.sync="show"
|
|
:before-close="doClose"
|
|
>
|
|
<!-- :fullscreen="true" -->
|
|
<div class="trainTrunkView">
|
|
<div class="trainTrunkViewT">
|
|
<img :src="trainTrunkUp" class="trainTrunkUp" @click="backTra">
|
|
<div class="trainTrunkTtext">
|
|
<div class="trainTrunkTtextIn">OBCU</div>
|
|
<div class="trainTrunkTtextIn">Overview</div>
|
|
</div>
|
|
</div>
|
|
<div class="trainTrunkViewM">
|
|
<div class="trainTrunkViewMT">
|
|
<div class="eachTrunkViewInRhom" />
|
|
<div class="trainTrunkViewMTL">
|
|
<div class="trainTrunkViewMTL1">
|
|
<div class="trainTrunkViewMTLEach">ATP</div>
|
|
<div class="trainTrunkViewMTLEach">ATO</div>
|
|
</div>
|
|
<div class="trainTrunkViewMTL2">
|
|
<div class="trainTrunkViewMTL2L" />
|
|
<div class="trainTrunkViewMTL2R">
|
|
<div class="trainTrunkViewLine">
|
|
<div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
|
|
<div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="trainTrunkViewMTL3">
|
|
<div class="trainTrunkViewMTLEach">ITF</div>
|
|
<div class="trainTrunkViewMTLEach">HMI</div>
|
|
<div class="trainTrunkViewMTLEach">TMS</div>
|
|
</div>
|
|
</div>
|
|
<div class="trainTrunkViewMTR">
|
|
<div class="trainTrunkViewMTR1">
|
|
<div class="trainTrunkViewMTLEach">ATO</div>
|
|
<div class="trainTrunkViewMTLEach">ATP</div>
|
|
</div>
|
|
<div class="trainTrunkViewMTR2">
|
|
<div class="trainTrunkViewMTR2L">
|
|
<div class="trainTrunkViewLine">
|
|
<div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
|
|
<div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
|
|
</div>
|
|
</div>
|
|
<div class="trainTrunkViewMTR2R" />
|
|
</div>
|
|
<div class="trainTrunkViewMTR3">
|
|
<div class="trainTrunkViewMTLEach">TMS</div>
|
|
<div class="trainTrunkViewMTLEach">HMI</div>
|
|
<div class="trainTrunkViewMTLEach">ITF</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="trainTrunkViewMB">
|
|
<div class="trainTrunkViewMBL">{{ 'W'+trainCode+'0' }}</div>
|
|
<div class="trainTrunkViewMBR">{{ 'W'+trainCode+'6' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="trainTrunkViewB">
|
|
<div v-if="prev" class="trainTrunkViewBL">
|
|
<img :src="trainTrunkUp" class="trainTrunkLeft" @click="doPrev">
|
|
<div class="trainTrunkViewBLIn">
|
|
<div class="trainTrunkViewBLInRhom" />
|
|
<div class="trainTrunkViewBLInL">{{ 'W'+prev+'0' }}</div>
|
|
<div class="trainTrunkViewBLInR">{{ 'W'+prev+'6' }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="next" class="trainTrunkViewBB">
|
|
<div class="trainTrunkViewBRIn">
|
|
<div class="trainTrunkViewBLInRhom" />
|
|
<div class="trainTrunkViewBLInL">{{ 'W'+next+'0' }}</div>
|
|
<div class="trainTrunkViewBLInR">{{ 'W'+next+'6' }}</div>
|
|
</div>
|
|
<img :src="trainTrunkUp" class="trainTrunkRight" @click="doNext">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import trainTrunkUp from '@/assets/baSiDi/up.png';
|
|
export default {
|
|
name:'TrainTrunkDetail',
|
|
props:{
|
|
// trainViewList:{
|
|
// type:Array,
|
|
// required:true
|
|
// }
|
|
},
|
|
data() {
|
|
return {
|
|
dialogShow: false,
|
|
trainCode:'',
|
|
prev:'',
|
|
next:'',
|
|
index:0,
|
|
trainTrunkUp:trainTrunkUp
|
|
};
|
|
},
|
|
computed: {
|
|
show() {
|
|
return this.dialogShow && !this.$store.state.menuOperation.break;
|
|
},
|
|
title() {
|
|
return '列车详览';
|
|
},
|
|
trainViewList() {
|
|
return this.$store.state.map.activeTrainList;
|
|
}
|
|
},
|
|
methods:{
|
|
doShow(index) {
|
|
this.index = index;
|
|
this.dialogShow = true;
|
|
this.init();
|
|
},
|
|
init() {
|
|
this.trainCode = this.trainViewList[this.index];
|
|
this.prev = '';
|
|
if (this.index > 0) {
|
|
this.prev = this.trainViewList[this.index - 1];
|
|
}
|
|
this.next = '';
|
|
if ((this.index + 1) < this.trainViewList.length) {
|
|
this.next = this.trainViewList[this.index + 1];
|
|
}
|
|
},
|
|
doClose() {
|
|
this.dialogShow = false;
|
|
this.$store.dispatch('training/emitTipFresh');
|
|
},
|
|
backTra() {
|
|
this.$emit('openTra');
|
|
this.doClose();
|
|
},
|
|
doPrev() {
|
|
this.index--;
|
|
this.init();
|
|
},
|
|
doNext() {
|
|
this.index++;
|
|
this.init();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.trainTrunkView{
|
|
width: 100%;
|
|
background: #000;
|
|
display: inline-block;
|
|
padding: 20px 30px;
|
|
}
|
|
.trainTrunkUp{
|
|
width: 60px;
|
|
margin-left: 433px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
.trainTrunkTtext{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-left: 0px;
|
|
color: #fff;
|
|
font-size: 26px;
|
|
}
|
|
.trainTrunkTtextIn{margin-bottom:5px;letter-spacing: 2px;}
|
|
.trainTrunkViewMT{
|
|
width: 800px;
|
|
height: 210px;
|
|
margin-left: 58px;
|
|
margin-top: 25px;
|
|
position: relative;
|
|
}
|
|
.eachTrunkViewInRhom{
|
|
width: 800px;
|
|
height: 210px;
|
|
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;
|
|
}
|
|
.eachTrunkViewInRhom: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;
|
|
}
|
|
.trainTrunkViewMTL{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 400px;
|
|
height: 100%;
|
|
border-right: 1px #fff dashed;
|
|
font-size:0;
|
|
}
|
|
.trainTrunkViewMTR{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 400px;
|
|
height: 100%;
|
|
font-size: 0;
|
|
}
|
|
.trainTrunkViewMTL1{margin-left: 177px;margin-top: 28px;font-size: 0;}
|
|
.trainTrunkViewMTR1{margin-left: 34px;margin-top: 28px;font-size: 0;}
|
|
.trainTrunkViewMTL2{height: 59px;margin-left:100px;display: inline-block;}
|
|
.trainTrunkViewMTL2L{
|
|
width: 117px;
|
|
border-left: 1px #fff solid;
|
|
height: 34px;
|
|
margin-top: 25px;
|
|
border-top: 1px #fff solid;
|
|
display: inline-block;
|
|
}
|
|
.trainTrunkViewMTR2R{width: 106px;border-top: 1px #fff solid;display: inline-block;margin-top: 25px;border-right: 1px #fff solid;height: 34px;}
|
|
.trainTrunkViewMTR2{height: 59px;margin-left:75px;display: inline-block;}
|
|
.trainTrunkViewMTR2L{
|
|
width: 108px;
|
|
height: 59px;
|
|
border-left: 1px #fff solid;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border-right: 1px #fff solid;
|
|
}
|
|
.trainTrunkViewMTL2R{
|
|
width: 108px;
|
|
height: 59px;
|
|
border-left: 1px #fff solid;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border-right: 1px #fff solid;
|
|
}
|
|
.trainTrunkViewMTL3{margin-left: 65px;font-size: 0;}
|
|
.trainTrunkViewMTR3{margin-left: 34px;font-size: 0;}
|
|
.trainTrunkViewMTLEach{
|
|
padding: 10px 0px;
|
|
width:80px;
|
|
text-align:center;
|
|
font-size: 24px;
|
|
color: #5F5F5F;
|
|
border: 1px #5F5F5F solid;
|
|
display: inline-block;
|
|
letter-spacing: 4px;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
}
|
|
.trainTrunkViewDot{
|
|
position:absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
}
|
|
.trainTrunkViewLine{
|
|
width: 107px;
|
|
height: 33px;
|
|
border-top: 1px #fff solid;
|
|
margin-top: 25px;
|
|
position: relative;
|
|
}
|
|
.trainTrunkViewMB{padding: 20px 123px;}
|
|
.trainTrunkViewMBL{font-size: 40px;color: #fff;display:inline-block;margin-left: 75px;letter-spacing: 5px;}
|
|
.trainTrunkViewMBR{font-size: 40px;color: #fff;display:inline-block;float:right;margin-right:75px;letter-spacing: 5px;}
|
|
.trainTrunkViewBL{display: inline-block;}
|
|
.trainTrunkLeft{
|
|
width: 60px;
|
|
transform-origin: center center;
|
|
transform: rotate(-90deg);
|
|
cursor: pointer;
|
|
}
|
|
.trainTrunkViewB{margin-top: 20px;}
|
|
.trainTrunkViewBB{display: inline-block;float: right;}
|
|
.trainTrunkRight{
|
|
width: 60px;
|
|
transform-origin: center center;
|
|
transform: rotate(90deg);
|
|
cursor: pointer;
|
|
}
|
|
.trainTrunkViewBLIn,.trainTrunkViewBRIn{
|
|
width: 220px;
|
|
height: 50px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
}
|
|
.trainTrunkViewBLIn{margin-left: 20px;}
|
|
.trainTrunkViewBRIn{margin-right: 20px;}
|
|
.trainTrunkViewBLInRhom{
|
|
width: 100%;
|
|
height: 100%;
|
|
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;
|
|
}
|
|
.trainTrunkViewBLInRhom: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;
|
|
}
|
|
.trainTrunkViewBLInL{
|
|
position: absolute;
|
|
width: 110px;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
border-right: 1px #fff dashed;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
padding-top: 16px;
|
|
letter-spacing: 2px;
|
|
padding-left:27px;
|
|
}
|
|
.trainTrunkViewBLInR{
|
|
position: absolute;
|
|
width: 110px;
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
padding-top: 16px;
|
|
letter-spacing: 2px;
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|