<template>
|
<div class="v-data-board-right">
|
<v-title-home content="客流总量" :showDateFlag="false" :moreShow="false" :link="`/branchOfficeResource?sence=1&prop=sumVolumePeople&order=descending`">
|
<div class="_picker">
|
<el-date-picker
|
v-model="date"
|
:clearable="false"
|
value-format="yyyy-MM-dd"
|
type="date"
|
@change="flowTotalLoad"
|
>
|
</el-date-picker>
|
</div>
|
|
</v-title-home>
|
<div class="mt10 flex">
|
<div class="flex-1">
|
<div class="zx-title-bg mt10">
|
<div class="flex ju-sb boxs-zx align-c color-white ">
|
<div class="flex-1">客流总量</div>
|
<div class="col-lan fz24 digi">{{peopleData.cumulativePassengerFlow || 0}}</div>
|
<div class="ml5">人次</div>
|
</div>
|
</div>
|
<div class="mt5 t-center _total-box">
|
<div>
|
<div
|
:class="totalType != 1 ? '_select-no' : ''"
|
class="_select-btn"
|
@click="handleTotal(1)"
|
>峰时统计</div>
|
<div
|
:class="totalType == 1 ? '_select-no' : ''"
|
class="_select-btn ml10"
|
@click="handleTotal(2)"
|
>最大客流统计</div>
|
<div class="_carousel">
|
<el-carousel :interval="4000" type="card" height="120px">
|
<el-carousel-item class="bg-c" v-for="(item, index) in totalData" :key="index">
|
<div :class="`_car${item.id}`" :style="{color: item.color}">{{peopleData[item.num] || 0}}</div>
|
<div :style="{color: item.color}" class="mt10">{{index}}</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="title-bg"></div>
|
<v-title-home class="mt10" content="线路客流排行" :showDateFlag="false" :moreShow="false" :link="`/branchOfficeResource?sence=3&order=descending&prop=sumVolumePeople`">
|
</v-title-home>
|
<div class="mt10 flex">
|
<div class="flex-1">
|
<div class="zx-title-bg">
|
<div class="flex ju-sb boxs-zx align-c color-white ">
|
<div class="flex-1">运营线路数</div>
|
<div class="col-lan fz24 digi">{{lineList.lineNum || '0'}}</div>
|
<div class="ml5">条</div>
|
</div>
|
</div>
|
<div class="flex ml10 mr10" v-if="lineList.rank.length">
|
<Table
|
:lastWidth="50"
|
class="flex-1"
|
:data="lineList.rank.length > 4 ? lineList.rank.slice(0,5) : lineList.rank"
|
height="13vh"
|
:columnName="lineName"
|
:isRoll="false"
|
:columnHeight="23"
|
/>
|
<Table
|
:lastWidth="50"
|
class="flex-1 ml8"
|
v-if="lineList.rank.length > 5"
|
:data="lineList.rank.slice(5,10)"
|
height="13vh"
|
:columnName="lineName"
|
:isRoll="false"
|
:initial="5"
|
:columnHeight="23"
|
/>
|
</div>
|
</div>
|
|
</div>
|
<div class="title-bg"></div>
|
<div class="flex mt10">
|
<div class="flex-1">
|
<v-title-home content="站点客流排行" :showDateFlag="false" :moreShow="false" :link="`/branchOfficeResource?sence=5`">
|
</v-title-home>
|
<div class="mt10">
|
<div class="zx-title-bg">
|
<div class="flex ju-sb boxs-zx align-c color-white ">
|
<div class="flex-1">站点数量</div>
|
<div class="col-lan fz24 digi">{{ arrTop5.siteCount || '0' }}</div>
|
<div class="ml5">个</div>
|
</div>
|
</div>
|
<div class="flex ml10 mr10" v-if="arrTop5.siteVolumePeoplTop5.length">
|
<Table
|
class="flex-1"
|
:data="arrTop5.siteVolumePeoplTop5.length > 4 ? arrTop5.siteVolumePeoplTop5.slice(0,5) : arrTop5.siteVolumePeoplTop5"
|
:lastWidth="50"
|
:columnName="siteName"
|
:isRoll="false"
|
:columnHeight="23"
|
height="13vh"
|
/>
|
<Table
|
class="flex-1 ml8"
|
height="13vh"
|
:lastWidth="50"
|
v-if="arrTop5.siteVolumePeoplTop5.length > 5"
|
:data="arrTop5.siteVolumePeoplTop5.slice(5,10)"
|
:columnName="siteName"
|
:isRoll="false"
|
:initial="5"
|
:columnHeight="23"
|
/>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<div class="title-bg"></div>
|
</div>
|
</template>
|
<script>
|
import moment from "moment";
|
import Table from '@/components/common/table/table';
|
import pie3d from "@/components/echart/pie3d";
|
import companyJson from '../../assets/json/fgsmarkers'
|
|
import circleProgress from '@/components/common/progress/circle';
|
|
export default {
|
name:'',
|
components:{ Table, pie3d, circleProgress },
|
data(){
|
return{
|
date: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
lineName: ['排名', '线路', '客流'],
|
siteName: ['排名', '站点', '客流'],
|
invalId: '',
|
invalName: '总公司',
|
totalType: 1,
|
companyData: [],
|
peopleData: {}, // 客流统计
|
arrTop5: {
|
siteCount: 0,//站点数量
|
siteVolumePeoplTop5: [],//前5站点客流
|
},
|
passerengerFlow: {
|
rank: [],
|
sumPeople: ''
|
},
|
indicatorCompletion: {//考核指标
|
powerConsumption: 0, //百公里电耗
|
complainYesterday: 0, //昨日投诉数
|
cumulativePassengerFlow: 0, //客流总量
|
onTimeRate: 0, //班次发车准点率
|
onTimeRateFL: 0, //首末班准点率
|
todayRunningVehicle: 0, //今日运行车辆数-总/分
|
yesterdayCompletionRate: 0, //昨日班次完成率
|
yesterdayOperateShift: 0, //昨日营运班次
|
},
|
indicatorCompletionStatic: {//昨日营运执行
|
'yesterdayOperateShift': {
|
name: '昨日营运班次',
|
img: 'icon_zuoriyingyunbanci',
|
unit: '班',
|
link: ''
|
},
|
'onTimeRateFL': {
|
name: '首末班车准点率',
|
img: 'icon_shoumobanchezhundianlv',
|
unit: '%',
|
link: '/branchOfficeResource?sence=7'
|
},
|
'complainYesterday': {
|
name: '昨日投诉数量',
|
img: 'icon_zuoritousushuliang',
|
unit: '次',
|
link: '/customer'
|
},
|
'onTimeRate': {
|
name: '班次发车准点率',
|
img: 'icon_bancifachezhundianlv',
|
unit: '%',
|
link: '/branchOfficeResource?sence=7'
|
},
|
'yesterdayCompletionRate': {
|
name: '昨日班次完成率',
|
img: 'icon_zuoribanciwanchenglv',
|
unit: '%',
|
link: '/branchOfficeResource?sence=7'
|
},
|
'todayRunningVehicle': {
|
name: '车辆总数',
|
img: 'icon_cheliangzongshu',
|
unit: '辆',
|
},
|
'powerConsumption': {
|
name: '百公里电耗',
|
img: 'icon_baigonglidianhao',
|
unit: '度',
|
},
|
'cumulativePassengerFlow': {
|
name: '客流总量',
|
img: 'icon_keliuzongliang',
|
unit: '人次',
|
}
|
},
|
lineList: [],
|
peakTimeData: {
|
'早高峰客流总量': {
|
num: 'mornPeakVolumePeopl',
|
id: 3,
|
color: '#2F9EFB',
|
},
|
'晚高峰客流总量': {
|
num: 'evePeakVolumePeopl',
|
id: 2,
|
color: '#FED5AF',
|
},
|
'平峰客流总量': {
|
num: 'flatHumpVolumePeopl',
|
id: 1,
|
color: '#53F9F9',
|
},
|
},
|
maxFlowData: {
|
'单线路MAX': {
|
num: 'lineMaxVolumePeopl',
|
id: 1,
|
color: '#53F9F9',
|
},
|
'单班MAX': {
|
num: 'arrangeMaxVolumePeopl',
|
id: 2,
|
color: '#FED5AF',
|
},
|
'单站点MAX': {
|
num: 'stationMaxVolumePeopl',
|
id: 3,
|
color: '#2F9EFB',
|
},
|
|
},
|
}
|
},
|
watch:{
|
|
},
|
created() {
|
|
},
|
computed: {
|
totalData() {
|
if(this.totalType == 1) {
|
return this.peakTimeData
|
} else {
|
return this.maxFlowData
|
}
|
}
|
},
|
activated() {
|
this.companyData = [];
|
let str = JSON.stringify(companyJson.datas);
|
this.companyData = JSON.parse(str);
|
this.companyData.unshift({companyId: '', companyName: '总公司'});
|
this.flowTotalLoad();
|
this.dataLoad();
|
this.getPassengerFlow();
|
|
},
|
methods:{
|
flowTotalLoad() {
|
this.$axios.get(this.$Interface.center.passengerFlow, {
|
params: {
|
statDate: this.date
|
}
|
}).then(res => {
|
if(res.data){
|
this.peopleData = res.data;
|
}
|
});
|
},
|
getPassengerFlow(){
|
this.$axios.get(this.$Interface.line.getPassengerFlow,{
|
params: {
|
statDate: this.day2 || '',
|
companyId: this.companyId || ''
|
}
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data){
|
this.lineList = res.data;
|
this.lineList.rank = res.data.rank.map(i => {
|
return {
|
...i,
|
column1: i.lineName,
|
column2: i.amount
|
}
|
});
|
}
|
}
|
})
|
},
|
handleClick(item) {
|
let link = item.link ? item.link : `/branchOfficeResource?sence=1&companyId=${this.invalId || 1}`;
|
this.$router.push(link);
|
},
|
handleTotal(type) {
|
this.totalType = type;
|
},
|
dataLoad() {
|
this.$axios.get(this.$Interface.center.site).then(res => {
|
this.arrTop5 = res.data || {};
|
this.arrTop5.siteVolumePeoplTop5 = this.arrTop5.siteVolumePeoplTop5.map(i => {
|
return {
|
...i,
|
column1: i.station_name,
|
column2: i.sum1
|
}
|
|
})
|
});
|
}
|
|
}
|
}
|
</script>
|
<style lang="less">
|
.v-data-board-right {
|
width: 100%;
|
._total-box {
|
height: 17vh;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
._carousel {
|
padding-top: 10px;
|
height: 125px;
|
width: 380px;
|
margin: 0 auto;
|
.el-carousel__mask{display:none !important;}
|
.el-carousel__indicators--outside{display:none !important;}
|
.el-icon-arrow-right,.el-icon-arrow-left{display:none !important;}
|
.bg-c {
|
width: 170px;
|
}
|
._car2, ._car1, ._car3{
|
width:160px;
|
height:81px;
|
background:url("../../assets/operateImg/bg_1.png") no-repeat center/100%;
|
text-align: center;
|
line-height: 120px;
|
font-family: Digital;
|
font-size:24px;
|
margin:0 auto;
|
};
|
._car1 {
|
background:url("../../assets/operateImg/bg_2.png") no-repeat center/100%;
|
}
|
._car2 {
|
background:url("../../assets/operateImg/bg_3.png") no-repeat center/100%;
|
}
|
}
|
}
|
.flex-1 {
|
flex: 1
|
}
|
._select-btn {
|
border: 1px solid #0268c9;
|
background: #03204f;
|
color: #fff;
|
position: relative;
|
display: inline-block;
|
cursor: pointer;
|
padding: 0 20px;
|
&::before, &::after {
|
content: '';
|
width: 0px;
|
height: 0px;
|
position: absolute;
|
top: 50%;
|
transform: translate(0, -50%);
|
background: linear-gradient(180deg,#ffe3c4, #fdc392);
|
border-top: 4px solid transparent;
|
border-bottom: 4px solid transparent;
|
border-radius: 1px;
|
filter: drop-shadow(0px 0px 8px rgba(251,207,163,0.60));
|
}
|
&::before {
|
border-left: 4px solid #fefdd6;
|
left: -1px;
|
|
}
|
&::after {
|
border-right: 4px solid #fefdd6;
|
right: -1px;
|
}
|
|
}
|
._select-no {
|
opacity: 0.6;
|
}
|
.__green {
|
color: #53F9F9
|
}
|
._indicator-box {
|
display: flex;
|
height: 17vh;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
color: #fff;
|
.__right {
|
width: 50%;
|
align-items: center;
|
._icon-img {
|
width: 2vw;
|
}
|
display: flex;
|
&:nth-child(2n) {
|
padding-left: 10px;
|
}
|
}
|
}
|
._picker {
|
position: relative;
|
right: 0px;
|
bottom: 0px;
|
.el-input__inner {
|
width: 124px;
|
height: 32px;
|
background: none;
|
border: none;
|
border-radius: 2px;
|
text-align: center;
|
color: #fff
|
}
|
.el-input--prefix .el-input__inner {
|
padding-left: 25px;
|
padding-right: 15px;
|
}
|
.el-input__prefix {
|
|
}
|
.el-date-editor.el-input {
|
width: 116px;
|
}
|
}
|
.zx-title-bg{
|
width:456px;height:40px;background: url("../../assets/newImg/zx-bg-t.png")no-repeat center/cover;
|
position: relative;
|
left: 50%;
|
transform: translate(-50%,0);
|
.boxs-zx{width:386px;height:40px;align-items: center;margin: 0 auto;}
|
}
|
.g-table-filter input {
|
height: 28px;
|
}
|
.el-input__icon {
|
line-height: 28px;
|
}
|
.box-center-qk{
|
color:#b3d9ff;
|
font-size:14px;
|
width:452px;
|
margin:0 auto;
|
.bg-tip-qk{
|
width:220px;height:20px;background: linear-gradient(90deg,rgba(56,175,242,0.00), rgba(56,175,242,0.3));
|
.point-lan{width:6px;height:6px;background:#A7D0FF;}
|
|
.num-r{color:#03BBF2;font-weight: 700;font-size: 16px;margin-left: 8px;}
|
}
|
|
}
|
|
}
|
</style>
|
