ll

liukangdong

2024-10-10 021962cf0957d6332e33f7f32d6ae92d0cc9f12c

ll

 screen/package-lock.json

ÎļþÌ«´ó

 screen/package.json

@@ -13,7 +13,10 @@
    "dayjs": "^1.11.11",
    "echarts": "^5.5.1",
    "pinia": "^2.1.7",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",
    "uqrcodejs": "^4.0.7",
    "v-scale-screen": "^2.0.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },

 screen/src/main.js

@@ -5,6 +5,7 @@

import App from './App.vue'
import router from './router'
import '@/utils/scale_screen'

const app = createApp(App)


 screen/src/utils/scale_screen.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@

// rem等比适配配置文件
// åŸºå‡†å¤§å°
const baseSize = 14
// è®¾ç½® rem å‡½æ•°
function setRem() {
  // å½“前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // è®¾ç½®é¡µé¢æ ¹èŠ‚点字体大小（“Math.min(scale, 2)” æŒ‡æœ€é«˜æ”¾å¤§æ¯”例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// åˆå§‹åŒ–
setRem()
// æ”¹å˜çª—口大小时重新设置 rem
window.onresize = function () {
  setRem()
}


 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;