From 1477a1353e96b5620a29c78e2b08647a1a2bc5b7 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 15 十月 2024 19:07:25 +0800
Subject: [PATCH] ll

---
 screen/src/views/PlatformCall.vue |  517 ++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 383 insertions(+), 134 deletions(-)

diff --git a/screen/src/views/PlatformCall.vue b/screen/src/views/PlatformCall.vue
index 62856e9..143dcc8 100644
--- a/screen/src/views/PlatformCall.vue
+++ b/screen/src/views/PlatformCall.vue
@@ -1,24 +1,144 @@
 <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 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 qrcode = ref('')
+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(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
+      })
+      clearInterval(timer.value)
+      setInitContent()
+    }
+    if (res.data && res.data.waitWorkList) {
+      callList.value = res.data.waitWorkList
+    }
+    qrcode.value = res.data.qrCode
+    initQrcode()
+    clearInterval(timerCall.value)
+    setInitCall()
+  })
 }
+
+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 frequencyCallFn = (length) => {
+  if (length <= 10) { // 2
+    return 6 * 1000
+  } else if (length <= 20) { // 3
+    return 3 * 1000
+  } else {
+    return 2 * 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]
+    }, frequencyCallFn(callList.value.length))
+  }
+}
+
 onMounted(() => {
-  initQrcode()
+  initData()
+  setInterval(() => {
+    initData()
+  }, 60 * 1000)
 })
 
+const initQrcode = () => {
+  var qr = new UQRCode()
+  // 璁剧疆浜岀淮鐮佸唴瀹�
+  qr.data = qrcode.value
+  qr.size = 268
+  // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
+  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'))
@@ -28,105 +148,157 @@
   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">
-          <div class="item no">搴忓彿</div>
-          <div class="item">杞︾墝鍙�</div>
-          <div class="item">
-            <div class="status underway">浣滀笟涓�</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">鍋滈潬鏈堝彴</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="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 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 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>
-        <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;
       font-size: 48px;
@@ -135,22 +307,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,133 +337,206 @@
       z-index: -1;
     }
   }
-  .main_content{
-    flex: 1;
+
+  .main_content {
+    flex: 82.2;
     display: flex;
     padding: 30px 20px;
     position: relative;
-    .list{
+
+    .list {
       flex: 5;
       margin-right: 20px;
-      .line{
+      display: flex;
+      flex-direction: column;
+
+      .line {
         display: flex;
         align-items: center;
-        height: 100px;
-        &:nth-of-type(2n){
-          background: rgba(255,255,255,0);
+        height: 11.1%;
+
+        &: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;
+          flex-direction: column;
           font-weight: 500;
-          font-size: 36px;
+          font-size: 30px;
           flex: 10;
-          .status{
-            width: 174px;
-            height: 76px;
+          height: 100%;
+
+          .time_place {
+            font-weight: 500;
+            font-size: 22px;
+          }
+
+          .status {
+            /* padding: 0 28px; */
+            width: 170px;
+            height: 72%;
             border-radius: 8px;
             display: flex;
             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{
-        font-size: bold;
-        font-size: 40px;
-        background: linear-gradient( 180deg, #00B5D1 0%, #003C57 100%) !important;
+
+      .header {
+        .item {
+          font-size: bold;
+          font-size: 36px;
+        }
+
+        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-shrink: 0; */
         flex: 1;
-        .empty{
+
+        .current_plat {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
           padding: 30px 40px;
-          font-weight: 500;
-          font-size: 30px;
-          .title{
-            text-align: center;
-            font-weight: bold;
-            font-size: 36px;
-            margin-bottom: 20px;
+          color: #FFA000;
+          height: 100%;
+
+          .id_card {
+            font-weight: 500;
+            font-size: 68px;
           }
-          .line{
-            margin-bottom: 10px;
+
+          .no {
+            margin: 8px 0;
+            font-weight: 500;
+            font-size: 52px;
+          }
+
+          .place {
+            font-weight: 500;
+            font-size: 36px;
+          }
+
+          .plat {
+            color: #fff;
+            margin: 0 6px;
           }
         }
-        .icon{
+
+        .empty {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          font-weight: 500;
+          font-size: 26px;
+          height: 100%;
+
+          .title {
+            text-align: center;
+            font-weight: bold;
+            font-size: 32px;
+            margin-bottom: 16px;
+          }
+
+          .line {
+            margin-bottom: 8px;
+            padding-left: 32px;
+          }
+        }
+
+        .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;
+        /* flex-shrink: 0; */
         background-color: #51b2ce;
-        padding: 36px 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        .qrcode{
-          padding: 12px;
+
+        .qrcode {
+          padding: 6px 6px 4px;
           background-color: #fff;
         }
-        .title{
-          margin-top: 20px;
+
+        .title {
+          margin-top: 16px;
           font-weight: bold;
-          font-size: 38px;
+          font-size: 28px;
           color: #111111;
         }
       }
     }
   }
-  .main_footer{
+
+  .main_footer {
     background-color: #1D8D9E;
-    height: 80px;
+    flex: 7.4;
     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