<template>
|
<div class="hexiao-page" v-loading="listLoading">
|
<div class="vehicleNavBar">
|
<div class="navTitle">出入证信息</div>
|
</div>
|
<div v-if="vehicle" class="header">
|
<div class="status-bar">
|
<div class="status-box" :class="currentStatus == 0 ? 'active' : ''">
|
<div class="circle">
|
<div class="s-circle"></div>
|
</div>
|
<div>排队中</div>
|
</div>
|
<div class="line"></div>
|
<div class="status-box" :class="currentStatus == 1 ? 'active' : ''">
|
<div class="circle">
|
<div class="s-circle"></div>
|
</div>
|
<div>
|
{{ currentStatus == 1 ? vehicle.vehicleStatusName : "已叫号" }}
|
</div>
|
<!-- <div class="nline"></div> -->
|
</div>
|
<div class="line"></div>
|
<div class="status-box" :class="currentStatus == 2 ? 'active' : ''">
|
<div class="circle">
|
<div class="s-circle"></div>
|
</div>
|
<div>已入厂</div>
|
<!-- <div class="nline"></div> -->
|
</div>
|
<div class="line"></div>
|
<div class="status-box" :class="currentStatus == 3 ? 'active' : ''">
|
<div class="circle">
|
<div class="s-circle"></div>
|
</div>
|
<div>已离厂</div>
|
<!-- <div class="nline"></div> -->
|
</div>
|
</div>
|
</div>
|
<div v-if="vehicle" class="info-card">
|
<div class="top-info">
|
<div class="info-title">排队号码</div>
|
<div class="info-num">{{ vehicle.queueNumber }}</div>
|
<div v-if="currentStatus != 0" class="info-status">
|
{{ vehicle.vehicleStatusName }}
|
</div>
|
<div v-else class="info-status">
|
前方还有{{ vehicle.currentWaitNum }}辆车排队中...
|
</div>
|
</div>
|
<div class="info-row">
|
<div>姓名</div>
|
<div>{{ vehicle.name }}</div>
|
</div>
|
<div class="info-row">
|
<div>车牌号</div>
|
<div>{{ vehicle.licensePlate }}</div>
|
</div>
|
<div class="info-row">
|
<div>手机号</div>
|
<div>{{ vehicle.phone }}</div>
|
</div>
|
<div class="info-row">
|
<div>身份证号码</div>
|
<div>{{ vehicle.idCard }}</div>
|
</div>
|
<div class="info-row">
|
<div>装卸数量</div>
|
<div>{{ vehicle.loadUnloadQty }}</div>
|
</div>
|
<div class="info-row">
|
<div>单位</div>
|
<div>{{ vehicle.unitName }}</div>
|
</div>
|
<div class="info-row">
|
<div>装卸区域</div>
|
<div class="maxw">{{ vehicle.loadingAreaName }}</div>
|
</div>
|
<div class="info-row">
|
<div>登记时间</div>
|
<div v-if="vehicle.registerTime">
|
{{ vehicle.registerTime | vformatDate }}
|
</div>
|
<div v-else>-</div>
|
</div>
|
<div class="info-row">
|
<div>入厂时间</div>
|
<div v-if="vehicle.enterTime">
|
{{ vehicle.enterTime | vformatDate }}
|
</div>
|
<div v-else>-</div>
|
</div>
|
<div class="info-row">
|
<div>出厂时间</div>
|
<div v-if="vehicle.leaveTime">
|
{{ vehicle.leaveTime | vformatDate }}
|
</div>
|
<div v-else>-</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { driversQueryInfo } from "@/api/vehicle";
|
export default {
|
components: {},
|
data() {
|
return {
|
currentStatus: 0,
|
queueNum: "",
|
qrCode: "",
|
vehicle: undefined,
|
listLoading: false,
|
};
|
},
|
created() {
|
import("@/assets/js/media_750");
|
},
|
mounted() {
|
this.$forceUpdate();
|
var urlParam = decodeURI(window.location.href.split("queryResult/")[1]);
|
if (urlParam) {
|
this.queueNum = urlParam;
|
}
|
this.getInfo();
|
},
|
methods: {
|
getInfo() {
|
console.log("=======", this.queueNum);
|
if (this.queueNum) {
|
this.listLoading = true;
|
driversQueryInfo(this.queueNum)
|
.then((res) => {
|
this.vehicle = res;
|
this.listLoading = false;
|
|
if (this.vehicle.vehicleStatusCode == 1255) {
|
//排队中
|
this.currentStatus = 0;
|
} else if (
|
this.vehicle.vehicleStatusCode == 1256 ||
|
this.vehicle.vehicleStatusCode == 1257
|
) {
|
//已叫号
|
this.currentStatus = 1;
|
} else if (this.vehicle.vehicleStatusCode == 1258) {
|
//已入厂
|
this.currentStatus = 2;
|
} else if (this.vehicle.vehicleStatusCode == 1259) {
|
//已离厂
|
this.currentStatus = 3;
|
}
|
})
|
.catch((res) => {
|
this.listLoading = false;
|
this.$dialog.error("未查到出入证信息");
|
});
|
} else {
|
this.$dialog.error("未查到出入证信息");
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.hexiao-page {
|
width: 100%;
|
min-height: 100vh;
|
background: #fafbff;
|
padding-bottom: 0.21rem;
|
|
.vehicleNavBar {
|
position: fixed;
|
top: 0;
|
left: 0;
|
height: 50px;
|
width: 100%;
|
background: #3873f3;
|
color: white;
|
z-index: 999;
|
|
.navTitle {
|
position: absolute;
|
top: 0;
|
height: 50px;
|
line-height: 50px;
|
width: 200px;
|
text-align: center;
|
left: 50%;
|
font-size: 0.374rem;
|
transform: translateX(-50%);
|
}
|
}
|
|
.header {
|
margin-top: 50px;
|
width: 100%;
|
height: 43vw;
|
background: url("../assets/imgs/vehicleTopHeader.png") no-repeat;
|
background-size: 100% 100%;
|
|
.tab {
|
height: 0.912rem;
|
padding: 0 0.21rem;
|
color: white;
|
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.title {
|
font-weight: 500;
|
font-size: 0.36rem;
|
color: #ffffff;
|
letter-spacing: 1px;
|
}
|
}
|
}
|
|
.status-bar {
|
display: flex;
|
padding: 0.312rem 0.364rem 0;
|
|
.status-box {
|
position: relative;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
color: rgba(255, 255, 255, 0.4);
|
width: 0.7rem;
|
.circle {
|
position: relative;
|
width: 0.416rem;
|
height: 0.416rem;
|
background: rgba(255, 255, 255, 0.2);
|
border-radius: 50%;
|
margin-bottom: 0.1rem;
|
|
.s-circle {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 0.166rem;
|
height: 0.166rem;
|
background: rgba(255, 255, 255, 0.4);
|
transform: translate(-50%, -50%);
|
border-radius: 50%;
|
}
|
}
|
.nline {
|
position: absolute;
|
top: 0.202rem;
|
left: 0;
|
height: 0.01rem;
|
background: #d1d2d2;
|
width: 0.41rem;
|
}
|
}
|
|
.active {
|
color: white !important;
|
.s-circle {
|
background: white !important;
|
}
|
}
|
.line {
|
margin-top: 0.202rem;
|
width: 1.42rem;
|
height: 0.01rem;
|
background: #d1d2d2;
|
}
|
}
|
|
.info-card {
|
width: 94vw;
|
height: calc(100% + 1.5rem - 43vw);
|
|
margin: -1.5rem auto 0 auto;
|
background: linear-gradient(
|
180deg,
|
rgba(255, 255, 255, 0.98) 0%,
|
#ffffff 100%
|
);
|
border-radius: 0.208rem;
|
padding: 0 0.312rem 0.86rem;
|
.top-info {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding-bottom: 0.416rem;
|
border-bottom: 1px dashed #d1d2d2;
|
margin-bottom: 0.416rem;
|
.info-title {
|
margin-top: 0.624rem;
|
height: 0.343rem;
|
font-size: 0.25rem;
|
color: #000000;
|
}
|
.info-num {
|
height: 1.424rem;
|
font-weight: 500;
|
font-size: 1.04rem;
|
color: #373839;
|
letter-spacing: 0.04rem;
|
}
|
.info-status {
|
margin-top: 0.01rem;
|
height: 0.426rem;
|
font-size: 0.312rem;
|
color: #5f6062;
|
}
|
}
|
|
.info-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 0.76rem;
|
font-size: 0.312rem;
|
color: #3c3e3f;
|
}
|
|
.btn {
|
margin-top: 0.416rem;
|
width: 6.24rem;
|
height: 0.915rem;
|
text-align: center;
|
line-height: 0.915rem;
|
|
background: #3873f3;
|
border-radius: 0.124rem;
|
font-size: 0.312rem;
|
color: #ffffff;
|
}
|
}
|
.tip {
|
position: fixed;
|
width: 100vw;
|
height: 100vh;
|
top: 0;
|
left: 0;
|
background: #00000080;
|
z-index: 999;
|
|
.tip-box {
|
background-color: #fff;
|
position: absolute;
|
width: 95%;
|
height: 160px;
|
border-radius: 5px;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
box-sizing: border-box;
|
padding: 20px;
|
|
.close {
|
position: absolute;
|
top: 15px;
|
right: 15px;
|
color: #ccc;
|
font-size: 20px;
|
}
|
|
.tip-text {
|
font-size: 16px;
|
margin-bottom: 30px;
|
}
|
|
.tip-content {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
margin-left: 10px;
|
|
.tip-icon {
|
color: red;
|
font-size: 18px;
|
margin-right: 5px;
|
}
|
}
|
|
.tip-btns {
|
position: absolute;
|
bottom: 15px;
|
right: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.tip-btn {
|
width: 70px;
|
height: 28px;
|
margin-left: 20px;
|
text-align: center;
|
color: white;
|
background: #3873f3;
|
border-radius: 3px;
|
line-height: 28px;
|
}
|
|
.cancel {
|
background: #f2f2f2;
|
color: #333;
|
}
|
}
|
}
|
}
|
.maxw {
|
width: 70% !important;
|
text-align: right;
|
}
|
}
|
</style>
|
