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'); let http = require('../utils/request');
module.exports = { module.exports = {
// 获取卡片数据 // 获取卡片数据
getCardData(userId, params) { getCardData(userId, params) {
return http.get(`/report/users/${userId}`, params); return http.get(`/report/users/${userId}`, params);
}, },
// 获取业态客流趋势 // 获取业态客流趋势
getTrendData(userId, params) { getTrendData(userId, params) {
return http.get(`/report/users/${userId}`, params); return http.get(`/report/users/${userId}`, params);
}, },
// 获取停留时长统计 // 获取停留时长统计
getStopTimeData(userId, params) { getStopTimeData(userId, params) {
return http.get(`/report/users/${userId}`, params); return http.get(`/report/users/${userId}`, params);
}, },
// 获取客群性别和年龄 // 获取客群性别和年龄
getAgeSexData(userId, params) { getAgeSexData(userId, params) {
return http.get(`/report/users/${userId}`, params); return http.get(`/report/users/${userId}`, params);
}, },
// 获取店铺位置，面积，天气 // 获取店铺位置，面积，天气
getShopDetailData(userId, params) { getShopDetailData(userId, params) {
return http.get(`/report/users/${userId}`, params); return http.get(`/report/users/${userId}`, params);
}, },
getPermission(id){ getPermission(id) {
return http.get(`/report/auth/api/v1/auth/users/${id}`); return http.get(`/report/auth/api/v1/auth/users/${id}`);
}, },
editUserInfo(params){ editUserInfo(params) {
return http.post(`/report/users/${params.userId}`, 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 \ No newline at end of file
miniProject/index/index.js
import { import {
getCardData,
getTrendData,
getStopTimeData, getStopTimeData,
getAgeSexData, getAccountCard,
getShopDetailData getAccountTrafficTrend,
getAccountMallRank
} from '../api/shop' } from '../api/shop'
import moment from 'moment' import moment from 'moment'
Component({ Component({
pageLifetimes: { pageLifetimes: {
show() { show() {
setTimeout(() => { this.loadData()
// console.log(8888)
this.setData({
chartData: this.getLineConfig(), //客流趋势分析数据
chartDatastop: this.getStopTimeConfig(),
selectName: wx.getStorageSync('accountName')
})
}, 1000)
if (typeof this.getTabBar === 'function' && this.getTabBar()) { if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({ this.getTabBar().setData({
// 当前页面的 tabBar 索引 // 当前页面的 tabBar 索引
...@@ -26,28 +18,20 @@ Component({ ...@@ -26,28 +18,20 @@ Component({
} }
}, },
data: { data: {
selectName: '',//集团名称
openMllNum:0,//开业门店数
exposure:0,//路过客流量
traffic:0,//客流量
customer:0,//顾客人数
entryRate:0,//进店率
currentTime: moment().format("YYYY-MM-DD"), currentTime: moment().format("YYYY-MM-DD"),
types: 1, //选中的时间类型 types: 1, //选中的时间类型
trendtypes: 1, //选中的业态趋势类型 trendtypes: 'PassengerFlow', //选中的客流趋势类型
chartData: {}, //客流趋势分析数据 chartData: {}, //客流趋势分析数据
chartDatastop: {}, //停留时长统计
show: false, //显示日期自定义选择 show: false, //显示日期自定义选择
minDate: new Date(2022, 0, 1).getTime(), //自定义时间的开始日期 minDate: new Date(2022, 0, 1).getTime(), //自定义时间的开始日期
maxDate: new Date(2022, 11, 31).getTime(), //自定义时间的结束日期 maxDate: new Date(2022, 11, 31).getTime(), //自定义时间的结束日期
// maxDate: new Date(2025, 11, 31).getTime(), //自定义时间的结束日期 rankData: [],
rankData: [{
name: '我婆婆呃呃呃',
value: 2000,
percentage: 80
}, {
name: '我婆婆呃呃呃',
value: 2000,
percentage: 80
}, {
name: '我婆婆呃呃呃',
value: 2000,
percentage: 80
}],
indexVal: 'PassengerFlow', indexVal: 'PassengerFlow',
indexList: [{ indexList: [{
name: '客流量', name: '客流量',
...@@ -86,6 +70,8 @@ Component({ ...@@ -86,6 +70,8 @@ Component({
clickIndex(event) { clickIndex(event) {
this.setData({ this.setData({
indexVal: event.target.dataset.val indexVal: event.target.dataset.val
},()=>{
this.getMallRank()
}); });
}, },
// 点击自定义日期选择器的确定 // 点击自定义日期选择器的确定
...@@ -137,7 +123,6 @@ Component({ ...@@ -137,7 +123,6 @@ Component({
}, },
// 获取卡片数据 // 获取卡片数据
getCardList() { getCardList() {
// console.log(this.data.currentTime,this.data.selectId,this.data.selectName)
let startTime = this.data.currentTime, let startTime = this.data.currentTime,
endTime = this.data.currentTime endTime = this.data.currentTime
if (this.data.currentTime.includes('至')) { if (this.data.currentTime.includes('至')) {
...@@ -145,24 +130,81 @@ Component({ ...@@ -145,24 +130,81 @@ Component({
startTime = timeArr[0] startTime = timeArr[0]
endTime = timeArr[1] endTime = timeArr[1]
} }
console.log(startTime, endTime) getAccountCard({
getCardData().then(res => {}) 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() { 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() { getMallRank(){
getStopTimeData().then(res => {}) 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() { loadData() {
this.getCardList() this.getCardList()
this.getTrendList() this.getTrendList()
this.getStopTimeList() this.getMallRank()
}, },
//点击业态客流趋势top5中的tab触发 //点击客流趋势tab触发
ClickPassageFlow(e) { ClickPassageFlow(e) {
this.setData({ this.setData({
trendtypes: e.target.dataset.type trendtypes: e.target.dataset.type
...@@ -172,22 +214,21 @@ Component({ ...@@ -172,22 +214,21 @@ Component({
}, },
// 返回趋势图配置项 // 返回趋势图配置项
getLineConfig(res) { getLineConfig(res) {
// let xasix = res.xaxis.data let xasix = res.xaxis.data || []
// let legendList = res.series.map(item => item.name) let seriesList = res.series || []
// let seriesList = res.series if (seriesList.length < 1) {
// if (seriesList.length < 1) { return {
// return { title: {
// title: { text: '暂无数据',
// text: '暂无数据', x: 'center',
// x: 'center', y: 'center',
// y: 'center', textStyle: {
// textStyle: { fontSize: 16,
// fontSize: 16, fontWeight: 'normal',
// fontWeight: 'normal', }
// } }
// } }
// } }
// }
return { return {
grid: { grid: {
top: 30, top: 30,
...@@ -207,7 +248,7 @@ Component({ ...@@ -207,7 +248,7 @@ Component({
formatter: function (params) { formatter: function (params) {
let html = '' let html = ''
params.forEach(item => { params.forEach(item => {
html += item.axisValue + '\n' + item.seriesName + ': ' + item.value html += item.axisValue+ ': ' + item.value
}) })
return html return html
} }
...@@ -226,7 +267,7 @@ Component({ ...@@ -226,7 +267,7 @@ Component({
width: 1 width: 1
} }
}, },
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] data: xasix
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
...@@ -242,12 +283,10 @@ Component({ ...@@ -242,12 +283,10 @@ Component({
}, },
}, },
axisTick: { axisTick: {
show: true, show: true
}, },
axisLine: { axisLine: {
show: false, show: false
}, },
splitLine: { splitLine: {
show: false show: false
...@@ -256,10 +295,21 @@ Component({ ...@@ -256,10 +295,21 @@ Component({
color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'], color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'],
// series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,})) // series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,}))
series: [{ series: [{
name: '客流量',
smooth: true, smooth: true,
lineStyle: { 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: { areaStyle: {
// 区域颜色 // 区域颜色
...@@ -280,7 +330,7 @@ Component({ ...@@ -280,7 +330,7 @@ Component({
] ]
}, },
}, },
data: [820, 932, 901, 934, 1290, 1330, 1320], data: seriesList[0].data,
type: "line", type: "line",
symbol: "none", symbol: "none",
showSymbol: false, showSymbol: false,
...@@ -288,100 +338,5 @@ Component({ ...@@ -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 \ No newline at end of file
miniProject/index/index.wxml
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<image src="../images/banner.png" class='images'></image> <image src="../images/banner.png" class='images'></image>
<view class="shop_name">{{selectName}}</view> <view class="shop_name">{{selectName}}</view>
<view class="shop_time"> <view class="shop_time">
<text>开业门店总数：254个</text> <text>开业门店总数：{{openMllNum}}个</text>
</view> </view>
</view> </view>
<!-- 选择时间 --> <!-- 选择时间 -->
...@@ -27,40 +27,40 @@ ...@@ -27,40 +27,40 @@
<view class="card_passage"> <view class="card_passage">
<image src="../images/keliulaing.png" class="card_image"></image> <image src="../images/keliulaing.png" class="card_image"></image>
<view class="cardName"> 路过客流量</view> <view class="cardName"> 路过客流量</view>
<view class="cardNum"> 35480</view> <view class="cardNum"> {{exposure}}</view>
</view> </view>
<view class="card_passage"> <view class="card_passage">
<image src="../images/keliuliangyellow.png" class="card_image"></image> <image src="../images/keliuliangyellow.png" class="card_image"></image>
<view class="cardName"> 客流量</view> <view class="cardName"> 客流量</view>
<view class="cardNum"> 35480</view> <view class="cardNum"> {{traffic}}</view>
</view> </view>
<view class="card_passage"> <view class="card_passage">
<image src="../images/customer.png" class="card_image"></image> <image src="../images/customer.png" class="card_image"></image>
<view class="cardName"> 顾客人数</view> <view class="cardName"> 顾客人数</view>
<view class="cardNum"> 35480</view> <view class="cardNum"> {{customer}}</view>
</view> </view>
<view class="card_passage"> <view class="card_passage">
<image src="../images/jindianlv.png" class="card_image"></image> <image src="../images/jindianlv.png" class="card_image"></image>
<view class="cardName"> 进店率</view> <view class="cardName"> 进店率</view>
<view class="cardNum"> 35480</view> <view class="cardNum"> {{entryRate}} %</view>
</view> </view>
</view> </view>
<!-- 客流趋势分析 --> <!-- 客流趋势分析 -->
<view class="keliuliang"> <view class="keliuliang">
<text class="title_chart">客流趋势分析</text> <text class="title_chart">客流趋势分析</text>
<view class="tab_tll"> <view class="tab_tll">
<text class="text_tltle {{trendtypes==1?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='1'>过店客流</text> <text class="text_tltle {{trendtypes=='PassengerFlow'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='PassengerFlow'>过店客流</text>
<text class="text_tltle {{trendtypes==2?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='2'>进店客流</text> <text class="text_tltle {{trendtypes=='Exposure'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='Exposure'>进店客流</text>
<text class="text_tltle {{trendtypes==3?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='3'>顾客人数</text> <text class="text_tltle {{trendtypes=='CustomerNum'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='CustomerNum'>顾客人数</text>
<text class="text_tltle {{trendtypes==4?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='4'>进店率</text> <text class="text_tltle {{trendtypes=='IntoStoreRate'?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='IntoStoreRate'>进店率</text>
</view> </view>
<basic chartId='chartDatatrend' chartData="{{chartData}}" height="500rpx"></basic> <basic chartId='chartDatatrend' chartData="{{chartData}}" height="500rpx"></basic>
</view> </view>
<!-- 停留时长统计 --> <!-- 停留时长统计 -->
<view class="keliuliang"> <!-- <view class="keliuliang">
<text class="title_chart">停留时长统计</text> <text class="title_chart">停留时长统计</text>
<basic chartId='chartDatastop' chartData="{{chartDatastop}}" height="500rpx"></basic> <basic chartId='chartDatastop' chartData="{{chartDatastop}}" height="500rpx"></basic>
</view> </view> -->
<!-- 门店排行 --> <!-- 门店排行 -->
<view class="keliuliang"> <view class="keliuliang">
<text class="title_chart">门店排行</text> <text class="title_chart">门店排行</text>
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
</view> </view>
<view class="progress progressCustom"> <view class="progress progressCustom">
<view class="bar"> <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> </view>
</view> </view>
......
miniProject/index/index.wxss
...@@ -162,7 +162,12 @@ ...@@ -162,7 +162,12 @@
margin-bottom: 10rpx; margin-bottom: 10rpx;
border-radius: 100rpx; 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) { .indexList .desc_info:nth-child(4) {
margin-right: 0 !important; margin-right: 0 !important;
} }
...@@ -242,4 +247,7 @@ ...@@ -242,4 +247,7 @@
text-align: right; text-align: right;
font-size: 28rpx; font-size: 28rpx;
font-weight: 900; font-weight: 900;
}
.customColor .van-progress__portion{
background: linear-gradient(152deg, #597CFF 0%, #7998FF 100%) !important;
} }
\ No newline at end of file \ 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!