trafficAnalysisMinApp/pages/second/second.vue

<template>
	<view class="content">
		<view class="first-line">
			<button class="first-btn" @click="navigatorToFir()">一层</button>
			<button class="second-btn">二层</button>
		</view>
		<view class="second-content">
			<view class="sec-first">
				<view class="sec-first-shop" :class="{'color1':rank[0] == 1,'color2':rank[0] == 2}" @click="getInfo(0)">
					<view class="shop-text">{{shopName[0]}}</view>
				</view>
				<view class="sec-first-item">盥洗室</view>
			</view>
			<view class="sec-second">
				<view class="first-col">
					<view class="first-col-text">就餐区域</view>
				</view>
				<view class="col-item"></view>
				<view class="second-col">
					<view class="first-col-text">就餐区域</view>
				</view>
				<view class="third-col">
					<view class="third-col-one" :class="{'color1':rank[1] == 1,'color2':rank[1] == 2}"
						@click="getInfo(1)">
						<view class="one-shop-text">{{shopName[1]}}</view>
					</view>
					<view class="third-col-two" :class="{'color1':rank[2] == 1,'color2':rank[2] == 2}"
						@click="getInfo(2)">
						<view class="one-shop-text">{{shopName[2]}}</view>
					</view>
				</view>
				<view class="fourth-col">
					<view class="first-col-text">办公区域</view>
				</view>
			</view>
			<view class="sec-third">
				<view class="sec-third-one" :class="{'color1':rank[3] == 1,'color2':rank[3] == 2}" @click="getInfo(3)">
					<view class="shop-text">{{shopName[3]}}</view>
				</view>
				<view class="sec-third-two" :class="{'color1':rank[4] == 1,'color2':rank[4] == 2}" @click="getInfo(4)">
					<view class="shop-text">{{shopName[4]}}</view>
				</view>
			</view>
		</view>
		<view class="third-note">
			<view class="third-first">
				<span style="color: #FF0000;">*</span>
				注：点击对应食堂窗口查看实时人数
			</view>
			<view class="third-second">
				<view class="one-line">
					<view class="one-block"></view>
					<view class="third-text">
						窗口人数低于{{minNum}}人
					</view>
				</view>
				<view class="tow-line">
					<view class="two-block"></view>
					<view class="third-text">
						窗口人数高于{{minNum}}人且小于{{maxNum}}人
					</view>
				</view>
				<view class="three-line">
					<view class="three-block"></view>
					<view class="third-text">
						窗口人数高于{{maxNum}}人
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minNum: 5, //第一级别的人数
				maxNum: 12, //第二级别的人数
				rank: [], //档口人数级别
				peopleNum: [6, 13, 3, 2, 10], //档口人数
				shopName: ['1号窗口', '2号窗口', '蛋糕店', '3号窗口', '4号窗口', '5号窗口'], //档口名称
			}
		},
		onLoad() {
			this.getRank()
		},
		methods: {
			//获取人数级别
			getRank() {
				var i = 0
				this.rank = []
				while (i < this.peopleNum.length) {
					if (this.peopleNum[i] >= this.minNum && this.peopleNum[i] <= this.maxNum) {
						this.rank.push(1)
					} else if (this.peopleNum[i] > this.maxNum) {
						this.rank.push(2)
					} else {
						this.rank.push(0)
					}
					i += 1
				}
			},
			//跳转到第一层
			navigatorToFir() {
				uni.navigateTo({
					url: '/pages/index/index',
				});
			},
			//按键显示
			getInfo(e) {
				// console.log(e)
				uni.showToast({
					icon: 'none',
					title: '实时人数：' + this.peopleNum[e],
					duration: 2000
				});
			},
		}
	}
</script>

<style>
	@import url("second.css");
</style>