From ad5af00b7ae7af3c5e6375ccff237df8254d3c3f Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 09 十月 2024 19:03:52 +0800
Subject: [PATCH] 最新版本
---
screen/src/views/PlatformCall.vue | 94 +++++++++++++++++++++++++++++-----------------
1 files changed, 59 insertions(+), 35 deletions(-)
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index bca3c16..a3ed50c 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -6,6 +6,7 @@
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
+const qrcode = ref('')
const contentList = ref([])
const contentTempList = ref([])
const page = ref(1)
@@ -31,28 +32,35 @@
if (res.data && res.data.waitWorkList) {
callList.value = res.data.waitWorkList
}
+ qrcode.value = res.data.qrCode
+ initQrcode()
clearInterval(timerCall.value)
setInitCall()
})
}
-initData()
-// setInterval(() => {
-// initData()
-// }, 60 * 1000)
const frequencyFn = (length) => {
- if(length <= 16){ // 2
+ if (length <= 16) { // 2
return 30 * 1000
- }else if(length <= 24 ){ // 3
+ } else if (length <= 24) { // 3
return 20 * 1000
- }else if( length <= 32 ){// 4
+ } else if (length <= 32) {// 4
return 15 * 1000
- }else if( length <= 48 ){// 6
+ } else if (length <= 48) {// 6
return 10 * 1000
- }else if( length <= 60 ){// 10
+ } else if (length <= 60) {// 10
return 6 * 1000
- }else{
+ } else {
return 4 * 1000
+ }
+}
+const frequencyCallFn = (length) => {
+ if (length <= 10) { // 2
+ return 6 * 1000
+ } else if (length <= 20) { // 3
+ return 3 * 1000
+ } else {
+ return 2 * 1000
}
}
const setInitContent = () => {
@@ -83,19 +91,22 @@
pageCall.value++
}
activeCall.value = callList.value[pageCall.value]
- }, 6 * 1000)
+ }, frequencyCallFn(callList.value.length))
}
}
onMounted(() => {
- initQrcode()
+ initData()
+ setInterval(() => {
+ initData()
+ }, 60 * 1000)
})
const initQrcode = () => {
var qr = new UQRCode()
// 璁剧疆浜岀淮鐮佸唴瀹�
- qr.data = "https://uqrcode.cn/doc"
- qr.size = 254
+ qr.data = qrcode.value
+ qr.size = 220
// 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
qr.make()
var canvas = document.getElementById("qrcode")
@@ -161,8 +172,11 @@
padding: item.status == 2 || item.status == 3,
}" class="status">{{ statusMap[item.status] }}</div>
</div>
- <div class="item">{{ item.platformName }}</div>
- <div class="item">{{ item.optTimeTemp }}</div>
+ <div class="item">{{ item.platformName || '-' }}</div>
+ <div class="item">
+ <div v-if="item.optTimeTemp" class="time_place">棰勮瀹屾垚鏃堕棿</div>
+ <div>{{ item.optTimeTemp || '-' }}</div>
+ </div>
</div>
</div>
<div class="current">
@@ -189,7 +203,7 @@
</div>
<div class="qrcode_wrap">
<div class="qrcode">
- <canvas id="qrcode" width="254" height="254"></canvas>
+ <canvas id="qrcode" width="220" height="220"></canvas>
</div>
<div class="title">璇锋壂鐮佺鍒�</div>
</div>
@@ -204,16 +218,23 @@
</template>
<style lang="scss" scoped>
+div{
+ box-sizing: border-box;
+}
.main_app {
color: #fff;
+ position: fixed;
+ top: 0;
+ left: 0;
width: 100%;
height: 100vh;
+ overflow: hidden;
background-color: #092030;
position: relative;
z-index: -2;
display: flex;
flex-direction: column;
-
+ justify-content: space-between;
.main_header {
width: 100%;
height: 112px;
@@ -267,16 +288,15 @@
display: flex;
padding: 30px 20px;
position: relative;
-
.list {
flex: 5;
margin-right: 20px;
-
+ display: flex;
+ flex-direction: column;
.line {
display: flex;
align-items: center;
- height: 100px;
-
+ flex: 1;
&:nth-of-type(2n) {
background: rgba(255, 255, 255, 0);
}
@@ -289,13 +309,19 @@
display: flex;
justify-content: center;
align-items: center;
+ flex-direction: column;
font-weight: 500;
font-size: 36px;
flex: 10;
-
+ height: 100%;
+ .time_place{
+ font-weight: 500;
+ font-size: 24px;
+ }
.status {
- width: 174px;
- height: 76px;
+ /* padding: 0 28px; */
+ width: 170px;
+ height: 72%;
border-radius: 8px;
display: flex;
justify-content: center;
@@ -333,14 +359,13 @@
flex: 2;
display: flex;
flex-direction: column;
-
+ border: 1px solid red;
.tip_wrap {
margin-bottom: 20px;
width: 100%;
position: relative;
- flex-shrink: 0;
+ /* flex-shrink: 0; */
flex: 1;
-
.current_plat {
display: flex;
flex-direction: column;
@@ -351,18 +376,18 @@
.id_card {
font-weight: bold;
- font-size: 86px;
+ font-size: 68px;
}
.no {
margin: 10px 0;
font-weight: 500;
- font-size: 58px;
+ font-size: 52px;
}
.place {
font-weight: 500;
- font-size: 42px;
+ font-size: 36px;
}
.plat {
@@ -408,23 +433,22 @@
.qrcode_wrap {
width: 100%;
flex: 1;
- flex-shrink: 0;
+ /* flex-shrink: 0; */
background-color: #51b2ce;
- padding: 36px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.qrcode {
- padding: 12px;
+ padding: 6px;
background-color: #fff;
}
.title {
margin-top: 20px;
font-weight: bold;
- font-size: 38px;
+ font-size: 34px;
color: #111111;
}
}
--
Gitblit v1.9.3