<template>
|
<div class="in-box">
|
<div class="header">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="header-title-i">{{form.lineName == "string" ? form.lineName : xlname }} <span style="background-color:rgba(16,122,206,0.80);padding:2px 5px;margin-left:5px;font-size:12px;color:#f9f9f9;border-radius: 2px;border: 1px solid #007bd5;">{{form.companyName == "string" ? form.companyName : "-" }}</span></div>
|
<div class="flex">
|
<div class="flex align-c" @click="goxianlu()">
|
<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.sumVolumePeople == "number" ? form.sumVolumePeople : '-'}}</div>
|
<div>客流总量(人次)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_tousuliang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumMonthComplaint == "number" ? form.sumMonthComplaint : '-'}}</div>
|
<div>本月投诉量(次)</div>
|
</div>
|
</div>
|
|
</div>
|
<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.driverMileage == "number" ? form.driverMileage : '-'}}</div>
|
<div>行驶里程(km)</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_jihuabanci.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.plannedShift == "number" ? form.plannedShift : '-'}}</div>
|
<div>计划班次(班)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_shijibanci.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.operateShift == "number" ? form.operateShift : '-'}}</div>
|
<div>营运班次(班)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_xianluyunyingshijian.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{form.operateStartTime && operateEndTime ? form.operateStartTime + '~' + form.operateEndTime : '-'}}</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.completionRateG?form.completionRateG:0"></gauge1></div>
|
<div class="title-b">G班完成率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g2" :option="form.completionRateP?form.completionRateP:0"></gauge1></div>
|
<div class="title-b">保障班完成率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g3" :option="form.shiftLeaveOnTimeRate?form.shiftLeaveOnTimeRate:0"></gauge1></div>
|
<div class="title-b">班次发车准点率</div>
|
</div>
|
|
</div>
|
<div class="line-fg mt30 mb30"></div>
|
<div class="flex warp ju-right align-c mt10" style="width: 100%">
|
<div class="lengtitle">计划数</div> <div class="mr20 lengtitlegreen">实际数</div>
|
</div>
|
<div class="flex">
|
<div class="flex warp ju-sb align-c mt10" style="width: 100%;">
|
<div class="item-left">高峰班</div>
|
<div class="item-center">
|
<div class="container">
|
<div class="skills"></div>
|
</div>
|
<div class="container mt10">
|
<div class="skillsgree"></div>
|
</div>
|
</div>
|
<div class="item-right">
|
<div class="container fontgree">{{form.numberShiftsPlannedG}}</div>
|
<div class="container mt3 green fontgree">{{form.numberShiftsActualG}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="flex">
|
<div class="flex warp ju-sb align-c mt10" style="width: 100%;">
|
<div class="item-left">保障班</div>
|
<div class="item-center">
|
<div class="container">
|
<div class="skills"></div>
|
</div>
|
<div class="container mt10">
|
<div class="skillsgree"></div>
|
</div>
|
</div>
|
<div class="item-right">
|
<div class="container fontgree">{{form.numberShiftsPlannedP}}</div>
|
<div class="container mt3 green fontgree">{{form.numberShiftsActualP}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="line-fg mt30 mb30"></div>
|
<div class="flex warp mt20">
|
<div class="flex item-info-detail">
|
<div class="flex warp" >
|
<div class="detailtext">线路长度(km)</div>
|
<div class="divnumber">{{typeof form.lineLength == "number" ? form.lineLength : '-'}} </div>
|
|
</div>
|
|
</div>
|
<div class="flex item-info-detail">
|
<div class="flex warp" >
|
<div class="detailtext">司机数量(人)</div>
|
<div class="divnumber">{{typeof form.sumDriver == "number" ? form.sumDriver : '-'}}</div>
|
|
</div>
|
|
</div>
|
<div class="flex item-info-detail">
|
<div class="flex warp">
|
<div class="detailtext">首班准点</div>
|
<div class="divnumber">{{typeof form.headOnTime == "number" ? form.headOnTime : '-'}}%</div>
|
|
</div>
|
</div>
|
<div class="flex item-info-detail">
|
<div class="flex warp">
|
<div class="detailtext">末班准点</div>
|
<div class="divnumber">{{typeof form.endheadOnTime == "number" ? form.endheadOnTime : '-'}}%</div>
|
|
</div>
|
</div>
|
</div>
|
<div class="flex warp mt30">
|
<div class="flex item-info-detail">
|
<div class="flex warp">
|
<div class="detailtext">往返里程(km)</div>
|
<div class="divnumber">{{typeof form.returnMileage == "number" ? form.returnMileage : '-'}} </div>
|
|
</div>
|
</div>
|
<div class="flex item-info-detail">
|
<div class="flex warp">
|
<div class="detailtext">往返站点数量(个)</div>
|
<div class="divnumber">{{typeof form.returnStation == "number" ? form.returnStation : '-'}}</div>
|
</div>
|
</div>
|
<div class="flex item-info-detail">
|
<div class="flex warp">
|
<div class="detailtext">所属分公司</div>
|
<div class="divnumber" style="font-size: 13px;">{{typeof form.companyName == "string" ? form.companyName : '-'}}</div>
|
</div>
|
</div>
|
<div class="flex item-info-detail">
|
<div class="flex warp">
|
<div class="detailtext">线路车辆(辆)</div>
|
<div class="divnumber">{{typeof form.sumLineVehicle == "number" ? form.sumLineVehicle : '-'}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="zhuangshi">
|
<div class="zhuangshitext">{{LineType[form.routeNature]}}</div>
|
<img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt="">
|
</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import gauge1 from '../../components/echart/gauge1.vue'
|
import { message } from 'ant-design-vue'
|
export default {
|
name: 'chelianginfo',
|
props: {
|
data1: {
|
type:Object,
|
default(){
|
return{}
|
}
|
},
|
radio: [String, Number]
|
},
|
data() {
|
return {
|
show:false,
|
xlname: "",
|
form: {
|
"lineName": "101路",
|
"lineId": "20010100",
|
"routeNature": 1,
|
"sumVolumePeople": null,
|
"sumMonthComplaint": null,
|
"driverMileage": null,
|
"plannedShift": null,
|
"operateShift": null,
|
"completionRateG": null,
|
"completionRateP": null,
|
"shiftLeaveOnTimeRate": null,
|
"numberShiftsPlannedG": null,
|
"numberShiftsActualG": null,
|
"numberShiftsPlannedP": null,
|
"numberShiftsActualP": null,
|
"lineLength": 14.9,
|
"sumDriver": 0,
|
"headOnTime": null,
|
"endheadOnTime": null,
|
"returnMileage": 14.9,
|
"returnStation": null,
|
"companyName": "横琴分公司",
|
"sumLineVehicle": 0
|
},
|
g1:'xlg1',
|
g2:'xlg2',
|
g3:'xlg3',
|
LineType: {
|
1: "常规线路",
|
2: "专线",
|
3: "应急线路",
|
4: "机动线路",
|
5: "定制线路",
|
6: "测试线",
|
7: "停开"
|
}
|
}
|
},
|
components:{
|
gauge1
|
},
|
|
methods: {
|
getSelectDetailByName(params,id) {
|
let type = this.radio=="上行"?"1": this.radio=="下行"?"2":""
|
this.$axios.get(this.$Interface.mapResource.getXianLuDetailByLineID, {
|
params: { lineName: params, flag: type, },
|
}).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","xianlu")
|
},
|
goxianlu(){
|
this.$router.push({ path: '/branchOfficeResource', query: { sence: 3, busLineName: (this.form.lineName ? this.form.lineName : this.xlname) }})
|
}
|
},
|
mounted() {},
|
watch: {
|
"$store.state.selAttr": function(newVal,oldVal){
|
if(newVal.visa && newVal.type == "xianlu"){
|
this.xlname = newVal.value
|
this.getSelectDetailByName(newVal.value,newVal.id)
|
}
|
}
|
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
|
@media screen and (max-width: 1800px){
|
.in-box{
|
width: 536px;
|
height: 391px;
|
overflow:auto;
|
opacity: 0.8;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
}
|
}
|
@media screen and (min-width: 1800px){
|
.in-box{
|
width: 566px;
|
height: 751px;
|
margin-top: -50px;
|
overflow:auto;
|
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:15px auto 0;}
|
.item-info{width:33%;text-align: center;position:relative; margin:auto}
|
.img-size{width:48px;height:48px;}
|
.line-fg{height: 1px;opacity: 0.4;border: 1px solid #2a4a8e;}
|
.title-b{position: absolute;bottom:-5px;left: 50%;width:100px;
|
right:0;margin:0 auto;font-size:14px; transform: translate(-50%, 0)}
|
.divtext {padding-left: 10px; text-align: left;}
|
.divnumber {font-family:'Digital';font-size: 18px;color:#69CCFF}
|
.item-left {width: 15%; padding-left: 14px;background: url("../../assets/map/pic1.png") no-repeat center/contain;}
|
.lengtitle:before {content: ' ';display: inline-block;width: 40px;height: 1px;border-top:2px dashed #ffffff;position:relative;top:-2px;right:5px;}
|
.lengtitlegreen{color:rgba(0,240,155,1)}
|
.lengtitlegreen:before {content: ' ';display: inline-block;width: 40px;height: 1px;border-top:2px solid rgba(0,240,155,1);position:relative;top:-2px;right:5px;}
|
.item-center {
|
width: 70%;
|
.container {
|
width: 100%;
|
padding: 4px 0px;
|
background: #293746;
|
}
|
.skills {
|
width: 90%;
|
height: 2px;
|
border-top: 2px dashed #ffffff;
|
}
|
.skillsgree {
|
border-top: 2px solid rgba(0,240,155,1);
|
width: 90%;
|
height: 2px;
|
}
|
}
|
.item-right{
|
.green{
|
color: rgba(0,240,155,1);
|
}
|
.fontgree {
|
font-family: 'Digital';
|
}
|
}
|
.item-info-detail{width:25%;text-align: left;}
|
.detailtext {width: 100%;height: 30px;font-size: 14px;font-family: 'PingFangSC, PingFangSC-Regular';font-weight: 400;color: #ffffff;}
|
.detailtext:before{content: ' ';display: inline-block;width: 10px;height: 12px;border-left:3px solid #b7eaff;position:relative;top:2px;}
|
@media screen and (min-width: 1800px){
|
.zhuangshi {position:absolute;right:2px;bottom:2px;}
|
.zhuangshitext {position:absolute;bottom:30px;right:25px;transform: rotate(-45deg);}
|
}
|
@media screen and (max-width: 1800px){
|
.zhuangshi {position:absolute;right:19px;bottom:2px;}
|
.zhuangshitext {position:absolute;bottom:30px;right:25px;transform: rotate(-45deg);
|
font-family: 'PingFangSC';
|
text-shadow: 0px 0px 20px #ffcc00;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
}
|
|
</style>
|
