Skip to content

蒋秀川 / miniProject

Go to a project
Commit c5b4129e by 李君
Options

集团首页

1 parent f5a7da44
Inline Side-by-side
Showing 4 changed files with 168 additions and 193 deletions
miniProject/api/shop.js
let http = require('../utils/request');
module.exports = {
// 获取卡片数据
getCardData(userId, params) {
return http.get(`/report/users/${userId}`, params);
// 获取卡片数据
getCardData(userId, params) {
return http.get(`/report/users/${userId}`, params);
},
// 获取业态客流趋势
getTrendData(userId, params) {
return http.get(`/report/users/${userId}`, params);
// 获取业态客流趋势
getTrendData(userId, params) {
return http.get(`/report/users/${userId}`, params);
},
// 获取停留时长统计
getStopTimeData(userId, params) {
return http.get(`/report/users/${userId}`, params);
// 获取停留时长统计
getStopTimeData(userId, params) {
return http.get(`/report/users/${userId}`, params);
},
// 获取客群性别和年龄
getAgeSexData(userId, params) {
return http.get(`/report/users/${userId}`, params);
// 获取客群性别和年龄
getAgeSexData(userId, params) {
return http.get(`/report/users/${userId}`, params);
},
// 获取店铺位置，面积，天气
getShopDetailData(userId, params) {
return http.get(`/report/users/${userId}`, params);
// 获取店铺位置，面积，天气
getShopDetailData(userId, params) {
return http.get(`/report/users/${userId}`, params);
},
getPermission(id){
return http.get(`/report/auth/api/v1/auth/users/${id}`);
getPermission(id) {
return http.get(`/report/auth/api/v1/auth/users/${id}`);
},
editUserInfo(params){
return http.post(`/report/users/${params.userId}`, params);
editUserInfo(params) {
return http.post(`/report/users/${params.userId}`, params);
},
editUserPwd(params) {
return http.post(`/report/users/updateUser`, params);
},
// 集团首页卡片信息
getAccountCard(params) {
return http.get(`/report/wechat/account/index/info`, params);
},
// 集团首页客流趋势分析
getAccountTrafficTrend(params) {
return http.get(`/report/wechat/account/index/trafficTrend`, params);
},
// 集团首页门店排行
getAccountMallRank(params) {
return http.get(`/report/wechat/account/index/mall/rank`, params);
},
editUserPwd(params){
return http.post(`/report/users/updateUser`, params);
}
}
\ No newline at end of file
miniProject/index/index.js
import {
getCardData,
getTrendData,
getStopTimeData,
getAgeSexData,
getShopDetailData
getAccountCard,
getAccountTrafficTrend,
getAccountMallRank
} from '../api/shop'
import moment from 'moment'
Component({
pageLifetimes: {
show() {
setTimeout(() => {
// console.log(8888)
this.setData({
chartData: this.getLineConfig(), //客流趋势分析数据
chartDatastop: this.getStopTimeConfig(),
selectName: wx.getStorageSync('accountName')
})
}, 1000)
this.loadData()
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
// 当前页面的 tabBar 索引
......@@ -26,28 +18,20 @@ Component({
}
},
data: {
selectName: '',//集团名称
openMllNum:0,//开业门店数
exposure:0,//路过客流量
traffic:0,//客流量
customer:0,//顾客人数
entryRate:0,//进店率
currentTime: moment().format("YYYY-MM-DD"),
types: 1, //选中的时间类型
trendtypes: 1, //选中的业态趋势类型
trendtypes: 'PassengerFlow', //选中的客流趋势类型
chartData: {}, //客流趋势分析数据
chartDatastop: {}, //停留时长统计
show: false, //显示日期自定义选择
minDate: new Date(2022, 0, 1).getTime(), //自定义时间的开始日期
maxDate: new Date(2022, 11, 31).getTime(), //自定义时间的结束日期
// maxDate: new Date(2025, 11, 31).getTime(), //自定义时间的结束日期
rankData: [{
name: '我婆婆呃呃呃',
value: 2000,
percentage: 80
}, {
name: '我婆婆呃呃呃',
value: 2000,
percentage: 80
}, {
name: '我婆婆呃呃呃',
value: 2000,
percentage: 80
}],
rankData: [],
indexVal: 'PassengerFlow',
indexList: [{
name: '客流量',
......@@ -86,6 +70,8 @@ Component({
clickIndex(event) {
this.setData({
indexVal: event.target.dataset.val
},()=>{
this.getMallRank()
});
},
// 点击自定义日期选择器的确定
......@@ -137,7 +123,6 @@ Component({
},
// 获取卡片数据
getCardList() {
// console.log(this.data.currentTime,this.data.selectId,this.data.selectName)
let startTime = this.data.currentTime,
endTime = this.data.currentTime
if (this.data.currentTime.includes('至')) {
......@@ -145,24 +130,81 @@ Component({
startTime = timeArr[0]
endTime = timeArr[1]
}
console.log(startTime, endTime)
getCardData().then(res => {})
getAccountCard({
accountId:wx.getStorageSync('accountId'),
startDate:startTime,
endDate:endTime,
}).then(res => {
this.setData({
selectName:res.data.name,
openMllNum:res.data.openMllNum,
exposure:res.data.exposure,
traffic:res.data.traffic,
customer:res.data.customer,
entryRate:res.data.entryRate,
})
})
},
// 获取业态客流趋势
// 获取客流趋势分析
getTrendList() {
getTrendData().then(res => {})
// wx.showLoading();
let startTime = this.data.currentTime,
endTime = this.data.currentTime
if (this.data.currentTime.includes('至')) {
let timeArr = this.data.currentTime.split('至')
startTime = timeArr[0]
endTime = timeArr[1]
}
getAccountTrafficTrend({
accountId:wx.getStorageSync('accountId'),
startDate:startTime,
endDate:endTime,
dataLevel:'hour',
dataIndex:this.data.trendtypes
}).then(res => {
setTimeout(()=>{
this.setData({
chartData:this.getLineConfig(res.data)
},()=>{
// wx.hideLoading();
})
},1000)
})
},
// 获取停留时长统计
getStopTimeList() {
getStopTimeData().then(res => {})
// 获取门店排行
getMallRank(){
let startTime = this.data.currentTime,
endTime = this.data.currentTime
if (this.data.currentTime.includes('至')) {
let timeArr = this.data.currentTime.split('至')
startTime = timeArr[0]
endTime = timeArr[1]
}
getAccountMallRank({
accountId:wx.getStorageSync('accountId'),
startDate:startTime,
endDate:endTime,
dataIndex:this.data.indexVal
}).then(res => {
let rankData = res.data;
let maxVal = Math.max.apply(Math,rankData.map((o)=>{
return o.value
}))
rankData.forEach(item=>{
item.percentage = parseInt(item.value*100/maxVal);
})
this.setData({
rankData
})
})
},
// 获取所有数据
loadData() {
this.getCardList()
this.getTrendList()
this.getStopTimeList()
this.getMallRank()
},
//点击业态客流趋势top5中的tab触发
//点击客流趋势tab触发
ClickPassageFlow(e) {
this.setData({
trendtypes: e.target.dataset.type
......@@ -172,22 +214,21 @@ Component({
},
// 返回趋势图配置项
getLineConfig(res) {
// let xasix = res.xaxis.data
// let legendList = res.series.map(item => item.name)
// let seriesList = res.series
// if (seriesList.length < 1) {
// return {
// title: {
// text: '暂无数据',
// x: 'center',
// y: 'center',
// textStyle: {
// fontSize: 16,
// fontWeight: 'normal',
// }
// }
// }
// }
let xasix = res.xaxis.data || []
let seriesList = res.series || []
if (seriesList.length < 1) {
return {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
}
}
}
}
return {
grid: {
top: 30,
......@@ -207,7 +248,7 @@ Component({
formatter: function (params) {
let html = ''
params.forEach(item => {
html += item.axisValue + '\n' + item.seriesName + ': ' + item.value
html += item.axisValue+ ': ' + item.value
})
return html
}
......@@ -226,7 +267,7 @@ Component({
width: 1
}
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
data: xasix
},
yAxis: {
type: 'value',
......@@ -242,12 +283,10 @@ Component({
},
},
axisTick: {
show: true,
show: true
},
axisLine: {
show: false,
show: false
},
splitLine: {
show: false
......@@ -256,10 +295,21 @@ Component({
color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'],
// series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,}))
series: [{
name: '客流量',
smooth: true,
lineStyle: {
color: '#34BFFF'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#6384FF' // 0% 处的颜色
}, {
offset: 1, color: '#34BFFF' // 100% 处的颜色
}],
globalCoord: false
}
},
areaStyle: {
// 区域颜色
......@@ -280,7 +330,7 @@ Component({
]
},
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: seriesList[0].data,
type: "line",
symbol: "none",
showSymbol: false,
......@@ -288,100 +338,5 @@ Component({
}]
}
},
// 返回停留时长配置
getStopTimeConfig(confingData) {
let data_sample = [
["type", "停留时长", ''],
["进样", 50, 200],
["离心", 10, 200],
["去盖", 30, 200],
["侧轨", 15, 200],
["侧轨1", 15, 200],
["侧轨2", 15, 200],
["侧轨3", 15, 200],
["出样", 18, 200]
];
// let data_sample = [];
// confingData.xaxis.data.forEach((item, i) => {
// let arr = [];
// arr[0] = item;
// arr[1] = confingData.series[0].data[i];
// arr[2] = 100;
// data_sample.push(arr);
// });
// data_sample.unshift(["type", confingData.title, ""]);
return {
color: ["#33CCFF", "#CCEEFF"],
legend: {
show: false
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "10px",
containLabel: true
},
xAxis: {
type: "value",
// boundaryGap: [0, 0.01],
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: "category",
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
},
dataset: {
source: data_sample
},
series: [{
name: "停留时长",
type: "bar",
barWidth: "40%",
label: {
show: true,
formatter: function (params) {
return params.data[1] + "%";
},
position: ["102%", "0%"]
},
itemStyle: {
color: "#679BFF"
},
z: 3 //让实时在总计上面
},
{
name: "",
type: "bar",
barWidth: "40%",
itemStyle: {
color: "#F5F7F9"
},
barGap: "-100%"
}
]
};
},
}
})
\ No newline at end of file
miniProject/index/index.wxml
......@@ -7,7 +7,7 @@
<image src="../images/banner.png" class='images'></image>
<view class="shop_name">{{selectName}}</view>
<view class="shop_time">
<text>开业门店总数：254个</text>
<text>开业门店总数：{{openMllNum}}个</text>
</view>
</view>
<!-- 选择时间 -->
......@@ -27,40 +27,40 @@
<view class="card_passage">
<image src="../images/keliulaing.png" class="card_image"></image>
<view class="cardName"> 路过客流量</view>
<view class="cardNum"> 35480</view>
<view class="cardNum"> {{exposure}}</view>
</view>
<view class="card_passage">
<image src="../images/keliuliangyellow.png" class="card_image"></image>
<view class="cardName"> 客流量</view>
<view class="cardNum"> 35480</view>
<view class="cardNum"> {{traffic}}</view>
</view>
<view class="card_passage">
<image src="../images/customer.png" class="card_image"></image>
<view class="cardName"> 顾客人数</view>
<view class="cardNum"> 35480</view>
<view class="cardNum"> {{customer}}</view>
</view>
<view class="card_passage">
<image src="../images/jindianlv.png" class="card_image"></image>
<view class="cardName"> 进店率</view>
<view class="cardNum"> 35480</view>
<view class="cardNum"> {{entryRate}} %</view>
</view>
</view>
<!-- 客流趋势分析 -->
<view class="keliuliang">
<text class="title_chart">客流趋势分析</text>
<view class="tab_tll">
<text class="text_tltle {{trendtypes==1?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='1'>过店客流</text>
<text class="text_tltle {{trendtypes==2?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='2'>进店客流</text>
<text class="text_tltle {{trendtypes==3?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='3'>顾客人数</text>
<text class="text_tltle {{trendtypes==4?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='4'>进店率</text>
<text class="text_tltle {{trendtypes=='PassengerFlow'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='PassengerFlow'>过店客流</text>
<text class="text_tltle {{trendtypes=='Exposure'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='Exposure'>进店客流</text>
<text class="text_tltle {{trendtypes=='CustomerNum'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='CustomerNum'>顾客人数</text>
<text class="text_tltle {{trendtypes=='IntoStoreRate'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='IntoStoreRate'>进店率</text>
</view>
<basic chartId='chartDatatrend' chartData="{{chartData}}" height="500rpx"></basic>
</view>
<!-- 停留时长统计 -->
<view class="keliuliang">
<!-- <view class="keliuliang">
<text class="title_chart">停留时长统计</text>
<basic chartId='chartDatastop' chartData="{{chartDatastop}}" height="500rpx"></basic>
</view>
</view> -->
<!-- 门店排行 -->
<view class="keliuliang">
<text class="title_chart">门店排行</text>
......@@ -80,7 +80,7 @@
</view>
<view class="progress progressCustom">
<view class="bar">
<van-progress show-pivot="{{false}}" percentage="{{item.percentage}}" stroke-width="10" />
<van-progress custom-class='customColor' show-pivot="{{false}}" percentage="{{item.percentage}}" stroke-width="10" />
</view>
</view>
</view>
......
miniProject/index/index.wxss
......@@ -162,7 +162,12 @@
margin-bottom: 10rpx;
border-radius: 100rpx;
}
.desc_content{
background-color: #F5F5F7 !important;
}
.desc_content_active{
background: linear-gradient(254deg, #78B3FB 0%, #487EF7 100%) !important;
}
.indexList .desc_info:nth-child(4) {
margin-right: 0 !important;
}
......@@ -242,4 +247,7 @@
text-align: right;
font-size: 28rpx;
font-weight: 900;
}
.customColor .van-progress__portion{
background: linear-gradient(152deg, #597CFF 0%, #7998FF 100%) !important;
}
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!