客流统计4

This commit is contained in:
zzyuan 2025-06-10 16:58:02 +08:00
parent 90a72b2d62
commit 202b06f516
4 changed files with 106 additions and 38 deletions

View File

@ -87,18 +87,17 @@
</view> </view>
<view class="handle-box-item2" @click="goToPassenger" style="background: #EEF4FF;" v-if="canteenId=='378928314946949120'"> <view class="handle-box-item2" @click="goToPassenger" style="background: #EEF4FF;" v-if="canteenId=='378928314946949120'">
<!-- <view class="handle-box-item2" @click="goToPassenger" style="background: #EEF4FF;"> -->
<view class="image-box"> <view class="image-box">
<image src="/static/images/index/passenger.png" style="width: 50px;height: 50px;" mode="aspectFit"></image> <image src="/static/images/index/passenger.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
</view> </view>
<view class="box-title">客流统计</view> <view class="box-title">客流统计</view>
</view> </view>
<!-- <view class="handle-box-item" @click="goToYj" style="background: #F4FFFF;" v-if="userInfo.orgId=='378921748080365568'||userInfo.custNum.indexOf('@yjst')>-1"> <view class="handle-box-item" @click="goToYj" style="background: #F4FFFF;" v-if="userInfo.orgId=='999'||userInfo.custNum.indexOf('@yjst')>-1">
<view class="image-box"> <view class="image-box">
<image src="/static/images/index/yjCanteen.png" style="width: 50px;height: 50px;" mode="aspectFit"></image> <image src="/static/images/index/yjCanteen.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
</view> </view>
<view class="box-title">运检食堂</view> --> <view class="box-title">运检食堂</view>
</view> </view>
</view> </view>

View File

@ -15,16 +15,35 @@
mode="aspectFill" mode="aspectFill"
></image> ></image>
<view class="merchant-detail"> <view class="merchant-detail">
<view class="merchant-name">{{ item.canteenName }}</view> <view class="merchant-name">
<text>{{ item.canteenName }}</text>
<view class="status-box" :class="{ 'status-open': item.isOpen }">
{{ item.isOpen ? '营业中' : '休息中' }}
</view>
</view>
<view class="merchant-stats"> <view class="merchant-stats">
<text>当前客流 {{ item.presentNum }}</text> <view style="margin-bottom: 5px;display: flex;align-items: center;">
<text class="business-hours">营业时间 {{ item.startBusinessTime }} - {{item.endBusinessTime}}</text> <view style="color:#000;">拥挤程度</view>
<view class="gl" v-if="item.personRate<=66" :class="{ 'gl-green': item.personRate>0 }"></view>
<view class="gl" v-else :class="{ 'gl-red': item.personRate>0 }"></view>
<view class="gl" v-if="item.personRate<=66" :class="{ 'gl-green': item.personRate>33 }"></view>
<view class="gl" v-else :class="{ 'gl-red': item.personRate>33 }"></view>
<view class="gl" v-if="item.personRate<=66"></view>
<view class="gl" v-else :class="{ 'gl-red':item.personRate>66 }"></view>
<view v-if="item.personRate<=66&&item.personRate>=0" style="color:#00aa00;">畅通</view>
<view v-if="item.personRate>66" style="color:#ff6633;">拥挤</view>
</view>
<view>
<text style="color:#000;">营业时间</text>
<text class="business-hours">{{ item.startBusinessTime }} - {{item.endBusinessTime}}</text>
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="status-box" :class="{ 'status-open': item.isOpen }">
{{ item.isOpen ? '营业中' : '休息中' }}
</view>
</view> </view>
</view> </view>
</view> </view>
@ -38,7 +57,7 @@ export default {
data() { data() {
return { return {
fontValue:uni.getStorageSync('fontSize') || 8, fontValue:uni.getStorageSync('fontSize') || 8,
merchantList: [] merchantList: [{"presentNum":9,"capacity":400,"businessState":2,"canteenName":"sbd工业园食堂","canteenId":"378928314946949120","startBusinessTime":"00:00:00","endBusinessTime":"23:59:59","imgUrl":null,"personRate":3}]
} }
}, },
onLoad() { onLoad() {
@ -51,8 +70,11 @@ export default {
"custId":uni.getStorageSync('custId') "custId":uni.getStorageSync('custId')
} }
const res = await queryNowPresentNumApi(param) const res = await queryNowPresentNumApi(param)
console.log('?? ~ getList ~ res:', res)
this.merchantList = res.data; this.merchantList = res.data;
this.merchantList.forEach(item=>{
item.personRate = Number(((item.presentNum/item.capacity)*100).toFixed(2))
})
console.log('?? ~ getList ~ res:', this.merchantList)
this.updateMerchantStatus() this.updateMerchantStatus()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
@ -82,6 +104,7 @@ export default {
}) })
} }
}, },
mounted() { mounted() {
// this.updateMerchantStatus(); // this.updateMerchantStatus();
// //
@ -123,8 +146,8 @@ export default {
align-items: center; align-items: center;
.merchant-avatar { .merchant-avatar {
width: 88rpx; width: 100rpx;
height: 88rpx; height: 100rpx;
border-radius: 8rpx; border-radius: 8rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
@ -138,6 +161,7 @@ export default {
color: #333333; color: #333333;
margin-bottom: 16rpx; margin-bottom: 16rpx;
font-weight: 500; font-weight: 500;
display: flex;
} }
.merchant-stats { .merchant-stats {
@ -155,21 +179,36 @@ export default {
} }
.status-box { .status-box {
max-width: 10%;
width: 36rpx;
font-size: 22rpx; font-size: 22rpx;
color: #999999; color: #999999;
padding: 4rpx 4rpx; padding: 4rpx 8rpx;
margin-left: 10px;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 4rpx; border-radius: 4rpx;
position: absolute; // position: absolute;
top: 36rpx; // top: 36rpx;
right: 24rpx; // right: 24rpx;
&.status-open { &.status-open {
color: #ff6633; color: #ff6633;
background-color: #fff2ef; background-color: #fff2ef;
} }
} }
.gl{
height: 5px;
width:50px;
background-color: #ccc;
margin-right: 4px;
border-radius:4px;
&.gl-red{
background-color: #ff6633;
}
&.gl-green{
background-color: #00aa00;
}
}
} }
</style> </style>

View File

@ -8,23 +8,37 @@
</view> </view>
<view style="width: 92%;margin:10px auto;padding: 10px;font-size: 28rpx;"> <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="width: 100%;margin:10px auto;display: flex;align-items: center;">
<view style="font-weight: bold;width: 40%;">当前人数:</view> <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>{{flowData.presentNum}}</view>
</view> </view>
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;"> <view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
<view style="font-weight: bold;width: 40%;">进场人数:</view> <view style="font-weight: bold;width: 35%;">进场人数:</view>
<view>{{flowData.enters}}</view> <view>{{flowData.enters}}</view>
</view> </view>
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;"> <view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
<view style="font-weight: bold;width: 40%;">出场人数:</view> <view style="font-weight: bold;width: 35%;">出场人数:</view>
<view>{{flowData.exits}}</view> <view>{{flowData.exits}}</view>
</view> </view>
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;"> <view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
<view style="font-weight: bold;width: 40%;">最大容纳人数:</view> <view style="font-weight: bold;width: 35%;">最大容纳人数:</view>
<view>{{flowData.capacity}}</view> <view>{{flowData.capacity}}</view>
</view> </view>
<view style="width: 100%;margin:10px auto;display: flex;align-items: center;"> <view style="width: 100%;margin:10px auto;display: flex;align-items: center;">
<view style="font-weight: bold;width: 40%;">峰值人数:</view> <view style="font-weight: bold;width: 35%;">峰值人数:</view>
<view>{{flowData.presentFlowVOList[0].peakNum}}</view> <view>{{flowData.presentFlowVOList[0].peakNum}}</view>
</view> </view>
</view> </view>
@ -103,11 +117,12 @@ export default {
} }
], ],
"updateTime": "2025-06-10 10:40:05", "updateTime": "2025-06-10 10:40:05",
"presentNum": 9, "presentNum": 200,
"enters": 218, "enters": 218,
"exits": 209, "exits": 209,
"capacity": 400 "capacity": 400
}, },
personRate:0,
chartData:{}, chartData:{},
opts: { opts: {
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
@ -138,7 +153,6 @@ export default {
this.dateList = this.getRecentWeekDates() this.dateList = this.getRecentWeekDates()
}, },
onReady() { onReady() {
// this.initChart()
this.queryNowPresentNum(); this.queryNowPresentNum();
}, },
methods: { methods: {
@ -161,13 +175,15 @@ export default {
let param = { let param = {
"canteenId":this.canteenItem.canteenId, "canteenId":this.canteenItem.canteenId,
"periods":1, "periods":1,
"presentDate":this.dateList, "presentDate":this.dateList
} }
const res = await queryPassengerNumApi(param) const res = await queryPassengerNumApi(param)
console.log('?? ~ getList ~ res:', res) console.log('?? ~ getList ~ res:', res)
this.flowData = res.data; 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() this.initChart()
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@ -200,6 +216,8 @@ export default {
}) })
} }
console.log(xData) console.log(xData)
console.log(line1)
console.log(line2)
var lineData = { var lineData = {
categories: xData, categories: xData,
series: [ series: [
@ -243,5 +261,17 @@ export default {
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 20rpx; 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> </style>

View File

@ -75,7 +75,7 @@ export default {
console.log(index) console.log(index)
if (index === 0) { if (index === 0) {
console.log(this.userInfo.custNum.indexOf("@yjst_sbd")) console.log(this.userInfo.custNum.indexOf("@yjst_sbd"))
if(this.userInfo.custNum.indexOf("@yjst_yj")>-1||(this.userInfo.orgId=='378921748080365568'&&this.userInfo.custNum.indexOf("@yjst_sbd")==-1)){ if(this.userInfo.custNum.indexOf("@yjst_yj")>-1||(this.userInfo.orgId=='999'&&this.userInfo.custNum.indexOf("@yjst_sbd")==-1)){
uni.navigateTo({ url: '/pages/yjCanteen' }); uni.navigateTo({ url: '/pages/yjCanteen' });
}else{ }else{
this.$router.push({ path: '/pages/index' }) this.$router.push({ path: '/pages/index' })
@ -90,7 +90,7 @@ export default {
console.log(index) console.log(index)
if (index === 0) { if (index === 0) {
console.log(this.userInfo.custNum.indexOf("yjst_sbd")) console.log(this.userInfo.custNum.indexOf("yjst_sbd"))
if(this.userInfo.custNum.indexOf("@yjst_yj")>-1||(this.userInfo.orgId=='378921748080365568'&&this.userInfo.custNum.indexOf("@yjst_sbd")==-1)){ if(this.userInfo.custNum.indexOf("@yjst_yj")>-1||(this.userInfo.orgId=='999'&&this.userInfo.custNum.indexOf("@yjst_sbd")==-1)){
uni.navigateTo({ url: '/pages/yjCanteen' }); uni.navigateTo({ url: '/pages/yjCanteen' });
}else{ }else{
this.$router.push({ path: '/pages/index' }) this.$router.push({ path: '/pages/index' })