From 021962cf0957d6332e33f7f32d6ae92d0cc9f12c Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 10 十月 2024 15:55:32 +0800
Subject: [PATCH] ll
---
screen/src/views/PlatformCall.vue | 176 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 89 insertions(+), 87 deletions(-)
diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index dbe977f..0bf36df 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -5,6 +5,7 @@
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([])
@@ -107,7 +108,7 @@
var qr = new UQRCode()
// 璁剧疆浜岀淮鐮佸唴瀹�
qr.data = qrcode.value
- qr.size = 210
+ qr.size = 220
// 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
qr.make()
var canvas = document.getElementById("qrcode")
@@ -141,25 +142,22 @@
newTime.value = dayjs().format('HH:mm')
}, 1000)
-const isFullscreen = ref(false);
+const isFullscreen = ref(false)
const handleFull = () => {
- if(!isFullscreen.value){
+ if (!isFullscreen.value) {
handleFullScreen()
- }else{
+ } else {
cancelFullscreen()
}
}
-setTimeout(() => {
- handleFull()
-}, 1000)
const handler = () => {
- isFullscreen.value = document.fullscreenElement !== null;
+ isFullscreen.value = document.fullscreenElement !== null
if (!isFullscreen) {
// 閫�鍑哄叏灞忔椂鍊欒В闄ょ洃鍚紝涓嶇劧姣忔鐩戝惉閮戒細娣诲姞涓�娆＄粦瀹�
- document.removeEventListener("fullscreenchange", handler);
+ document.removeEventListener("fullscreenchange", handler)
}
-};
-document.addEventListener("fullscreenchange", handler);
+}
+document.addEventListener("fullscreenchange", handler)
const handleFullScreen = () => {
let elem = document.documentElement
// 灏濊瘯鍚敤鍏ㄥ睆妯″紡
@@ -175,92 +173,95 @@
}
function cancelFullscreen() {
if (document.exitFullscreen) {
- document.exitFullscreen();
+ document.exitFullscreen()
} else if (document.msExitFullscreen) {
- document.msExitFullscreen();
+ document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
+ document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
- 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" :fullScreen="true">
+ <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">
- <div v-if="item.optTimeTemp" class="time_place">棰勮瀹屾垚鏃堕棿</div>
- <div>{{ item.optTimeTemp || '-' }}</div>
- </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">棰勮瀹屾垚鏃堕棿</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="210" height="210"></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="220" height="220"></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 @click="handleFull" 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>
@@ -270,11 +271,8 @@
.main_app {
color: #fff;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100vh;
+ width: 1920px;
+ height: 1080px;
overflow: hidden;
background-color: #092030;
position: relative;
@@ -284,13 +282,14 @@
.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;
font-size: 48px;
@@ -331,7 +330,7 @@
}
.main_content {
- flex: 1;
+ flex: 82.2;
display: flex;
padding: 30px 20px;
position: relative;
@@ -404,6 +403,7 @@
font-size: bold;
font-size: 36px;
}
+
background: linear-gradient(180deg, #00B5D1 0%, #003C57 100%) !important;
}
}
@@ -429,6 +429,7 @@
padding: 30px 40px;
color: #FFA000;
height: 100%;
+
.id_card {
font-weight: 500;
font-size: 68px;
@@ -458,6 +459,7 @@
font-weight: 500;
font-size: 26px;
height: 100%;
+
.title {
text-align: center;
font-weight: bold;
@@ -515,7 +517,7 @@
.main_footer {
background-color: #1D8D9E;
- height: 80px;
+ flex: 7.4;
display: flex;
align-items: center;
padding: 0 50px;
--
Gitblit v1.9.3