取号机和叫号大屏页面搭建
This commit is contained in:
parent
a061d464c7
commit
2c37f4319e
18
pages.json
18
pages.json
|
|
@ -53,6 +53,24 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/takeTicket/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "叫号机",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/screen/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "公告屏",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<view class="screen-wrap" :style="scaleWrap">
|
||||
<!-- 顶部标题栏 -->
|
||||
<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-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 class="table-right">
|
||||
<view class="table-head">等候办理</view>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CallScreen",
|
||||
data() {
|
||||
return {
|
||||
designW: 1920,
|
||||
designH: 1080,
|
||||
scaleWrap: {
|
||||
width: "1920px",
|
||||
height: "1080px",
|
||||
transformOrigin: "left top",
|
||||
transform: "scale(1)"
|
||||
},
|
||||
// 实时日期时间
|
||||
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.setScale()
|
||||
this.getNowTime() // 首次赋值时间
|
||||
// 每秒刷新时间
|
||||
this.timer = setInterval(() => {
|
||||
this.getNowTime()
|
||||
}, 1000)
|
||||
window.addEventListener("resize", this.setScale)
|
||||
},
|
||||
onUnload() {
|
||||
window.removeEventListener("resize", this.setScale)
|
||||
// 销毁定时器防止内存泄漏
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
//大屏自适应缩放
|
||||
setScale() {
|
||||
const w = document.documentElement.clientWidth
|
||||
const h = document.documentElement.clientHeight
|
||||
const sX = w / this.designW
|
||||
const sY = h / this.designH
|
||||
const scale = Math.min(sX, sY)
|
||||
this.scaleWrap.transform = `scale(${scale})`
|
||||
},
|
||||
// 获取系统实时时间
|
||||
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>
|
||||
/*基准1920*1080大屏 */
|
||||
.screen-wrap {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #083378;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*顶部蓝色栏 */
|
||||
.top-header {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: #167bff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
font-size: 62px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.title-right text {
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
/*中间大字叫号 */
|
||||
.big-call {
|
||||
height: 260px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.normal-text {
|
||||
font-size: 120px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.yellow-text {
|
||||
font-size: 120px;
|
||||
color: #ffef33;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*左右表格容器 */
|
||||
.table-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
padding: 0 30px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-left,
|
||||
.table-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-head {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background: #167bff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 52px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 36px;
|
||||
margin-left: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/*表格行样式 */
|
||||
.table-row {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 54px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.wait-row {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.row-blue {
|
||||
background: #e6f0ff;
|
||||
}
|
||||
|
||||
.row-no {
|
||||
color: #0055ff;
|
||||
font-weight: bold;
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
<template>
|
||||
<!-- 外层容器固定设计稿1920*1080，大屏自动等比缩放 -->
|
||||
<view class="wrap" :style="scaleStyle">
|
||||
<!-- 顶部蓝色头部 -->
|
||||
<view class="header-bar">
|
||||
<view class="header-left">
|
||||
<text class="win-no">窗口号：001</text>
|
||||
<view class="user-dept">
|
||||
<text>王专员</text>
|
||||
<text>人社局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="exit-btn" @click="handleExit">
|
||||
<!-- 退出电源图标 预留image -->
|
||||
<img class="icon-exit" src="../../static/images/home/logout_icon.png" />
|
||||
<text>退出</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 中间内容区域 -->
|
||||
<view class="content-box">
|
||||
<view class="item-col">
|
||||
<text class="col-title">当前叫号</text>
|
||||
<text class="call-no">A0001</text>
|
||||
</view>
|
||||
<view class="item-col">
|
||||
<text class="col-title">当前等候</text>
|
||||
<text class="wait-num">10人</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部功能按钮区 -->
|
||||
<view class="btn-group">
|
||||
<view class="btn-item green" @click="handleCall">
|
||||
<img class="btn-icon" src="../../static/images/takeTicket/hj_icon.png" mode="aspectFit"></img>
|
||||
<text>呼叫</text>
|
||||
</view>
|
||||
<view class="btn-item blue" @click="handleReCall">
|
||||
<img class="btn-icon" src="../../static/images/takeTicket/ch_icon.png" mode="aspectFit"></img>
|
||||
<text>重呼</text>
|
||||
</view>
|
||||
<view class="btn-item sky" @click="handleTransfer">
|
||||
<img class="btn-icon" src="../../static/images/takeTicket/zy_icon.png" mode="aspectFit"></img>
|
||||
<text>转移</text>
|
||||
</view>
|
||||
<view class="btn-item orange" @click="handleOver">
|
||||
<img class="btn-icon" src="../../static/images/takeTicket/gh_icon.png" mode="aspectFit"></img>
|
||||
<text>过号</text>
|
||||
</view>
|
||||
<view class="btn-item red" @click="handleHang">
|
||||
<img class="btn-icon" src="../../static/images/takeTicket/gq_icon.png" mode="aspectFit"></img>
|
||||
<text>挂起</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CallWindow',
|
||||
data() {
|
||||
return {
|
||||
// 设计稿尺寸 1920*1080
|
||||
designW: 1920,
|
||||
designH: 1080,
|
||||
scaleStyle: {
|
||||
width: '1920px',
|
||||
height: '1080px',
|
||||
transformOrigin: 'left top',
|
||||
transform: 'scale(1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
onMounted() {
|
||||
// 大屏自动缩放适配屏幕
|
||||
this.calcScale()
|
||||
window.addEventListener('resize', this.calcScale)
|
||||
},
|
||||
onUnload() {
|
||||
window.removeEventListener('resize', this.calcScale)
|
||||
},
|
||||
methods: {
|
||||
// 计算缩放比例
|
||||
calcScale() {
|
||||
const screenW = document.documentElement.clientWidth
|
||||
const screenH = document.documentElement.clientHeight
|
||||
const scaleX = screenW / this.designW
|
||||
const scaleY = screenH / this.designH
|
||||
const scale = Math.min(scaleX, scaleY)
|
||||
this.scaleStyle.transform = `scale(${scale})`
|
||||
},
|
||||
// 按钮事件
|
||||
handleExit() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
handleCall() {
|
||||
console.log('呼叫')
|
||||
},
|
||||
handleReCall() {
|
||||
console.log('重呼')
|
||||
},
|
||||
handleTransfer() {
|
||||
console.log('转移')
|
||||
},
|
||||
handleOver() {
|
||||
console.log('过号')
|
||||
},
|
||||
handleHang() {
|
||||
console.log('挂起')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: url('../../static/images/home/bg.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 顶部头部 */
|
||||
.header-bar {
|
||||
width: 100%;
|
||||
/* height: 180px; */
|
||||
background-color: rgba(19, 114, 255, 1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 21px 40px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.win-no {
|
||||
font-size: 60px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-dept {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.user-dept text {
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.exit-btn {
|
||||
background: #fff;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
|
||||
.icon-exit {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.exit-btn text {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/* 中间内容 */
|
||||
.content-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.item-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
font-size: 60px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.call-no {
|
||||
font-size: 220px;
|
||||
color: rgba(19, 114, 255, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wait-num {
|
||||
font-size: 220px;
|
||||
color: #ff5522;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.btn-group {
|
||||
display: flex;
|
||||
padding: 0 40px 60px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
height: 240px;
|
||||
border-radius: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.btn-item text {
|
||||
font-size: 58px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #28c958;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1976f2;
|
||||
}
|
||||
|
||||
.sky {
|
||||
background-color: #18a0f0;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #ff9922;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ff6633;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Loading…
Reference in New Issue