302 lines
8.2 KiB
Vue
302 lines
8.2 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: 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 {
|
||
min-height: 100vh;
|
||
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> |