ll

liukangdong

2024-09-29 f6ac139bf416f98c3a3d28f6b1d80e4598bd648f

 screen/src/views/PlatformCall.vue

@@ -2,23 +2,123 @@
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import UQRCode from 'uqrcodejs'
import { getLargeScreenData } from '@/utils/request'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

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 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.duration(item.optTime).format('HH小时mm分')
}
        return item
      })
      clearInterval(timer.value)
      setInitContent()
    }
    if (res.data && res.data.waitWorkList) {
      callList.value = res.data.waitWorkList
    }
    clearInterval(timerCall.value)
    setInitCall()
  })
}
initData()
// setInterval(() => {
//   initData()
// }, 60 * 1000)

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 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]
    }, 6 * 1000)
  }
}

onMounted(() => {
  initQrcode()
})

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 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'))
@@ -51,39 +151,34 @@
          <div class="item">停靠月台</div>
          <div class="item">时间</div>
        </div>
        <div class="line">
          <div class="item no">序号</div>
          <div class="item">车牌号</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="status underway">作业中</div>
            <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">停靠月台</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="item">{{ item.platformName }}</div>
          <div class="item">{{ item.optTimeTemp }}</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 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>
@@ -127,6 +222,7 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;

    .title {
      font-weight: 800;
      font-size: 48px;
@@ -135,22 +231,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,24 +261,30 @@
      z-index: -1;
    }
  }

  .main_content{
    flex: 1;
    display: flex;
    padding: 30px 20px;
    position: relative;

    .list{
      flex: 5;
      margin-right: 20px;

      .line{
        display: flex;
        align-items: center;
        height: 100px;

        &:nth-of-type(2n){
          background: rgba(255,255,255,0);
        }

        &:nth-of-type(2n + 1){
          background: rgba(0,237,255,0.13);
        }

        .item{
          display: flex;
          justify-content: center;
@@ -186,6 +292,7 @@
          font-weight: 500;
          font-size: 36px;
          flex: 10;

          .status{
            width: 174px;
            height: 76px;
@@ -194,66 +301,110 @@
            justify-content: center;
            align-items: center;
          }

          .underway{
            background-color: #51b2ce;
          }

          .call_ed{
            background-color: #f2a43a;
          }

          .padding{
            background-color: #1c485a;
          }
        }

        .no{
          flex: 5;
        }

      }

      .header{
        font-size: bold;
        font-size: 40px;
        background: linear-gradient( 180deg, #00B5D1 0%, #003C57 100%) !important;
      }
    }

    .current{
      /* height: calc( 100vh - 192px ); */
      flex: 2;
      display: flex;
      flex-direction: column;

      .tip_wrap{
        margin-bottom: 20px;
        width: 100%;
        position: relative;
        flex-shrink: 0;
        flex: 1;

        .current_plat {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 30px 40px;
          color: #FFA000;

          .id_card {
            font-weight: bold;
            font-size: 86px;
          }

          .no {
            margin: 10px 0;
            font-weight: 500;
            font-size: 58px;
          }

          .place {
            font-weight: 500;
            font-size: 42px;
          }

          .plat {
            color: #fff;
            margin: 0 10px;
          }
        }

        .empty{
          padding: 30px 40px;
          font-weight: 500;
          font-size: 30px;

          .title{
            text-align: center;
            font-weight: bold;
            font-size: 36px;
            margin-bottom: 20px;
          }

          .line{
            margin-bottom: 10px;
          }
        }

        .icon{
          position: absolute;
          width: 52px;
          height: 52px;
        }

        .icon_l{
          left: 0;
          top: 0;
        }

        .icon_r{
          right: 0;
          bottom: 0;
        }
      }

      .qrcode_wrap{
        width: 100%;
        flex: 1;
@@ -264,10 +415,12 @@
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .qrcode{
          padding: 12px;
          background-color: #fff;
        }

        .title{
          margin-top: 20px;
          font-weight: bold;
@@ -277,16 +430,19 @@
      }
    }
  }

  .main_footer{
    background-color: #1D8D9E;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 50px;

    .icon{
      width: 52px;
      height: 52px;
    }

    .title{
      flex: 1;
      text-align: center;