1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
| <template>
| <div class="line-center-room">
| <div class="header-c-r flex color-white mt10 align-c">
| <img class="size-h-c ml30 " src="../../assets/center/icon_dw.png" alt="">
| <div class="c-r-h1 ml10">运营中心 > </div>
| <div class="dropdown ml10" tabindex ='1' @blur="showFlag=false">
| <div class="flex ju-sb detinline align-c" @click="showFlag=!showFlag">
| <div class="">{{invalid}}</div>
| <img class="icon-more-s" src="../../assets/png/icon_more@2x.png" alt="">
| </div>
|
| <div class="absolute item-box" v-show="showFlag">
| <div v-for="(item,index) in tabData" :key="index">
| <div class="color-white pl20 item-d-s" @click="checkItem(item)">{{item.name}}</div>
| </div>
| </div>
| </div>
| </div>
|
|
|
|
| </div>
| </template>
| <script>
|
|
| export default {
| name:'Passengger',
| components:{},
| data(){
| return {
| tabData:[
| {name:'客流总量',id:0},
| {name:'早高峰客流量',id:1},
| {name:'晚高峰客流量',id:2},
| {name:'非高峰客流量',id:3},
| {name:'线路最大客流',id:4},
| {name:'班次最大客流',id:5},
| {name:'线路总里程',id:6},
| {name:'线路车公里',id:7},
| {name:'营运班次',id:8},
| {name:'工作时长',id:9},
| {name:'百公里电耗',id:10},
| {name:'营运车辆',id:11},
|
| ],
| invalid:'',
| itemId:'',
| showFlag:false,
| }
| },
| methods:{
| checkItem(item){
| this.invalid=item.name;
| this.itemId=item.id;
| this.showFlag=false;
| },
| },
| mounted() {
| let item=this.tabData[0];
| this.invalid=item.name;
| this.itemId=item.id;
| },
| computed:{},
| }
| </script>
| <style scoped>
| .header-c-r{height:34px;line-height: 34px;}
| .size-h-c{width:15px;height:18px;}
| </style>
|
|
