2025-06-10 15:12:17 +08:00
|
|
|
|
<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: 40%;">当前人数:</view>
|
|
|
|
|
|
<view>{{flowData.presentNum}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
|
|
|
|
|
|
<view style="font-weight: bold;width: 40%;">进场人数:</view>
|
|
|
|
|
|
<view>{{flowData.enters}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
|
|
|
|
|
|
<view style="font-weight: bold;width: 40%;">出场人数:</view>
|
|
|
|
|
|
<view>{{flowData.exits}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
|
|
|
|
|
|
<view style="font-weight: bold;width: 40%;">最大容纳人数:</view>
|
|
|
|
|
|
<view>{{flowData.capacity}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
|
|
|
|
|
|
<view style="font-weight: bold;width: 40%;">峰值人数:</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"
|
|
|
|
|
|
: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"
|
|
|
|
|
|
],
|
|
|
|
|
|
"enterList": [
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"110",
|
|
|
|
|
|
"193",
|
|
|
|
|
|
"218",
|
|
|
|
|
|
"218"
|
|
|
|
|
|
],
|
|
|
|
|
|
"exitList": [
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"0",
|
|
|
|
|
|
"71",
|
|
|
|
|
|
"180",
|
|
|
|
|
|
"209",
|
|
|
|
|
|
"209"
|
|
|
|
|
|
],
|
|
|
|
|
|
"peakNum": "39"
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
"updateTime": "2025-06-10 10:40:05",
|
|
|
|
|
|
"presentNum": 9,
|
|
|
|
|
|
"enters": 218,
|
|
|
|
|
|
"exits": 209,
|
|
|
|
|
|
"capacity": 400
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData:{},
|
|
|
|
|
|
opts: {
|
|
|
|
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
|
|
|
|
padding: [15,10,0,15],
|
|
|
|
|
|
enableScroll: false,
|
|
|
|
|
|
legend: {},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
disableGrid: true
|
|
|
|
|
|
},
|
|
|
|
|
|
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;
|
|
|
|
|
|
this.initChart()
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.log(error)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
initChart(){
|
|
|
|
|
|
if(this.flowData.presentFlowVOList&&this.flowData.presentFlowVOList.length>0){
|
|
|
|
|
|
let xData = []
|
|
|
|
|
|
let line1=[]
|
|
|
|
|
|
let line2=[]
|
2025-06-10 15:51:20 +08:00
|
|
|
|
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])
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
2025-06-10 15:12:17 +08:00
|
|
|
|
console.log(xData)
|
|
|
|
|
|
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 {
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
