<template>
|
<div class="v-data-board-left">
|
<v-title content="站点间拥堵排名" :link="`/stationCongestionTable?prop=runningSpeed&order=ascending`" />
|
<v-border-decorate class="mt10">
|
<div class="mb20" style="padding: 10px 0;">
|
<v-roll-list
|
v-if="siteRankList.length > 0"
|
:data="siteRankList"
|
height="14vh"
|
:column-height="40"
|
:wait-time="2000"
|
:min-lenght="4"
|
|
>
|
<template #default="{ row, index }">
|
<div class="_site-box">
|
<div class="_site-rank">No.{{index+1}}</div>
|
<div class="fz14 ml20 _ws-te _site-name">{{row.leaveStationName}} - {{ row.arriveStationName }}</div>
|
<v-progress-rank :rankIndex="index > 2 ? 'more' : index+1" :percent="7*(12 - index)" />
|
<div class="_site-time"><span class="_font-Digital fz16">{{row.avgSpeed}}</span>km/h</div>
|
</div>
|
</template>
|
</v-roll-list>
|
</div>
|
</v-border-decorate>
|
<v-title content="客流总量排名" :pageShow="true" @handlePage="handleFlowPage" :page="flowPage" class="mt20">
|
</v-title>
|
<v-border-decorate class="mt10">
|
<div class="mb20" style="padding: 10px 0;">
|
<v-roll-list
|
v-if="passerengerFlowList.length > 0"
|
:data="passerengerFlowList"
|
height="14vh"
|
:column-height="40"
|
:min-lenght="4"
|
:wait-time="2000"
|
|
>
|
<template #default="{ row, index }">
|
<div class="_site-box">
|
<div class="_site-rank">No.{{index+1}}</div>
|
<div class="fz14 ml20 _ws-te _site-name">{{row.lineName}}</div>
|
<v-progress-rank :rankIndex="index > 2 ? 'more' : index+1" :percent="7*(12 - index)" />
|
<div class="_site-time"><span class="_font-Digital fz16">{{row.amount}}</span></div>
|
</div>
|
</template>
|
</v-roll-list>
|
</div>
|
</v-border-decorate>
|
<v-title content="线路拥堵排名" class="mt20" :link="`/roadCongestionTable?prop=runningSpeed&order=ascending`" />
|
<v-border-decorate class="mt10" >
|
<v-roll-list
|
v-if="lineRankList.length > 0"
|
:data="lineRankList"
|
height="14vh"
|
:column-height="40"
|
:min-lenght="4"
|
:wait-time="2000"
|
style="padding: 5px 0;"
|
|
>
|
<template #default="{ row, index }">
|
<div class="_line-box">
|
<div :class="`_icon-${index > 2 ? 'more' : index+1 }`">{{index+1}}</div>
|
<div class="ml10 mr20 _ws-te _line-name">{{row.lineName}}</div>
|
<div class="_line-rank" :style="{width: index * 6 + '%'}"></div>
|
<div><span class="fz16 _font-Digital">{{row.avgSpeed}}</span>km/h</div>
|
</div>
|
</template>
|
</v-roll-list>
|
</v-border-decorate>
|
</div>
|
</template>
|
<script>
|
import * as echarts from "echarts";
|
import moment from "moment";
|
|
export default {
|
name:'',
|
components:{},
|
data(){
|
return{
|
siteRankList: [],
|
lineRankList: [],
|
passerengerFlowList: [],
|
flowPage: 1,
|
day: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
|
}
|
},
|
watch:{
|
|
},
|
created() {
|
|
},
|
mounted() {
|
this.$bus.$on('data-date', day => {
|
this.day = day;
|
this.siteRankData();
|
this.getPassengerFlow();
|
this.lineRankData();
|
})
|
|
},
|
methods:{
|
siteRankData(){
|
this.$axios.get(this.$Interface.road.getStationJamRank, {
|
params: {
|
statDate: this.day,
|
}
|
|
}).then(res => {
|
this.siteRankList = res.data;
|
})
|
},
|
getPassengerFlow(){
|
this.$axios.get(this.$Interface.line.getPassengerFlow,{
|
params: {
|
statDate: this.day,
|
companyId: this.companyId,
|
orderLogo: this.flowPage == 1 ? 'asc' : 'desc'
|
}
|
}).then(res => {
|
this.passerengerFlowList = res.data.rank;
|
})
|
},
|
lineRankData(){
|
this.$axios.get(this.$Interface.road.getLineJamRank, {
|
params: {
|
statDate: this.day,
|
}
|
|
}).then(res => {
|
this.lineRankList = res.data;
|
})
|
},
|
handleFlowPage(page) {
|
this.flowPage = page;
|
this.getPassengerFlow();
|
},
|
},
|
activated() {
|
this.siteRankData();
|
this.lineRankData();
|
this.getPassengerFlow();
|
},
|
destroyed() {
|
this.$bus.$off('data-date');
|
}
|
}
|
</script>
|
<style lang="less">
|
.v-data-board-left {
|
color: #fff;
|
._site-box {
|
position: relative;
|
display: flex;
|
height: 22px;
|
line-height: 22px;
|
padding: 20px 0 15px 0;
|
align-items: center;
|
._site-rank {
|
color: #5179AC;
|
font-size: 16px;
|
}
|
._site-name {
|
flex: 1;
|
}
|
._site-time {
|
position: absolute;
|
top: -5px;
|
right: 0;
|
}
|
}
|
._line-box {
|
position: relative;
|
display: flex;
|
height: 22px;
|
line-height: 22px;
|
padding: 15px 0;
|
align-items: center;
|
._line-name {
|
flex: 1;
|
}
|
._line-rank {
|
height: 6px;
|
background: linear-gradient(90deg,#43e0f1, rgba(64,223,248,0.00));
|
border-radius: 3px;
|
}
|
}
|
|
|
}
|
</style>
|
