<template>
|
<div class="in-box">
|
<div class="header">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="header-title-i">{{clname}}</div>
|
<div class="flex">
|
<!-- <div class="flex align-c" @click="selectVideo()">
|
<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 mt20">
|
<div class="divtext">
|
<div class="titlebgtext">分公司</div>
|
<div class="titlebgimg">{{form.companyName}}</div>
|
</div>
|
<div class="divtext" style="width:46%;padding-left:5px;">
|
<div class="titlebgtext">驾驶员</div>
|
<div class="titlebgimg">{{form.driver}}<span style="color:#FAD428;padding-left:10px;">{{form.phone}}</span></div>
|
</div>
|
</div>
|
<div class="flex warp mt20">
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_wanchengbanci.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.todayMileage == "number" ? form.todayMileage : '-'}}</div>
|
<div>今日里程(km)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_gongzuoshichang.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumWorkTime == "number" ? form.sumWorkTime : '-'}}</div>
|
<div>工作时长(小时)</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_changzhankeliu.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.todayPassengerFlow == "number" ? form.todayPassengerFlow : '-'}}</div>
|
<div>今日累计客流量(人次)</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="flex warp mt10">
|
<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_zonglicheng.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{typeof form.sumDriverMileage == "number" ? form.sumDriverMileage : '-'}}</div>
|
<div>累计行驶里程(km)</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="flex warp mt10">
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_keliujishuqi.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{form.counterInstalled ? '有' : '无'}}</div>
|
<div>客流计数器</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="flex item-info">
|
<div class="flex" >
|
<img class="img-size" src="../../assets/map/icon_canzongxian.png" alt="">
|
<div class="divtext">
|
<div class="divnumber">{{form.canInstalled ? '有' : '无'}}</div>
|
<div>can总线</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<div class="line-fg mt30 mb30"></div>
|
<div class="flex warp align-c ju-c">
|
<div class="item-info mt10">
|
<div><gauge1 :id="g1" :option="form.shiftCompletionRate?form.shiftCompletionRate:0"></gauge1></div>
|
<div class="title-b">班次完成率</div>
|
</div>
|
<div class="item-info mt10">
|
<div><gauge1 :id="g2" :option="form.leaveOnTimeRate?form.leaveOnTimeRate:0"></gauge1></div>
|
<div class="title-b">发车准点率</div>
|
</div>
|
<!-- <div class="item-info mt10">
|
<div><gauge1 :id="g3" :option="form.liveShiftComplateRate?form.liveShiftComplateRate: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: 'chelianginfo',
|
props: {
|
data1: {
|
type:Object,
|
default(){
|
return{}
|
}
|
}
|
},
|
data() {
|
return {
|
show:false,
|
clname: "",
|
form: {
|
"busNum": "09683D",
|
"companyName": "前山分公司",
|
"driver": "林华忠",
|
"driverId": "20170709103423246",
|
"leaveOnTimeRate": 100,
|
"lineName": "B3路",
|
"operateShift": 1,
|
"phone": null,
|
"plannedShift": null,
|
"plateNum": "粤C32873",
|
"shiftCompletionRate": null,
|
"sumDriverMileage": 287.06,
|
"sumWorkTime": 90.62,
|
"todayMileage": 287.06,
|
"todayPassengerFlow": 159,
|
"videoCompany": 0,
|
"liveShiftComplateRate":0,
|
},
|
g1:'clg1',
|
g2:'clg2',
|
g3:'clg3',
|
}
|
},
|
components:{
|
gauge1
|
},
|
|
methods: {
|
getSelectDetailByName(params,id) {
|
this.$axios.get(this.$Interface.mapResource.getCheLiangDetailById, {
|
params: { plateNum: id },
|
}).then((res) => {
|
if(res.code == 0) {
|
if(res.data){
|
this.form = res.data;
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
},
|
closediv(){
|
this.$emit("closediv","cheliang")
|
},
|
selectVideo(){
|
if(this.form.plateNum){
|
if(this.form.videoCompany == 0){
|
// message.warning('海信视频还么有接入')
|
window.open("Alert:http://10.40.40.60/service/linkvideo.php?deviceid="+this.form.busNum+"&channel=0&route=1&username=admin&password=28df5572aa4191815e7c6d891ede8c0b&width=900&height=650&screen=3,3")
|
} else if(this.form.videoCompany == 1){
|
// message.warning('天迈视频已接入')
|
// this.form.plateNum = "粤C00641D"
|
window.open("Alert:http://172.16.15.64:7001/page/video/video-list.html?serverIP=119.146.222.192&port=8002&userName=shanghaitw&password=888888&busPlate="+this.form.plateNum+"&companyName=&layoutNum=8")
|
} else {
|
message.error('未获取到视频提供厂商！！！！！')
|
}
|
} else {
|
message.error('未获取到车牌号码信息！！！！！')
|
}
|
}
|
},
|
mounted() {
|
},
|
watch: {
|
"$store.state.selAttr": function(newVal,oldVal){
|
if(newVal.visa && newVal.type == "cheliang"){
|
this.clname = newVal.value
|
this.getSelectDetailByName(newVal.value,newVal.id)
|
}
|
}
|
|
}
|
}
|
</script>
|
<style scoped>
|
.in-box{
|
width: 596px;
|
height: 520px;
|
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:580px;margin:15px 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: 22px;color:#69CCFF}
|
.line-fg{height: 1px;opacity: 0.4;border: 1px dashed #2a4a8e;}
|
.title-b{position: absolute;bottom:-5px;left:20px;margin:0 auto;font-size:14px;}
|
.titlebgtext{width:98px;height:24px;background: url("../../assets/map/pic2.png") no-repeat center/contain;padding-left:10px;z-index:2;position: relative;}
|
.titlebgimg{width:203px;height:53px;background: url("../../assets/map/pic3.png") no-repeat center/contain;padding-left:20px;line-height: 63px;text-align:center;margin-top:-12px;z-index:0;position: relative;}
|
|
</style>
|
