<template>
|
<div class="flex-a op8">
|
<div class="flex ju-sa items-box">
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt1.png" alt="">
|
<div class="color-white">累计客流</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{allData.cumulativePassengerFlow}}</div>
|
</div>
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt2.png" alt="">
|
<div class="color-white">运营车辆</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{allData.todayRunningVehicle}}</div>
|
</div>
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt3.png" alt="">
|
<div class="color-white">班次数量</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{allData.operateShift}}</div>
|
</div>
|
</div>
|
<div class="flex ju-sa items-box">
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt4.png" alt="">
|
<div class="color-white">营运里程</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{allData.mileageAccumulated}}</div>
|
</div>
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt5.png" alt="">
|
<div class="color-white">计划里程完成率</div>
|
</div>
|
<div class="big-fz fz20 text_center"> {{decimal(allData.plannedMileageCompletionRate,2)}}<span class="fz12 ml5">%</span></div>
|
</div>
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt6.png" alt="">
|
<div class="color-white">百公里电耗</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{allData.powerConsumption}} <span class="fz12 ml5">%</span> </div>
|
</div>
|
</div>
|
<div class="flex ju-sa items-box">
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt7.png" alt="">
|
<div class="color-white">G班完成率</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{decimal(accMul(allData.completionRateG ,100),2)}} <span class="fz12 ml5">%</span> </div>
|
</div>
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt8.png" alt="">
|
<div class="color-white">保障班完成率 </div>
|
</div>
|
<div class="big-fz fz20 text_center">{{ decimal(accMul(allData.completionRateP , 100),2)}}<span class="fz12 ml5">%</span> </div>
|
</div>
|
<div class="item1 box-border">
|
<div class="flex t-box">
|
<img class="item-sm-img ml10 mr10" src="../assets/index/ilt9.png" alt="">
|
<div class="color-white">发车准点率</div>
|
</div>
|
<div class="big-fz fz20 text_center">{{allData.onTimeRate}} <span class="fz12 ml5">%</span> </div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'leftTop',
|
props: {
|
height: {
|
type: String,
|
default: '330px',
|
},
|
width: {
|
type: String,
|
default: '330px',
|
},
|
timetop:{
|
type: String,
|
default: 'day',
|
}
|
},
|
data() {
|
return {
|
authFlag: false,//总公司为true，分公司为false
|
allData: {
|
busLineCount: 0,
|
busOwnership: 0,
|
completionRateG: 0,
|
completionRateP: 0,
|
cumulativePassengerFlow: 0,
|
mileageAccumulated: 0,
|
onTimeRate: 0,
|
operateShift: 0,
|
plannedMileageCompletionRate: 0,
|
powerConsumption: 0,
|
siteCount: 0,
|
speed: 0,
|
todayRunningVehicle: 0,
|
}
|
}
|
},
|
created() {},
|
computed: {},
|
watch: {},
|
methods: {
|
init() {
|
this.getDataList();
|
let companyFlag = localStorage.getItem('companyId');
|
if (companyFlag && companyFlag != 1) {
|
this.authFlag = true;
|
} else {
|
this.authFlag = false;
|
}
|
},
|
getDataList(timetop) {
|
let companyId = '';
|
if (this.$store.state.parentCompany) {
|
companyId = localStorage.getItem('companyId') || '';
|
} else {
|
companyId = this.$store.state.companyId
|
}
|
timetop=timetop||'day'
|
this.$axios.get(`${this.$Interface.overall}?companyId=${companyId}&timeLogo=${timetop}`).then(res => {
|
this.allData = res.data;
|
})
|
},
|
},
|
activated() {
|
this.init();
|
},
|
}
|
</script>
|
<style scoped>
|
.item-sm-img{width:16px;height:16px;}
|
|
.left1s{height:30px;line-height: 30px;color:#fff;}
|
.title-bg-t {
|
background: rgba(255, 255, 255, 0.1);
|
font-size: 10px;
|
}
|
.font-se {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.big-fz {
|
color: #fff;
|
font-family: 'Digital';
|
}
|
.flex-a {
|
display: flex;
|
height: 22vh;
|
justify-content: space-between;
|
flex-direction: column;
|
}
|
.al-cen {
|
align-items: center;
|
}
|
.item1 {
|
width: 29%;
|
display: flex;
|
flex-direction: column;
|
height: 6.5vh;
|
font-size:14px;
|
|
}
|
.box-border{
|
border:1px solid #5595e0;
|
}
|
.t-box{height:26px;align-items: center;
|
background: linear-gradient(90deg,rgba(46,184,247,0.3), rgba(47,193,255,0));}
|
.font-dw {
|
color: #fff;
|
opacity: 0.7;
|
display: table-cell;
|
vertical-align: bottom;
|
padding-top: 7px;
|
margin-left: 8px;
|
}
|
</style>
|
