personnel_management_mobile/pages/screen/index.vue

<template>
  <view class="screen-wrap">
    <!-- 顶部标题栏 -->
    <view class="top-header">
      <text class="title-left">环江毛南族自治县政务服务中心</text>
      <view class="title-right">
        <text>{{ dateStr }}</text>
        <text>{{ weekStr }} {{ timeStr }}</text>
      </view>
    </view>
    <!-- 中间大字播报区 -->
    <view class="big-call">
      <text class="normal-text">请</text>
      <text class="yellow-text">{{ currCallNo }}</text>
      <text class="normal-text">到</text>
      <text class="yellow-text">{{ currWinNo }}号窗口</text>
    </view>
    <!-- 左右双栏表格区域 -->
    <view class="table-box">
      <!-- 左：当前呼叫 -->
      <view class="table-left">
        <view class="table-head">
          <text>当前呼叫</text>
          <text class="tip-text">(过号需重新取号)</text>
        </view>
        <view class="table-list">
          <view class="table-row" v-for="(item, idx) in callList" :key="idx" :class="idx % 2 === 1 ? 'row-blue' : ''">
            <text>请</text>
            <text class="row-no">{{ item.no }}</text>
            <text>到</text>
            <text class="row-no">{{ item.win }}号窗口</text>
          </view>
        </view>
      </view>
      <!-- 右：等候办理 -->
      <view class="table-right">
        <view class="table-head">等候办理</view>
        <view class="table-list">
          <view class="table-row wait-row" v-for="(row, idx) in waitList" :key="idx" :class="idx % 2 === 1 ? 'row-blue' : ''">
            <text v-for="(item, i) in row" :key="i">{{ item }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CallScreen',
  data() {
    return {
      // 实时日期时间
      dateStr: '',
      weekStr: '',
      timeStr: '',
      timer: null, // 定时器
      //顶部大字播报
      currCallNo: 'A010',
      currWinNo: '2',
      //左侧当前呼叫数据
      callList: [
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        },
        {
          no: 'A0009',
          win: '1'
        }
      ],
      //右侧等候队列 三列一组
      waitList: [
        ['A0001', 'A0002', 'A0003'],
        ['A0004', 'A0005', 'A0006'],
        ['A0001', 'A0001', 'A0001'],
        ['A0001', 'A0001', 'A0001'],
        ['A0001', 'A0001', 'A0001'],
        ['A0001', 'A0001', 'A0001'],
        ['A0001', 'A0001', 'A0001'],
        ['A0001', 'A0001', 'A0001']
      ]
    }
  },
  onLoad() {
    this.getNowTime() // 首次赋值时间
    // 每秒刷新时间
    this.timer = setInterval(() => {
      this.getNowTime()
    }, 1000)
  },
  onUnload() {
    // 销毁定时器防止内存泄漏
    clearInterval(this.timer)
  },
  methods: {
    // 获取系统实时时间
    getNowTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = this.addZero(now.getMonth() + 1)
      const day = this.addZero(now.getDate())
      const hour = this.addZero(now.getHours())
      const minute = this.addZero(now.getMinutes())
      // const second = this.addZero(now.getSeconds())
      // 星期映射
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const week = weekArr[now.getDay()]

      this.dateStr = `${year}年${month}月${day}日`
      this.weekStr = week
      this.timeStr = `${hour}:${minute}`
    },
    // 数字补0
    addZero(num) {
      return num < 10 ? '0' + num : num
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

/* 使用 vw/vh 自适应屏幕，设计基准 1920*1080 */
.screen-wrap {
  width: 100vw;
  height: 100vh;
  background: #083378;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*顶部蓝色栏 */
.top-header {
  width: 100%;
  height: 12.963vh; /* 140/1080*100 */
  background: #167bff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.604vw; /* 50/1920*100 */
  box-sizing: border-box;
}

.title-left {
  font-size: 3.229vw; /* 62/1920*100 */
  color: #fff;
  font-weight: bold;
}

.title-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.title-right text {
  font-size: 2.083vw; /* 40/1920*100 */
  color: #fff;
  line-height: 4.63vh; /* 50/1080*100 */
}

/*中间大字叫号 */
.big-call {
  height: 24.074vh; /* 260/1080*100 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.563vw; /* 30/1920*100 */
}

.normal-text {
  font-size: 6.25vw; /* 120/1920*100 */
  color: #ffffff;
  font-weight: bold;
}

.yellow-text {
  font-size: 6.25vw; /* 120/1920*100 */
  color: #ffef33;
  font-weight: bold;
}

/*左右表格容器 */
.table-box {
  flex: 1;
  display: flex;
  gap: 1.563vw; /* 30/1920*100 */
  padding: 0 1.563vw 2.778vh; /* 0 30/1920*100 30/1080*100 */
  box-sizing: border-box;
}

.table-left,
.table-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0.833vw; /* 16/1920*100 */
}

.table-head {
  width: 100%;
  height: 10.185vh; /* 110/1080*100 */
  background: #167bff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.708vw; /* 52/1920*100 */
  color: #fff;
  font-weight: bold;
}

.tip-text {
  font-size: 1.875vw; /* 36/1920*100 */
  margin-left: 1.042vw; /* 20/1920*100 */
  opacity: 0.9;
}

.table-list {
  height: 60vh;
  overflow-y: auto;
}

/*表格行样式 */
.table-row {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.813vw; /* 54/1920*100 */
  background: #ffffff;
}

.wait-row {
  justify-content: space-around;
}

.row-blue {
  background: #e6f0ff;
}

.row-no {
  color: #0055ff;
  font-weight: bold;
  margin: 0 1.042vw; /* 20/1920*100 */
}
</style>