客流统计4
This commit is contained in:
parent
90a72b2d62
commit
202b06f516
|
|
@ -87,18 +87,17 @@
|
|||
</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;"> -->
|
||||
<view class="image-box">
|
||||
<image src="/static/images/index/passenger.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="box-title">客流统计</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">
|
||||
<image src="/static/images/index/yjCanteen.png" style="width: 50px;height: 50px;" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="box-title">运检食堂</view> -->
|
||||
<view class="box-title">运检食堂</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -15,16 +15,35 @@
|
|||
mode="aspectFill"
|
||||
></image>
|
||||
<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">
|
||||
<text>当前客流： {{ item.presentNum }}人</text>
|
||||
<text class="business-hours">营业时间： {{ item.startBusinessTime }} - {{item.endBusinessTime}}</text>
|
||||
<view style="margin-bottom: 5px;display: flex;align-items: center;">
|
||||
<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 class="status-box" :class="{ 'status-open': item.isOpen }">
|
||||
{{ item.isOpen ? '营业中' : '休息中' }}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -38,10 +57,10 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
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() {
|
||||
this.queryNowPresentNum()
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -50,9 +69,12 @@ export default {
|
|||
let param = {
|
||||
"custId":uni.getStorageSync('custId')
|
||||
}
|
||||
const res = await queryNowPresentNumApi(param)
|
||||
console.log('?? ~ getList ~ res:', res)
|
||||
const res = await queryNowPresentNumApi(param)
|
||||
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()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
|
|
@ -81,7 +103,8 @@ export default {
|
|||
url: `/pages/passenger/flowDetail?params=${JSON.stringify(item)}`
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.updateMerchantStatus();
|
||||
// 可以设置一个定时器，定期更新营业状态
|
||||
|
|
@ -123,8 +146,8 @@ export default {
|
|||
align-items: center;
|
||||
|
||||
.merchant-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
|
@ -138,6 +161,7 @@ export default {
|
|||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.merchant-stats {
|
||||
|
|
@ -155,21 +179,36 @@ export default {
|
|||
}
|
||||
|
||||
.status-box {
|
||||
max-width: 10%;
|
||||
width: 36rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
padding: 4rpx 4rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
margin-left: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4rpx;
|
||||
position: absolute;
|
||||
top: 36rpx;
|
||||
right: 24rpx;
|
||||
// position: absolute;
|
||||
// top: 36rpx;
|
||||
// right: 24rpx;
|
||||
|
||||
&.status-open {
|
||||
color: #ff6633;
|
||||
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>
|
||||
|
|
@ -8,23 +8,37 @@
|
|||
</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 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: 40%;">进场人数:</view>
|
||||
<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: 40%;">出场人数:</view>
|
||||
<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: 40%;">最大容纳人数:</view>
|
||||
<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: 40%;">峰值人数:</view>
|
||||
<view style="font-weight: bold;width: 35%;">峰值人数:</view>
|
||||
<view>{{flowData.presentFlowVOList[0].peakNum}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -103,11 +117,12 @@ export default {
|
|||
}
|
||||
],
|
||||
"updateTime": "2025-06-10 10:40:05",
|
||||
"presentNum": 9,
|
||||
"presentNum": 200,
|
||||
"enters": 218,
|
||||
"exits": 209,
|
||||
"capacity": 400
|
||||
},
|
||||
personRate:0,
|
||||
chartData:{},
|
||||
opts: {
|
||||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||||
|
|
@ -135,10 +150,9 @@ export default {
|
|||
options = JSON.parse(options.params)
|
||||
this.canteenItem = options
|
||||
console.log(this.canteenItem)
|
||||
this.dateList = this.getRecentWeekDates()
|
||||
this.dateList = this.getRecentWeekDates()
|
||||
},
|
||||
onReady() {
|
||||
// this.initChart()
|
||||
onReady() {
|
||||
this.queryNowPresentNum();
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -161,13 +175,15 @@ export default {
|
|||
let param = {
|
||||
"canteenId":this.canteenItem.canteenId,
|
||||
"periods":1,
|
||||
"presentDate":this.dateList,
|
||||
"presentDate":this.dateList
|
||||
}
|
||||
const res = await queryPassengerNumApi(param)
|
||||
console.log('?? ~ getList ~ res:', res)
|
||||
this.flowData = res.data;
|
||||
this.initChart()
|
||||
|
||||
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)
|
||||
}
|
||||
|
|
@ -200,6 +216,8 @@ export default {
|
|||
})
|
||||
}
|
||||
console.log(xData)
|
||||
console.log(line1)
|
||||
console.log(line2)
|
||||
var lineData = {
|
||||
categories: xData,
|
||||
series: [
|
||||
|
|
@ -243,5 +261,17 @@ export default {
|
|||
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>
|
||||
|
|
@ -75,7 +75,7 @@ export default {
|
|||
console.log(index)
|
||||
if (index === 0) {
|
||||
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' });
|
||||
}else{
|
||||
this.$router.push({ path: '/pages/index' })
|
||||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
console.log(index)
|
||||
if (index === 0) {
|
||||
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' });
|
||||
}else{
|
||||
this.$router.push({ path: '/pages/index' })
|
||||
|
|
|
|||
Loading…
Reference in New Issue