ll

liukangdong

2024-10-10 c72cb6959cbf43520fbc88f390e2e21da7fbfbf4

 screen/src/views/PlatformCall.vue

@@ -1,5 +1,5 @@
<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'
@@ -22,7 +22,8 @@
    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')
          // item.optTimeTemp = dayjs.duration(Math.abs(new Date().getTime() - item.optTime)).format('HH:mm')
        }
        return item
      })
@@ -106,7 +107,7 @@
  var qr = new UQRCode()
  // 设置二维码内容
  qr.data = qrcode.value
  qr.size = 254
  qr.size = 210
  // 调用制作二维码方法
  qr.make()
  var canvas = document.getElementById("qrcode")
@@ -139,6 +140,51 @@
  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()
  }
}
setTimeout(() => {
  handleFull()
}, 1000)
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">
@@ -172,8 +218,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">
@@ -200,14 +249,14 @@
        </div>
        <div class="qrcode_wrap">
          <div class="qrcode">
            <canvas id="qrcode" width="254" height="254"></canvas>
            <canvas id="qrcode" width="210" height="210"></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="">
      <img @click="handleFull" src="@/assets/images/call/ic_news@2x.png" class="icon" alt="">
      <div class="title">请根据队列提示信息，依次等候进场</div>
      <div class="icon"></div>
    </div>
@@ -215,15 +264,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%;
@@ -233,7 +290,7 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;

    z-index: 11;
    .title {
      font-weight: 800;
      font-size: 48px;
@@ -282,11 +339,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);
@@ -300,13 +359,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;
@@ -333,8 +400,10 @@
      }

      .header {
        font-size: bold;
        font-size: 40px;
        .item {
          font-size: bold;
          font-size: 36px;
        }
        background: linear-gradient(180deg, #00B5D1 0%, #003C57 100%) !important;
      }
    }
@@ -349,7 +418,7 @@
        margin-bottom: 20px;
        width: 100%;
        position: relative;
        flex-shrink: 0;
        /* flex-shrink: 0; */
        flex: 1;

        .current_plat {
@@ -359,43 +428,46 @@
          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;
          }
        }

@@ -419,23 +491,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;
          margin-top: 16px;
          font-weight: bold;
          font-size: 38px;
          font-size: 28px;
          color: #111111;
        }
      }