<template>
|
<div class="flex-a op8">
|
<div class="flex ju-sa items-box">
|
<div class="item1 bg-t1">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">线路条数</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.busLineCount}}</div>
|
<div class="font-dw fz12">条</div>
|
</div>
|
</div>
|
</div>
|
<div class="item1 bg-t2">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">车辆数</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.carNum}}</div>
|
<div class="font-dw fz12">辆</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="item1 bg-t3">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">场站数</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.siteNum}}</div>
|
<div class="font-dw fz12">个</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex ju-sa items-box">
|
|
<div class="item1 bg-t4">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">司机数</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.driverNum}}</div>
|
<div class="font-dw fz12">人</div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="item1 bg-t5">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">充电桩数</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.chongDian }}</div>
|
<div class="font-dw fz12">个</div>
|
</div>
|
</div>
|
</div>
|
|
|
|
<div class="item1 bg-t6">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">客流计数器数量</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.counter}}</div>
|
<div class="font-dw fz12">个</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex ju-sa items-box">
|
|
<div class="item1 bg-t7">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">can总线安装数量</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.canZong}}</div>
|
<div class="font-dw fz12">个</div>
|
</div>
|
</div>
|
</div>
|
|
|
|
<div class="item1 bg-t8">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">工作车率</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.busWorkRate}}</div>
|
<div class="font-dw fz12">%</div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="item1 bg-t9">
|
<div class="ml60">
|
<div class="left1s fz12"><div class="absolute">完好车率</div></div>
|
<div class="flex font-se ">
|
<div class="big-fz fz20">{{allData.busLiveRate}}</div>
|
<div class="font-dw fz12">%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: 'leftTop',
|
props: {
|
height: {
|
type: String,
|
default: '330px',
|
},
|
width: {
|
type: String,
|
default: '330px',
|
}
|
},
|
data() {
|
return {
|
authFlag: false,//总公司为true，分公司为false
|
allData: {
|
busLineCount:0,
|
busLiveRate :0,
|
busOwnership:0,
|
busWorkRate :0,
|
carNum :0,
|
chongDian:0,
|
completionRateG :0,
|
completionRateP :0,
|
cumulativePassengerFlow :0,
|
driverNum:0,
|
mileageAccumulated:0,
|
onTimeRate:0,
|
operateShift:0,
|
plannedMileageCompletionRate:0,
|
powerConsumption:0,
|
siteCount:0,
|
siteNum: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() {
|
let companyId = '';
|
if (this.$store.state.parentCompany) {
|
companyId = localStorage.getItem('companyId') || '';
|
} else {
|
companyId = this.$store.state.companyId
|
}
|
this.$axios.get(`${this.$Interface.homeBase}?companyId=${companyId}`).then(res => {
|
this.allData = res.data;
|
})
|
},
|
},
|
activated() {
|
this.init();
|
},
|
}
|
</script>
|
<style scoped>
|
.bg-t1{background:url("../assets/png/bg-t1.png") no-repeat center/cover}
|
.bg-t2{background:url("../assets/png/bg-t2.png") no-repeat center/cover}
|
.bg-t3{background:url("../assets/png/bg-t3.png") no-repeat center/cover}
|
.bg-t4{background:url("../assets/png/bg-t4.png") no-repeat center/cover}
|
.bg-t5{background:url("../assets/png/bg-t5.png") no-repeat center/cover}
|
.bg-t6{background:url("../assets/png/bg-t6.png") no-repeat center/cover}
|
.bg-t7{background:url("../assets/png/bg-t7.png") no-repeat center/cover}
|
.bg-t8{background:url("../assets/png/bg-t8.png") no-repeat center/cover}
|
.bg-t9{background:url("../assets/png/bg-t9.png") no-repeat center/cover}
|
.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-dw {
|
color: #fff;
|
opacity: 0.7;
|
display: table-cell;
|
vertical-align: bottom;
|
padding-top: 7px;
|
margin-left: 8px;
|
}
|
</style>
|
