<template>
|
<div class="v-data-board-center">
|
<v-title content="线路拥挤度" link="" />
|
<v-border-decorate :top-show="false">
|
<div class="mb20 flex align-c ju-c _line-box">
|
<div class="_echart-box">
|
<div class="_total">
|
<div class="colorfff">线路总数</div>
|
<div class="_font-Digital fz28">{{this.lineTotal}}</div>
|
</div>
|
</div>
|
|
<div
|
v-for="(item, index) in lineJamScaleData"
|
:key="index"
|
class="_echart-box"
|
>
|
<commonEcharts
|
:id="`gauge${index}`" class="__echart" width="130px" height="130px" :option="optionsData(optionColor[index], item)"
|
/>
|
<div class="__centent">
|
<div class="colorfff">
|
<div><span class="_font-Digital fz24">{{item.percentNum}}</span>%</div>
|
<div>{{item.rangeName}}</div>
|
</div>
|
<div class="_name fz12 mt15">{{item.name}}</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
</v-border-decorate>
|
<div class="flex mt5">
|
<div class="flex-1 mr24">
|
<v-title
|
content="班次完成率"
|
class="mt10"
|
:pageShow="true"
|
@handlePage="(e) => handlePage(e, 'shift')"
|
:maxNum="5"
|
:page="shiftPage"
|
>
|
</v-title>
|
|
<v-border-decorate class="mt10" :top-show="false">
|
<div class="flex _shift-box">
|
<div class="flex-1">
|
<div v-for="(item, index) in shiftData" :key="index">
|
<Item :item="item" :index="index" :rank="index" :lastWidth="50" />
|
</div>
|
</div>
|
|
|
</div>
|
</v-border-decorate>
|
</div>
|
<div class="flex-1 mr10">
|
<v-title
|
content="线路长度"
|
link=""
|
class="mt10"
|
>
|
</v-title>
|
<div class="_line-length-box">
|
<div style="position: relative">
|
<img src="../../../assets/driverappraise/pic_zhanbitu.png"/>
|
<div class="_line-total">
|
<div class="_font-Digital fz20">{{ lineTotal }}</div>
|
<div>线路总数</div>
|
</div>
|
<commonEcharts
|
id="pie" class="__echart-pie" width="130px" height="130px" :option="option"
|
/>
|
</div>
|
<div class="_drive-detail mt30 mr10">
|
<div class="flex ml30" v-for="(item, index) in option.series[0].data" :key="index">
|
<div class="_icon" :style="{background: option.series[0].color[index]}"/>
|
<span class="flex-1" style="width: 70px">{{ item.name }}</span>
|
<span><span class="_num font16 mr5">{{ item.value }}</span>条</span>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
<div class="flex mt20">
|
<div class="flex-1 mr24">
|
<v-title content="首末班准点率" :pageShow="true"
|
@handlePage="(e) => handlePage(e, 'first')"
|
:page="firstPage">
|
</v-title>
|
<v-border-decorate class="mt10">
|
<div class="mb20">
|
<Table :data="rankData" :columnName="rankName" height="11vh"/>
|
</div>
|
</v-border-decorate>
|
</div>
|
<div class="flex-1 mr10">
|
<v-title content="发车准点率排名" :pageShow="true"
|
@handlePage="(e) => handlePage(e, 'start')"
|
:page="startPage" >
|
</v-title>
|
<v-border-decorate class="mt10">
|
<div class="mb20">
|
<Table :data="startData" :columnName="startName" height="11vh"/>
|
</div>
|
</v-border-decorate>
|
</div>
|
</div>
|
|
|
</div>
|
</template>
|
<script>
|
import moment from "moment";
|
import Item from '@/components/common/table/item';
|
import Table from '@/components/common/table/table';
|
import commonEcharts from "@/components/common/echart/echart.vue";
|
import pie3 from "@/components/echart/pie3d"
|
|
export default {
|
name:'',
|
components:{ Item, Table, commonEcharts, pie3 },
|
data(){
|
return{
|
shiftData: [],
|
rankData: [],
|
startData: [],
|
lineData: [],
|
passerengerFlowList: [],
|
rankName: ['排名', '线路', '首末班准点率'],
|
startName: ['排名', '线路', '发车准点率'],
|
day1: moment().subtract(1, 'day').format("yyyy-MM-DD"),
|
// month1: moment().format("yyyy-MM"),
|
month2: moment().format("yyyy-MM"),
|
companyId: '',
|
optionColor: ['#0AFFFF', '#00ACFD', '#F5BD37', '#FF6F6A'],
|
lineTotal: 0,
|
lineJamScaleData: [],
|
shiftPage: 1, // 1前5后5
|
firstPage: 1,
|
startPage: 1,
|
lineLenTotal: 0,
|
lineName: ['<20km', '20～30km', '30～40km', '40～50km', '>50km'],
|
option: {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
show: false,
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: '线路长度',
|
type: 'pie',
|
radius: ['78%', '90%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emptyCircleStyle: {
|
|
},
|
color: ['#069EFE', '#F99854', '#13CBA8', '#F2FFFF', '#FFCD80'],
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '0',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 1048, name: '<20km' },
|
{ value: 735, name: '20～30km' },
|
{ value: 580, name: '30～40km' },
|
{ value: 484, name: '40～50km' },
|
{ value: 300, name: '>50km' }
|
]
|
}
|
]
|
}
|
}
|
},
|
watch:{
|
|
},
|
created() {
|
|
},
|
mounted() {
|
this.$bus.$on('data-date', day => {
|
this.day1 = day;
|
this.shiftLoad();
|
this.firstLastLoad();
|
this.departureload();
|
this.getLineJamScale();
|
this.getLinelength();
|
this.getPassengerFlow();
|
})
|
|
},
|
methods:{
|
handlePage(page, type) {
|
switch (type) {
|
case 'shift':
|
this.shiftPage = page;
|
this.shiftLoad()
|
break;
|
case 'first':
|
this.firstPage = page;
|
this.firstLastLoad()
|
break;
|
case 'start':
|
this.startPage = page;
|
this.departureload()
|
break;
|
|
default:
|
break;
|
}
|
|
|
},
|
shiftLoad(){
|
this.$axios.get(this.$Interface.line.getBuzheng,{
|
params: {
|
statDate: this.day1,
|
companyId: this.companyId,
|
orderLogo: this.shiftPage == 1 ? 'asc' : 'desc'
|
}
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length >0){
|
this.shiftData = res.data.map(i => {
|
return {
|
...i,
|
column1: i.lineName,
|
column2: i.ratio + '%'
|
}
|
});
|
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
firstLastLoad(){
|
this.$axios.get(this.$Interface.line.getOntimeRateFL,{
|
params: {
|
// statDate: this.month1,
|
companyId: this.companyId,
|
orderLogo: this.firstPage == 1 ? 'asc' : 'desc',
|
statDate: this.day1,
|
}
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length >0){
|
this.rankData = res.data.map(i => {
|
return {
|
...i,
|
column1: i.lineName,
|
column2: i.ratio + '%'
|
}
|
});
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
getLinelength() {
|
this.$axios.get(this.$Interface.data.lineLength, {
|
params: {
|
// statDate: this.month2,
|
companyId: this.companyId,
|
statDate: this.day1,
|
},
|
}).then(res => {
|
this.option.series[0].data = [];
|
this.lineData = res.data;
|
res.data.forEach(i => {
|
console.log(i, 'i');
|
let item = {
|
name: this.lineName[i.type],
|
value: i.amount
|
}
|
this.option.series[0].data.push(item)
|
|
})
|
|
})
|
|
},
|
departureload(){
|
this.$axios.get(this.$Interface.line.getOnTimeRate, {
|
params: {
|
// statDate: this.month2,
|
companyId: this.companyId,
|
statDate: this.day1,
|
orderLogo: this.startPage == 1 ? 'asc' : 'desc'
|
},
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length >0){
|
this.startData = res.data.map(i => {
|
return {
|
...i,
|
column1: i.lineName,
|
column2: i.ratio + '%'
|
}
|
});
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
optionsData(color, item) {
|
let options = {
|
series: [
|
{
|
type: 'gauge',
|
center: ['50%', '60%'],
|
startAngle: 235,
|
endAngle: -55,
|
min: 0,
|
max: this.lineTotal,
|
splitNumber: 12,
|
itemStyle: {
|
color: color,
|
width: 10
|
},
|
progress: {
|
show: true,
|
width: 10
|
},
|
pointer: {
|
show: false
|
},
|
axisLine: {
|
lineStyle: {
|
width: 10,
|
color: [[1, '#455A64']]
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false,
|
},
|
axisLabel: {
|
show: false,
|
},
|
anchor: {
|
show: false
|
},
|
title: {
|
show: false
|
},
|
detail: {
|
show: false,
|
valueAnimation: false,
|
},
|
data: [
|
{
|
value: item.value
|
}
|
]
|
},
|
{
|
type: 'gauge',
|
center: ['50%', '60%'],
|
startAngle: 235,
|
endAngle: -55,
|
min: 0,
|
max: this.lineTotal,
|
itemStyle: {
|
color: color,
|
width: 10
|
},
|
progress: {
|
show: true,
|
width: 8
|
},
|
pointer: {
|
show: false
|
},
|
axisLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
show: false
|
},
|
detail: {
|
show: false
|
},
|
data: [
|
{
|
value: item.value,
|
}
|
]
|
}
|
]
|
}
|
return options;
|
},
|
getLineJamScale(){
|
this.$axios.get(this.$Interface.road.getLineJamScale).then(res => {
|
let list = res.data.everyPercentList
|
list.sort((a, b) => {
|
if(typeof a.minAndMax === 'string') {
|
a.minAndMax = a.minAndMax.split('-');
|
a.minAndMax[0] = Number(a.minAndMax[0]);
|
a.minAndMax[1] = Number(a.minAndMax[1]);
|
}
|
if (typeof b.minAndMax === 'string') {
|
b.minAndMax = b.minAndMax.split('-');
|
b.minAndMax[0] = Number(b.minAndMax[0]);
|
b.minAndMax[1] = Number(b.minAndMax[1]);
|
}
|
return b.minAndMax[1] - a.minAndMax[1]
|
})
|
this.lineJamScaleData = list;
|
this.lineJamScaleData.forEach(function(item, index){
|
if(item.minAndMax[0] >= 20) {
|
item.name = '>20km/h';
|
} else {
|
item.name = `${item.minAndMax[0]}-${item.minAndMax[1]}km/h`;
|
}
|
// todo 这里需要后端配合做下调整
|
item.value = Number(item.percent.split('%')[0] * res.data.lineTotal).toFixed(0);
|
item.percentNum = +(item.percent.split('%')[0] * 100).toFixed(0);
|
});
|
this.lineTotal = res.data.lineTotal;
|
})
|
},
|
getPassengerFlow(){
|
this.$axios.get(this.$Interface.line.getPassengerFlow,{
|
params: {
|
statDate: this.day1,
|
companyId: this.companyId
|
}
|
}).then(res => {
|
if(res.code == 0){
|
if(res.data && res.data.length > 0){
|
this.passerengerFlowList = res.data.map(i => {
|
return {
|
...i,
|
column1: i.lineName,
|
column2: i.ratio + '%'
|
}
|
});
|
} else {
|
this.$message({
|
message: '获取数据为空',
|
type: 'warning'
|
});
|
return;
|
}
|
} else {
|
this.$message({
|
message: '服务器获取数据异常',
|
type: 'error'
|
});
|
return;
|
}
|
})
|
},
|
|
|
|
},
|
activated() {
|
this.shiftLoad();
|
this.firstLastLoad();
|
this.departureload();
|
this.getLineJamScale();
|
this.getLinelength();
|
this.getPassengerFlow();
|
|
},
|
}
|
</script>
|
<style lang="less">
|
.v-data-board-center {
|
._shift-box {
|
padding-bottom: 10px;
|
height: calc(20vh - 42px);
|
}
|
._line-total {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-25%, -20%);
|
text-align: center;
|
color: #fff;
|
}
|
._line-length-box {
|
display: flex;
|
align-items: center;
|
position: relative;
|
height: '15vh';
|
.__echart-pie {
|
margin-left: 28px;
|
margin-top: 38px;
|
|
}
|
img {
|
position:absolute;
|
top: 10px
|
}
|
|
}
|
._line-box {
|
height: 12vh;
|
min-height: 140px;
|
}
|
._total {
|
background: url('../../../assets/imgs/bg_xianluzongshu.png') no-repeat;
|
background-size: 100%;
|
width: 138px;
|
height: 84px;
|
color: #43DEEF;
|
text-align: center;
|
padding-top: 15px;
|
|
|
}
|
._echart-box {
|
width: 20%;
|
position: relative;
|
.__echart {
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, 0);
|
top: -20px
|
}
|
.__centent {
|
background: url('../../../assets/imgs/bg_zhuangshi.png') no-repeat;
|
width: 120px;
|
background-size: 100%;
|
padding-top: 28px;
|
height: 120px;
|
text-align: center;
|
margin: 0 auto;
|
|
}
|
._name {
|
color: #00F4ED
|
}
|
|
}
|
|
|
}
|
</style>
|
