trafficAnalysisMinApp/pages/index/index.vue

<template>
	<view class="content">
		<view class="first-line">
			<button class="first-btn">一层</button>
			<button class="second-btn" @click="navigatorToSec()">二层</button>
		</view>
		<view class="second-content">
			<view class="sec-first">
				<view class="sec-first-one">配送中心</view>
				<view class="sec-first-two">盥洗室</view>
			</view>
			<view class="sec-second">
				<view class="first-col">
					<view class="shop-text" v-for="(name,i) in shopName">
						{{shopNum[i]}} {{name}}
					</view>
				</view>
				<view class="second-col">
					<view class="second-col-line">
						<view class="shop-btn" :class="{'color1':rank[i] == 1,'color2':rank[i] == 2}"
							v-for="(shop,i) in shopNum1" @click="getInfo(i)">{{shop}}</view>
					</view>
					<view class="second-col-item">
						<view class="col-item" v-for="(shop,i) in shopNum1"></view>
					</view>
					<view class="second-col-line">
						<view class="shop-btn" :class="{'color1':rank[19-i] == 1,'color2':rank[19-i] == 2}"
							v-for="(shop,i) in shopNum2" @click="getInfo(19-i)">{{shop}}</view>
					</view>
				</view>
			</view>
			<view class="sec-third">
				<view class="sec-third-one">黄焖鸡米饭</view>
				<view class="sec-third-two">包子铺</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 {
				rank: [], //档口人数级别
				minNum: 5, //第一级别的人数
				maxNum: 12, //第二级别的人数
				shopNum1: [], //第一列档口
				shopNum2: [], //第二列档口
				shopNum: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲',
					'⑳'
				], //档口名称编号
				shopName: ['窗口名称1', '窗口名称2', '窗口名称3', '窗口名称4', '窗口名称5', '窗口名称6', '窗口名称7', '窗口名称8', '窗口名称9', '窗口名称10',
					'窗口名称11', '窗口名称12', '窗口名称13', '窗口名称14', '窗口名称15', '窗口名称16', '窗口名称17', '窗口名称18', '窗口名称19', '窗口名称20'
				], //档口名称
				peopleNum: [6, 12, 6, 14, 5, 4, 17, 6, 9, 13, 6, 1, 4, 9, 5, 14, 5, 3, 2, 10], //每个档口的人数
				// shopNum1: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩'], //第一列档口
				// shopNum2: ['⑳', '⑲', '⑱', '⑰', '⑯', '⑮', '⑭', '⑬', '⑫', '⑪'], //第二列档口
			}
		},
		onLoad() {
			// console.log(this.peopleNum.length)
			// this.peopleNum[15] = 9
			this.getShopNum()
			this.getRank()
		},
		methods: {
			//获取标号
			getShopNum() {
				this.shopNum1 = this.shopNum.slice(0, 10)
				this.shopNum2 = this.shopNum.slice(10, 20).reverse()
			},
			//获取人数级别
			getRank() {
				var i = 0
				this.rank = []
				while (i < this.peopleNum.length) {
					// console.log(this.peopleNum[i])
					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
				}
				// console.log(this.rank)
			},
			//按键显示
			getInfo(e) {
				// console.log(e)
				uni.showToast({
					icon: 'none',
					title: e + 1 + '号窗口实时人数：' + this.peopleNum[e],
					duration: 2000
				});
			},
			//跳转
			navigatorToSec() {
				uni.navigateTo({
					url: '/pages/second/second',
				});
			}
		}
	}
</script>

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