247 lines
6.7 KiB
Vue
247 lines
6.7 KiB
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: 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=[]
|
||
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)
|
||
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> |