From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 16 十月 2024 15:59:38 +0800
Subject: [PATCH] 代码初始化
---
screen/src/views/PlatformCall.vue | 305 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 199 insertions(+), 106 deletions(-)
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index bca3c16..143dcc8 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -1,11 +1,13 @@
<script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
import dayjs from 'dayjs'
import UQRCode from 'uqrcodejs'
import { getLargeScreenData } from '@/utils/request'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
+import VScaleScreen from 'v-scale-screen'
+const qrcode = ref('')
const contentList = ref([])
const contentTempList = ref([])
const page = ref(1)
@@ -21,7 +23,15 @@
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鍒�')
+ item.optTimeTemp = dayjs(item.optTime).format('HH:mm')
+ if(item.status == 4){
+ if(item.optTime >= new Date().getTime()){
+ item.optTimeTemp = dayjs.duration(item.optTime - new Date().getTime()).format('HH:mm')
+ }else{
+ item.optTimeTemp = '-'
+ }
+ }
+ // item.optTimeTemp = dayjs.duration(Math.abs(new Date().getTime() - item.optTime)).format('HH:mm')
}
return item
})
@@ -31,28 +41,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 +100,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 = 268
// 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
qr.make()
var canvas = document.getElementById("qrcode")
@@ -128,100 +148,156 @@
newDate.value = dayjs().format('YYYY-MM-DD')
newTime.value = dayjs().format('HH:mm')
}, 1000)
+
+const isFullscreen = ref(false)
+const handleFull = () => {
+ if (!isFullscreen.value) {
+ handleFullScreen()
+ } else {
+ cancelFullscreen()
+ }
+}
+const handler = () => {
+ isFullscreen.value = document.fullscreenElement !== null
+ if (!isFullscreen) {
+ // 閫�鍑哄叏灞忔椂鍊欒В闄ょ洃鍚紝涓嶇劧姣忔鐩戝惉閮戒細娣诲姞涓�娆＄粦瀹�
+ document.removeEventListener("fullscreenchange", handler)
+ }
+}
+document.addEventListener("fullscreenchange", handler)
+const handleFullScreen = () => {
+ let elem = document.documentElement
+ // 灏濊瘯鍚敤鍏ㄥ睆妯″紡
+ if (elem.requestFullscreen) {
+ elem.requestFullscreen()
+ } else if (elem.mozRequestFullScreen) { // 鍏煎 Firefox
+ elem.mozRequestFullScreen()
+ } else if (elem.webkitRequestFullscreen) { // 鍏煎 Chrome, Safari 鍜� Opera
+ elem.webkitRequestFullscreen()
+ } else if (elem.msRequestFullscreen) { // 鍏煎 IE/Edge
+ elem.msRequestFullscreen()
+ }
+}
+function cancelFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen()
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen()
+ }
+}
+
</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" 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="{
- call_ed: item.status == 4,
- underway: item.status == 5,
- padding: item.status == 2 || item.status == 3,
- }" class="status">{{ statusMap[item.status] }}</div>
+ <v-scale-screen width="1920" height="1080">
+ <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" @click="handleFull">
+ <div class="left">
+ <div class="week">{{ newWeek }}</div>
+ <div class="date">{{ newDate }}</div>
</div>
- <div class="item">{{ item.platformName }}</div>
- <div class="item">{{ item.optTimeTemp }}</div>
+ <div class="time">{{ newTime }}</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 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 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" 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="{
+ 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">{{ item.platformName || '-' }}</div>
+ <div class="item">
+ <div v-if="item.optTimeTemp" class="time_place">
+ {{ item.status == 4 ? '鍓╀綑绛夊緟鏃堕棿' : '棰勮瀹屾垚鏃堕棿' }}
+ </div>
+ <div>{{ item.optTimeTemp || '-' }}</div>
</div>
</div>
- <div v-else 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 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 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>
+ <div class="line">3銆佽鏈夊簭鎺掗槦鍏ュ洯</div>
+ <div class="line">4銆佽鍗歌揣缁撴潫绂佹鍦ㄥ洯鍖洪�楃暀</div>
+ <div class="line">5銆佽閬靛畧鍥尯瀹夊叏瑙勭珷鍒跺害</div>
+ </div>
</div>
- <div class="title">璇锋壂鐮佺鍒�</div>
+ <div class="qrcode_wrap">
+ <div class="qrcode">
+ <canvas id="qrcode" width="268" height="268"></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>
- <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>
+ </v-scale-screen>
+
</template>
<style lang="scss" scoped>
+div {
+ box-sizing: border-box;
+}
+
.main_app {
color: #fff;
- width: 100%;
- height: 100vh;
+ width: 1920px;
+ height: 1080px;
+ 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;
+ flex: 10.3;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 50px;
+ z-index: 11;
.title {
font-weight: 800;
@@ -263,7 +339,7 @@
}
.main_content {
- flex: 1;
+ flex: 82.2;
display: flex;
padding: 30px 20px;
position: relative;
@@ -271,11 +347,13 @@
.list {
flex: 5;
margin-right: 20px;
+ display: flex;
+ flex-direction: column;
.line {
display: flex;
align-items: center;
- height: 100px;
+ height: 11.1%;
&:nth-of-type(2n) {
background: rgba(255, 255, 255, 0);
@@ -289,13 +367,21 @@
display: flex;
justify-content: center;
align-items: center;
+ flex-direction: column;
font-weight: 500;
- font-size: 36px;
+ font-size: 30px;
flex: 10;
+ height: 100%;
+
+ .time_place {
+ font-weight: 500;
+ font-size: 22px;
+ }
.status {
- width: 174px;
- height: 76px;
+ /* padding: 0 28px; */
+ width: 170px;
+ height: 72%;
border-radius: 8px;
display: flex;
justify-content: center;
@@ -322,8 +408,11 @@
}
.header {
- font-size: bold;
- font-size: 40px;
+ .item {
+ font-size: bold;
+ font-size: 36px;
+ }
+
background: linear-gradient(180deg, #00B5D1 0%, #003C57 100%) !important;
}
}
@@ -338,7 +427,7 @@
margin-bottom: 20px;
width: 100%;
position: relative;
- flex-shrink: 0;
+ /* flex-shrink: 0; */
flex: 1;
.current_plat {
@@ -348,43 +437,48 @@
justify-content: center;
padding: 30px 40px;
color: #FFA000;
+ height: 100%;
.id_card {
- font-weight: bold;
- font-size: 86px;
+ font-weight: 500;
+ font-size: 68px;
}
.no {
- margin: 10px 0;
+ margin: 8px 0;
font-weight: 500;
- font-size: 58px;
+ font-size: 52px;
}
.place {
font-weight: 500;
- font-size: 42px;
+ font-size: 36px;
}
.plat {
color: #fff;
- margin: 0 10px;
+ margin: 0 6px;
}
}
.empty {
- padding: 30px 40px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
font-weight: 500;
- font-size: 30px;
+ font-size: 26px;
+ height: 100%;
.title {
text-align: center;
font-weight: bold;
- font-size: 36px;
- margin-bottom: 20px;
+ font-size: 32px;
+ margin-bottom: 16px;
}
.line {
- margin-bottom: 10px;
+ margin-bottom: 8px;
+ padding-left: 32px;
}
}
@@ -408,23 +502,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 6px 4px;
background-color: #fff;
}
.title {
- margin-top: 20px;
+ margin-top: 16px;
font-weight: bold;
- font-size: 38px;
+ font-size: 28px;
color: #111111;
}
}
@@ -433,7 +526,7 @@
.main_footer {
background-color: #1D8D9E;
- height: 80px;
+ flex: 7.4;
display: flex;
align-items: center;
padding: 0 50px;
--
Gitblit v1.9.3