<template>
|
<div class="in-box">
|
<div class="header">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="header-title-i">{{fgsname}}</div>
|
<div class="flex">
|
<div class="flex align-c" @click="gofengongsi()">
|
<div class="small-p">查看详情</div>
|
<img class="more-img-size" src="../../assets/png/icon_more@2x.png" alt="">
|
</div>
|
<div class="header-temp"></div>
|
<div class="flex align-c">
|
<img class="close-img-size" src="../../assets/map/icon_close_s@2x.png" alt="" @click="closediv">
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="container-info color-white ">
|
<div class="flex warp mt20">
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_keyunliang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumPassengerFlow == "number" ? form.sumPassengerFlow : '-'}}</div>
|
<div>客运量(人)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_xianlushuliang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumLine == "number" ? form.sumLine : '-'}}</div>
|
<div>线路总数(条)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_cheliangshuliang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumVehicle == "number" ? form.sumVehicle : '-'}}</div>
|
<div>车辆总数(辆)</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="flex warp mt30">
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_zonglicheng.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumVehicleMileage == "number" ? form.sumVehicleMileage : '-'}}</div>
|
<div>车辆总里程(km)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_sijishuliang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumDriver == "number" ? form.sumDriver : '-'}}</div>
|
<div>司机数量(人)</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="line-fg mt30 mb30"></div>
|
<div class="flex warp">
|
<div class="item-info mt10">
|
<div><gauge1 :id="g1" :option="form.mileagePlanCompleteRate?form.mileagePlanCompleteRate:0"></gauge1></div>
|
<div class="title-b">计划里程完成率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g2" :option="form.shiftCompletionRate?form.shiftCompletionRate:0"></gauge1></div>
|
<div class="title-b">班次完成率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g3" :option="form.headEndOnTimeRate?form.headEndOnTimeRate:0"></gauge1></div>
|
<div class="title-b">首末班准点率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g4" :option="form.complaintRate?form.complaintRate:0"></gauge1></div>
|
<div class="title-b">投诉率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g5" :option="form.vehicleIntactRate?form.vehicleIntactRate:0"></gauge1></div>
|
<div class="title-b">车辆完好率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g6" :option="form.vehicleUseRate?form.vehicleUseRate:0"></gauge1></div>
|
<div class="title-b">车辆利用率</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import gauge1 from '../../components/echart/gauge1.vue'
|
import { message } from 'ant-design-vue'
|
export default {
|
name: 'fengongsiinfo',
|
props: {
|
data1: {
|
type:Object,
|
default(){
|
return{}
|
}
|
}
|
},
|
data() {
|
return {
|
show:false,
|
fgsname: "",
|
dataInfo:[1,2,3,4,5],
|
form: {
|
"companyId": 661,
|
"companyName": "横琴分公司",
|
"longitude": 113.559449,
|
"latitude": 22.273125,
|
"sumPassengerFlow": 5,
|
"sumLine": 62,
|
"sumVehicle": 190,
|
"sumVehicleMileage": null,
|
"sumDriver": 0,
|
"mileagePlanCompleteRate": 3,
|
"shiftCompletionRate": 43,
|
"headEndOnTimeRate": 46,
|
"complaintRate": 23,
|
"vehicleIntactRate": 67,
|
"vehicleUseRate": 5
|
},
|
g1:'fgsg1',
|
g2:'fgsg2',
|
g3:'fgsg3',
|
g4:'fgsg4',
|
g5:'fgsg5',
|
g6:'fgsg6',
|
}
|
},
|
components:{
|
gauge1
|
},
|
|
methods: {
|
getSelectDetailByName(params,id) {
|
this.$axios.get(this.$Interface.mapResource.getFenGongSiDetailById, {
|
params: { companyId: id },
|
}).then((res) => {
|
if(res.code == 0) {
|
if(res.data){
|
// console.log(res.data)
|
this.form = res.data;
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
},
|
closediv(){
|
this.$emit("closediv","fengongsi")
|
},
|
gofengongsi(){
|
this.$router.push({ path: '/branchOfficeResource', query: { sence: 1 , companyId: this.form.companyId}})
|
}
|
},
|
mounted() {
|
},
|
watch: {
|
"$store.state.selAttr": function(newVal,oldVal){
|
if(newVal.visa && newVal.type == "fengongsi"){
|
this.fgsname = newVal.value
|
this.getSelectDetailByName(newVal.value,newVal.id)
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.in-box{
|
width: 536px;
|
height: 465px;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
}
|
.header{width:100%;height:44px;background:url("../../assets/png/header_bg_info.png") no-repeat center/cover;}
|
.in-top-box{width:90%;height:34px; margin:0 auto;}
|
.header-title-i{color:#333;font-weight: 600;font-size:16px;}
|
.small-p{color:#00f09b;font-size:14px;}
|
.more-img-size{width:12px;height:12px}
|
.container-info{width:500px;margin:5px auto 0;}
|
.item-info{width:33%;text-align: center;position:relative;}
|
.img-size{width:48px;height:48px;}
|
.divtext {padding-left: 10px; text-align: left;}
|
.divnumber {font-family:'Digital';font-size: 18px;color:#69CCFF}
|
.line-fg{height: 1px;opacity: 0.4;border: 1px solid #2a4a8e;}
|
.title-b{position: absolute;bottom:-5px;margin:0 auto;font-size:14px;left: 50%;transform: translate(-50%, 0); width: 200px; }
|
|
</style>
|
