<script setup>
|
import { ref, onMounted } from 'vue'
|
import dayjs from 'dayjs'
|
import UQRCode from 'uqrcodejs'
|
|
const initQrcode = () => {
|
var qr = new UQRCode();
|
// 设置二维码内容
|
qr.data = "https://uqrcode.cn/doc";
|
qr.size = 254;
|
// 调用制作二维码方法
|
qr.make();
|
var canvas = document.getElementById("qrcode");
|
var canvasContext = canvas.getContext("2d");
|
qr.canvasContext = canvasContext;
|
qr.drawCanvas();
|
}
|
onMounted(() => {
|
initQrcode()
|
})
|
|
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
const newWeek = ref(weekMap[new Date().getDay()])
|
const newDate = ref(dayjs().format('YYYY-MM-DD'))
|
const newTime = ref(dayjs().format('HH:mm'))
|
setInterval(() => {
|
newWeek.value = weekMap[new Date().getDay()]
|
newDate.value = dayjs().format('YYYY-MM-DD')
|
newTime.value = dayjs().format('HH:mm')
|
}, 1000)
|
</script>
|
<template>
|
<div class="main_app">
|
<div class="main_header">
|
<img class="bg" src="@/assets/images/call/title@2x.png" alt="">
|
<div class="title">安泰智慧物流园区-车辆叫号大屏</div>
|
<div class="time_wrap">
|
<div class="left">
|
<div class="week">{{ newWeek }}</div>
|
<div class="date">{{ newDate }}</div>
|
</div>
|
<div class="time">{{ newTime }}</div>
|
</div>
|
</div>
|
<div class="main_content">
|
<div class="list">
|
<div class="line header">
|
<div class="item no">序号</div>
|
<div class="item">车牌号</div>
|
<div class="item status">状态</div>
|
<div class="item">停靠月台</div>
|
<div class="item">时间</div>
|
</div>
|
<div class="line">
|
<div class="item no">序号</div>
|
<div class="item">车牌号</div>
|
<div class="item">
|
<div class="status underway">作业中</div>
|
</div>
|
<div class="item">停靠月台</div>
|
<div class="item">时间</div>
|
</div>
|
<div class="line">
|
<div class="item no">序号</div>
|
<div class="item">车牌号</div>
|
<div class="item">
|
<div class="status call_ed">作业中</div>
|
</div>
|
<div class="item">停靠月台</div>
|
<div class="item">时间</div>
|
</div>
|
<div class="line">
|
<div class="item no">序号</div>
|
<div class="item">车牌号</div>
|
<div class="item">
|
<div class="status padding">作业中</div>
|
</div>
|
<div class="item">停靠月台</div>
|
<div class="item">时间</div>
|
</div>
|
</div>
|
<div class="current">
|
<div class="tip_wrap">
|
<img src="@/assets/images/call/ic_left@2x.png" class="icon icon_l" alt="">
|
<img src="@/assets/images/call/ic_right@2x.png" class="icon icon_r" alt="">
|
<div class="empty">
|
<div class="title">温馨提示</div>
|
<div class="line">1、请司机根据叫号屏提示入园</div>
|
<div class="line">2、未叫号车辆请耐心等待</div>
|
<div class="line">3、请有序排队入园</div>
|
<div class="line">4、装卸货结束禁止在园区逗留</div>
|
<div class="line">5、请遵守园区安全规章制度</div>
|
</div>
|
</div>
|
<div class="qrcode_wrap">
|
<div class="qrcode">
|
<canvas id="qrcode" width="254" height="254"></canvas>
|
</div>
|
<div class="title">请扫码签到</div>
|
</div>
|
</div>
|
</div>
|
<div class="main_footer">
|
<img src="@/assets/images/call/ic_news@2x.png" class="icon" alt="">
|
<div class="title">请根据队列提示信息，依次等候进场</div>
|
<div class="icon"></div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.main_app {
|
color: #fff;
|
width: 100%;
|
height: 100vh;
|
background-color: #092030;
|
position: relative;
|
z-index: -2;
|
display: flex;
|
flex-direction: column;
|
|
.main_header {
|
width: 100%;
|
height: 112px;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 50px;
|
.title {
|
font-weight: 800;
|
font-size: 48px;
|
}
|
|
.time_wrap {
|
display: flex;
|
align-items: center;
|
.date {
|
font-weight: 500;
|
font-size: 20px;
|
text-align: right;
|
}
|
.week {
|
font-weight: 500;
|
font-size: 20px;
|
text-align: right;
|
}
|
.time {
|
font-weight: 500;
|
font-size: 50px;
|
margin-left: 15px;
|
}
|
}
|
.bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
z-index: -1;
|
}
|
}
|
.main_content{
|
flex: 1;
|
display: flex;
|
padding: 30px 20px;
|
position: relative;
|
.list{
|
flex: 5;
|
margin-right: 20px;
|
.line{
|
display: flex;
|
align-items: center;
|
height: 100px;
|
&:nth-of-type(2n){
|
background: rgba(255,255,255,0);
|
}
|
&:nth-of-type(2n + 1){
|
background: rgba(0,237,255,0.13);
|
}
|
.item{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-weight: 500;
|
font-size: 36px;
|
flex: 10;
|
.status{
|
width: 174px;
|
height: 76px;
|
border-radius: 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.underway{
|
background-color: #51b2ce;
|
}
|
.call_ed{
|
background-color: #f2a43a;
|
}
|
.padding{
|
background-color: #1c485a;
|
}
|
}
|
.no{
|
flex: 5;
|
}
|
|
}
|
.header{
|
font-size: bold;
|
font-size: 40px;
|
background: linear-gradient( 180deg, #00B5D1 0%, #003C57 100%) !important;
|
}
|
}
|
.current{
|
/* height: calc( 100vh - 192px ); */
|
flex: 2;
|
display: flex;
|
flex-direction: column;
|
.tip_wrap{
|
margin-bottom: 20px;
|
width: 100%;
|
position: relative;
|
flex-shrink: 0;
|
flex: 1;
|
.empty{
|
padding: 30px 40px;
|
font-weight: 500;
|
font-size: 30px;
|
.title{
|
text-align: center;
|
font-weight: bold;
|
font-size: 36px;
|
margin-bottom: 20px;
|
}
|
.line{
|
margin-bottom: 10px;
|
}
|
}
|
.icon{
|
position: absolute;
|
width: 52px;
|
height: 52px;
|
}
|
.icon_l{
|
left: 0;
|
top: 0;
|
}
|
.icon_r{
|
right: 0;
|
bottom: 0;
|
}
|
}
|
.qrcode_wrap{
|
width: 100%;
|
flex: 1;
|
flex-shrink: 0;
|
background-color: #51b2ce;
|
padding: 36px 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.qrcode{
|
padding: 12px;
|
background-color: #fff;
|
}
|
.title{
|
margin-top: 20px;
|
font-weight: bold;
|
font-size: 38px;
|
color: #111111;
|
}
|
}
|
}
|
}
|
.main_footer{
|
background-color: #1D8D9E;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
padding: 0 50px;
|
.icon{
|
width: 52px;
|
height: 52px;
|
}
|
.title{
|
flex: 1;
|
text-align: center;
|
font-weight: 500;
|
font-size: 37px;
|
}
|
}
|
|
}
|
</style>
|
