From f6ac139bf416f98c3a3d28f6b1d80e4598bd648f Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期日, 29 九月 2024 18:41:20 +0800
Subject: [PATCH] ll
---
screen/src/views/PlatformCall.vue | 286 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 221 insertions(+), 65 deletions(-)
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index 62856e9..bca3c16 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -2,23 +2,123 @@
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import UQRCode from 'uqrcodejs'
+import { getLargeScreenData } from '@/utils/request'
+import duration from 'dayjs/plugin/duration'
+dayjs.extend(duration)
-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();
+const contentList = ref([])
+const contentTempList = ref([])
+const page = ref(1)
+const timer = ref()
+
+const callList = ref([])
+const activeCall = ref({})
+const pageCall = ref(0)
+const timerCall = ref()
+
+const initData = () => {
+ getLargeScreenData().then(res => {
+ if (res.data && res.data.allList) {
+ contentList.value = res.data.allList.map(item => {
+ if (item.optTime) {
+ item.optTimeTemp = dayjs.duration(item.optTime).format('HH灏忔椂mm鍒�')
+ }
+ return item
+ })
+ clearInterval(timer.value)
+ setInitContent()
+ }
+ if (res.data && res.data.waitWorkList) {
+ callList.value = res.data.waitWorkList
+ }
+ clearInterval(timerCall.value)
+ setInitCall()
+ })
}
+initData()
+// setInterval(() => {
+// initData()
+// }, 60 * 1000)
+
+const frequencyFn = (length) => {
+ if(length <= 16){ // 2
+ return 30 * 1000
+ }else if(length <= 24 ){ // 3
+ return 20 * 1000
+ }else if( length <= 32 ){// 4
+ return 15 * 1000
+ }else if( length <= 48 ){// 6
+ return 10 * 1000
+ }else if( length <= 60 ){// 10
+ return 6 * 1000
+ }else{
+ return 4 * 1000
+ }
+}
+const setInitContent = () => {
+ if (contentList.value && contentList.value.length > 0) {
+ contentTempList.value = contentList.value.slice(0, 8)
+ if (page.value * 8 >= contentList.value.length) {
+ page.value = 1
+ } else {
+ page.value++
+ }
+ timer.value = setInterval(() => {
+ if (page.value * 8 >= contentList.value.length) {
+ page.value = 1
+ } else {
+ page.value++
+ }
+ contentTempList.value = contentList.value.slice((page.value - 1) * 8, page.value * 8)
+ }, frequencyFn(contentList.value.length))
+ }
+}
+const setInitCall = () => {
+ if (callList.value && callList.value.length > 0) {
+ activeCall.value = callList.value[0]
+ timerCall.value = setInterval(() => {
+ if (pageCall.value >= callList.value.length - 1) {
+ pageCall.value = 0
+ } else {
+ pageCall.value++
+ }
+ activeCall.value = callList.value[pageCall.value]
+ }, 6 * 1000)
+ }
+}
+
onMounted(() => {
initQrcode()
})
+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()
+}
+
+const statusMap = {
+ 0: '寰呯‘璁�',
+ 1: '寰呯鍒�',
+ 2: '绛夊緟鍙彿',
+ 3: '鍏ュ洯绛夊緟',
+ 4: '宸插彨鍙�', // 宸插彨鍙� 鏈堝彴绛夊緟
+ 5: '浣滀笟涓�',
+ 6: '浣滀笟瀹屾垚',
+ 7: '杞Щ涓�',
+ 8: '寮傚父鎸傝捣',
+ 9: '宸叉巿鏉冪鍥�',
+ 10: '宸茬鍥�',
+ 11: '宸茶繃鍙�',
+ 12: '宸插彇娑�',
+}
const weekMap = ['鍛ㄦ棩', '鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚']
const newWeek = ref(weekMap[new Date().getDay()])
const newDate = ref(dayjs().format('YYYY-MM-DD'))
@@ -51,39 +151,34 @@
<div class="item">鍋滈潬鏈堝彴</div>
<div class="item">鏃堕棿</div>
</div>
- <div class="line">
- <div class="item no">搴忓彿</div>
- <div class="item">杞︾墝鍙�</div>
+ <div class="line" v-for="item in contentTempList" :key="item.id">
+ <div class="item no">{{ item.signNum }}</div>
+ <div class="item">{{ item.carCodeFront }}</div>
<div class="item">
- <div class="status underway">浣滀笟涓�</div>
+ <div :class="{
+ call_ed: item.status == 4,
+ underway: item.status == 5,
+ padding: item.status == 2 || item.status == 3,
+ }" class="status">{{ statusMap[item.status] }}</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 class="item">{{ item.platformName }}</div>
+ <div class="item">{{ item.optTimeTemp }}</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 v-if="callList.length > 0" class="current_plat">
+ <div class="id_card">{{ activeCall.carCodeFront }}</div>
+ <div class="no">({{ activeCall.signNum }})</div>
+ <div class="place">
+ <span>鍓嶅線</span>
+ <span class="plat"> {{ activeCall.platformName }} </span>
+ <span>浣滀笟</span>
+ </div>
+ </div>
+ <div v-else class="empty">
<div class="title">娓╅Θ鎻愮ず</div>
<div class="line">1銆佽鍙告満鏍规嵁鍙彿灞忔彁绀哄叆鍥�</div>
<div class="line">2銆佹湭鍙彿杞﹁締璇疯�愬績绛夊緟</div>
@@ -127,6 +222,7 @@
align-items: center;
justify-content: space-between;
padding: 0 50px;
+
.title {
font-weight: 800;
font-size: 48px;
@@ -135,22 +231,26 @@
.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;
@@ -161,32 +261,39 @@
z-index: -1;
}
}
- .main_content{
+
+ .main_content {
flex: 1;
display: flex;
padding: 30px 20px;
position: relative;
- .list{
+
+ .list {
flex: 5;
margin-right: 20px;
- .line{
+
+ .line {
display: flex;
align-items: center;
height: 100px;
- &:nth-of-type(2n){
- background: rgba(255,255,255,0);
+
+ &:nth-of-type(2n) {
+ background: rgba(255, 255, 255, 0);
}
- &:nth-of-type(2n + 1){
- background: rgba(0,237,255,0.13);
+
+ &:nth-of-type(2n + 1) {
+ background: rgba(0, 237, 255, 0.13);
}
- .item{
+
+ .item {
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 36px;
flex: 10;
- .status{
+
+ .status {
width: 174px;
height: 76px;
border-radius: 8px;
@@ -194,67 +301,111 @@
justify-content: center;
align-items: center;
}
- .underway{
+
+ .underway {
background-color: #51b2ce;
}
- .call_ed{
+
+ .call_ed {
background-color: #f2a43a;
}
- .padding{
+
+ .padding {
background-color: #1c485a;
}
}
- .no{
+
+ .no {
flex: 5;
}
}
- .header{
+
+ .header {
font-size: bold;
font-size: 40px;
- background: linear-gradient( 180deg, #00B5D1 0%, #003C57 100%) !important;
+ background: linear-gradient(180deg, #00B5D1 0%, #003C57 100%) !important;
}
}
- .current{
+
+ .current {
/* height: calc( 100vh - 192px ); */
flex: 2;
display: flex;
flex-direction: column;
- .tip_wrap{
+
+ .tip_wrap {
margin-bottom: 20px;
width: 100%;
position: relative;
flex-shrink: 0;
flex: 1;
- .empty{
+
+ .current_plat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 30px 40px;
+ color: #FFA000;
+
+ .id_card {
+ font-weight: bold;
+ font-size: 86px;
+ }
+
+ .no {
+ margin: 10px 0;
+ font-weight: 500;
+ font-size: 58px;
+ }
+
+ .place {
+ font-weight: 500;
+ font-size: 42px;
+ }
+
+ .plat {
+ color: #fff;
+ margin: 0 10px;
+ }
+ }
+
+ .empty {
padding: 30px 40px;
font-weight: 500;
font-size: 30px;
- .title{
+
+ .title {
text-align: center;
font-weight: bold;
font-size: 36px;
margin-bottom: 20px;
}
- .line{
+
+ .line {
margin-bottom: 10px;
}
}
- .icon{
+
+ .icon {
position: absolute;
width: 52px;
height: 52px;
}
- .icon_l{
+
+ .icon_l {
left: 0;
top: 0;
}
- .icon_r{
+
+ .icon_r {
right: 0;
bottom: 0;
}
}
- .qrcode_wrap{
+
+ .qrcode_wrap {
width: 100%;
flex: 1;
flex-shrink: 0;
@@ -264,11 +415,13 @@
flex-direction: column;
align-items: center;
justify-content: center;
- .qrcode{
+
+ .qrcode {
padding: 12px;
background-color: #fff;
}
- .title{
+
+ .title {
margin-top: 20px;
font-weight: bold;
font-size: 38px;
@@ -277,17 +430,20 @@
}
}
}
- .main_footer{
+
+ .main_footer {
background-color: #1D8D9E;
height: 80px;
display: flex;
align-items: center;
padding: 0 50px;
- .icon{
+
+ .icon {
width: 52px;
height: 52px;
}
- .title{
+
+ .title {
flex: 1;
text-align: center;
font-weight: 500;
--
Gitblit v1.9.3