取号机和叫号大屏页面搭建
This commit is contained in:
parent
a061d464c7
commit
2c37f4319e
18
pages.json
18
pages.json
|
|
@ -53,6 +53,24 @@
|
||||||
"navigationStyle": "custom"
|
"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