Dining_Hall/pages/passenger/flowDetail.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="page-container">
		<view style="width:94%;margin: 20px auto;background: #FFF;border-radius: 20px;">
			<view style="width: 92%;margin:10px auto;display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f5f5f5;padding: 10px;align-items: center;">
				<view style="font-size: 32rpx;font-weight: bold;">今日客流统计</view>
				<view style="font-size: 24rpx;color:#999999;">更新时间：{{flowData.updateTime}}</view>
			</view>
			<view style="width: 92%;margin:10px auto;padding: 10px;font-size: 28rpx;">
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 35%;">拥挤程度:</view> 
					<view class="gl" v-if="personRate<=66" :class="{ 'gl-green': personRate>0 }"></view>
					<view class="gl" v-else :class="{ 'gl-red': personRate>0 }"></view>
					
					<view class="gl" v-if="personRate<=66" :class="{ 'gl-green': personRate>33 }"></view>
					<view class="gl" v-else :class="{ 'gl-red': personRate>33 }"></view>
					
					<view class="gl" v-if="personRate<=66"></view>
					<view class="gl" v-else :class="{ 'gl-red':personRate>66 }"></view>
					
					<view v-if="personRate<=66&&personRate>=0" style="color:#00aa00;">畅通</view>
					<view v-if="personRate>66" style="color:#ff6633;">拥挤</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 35%;">当前人数:</view>
					<view>{{flowData.presentNum}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 35%;">进场人数:</view>
					<view>{{flowData.enters}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 35%;">出场人数:</view>
					<view>{{flowData.exits}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 35%;">最大容纳人数:</view>
					<view>{{flowData.capacity}}</view>
				</view>
				<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
					<view style="font-weight: bold;width: 35%;">峰值人数:</view>
					<view>{{flowData.presentFlowVOList[0].peakNum}}</view>
				</view> 
			</view> 
		</view>
		
		<view style="width:94%;margin: 20px auto;background: #FFF;border-radius: 20px;padding-bottom: 20px;">
			<view style="width: 92%;margin:10px auto;display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f5f5f5;padding: 10px;align-items: center;">
				<view style="font-size: 32rpx;font-weight: bold;">今日客流趋势</view>
				<view style="font-size: 24rpx;color:#999999;">单位：人</view>
			</view>
			<view style="width: 92%;margin:10px auto;padding: 10px;font-size: 28rpx;height: 45vh;">
				 <qiun-data-charts 
				       type="line"
				       :opts="opts" ontouch
				       :chartData="chartData"
				     />
			</view> 
		</view>
		
	</view>
</template>

<script>
import { queryPassengerNumApi } from '@/api/passenger/index.js'

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			dateList:[],
			canteenItem:{},
			flowData:{
				"presentFlowVOList": [
					{
						"date": "2025-06-10",
						"presentList": [
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"39",
							"13",
							"9",
							"9",
							"101",
							"19",
							"23",
							"20",
							"20",
							"20",
							"20"
						],
						"enterList": [
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"110",
							"193",
							"218",
							"218",
							"432",
							"471",
							"491",
							"493",
							"493",
							"493",
							"493"
						],
						"exitList": [
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"0",
							"71",
							"180",
							"209",
							"209",
							"331",
							"452",
							"468",
							"473",
							"473",
							"473",
							"473"
						],
						"peakNum": "101"
					}
				],
				"updateTime": "2025-06-10 17:05:19",
				"presentNum": 20,
				"enters": 493,
				"exits": 473,
				"capacity": 300
			},
			personRate:0,
			chartData:{},
			opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [10,0,0,0],
				enableScroll: false,
				legend: {},
				enableScroll: true,
				
				xAxis: {
				  disableGrid: true,
				  itemCount: 8,
				},
				yAxis: {
				  gridType: "dash",
				  dashLength: 2
				},
				extra: {
				  line: {
					type: "curve",
					width: 2,
					activeType: "hollow"
				  }
				}
			}
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params) 
		this.canteenItem = options
		console.log(this.canteenItem)
		this.dateList = this.getRecentWeekDates()  
	},
	onReady() { 
		// this.initChart();
		this.queryNowPresentNum();
	},
	methods: {
		getRecentWeekDates() {
			let currentDate = new Date(); // 获取当前日期
			let weekDates = []; 
			// for (let i = 0; i < 1; i++) {
				let day = currentDate.getDate();
				let month = currentDate.getMonth() + 1; // 月份是从0开始计数的，所以要+1
				let year = currentDate.getFullYear();
				//日期 
				let formattedDate2 = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;  
				weekDates.push(formattedDate2); 
				// currentDate.setDate(currentDate.getDate() + 1); // 获取前一天的日期
			// } 
			return weekDates;
		},
		async queryNowPresentNum() {
			try {
				let param = {
					"canteenId":this.canteenItem.canteenId,
					"periods":1,
					"presentDate":this.dateList
				}
				const res = await queryPassengerNumApi(param)
				console.log('?? ~ getList ~ res:', res)
				this.flowData = res.data;   
				if(this.flowData.presentNum&&this.flowData.presentNum>0){
					this.personRate = Number(((this.flowData.presentNum/this.flowData.capacity)*100).toFixed(2))
				}
				this.initChart() 
			} catch (error) {
				console.log(error)
			}
		},
		initChart(){
			if(this.flowData.presentFlowVOList&&this.flowData.presentFlowVOList.length>0){
				let xData = []
				let line1=[]
				let line2=[]
				let xIndex = 0
				let index1 = this.flowData.presentFlowVOList[0].enterList.findIndex(v=>Number(v)>0)
				let index2 = this.flowData.presentFlowVOList[0].exitList.findIndex(v=>Number(v)>0) 
				console.log(index1)
				console.log(index2)
				if(index1<=index2){
					this.flowData.presentFlowVOList[0].enterList.forEach((item,index)=>{
						if(index>=index1){
							xData.push((index+1)+"点")
							line1.push(this.flowData.presentFlowVOList[0].enterList[index])
							line2.push(this.flowData.presentFlowVOList[0].exitList[index])
						} 
					})
				}else{
					this.flowData.presentFlowVOList[0].exitList.forEach((item,index)=>{
						if(index>=index2){
							xData.push((index+1)+"点")
							line1.push(this.flowData.presentFlowVOList[0].enterList[index])
							line2.push(this.flowData.presentFlowVOList[0].exitList[index])
						} 
					})
				} 
				console.log(xData)
				console.log(line1)
				console.log(line2)
				var lineData = {
					categories: xData,
					series: [
					  {
						name: "进场人数",
						// lineType: "dash",
						data: line1
					  },
					  {
						name: "出场人数",
						data: line2
					  }
					]
				};  
			}else{
				var lineData = {
					categories: ["8点","9点","10点","11点","12点","13点","14点","15点","16点","17点","18点","19点","20点"],
					series: [
					  {
						name: "进场人数",
						// lineType: "dash",
						data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
					  },
					  {
						name: "出场人数",
						data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
					  }
					]
				};
			}
			this.chartData = JSON.parse(JSON.stringify(lineData)); 
		}
		
	}
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 96vh;
  overflow-y: auto;
  background-color: #f5f5f5;
  padding: 20rpx;
}
.gl{
	  height: 5px;
	  width:40px;
	  background-color: #ccc;
	  margin-right: 4px;
	  border-radius:4px;
	  &.gl-red{
	  	   background-color: #ff6633;
	  }
	  &.gl-green{
	  	   background-color: #00aa00;
	  }
  }
</style>