|
<template>
|
<div class="v-center">
|
<div class="right-box">
|
<div class="left-mar"></div>
|
<div class="r-center">
|
|
<div class="div-h1">
|
<v-title-home :content="title.t1"
|
:link="title.link1"
|
:more-show="true"
|
@choseDate="checkData1"></v-title-home>
|
<div class="mt15">
|
<leftTop ref="leftTop"></leftTop>
|
</div>
|
</div>
|
|
<div class="title-bg"></div>
|
|
<div class="div-h2 mt15">
|
<v-title-home :content="title.t2"
|
:link="title.link2"
|
@choseDate="checkData2"></v-title-home>
|
|
<div class="zx-title-bg">
|
<div class="flex ju-sb boxs-zx align-c color-white ">
|
<div>客流总量</div>
|
<div class="col-lan fz24 digi">{{ totalPeople }}</div>
|
</div>
|
</div>
|
<div class="echartdiv">
|
<Lines :height="btHeight"
|
:option="optiontop_kl"
|
:width="btWidth"
|
id="barTop10"></Lines>
|
</div>
|
</div>
|
<div class="div-h3">
|
<div class="flex ml20 color-white ju-c">
|
<div class="btn-ck"
|
:class="operateIdx == 0 ? 'active' : ''"
|
@click="checkBtn(0)">线路客流top10</div>
|
<div class="btn-ck"
|
:class="operateIdx == 1 ? 'active' : ''"
|
@click="checkBtn(1)">站点客流top10</div>
|
<div class="btn-ck"
|
:class="operateIdx == 2 ? 'active' : ''"
|
@click="checkBtn(2)">换乘站点top10</div>
|
</div>
|
|
<div class="flex">
|
<div class="psa">
|
<div class="item-pf flex ju-sa color-white">
|
<div class="sbx">排名</div>
|
<div class="sbx">{{ operateIdx == 0 ? '路线' : '站点'}}</div>
|
<div class="sbx">今日客流</div>
|
</div>
|
|
<div v-for="(item,index) in lineList.slice(0, 5)"
|
:key="index"
|
class="item-pf flex ju-sa t-center"
|
:class="index === 1|| index ==3 ||index==5 ?'bg5':''">
|
<div class="sbx flex">
|
<div :class="'px_'+index">{{index+1}}</div>
|
</div>
|
<div class="sbx color-white fz14">{{item.column1}}</div>
|
<div class="sbx fon-s digi mt3">{{item.column2}}</div>
|
</div>
|
</div>
|
|
<div class="psa"
|
v-if="lineList.length > 5 ">
|
<div class="item-pf flex ju-sa color-white">
|
<div class="sbx">排名</div>
|
<div class="sbx">站点</div>
|
<div class="sbx">今日客流</div>
|
</div>
|
<div v-for="(item,index) in lineList.slice(5, 10)"
|
:key="index"
|
class="item-pf flex ju-sa t-center"
|
:class="index === 1|| index ==3 ||index==5 ?'bg5':''">
|
<div class="sbx flex">
|
<div :class="'px_'+index">{{index+6}}</div>
|
</div>
|
<div class="sbx color-white fz14">{{item.column1}}</div>
|
<div class="sbx fon-s digi mt3">{{item.column2}}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<div class="title-bg"></div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import barTop10 from '../components/echart/barTop10'
|
import Lines from '../components/echart/line'
|
import pie6 from '../components/echart/bar6'
|
import leftTop from '../components/leftTop'
|
import moment from 'moment'
|
export default {
|
name: 'rightBox',
|
data () {
|
return {
|
companyId: '',
|
datalistPm: [],
|
operateIdx: 0,
|
timeIndex: 'day',
|
barTop10: "barTop10",
|
heightPie: "22vh",
|
widthPie: "100%",
|
btWidth: '100%',
|
btHeight: "22vh",
|
lineList: [],
|
siteList: [],
|
totalPeople: 0, // 客流总量
|
optiontop_kl: {
|
xData: [],
|
legendData: ['早高峰', '晚高峰', '平峰'],
|
yData: []
|
},
|
title: {
|
t1: '营运概况',
|
t2: '客流总量统计',
|
link1: 'operateC',
|
link2: '/branchOfficeResource?sence=1&prop=sumVolumePeople&order=descending',
|
},
|
|
}
|
},
|
|
methods: {
|
|
getData2 () {
|
this.$axios.get(`${this.$Interface.totalPassengerFlow}?companyId=${this.companyId}&timeLogo=${this.timeIndex}`).then(res => {
|
this.optiontop_kl.xData = [];
|
this.optiontop_kl.yData = [];
|
let arr1 = [];
|
let arr2 = [];
|
let arr3 = [];
|
this.totalPeople = res.data.totalPeople;
|
if (res.data && res.data.timePeople.length > 0) {
|
res.data.timePeople.map(item => {
|
if (this.timeIndex == 'day') {
|
this.optiontop_kl.xData.push(item.times);
|
} else if (this.timeIndex == 'week') {
|
this.optiontop_kl.xData.push(moment(item.stat_date).format('MM-DD'));
|
} else {
|
this.optiontop_kl.xData.push(moment(item.times).format('MM-DD'));
|
}
|
|
arr1.push(item.morning);
|
arr2.push(item.evening);
|
arr3.push(item.flat);
|
});
|
this.optiontop_kl.yData.push({ data: arr1 });
|
this.optiontop_kl.yData.push({ data: arr2 });
|
this.optiontop_kl.yData.push({ data: arr3 });
|
}
|
})
|
},
|
checkData1 (num) {
|
let a = ['day', 'week', 'month'];
|
this.$refs.leftTop.getDataList(a[num]);
|
},
|
checkData2 (index) {
|
let a = ['day', 'week', 'month'];
|
this.timeIndex = a[index];
|
this.getData2();
|
},
|
checkBtn (index) {
|
this.operateIdx = index;
|
this.siteList = [];
|
this.lineList = [];
|
switch (index) {
|
case 0:
|
this.checkZeo();
|
break;
|
case 1:
|
this.checkFir();
|
break;
|
case 2:
|
this.checkSec();
|
break;
|
}
|
},
|
checkZeo () {//客流top10
|
this.$axios.get(this.$Interface.line.getPassengerFlow, { params: { companyId: this.companyId || '' } }).then(res => {
|
if (res.data && res.data.rank && res.data.rank.length > 0) {
|
this.lineList = res.data.rank.map(item => {
|
return {
|
column1: item.lineName,
|
column2: item.amount,
|
}
|
});
|
}
|
|
})
|
|
},
|
checkFir () {//站点top10
|
this.$axios.get(this.$Interface.center.site, { params: { companyId: this.companyId || '' } }).then(res => {
|
if (res.data && res.data.siteVolumePeoplTop5 && res.data.siteVolumePeoplTop5.length > 0) {
|
this.lineList = res.data.siteVolumePeoplTop5.map(item => {
|
return {
|
column1: item.station_name,
|
column2: item.sum1,
|
}
|
});
|
}
|
});
|
},
|
checkSec () {//换乘top10
|
this.$axios.get(`${this.$Interface.transferTop}`, { params: { companyId: this.companyId || '' } }).then(res => {
|
console.log(res, 'res');
|
this.lineList = res.data.map(item => {
|
return {
|
column1: item.stationName,
|
column2: item.transferVolume,
|
}
|
});
|
|
});
|
},
|
init () {
|
if (this.$store.state.parentCompany) {
|
this.companyId = localStorage.getItem('companyId') || '';
|
} else {
|
this.companyId = this.$store.state.companyId
|
}
|
this.getData2();
|
this.checkBtn(0);
|
},
|
},
|
activated () {
|
|
this.init();
|
|
},
|
components: { barTop10, pie6, leftTop, Lines }
|
}
|
</script>
|
<style scoped>
|
.item-pf {
|
height: 28px;
|
line-height: 28px;
|
width: 100%;
|
}
|
.icon-size-r {
|
width: 10px;
|
height: 10px;
|
}
|
.fon-s {
|
font-size: 22px;
|
text-align: center;
|
color: #00e7ee;
|
line-height: 22px;
|
}
|
.zx-title-bg {
|
width: 456px;
|
height: 40px;
|
background: url("./../assets/newImg/zx-bg-t.png") no-repeat center/cover;
|
margin: 5px auto 0;
|
}
|
.boxs-zx {
|
width: 386px;
|
height: 40px;
|
align-items: center;
|
margin: 0 auto;
|
}
|
.psa {
|
flex: 1;
|
}
|
.bg5 {
|
background: rgba(115, 172, 230, 0.15);
|
}
|
.px_0 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #bebcf1;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.px_1 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #00ffff;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.px_2 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #d8a440;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.px_3 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #389bc7;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.px_4 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #389bc7;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.px_5 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #389bc7;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.px_6 {
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background: #389bc7;
|
display: flex;
|
align-items: center;
|
margin: 0 auto;
|
justify-content: center;
|
}
|
.sbx {
|
width: 33%;
|
text-align: center;
|
align-items: center;
|
height: 28px;
|
overflow: hidden;
|
}
|
.btn-ck {
|
width: 112px;
|
height: 20px;
|
background: url("../assets/newImg/check_echarts.png") no-repeat center/cover;
|
text-align: center;
|
line-height: 20px;
|
font-size: 12px;
|
opacity: 0.8;
|
}
|
.btn-ck.active {
|
opacity: 1;
|
background-image: url("../assets/newImg/check_echarts_active.png");
|
}
|
@keyframes rotate {
|
from {
|
transform: rotate(0deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
.right-box {
|
width: 100%;
|
background: rgba(3, 11, 22, 0.5);
|
height: calc(100% - 120px);
|
position: relative;
|
top: 60px;
|
z-index: 1;
|
}
|
.left-mar {
|
width: 8px;
|
}
|
.r-center {
|
height: 100%;
|
}
|
.div-h1 {
|
height: 28vh;
|
width: 100%;
|
}
|
.div-h2 {
|
height: 32vh;
|
width: 100%;
|
}
|
.div-h3 {
|
height: 22vh;
|
width: 100%;
|
}
|
</style>
|
