sport_bigScren/pages/check/index.vue

<template>
	<view class="home">
		<view class="header1">
			<view class="logo">
				<image src="@/static/logo.png"></image>
			</view>
			<view class="info">
				<view class="a">弹射者|{{saiName}}</view>
				<view class="b">
					<text>当前时间:{{date}}</text>
					{{timer}}
				</view>
			</view>
		</view>
		<view class="body">
			<view class="a">
				<view class="xh"><text>序号</text></view>
				<view class="xm"><text>项目</text></view>
				<view class="jls"><text>检录室</text></view>
				<view class="dyc"><text>第一次\n广播</text></view>
				<view class="dec"><text>第二次\n广播</text></view>
				<view class="dsc"><text>第三次\n广播</text></view>
				<view class="gb"><text>关闭\n检录室</text></view>
				<view class="jcsj"><text>进场时间</text></view>
				<view class="bjsj"><text>比赛时间</text></view>
				<view class="jl"><text>检录状态</text></view>
				
			</view>
			<view class="b">
				<view class="item item-on" v-for="i in 3" :key="i">
					<view class="xh"><text>1</text></view>
					<view class="xm">男子U20组100米预赛第2组</view>
					<view class="jls">2</view>
					<view class="dyc">10：27</view>
					<view class="dec">10：32</view>
					<view class="dsc">10：37</view>
					<view class="gb">10：42</view>
					<view class="jcsj">10：47</view>
					<view class="bjsj">10：52</view>
					<view class="jl">
						<text>检录结束</text>
					</view>
				</view>
				<view class="item item-on" v-for="i in 3" :key="i">
					<view class="xh"><text>1</text></view>
					<view class="xm">男子U20组100米预赛第2组</view>
					<view class="jls">2</view>
					<view class="dyc">10：27</view>
					<view class="dec">10：32</view>
					<view class="dsc">10：37</view>
					<view class="gb">10：42</view>
					<view class="jcsj">10：47</view>
					<view class="bjsj">10：52</view>
					<view class="jl jl-on">
						<text>正在检录</text>
					</view>
				</view>
				<view class="item" v-for="i in 3" :key="i">
					<view class="xh"><text>1</text></view>
					<view class="xm">男子U20组100米预赛第2组</view>
					<view class="jls">2</view>
					<view class="dyc">10：27</view>
					<view class="dec">10：32</view>
					<view class="dsc">10：37</view>
					<view class="gb">10：42</view>
					<view class="jcsj">10：47</view>
					<view class="bjsj">10：52</view>
					<view class="jl">
						<text>等待检录</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let timer = null;
	const app = getApp();
	export default {
		data() {
			return {
				date: "",
				timer: "",
				saiName: "",
				id: "",
				slist: []
			}
		},
		onLoad() {
			this.saiName = uni.getStorageSync("saiName");
			this.id = uni.getStorageSync("sid");
			this.initTime();
			if(app.globalData.socketWBObj){
				app.globalData.socketWBObj.closeSocket();
			}
			app.globalData.socketWBObj = new this.$websocketUtils(2);
			//监听获取消息
			 uni.$on('socketMessage', res=>{
				 if(res){
					var { cmd, data } = res.data !='链接成功'?JSON.parse(res.data):{};
					//成绩
					if(cmd == 'score'){
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/score/index'
						})
					}else if(cmd == 'declare') {//宣告
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/declare/index'
						})
					}else if(cmd == 'schedule') {//日程
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/schedule/index'
						})
					}else if(cmd == 'check_in') {//检录
						this.slist = data.list
					}else if(cmd == 'award') {//颁奖
						uni.setStorageSync("slist",data)
						uni.navigateTo({
							url: '/pages/award/index'
						})
					}else if(cmd == 'clear') {//清屏
						uni.navigateTo({
							url: '/pages/clear/index'
						})
					}
				 }
			 })
		},
		destroyed() {
			clearInterval(timer)
		},
		methods: {
			initTime() {
				const that = this;
				that.formatTime();
				clearInterval(timer)
				timer = setInterval(function() {
					that.formatTime()
				},1000)
			},
			/**
			 * 当前时间格式化 formatTime(new Data())
			 */
			formatTime() {
			  const year = new Date().getFullYear()
			  const month = new Date().getMonth() + 1
			  const day = new Date().getDate()
			  const hour = new Date().getHours()
			  const minute = new Date().getMinutes()
			  const second = new Date().getSeconds()
			  this.date = [year, month, day].map(this.formatNumber).join('-') 
			  this.timer = [hour, minute, second].map(this.formatNumber).join(':')
			},
			/**
			 * 数字补位
			 */
			formatNumber(n) {
			  n = n.toString()
			  return n[1] ? n : '0' + n
			},
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
		}
	}
</script>

<style lang="scss" scoped>
.body{
	width: 100%;
	min-height: calc(100vh - 136px);
	background-color: #06138e;
	.xh{
		width: 8%;
	}
	.xm{
		width: 400px;
	}
	.jls{
		width: 10%;
	}
	.dyc{
		width: 8%;
	}
	.dec{
		width: 8%;
	}
	.dsc{
		width: 8%;
	}
	.gb{
		width: 8%;
	}
	.jcsj{
		width: 8%;
	}
	.bjsj{
		width: 8%;
	}
	.jl{
		width: 10%;
		padding-right: 30px;
		box-sizing: border-box;
	}
	.a{
		width: 100%;
		height: 90px;
		background-color: #0A59E5;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 30px;
		color: #FFFFFF;	
		text-align: center;
		justify-content: space-between;
	}
	.b{
		.item{
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30px;
			color: #FFFFFF;
			text-align: center;
			&:nth-child(2n){
				background-color: #0833B5;
			}
			.xh{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					display: block;
					width: 48px;
					line-height: 34px;
					background: #DD1D2B;
					border-radius: 5px;
				}
			}
			
			.jl{
				padding-right: 30px;
				box-sizing: border-box;
				font-size: 30px;
				white-space: nowrap;
			}
			&-on{
				.jl{
					text{
						display: block;
						width: 170px;
						line-height: 32px;
						background: #DD1D2B;
						color: #FFFF00;
						border-radius: 5px;
					}
				}
				.jl-on{
					text{
						display: block;
						width: 170px;
						line-height: 32px;
						background: #FFFF00;
						color: #DD1D2B;
						border-radius: 5px;
					}
				}
				color: #FFFF00;
			}
		}
	}
	
}

@media screen and (min-width: 1200px) and (max-width: 1359px) {
	.body{
		.a{
			white-space: nowrap;
			height: 70px;
			font-size: 20px;
		}
		.b{
			.item{
				font-size: 20px;
				.jl{
					font-size: 20px;
					text{
						width: 100%;
					}
				}
			}
			
		}
	}
}
@media screen and (min-width: 1360px) and (max-width: 1500px) {
	.body{
		.a{
			font-size: 25px;
			white-space: nowrap;
			height: 70px;
		}
		.b{
			.item{
				font-size: 25px;
				.jl{
					font-size: 20px;
					text{
						width: 100%;
					}
				}
			}
			
		}
	}
}
</style>